roosterjs-editor-adapter 0.28.0 → 8.62.0

package/README.md

@@ -6,13 +6,17 @@ Rooster is a framework-independent JavaScript rich-text editor neatly nested
 inside one HTML `<div>` element. Editing operations performed by end users are
 handled in simple ways to generate the final HTML.
 
-To view the sample site, please click the link below:
+Rooster is working on top of a middle layer data structure called "Content Model".
+All format API and editing operation are using this Content Model layer as content format,
+and finally convert to HTML and show it in editor.
 
-[RoosterJs Sample Site](https://microsoft.github.io/roosterjs/index.html).
+To view the demo site, please click the link below:
 
-## Upgrade from RoosterJs 7.\*
+[RoosterJs Demo Site](https://microsoft.github.io/roosterjs/index.html).
 
-Please see [here](https://github.com/microsoft/roosterjs/wiki/RoosterJs-8).
+## Upgrade from RoosterJs 8.\*
+
+Please see [here](https://github.com/microsoft/roosterjs/wiki/RoosterJs-9).
 
 ## Features
 
@@ -25,24 +29,22 @@ Rooster contains 6 basic packages.
    `createEditor()` function in roosterjs to create an editor with default
    configurations.
 
-2. [roosterjs-editor-core](https://microsoft.github.io/roosterjs/docs/modules/roosterjs_editor_core.html):
-   Defines the core editor and plugin infrastructure. Use `roosterjs-editor-core`
+2. [roosterjs-content-model-core](https://microsoft.github.io/roosterjs/docs/modules/roosterjs_content_model_core.html):
+   Defines the core editor and plugin infrastructure. Use `roosterjs-content-model-core`
    instead of `roosterjs` to build and customize your own editor.
 
-3. [roosterjs-editor-api](https://microsoft.github.io/roosterjs/docs/modules/roosterjs_editor_api.html):
+3. [roosterjs-content-model-api](https://microsoft.github.io/roosterjs/docs/modules/roosterjs_content_model_api.html):
    Defines APIs for editor operations. Use these APIs to modify content and
-   formatting in the editor you built using `roosterjs-editor-core`.
+   formatting in the editor you built using `roosterjs-content-model-core`.
 
-4. [roosterjs-editor-dom](https://microsoft.github.io/roosterjs/docs/modules/roosterjs_editor_dom.html):
-   Defines APIs for DOM operations. Use `roosterjs-editor-api` instead unless
-   you want to access DOM API directly.
+4. [roosterjs-content-model-dom](https://microsoft.github.io/roosterjs/docs/modules/roosterjs_content_model_dom.html):
+   Defines APIs for Content Model and DOM operations. This package do conversion between DOM tree and roosterjs Content Model.
 
-5. [roosterjs-editor-plugins](https://microsoft.github.io/roosterjs/docs/modules/roosterjs_editor_plugins.html):
-   Defines basic plugins for common features. Examples: making hyperlinks,
-   pasting HTML content, inserting inline images.
+5. [roosterjs-content-model-plugins](https://microsoft.github.io/roosterjs/docs/modules/roosterjs_content_model_plugins.html):
+   Defines basic plugins for common features.
 
-6. [roosterjs-editor-types](https://microsoft.github.io/roosterjs/docs/modules/roosterjs_editor_types.html):
-   Defines public interfaces and enumerations.
+6. [roosterjs-content-model-types](https://microsoft.github.io/roosterjs/docs/modules/roosterjs_content_model_types.html):
+   Defines public interfaces and enumerations, including Content Model types, API parameters and other types.
 
 There are also some extension packages to provide additional functionalities.
 
@@ -52,30 +54,38 @@ There are also some extension packages to provide additional functionalities.
 2. [roosterjs-react](https://microsoft.github.io/roosterjs/docs/modules/roosterjs_react.html):
    Provide a React wrapper of roosterjs so it can be easily used with React.
 
-3. [roosterjs-editor-types-compatible](https://microsoft.github.io/roosterjs/docs/modules/roosterjs_editor_types_compatible.html):
-   Provide types that are compatible with isolatedModules mode. When using isolatedModules mode,
-   "const enum" will not work correctly, this package provides enums with prefix "Compatible" in
-   their names and they have the same value with const enums in roosterjs-editor-types package
+To be compatible with old (8.\*) versions, you can use `EditorAdapter` class from the following package which can act as a 8.\* Editor:
+
+1. [roosterjs-editor-adapter](https://microsoft.github.io/roosterjs/docs/modules/roosterjs_editor_adapter.html):
+   Provide a adapter class `EditorAdapter` to work with Editor (9.\*) and legacy plugins (via [EditorAdapterOptions.legacyPlugins](https://microsoft.github.io/roosterjs/docs/interfaces/roosterjs_editor_adapter.editoradapteroptions.html#legacyplugins))
+
+And the following packages are for old (8.\*) compatibility:
+
+1. [roosterjs-editor-core](https://microsoft.github.io/roosterjs/docs/modules/roosterjs_editor_core.html):
+2. [roosterjs-editor-api](https://microsoft.github.io/roosterjs/docs/modules/roosterjs_editor_api.html):
+3. [roosterjs-editor-dom](https://microsoft.github.io/roosterjs/docs/modules/roosterjs_editor_dom.html):
+4. [roosterjs-editor-plugins](https://microsoft.github.io/roosterjs/docs/modules/roosterjs_editor_plugins.html):
+5. [roosterjs-editor-types](https://microsoft.github.io/roosterjs/docs/modules/roosterjs_editor_types.html):
+6. [roosterjs-editor-types-compatible](https://microsoft.github.io/roosterjs/docs/modules/roosterjs_editor_types_compatible.html):
 
 ### APIs
 
-Rooster provides DOM level APIs (in `roosterjs-editor-dom`), core APIs (in `roosterjs-editor-core`), and formatting APIs
-(in `roosterjs-editor-api`) to perform editing operations.
+Rooster provides Content Model level APIs (in `roosterjs-content-model-dom`), core APIs (in `roosterjs-content-model-core`), and formatting APIs
+(in `roosterjs-content-modelapi`) to perform editing operations.
 
-`roosterjs-editor-dom` provides several levels of DOM operations:
+`roosterjs-content-model-dom` provides several levels of Content Model operations:
 
--   Perform basic DOM operations such as `wrap()`, `unwrap()`, ...
--   Wrap a given DOM node with `InlineElement` or `BlockElement` and perform
-    operations with DOM Walker API.
--   Perform DOM operations on a given scope using scopers.
--   Travel among `InlineElements` and `BlockElements` with scope using
-    ContentTraverser API.
+-   Create Content Model elements
+-   Convert DOM tree to Content Model
+-   Convert Content Model to DOM tree
+-   Format handlers
+-   A few DOM level API
 
-`roosterjs-editor-core` provides APIs for editor core. Editor class will call such
-APIs to perform basic editor operations. These APIs are overridable by specifying
+`roosterjs-content-model-core` provides APIs for editor core. Editor class will call such
+APIs to perform basic editor operations. These APIs can be overridden by specifying
 API overrides in Editor options when creating the editor.
 
-`roosterjs-editor-api` provides APIs for scenario-based operations triggered by
+`roosterjs-content-model-api` provides APIs for scenario-based operations triggered by
 user interaction.
 
 ## Plugins
@@ -99,7 +109,7 @@ class HelloRooster implements EditorPlugin {
     dispose() {}
 
     onPluginEvent(e: PluginEvent) {
-        if (e.eventType == PluginEventType.KeyPress && e.rawEvent.which == 65) {
+        if (e.eventType == 'input' && e.rawEvent.which == 65) {
             alert('Hello Rooster');
         }
     }
@@ -114,9 +124,9 @@ Install via NPM or Yarn:
 
 You can also install sub packages separately:
 
-`yarn add roosterjs-editor-core`
+`yarn add roosterjs-content-model-core`
 
-`yarn add roosterjs-editor-api`
+`yarn add roosterjs-content-model-api`
 
 `...`
 
@@ -161,9 +171,9 @@ In order to run the code below, you may also need to install [webpack](https://w
 
 ## Sample code
 
-To view the sample site, please click [here](https://microsoft.github.io/roosterjs/index.html).
+To view the demo site, please click [here](https://microsoft.github.io/roosterjs/index.html).
 
-To build the sample site code yourself, follow these instructions:
+To build the demo site code yourself, follow these instructions:
 
 1. Get dependencies using [yarn](https://yarnpkg.com) or [npm](https://www.npmjs.com/):
 

package/lib/corePlugins/BridgePlugin.js

@@ -2,9 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createSizeTransformer = exports.BridgePlugin = void 0;
 var tslib_1 = require("tslib");
-var roosterjs_content_model_core_1 = require("roosterjs-content-model-core");
+var roosterjs_content_model_dom_1 = require("roosterjs-content-model-dom");
 var DarkColorHandlerImpl_1 = require("../editor/DarkColorHandlerImpl");
 var EditPlugin_1 = require("./EditPlugin");
+var IgnoredPluginNames_1 = require("../editor/IgnoredPluginNames");
 var eventConverter_1 = require("../editor/utils/eventConverter");
 var ExclusivelyHandleEventPluginKey = '__ExclusivelyHandleEventPlugin';
 var OldEventKey = '__OldEventFromNewEvent';
@@ -19,7 +20,9 @@ var BridgePlugin = /** @class */ (function () {
         this.onInitialize = onInitialize;
         this.experimentalFeatures = experimentalFeatures;
         var editPlugin = (0, EditPlugin_1.createEditPlugin)();
-        this.legacyPlugins = (0, tslib_1.__spreadArray)([editPlugin], (0, tslib_1.__read)(legacyPlugins.filter(function (x) { return !!x; })), false);
+        this.legacyPlugins = (0, tslib_1.__spreadArray)([
+            editPlugin
+        ], (0, tslib_1.__read)(legacyPlugins.filter(function (x) { return !!x && IgnoredPluginNames_1.IgnoredPluginNames.indexOf(x.getName()) < 0; })), false);
         this.edit = editPlugin.getState();
         this.contextMenuProviders = this.legacyPlugins.filter(isContextMenuProvider);
         this.checkExclusivelyHandling = this.legacyPlugins.some(function (plugin) { return plugin.willHandleEventExclusively; });
@@ -85,7 +88,7 @@ var BridgePlugin = /** @class */ (function () {
     };
     BridgePlugin.prototype.cacheGetExclusivelyHandlePlugin = function (event) {
         var _this = this;
-        return (0, roosterjs_content_model_core_1.cacheGetEventData)(event, ExclusivelyHandleEventPluginKey, function (event) {
+        return (0, roosterjs_content_model_dom_1.cacheGetEventData)(event, ExclusivelyHandleEventPluginKey, function (event) {
             var _a;
             var oldEvent = _this.cacheGetOldEvent(event);
             if (oldEvent) {
@@ -100,7 +103,7 @@ var BridgePlugin = /** @class */ (function () {
         });
     };
     BridgePlugin.prototype.cacheGetOldEvent = function (event) {
-        return (0, roosterjs_content_model_core_1.cacheGetEventData)(event, OldEventKey, eventConverter_1.newEventToOldEvent);
+        return (0, roosterjs_content_model_dom_1.cacheGetEventData)(event, OldEventKey, eventConverter_1.newEventToOldEvent);
     };
     BridgePlugin.prototype.createEditorCore = function (editor) {
         var _a;

package/lib/corePlugins/BridgePlugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"BridgePlugin.js","sourceRoot":"","sources":["../../../../packages/roosterjs-editor-adapter/lib/corePlugins/BridgePlugin.ts"],"names":[],"mappings":"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","sourcesContent":["import { cacheGetEventData } from 'roosterjs-content-model-core';\nimport { createDarkColorHandler } from '../editor/DarkColorHandlerImpl';\nimport { createEditPlugin } from './EditPlugin';\nimport { newEventToOldEvent, oldEventToNewEvent } from '../editor/utils/eventConverter';\nimport type {\n    EditorPlugin as LegacyEditorPlugin,\n    ContextMenuProvider as LegacyContextMenuProvider,\n    IEditor as ILegacyEditor,\n    ExperimentalFeatures,\n    SizeTransformer,\n    EditPluginState,\n    CustomData,\n    DarkColorHandler,\n} from 'roosterjs-editor-types';\nimport type { ContextMenuProvider, IEditor, PluginEvent } from 'roosterjs-content-model-types';\n\nconst ExclusivelyHandleEventPluginKey = '__ExclusivelyHandleEventPlugin';\nconst OldEventKey = '__OldEventFromNewEvent';\n\n/**\n * @internal\n * Represents the core data structure of a editor adapter\n */\nexport interface EditorAdapterCore {\n    /**\n     * Custom data of this editor\n     */\n    readonly customData: Record<string, CustomData>;\n\n    /**\n     * Enabled experimental features\n     */\n    readonly experimentalFeatures: ExperimentalFeatures[];\n\n    /**\n     * Dark model handler for the editor, used for variable-based solution.\n     * If keep it null, editor will still use original dataset-based dark mode solution.\n     */\n    readonly darkColorHandler: DarkColorHandler;\n\n    /**\n     * Plugin state of EditPlugin\n     */\n    readonly edit: EditPluginState;\n\n    /**\n     * Context Menu providers\n     */\n    readonly contextMenuProviders: LegacyContextMenuProvider<any>[];\n\n    /**\n     * @deprecated Use zoomScale instead\n     */\n    readonly sizeTransformer: SizeTransformer;\n}\n\n/**\n * @internal\n * Act as a bridge between Standalone editor and Content Model editor, translate Standalone editor event type to legacy event type\n */\nexport class BridgePlugin implements ContextMenuProvider<any> {\n    private legacyPlugins: LegacyEditorPlugin[];\n    private edit: EditPluginState;\n    private contextMenuProviders: LegacyContextMenuProvider<any>[];\n    private checkExclusivelyHandling: boolean;\n\n    constructor(\n        private onInitialize: (core: EditorAdapterCore) => ILegacyEditor,\n        legacyPlugins: LegacyEditorPlugin[] = [],\n        private experimentalFeatures: ExperimentalFeatures[] = []\n    ) {\n        const editPlugin = createEditPlugin();\n\n        this.legacyPlugins = [editPlugin, ...legacyPlugins.filter(x => !!x)];\n        this.edit = editPlugin.getState();\n        this.contextMenuProviders = this.legacyPlugins.filter(isContextMenuProvider);\n        this.checkExclusivelyHandling = this.legacyPlugins.some(\n            plugin => plugin.willHandleEventExclusively\n        );\n    }\n\n    /**\n     * Get a friendly name of  this plugin\n     */\n    getName() {\n        return 'Bridge';\n    }\n\n    /**\n     * Initialize this plugin. This should only be called from Editor\n     * @param editor Editor instance\n     */\n    initialize(editor: IEditor) {\n        const outerEditor = this.onInitialize(this.createEditorCore(editor));\n\n        this.legacyPlugins.forEach(plugin => plugin.initialize(outerEditor));\n    }\n\n    /**\n     * Dispose this plugin\n     */\n    dispose() {\n        for (let i = this.legacyPlugins.length - 1; i >= 0; i--) {\n            const plugin = this.legacyPlugins[i];\n\n            plugin.dispose();\n        }\n    }\n\n    willHandleEventExclusively(event: PluginEvent) {\n        return this.checkExclusivelyHandling && !!this.cacheGetExclusivelyHandlePlugin(event);\n    }\n\n    onPluginEvent(event: PluginEvent) {\n        const oldEvent = this.cacheGetOldEvent(event);\n\n        if (oldEvent) {\n            const exclusivelyHandleEventPlugin = this.cacheGetExclusivelyHandlePlugin(event);\n\n            if (exclusivelyHandleEventPlugin) {\n                exclusivelyHandleEventPlugin.onPluginEvent?.(oldEvent);\n            } else {\n                this.legacyPlugins.forEach(plugin => plugin.onPluginEvent?.(oldEvent));\n            }\n\n            Object.assign(event, oldEventToNewEvent(oldEvent, event));\n        }\n    }\n\n    /**\n     * A callback to return context menu items\n     * @param target Target node that triggered a ContextMenu event\n     * @returns An array of context menu items, or null means no items needed\n     */\n    getContextMenuItems(target: Node): any[] {\n        const allItems: any[] = [];\n\n        this.contextMenuProviders.forEach(provider => {\n            const items = provider.getContextMenuItems(target) ?? [];\n            if (items?.length > 0) {\n                if (allItems.length > 0) {\n                    allItems.push(null);\n                }\n\n                allItems.push(...items);\n            }\n        });\n\n        return allItems;\n    }\n\n    private cacheGetExclusivelyHandlePlugin(event: PluginEvent) {\n        return cacheGetEventData(event, ExclusivelyHandleEventPluginKey, event => {\n            const oldEvent = this.cacheGetOldEvent(event);\n\n            if (oldEvent) {\n                for (let i = 0; i < this.legacyPlugins.length; i++) {\n                    const plugin = this.legacyPlugins[i];\n\n                    if (plugin.willHandleEventExclusively?.(oldEvent)) {\n                        return plugin;\n                    }\n                }\n            }\n\n            return null;\n        });\n    }\n\n    private cacheGetOldEvent(event: PluginEvent) {\n        return cacheGetEventData(event, OldEventKey, newEventToOldEvent);\n    }\n\n    private createEditorCore(editor: IEditor): EditorAdapterCore {\n        return {\n            customData: {},\n            experimentalFeatures: this.experimentalFeatures ?? [],\n            sizeTransformer: createSizeTransformer(editor),\n            darkColorHandler: createDarkColorHandler(editor.getColorManager()),\n            edit: this.edit,\n            contextMenuProviders: this.contextMenuProviders,\n        };\n    }\n}\n\n/**\n * @internal Export for test only. This function is only used for compatibility from older build\n\n */\nexport function createSizeTransformer(editor: IEditor): SizeTransformer {\n    return size => size / editor.getDOMHelper().calculateZoomScale();\n}\n\nfunction isContextMenuProvider(\n    source: LegacyEditorPlugin\n): source is LegacyContextMenuProvider<any> {\n    return !!(<LegacyContextMenuProvider<any>>source)?.getContextMenuItems;\n}\n"]}
+{"version":3,"file":"BridgePlugin.js","sourceRoot":"","sources":["../../../../packages/roosterjs-editor-adapter/lib/corePlugins/BridgePlugin.ts"],"names":[],"mappings":"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","sourcesContent":["import { cacheGetEventData } from 'roosterjs-content-model-dom';\nimport { createDarkColorHandler } from '../editor/DarkColorHandlerImpl';\nimport { createEditPlugin } from './EditPlugin';\nimport { IgnoredPluginNames } from '../editor/IgnoredPluginNames';\nimport { newEventToOldEvent, oldEventToNewEvent } from '../editor/utils/eventConverter';\nimport type {\n    EditorPlugin as LegacyEditorPlugin,\n    ContextMenuProvider as LegacyContextMenuProvider,\n    IEditor as ILegacyEditor,\n    ExperimentalFeatures,\n    SizeTransformer,\n    EditPluginState,\n    CustomData,\n    DarkColorHandler,\n} from 'roosterjs-editor-types';\nimport type { ContextMenuProvider, IEditor, PluginEvent } from 'roosterjs-content-model-types';\n\nconst ExclusivelyHandleEventPluginKey = '__ExclusivelyHandleEventPlugin';\nconst OldEventKey = '__OldEventFromNewEvent';\n\n/**\n * @internal\n * Represents the core data structure of a editor adapter\n */\nexport interface EditorAdapterCore {\n    /**\n     * Custom data of this editor\n     */\n    readonly customData: Record<string, CustomData>;\n\n    /**\n     * Enabled experimental features\n     */\n    readonly experimentalFeatures: ExperimentalFeatures[];\n\n    /**\n     * Dark model handler for the editor, used for variable-based solution.\n     * If keep it null, editor will still use original dataset-based dark mode solution.\n     */\n    readonly darkColorHandler: DarkColorHandler;\n\n    /**\n     * Plugin state of EditPlugin\n     */\n    readonly edit: EditPluginState;\n\n    /**\n     * Context Menu providers\n     */\n    readonly contextMenuProviders: LegacyContextMenuProvider<any>[];\n\n    /**\n     * @deprecated Use zoomScale instead\n     */\n    readonly sizeTransformer: SizeTransformer;\n}\n\n/**\n * @internal\n * Act as a bridge between Standalone editor and Content Model editor, translate Standalone editor event type to legacy event type\n */\nexport class BridgePlugin implements ContextMenuProvider<any> {\n    private legacyPlugins: LegacyEditorPlugin[];\n    private edit: EditPluginState;\n    private contextMenuProviders: LegacyContextMenuProvider<any>[];\n    private checkExclusivelyHandling: boolean;\n\n    constructor(\n        private onInitialize: (core: EditorAdapterCore) => ILegacyEditor,\n        legacyPlugins: LegacyEditorPlugin[] = [],\n        private experimentalFeatures: ExperimentalFeatures[] = []\n    ) {\n        const editPlugin = createEditPlugin();\n\n        this.legacyPlugins = [\n            editPlugin,\n            ...legacyPlugins.filter(x => !!x && IgnoredPluginNames.indexOf(x.getName()) < 0),\n        ];\n        this.edit = editPlugin.getState();\n        this.contextMenuProviders = this.legacyPlugins.filter(isContextMenuProvider);\n        this.checkExclusivelyHandling = this.legacyPlugins.some(\n            plugin => plugin.willHandleEventExclusively\n        );\n    }\n\n    /**\n     * Get a friendly name of  this plugin\n     */\n    getName() {\n        return 'Bridge';\n    }\n\n    /**\n     * Initialize this plugin. This should only be called from Editor\n     * @param editor Editor instance\n     */\n    initialize(editor: IEditor) {\n        const outerEditor = this.onInitialize(this.createEditorCore(editor));\n\n        this.legacyPlugins.forEach(plugin => plugin.initialize(outerEditor));\n    }\n\n    /**\n     * Dispose this plugin\n     */\n    dispose() {\n        for (let i = this.legacyPlugins.length - 1; i >= 0; i--) {\n            const plugin = this.legacyPlugins[i];\n\n            plugin.dispose();\n        }\n    }\n\n    willHandleEventExclusively(event: PluginEvent) {\n        return this.checkExclusivelyHandling && !!this.cacheGetExclusivelyHandlePlugin(event);\n    }\n\n    onPluginEvent(event: PluginEvent) {\n        const oldEvent = this.cacheGetOldEvent(event);\n\n        if (oldEvent) {\n            const exclusivelyHandleEventPlugin = this.cacheGetExclusivelyHandlePlugin(event);\n\n            if (exclusivelyHandleEventPlugin) {\n                exclusivelyHandleEventPlugin.onPluginEvent?.(oldEvent);\n            } else {\n                this.legacyPlugins.forEach(plugin => plugin.onPluginEvent?.(oldEvent));\n            }\n\n            Object.assign(event, oldEventToNewEvent(oldEvent, event));\n        }\n    }\n\n    /**\n     * A callback to return context menu items\n     * @param target Target node that triggered a ContextMenu event\n     * @returns An array of context menu items, or null means no items needed\n     */\n    getContextMenuItems(target: Node): any[] {\n        const allItems: any[] = [];\n\n        this.contextMenuProviders.forEach(provider => {\n            const items = provider.getContextMenuItems(target) ?? [];\n            if (items?.length > 0) {\n                if (allItems.length > 0) {\n                    allItems.push(null);\n                }\n\n                allItems.push(...items);\n            }\n        });\n\n        return allItems;\n    }\n\n    private cacheGetExclusivelyHandlePlugin(event: PluginEvent) {\n        return cacheGetEventData(event, ExclusivelyHandleEventPluginKey, event => {\n            const oldEvent = this.cacheGetOldEvent(event);\n\n            if (oldEvent) {\n                for (let i = 0; i < this.legacyPlugins.length; i++) {\n                    const plugin = this.legacyPlugins[i];\n\n                    if (plugin.willHandleEventExclusively?.(oldEvent)) {\n                        return plugin;\n                    }\n                }\n            }\n\n            return null;\n        });\n    }\n\n    private cacheGetOldEvent(event: PluginEvent) {\n        return cacheGetEventData(event, OldEventKey, newEventToOldEvent);\n    }\n\n    private createEditorCore(editor: IEditor): EditorAdapterCore {\n        return {\n            customData: {},\n            experimentalFeatures: this.experimentalFeatures ?? [],\n            sizeTransformer: createSizeTransformer(editor),\n            darkColorHandler: createDarkColorHandler(editor.getColorManager()),\n            edit: this.edit,\n            contextMenuProviders: this.contextMenuProviders,\n        };\n    }\n}\n\n/**\n * @internal Export for test only. This function is only used for compatibility from older build\n\n */\nexport function createSizeTransformer(editor: IEditor): SizeTransformer {\n    return size => size / editor.getDOMHelper().calculateZoomScale();\n}\n\nfunction isContextMenuProvider(\n    source: LegacyEditorPlugin\n): source is LegacyContextMenuProvider<any> {\n    return !!(<LegacyContextMenuProvider<any>>source)?.getContextMenuItems;\n}\n"]}

package/lib/editor/EditorAdapter.d.ts

@@ -6,7 +6,6 @@ import type { EditorAdapterOptions } from '../publicTypes/EditorAdapterOptions';
 import type { IEditor } from 'roosterjs-content-model-types';
 /**
  * Editor for Content Model.
- * (This class is still under development, and may still be changed in the future with some breaking changes)
  */
 export declare class EditorAdapter extends Editor implements ILegacyEditor {
     private contentModelEditorCore;

package/lib/editor/EditorAdapter.js

@@ -5,8 +5,8 @@ exports.EditorAdapter = void 0;
 var tslib_1 = require("tslib");
 var BridgePlugin_1 = require("../corePlugins/BridgePlugin");
 var buildRangeEx_1 = require("./utils/buildRangeEx");
-var roosterjs_content_model_dom_1 = require("roosterjs-content-model-dom");
 var insertNode_1 = require("./utils/insertNode");
+var roosterjs_content_model_dom_1 = require("roosterjs-content-model-dom");
 var eventConverter_1 = require("./utils/eventConverter");
 var roosterjs_content_model_core_1 = require("roosterjs-content-model-core");
 var selectionConverter_1 = require("./utils/selectionConverter");
@@ -20,7 +20,6 @@ var GetContentModeMap = (_a = {},
     _a);
 /**
  * Editor for Content Model.
- * (This class is still under development, and may still be changed in the future with some breaking changes)
  */
 var EditorAdapter = /** @class */ (function (_super) {
     (0, tslib_1.__extends)(EditorAdapter, _super);
@@ -99,7 +98,7 @@ var EditorAdapter = /** @class */ (function (_super) {
             }
             else {
                 if (this.isDarkMode()) {
-                    (0, roosterjs_content_model_core_1.transformColor)(node, true /*includeSelf*/, 'lightToDark', this.getColorManager());
+                    (0, roosterjs_content_model_dom_1.transformColor)(node, true /*includeSelf*/, 'lightToDark', this.getColorManager());
                 }
                 var selection = (0, insertNode_1.insertNode)(physicalRoot, this.getDOMSelection(), node, option);
                 if (selection && option.updateCursor) {
@@ -231,7 +230,7 @@ var EditorAdapter = /** @class */ (function (_super) {
             }, false /*broadcast*/);
         }
         else if (lifecycle.isDarkMode) {
-            (0, roosterjs_content_model_core_1.transformColor)(physicalRoot, false /*includeSelf*/, 'lightToDark', darkColorHandler);
+            (0, roosterjs_content_model_dom_1.transformColor)(physicalRoot, false /*includeSelf*/, 'lightToDark', darkColorHandler);
         }
     };
     /**
@@ -529,8 +528,10 @@ var EditorAdapter = /** @class */ (function (_super) {
             var selection = core.api.getDOMSelection(core);
             if ((selection === null || selection === void 0 ? void 0 : selection.type) == 'range') {
                 core.undo.snapshotsManager.hasNewContent = false;
-                core.undo.posContainer = selection.range.startContainer;
-                core.undo.posOffset = selection.range.startOffset;
+                core.undo.autoCompleteInsertPoint = {
+                    node: selection.range.startContainer,
+                    offset: selection.range.startOffset,
+                };
             }
         }
     };
@@ -568,7 +569,7 @@ var EditorAdapter = /** @class */ (function (_super) {
     EditorAdapter.prototype.getDefaultFormat = function () {
         var format = this.getCore().format.defaultFormat;
         return {
-            bold: (0, roosterjs_content_model_core_1.isBold)(format.fontWeight),
+            bold: (0, roosterjs_content_model_dom_1.isBold)(format.fontWeight),
             italic: format.italic,
             underline: format.underline,
             fontFamily: format.fontFamily,
@@ -764,7 +765,7 @@ var EditorAdapter = /** @class */ (function (_super) {
         if (direction === void 0) { direction = 0 /* LightToDark */; }
         var core = this.getCore();
         if (core.lifecycle.isDarkMode) {
-            (0, roosterjs_content_model_core_1.transformColor)(node, true /*includeSelf*/, direction == 1 /* DarkToLight */ ? 'darkToLight' : 'lightToDark', core.darkColorHandler);
+            (0, roosterjs_content_model_dom_1.transformColor)(node, true /*includeSelf*/, direction == 1 /* DarkToLight */ ? 'darkToLight' : 'lightToDark', core.darkColorHandler);
         }
     };
     /**
@@ -822,8 +823,10 @@ var EditorAdapter = /** @class */ (function (_super) {
     EditorAdapter.prototype.retrieveFormatState = function () {
         var pendingFormat = this.getPendingFormat();
         var result = {};
-        var model = this.getContentModelCopy('reduced');
-        (0, roosterjs_content_model_core_1.retrieveModelFormatState)(model, pendingFormat, result);
+        this.formatContentModel(function (model) {
+            (0, roosterjs_content_model_dom_1.retrieveModelFormatState)(model, pendingFormat, result);
+            return false;
+        });
         return result;
     };
     /**