Graduate some experimental features

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(

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/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);

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

@@ -36,7 +36,7 @@ export const handleListItem: ContentModelBlockHandler<ContentModelListItem> = (
     let li: HTMLLIElement;
     let isNewlyCreated = false;
 
-    if (context.allowCacheListItem && listItem.cachedElement) {
+    if (listItem.cachedElement) {
         li = listItem.cachedElement;
 
         // Check if the cached LI is used as refNode under another list level,
@@ -62,10 +62,7 @@ export const handleListItem: ContentModelBlockHandler<ContentModelListItem> = (
         // This happens when outdent a list item to cause it has no list level
         listParent.insertBefore(li, itemRefNode?.parentNode == listParent ? itemRefNode : null);
         context.rewriteFromModel.addedBlockElements.push(li);
-
-        if (context.allowCacheListItem) {
-            listItem.cachedElement = li;
-        }
+        listItem.cachedElement = li;
     }
 
     if (level) {

packages/roosterjs-content-model-dom/test/modelToDom/handlers/handleBlockGroupChildrenTest.ts

@@ -489,7 +489,6 @@ describe('handleBlockGroupChildren', () => {
 
         group.blocks.push(listItem, paragraph);
         context.listFormat.nodeStack = nodeStack;
-        context.allowCacheListItem = true;
 
         expect(parent.outerHTML).toBe('<div><ol><li><br></li></ol><p></p></div>');
 

packages/roosterjs-content-model-dom/test/modelToDom/handlers/handleListItemTest.ts

@@ -465,7 +465,6 @@ describe('handleListItem with cache', () => {
                 listItem: { applierFunction: listItemMetadataApplier },
             },
         });
-        context.allowCacheListItem = true;
         context.onNodeCreated = onNodeCreatedSpy;
         spyOn(applyFormat, 'applyFormat').and.callThrough();
     });

packages/roosterjs-content-model-dom/test/modelToDom/handlers/handleListTest.ts

@@ -740,7 +740,6 @@ describe('handleList with cache', () => {
         ]);
 
         parent.appendChild(cachedUL);
-        context.allowCacheListItem = true;
 
         const newRefNode = handleList(document, parent, listItem, context, cachedUL);
 
@@ -783,7 +782,6 @@ describe('handleList with cache', () => {
 
         listItem.levels[0].cachedElement = cachedUL;
         parent.appendChild(cachedUL);
-        context.allowCacheListItem = true;
 
         const newRefNode = handleList(document, parent, listItem, context, cachedUL);
 
@@ -831,7 +829,6 @@ describe('handleList with cache', () => {
 
         listItem.levels[0].cachedElement = cachedUL;
         parent.appendChild(refNode);
-        context.allowCacheListItem = true;
 
         const newRefNode = handleList(document, parent, listItem, context, refNode);
 
@@ -878,7 +875,6 @@ describe('handleList with cache', () => {
         listItem.levels[0].cachedElement = cachedUL;
 
         parent.appendChild(cachedUL);
-        context.allowCacheListItem = true;
 
         const newRefNode = handleList(document, parent, listItem, context, cachedUL);
 
@@ -929,7 +925,7 @@ describe('handleList with cache', () => {
         listItem.levels[1].cachedElement = cachedUL;
         parent.appendChild(cachedOL);
         cachedOL.appendChild(cachedUL);
-        context.allowCacheListItem = true;
+
         const newRefNode = handleList(document, parent, listItem, context, cachedUL);
 
         expect(parent.outerHTML).toBe('<div><ol start="1"><ul></ul></ol></div>');
@@ -984,7 +980,7 @@ describe('handleList with cache', () => {
 
         parent.appendChild(refNode);
         listItem.levels[1].cachedElement = cachedUL;
-        context.allowCacheListItem = true;
+
         const newRefNode = handleList(document, parent, listItem, context, refNode);
 
         expect(parent.outerHTML).toBe('<div><ol start="1"><ul></ul></ol><br></div>');
@@ -1036,7 +1032,6 @@ describe('handleList with cache', () => {
         parent.appendChild(existingOL1);
         existingOL1.appendChild(existingLI);
         existingOL1.appendChild(existingOL2);
-        context.allowCacheListItem = true;
 
         context.listFormat.nodeStack = [
             { node: parent, refNode: existingOL1 },
@@ -1090,7 +1085,6 @@ describe('handleList with cache', () => {
         ]);
 
         listItem.levels[0].cachedElement = existingOL1;
-        context.allowCacheListItem = true;
 
         context.listFormat.nodeStack = [
             { node: parent, refNode: null },