Standalone Editor: Remove legacy plugin: PendingFormatStatePlugin (#2209

) * Remove dependency to EditorCore * fix test * improve * Standalone editor: Remove PendingFormatStatePlugin * fix build
microsoft · Nov 16, 2023 · 8c567d3 · 8c567d3
1 parent 5bface2
commit 8c567d3
Show file tree

Hide file tree

Showing 12 changed files with 13 additions and 323 deletions.
diff --git a/packages-content-model/roosterjs-content-model-editor/lib/coreApi/coreApiMap.ts b/packages-content-model/roosterjs-content-model-editor/lib/coreApi/coreApiMap.ts
@@ -3,7 +3,6 @@ import { attachDomEvent } from './attachDomEvent';
 import { ensureTypeInContainer } from './ensureTypeInContainer';
 import { focus } from './focus';
 import { getContent } from './getContent';
-import { getPendableFormatState } from './getPendableFormatState';
 import { getSelectionRange } from './getSelectionRange';
 import { getSelectionRangeEx } from './getSelectionRangeEx';
 import { getStyleBasedFormatState } from './getStyleBasedFormatState';
@@ -33,7 +32,6 @@ export const coreApiMap: StandaloneCoreApiMap = {
     getSelectionRange,
     getSelectionRangeEx,
     getStyleBasedFormatState,
-    getPendableFormatState,
     hasFocus,
     insertNode,
     restoreUndoSnapshot,

diff --git a/...ages-content-model/roosterjs-content-model-editor/lib/coreApi/getStyleBasedFormatState.ts b/...ages-content-model/roosterjs-content-model-editor/lib/coreApi/getStyleBasedFormatState.ts
@@ -13,18 +13,6 @@ export const getStyleBasedFormatState: GetStyleBasedFormatState = (core, node) =
         return {};
     }
 
-    let override: string[] = [];
-    const pendableFormatSpan = core.pendingFormatState.pendableFormatSpan;
-
-    if (pendableFormatSpan) {
-        override = [
-            pendableFormatSpan.style.fontFamily,
-            pendableFormatSpan.style.fontSize,
-            pendableFormatSpan.style.color,
-            pendableFormatSpan.style.backgroundColor,
-        ];
-    }
-
     const styles = node
         ? getComputedStyles(node, [
               'font-family',
@@ -63,12 +51,12 @@ export const getStyleBasedFormatState: GetStyleBasedFormatState = (core, node) =
         styleBackColor = styleBackColor || styles[3];
     }
 
-    const textColor = darkColorHandler.parseColorValue(override[2] || styleTextColor);
-    const backColor = darkColorHandler.parseColorValue(override[3] || styleBackColor);
+    const textColor = darkColorHandler.parseColorValue(styleTextColor);
+    const backColor = darkColorHandler.parseColorValue(styleBackColor);
 
     return {
-        fontName: override[0] || styles[0],
-        fontSize: override[1] || styles[1],
+        fontName: styles[0],
+        fontSize: styles[1],
         textColor: textColor.lightModeColor,
         backgroundColor: backColor.lightModeColor,
         textColors: textColor.darkModeColor

diff --git a/packages-content-model/roosterjs-content-model-editor/lib/coreApi/selectRange.ts b/packages-content-model/roosterjs-content-model-editor/lib/coreApi/selectRange.ts
@@ -1,12 +1,5 @@
-import {
-    contains,
-    getPendableFormatState,
-    Position,
-    PendableFormatCommandMap,
-    addRangeToSelection,
-    getObjectKeys,
-} from 'roosterjs-editor-dom';
-import type { SelectRange, StandaloneEditorCore } from 'roosterjs-content-model-types';
+import { contains, addRangeToSelection } from 'roosterjs-editor-dom';
+import type { SelectRange } from 'roosterjs-content-model-types';
 
 /**
  * @internal
@@ -25,45 +18,8 @@ export const selectRange: SelectRange = (core, range, skipSameRange) => {
             core.domEvent.selectionRange = range;
         }
 
-        if (range.collapsed) {
-            // If selected, and current selection is collapsed,
-            // need to restore pending format state if exists.
-            restorePendingFormatState(core);
-        }
-
         return true;
     } else {
         return false;
     }
 };
-
-/**
- * Restore cached pending format state (if exist) to current selection
- */
-function restorePendingFormatState(core: StandaloneEditorCore) {
-    const {
-        contentDiv,
-        pendingFormatState,
-        api: { getSelectionRange },
-    } = core;
-
-    if (pendingFormatState.pendableFormatState) {
-        const document = contentDiv.ownerDocument;
-        const formatState = getPendableFormatState(document);
-        getObjectKeys(PendableFormatCommandMap).forEach(key => {
-            if (!!pendingFormatState.pendableFormatState?.[key] != formatState[key]) {
-                document.execCommand(
-                    PendableFormatCommandMap[key],
-                    false /* showUI */,
-                    undefined /* value */
-                );
-            }
-        });
-
-        const range = getSelectionRange(core, true /*tryGetFromCache*/);
-        const position: Position | null = range && Position.getStart(range);
-        if (position) {
-            pendingFormatState.pendableFormatPosition = position;
-        }
-    }
-}
diff --git a/...-content-model/roosterjs-content-model-editor/lib/corePlugins/PendingFormatStatePlugin.ts b/...-content-model/roosterjs-content-model-editor/lib/corePlugins/PendingFormatStatePlugin.ts
diff --git a/packages-content-model/roosterjs-content-model-editor/lib/corePlugins/createCorePlugins.ts b/packages-content-model/roosterjs-content-model-editor/lib/corePlugins/createCorePlugins.ts
@@ -5,12 +5,10 @@ import { createImageSelection } from './ImageSelection';
 import { createLifecyclePlugin } from './LifecyclePlugin';
 import { createMouseUpPlugin } from './MouseUpPlugin';
 import { createNormalizeTablePlugin } from './NormalizeTablePlugin';
-import { createPendingFormatStatePlugin } from './PendingFormatStatePlugin';
 import { createStandaloneEditorCorePlugins } from 'roosterjs-content-model-core';
 import { createUndoPlugin } from './UndoPlugin';
 import type { ContentModelCorePlugins } from '../publicTypes/ContentModelCorePlugins';
 import type { ContentModelEditorOptions } from '../publicTypes/IContentModelEditor';
-import type { PluginState } from 'roosterjs-editor-types';
 import type { ContentModelPluginState } from 'roosterjs-content-model-types';
 
 /**
@@ -37,7 +35,6 @@ export function createCorePlugins(
     return {
         ...createStandaloneEditorCorePlugins(options),
         edit: map.edit || createEditPlugin(),
-        pendingFormatState: map.pendingFormatState || createPendingFormatStatePlugin(),
         _placeholder: null,
         undo: map.undo || createUndoPlugin(options),
         domEvent: map.domEvent || createDOMEventPlugin(options, contentDiv),
@@ -54,12 +51,9 @@ export function createCorePlugins(
  * Get plugin state of core plugins
  * @param corePlugins ContentModelCorePlugins object
  */
-export function getPluginState(
-    corePlugins: ContentModelCorePlugins
-): PluginState & ContentModelPluginState {
+export function getPluginState(corePlugins: ContentModelCorePlugins): ContentModelPluginState {
     return {
         domEvent: corePlugins.domEvent.getState(),
-        pendingFormatState: corePlugins.pendingFormatState.getState(),
         edit: corePlugins.edit.getState(),
         lifecycle: corePlugins.lifecycle.getState(),
         undo: corePlugins.undo.getState(),

diff --git a/packages-content-model/roosterjs-content-model-editor/lib/editor/ContentModelEditor.ts b/packages-content-model/roosterjs-content-model-editor/lib/editor/ContentModelEditor.ts
@@ -1,4 +1,5 @@
 import { createEditorCore } from './createEditorCore';
+import { getPendableFormatState } from './utils/getPendableFormatState';
 import { paste } from 'roosterjs-content-model-core';
 import {
     ChangeSource,
@@ -905,7 +906,7 @@ export class ContentModelEditor implements IContentModelEditor {
      */
     getPendableFormatState(forceGetStateFromDOM: boolean = false): PendableFormatState {
         const core = this.getCore();
-        return core.api.getPendableFormatState(core, forceGetStateFromDOM);
+        return getPendableFormatState(core);
     }
 
     /**

diff --git a/...tor/lib/coreApi/getPendableFormatState.ts → ...ib/editor/utils/getPendableFormatState.ts b/...tor/lib/coreApi/getPendableFormatState.ts → ...ib/editor/utils/getPendableFormatState.ts
@@ -2,34 +2,20 @@ import { contains, getObjectKeys, getTagOfNode, Position } from 'roosterjs-edito
 import { NodeType } from 'roosterjs-editor-types';
 import type { PendableFormatNames } from 'roosterjs-editor-dom';
 import type { NodePosition, PendableFormatState } from 'roosterjs-editor-types';
-import type { GetPendableFormatState, StandaloneEditorCore } from 'roosterjs-content-model-types';
+import type { StandaloneEditorCore } from 'roosterjs-content-model-types';
 
 /**
  * @internal
  * @param core The StandaloneEditorCore object
  * @param forceGetStateFromDOM If set to true, will force get the format state from DOM tree.
  * @returns The cached format state if it exists. If the cached position do not exist, search for pendable elements in the DOM tree and return the pendable format state.
  */
-export const getPendableFormatState: GetPendableFormatState = (
-    core,
-    forceGetStateFromDOM
-): PendableFormatState => {
+export function getPendableFormatState(core: StandaloneEditorCore): PendableFormatState {
     const range = core.api.getSelectionRange(core, true /* tryGetFromCache*/);
-    const cachedPendableFormatState = core.pendingFormatState.pendableFormatState;
-    const cachedPosition = core.pendingFormatState.pendableFormatPosition?.normalize();
     const currentPosition = range && Position.getStart(range).normalize();
-    const isSamePosition =
-        currentPosition &&
-        cachedPosition &&
-        range.collapsed &&
-        currentPosition.equalTo(cachedPosition);
 
-    if (range && cachedPendableFormatState && isSamePosition && !forceGetStateFromDOM) {
-        return cachedPendableFormatState;
-    } else {
-        return currentPosition ? queryCommandStateFromDOM(core, currentPosition) : {};
-    }
-};
+    return currentPosition ? queryCommandStateFromDOM(core, currentPosition) : {};
+}
 
 const PendableStyleCheckers: Record<
     PendableFormatNames,