#2861

microsoft · Nov 21, 2024 · 36883a4 · 36883a4
1 parent 486ea52
commit 36883a4
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 24 deletions.
diff --git a/packages/roosterjs-content-model-core/lib/coreApi/formatContentModel/formatContentModel.ts b/packages/roosterjs-content-model-core/lib/coreApi/formatContentModel/formatContentModel.ts
@@ -136,10 +136,19 @@ function handlePendingFormat(
         context.newPendingFormat == 'preserve'
             ? core.format.pendingFormat?.format
             : context.newPendingFormat;
-
-    if (pendingFormat && selection?.type == 'range' && selection.range.collapsed) {
+    const pendingParagraphFormat =
+        context.newPendingParagraphFormat == 'preserve'
+            ? core.format.pendingFormat?.paragraphFormat
+            : context.newPendingParagraphFormat;
+
+    if (
+        (pendingFormat || pendingParagraphFormat) &&
+        selection?.type == 'range' &&
+        selection.range.collapsed
+    ) {
         core.format.pendingFormat = {
-            format: { ...pendingFormat },
+            format: pendingFormat ? { ...pendingFormat } : undefined,
+            paragraphFormat: pendingParagraphFormat ? { ...pendingParagraphFormat } : undefined,
             insertPoint: {
                 node: selection.range.startContainer,
                 offset: selection.range.startOffset,

diff --git a/packages/roosterjs-content-model-core/lib/corePlugin/format/FormatPlugin.ts b/packages/roosterjs-content-model-core/lib/corePlugin/format/FormatPlugin.ts
@@ -118,13 +118,16 @@ class FormatPlugin implements PluginWithState<FormatPluginState> {
                 break;
 
             case 'keyDown':
-                const isAndroidIME = this.editor.getEnvironment().isAndroid && event.rawEvent.key == UnidentifiedKey;
+                const isAndroidIME =
+                    this.editor.getEnvironment().isAndroid && event.rawEvent.key == UnidentifiedKey;
                 if (isCursorMovingKey(event.rawEvent)) {
                     this.clearPendingFormat();
                     this.lastCheckedNode = null;
                 } else if (
                     this.defaultFormatKeys.size > 0 &&
-                    (isAndroidIME || isCharacterValue(event.rawEvent) || event.rawEvent.key == ProcessKey) &&
+                    (isAndroidIME ||
+                        isCharacterValue(event.rawEvent) ||
+                        event.rawEvent.key == ProcessKey) &&
                     this.shouldApplyDefaultFormat(this.editor)
                 ) {
                     applyDefaultFormat(this.editor, this.state.defaultFormat);
@@ -145,7 +148,12 @@ class FormatPlugin implements PluginWithState<FormatPluginState> {
 
     private checkAndApplyPendingFormat(data: string | null) {
         if (this.editor && data && this.state.pendingFormat) {
-            applyPendingFormat(this.editor, data, this.state.pendingFormat.format);
+            applyPendingFormat(
+                this.editor,
+                data,
+                this.state.pendingFormat.format,
+                this.state.pendingFormat.paragraphFormat
+            );
             this.clearPendingFormat();
         }
     }

diff --git a/packages/roosterjs-content-model-core/lib/corePlugin/format/applyPendingFormat.ts b/packages/roosterjs-content-model-core/lib/corePlugin/format/applyPendingFormat.ts
@@ -1,11 +1,16 @@
 import {
     createText,
     iterateSelections,
+    mutateBlock,
     mutateSegment,
     normalizeContentModel,
     setParagraphNotImplicit,
 } from 'roosterjs-content-model-dom';
-import type { ContentModelSegmentFormat, IEditor } from 'roosterjs-content-model-types';
+import type {
+    ContentModelBlockFormat,
+    ContentModelSegmentFormat,
+    IEditor,
+} from 'roosterjs-content-model-types';
 
 const ANSI_SPACE = '\u0020';
 const NON_BREAK_SPACE = '\u00A0';
@@ -19,7 +24,8 @@ const NON_BREAK_SPACE = '\u00A0';
 export function applyPendingFormat(
     editor: IEditor,
     data: string,
-    format: ContentModelSegmentFormat
+    segmentFormat?: ContentModelSegmentFormat,
+    paragraphFormat?: ContentModelBlockFormat
 ) {
     let isChanged = false;
 
@@ -41,24 +47,35 @@ export function applyPendingFormat(
 
                         // For space, there can be &#32 (space) or &#160 (&nbsp;), we treat them as the same
                         if (subStr == data || (data == ANSI_SPACE && subStr == NON_BREAK_SPACE)) {
-                            mutateSegment(block, previousSegment, previousSegment => {
-                                previousSegment.text = text.substring(0, text.length - data.length);
-                            });
+                            if (segmentFormat) {
+                                mutateSegment(block, previousSegment, previousSegment => {
+                                    previousSegment.text = text.substring(
+                                        0,
+                                        text.length - data.length
+                                    );
+                                });
 
-                            mutateSegment(block, marker, (marker, block) => {
-                                marker.format = { ...format };
+                                mutateSegment(block, marker, (marker, block) => {
+                                    marker.format = { ...segmentFormat };
 
-                                const newText = createText(
-                                    data == ANSI_SPACE ? NON_BREAK_SPACE : data,
-                                    {
-                                        ...previousSegment.format,
-                                        ...format,
-                                    }
-                                );
+                                    const newText = createText(
+                                        data == ANSI_SPACE ? NON_BREAK_SPACE : data,
+                                        {
+                                            ...previousSegment.format,
+                                            ...segmentFormat,
+                                        }
+                                    );
 
-                                block.segments.splice(index, 0, newText);
-                                setParagraphNotImplicit(block);
-                            });
+                                    block.segments.splice(index, 0, newText);
+                                    setParagraphNotImplicit(block);
+                                });
+                            }
+
+                            if (paragraphFormat) {
+                                const mutableParagraph = mutateBlock(block);
+
+                                Object.assign(mutableParagraph.format, paragraphFormat);
+                            }
 
                             isChanged = true;
                         }

diff --git a/packages/roosterjs-content-model-types/lib/parameter/FormatContentModelContext.ts b/packages/roosterjs-content-model-types/lib/parameter/FormatContentModelContext.ts
@@ -1,3 +1,4 @@
+import { ContentModelBlockFormat } from 'roosterjs/lib';
 import type { AnnounceData } from './AnnounceData';
 import type { ContentModelEntity } from '../contentModel/entity/ContentModelEntity';
 import type { ContentModelImage } from '../contentModel/segment/ContentModelImage';
@@ -87,6 +88,15 @@ export interface FormatContentModelContext {
      */
     newPendingFormat?: ContentModelSegmentFormat | 'preserve';
 
+    /**
+     * @optional
+     * Specify new pending format for paragraph
+     * To keep current format event selection position is changed, set this value to "preserved", editor will update pending format position to the new position
+     * To set a new pending format, set this property to the format object
+     * Otherwise, leave it there and editor will automatically decide if the original pending format is still available
+     */
+    newPendingParagraphFormat?: ContentModelBlockFormat | 'preserve';
+
     /**
      * @optional Entity states related to the format API that will be added together with undo snapshot.
      * When entity states are set, each entity state will cause an EntityOperation event with operation = EntityOperation.UpdateEntityState

diff --git a/packages/roosterjs-content-model-types/lib/pluginState/FormatPluginState.ts b/packages/roosterjs-content-model-types/lib/pluginState/FormatPluginState.ts
@@ -1,5 +1,6 @@
 import type { DOMInsertPoint } from '../selection/DOMSelection';
 import type { ContentModelSegmentFormat } from '../contentModel/format/ContentModelSegmentFormat';
+import type { ContentModelBlockFormat } from '../contentModel/format/ContentModelBlockFormat';
 
 /**
  * Pending format holder interface
@@ -8,7 +9,12 @@ export interface PendingFormat {
     /**
      * The pending format
      */
-    format: ContentModelSegmentFormat;
+    format?: ContentModelSegmentFormat;
+
+    /**
+     * Customized format for paragraph
+     */
+    paragraphFormat?: ContentModelBlockFormat;
 
     /**
      * Insert point of pending format