Merge branch 'master' into xiaozhe/fix_android_keyboard_delete

Rain-Zheng · Feb 7, 2024 · 5f7a69c · 5f7a69c
2 parents 43e6cbe + 3ed92bd
commit 5f7a69c
Show file tree

Hide file tree

Showing 123 changed files with 2,495 additions and 918 deletions.
diff --git a/demo/scripts/controls/ContentModelEditorMainPane.tsx b/demo/scripts/controls/ContentModelEditorMainPane.tsx
@@ -20,6 +20,7 @@ import { alignJustifyButton } from './ribbonButtons/contentModel/alignJustifyBut
 import { alignLeftButton } from './ribbonButtons/contentModel/alignLeftButton';
 import { alignRightButton } from './ribbonButtons/contentModel/alignRightButton';
 import { arrayPush } from 'roosterjs-editor-dom';
+import { AutoFormatPlugin, EditPlugin, PastePlugin } from 'roosterjs-content-model-plugins';
 import { backgroundColorButton } from './ribbonButtons/contentModel/backgroundColorButton';
 import { blockQuoteButton } from './ribbonButtons/contentModel/blockQuoteButton';
 import { boldButton } from './ribbonButtons/contentModel/boldButton';
@@ -91,11 +92,6 @@ import {
     tableMergeButton,
     tableSplitButton,
 } from './ribbonButtons/contentModel/tableEditButtons';
-import {
-    ContentModelAutoFormatPlugin,
-    ContentModelEditPlugin,
-    ContentModelPastePlugin,
-} from 'roosterjs-content-model-plugins';
 import {
     ContentModelEditor,
     ContentModelEditorOptions,
@@ -168,15 +164,15 @@ class ContentModelEditorMainPane extends MainPaneBase<ContentModelMainPaneState>
     private eventViewPlugin: ContentModelEventViewPlugin;
     private apiPlaygroundPlugin: ApiPlaygroundPlugin;
     private contentModelPanePlugin: ContentModelPanePlugin;
-    private contentModelEditPlugin: ContentModelEditPlugin;
-    private contentModelAutoFormatPlugin: ContentModelAutoFormatPlugin;
+    private contentModelEditPlugin: EditPlugin;
+    private contentModelAutoFormatPlugin: AutoFormatPlugin;
     private contentModelRibbonPlugin: RibbonPlugin;
     private pasteOptionPlugin: EditorPlugin;
     private emojiPlugin: EditorPlugin;
     private snapshotPlugin: ContentModelSnapshotPlugin;
     private toggleablePlugins: EditorPlugin[] | null = null;
     private formatPainterPlugin: ContentModelFormatPainterPlugin;
-    private pastePlugin: ContentModelPastePlugin;
+    private pastePlugin: PastePlugin;
     private sampleEntityPlugin: SampleEntityPlugin;
     private snapshots: Snapshots;
     private buttons: ContentModelRibbonButton<any>[] = [
@@ -261,13 +257,13 @@ class ContentModelEditorMainPane extends MainPaneBase<ContentModelMainPaneState>
         this.apiPlaygroundPlugin = new ApiPlaygroundPlugin();
         this.snapshotPlugin = new ContentModelSnapshotPlugin(this.snapshots);
         this.contentModelPanePlugin = new ContentModelPanePlugin();
-        this.contentModelEditPlugin = new ContentModelEditPlugin();
-        this.contentModelAutoFormatPlugin = new ContentModelAutoFormatPlugin();
+        this.contentModelEditPlugin = new EditPlugin();
+        this.contentModelAutoFormatPlugin = new AutoFormatPlugin();
         this.contentModelRibbonPlugin = new ContentModelRibbonPlugin();
         this.pasteOptionPlugin = createPasteOptionPlugin();
         this.emojiPlugin = createEmojiPlugin();
         this.formatPainterPlugin = new ContentModelFormatPainterPlugin();
-        this.pastePlugin = new ContentModelPastePlugin();
+        this.pastePlugin = new PastePlugin();
         this.sampleEntityPlugin = new SampleEntityPlugin();
         this.state = {
             showSidePane: window.location.hash != '',

diff --git a/demo/scripts/controls/StandaloneEditorMainPane.tsx b/demo/scripts/controls/StandaloneEditorMainPane.tsx
@@ -17,6 +17,7 @@ import { alignCenterButton } from './ribbonButtons/contentModel/alignCenterButto
 import { alignJustifyButton } from './ribbonButtons/contentModel/alignJustifyButton';
 import { alignLeftButton } from './ribbonButtons/contentModel/alignLeftButton';
 import { alignRightButton } from './ribbonButtons/contentModel/alignRightButton';
+import { AutoFormatPlugin, EditPlugin } from 'roosterjs-content-model-plugins';
 import { backgroundColorButton } from './ribbonButtons/contentModel/backgroundColorButton';
 import { blockQuoteButton } from './ribbonButtons/contentModel/blockQuoteButton';
 import { boldButton } from './ribbonButtons/contentModel/boldButton';
@@ -93,10 +94,6 @@ import {
     tableMergeButton,
     tableSplitButton,
 } from './ribbonButtons/contentModel/tableEditButtons';
-import {
-    ContentModelAutoFormatPlugin,
-    ContentModelEditPlugin,
-} from 'roosterjs-content-model-plugins';
 
 const styles = require('./StandaloneEditorMainPane.scss');
 
@@ -164,9 +161,9 @@ class ContentModelEditorMainPane extends MainPaneBase<ContentModelMainPaneState>
     private eventViewPlugin: ContentModelEventViewPlugin;
     private apiPlaygroundPlugin: ApiPlaygroundPlugin;
     private contentModelPanePlugin: ContentModelPanePlugin;
-    private contentModelEditPlugin: ContentModelEditPlugin;
+    private contentModelEditPlugin: EditPlugin;
     private contentModelRibbonPlugin: RibbonPlugin;
-    private contentAutoFormatPlugin: ContentModelAutoFormatPlugin;
+    private contentAutoFormatPlugin: AutoFormatPlugin;
     private snapshotPlugin: ContentModelSnapshotPlugin;
     private formatPainterPlugin: ContentModelFormatPainterPlugin;
     private snapshots: Snapshots<Snapshot>;
@@ -252,8 +249,8 @@ class ContentModelEditorMainPane extends MainPaneBase<ContentModelMainPaneState>
         this.apiPlaygroundPlugin = new ApiPlaygroundPlugin();
         this.snapshotPlugin = new ContentModelSnapshotPlugin(this.snapshots);
         this.contentModelPanePlugin = new ContentModelPanePlugin();
-        this.contentModelEditPlugin = new ContentModelEditPlugin();
-        this.contentAutoFormatPlugin = new ContentModelAutoFormatPlugin();
+        this.contentModelEditPlugin = new EditPlugin();
+        this.contentAutoFormatPlugin = new AutoFormatPlugin();
         this.contentModelRibbonPlugin = new ContentModelRibbonPlugin();
         this.formatPainterPlugin = new ContentModelFormatPainterPlugin();
         this.state = {

diff --git a/demo/scripts/controls/sidePane/editorOptions/codes/SimplePluginCode.ts b/demo/scripts/controls/sidePane/editorOptions/codes/SimplePluginCode.ts
@@ -18,7 +18,7 @@ export class PasteCode extends SimplePluginCode {
 
 export class ContentModelPasteCode extends SimplePluginCode {
     constructor() {
-        super('ContentModelPastePlugin', 'roosterjsContentModel');
+        super('PastePlugin', 'roosterjsContentModel');
     }
 }
 

diff --git a/packages-content-model/roosterjs-content-model-api/lib/index.ts b/packages-content-model/roosterjs-content-model-api/lib/index.ts
@@ -40,4 +40,6 @@ export { default as adjustImageSelection } from './publicApi/image/adjustImageSe
 export { default as setParagraphMargin } from './publicApi/block/setParagraphMargin';
 export { default as toggleCode } from './publicApi/segment/toggleCode';
 export { default as insertEntity } from './publicApi/entity/insertEntity';
+
+export { formatTableWithContentModel } from './publicApi/utils/formatTableWithContentModel';
 export { setListType } from './modelApi/list/setListType';
diff --git a/packages-content-model/roosterjs-content-model-api/lib/modelApi/block/setModelIndentation.ts b/packages-content-model/roosterjs-content-model-api/lib/modelApi/block/setModelIndentation.ts
@@ -1,5 +1,9 @@
 import { createListLevel, parseValueWithUnit } from 'roosterjs-content-model-dom';
-import { getOperationalBlocks, isBlockGroupOfType } from 'roosterjs-content-model-core';
+import {
+    getOperationalBlocks,
+    isBlockGroupOfType,
+    updateListMetadata,
+} from 'roosterjs-content-model-core';
 import type {
     ContentModelDocument,
     ContentModelListItem,
@@ -32,6 +36,12 @@ export function setModelIndentation(
                     lastLevel?.format
                 );
 
+                updateListMetadata(newLevel, metadata => {
+                    metadata = metadata || {};
+                    metadata.applyListStyleFromLevel = true;
+                    return metadata;
+                });
+
                 // New level is totally new, no need to have these attributes for now
                 delete newLevel.format.startNumberOverride;
 

diff --git a/packages-content-model/roosterjs-content-model-api/lib/modelApi/entity/insertEntityModel.ts b/packages-content-model/roosterjs-content-model-api/lib/modelApi/entity/insertEntityModel.ts
@@ -16,7 +16,7 @@ import type {
     ContentModelEntity,
     ContentModelParagraph,
     DeleteSelectionResult,
-    FormatWithContentModelContext,
+    FormatContentModelContext,
     InsertEntityPosition,
 } from 'roosterjs-content-model-types';
 
@@ -29,7 +29,7 @@ export function insertEntityModel(
     position: InsertEntityPosition,
     isBlock: boolean,
     focusAfterEntity?: boolean,
-    context?: FormatWithContentModelContext
+    context?: FormatContentModelContext
 ) {
     let blockParent: ContentModelBlockGroup | undefined;
     let blockIndex = -1;

diff --git a/packages-content-model/roosterjs-content-model-api/lib/publicApi/entity/insertEntity.ts b/packages-content-model/roosterjs-content-model-api/lib/publicApi/entity/insertEntity.ts
@@ -9,6 +9,7 @@ import type {
     IStandaloneEditor,
 } from 'roosterjs-content-model-types';
 
+const BlockEntityTag = 'div';
 const InlineEntityTag = 'span';
 
 /**
@@ -57,11 +58,10 @@ export default function insertEntity(
     options?: InsertEntityOptions
 ): ContentModelEntity | null {
     const { contentNode, focusAfterEntity, wrapperDisplay, skipUndoSnapshot } = options || {};
-    const wrapper = editor.getDocument().createElement(InlineEntityTag);
-    if (isBlock) {
-        wrapper.style.width = '100%';
-    }
-    wrapper.style.setProperty('display', wrapperDisplay ?? ('inline-block' || null));
+    const wrapper = editor.getDocument().createElement(isBlock ? BlockEntityTag : InlineEntityTag);
+    const display = wrapperDisplay ?? (isBlock ? undefined : 'inline-block');
+
+    wrapper.style.setProperty('display', display || null);
 
     if (contentNode) {
         wrapper.appendChild(contentNode);

diff --git a/packages-content-model/roosterjs-content-model-api/lib/publicApi/table/editTable.ts b/packages-content-model/roosterjs-content-model-api/lib/publicApi/table/editTable.ts
@@ -2,32 +2,19 @@ import { alignTable } from '../../modelApi/table/alignTable';
 import { deleteTable } from '../../modelApi/table/deleteTable';
 import { deleteTableColumn } from '../../modelApi/table/deleteTableColumn';
 import { deleteTableRow } from '../../modelApi/table/deleteTableRow';
-import { ensureFocusableParagraphForTable } from '../../modelApi/table/ensureFocusableParagraphForTable';
+import { formatTableWithContentModel } from '../utils/formatTableWithContentModel';
 import { insertTableColumn } from '../../modelApi/table/insertTableColumn';
 import { insertTableRow } from '../../modelApi/table/insertTableRow';
 import { mergeTableCells } from '../../modelApi/table/mergeTableCells';
 import { mergeTableColumn } from '../../modelApi/table/mergeTableColumn';
 import { mergeTableRow } from '../../modelApi/table/mergeTableRow';
 import { splitTableCellHorizontally } from '../../modelApi/table/splitTableCellHorizontally';
 import { splitTableCellVertically } from '../../modelApi/table/splitTableCellVertically';
-
-import {
-    hasSelectionInBlock,
-    applyTableFormat,
-    getFirstSelectedTable,
-    normalizeTable,
-    setSelection,
-} from 'roosterjs-content-model-core';
 import type { TableOperation, IStandaloneEditor } from 'roosterjs-content-model-types';
 import {
     alignTableCellHorizontally,
     alignTableCellVertically,
 } from '../../modelApi/table/alignTableCell';
-import {
-    createSelectionMarker,
-    hasMetadata,
-    setParagraphNotImplicit,
-} from 'roosterjs-content-model-dom';
 
 /**
  * Format current focused table with the given format
@@ -37,98 +24,67 @@ import {
 export default function editTable(editor: IStandaloneEditor, operation: TableOperation) {
     editor.focus();
 
-    editor.formatContentModel(
-        model => {
-            const [tableModel, path] = getFirstSelectedTable(model);
-
-            if (tableModel) {
-                switch (operation) {
-                    case 'alignCellLeft':
-                    case 'alignCellCenter':
-                    case 'alignCellRight':
-                        alignTableCellHorizontally(tableModel, operation);
-                        break;
-                    case 'alignCellTop':
-                    case 'alignCellMiddle':
-                    case 'alignCellBottom':
-                        alignTableCellVertically(tableModel, operation);
-                        break;
-                    case 'alignCenter':
-                    case 'alignLeft':
-                    case 'alignRight':
-                        alignTable(tableModel, operation);
-                        break;
-
-                    case 'deleteColumn':
-                        deleteTableColumn(tableModel);
-                        break;
-
-                    case 'deleteRow':
-                        deleteTableRow(tableModel);
-                        break;
-
-                    case 'deleteTable':
-                        deleteTable(tableModel);
-                        break;
-
-                    case 'insertAbove':
-                    case 'insertBelow':
-                        insertTableRow(tableModel, operation);
-                        break;
-
-                    case 'insertLeft':
-                    case 'insertRight':
-                        insertTableColumn(tableModel, operation);
-                        break;
-
-                    case 'mergeAbove':
-                    case 'mergeBelow':
-                        mergeTableRow(tableModel, operation);
-                        break;
-
-                    case 'mergeCells':
-                        mergeTableCells(tableModel);
-                        break;
-
-                    case 'mergeLeft':
-                    case 'mergeRight':
-                        mergeTableColumn(tableModel, operation);
-                        break;
-
-                    case 'splitHorizontally':
-                        splitTableCellHorizontally(tableModel);
-                        break;
-
-                    case 'splitVertically':
-                        splitTableCellVertically(tableModel);
-                        break;
-                }
-
-                if (!hasSelectionInBlock(tableModel)) {
-                    const paragraph = ensureFocusableParagraphForTable(model, path, tableModel);
-
-                    if (paragraph) {
-                        const marker = createSelectionMarker(model.format);
-
-                        paragraph.segments.unshift(marker);
-                        setParagraphNotImplicit(paragraph);
-                        setSelection(model, marker);
-                    }
-                }
-
-                normalizeTable(tableModel, model.format);
-
-                if (hasMetadata(tableModel)) {
-                    applyTableFormat(tableModel, undefined /*newFormat*/, true /*keepCellShade*/);
-                }
-
-                return true;
-            } else {
-                return false;
-            }
-        },
-        {
-            apiName: 'editTable',
+    formatTableWithContentModel(editor, 'editTable', tableModel => {
+        switch (operation) {
+            case 'alignCellLeft':
+            case 'alignCellCenter':
+            case 'alignCellRight':
+                alignTableCellHorizontally(tableModel, operation);
+                break;
+            case 'alignCellTop':
+            case 'alignCellMiddle':
+            case 'alignCellBottom':
+                alignTableCellVertically(tableModel, operation);
+                break;
+            case 'alignCenter':
+            case 'alignLeft':
+            case 'alignRight':
+                alignTable(tableModel, operation);
+                break;
+
+            case 'deleteColumn':
+                deleteTableColumn(tableModel);
+                break;
+
+            case 'deleteRow':
+                deleteTableRow(tableModel);
+                break;
+
+            case 'deleteTable':
+                deleteTable(tableModel);
+                break;
+
+            case 'insertAbove':
+            case 'insertBelow':
+                insertTableRow(tableModel, operation);
+                break;
+
+            case 'insertLeft':
+            case 'insertRight':
+                insertTableColumn(tableModel, operation);
+                break;
+
+            case 'mergeAbove':
+            case 'mergeBelow':
+                mergeTableRow(tableModel, operation);
+                break;
+
+            case 'mergeCells':
+                mergeTableCells(tableModel);
+                break;
+
+            case 'mergeLeft':
+            case 'mergeRight':
+                mergeTableColumn(tableModel, operation);
+                break;
+
+            case 'splitHorizontally':
+                splitTableCellHorizontally(tableModel);
+                break;
+
+            case 'splitVertically':
+                splitTableCellVertically(tableModel);
+                break;
         }
-    );
+    });
 }
diff --git a/...nt-model/roosterjs-content-model-api/lib/publicApi/utils/formatSegmentWithContentModel.ts b/...nt-model/roosterjs-content-model-api/lib/publicApi/utils/formatSegmentWithContentModel.ts
@@ -7,6 +7,7 @@ import type {
     ContentModelSegmentFormat,
     IStandaloneEditor,
 } from 'roosterjs-content-model-types';
+
 /**
  * @internal
  */