Graduate option "disableCache" (#3132)

* Graduate option "disableCache"

* Improve

Author: JiuqingSong

demo/scripts/controlsV2/mainPane/MainPane.tsx

@@ -394,7 +394,6 @@ export class MainPane extends React.Component<{}, MainPaneState> {
                             editorCreator={this.state.editorCreator}
                             dir={this.state.isRtl ? 'rtl' : 'ltr'}
                             knownColors={this.knownColors}
-                            disableCache={this.state.initState.disableCache}
                             announcerStringGetter={getAnnouncingString}
                             experimentalFeatures={Array.from(
                                 this.state.initState.experimentalFeatures

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

@@ -32,7 +32,6 @@ const initialState: OptionState = {
     watermarkText: 'Type content here ...',
     forcePreserveRatio: false,
     isRtl: false,
-    disableCache: false,
     tableFeaturesContainerSelector: '#' + 'EditorContainer',
     allowExcelNoBorderTable: false,
     imageMenu: true,

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

@@ -48,7 +48,6 @@ export interface OptionState {
 
     // Editor options
     isRtl: boolean;
-    disableCache: boolean;
     experimentalFeatures: Set<ExperimentalFeature>;
 }
 

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

@@ -29,7 +29,6 @@ export class OptionsPane extends React.Component<OptionPaneProps, OptionState> {
     private exportForm = React.createRef<HTMLFormElement>();
     private exportData = React.createRef<HTMLInputElement>();
     private rtl = React.createRef<HTMLInputElement>();
-    private disableCache = React.createRef<HTMLInputElement>();
 
     constructor(props: OptionPaneProps) {
         super(props);
@@ -75,16 +74,6 @@ export class OptionsPane extends React.Component<OptionPaneProps, OptionState> {
                     />
                     <label htmlFor="pageRtl">Show controls from right to left</label>
                 </div>
-                <div>
-                    <input
-                        id="disableCache"
-                        type="checkbox"
-                        checked={this.state.disableCache}
-                        onChange={this.onToggleCacheModel}
-                        ref={this.disableCache}
-                    />
-                    <label htmlFor="disableCache">Disable Content Model Cache</label>
-                </div>
                 <hr />
                 <div>
                     <button onClick={this.onExportRoosterContentModel}>
@@ -130,7 +119,6 @@ export class OptionsPane extends React.Component<OptionPaneProps, OptionState> {
             forcePreserveRatio: this.state.forcePreserveRatio,
 
             isRtl: this.state.isRtl,
-            disableCache: this.state.disableCache,
             tableFeaturesContainerSelector: this.state.tableFeaturesContainerSelector,
             allowExcelNoBorderTable: this.state.allowExcelNoBorderTable,
             listMenu: this.state.listMenu,
@@ -176,12 +164,6 @@ export class OptionsPane extends React.Component<OptionPaneProps, OptionState> {
         MainPane.getInstance().setPageDirection(isRtl);
     };
 
-    private onToggleCacheModel = () => {
-        this.resetState(state => {
-            state.disableCache = this.disableCache.current.checked;
-        }, true);
-    };
-
     private getHtml() {
         return `${htmlStart}${htmlButtons}${jsCode}${htmlEnd}`;
     }

packages/roosterjs-content-model-core/lib/corePlugin/cache/CachePlugin.ts

@@ -25,22 +25,17 @@ class CachePlugin implements PluginWithState<CachePluginState> {
      * @param contentDiv The editor content DIV
      */
     constructor(option: EditorOptions, contentDiv: HTMLDivElement) {
-        this.state = {};
-
-        if (!option.disableCache) {
-            this.state.domIndexer = new DomIndexerImpl(
+        this.state = {
+            domIndexer: new DomIndexerImpl(
                 option.experimentalFeatures &&
                     option.experimentalFeatures.indexOf('PersistCache') >= 0,
                 option.experimentalFeatures &&
                     option.experimentalFeatures.indexOf(
                         'KeepSelectionMarkerWhenEnteringTextNode'
                     ) >= 0
-            );
-            this.state.textMutationObserver = createTextMutationObserver(
-                contentDiv,
-                this.onMutation
-            );
-        }
+            ),
+            textMutationObserver: createTextMutationObserver(contentDiv, this.onMutation),
+        };
 
         if (option.enableParagraphMap) {
             this.state.paragraphMap = createParagraphMap();
@@ -64,7 +59,7 @@ class CachePlugin implements PluginWithState<CachePluginState> {
         this.editor = editor;
         this.editor.getDocument().addEventListener('selectionchange', this.onNativeSelectionChange);
 
-        this.state.textMutationObserver?.startObserving();
+        this.state.textMutationObserver.startObserving();
     }
 
     /**
@@ -73,7 +68,7 @@ class CachePlugin implements PluginWithState<CachePluginState> {
      * called, plugin should not call to any editor method since it will result in error.
      */
     dispose() {
-        this.state.textMutationObserver?.stopObserving();
+        this.state.textMutationObserver.stopObserving();
 
         if (this.editor) {
             this.editor
@@ -105,22 +100,12 @@ class CachePlugin implements PluginWithState<CachePluginState> {
             case 'logicalRootChanged':
                 this.invalidateCache();
 
-                if (this.state.textMutationObserver) {
-                    this.state.textMutationObserver.stopObserving();
-                    this.state.textMutationObserver = createTextMutationObserver(
-                        event.logicalRoot,
-                        this.onMutation
-                    );
-                    this.state.textMutationObserver.startObserving();
-                }
-                break;
-
-            case 'keyDown':
-            case 'input':
-                if (!this.state.textMutationObserver) {
-                    // When updating cache is not enabled, need to clear the cache to make sure other plugins can get an up-to-date content model
-                    this.invalidateCache();
-                }
+                this.state.textMutationObserver.stopObserving();
+                this.state.textMutationObserver = createTextMutationObserver(
+                    event.logicalRoot,
+                    this.onMutation
+                );
+                this.state.textMutationObserver.startObserving();
                 break;
 
             case 'selectionChanged':
@@ -130,7 +115,7 @@ class CachePlugin implements PluginWithState<CachePluginState> {
             case 'contentChanged':
                 const { contentModel, selection } = event;
 
-                if (contentModel && this.state.domIndexer) {
+                if (contentModel) {
                     updateCache(this.state, contentModel, selection);
                 } else {
                     this.invalidateCache();
@@ -145,7 +130,7 @@ class CachePlugin implements PluginWithState<CachePluginState> {
             switch (mutation.type) {
                 case 'childList':
                     if (
-                        !this.state.domIndexer?.reconcileChildList(
+                        !this.state.domIndexer.reconcileChildList(
                             mutation.addedNodes,
                             mutation.removedNodes
                         )
@@ -161,7 +146,7 @@ class CachePlugin implements PluginWithState<CachePluginState> {
                 case 'elementId':
                     const element = mutation.element;
 
-                    if (!this.state.domIndexer?.reconcileElementId(element)) {
+                    if (!this.state.domIndexer.reconcileElementId(element)) {
                         this.invalidateCache();
                     }
 
@@ -211,7 +196,7 @@ class CachePlugin implements PluginWithState<CachePluginState> {
             if (
                 !model ||
                 !newRangeEx ||
-                !this.state.domIndexer?.reconcileSelection(model, newRangeEx, cachedSelection)
+                !this.state.domIndexer.reconcileSelection(model, newRangeEx, cachedSelection)
             ) {
                 this.invalidateCache();
             } else {

packages/roosterjs-content-model-core/test/coreApi/formatContentModel/formatContentModelTest.ts

@@ -58,6 +58,8 @@ describe('formatContentModel', () => {
             },
             lifecycle: {},
             cache: {
+                domIndexer: null!,
+                textMutationObserver: null!,
                 paragraphMap: mockedParagraphMap,
             },
             undo: {
@@ -722,6 +724,8 @@ describe('formatContentModel', () => {
             expect(setContentModel).not.toHaveBeenCalled();
             expect(triggerEvent).not.toHaveBeenCalled();
             expect(core.cache).toEqual({
+                domIndexer: null!,
+                textMutationObserver: null!,
                 cachedModel: undefined,
                 cachedSelection: undefined,
                 paragraphMap: mockedParagraphMap,
@@ -782,6 +786,8 @@ describe('formatContentModel', () => {
             );
             expect(triggerEvent).toHaveBeenCalled();
             expect(core.cache).toEqual({
+                domIndexer: null!,
+                textMutationObserver: null!,
                 paragraphMap: mockedParagraphMap,
             });
         });

packages/roosterjs-content-model-core/test/coreApi/restoreUndoSnapshot/restoreSnapshotHTMLTest.ts

@@ -1189,6 +1189,7 @@ describe('restoreSnapshotHTML', () => {
 
         const clearIndexSpy = jasmine.createSpy('clearIndex');
         core.cache = {
+            textMutationObserver: null!,
             domIndexer: {
                 clearIndex: clearIndexSpy,
             } as any,