Version bump to 9.51.0 and legacy to 8.66.0

demo/scripts/controlsV2/sidePane/editorOptions/EditorOptionsPlugin.ts

@@ -70,12 +70,7 @@ const initialState: OptionState = {
     },
     customReplacements: emojiReplacements,
     disableSideResize: false,
-    experimentalFeatures: new Set<ExperimentalFeature>([
-        'HandleEnterKey',
-        'CloneIndependentRoot',
-        'CacheList',
-        'TransformTableBorderColors',
-    ]),
+    experimentalFeatures: new Set<ExperimentalFeature>(['TransformTableBorderColors']),
 };
 
 export class EditorOptionsPlugin extends SidePanePluginImpl<OptionsPane, OptionPaneProps> {

demo/scripts/controlsV2/sidePane/editorOptions/ExperimentalFeatures.tsx

@@ -11,10 +11,7 @@ export class ExperimentalFeatures extends React.Component<DefaultFormatProps, {}
     render() {
         return (
             <>
-                {this.renderFeature('HandleEnterKey')}
                 {this.renderFeature('KeepSelectionMarkerWhenEnteringTextNode')}
-                {this.renderFeature('CloneIndependentRoot')}
-                {this.renderFeature('CacheList')}
                 {this.renderFeature('TransformTableBorderColors')}
             </>
         );

demo/scripts/controlsV2/sidePane/editorOptions/Plugins.tsx

@@ -99,7 +99,6 @@ abstract class PluginsBase<PluginKey extends keyof BuildInPluginList> extends Re
 export class Plugins extends PluginsBase<keyof BuildInPluginList> {
     private allowExcelNoBorderTable = React.createRef<HTMLInputElement>();
     private handleTabKey = React.createRef<HTMLInputElement>();
-    private handleEnterKey = React.createRef<HTMLInputElement>();
     private listMenu = React.createRef<HTMLInputElement>();
     private tableMenu = React.createRef<HTMLInputElement>();
     private imageMenu = React.createRef<HTMLInputElement>();
@@ -240,13 +239,6 @@ export class Plugins extends PluginsBase<keyof BuildInPluginList> {
                                 (state, value) =>
                                     (state.editPluginOptions.handleTabKey.indentParagraph = value)
                             )}
-                            {this.renderCheckBox(
-                                'Handle Enter Key',
-                                this.handleEnterKey,
-                                this.props.state.editPluginOptions.shouldHandleEnterKey as boolean,
-                                (state, value) =>
-                                    (state.editPluginOptions.shouldHandleEnterKey = value)
-                            )}
                         </>
                     )}
                     {this.renderPluginItem(

package.json

@@ -50,7 +50,7 @@
         "coverage-istanbul-loader": "3.0.5",
         "css-loader": "3.5.3",
         "detect-port": "^1.3.0",
-        "dompurify": "2.5.4",
+        "dompurify": "3.4.0",
         "eslint": "^8.50.0",
         "eslint-plugin-etc": "^2.0.3",
         "eslint-plugin-react": "^7.33.2",

packages/roosterjs-content-model-core/lib/command/exportContent/exportContent.ts

@@ -15,7 +15,7 @@ import type {
 /**
  * Export HTML content. If there are entities, this will cause EntityOperation event with option = 'replaceTemporaryContent' to get a dehydrated entity
  * @param editor The editor to get content from
- * @param mode Specify HTML to get HTML. This is the default option
+ * @param mode Specify HTML to get HTML.
  * @param options @optional Options for Model to DOM conversion
  */
 export function exportContent(editor: IEditor, mode?: 'HTML', options?: ModelToDomOption): string;
@@ -24,9 +24,9 @@ export function exportContent(editor: IEditor, mode?: 'HTML', options?: ModelToD
  * Export HTML content. If there are entities, this will cause EntityOperation event with option = 'replaceTemporaryContent' to get a dehydrated entity.
  * This is a fast version, it retrieve HTML content directly from editor without going through content model conversion.
  * @param editor The editor to get content from
- * @param mode Specify HTMLFast to get HTML result.
+ * @param mode Specify HTMLFast to get HTML result. This is the default option
  */
-export function exportContent(editor: IEditor, mode: 'HTMLFast'): string;
+export function exportContent(editor: IEditor, mode?: 'HTMLFast'): string;
 
 /**
  * Export plain text content
@@ -52,7 +52,7 @@ export function exportContent(editor: IEditor, mode: 'PlainTextFast'): string;
 // Once we are confident that 'HTMLFast' is stable, we can fully switch 'HTML' to use the 'HTMLFast' approach
 export function exportContent(
     editor: IEditor,
-    mode: ExportContentMode | 'HTMLFast' = 'HTML',
+    mode: ExportContentMode | 'HTMLFast' = 'HTMLFast',
     optionsOrCallbacks?: ModelToDomOption | ModelToTextCallbacks
 ): string {
     let model: ContentModelDocument;
@@ -70,6 +70,7 @@ export function exportContent(
             );
 
         case 'HTMLFast':
+        default:
             const clonedRoot = editor.getDOMHelper().getClonedRoot();
 
             if (editor.isDarkMode()) {
@@ -89,7 +90,6 @@ export function exportContent(
             return getHTMLFromDOM(editor, clonedRoot);
 
         case 'HTML':
-        default:
             model = editor.getContentModelCopy('clean');
 
             const doc = editor.getDocument();

packages/roosterjs-content-model-core/lib/coreApi/createEditorContext/createEditorContext.ts

@@ -17,7 +17,6 @@ export const createEditorContext: CreateEditorContext = (core, saveIndex) => {
         darkColorHandler: darkColorHandler,
         addDelimiterForEntity: true,
         allowCacheElement: true,
-        allowCacheListItem: !!core.experimentalFeatures?.includes('CacheList'),
         domIndexer: saveIndex ? cache.domIndexer : undefined,
         zoomScale: domHelper.calculateZoomScale(),
         experimentalFeatures: core.experimentalFeatures ?? [],

packages/roosterjs-content-model-core/lib/editor/core/DOMHelperImpl.ts

@@ -16,11 +16,14 @@ import type {
  * @internal
  */
 export interface DOMHelperImplOption {
+    /**
+     * @deprecated This is always treated as true now
+     */
     cloneIndependentRoot?: boolean;
 }
 
 class DOMHelperImpl implements DOMHelper {
-    constructor(private contentDiv: HTMLElement, private options: DOMHelperImplOption) {}
+    constructor(private contentDiv: HTMLElement, options?: DOMHelperImplOption) {}
 
     queryElements(selector: string): HTMLElement[] {
         return toArray(this.contentDiv.querySelectorAll(selector)) as HTMLElement[];
@@ -123,14 +126,10 @@ class DOMHelperImpl implements DOMHelper {
      * Get a deep cloned root element
      */
     getClonedRoot(): HTMLElement {
-        if (this.options.cloneIndependentRoot) {
-            const doc = this.contentDiv.ownerDocument.implementation.createHTMLDocument();
-            const clone = doc.importNode(this.contentDiv, true /*deep*/);
+        const doc = this.contentDiv.ownerDocument.implementation.createHTMLDocument();
+        const clone = doc.importNode(this.contentDiv, true /*deep*/);
 
-            return clone;
-        } else {
-            return this.contentDiv.cloneNode(true /*deep*/) as HTMLElement;
-        }
+        return clone;
     }
 
     /**

packages/roosterjs-content-model-core/lib/editor/core/createEditorCore.ts

@@ -50,9 +50,7 @@ export function createEditorCore(contentDiv: HTMLDivElement, options: EditorOpti
                 ? options.trustedHTMLHandler
                 : createTrustedHTMLHandler(domCreator),
         domCreator: domCreator,
-        domHelper: createDOMHelper(contentDiv, {
-            cloneIndependentRoot: options.experimentalFeatures?.includes('CloneIndependentRoot'),
-        }),
+        domHelper: createDOMHelper(contentDiv),
         ...getPluginState(corePlugins),
         disposeErrorHandler: options.disposeErrorHandler,
         onFixUpModel: options.onFixUpModel,

packages/roosterjs-content-model-core/test/coreApi/createEditorContext/createEditorContextTest.ts

@@ -51,7 +51,6 @@ describe('createEditorContext', () => {
             experimentalFeatures: [],
             paragraphMap: mockedParagraphMap,
             editorViewWidth: 800,
-            allowCacheListItem: false,
         });
     });
 
@@ -104,7 +103,6 @@ describe('createEditorContext', () => {
             experimentalFeatures: [],
             paragraphMap: mockedParagraphMap,
             editorViewWidth: 800,
-            allowCacheListItem: false,
         });
     });
 
@@ -154,7 +152,6 @@ describe('createEditorContext', () => {
             experimentalFeatures: [],
             paragraphMap: mockedParagraphMap,
             editorViewWidth: 800,
-            allowCacheListItem: false,
         });
     });
 
@@ -207,7 +204,6 @@ describe('createEditorContext', () => {
             experimentalFeatures: [],
             paragraphMap: mockedParagraphMap,
             editorViewWidth: 800,
-            allowCacheListItem: false,
         });
     });
 });
@@ -266,7 +262,6 @@ describe('createEditorContext - checkZoomScale', () => {
             experimentalFeatures: [],
             paragraphMap: mockedParagraphMap,
             editorViewWidth: 800,
-            allowCacheListItem: false,
         });
     });
 });
@@ -325,7 +320,6 @@ describe('createEditorContext - checkRootDir', () => {
             experimentalFeatures: [],
             paragraphMap: mockedParagraphMap,
             editorViewWidth: 800,
-            allowCacheListItem: false,
         });
     });
 
@@ -347,7 +341,6 @@ describe('createEditorContext - checkRootDir', () => {
             experimentalFeatures: [],
             paragraphMap: mockedParagraphMap,
             editorViewWidth: 800,
-            allowCacheListItem: false,
         });
     });
 });

packages/roosterjs-content-model-core/test/editor/core/DOMHelperImplTest.ts

@@ -354,20 +354,6 @@ describe('DOMHelperImpl', () => {
 
     describe('getClonedRoot', () => {
         it('getClonedRoot', () => {
-            const mockedClone = 'CLONE' as any;
-            const cloneSpy = jasmine.createSpy('cloneSpy').and.returnValue(mockedClone);
-            const mockedDiv: HTMLElement = {
-                cloneNode: cloneSpy,
-            } as any;
-            const domHelper = createDOMHelper(mockedDiv);
-
-            const result = domHelper.getClonedRoot();
-
-            expect(result).toBe(mockedClone);
-            expect(cloneSpy).toHaveBeenCalledWith(true);
-        });
-
-        it('getClonedRoot, with CloneIndependentRoot on', () => {
             const mockedClone = 'CLONE' as any;
             const cloneSpy = jasmine.createSpy('cloneSpy').and.returnValue(mockedClone);
             const importNodeSpy = jasmine.createSpy('importNodeSpy').and.returnValue(mockedClone);
@@ -381,9 +367,7 @@ describe('DOMHelperImpl', () => {
                     },
                 },
             } as any;
-            const domHelper = createDOMHelper(mockedDiv, {
-                cloneIndependentRoot: true,
-            });
+            const domHelper = createDOMHelper(mockedDiv);
 
             const result = domHelper.getClonedRoot();
 

packages/roosterjs-content-model-dom/lib/domToModel/processors/listItemProcessor.ts

@@ -1,4 +1,5 @@
 import { createListItem } from '../../modelApi/creators/createListItem';
+import { createListLevel } from '../../modelApi/creators/createListLevel';
 import { parseFormat } from '../utils/parseFormat';
 import { stackFormat } from '../utils/stackFormat';
 import type { ElementProcessor } from 'roosterjs-content-model-types';
@@ -8,8 +9,21 @@ import type { ElementProcessor } from 'roosterjs-content-model-types';
  */
 export const listItemProcessor: ElementProcessor<HTMLLIElement> = (group, element, context) => {
     const { listFormat } = context;
+    const originalListParent = listFormat.listParent;
+    let shouldPopListLevel = false;
+
+    try {
+        listFormat.listParent = listFormat.listParent ?? group;
+
+        const listParent = listFormat.listParent;
+
+        if (listFormat.levels.length == 0) {
+            listFormat.levels.push(
+                createListLevel(listFormat.potentialListType || 'UL', context.blockFormat)
+            );
+            shouldPopListLevel = true;
+        }
 
-    if (listFormat.listParent && listFormat.levels.length > 0) {
         stackFormat(
             context,
             {
@@ -31,7 +45,7 @@ export const listItemProcessor: ElementProcessor<HTMLLIElement> = (group, elemen
                     context
                 );
 
-                listFormat.listParent!.blocks.push(listItem);
+                listParent.blocks.push(listItem);
 
                 parseFormat(
                     element,
@@ -54,14 +68,11 @@ export const listItemProcessor: ElementProcessor<HTMLLIElement> = (group, elemen
                 }
             }
         );
-    } else {
-        const currentBlocks = listFormat.listParent?.blocks;
-        const lastItem = currentBlocks?.[currentBlocks?.length - 1];
+    } finally {
+        if (shouldPopListLevel) {
+            listFormat.levels.pop();
+        }
 
-        context.elementProcessors['*'](
-            lastItem?.blockType == 'BlockGroup' ? lastItem : group,
-            element,
-            context
-        );
+        listFormat.listParent = originalListParent;
     }
 };

packages/roosterjs-content-model-dom/lib/domToModel/processors/listProcessor.ts

@@ -18,10 +18,8 @@ export const listProcessor: ElementProcessor<HTMLOListElement | HTMLUListElement
             paragraph: 'shallowCloneForGroup',
         },
         () => {
-            const level: ContentModelListLevel = createListLevel(
-                element.tagName as 'OL' | 'UL',
-                context.blockFormat
-            );
+            const tagName = element.tagName as 'OL' | 'UL';
+            const level: ContentModelListLevel = createListLevel(tagName, context.blockFormat);
             const { listFormat } = context;
 
             parseFormat(element, context.formatParsers.dataset, level.dataset, context);
@@ -31,6 +29,7 @@ export const listProcessor: ElementProcessor<HTMLOListElement | HTMLUListElement
 
             const originalListParent = listFormat.listParent;
 
+            listFormat.potentialListType = tagName;
             listFormat.listParent = listFormat.listParent || group;
             listFormat.levels.push(level);
 

packages/roosterjs-content-model-dom/lib/modelToDom/handlers/handleBlockGroupChildren.ts

@@ -54,7 +54,7 @@ export const handleBlockGroupChildren: ContentModelHandler<ContentModelBlockGrou
 };
 
 function cleanUpNodeStack(nodeStack: ModelToDomListStackItem[], context: ModelToDomContext) {
-    if (context.allowCacheListItem && nodeStack.length > 0) {
+    if (nodeStack.length > 0) {
         // Clear list stack, only run to nodeStack[1] because nodeStack[0] is the parent node
         for (let i = nodeStack.length - 1; i > 0; i--) {
             const node = nodeStack.pop()?.refNode ?? null;

packages/roosterjs-content-model-dom/lib/modelToDom/handlers/handleList.ts

@@ -50,24 +50,18 @@ export const handleList: ContentModelBlockHandler<ContentModelListItem> = (
             applyMetadata(itemLevel, context.metadataAppliers.listLevel, itemLevel.format, context);
         }
 
-        if (
-            context.allowCacheListItem &&
-            parentLevel.refNode &&
-            itemLevel.cachedElement == parentLevel.refNode
-        ) {
+        if (parentLevel.refNode && itemLevel.cachedElement == parentLevel.refNode) {
             // Move refNode to next node since we are reusing this cached element
             parentLevel.refNode = parentLevel.refNode.nextSibling;
         }
     }
 
     // Cut off remained list levels that we can't reuse
-    if (context.allowCacheListItem) {
-        // Clean up all rest nodes in the reused list levels
-        for (let i = layer + 1; i < nodeStack.length; i++) {
-            const stackLevel = nodeStack[i];
+    // Clean up all rest nodes in the reused list levels
+    for (let i = layer + 1; i < nodeStack.length; i++) {
+        const stackLevel = nodeStack[i];
 
-            cleanUpRestNodes(stackLevel.refNode, context.rewriteFromModel);
-        }
+        cleanUpRestNodes(stackLevel.refNode, context.rewriteFromModel);
     }
 
     nodeStack.splice(layer + 1);
@@ -83,7 +77,7 @@ export const handleList: ContentModelBlockHandler<ContentModelListItem> = (
 
         context.listFormat.currentLevel = layer;
 
-        if (context.allowCacheListItem && level.cachedElement) {
+        if (level.cachedElement) {
             newList = level.cachedElement;
 
             nodeStack[layer].refNode = reuseCachedElement(
@@ -112,9 +106,7 @@ export const handleList: ContentModelBlockHandler<ContentModelListItem> = (
                 dataset: { ...level.dataset },
             });
 
-            if (context.allowCacheListItem) {
-                level.cachedElement = newList;
-            }
+            level.cachedElement = newList;
         }
 
         applyFormat(newList, context.formatAppliers.listLevelThread, level.format, context);