Merge branch 'master' into u/jisong/keyboardenter

microsoft · Jun 3, 2024 · fa4c2ff · fa4c2ff
2 parents 21a0bb0 + db8e2da
commit fa4c2ff
Show file tree

Hide file tree

Showing 33 changed files with 700 additions and 307 deletions.
diff --git a/demo/scripts/controlsV2/mainPane/MainPane.tsx b/demo/scripts/controlsV2/mainPane/MainPane.tsx
@@ -370,6 +370,9 @@ export class MainPane extends React.Component<{}, MainPaneState> {
                             knownColors={this.knownColors}
                             disableCache={this.state.initState.disableCache}
                             announcerStringGetter={getAnnouncingString}
+                            experimentalFeatures={Array.from(
+                                this.state.initState.experimentalFeatures
+                            )}
                         />
                     )}
                 </div>

diff --git a/demo/scripts/controlsV2/sidePane/editorOptions/EditorOptionsPlugin.ts b/demo/scripts/controlsV2/sidePane/editorOptions/EditorOptionsPlugin.ts
@@ -1,4 +1,5 @@
 import { emojiReplacements } from './getReplacements';
+import { ExperimentalFeature } from 'roosterjs-content-model-types';
 import { OptionPaneProps, OptionState, UrlPlaceholder } from './OptionState';
 import { OptionsPane } from './OptionsPane';
 import { SidePaneElementProps } from '../SidePaneElement';
@@ -55,6 +56,7 @@ const initialState: OptionState = {
         codeFormat: {},
     },
     customReplacements: emojiReplacements,
+    experimentalFeatures: new Set<ExperimentalFeature>(['PersistCache']),
 };
 
 export class EditorOptionsPlugin extends SidePanePluginImpl<OptionsPane, OptionPaneProps> {

diff --git a/demo/scripts/controlsV2/sidePane/editorOptions/ExperimentalFeatures.tsx b/demo/scripts/controlsV2/sidePane/editorOptions/ExperimentalFeatures.tsx
@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { ExperimentalFeature } from 'roosterjs-content-model-types';
+import { OptionState } from './OptionState';
+
+export interface DefaultFormatProps {
+    state: OptionState;
+    resetState: (callback: (state: OptionState) => void, resetEditor: boolean) => void;
+}
+
+export class ExperimentalFeatures extends React.Component<DefaultFormatProps, {}> {
+    render() {
+        return this.renderFeature('PersistCache');
+    }
+
+    private renderFeature(featureName: ExperimentalFeature): JSX.Element {
+        let checked = this.props.state.experimentalFeatures.has(featureName);
+
+        return (
+            <div>
+                <input
+                    type="checkbox"
+                    id={featureName}
+                    checked={checked}
+                    onChange={() => this.onFeatureClick(featureName)}
+                />
+                <label htmlFor={featureName}>{featureName}</label>
+            </div>
+        );
+    }
+
+    private onFeatureClick = (featureName: ExperimentalFeature) => {
+        this.props.resetState(state => {
+            let checkbox = document.getElementById(featureName) as HTMLInputElement;
+
+            if (checkbox.checked) {
+                state.experimentalFeatures.add(featureName);
+            } else {
+                state.experimentalFeatures.delete(featureName);
+            }
+        }, true);
+    };
+}
diff --git a/demo/scripts/controlsV2/sidePane/editorOptions/OptionState.ts b/demo/scripts/controlsV2/sidePane/editorOptions/OptionState.ts
@@ -1,6 +1,6 @@
 import { AutoFormatOptions, CustomReplace, MarkdownOptions } from 'roosterjs-content-model-plugins';
 import type { SidePaneElementProps } from '../SidePaneElement';
-import type { ContentModelSegmentFormat } from 'roosterjs-content-model-types';
+import type { ContentModelSegmentFormat, ExperimentalFeature } from 'roosterjs-content-model-types';
 
 export interface LegacyPluginList {
     imageEdit: boolean;
@@ -47,6 +47,7 @@ export interface OptionState {
     isRtl: boolean;
     disableCache: boolean;
     applyChangesOnMouseUp: boolean;
+    experimentalFeatures: Set<ExperimentalFeature>;
 }
 
 export interface OptionPaneProps extends OptionState, SidePaneElementProps {}

diff --git a/demo/scripts/controlsV2/sidePane/editorOptions/OptionsPane.tsx b/demo/scripts/controlsV2/sidePane/editorOptions/OptionsPane.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { Code } from './Code';
 import { DefaultFormatPane } from './DefaultFormatPane';
 import { EditorCode } from './codes/EditorCode';
+import { ExperimentalFeatures } from './ExperimentalFeatures';
 import { LegacyPlugins, Plugins } from './Plugins';
 import { MainPane } from '../../mainPane/MainPane';
 import { OptionPaneProps, OptionState } from './OptionState';
@@ -63,6 +64,12 @@ export class OptionsPane extends React.Component<OptionPaneProps, OptionState> {
                     </summary>
                     <LegacyPlugins state={this.state} resetState={this.resetState} />
                 </details>
+                <details>
+                    <summary>
+                        <b>Experimental features</b>
+                    </summary>
+                    <ExperimentalFeatures state={this.state} resetState={this.resetState} />
+                </details>
                 <div>
                     <br />
                 </div>
@@ -140,6 +147,7 @@ export class OptionsPane extends React.Component<OptionPaneProps, OptionState> {
             autoFormatOptions: { ...this.state.autoFormatOptions },
             markdownOptions: { ...this.state.markdownOptions },
             customReplacements: this.state.customReplacements,
+            experimentalFeatures: this.state.experimentalFeatures,
         };
 
         if (callback) {

diff --git a/...ontent-model-core/lib/command/createModelFromHtml/createDomToModelContextForSanitizing.ts b/...ontent-model-core/lib/command/createModelFromHtml/createDomToModelContextForSanitizing.ts
@@ -41,6 +41,7 @@ export function createDomToModelContextForSanitizing(
         {
             defaultFormat,
             ...getRootComputedStyleForContext(document),
+            experimentalFeatures: [],
         },
         defaultOption,
         {

diff --git a/packages/roosterjs-content-model-core/lib/coreApi/createEditorContext/createEditorContext.ts b/packages/roosterjs-content-model-core/lib/coreApi/createEditorContext/createEditorContext.ts
@@ -19,6 +19,7 @@ export const createEditorContext: CreateEditorContext = (core, saveIndex) => {
         allowCacheElement: true,
         domIndexer: saveIndex ? cache.domIndexer : undefined,
         zoomScale: domHelper.calculateZoomScale(),
+        experimentalFeatures: core.experimentalFeatures ?? [],
         ...getRootComputedStyleForContext(logicalRoot.ownerDocument),
     };
 

diff --git a/packages/roosterjs-content-model-core/lib/corePlugin/cache/CachePlugin.ts b/packages/roosterjs-content-model-core/lib/corePlugin/cache/CachePlugin.ts
@@ -1,6 +1,6 @@
 import { areSameSelection } from './areSameSelection';
 import { createTextMutationObserver } from './textMutationObserver';
-import { domIndexerImpl } from './domIndexerImpl';
+import { DomIndexerImpl } from './domIndexerImpl';
 import { updateCachedSelection } from './updateCachedSelection';
 import type {
     CachePluginState,
@@ -26,7 +26,10 @@ class CachePlugin implements PluginWithState<CachePluginState> {
         this.state = option.disableCache
             ? {}
             : {
-                  domIndexer: domIndexerImpl,
+                  domIndexer: new DomIndexerImpl(
+                      option.experimentalFeatures &&
+                          option.experimentalFeatures.indexOf('PersistCache') >= 0
+                  ),
                   textMutationObserver: createTextMutationObserver(contentDiv, this.onMutation),
               };
     }