Merge pull request #2008 from microsoft/u/nguyenvi/versionbump-8.53.0…

…-0.13.0 U/nguyenvi/versionbump 8.53.0 0.13.0
microsoft · Aug 4, 2023 · fc1c8bc · fc1c8bc
2 parents cefac4c + f31d580
commit fc1c8bc
Show file tree

Hide file tree

Showing 57 changed files with 667 additions and 623 deletions.
diff --git a/demo/scripts/controls/BuildInPluginState.ts b/demo/scripts/controls/BuildInPluginState.ts
@@ -34,6 +34,7 @@ export default interface BuildInPluginState {
     experimentalFeatures: ExperimentalFeatures[];
     forcePreserveRatio: boolean;
     isRtl: boolean;
+    tableFeaturesContainerSelector: string;
 }
 
 export interface BuildInPluginProps extends BuildInPluginState, SidePaneElementProps {}
diff --git a/demo/scripts/controls/MainPaneBase.tsx b/demo/scripts/controls/MainPaneBase.tsx
@@ -176,7 +176,7 @@ export default abstract class MainPaneBase extends React.Component<{}, MainPaneB
         this.updateContentPlugin.forceUpdate();
 
         return (
-            <div className={styles.editorContainer}>
+            <div className={styles.editorContainer} id="EditorContainer">
                 <div style={editorStyles}>
                     {this.state.editorCreator && (
                         <Rooster

diff --git a/demo/scripts/controls/getToggleablePlugins.ts b/demo/scripts/controls/getToggleablePlugins.ts
@@ -42,7 +42,9 @@ export default function getToggleablePlugins(initState: BuildInPluginState) {
         imageEdit,
         cutPasteListChain: pluginList.cutPasteListChain ? new CutPasteListChain() : null,
         tableCellSelection: pluginList.tableCellSelection ? new TableCellSelection() : null,
-        tableResize: pluginList.tableResize ? new TableResize() : null,
+        tableResize: pluginList.tableResize
+            ? new TableResize(undefined, initState.tableFeaturesContainerSelector)
+            : null,
         customReplace: pluginList.customReplace ? new CustomReplacePlugin() : null,
         autoFormat: pluginList.autoFormat ? new AutoFormat() : null,
         listEditMenu:

diff --git a/demo/scripts/controls/sidePane/editorOptions/ContentModelEditorOptionsPlugin.ts b/demo/scripts/controls/sidePane/editorOptions/ContentModelEditorOptionsPlugin.ts
@@ -30,12 +30,11 @@ const initialState: BuildInPluginState = {
     forcePreserveRatio: false,
     experimentalFeatures: [
         ExperimentalFeatures.AutoFormatList,
-        ExperimentalFeatures.ReusableContentModel,
-        ExperimentalFeatures.EditWithContentModel,
         ExperimentalFeatures.InlineEntityReadOnlyDelimiters,
         ExperimentalFeatures.ContentModelPaste,
     ],
     isRtl: false,
+    tableFeaturesContainerSelector: '#' + 'EditorContainer',
 };
 
 export default class ContentModelEditorOptionsPlugin extends SidePanePluginImpl<

diff --git a/demo/scripts/controls/sidePane/editorOptions/ContentModelExperimentalFeatures.tsx b/demo/scripts/controls/sidePane/editorOptions/ContentModelExperimentalFeatures.tsx
@@ -14,9 +14,6 @@ const FeatureNames: Partial<Record<ExperimentalFeatures, string>> = {
         'Trigger formatting by a especial characters. Ex: (A), 1. i).',
     [ExperimentalFeatures.ReuseAllAncestorListElements]:
         "Reuse ancestor list elements even if they don't match the types from the list item.",
-    [ExperimentalFeatures.ReusableContentModel]:
-        'Reuse existing DOM structure if possible when convert Content Model back to DOM tree',
-    [ExperimentalFeatures.EditWithContentModel]: 'Handle keyboard edit event with Content Model',
     [ExperimentalFeatures.DeleteTableWithBackspace]:
         'Delete a table selected with the table selector pressing Backspace key',
     [ExperimentalFeatures.InlineEntityReadOnlyDelimiters]:

diff --git a/demo/scripts/controls/sidePane/editorOptions/ContentModelOptionsPane.tsx b/demo/scripts/controls/sidePane/editorOptions/ContentModelOptionsPane.tsx
@@ -138,6 +138,7 @@ export default class ContentModelOptionsPane extends React.Component<
             experimentalFeatures: this.state.experimentalFeatures,
             forcePreserveRatio: this.state.forcePreserveRatio,
             isRtl: this.state.isRtl,
+            tableFeaturesContainerSelector: this.state.tableFeaturesContainerSelector,
         };
 
         if (callback) {

diff --git a/demo/scripts/controls/sidePane/editorOptions/EditorOptionsPlugin.ts b/demo/scripts/controls/sidePane/editorOptions/EditorOptionsPlugin.ts
@@ -33,6 +33,7 @@ const initialState: BuildInPluginState = {
         ExperimentalFeatures.InlineEntityReadOnlyDelimiters,
     ],
     isRtl: false,
+    tableFeaturesContainerSelector: '#' + 'EditorContainer',
 };
 
 export default class EditorOptionsPlugin extends SidePanePluginImpl<

diff --git a/demo/scripts/controls/sidePane/editorOptions/OptionsPane.tsx b/demo/scripts/controls/sidePane/editorOptions/OptionsPane.tsx
@@ -151,6 +151,7 @@ export default class OptionsPane extends React.Component<BuildInPluginProps, Bui
             experimentalFeatures: this.state.experimentalFeatures,
             forcePreserveRatio: this.state.forcePreserveRatio,
             isRtl: this.state.isRtl,
+            tableFeaturesContainerSelector: this.state.tableFeaturesContainerSelector,
         };
 
         if (callback) {

diff --git a/packages-content-model/roosterjs-content-model-dom/test/endToEndTest.ts b/packages-content-model/roosterjs-content-model-dom/test/endToEndTest.ts
@@ -2,6 +2,7 @@ import * as createGeneralBlock from '../lib/modelApi/creators/createGeneralBlock
 import DarkColorHandlerImpl from 'roosterjs-editor-core/lib/editor/DarkColorHandlerImpl';
 import { contentModelToDom } from '../lib/modelToDom/contentModelToDom';
 import { domToContentModel } from '../lib/domToModel/domToContentModel';
+import { expectHtml } from 'roosterjs-editor-api/test/TestHelper';
 import {
     ContentModelBlockFormat,
     ContentModelDocument,
@@ -46,7 +47,7 @@ describe('End to end test for DOM => Model', () => {
             expectedHTMLFirefox, //firefox
         ];
 
-        expect(possibleHTML.indexOf(div2.innerHTML)).toBeGreaterThanOrEqual(0, div2.innerHTML);
+        expectHtml(div2.innerHTML, possibleHTML);
     }
 
     it('List with margin', () => {

diff --git a/...oosterjs-content-model-dom/test/formatHandlers/common/backgroundColorFormatHandlerTest.ts b/...oosterjs-content-model-dom/test/formatHandlers/common/backgroundColorFormatHandlerTest.ts
@@ -2,6 +2,7 @@ import DarkColorHandlerImpl from 'roosterjs-editor-core/lib/editor/DarkColorHand
 import { backgroundColorFormatHandler } from '../../../lib/formatHandlers/common/backgroundColorFormatHandler';
 import { createDomToModelContext } from '../../../lib/domToModel/context/createDomToModelContext';
 import { createModelToDomContext } from '../../../lib/modelToDom/context/createModelToDomContext';
+import { expectHtml } from 'roosterjs-editor-dom/test/DomTestHelper';
 import {
     BackgroundColorFormat,
     DomToModelContext,
@@ -97,11 +98,11 @@ describe('backgroundColorFormatHandler.apply', () => {
 
         backgroundColorFormatHandler.apply(format, div, context);
 
-        const result = [
+        const expectedResult = [
             '<div style="--darkColor_red:darkMock:red; background-color: var(--darkColor_red, red);"></div>',
             '<div style="--darkColor_red: darkMock:red; background-color: var(--darkColor_red, red);"></div>',
-        ].indexOf(div.outerHTML);
+        ];
 
-        expect(result).toBeGreaterThanOrEqual(0, div.outerHTML);
+        expectHtml(div.outerHTML, expectedResult);
     });
 });
diff --git a/...t-model/roosterjs-content-model-dom/test/formatHandlers/common/borderFormatHandlerTest.ts b/...t-model/roosterjs-content-model-dom/test/formatHandlers/common/borderFormatHandlerTest.ts
@@ -51,7 +51,7 @@ describe('borderFormatHandler.parse', () => {
         });
     });
 
-    it('Has border width none value', () => {
+    itChromeOnly('Has border width none value', () => {
         div.style.borderWidth = '1px 2px 3px 4px';
         div.style.borderStyle = 'none';
         div.style.borderColor = 'red';

diff --git a/...del/roosterjs-content-model-dom/test/formatHandlers/segment/textColorFormatHandlerTest.ts b/...del/roosterjs-content-model-dom/test/formatHandlers/segment/textColorFormatHandlerTest.ts
@@ -1,6 +1,7 @@
 import DarkColorHandlerImpl from 'roosterjs-editor-core/lib/editor/DarkColorHandlerImpl';
 import { createDomToModelContext } from '../../../lib/domToModel/context/createDomToModelContext';
 import { createModelToDomContext } from '../../../lib/modelToDom/context/createModelToDomContext';
+import { expectHtml } from 'roosterjs-editor-dom/test/DomTestHelper';
 import { textColorFormatHandler } from '../../../lib/formatHandlers/segment/textColorFormatHandler';
 import {
     DomToModelContext,
@@ -121,12 +122,12 @@ describe('textColorFormatHandler.apply', () => {
 
         textColorFormatHandler.apply(format, div, context);
 
-        const result = [
+        const expectedResult = [
             '<div style="--darkColor_red:darkMock: red; color: var(--darkColor_red, red);"></div>',
             '<div style="--darkColor_red: darkMock: red; color: var(--darkColor_red, red);"></div>',
-        ].indexOf(div.outerHTML);
+        ];
 
-        expect(result).toBeGreaterThanOrEqual(0, div.outerHTML);
+        expectHtml(div.outerHTML, expectedResult);
     });
 
     it('HyperLink without color', () => {

diff --git a/...-content-model/roosterjs-content-model-dom/test/modelToDom/handlers/handleListItemTest.ts b/...-content-model/roosterjs-content-model-dom/test/modelToDom/handlers/handleListItemTest.ts
@@ -3,6 +3,7 @@ import { createListItem } from '../../../lib/modelApi/creators/createListItem';
 import { createListLevel } from '../../../lib/modelApi/creators/createListLevel';
 import { createModelToDomContext } from '../../../lib/modelToDom/context/createModelToDomContext';
 import { createParagraph } from '../../../lib/modelApi/creators/createParagraph';
+import { expectHtml } from 'roosterjs-editor-dom/test/DomTestHelper';
 import { handleList as originalHandleList } from '../../../lib/modelToDom/handlers/handleList';
 import { handleListItem } from '../../../lib/modelToDom/handlers/handleListItem';
 import { listItemMetadataFormatHandler } from '../../../lib/formatHandlers/list/listItemMetadataFormatHandler';
@@ -249,10 +250,7 @@ describe('handleListItem', () => {
             '<div><ol style="flex-direction: column; display: flex;" start="1"><li style="align-self: center;"></li></ol></div>',
         ];
 
-        expect(expectedResult.indexOf(parent.outerHTML)).toBeGreaterThanOrEqual(
-            0,
-            parent.outerHTML
-        );
+        expectHtml(parent.outerHTML, expectedResult);
         expect(context.listFormat).toEqual({
             threadItemCounts: [1],
             nodeStack: [

diff --git a/...ages-content-model/roosterjs-content-model-dom/test/modelToDom/handlers/handleListTest.ts b/...ages-content-model/roosterjs-content-model-dom/test/modelToDom/handlers/handleListTest.ts
@@ -3,8 +3,8 @@ import { ContentModelListItem, ModelToDomContext } from 'roosterjs-content-model
 import { createListItem } from '../../../lib/modelApi/creators/createListItem';
 import { createListLevel } from '../../../lib/modelApi/creators/createListLevel';
 import { createModelToDomContext } from '../../../lib/modelToDom/context/createModelToDomContext';
+import { expectHtml, itChromeOnly } from 'roosterjs-editor-dom/test/DomTestHelper';
 import { handleList } from '../../../lib/modelToDom/handlers/handleList';
-import { itChromeOnly } from 'roosterjs-editor-dom/test/DomTestHelper';
 
 describe('handleList', () => {
     let context: ModelToDomContext;
@@ -62,10 +62,7 @@ describe('handleList', () => {
             '<div><ol start="1"></ol></div>', //Firefox
         ];
 
-        expect(possibleResults.indexOf(parent.outerHTML)).toBeGreaterThanOrEqual(
-            0,
-            parent.outerHTML
-        );
+        expectHtml(parent.outerHTML, possibleResults);
         expect(context.listFormat).toEqual({
             threadItemCounts: [0],
             nodeStack: [
@@ -277,10 +274,8 @@ describe('handleList', () => {
             '<div><ul><ol></ol></ul><ol start="2"></ol></div>', //Firefox
         ];
 
-        expect(possibleResults.indexOf(parent.outerHTML)).toBeGreaterThanOrEqual(
-            0,
-            parent.outerHTML
-        );
+        expectHtml(parent.outerHTML, possibleResults);
+
         expect(context.listFormat).toEqual({
             threadItemCounts: [1],
             nodeStack: [
@@ -322,10 +317,7 @@ describe('handleList', () => {
             '<div><ul><ol></ol><ol start="3"></ol></ul></div>', //Firefox
         ];
 
-        expect(possibleResults.indexOf(parent.outerHTML)).toBeGreaterThanOrEqual(
-            0,
-            parent.outerHTML
-        );
+        expectHtml(parent.outerHTML, possibleResults);
 
         expect(context.listFormat).toEqual({
             threadItemCounts: [1, 2],
@@ -432,10 +424,8 @@ describe('handleList without format handlers', () => {
             '<div><ol start="1"></ol></div>', //Firefox
         ];
 
-        expect(possibleResults.indexOf(parent.outerHTML)).toBeGreaterThanOrEqual(
-            0,
-            parent.outerHTML
-        );
+        expectHtml(parent.outerHTML, possibleResults);
+
         expect(context.listFormat).toEqual({
             threadItemCounts: [],
             nodeStack: [
@@ -634,10 +624,8 @@ describe('handleList without format handlers', () => {
             '<div><ul><ol></ol></ul><ol start="2"></ol></div>', //Firefox
         ];
 
-        expect(possibleResults.indexOf(parent.outerHTML)).toBeGreaterThanOrEqual(
-            0,
-            parent.outerHTML
-        );
+        expectHtml(parent.outerHTML, possibleResults);
+
         expect(context.listFormat).toEqual({
             threadItemCounts: [1],
             nodeStack: [
@@ -726,11 +714,10 @@ describe('handleList handles metadata', () => {
         const possibleResults = [
             '<ol start="1" data-editing-info="{&quot;orderedStyleType&quot;:9,&quot;unorderedStyleType&quot;:9}" style="list-style-type: upper-alpha;"></ol>', // Chrome
             '<ol style="list-style-type: upper-alpha;" data-editing-info="{&quot;orderedStyleType&quot;:9,&quot;unorderedStyleType&quot;:9}" start="1"></ol>', // Firefox
+            '<ol start="1" style="list-style-type: upper-alpha;" data-editing-info="{&quot;orderedStyleType&quot;:9,&quot;unorderedStyleType&quot;:9}"></ol>', // Firefox 116+
         ];
-        expect(possibleResults.indexOf(parent.innerHTML)).toBeGreaterThanOrEqual(
-            0,
-            parent.innerHTML
-        );
+
+        expectHtml(parent.innerHTML, possibleResults);
     });
 
     it('OL with metadata with simple value', () => {
@@ -752,12 +739,10 @@ describe('handleList handles metadata', () => {
         const possibleResults = [
             '<ol start="1" data-editing-info="{&quot;orderedStyleType&quot;:5,&quot;unorderedStyleType&quot;:9}" style="list-style-type: lower-alpha;"></ol>', // Chrome
             '<ol style="list-style-type: lower-alpha;" data-editing-info="{&quot;orderedStyleType&quot;:5,&quot;unorderedStyleType&quot;:9}" start="1"></ol>', // Firefox
+            '<ol start="1" style="list-style-type: lower-alpha;" data-editing-info="{&quot;orderedStyleType&quot;:5,&quot;unorderedStyleType&quot;:9}"></ol>', // Firefox 116+
         ];
 
-        expect(possibleResults.indexOf(parent.innerHTML)).toBeGreaterThanOrEqual(
-            0,
-            parent.innerHTML
-        );
+        expectHtml(parent.innerHTML, possibleResults);
     });
 
     it('UL with metadata with simple value', () => {
@@ -780,10 +765,7 @@ describe('handleList handles metadata', () => {
             '<ul data-editing-info="{&quot;orderedStyleType&quot;:5,&quot;unorderedStyleType&quot;:9}" style="list-style-type: circle;"></ul>', // Chrome
             '<ul style="list-style-type: circle;" data-editing-info="{&quot;orderedStyleType&quot;:5,&quot;unorderedStyleType&quot;:9}"></ul>', // Firefox
         ];
-        expect(possibleResults.indexOf(parent.innerHTML)).toBeGreaterThanOrEqual(
-            0,
-            parent.innerHTML
-        );
+        expectHtml(parent.innerHTML, possibleResults);
     });
 
     it('OL with refNode', () => {
@@ -796,10 +778,8 @@ describe('handleList handles metadata', () => {
 
         const possibleResults = ['<div><ol start="1"></ol><br></div>'];
 
-        expect(possibleResults.indexOf(parent.outerHTML)).toBeGreaterThanOrEqual(
-            0,
-            parent.outerHTML
-        );
+        expectHtml(parent.outerHTML, possibleResults);
+
         expect(context.listFormat).toEqual({
             threadItemCounts: [0],
             nodeStack: [
@@ -834,10 +814,8 @@ describe('handleList handles metadata', () => {
             '<div><ol><ol start="1"></ol></ol><br></div>', //Firefox
         ];
 
-        expect(possibleResults.indexOf(parent.outerHTML)).toBeGreaterThanOrEqual(
-            0,
-            parent.outerHTML
-        );
+        expectHtml(parent.outerHTML, possibleResults);
+
         expect(context.listFormat).toEqual({
             threadItemCounts: [1, 0],
             nodeStack: [

diff --git a/packages-content-model/roosterjs-content-model-editor/lib/editor/ContentModelEditor.ts b/packages-content-model/roosterjs-content-model-editor/lib/editor/ContentModelEditor.ts
@@ -53,7 +53,7 @@ export default class ContentModelEditor
     cacheContentModel(model: ContentModelDocument | null) {
         const core = this.getCore();
 
-        if (core.reuseModel && !core.lifecycle.shadowEditFragment) {
+        if (!core.lifecycle.shadowEditFragment) {
             core.cachedModel = model || undefined;
             core.cachedRangeEx = undefined;
         }

diff --git a/...ges-content-model/roosterjs-content-model-editor/lib/editor/coreApi/createContentModel.ts b/...ges-content-model/roosterjs-content-model-editor/lib/editor/coreApi/createContentModel.ts
@@ -13,7 +13,7 @@ import {
  * @param option The option to customize the behavior of DOM to Content Model conversion
  */
 export const createContentModel: CreateContentModel = (core, option) => {
-    let cachedModel = core.reuseModel ? core.cachedModel : null;
+    let cachedModel = core.cachedModel;
 
     if (cachedModel && core.lifecycle.shadowEditFragment) {
         // When in shadow edit, use a cloned model so we won't pollute the cached one
@@ -38,10 +38,6 @@ function internalCreateContentModel(
         ...option?.processorOverride,
     };
 
-    if (!core.reuseModel) {
-        context.disableCacheElement = true;
-    }
-
     return domToContentModel(
         core.contentDiv,
         context,

diff --git a/...s-content-model/roosterjs-content-model-editor/lib/editor/createContentModelEditorCore.ts b/...s-content-model/roosterjs-content-model-editor/lib/editor/createContentModelEditorCore.ts
@@ -28,12 +28,7 @@ export const createContentModelEditorCore: CoreCreator<
             new ContentModelEditPlugin(),
         ],
         corePluginOverride: {
-            typeInContainer: isFeatureEnabled(
-                options.experimentalFeatures,
-                ExperimentalFeatures.EditWithContentModel
-            )
-                ? new ContentModelTypeInContainerPlugin()
-                : undefined,
+            typeInContainer: new ContentModelTypeInContainerPlugin(),
             copyPaste: isFeatureEnabled(
                 options.experimentalFeatures,
                 ExperimentalFeatures.ContentModelPaste
@@ -82,10 +77,6 @@ function promoteContentModelInfo(
 
     cmCore.defaultDomToModelOptions = options.defaultDomToModelOptions || {};
     cmCore.defaultModelToDomOptions = options.defaultModelToDomOptions || {};
-    cmCore.reuseModel = isFeatureEnabled(
-        experimentalFeatures,
-        ExperimentalFeatures.ReusableContentModel
-    );
     cmCore.addDelimiterForEntity = isFeatureEnabled(
         experimentalFeatures,
         ExperimentalFeatures.InlineEntityReadOnlyDelimiters
@@ -96,17 +87,8 @@ function promoteCoreApi(cmCore: ContentModelEditorCore) {
     cmCore.api.createEditorContext = createEditorContext;
     cmCore.api.createContentModel = createContentModel;
     cmCore.api.setContentModel = setContentModel;
+    cmCore.api.switchShadowEdit = switchShadowEdit;
     cmCore.api.getSelectionRangeEx = getSelectionRangeEx;
-
-    if (
-        isFeatureEnabled(
-            cmCore.lifecycle.experimentalFeatures,
-            ExperimentalFeatures.ReusableContentModel
-        )
-    ) {
-        // Only use Content Model shadow edit when reuse model is enabled because it relies on cached model for the original model
-        cmCore.api.switchShadowEdit = switchShadowEdit;
-    }
     cmCore.originalApi.createEditorContext = createEditorContext;
     cmCore.originalApi.createContentModel = createContentModel;
     cmCore.originalApi.setContentModel = setContentModel;