Content Model: Improve cache behavior (#1999)

* Content Model: Improve cache behavior

* fix build

* fix comment

packages-content-model/roosterjs-content-model-dom/lib/domToModel/context/createDomToModelContext.ts

@@ -55,7 +55,6 @@ export function createDomToModelContext(
 
         defaultElementProcessors: defaultProcessorMap,
         defaultFormatParsers: defaultFormatParsers,
-        allowCacheElement: !options?.disableCacheElement,
     };
 
     if (editorContext?.isRootRtl) {

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

@@ -23,22 +23,7 @@ export const entityProcessor: ElementProcessor<HTMLElement> = (group, element, c
         context,
         { segment: isBlockEntity ? 'empty' : undefined, paragraph: 'empty' },
         () => {
-            const wrapperToUse = context.allowCacheElement
-                ? element
-                : (element.cloneNode(true /* deep */) as HTMLElement);
-
-            if (!context.allowCacheElement) {
-                wrapperToUse.style.backgroundColor = element.style.backgroundColor || 'inherit';
-                wrapperToUse.style.color = element.style.color || 'inherit';
-            }
-
-            const entityModel = createEntity(
-                wrapperToUse,
-                isReadonly,
-                context.segmentFormat,
-                id,
-                type
-            );
+            const entityModel = createEntity(element, isReadonly, context.segmentFormat, id, type);
 
             // TODO: Need to handle selection for editable entity
             if (context.isInSelection) {

packages-content-model/roosterjs-content-model-dom/lib/modelToDom/contentModelToDom.ts

@@ -33,7 +33,7 @@ export function contentModelToDom(
     doc: Document,
     root: Node,
     model: ContentModelDocument,
-    editorContext: EditorContext,
+    editorContext?: EditorContext,
     option?: ModelToDomOption
 ): SelectionRangeEx | null {
     const modelToDomContext = createModelToDomContext(editorContext, option);

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

@@ -16,14 +16,17 @@ export const handleDivider: ContentModelBlockHandler<ContentModelDivider> = (
     context: ModelToDomContext,
     refNode: Node | null
 ) => {
-    let element = divider.cachedElement;
+    let element = context.allowCacheElement ? divider.cachedElement : undefined;
 
     if (element) {
         refNode = reuseCachedElement(parent, element, refNode);
     } else {
         element = doc.createElement(divider.tagName);
 
-        divider.cachedElement = element;
+        if (context.allowCacheElement) {
+            divider.cachedElement = element;
+        }
+
         parent.insertBefore(element, refNode);
 
         applyFormat(element, context.formatAppliers.divider, divider.format, context);

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

@@ -24,7 +24,15 @@ export const handleEntity: ContentModelBlockHandler<ContentModelEntity> = (
     context: ModelToDomContext,
     refNode: Node | null
 ) => {
-    const { wrapper, id, type, isReadonly, format } = entityModel;
+    const { id, type, isReadonly, format } = entityModel;
+    let wrapper = entityModel.wrapper;
+
+    if (!context.allowCacheElement) {
+        wrapper = wrapper.cloneNode(true /*deep*/) as HTMLElement;
+        wrapper.style.color = wrapper.style.color || 'inherit';
+        wrapper.style.backgroundColor = wrapper.style.backgroundColor || 'inherit';
+    }
+
     const entity: Entity | null =
         id && type
             ? {

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

@@ -19,7 +19,7 @@ export const handleFormatContainer: ContentModelBlockHandler<ContentModelFormatC
     context: ModelToDomContext,
     refNode: Node | null
 ) => {
-    let element = container.cachedElement;
+    let element = context.allowCacheElement ? container.cachedElement : undefined;
 
     if (element) {
         refNode = reuseCachedElement(parent, element, refNode);
@@ -28,7 +28,10 @@ export const handleFormatContainer: ContentModelBlockHandler<ContentModelFormatC
     } else if (!isBlockGroupEmpty(container)) {
         const containerNode = doc.createElement(container.tagName);
 
-        container.cachedElement = containerNode;
+        if (context.allowCacheElement) {
+            container.cachedElement = containerNode;
+        }
+
         parent.insertBefore(containerNode, refNode);
 
         stackFormat(context, container.tagName, () => {

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

@@ -21,7 +21,7 @@ export const handleParagraph: ContentModelBlockHandler<ContentModelParagraph> =
     context: ModelToDomContext,
     refNode: Node | null
 ) => {
-    let container = paragraph.cachedElement;
+    let container = context.allowCacheElement ? paragraph.cachedElement : undefined;
 
     if (container) {
         refNode = reuseCachedElement(parent, container, refNode);
@@ -102,7 +102,9 @@ export const handleParagraph: ContentModelBlockHandler<ContentModelParagraph> =
             refNode = container.nextSibling;
 
             if (needParagraphWrapper) {
-                paragraph.cachedElement = container;
+                if (context.allowCacheElement) {
+                    paragraph.cachedElement = container;
+                }
             } else {
                 unwrap(container);
             }

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

@@ -24,7 +24,7 @@ export const handleTable: ContentModelBlockHandler<ContentModelTable> = (
         return refNode;
     }
 
-    let tableNode = table.cachedElement;
+    let tableNode = context.allowCacheElement ? table.cachedElement : undefined;
 
     if (tableNode) {
         refNode = reuseCachedElement(parent, tableNode, refNode);
@@ -33,7 +33,10 @@ export const handleTable: ContentModelBlockHandler<ContentModelTable> = (
     } else {
         tableNode = doc.createElement('table');
 
-        table.cachedElement = tableNode;
+        if (context.allowCacheElement) {
+            table.cachedElement = tableNode;
+        }
+
         parent.insertBefore(tableNode, refNode);
 
         applyFormat(tableNode, context.formatAppliers.block, table.format, context);
@@ -55,12 +58,15 @@ export const handleTable: ContentModelBlockHandler<ContentModelTable> = (
             continue;
         }
 
-        const tr = tableRow.cachedElement || doc.createElement('tr');
+        const tr = (context.allowCacheElement && tableRow.cachedElement) || doc.createElement('tr');
         tbody.appendChild(tr);
         moveChildNodes(tr);
 
         if (!tableRow.cachedElement) {
-            tableRow.cachedElement = tr;
+            if (context.allowCacheElement) {
+                tableRow.cachedElement = tr;
+            }
+
             applyFormat(tr, context.formatAppliers.tableRow, tableRow.format, context);
         }
 
@@ -85,7 +91,9 @@ export const handleTable: ContentModelBlockHandler<ContentModelTable> = (
             }
 
             if (!cell.spanAbove && !cell.spanLeft) {
-                let td = cell.cachedElement || doc.createElement(cell.isHeader ? 'th' : 'td');
+                let td =
+                    (context.allowCacheElement && cell.cachedElement) ||
+                    doc.createElement(cell.isHeader ? 'th' : 'td');
 
                 tr.appendChild(td);
 
@@ -120,7 +128,10 @@ export const handleTable: ContentModelBlockHandler<ContentModelTable> = (
                 }
 
                 if (!cell.cachedElement) {
-                    cell.cachedElement = td;
+                    if (context.allowCacheElement) {
+                        cell.cachedElement = td;
+                    }
+
                     applyFormat(td, context.formatAppliers.block, cell.format, context);
                     applyFormat(td, context.formatAppliers.tableCell, cell.format, context);
                     applyFormat(td, context.formatAppliers.tableCellBorder, cell.format, context);

packages-content-model/roosterjs-content-model-dom/test/domToModel/context/createDomToModelContextTest.ts

@@ -40,7 +40,6 @@ describe('createDomToModelContext', () => {
                 format: {},
                 tagName: '',
             },
-            allowCacheElement: true,
             ...contextOptions,
         });
     });
@@ -69,7 +68,6 @@ describe('createDomToModelContext', () => {
                 format: {},
                 tagName: '',
             },
-            allowCacheElement: true,
             ...contextOptions,
         });
     });
@@ -98,7 +96,6 @@ describe('createDomToModelContext', () => {
                 format: {},
                 tagName: '',
             },
-            allowCacheElement: true,
             ...contextOptions,
         });
     });
@@ -123,7 +120,6 @@ describe('createDomToModelContext', () => {
                 format: {},
                 tagName: '',
             },
-            allowCacheElement: true,
             ...contextOptions,
             rangeEx: selectionContext,
         });

packages-content-model/roosterjs-content-model-dom/test/domToModel/processors/entityProcessorTest.ts

@@ -197,69 +197,4 @@ describe('entityProcessor', () => {
             lineHeight: '20px',
         });
     });
-
-    it('Block element entity, clone element', () => {
-        const group = createContentModelDocument();
-        const div = document.createElement('div');
-
-        const clonedDiv = div.cloneNode(true /* deep */) as HTMLDivElement;
-        spyOn(Node.prototype, 'cloneNode').and.returnValue(clonedDiv);
-        context.allowCacheElement = false;
-
-        commitEntity(div, 'entity', true, 'entity_1');
-
-        entityProcessor(group, div, context);
-
-        expect(group).toEqual({
-            blockGroupType: 'Document',
-
-            blocks: [
-                {
-                    blockType: 'Entity',
-                    segmentType: 'Entity',
-                    format: {},
-                    id: 'entity_1',
-                    type: 'entity',
-                    isReadonly: true,
-                    wrapper: clonedDiv,
-                },
-            ],
-        });
-    });
-
-    it('Inline element entity, clone entity element', () => {
-        const group = createContentModelDocument();
-        const span = document.createElement('span');
-
-        const clonedSpan = span.cloneNode(true /* deep */) as HTMLDivElement;
-        spyOn(Node.prototype, 'cloneNode').and.returnValue(clonedSpan);
-        context.allowCacheElement = false;
-
-        commitEntity(span, 'entity', true, 'entity_1');
-
-        entityProcessor(group, span, context);
-
-        expect(group).toEqual({
-            blockGroupType: 'Document',
-
-            blocks: [
-                {
-                    blockType: 'Paragraph',
-                    isImplicit: true,
-                    segments: [
-                        {
-                            blockType: 'Entity',
-                            segmentType: 'Entity',
-                            format: {},
-                            id: 'entity_1',
-                            type: 'entity',
-                            isReadonly: true,
-                            wrapper: clonedSpan,
-                        },
-                    ],
-                    format: {},
-                },
-            ],
-        });
-    });
 });