roosterjs-editor-adapter 0.26.0

package/lib-amd/corePlugins/EditPlugin.js

@@ -0,0 +1,90 @@
+define(["require", "exports", "roosterjs-editor-dom"], function (require, exports, roosterjs_editor_dom_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.createEditPlugin = void 0;
+    /**
+     * Edit Component helps handle Content edit features
+     */
+    var EditPlugin = /** @class */ (function () {
+        /**
+         * Construct a new instance of EditPlugin
+         * @param options The editor options
+         */
+        function EditPlugin() {
+            this.editor = null;
+            this.state = {
+                features: {},
+            };
+        }
+        /**
+         * Get a friendly name of  this plugin
+         */
+        EditPlugin.prototype.getName = function () {
+            return 'Edit';
+        };
+        /**
+         * Initialize this plugin. This should only be called from Editor
+         * @param editor Editor instance
+         */
+        EditPlugin.prototype.initialize = function (editor) {
+            this.editor = editor;
+        };
+        /**
+         * Dispose this plugin
+         */
+        EditPlugin.prototype.dispose = function () {
+            this.editor = null;
+        };
+        /**
+         * Get plugin state object
+         */
+        EditPlugin.prototype.getState = function () {
+            return this.state;
+        };
+        /**
+         * Handle events triggered from editor
+         * @param event PluginEvent object
+         */
+        EditPlugin.prototype.onPluginEvent = function (event) {
+            var _a;
+            var hasFunctionKey = false;
+            var features = null;
+            var ctrlOrMeta = false;
+            var isKeyDownEvent = event.eventType == 0 /* KeyDown */;
+            if (isKeyDownEvent) {
+                var rawEvent = event.rawEvent;
+                var range = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.getSelectionRange();
+                ctrlOrMeta = (0, roosterjs_editor_dom_1.isCtrlOrMetaPressed)(rawEvent);
+                hasFunctionKey = ctrlOrMeta || rawEvent.altKey;
+                features =
+                    this.state.features[rawEvent.which] ||
+                        (range && !range.collapsed && this.state.features[258 /* RANGE */]);
+            }
+            else if (event.eventType == 7 /* ContentChanged */) {
+                features = this.state.features[257 /* CONTENTCHANGED */];
+            }
+            for (var i = 0; features && i < (features === null || features === void 0 ? void 0 : features.length); i++) {
+                var feature = features[i];
+                if ((feature.allowFunctionKeys || !hasFunctionKey) &&
+                    this.editor &&
+                    feature.shouldHandleEvent(event, this.editor, ctrlOrMeta)) {
+                    feature.handleEvent(event, this.editor);
+                    if (isKeyDownEvent) {
+                        event.handledByEditFeature = true;
+                    }
+                    break;
+                }
+            }
+        };
+        return EditPlugin;
+    }());
+    /**
+     * @internal
+     * Create a new instance of EditPlugin.
+     */
+    function createEditPlugin() {
+        return new EditPlugin();
+    }
+    exports.createEditPlugin = createEditPlugin;
+});
+//# sourceMappingURL=EditPlugin.js.map

package/lib-amd/corePlugins/EditPlugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditPlugin.js","sourceRoot":"","sources":["../../../../packages/roosterjs-editor-adapter/lib/corePlugins/EditPlugin.ts"],"names":[],"mappings":";;;;IAUA;;OAEG;IACH;QAII;;;WAGG;QACH;YAPQ,WAAM,GAAmB,IAAI,CAAC;YAQlC,IAAI,CAAC,KAAK,GAAG;gBACT,QAAQ,EAAE,EAAE;aACf,CAAC;QACN,CAAC;QAED;;WAEG;QACH,4BAAO,GAAP;YACI,OAAO,MAAM,CAAC;QAClB,CAAC;QAED;;;WAGG;QACH,+BAAU,GAAV,UAAW,MAAe;YACtB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACzB,CAAC;QAED;;WAEG;QACH,4BAAO,GAAP;YACI,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACvB,CAAC;QAED;;WAEG;QACH,6BAAQ,GAAR;YACI,OAAO,IAAI,CAAC,KAAK,CAAC;QACtB,CAAC;QAED;;;WAGG;QACH,kCAAa,GAAb,UAAc,KAAkB;;YAC5B,IAAI,cAAc,GAAG,KAAK,CAAC;YAC3B,IAAI,QAAQ,GAAoD,IAAI,CAAC;YACrE,IAAI,UAAU,GAAG,KAAK,CAAC;YACvB,IAAM,cAAc,GAAG,KAAK,CAAC,SAAS,mBAA2B,CAAC;YAElE,IAAI,cAAc,EAAE;gBAChB,IAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC;gBAChC,IAAM,KAAK,GAAG,MAAA,IAAI,CAAC,MAAM,0CAAE,iBAAiB,EAAE,CAAC;gBAE/C,UAAU,GAAG,IAAA,0CAAmB,EAAC,QAAQ,CAAC,CAAC;gBAC3C,cAAc,GAAG,UAAU,IAAI,QAAQ,CAAC,MAAM,CAAC;gBAC/C,QAAQ;oBACJ,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC;wBACnC,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,iBAAY,CAAC,CAAC;aACtE;iBAAM,IAAI,KAAK,CAAC,SAAS,0BAAkC,EAAE;gBAC1D,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,0BAAqB,CAAC;aACvD;YAED,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,QAAQ,IAAI,CAAC,IAAG,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,MAAM,CAAA,EAAE,CAAC,EAAE,EAAE;gBACnD,IAAM,OAAO,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;gBAC5B,IACI,CAAC,OAAO,CAAC,iBAAiB,IAAI,CAAC,cAAc,CAAC;oBAC9C,IAAI,CAAC,MAAM;oBACX,OAAO,CAAC,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,UAAU,CAAC,EAC3D;oBACE,OAAO,CAAC,WAAW,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;oBACxC,IAAI,cAAc,EAAE;wBAChB,KAAK,CAAC,oBAAoB,GAAG,IAAI,CAAC;qBACrC;oBACD,MAAM;iBACT;aACJ;QACL,CAAC;QACL,iBAAC;IAAD,CAAC,AAjFD,IAiFC;IAED;;;OAGG;IACH,SAAgB,gBAAgB;QAC5B,OAAO,IAAI,UAAU,EAAE,CAAC;IAC5B,CAAC;IAFD,4CAEC","sourcesContent":["import { isCtrlOrMetaPressed } from 'roosterjs-editor-dom';\r\nimport { Keys, PluginEventType } from 'roosterjs-editor-types';\r\nimport type {\r\n    EditPluginState,\r\n    GenericContentEditFeature,\r\n    IEditor,\r\n    PluginEvent,\r\n    PluginWithState,\r\n} from 'roosterjs-editor-types';\r\n\r\n/**\r\n * Edit Component helps handle Content edit features\r\n */\r\nclass EditPlugin implements PluginWithState<EditPluginState> {\r\n    private editor: IEditor | null = null;\r\n    private state: EditPluginState;\r\n\r\n    /**\r\n     * Construct a new instance of EditPlugin\r\n     * @param options The editor options\r\n     */\r\n    constructor() {\r\n        this.state = {\r\n            features: {},\r\n        };\r\n    }\r\n\r\n    /**\r\n     * Get a friendly name of  this plugin\r\n     */\r\n    getName() {\r\n        return 'Edit';\r\n    }\r\n\r\n    /**\r\n     * Initialize this plugin. This should only be called from Editor\r\n     * @param editor Editor instance\r\n     */\r\n    initialize(editor: IEditor) {\r\n        this.editor = editor;\r\n    }\r\n\r\n    /**\r\n     * Dispose this plugin\r\n     */\r\n    dispose() {\r\n        this.editor = null;\r\n    }\r\n\r\n    /**\r\n     * Get plugin state object\r\n     */\r\n    getState() {\r\n        return this.state;\r\n    }\r\n\r\n    /**\r\n     * Handle events triggered from editor\r\n     * @param event PluginEvent object\r\n     */\r\n    onPluginEvent(event: PluginEvent) {\r\n        let hasFunctionKey = false;\r\n        let features: GenericContentEditFeature<PluginEvent>[] | null = null;\r\n        let ctrlOrMeta = false;\r\n        const isKeyDownEvent = event.eventType == PluginEventType.KeyDown;\r\n\r\n        if (isKeyDownEvent) {\r\n            const rawEvent = event.rawEvent;\r\n            const range = this.editor?.getSelectionRange();\r\n\r\n            ctrlOrMeta = isCtrlOrMetaPressed(rawEvent);\r\n            hasFunctionKey = ctrlOrMeta || rawEvent.altKey;\r\n            features =\r\n                this.state.features[rawEvent.which] ||\r\n                (range && !range.collapsed && this.state.features[Keys.RANGE]);\r\n        } else if (event.eventType == PluginEventType.ContentChanged) {\r\n            features = this.state.features[Keys.CONTENTCHANGED];\r\n        }\r\n\r\n        for (let i = 0; features && i < features?.length; i++) {\r\n            const feature = features[i];\r\n            if (\r\n                (feature.allowFunctionKeys || !hasFunctionKey) &&\r\n                this.editor &&\r\n                feature.shouldHandleEvent(event, this.editor, ctrlOrMeta)\r\n            ) {\r\n                feature.handleEvent(event, this.editor);\r\n                if (isKeyDownEvent) {\r\n                    event.handledByEditFeature = true;\r\n                }\r\n                break;\r\n            }\r\n        }\r\n    }\r\n}\r\n\r\n/**\r\n * @internal\r\n * Create a new instance of EditPlugin.\r\n */\r\nexport function createEditPlugin(): PluginWithState<EditPluginState> {\r\n    return new EditPlugin();\r\n}\r\n"]}

package/lib-amd/editor/DarkColorHandlerImpl.d.ts

@@ -0,0 +1,6 @@
+import type { DarkColorHandler } from 'roosterjs-editor-types';
+import type { DarkColorHandler as StandaloneDarkColorHandler } from 'roosterjs-content-model-types';
+/**
+ * @internal
+ */
+export declare function createDarkColorHandler(innerHandler: StandaloneDarkColorHandler): DarkColorHandler;

package/lib-amd/editor/DarkColorHandlerImpl.js

@@ -0,0 +1,135 @@
+define(["require", "exports", "roosterjs-content-model-dom"], function (require, exports, roosterjs_content_model_dom_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.createDarkColorHandler = void 0;
+    var VARIABLE_REGEX = /^\s*var\(\s*(\-\-[a-zA-Z0-9\-_]+)\s*(?:,\s*(.*))?\)\s*$/;
+    var VARIABLE_PREFIX = 'var(';
+    var COLOR_VAR_PREFIX = 'darkColor';
+    var DarkColorHandlerImpl = /** @class */ (function () {
+        function DarkColorHandlerImpl(innerHandler) {
+            this.innerHandler = innerHandler;
+        }
+        /**
+         * Get a copy of known colors
+         * @returns
+         */
+        DarkColorHandlerImpl.prototype.getKnownColorsCopy = function () {
+            return Object.values(this.innerHandler.knownColors);
+        };
+        /**
+         * Given a light mode color value and an optional dark mode color value, register this color
+         * so that editor can handle it, then return the CSS color value for current color mode.
+         * @param lightModeColor Light mode color value
+         * @param isDarkMode Whether current color mode is dark mode
+         * @param darkModeColor Optional dark mode color value. If not passed, we will calculate one.
+         */
+        DarkColorHandlerImpl.prototype.registerColor = function (lightModeColor, isDarkMode, darkModeColor) {
+            var parsedColor = this.parseColorValue(lightModeColor);
+            var colorKey;
+            if (parsedColor) {
+                lightModeColor = parsedColor.lightModeColor;
+                darkModeColor = parsedColor.darkModeColor || darkModeColor;
+                colorKey = parsedColor.key;
+            }
+            if (isDarkMode && lightModeColor) {
+                colorKey =
+                    colorKey || "--" + COLOR_VAR_PREFIX + "_" + lightModeColor.replace(/[^\d\w]/g, '_');
+                this.innerHandler.updateKnownColor(isDarkMode, colorKey, {
+                    lightModeColor: lightModeColor,
+                    darkModeColor: darkModeColor || this.innerHandler.getDarkColor(lightModeColor),
+                });
+                return "var(" + colorKey + ", " + lightModeColor + ")";
+            }
+            else {
+                return lightModeColor;
+            }
+        };
+        /**
+         * Reset known color record, clean up registered color variables.
+         */
+        DarkColorHandlerImpl.prototype.reset = function () {
+            this.innerHandler.reset();
+        };
+        /**
+         * Parse an existing color value, if it is in variable-based color format, extract color key,
+         * light color and query related dark color if any
+         * @param color The color string to parse
+         * @param isInDarkMode Whether current content is in dark mode. When set to true, if the color value is not in dark var format,
+         * we will treat is as a dark mode color and try to find a matched dark mode color.
+         */
+        DarkColorHandlerImpl.prototype.parseColorValue = function (color, isInDarkMode) {
+            var _a;
+            var key;
+            var lightModeColor = '';
+            var darkModeColor;
+            if (color) {
+                var match = color.startsWith(VARIABLE_PREFIX) ? VARIABLE_REGEX.exec(color) : null;
+                if (match) {
+                    if (match[2]) {
+                        key = match[1];
+                        lightModeColor = match[2];
+                        darkModeColor = (_a = this.innerHandler.knownColors[key]) === null || _a === void 0 ? void 0 : _a.darkModeColor;
+                    }
+                    else {
+                        lightModeColor = '';
+                    }
+                }
+                else if (isInDarkMode) {
+                    // If editor is in dark mode but the color is not in dark color format, it is possible the color was inserted from external code
+                    // without any light color info. So we first try to see if there is a known dark color can match this color, and use its related
+                    // light color as light mode color. Otherwise we need to drop this color to avoid show "white on white" content.
+                    lightModeColor = this.findLightColorFromDarkColor(color) || '';
+                    if (lightModeColor) {
+                        darkModeColor = color;
+                    }
+                }
+                else {
+                    lightModeColor = color;
+                }
+            }
+            return { key: key, lightModeColor: lightModeColor, darkModeColor: darkModeColor };
+        };
+        /**
+         * Find related light mode color from dark mode color.
+         * @param darkColor The existing dark color
+         */
+        DarkColorHandlerImpl.prototype.findLightColorFromDarkColor = function (darkColor) {
+            var rgbSearch = (0, roosterjs_content_model_dom_1.parseColor)(darkColor);
+            var knownColors = this.innerHandler.knownColors;
+            if (rgbSearch) {
+                var key = (0, roosterjs_content_model_dom_1.getObjectKeys)(knownColors).find(function (key) {
+                    var rgbCurrent = (0, roosterjs_content_model_dom_1.parseColor)(knownColors[key].darkModeColor);
+                    return (rgbCurrent &&
+                        rgbCurrent[0] == rgbSearch[0] &&
+                        rgbCurrent[1] == rgbSearch[1] &&
+                        rgbCurrent[2] == rgbSearch[2]);
+                });
+                if (key) {
+                    return knownColors[key].lightModeColor;
+                }
+            }
+            return null;
+        };
+        /**
+         * Transform element color, from dark to light or from light to dark
+         * @param element The element to transform color
+         * @param fromDarkMode Whether this is transforming color from dark mode
+         * @param toDarkMode Whether this is transforming color to dark mode
+         */
+        DarkColorHandlerImpl.prototype.transformElementColor = function (element, fromDarkMode, toDarkMode) {
+            var textColor = (0, roosterjs_content_model_dom_1.getColor)(element, false /*isBackground*/, !toDarkMode, this.innerHandler);
+            var backColor = (0, roosterjs_content_model_dom_1.getColor)(element, true /*isBackground*/, !toDarkMode, this.innerHandler);
+            (0, roosterjs_content_model_dom_1.setColor)(element, textColor, false /*isBackground*/, toDarkMode, this.innerHandler);
+            (0, roosterjs_content_model_dom_1.setColor)(element, backColor, true /*isBackground*/, toDarkMode, this.innerHandler);
+        };
+        return DarkColorHandlerImpl;
+    }());
+    /**
+     * @internal
+     */
+    function createDarkColorHandler(innerHandler) {
+        return new DarkColorHandlerImpl(innerHandler);
+    }
+    exports.createDarkColorHandler = createDarkColorHandler;
+});
+//# sourceMappingURL=DarkColorHandlerImpl.js.map

package/lib-amd/editor/DarkColorHandlerImpl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DarkColorHandlerImpl.js","sourceRoot":"","sources":["../../../../packages/roosterjs-editor-adapter/lib/editor/DarkColorHandlerImpl.ts"],"names":[],"mappings":"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","sourcesContent":["import { getColor, getObjectKeys, parseColor, setColor } from 'roosterjs-content-model-dom';\r\nimport type { ColorKeyAndValue, DarkColorHandler } from 'roosterjs-editor-types';\r\nimport type { DarkColorHandler as StandaloneDarkColorHandler } from 'roosterjs-content-model-types';\r\n\r\nconst VARIABLE_REGEX = /^\\s*var\\(\\s*(\\-\\-[a-zA-Z0-9\\-_]+)\\s*(?:,\\s*(.*))?\\)\\s*$/;\r\nconst VARIABLE_PREFIX = 'var(';\r\nconst COLOR_VAR_PREFIX = 'darkColor';\r\n\r\nclass DarkColorHandlerImpl implements DarkColorHandler {\r\n    constructor(private innerHandler: StandaloneDarkColorHandler) {}\r\n\r\n    /**\r\n     * Get a copy of known colors\r\n     * @returns\r\n     */\r\n    getKnownColorsCopy() {\r\n        return Object.values(this.innerHandler.knownColors);\r\n    }\r\n\r\n    /**\r\n     * Given a light mode color value and an optional dark mode color value, register this color\r\n     * so that editor can handle it, then return the CSS color value for current color mode.\r\n     * @param lightModeColor Light mode color value\r\n     * @param isDarkMode Whether current color mode is dark mode\r\n     * @param darkModeColor Optional dark mode color value. If not passed, we will calculate one.\r\n     */\r\n    registerColor(lightModeColor: string, isDarkMode: boolean, darkModeColor?: string): string {\r\n        const parsedColor = this.parseColorValue(lightModeColor);\r\n        let colorKey: string | undefined;\r\n\r\n        if (parsedColor) {\r\n            lightModeColor = parsedColor.lightModeColor;\r\n            darkModeColor = parsedColor.darkModeColor || darkModeColor;\r\n            colorKey = parsedColor.key;\r\n        }\r\n\r\n        if (isDarkMode && lightModeColor) {\r\n            colorKey =\r\n                colorKey || `--${COLOR_VAR_PREFIX}_${lightModeColor.replace(/[^\\d\\w]/g, '_')}`;\r\n\r\n            this.innerHandler.updateKnownColor(isDarkMode, colorKey, {\r\n                lightModeColor,\r\n                darkModeColor: darkModeColor || this.innerHandler.getDarkColor(lightModeColor),\r\n            });\r\n\r\n            return `var(${colorKey}, ${lightModeColor})`;\r\n        } else {\r\n            return lightModeColor;\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Reset known color record, clean up registered color variables.\r\n     */\r\n    reset(): void {\r\n        this.innerHandler.reset();\r\n    }\r\n\r\n    /**\r\n     * Parse an existing color value, if it is in variable-based color format, extract color key,\r\n     * light color and query related dark color if any\r\n     * @param color The color string to parse\r\n     * @param isInDarkMode Whether current content is in dark mode. When set to true, if the color value is not in dark var format,\r\n     * we will treat is as a dark mode color and try to find a matched dark mode color.\r\n     */\r\n    parseColorValue(color: string | undefined | null, isInDarkMode?: boolean): ColorKeyAndValue {\r\n        let key: string | undefined;\r\n        let lightModeColor = '';\r\n        let darkModeColor: string | undefined;\r\n\r\n        if (color) {\r\n            const match = color.startsWith(VARIABLE_PREFIX) ? VARIABLE_REGEX.exec(color) : null;\r\n\r\n            if (match) {\r\n                if (match[2]) {\r\n                    key = match[1];\r\n                    lightModeColor = match[2];\r\n                    darkModeColor = this.innerHandler.knownColors[key]?.darkModeColor;\r\n                } else {\r\n                    lightModeColor = '';\r\n                }\r\n            } else if (isInDarkMode) {\r\n                // If editor is in dark mode but the color is not in dark color format, it is possible the color was inserted from external code\r\n                // without any light color info. So we first try to see if there is a known dark color can match this color, and use its related\r\n                // light color as light mode color. Otherwise we need to drop this color to avoid show \"white on white\" content.\r\n                lightModeColor = this.findLightColorFromDarkColor(color) || '';\r\n\r\n                if (lightModeColor) {\r\n                    darkModeColor = color;\r\n                }\r\n            } else {\r\n                lightModeColor = color;\r\n            }\r\n        }\r\n\r\n        return { key, lightModeColor, darkModeColor };\r\n    }\r\n\r\n    /**\r\n     * Find related light mode color from dark mode color.\r\n     * @param darkColor The existing dark color\r\n     */\r\n    findLightColorFromDarkColor(darkColor: string): string | null {\r\n        const rgbSearch = parseColor(darkColor);\r\n        const knownColors = this.innerHandler.knownColors;\r\n\r\n        if (rgbSearch) {\r\n            const key = getObjectKeys(knownColors).find(key => {\r\n                const rgbCurrent = parseColor(knownColors[key].darkModeColor);\r\n\r\n                return (\r\n                    rgbCurrent &&\r\n                    rgbCurrent[0] == rgbSearch[0] &&\r\n                    rgbCurrent[1] == rgbSearch[1] &&\r\n                    rgbCurrent[2] == rgbSearch[2]\r\n                );\r\n            });\r\n\r\n            if (key) {\r\n                return knownColors[key].lightModeColor;\r\n            }\r\n        }\r\n\r\n        return null;\r\n    }\r\n\r\n    /**\r\n     * Transform element color, from dark to light or from light to dark\r\n     * @param element The element to transform color\r\n     * @param fromDarkMode Whether this is transforming color from dark mode\r\n     * @param toDarkMode Whether this is transforming color to dark mode\r\n     */\r\n    transformElementColor(element: HTMLElement, fromDarkMode: boolean, toDarkMode: boolean): void {\r\n        const textColor = getColor(element, false /*isBackground*/, !toDarkMode, this.innerHandler);\r\n        const backColor = getColor(element, true /*isBackground*/, !toDarkMode, this.innerHandler);\r\n\r\n        setColor(element, textColor, false /*isBackground*/, toDarkMode, this.innerHandler);\r\n        setColor(element, backColor, true /*isBackground*/, toDarkMode, this.innerHandler);\r\n    }\r\n}\r\n\r\n/**\r\n * @internal\r\n */\r\nexport function createDarkColorHandler(innerHandler: StandaloneDarkColorHandler): DarkColorHandler {\r\n    return new DarkColorHandlerImpl(innerHandler);\r\n}\r\n"]}

package/lib-amd/editor/EditorAdapter.d.ts

@@ -0,0 +1,341 @@
+import { StandaloneEditor } from 'roosterjs-content-model-core';
+import { ChangeSource, ColorTransformDirection, ContentPosition, GetContentMode, PluginEventType, QueryScope, RegionType } from 'roosterjs-editor-types';
+import type { BlockElement, ClipboardData, ContentChangedData, DOMEventHandler, DefaultFormat, EditorUndoState, ExperimentalFeatures, GenericContentEditFeature, IContentTraverser, IPositionContentSearcher, InsertOption, NodePosition, PendableFormatState, PluginEvent, PluginEventData, PluginEventFromType, PositionType, Region, SelectionPath, SelectionRangeEx, SizeTransformer, StyleBasedFormatState, TableSelection, DarkColorHandler, IEditor } from 'roosterjs-editor-types';
+import type { CompatibleChangeSource, CompatibleColorTransformDirection, CompatibleContentPosition, CompatibleExperimentalFeatures, CompatibleGetContentMode, CompatiblePluginEventType, CompatibleQueryScope, CompatibleRegionType } from 'roosterjs-editor-types/lib/compatibleTypes';
+import type { EditorAdapterOptions } from '../publicTypes/EditorAdapterOptions';
+import type { IStandaloneEditor } 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 StandaloneEditor implements IEditor {
+    private contentModelEditorCore;
+    /**
+     * Creates an instance of Editor
+     * @param contentDiv The DIV HTML element which will be the container element of editor
+     * @param options An optional options object to customize the editor
+     */
+    constructor(contentDiv: HTMLDivElement, options?: EditorAdapterOptions);
+    /**
+     * Dispose this editor, dispose all plugins and custom data
+     */
+    dispose(): void;
+    /**
+     * Get whether this editor is disposed
+     * @returns True if editor is disposed, otherwise false
+     */
+    isDisposed(): boolean;
+    /**
+     * Insert node into editor
+     * @param node The node to insert
+     * @param option Insert options. Default value is:
+     *  position: ContentPosition.SelectionStart
+     *  updateCursor: true
+     *  replaceSelection: true
+     *  insertOnNewLine: false
+     * @returns true if node is inserted. Otherwise false
+     */
+    insertNode(node: Node, option?: InsertOption): boolean;
+    /**
+     * Delete a node from editor content
+     * @param node The node to delete
+     * @returns true if node is deleted. Otherwise false
+     */
+    deleteNode(node: Node): boolean;
+    /**
+     * Replace a node in editor content with another node
+     * @param existingNode The existing node to be replaced
+     * @param toNode node to replace to
+     * @param transformColorForDarkMode (optional) Whether to transform new node to dark mode. Default is false
+     * @returns true if node is replaced. Otherwise false
+     */
+    replaceNode(existingNode: Node, toNode: Node, transformColorForDarkMode?: boolean): boolean;
+    /**
+     * Get BlockElement at given node
+     * @param node The node to create InlineElement
+     * @returns The BlockElement result
+     */
+    getBlockElementAtNode(node: Node): BlockElement | null;
+    contains(arg: Node | Range | null): boolean;
+    queryElements(selector: string, scopeOrCallback?: QueryScope | CompatibleQueryScope | ((node: Node) => any), callback?: (node: Node) => any): HTMLElement[];
+    /**
+     * Collapse nodes within the given start and end nodes to their common ancestor node,
+     * split parent nodes if necessary
+     * @param start The start node
+     * @param end The end node
+     * @param canSplitParent True to allow split parent node there are nodes before start or after end under the same parent
+     * and the returned nodes will be all nodes from start through end after splitting
+     * False to disallow split parent
+     * @returns When canSplitParent is true, returns all node from start through end after splitting,
+     * otherwise just return start and end
+     */
+    collapseNodes(start: Node, end: Node, canSplitParent: boolean): Node[];
+    /**
+     * Check whether the editor contains any visible content
+     * @param trim Whether trim the content string before check. Default is false
+     * @returns True if there's no visible content, otherwise false
+     */
+    isEmpty(trim?: boolean): boolean;
+    /**
+     * Get current editor content as HTML string
+     * @param mode specify what kind of HTML content to retrieve
+     * @returns HTML string representing current editor content
+     */
+    getContent(mode?: GetContentMode | CompatibleGetContentMode): string;
+    /**
+     * Set HTML content to this editor. All existing content will be replaced. A ContentChanged event will be triggered
+     * @param content HTML content to set in
+     * @param triggerContentChangedEvent True to trigger a ContentChanged event. Default value is true
+     */
+    setContent(content: string, triggerContentChangedEvent?: boolean): void;
+    /**
+     * Insert HTML content into editor
+     * @param HTML content to insert
+     * @param option Insert options. Default value is:
+     *  position: ContentPosition.SelectionStart
+     *  updateCursor: true
+     *  replaceSelection: true
+     *  insertOnNewLine: false
+     */
+    insertContent(content: string, option?: InsertOption): void;
+    /**
+     * Delete selected content
+     */
+    deleteSelectedContent(): NodePosition | null;
+    /**
+     * Paste into editor using a clipboardData object
+     * @param clipboardData Clipboard data retrieved from clipboard
+     * @param pasteAsText Force pasting as plain text. Default value is false
+     * @param applyCurrentStyle True if apply format of current selection to the pasted content,
+     * false to keep original format.  Default value is false. When pasteAsText is true, this parameter is ignored
+     * @param pasteAsImage: When set to true, if the clipboardData contains a imageDataUri will paste the image to the editor
+     */
+    paste(clipboardData: ClipboardData, pasteAsText?: boolean, applyCurrentFormat?: boolean, pasteAsImage?: boolean): void;
+    /**
+     * Get current selection range from Editor.
+     * It does a live pull on the selection, if nothing retrieved, return whatever we have in cache.
+     * @param tryGetFromCache Set to true to retrieve the selection range from cache if editor doesn't own the focus now.
+     * Default value is true
+     * @returns current selection range, or null if editor never got focus before
+     */
+    getSelectionRange(tryGetFromCache?: boolean): Range | null;
+    /**
+     * Get current selection range from Editor.
+     * It does a live pull on the selection, if nothing retrieved, return whatever we have in cache.
+     * @param tryGetFromCache Set to true to retrieve the selection range from cache if editor doesn't own the focus now.
+     * Default value is true
+     * @returns current selection range, or null if editor never got focus before
+     */
+    getSelectionRangeEx(): SelectionRangeEx;
+    /**
+     * Get current selection in a serializable format
+     * It does a live pull on the selection, if nothing retrieved, return whatever we have in cache.
+     * @returns current selection path, or null if editor never got focus before
+     */
+    getSelectionPath(): SelectionPath | null;
+    select(arg1: Range | SelectionRangeEx | NodePosition | Node | SelectionPath | null, arg2?: NodePosition | number | PositionType | TableSelection | null, arg3?: Node, arg4?: number | PositionType): boolean;
+    /**
+     * Get current focused position. Return null if editor doesn't have focus at this time.
+     */
+    getFocusedPosition(): NodePosition | null;
+    /**
+     * Get an HTML element from current cursor position.
+     * When expectedTags is not specified, return value is the current node (if it is HTML element)
+     * or its parent node (if current node is a Text node).
+     * When expectedTags is specified, return value is the first ancestor of current node which has
+     * one of the expected tags.
+     * If no element found within editor by the given tag, return null.
+     * @param selector Optional, an HTML selector to find HTML element with.
+     * @param startFrom Start search from this node. If not specified, start from current focused position
+     * @param event Optional, if specified, editor will try to get cached result from the event object first.
+     * If it is not cached before, query from DOM and cache the result into the event object
+     */
+    getElementAtCursor(selector?: string, startFrom?: Node, event?: PluginEvent): HTMLElement | null;
+    /**
+     * Check if this position is at beginning of the editor.
+     * This will return true if all nodes between the beginning of target node and the position are empty.
+     * @param position The position to check
+     * @returns True if position is at beginning of the editor, otherwise false
+     */
+    isPositionAtBeginning(position: NodePosition): boolean;
+    /**
+     * Get impacted regions from selection
+     */
+    getSelectedRegions(type?: RegionType | CompatibleRegionType): Region[];
+    addDomEventHandler(nameOrMap: string | Record<string, DOMEventHandler>, handler?: DOMEventHandler): () => void;
+    /**
+     * Trigger an event to be dispatched to all plugins
+     * @param eventType Type of the event
+     * @param data data of the event with given type, this is the rest part of PluginEvent with the given type
+     * @param broadcast indicates if the event needs to be dispatched to all plugins
+     * True means to all, false means to allow exclusive handling from one plugin unless no one wants that
+     * @returns the event object which is really passed into plugins. Some plugin may modify the event object so
+     * the result of this function provides a chance to read the modified result
+     */
+    triggerPluginEvent<T extends PluginEventType | CompatiblePluginEventType>(eventType: T, data: PluginEventData<T>, broadcast?: boolean): PluginEventFromType<T>;
+    /**
+     * Trigger a ContentChangedEvent
+     * @param source Source of this event, by default is 'SetContent'
+     * @param data additional data for this event
+     */
+    triggerContentChangedEvent(source?: ChangeSource | CompatibleChangeSource | string, data?: any): void;
+    /**
+     * Undo last edit operation
+     */
+    undo(): void;
+    /**
+     * Redo next edit operation
+     */
+    redo(): void;
+    /**
+     * Add undo snapshot, and execute a format callback function, then add another undo snapshot, then trigger
+     * ContentChangedEvent with given change source.
+     * If this function is called nested, undo snapshot will only be added in the outside one
+     * @param callback The callback function to perform formatting, returns a data object which will be used as
+     * the data field in ContentChangedEvent if changeSource is not null.
+     * @param changeSource The change source to use when fire ContentChangedEvent. When the value is not null,
+     * a ContentChangedEvent will be fired with change source equal to this value
+     * @param canUndoByBackspace True if this action can be undone when user press Backspace key (aka Auto Complete).
+     */
+    addUndoSnapshot(callback?: (start: NodePosition | null, end: NodePosition | null) => any, changeSource?: ChangeSource | CompatibleChangeSource | string, canUndoByBackspace?: boolean, additionalData?: ContentChangedData): void;
+    /**
+     * Whether there is an available undo/redo snapshot
+     */
+    getUndoState(): EditorUndoState;
+    /**
+     * Get custom data related to this editor
+     * @param key Key of the custom data
+     * @param getter Getter function. If custom data for the given key doesn't exist,
+     * call this function to get one and store it if it is specified. Otherwise return undefined
+     * @param disposer An optional disposer function to dispose this custom data when
+     * dispose editor.
+     */
+    getCustomData<T>(key: string, getter?: () => T, disposer?: (value: T) => void): T;
+    /**
+     * Get default format of this editor
+     * @returns Default format object of this editor
+     */
+    getDefaultFormat(): DefaultFormat;
+    /**
+     * Get a content traverser for the whole editor
+     * @param startNode The node to start from. If not passed, it will start from the beginning of the body
+     */
+    getBodyTraverser(startNode?: Node): IContentTraverser;
+    /**
+     * Get a content traverser for current selection
+     * @returns A content traverser, or null if editor never got focus before
+     */
+    getSelectionTraverser(range?: Range): IContentTraverser | null;
+    /**
+     * Get a content traverser for current block element start from specified position
+     * @param startFrom Start position of the traverser. Default value is ContentPosition.SelectionStart
+     * @returns A content traverser, or null if editor never got focus before
+     */
+    getBlockTraverser(startFrom?: ContentPosition | CompatibleContentPosition): IContentTraverser | null;
+    /**
+     * Get a text traverser of current selection
+     * @param event Optional, if specified, editor will try to get cached result from the event object first.
+     * If it is not cached before, query from DOM and cache the result into the event object
+     * @returns A content traverser, or null if editor never got focus before
+     */
+    getContentSearcherOfCursor(event?: PluginEvent): IPositionContentSearcher | null;
+    /**
+     * Run a callback function asynchronously
+     * @param callback The callback function to run
+     * @returns a function to cancel this async run
+     */
+    runAsync(callback: (editor: IEditor & IStandaloneEditor) => void): () => void;
+    /**
+     * Set DOM attribute of editor content DIV
+     * @param name Name of the attribute
+     * @param value Value of the attribute
+     */
+    setEditorDomAttribute(name: string, value: string | null): void;
+    /**
+     * Get DOM attribute of editor content DIV, null if there is no such attribute.
+     * @param name Name of the attribute
+     */
+    getEditorDomAttribute(name: string): string | null;
+    /**
+     * @deprecated Use getVisibleViewport() instead.
+     *
+     * Get current relative distance from top-left corner of the given element to top-left corner of editor content DIV.
+     * @param element The element to calculate from. If the given element is not in editor, return value will be null
+     * @param addScroll When pass true, The return value will also add scrollLeft and scrollTop if any. So the value
+     * may be different than what user is seeing from the view. When pass false, scroll position will be ignored.
+     * @returns An [x, y] array which contains the left and top distances, or null if the given element is not in editor.
+     */
+    getRelativeDistanceToEditor(element: HTMLElement, addScroll?: boolean): number[] | null;
+    /**
+     * Add a Content Edit feature.
+     * @param feature The feature to add
+     */
+    addContentEditFeature(feature: GenericContentEditFeature<PluginEvent>): void;
+    /**
+     * Remove a Content Edit feature.
+     * @param feature The feature to remove
+     */
+    removeContentEditFeature(feature: GenericContentEditFeature<PluginEvent>): void;
+    /**
+     * @deprecated
+     * Get style based format state from current selection, including font name/size and colors
+     */
+    getStyleBasedFormatState(): StyleBasedFormatState;
+    /**
+     * @deprecated
+     * Get the pendable format such as underline and bold
+     * @returns The pending format state
+     */
+    getPendableFormatState(): PendableFormatState;
+    /**
+     * @deprecated
+     * Ensure user will type into a container element rather than into the editor content DIV directly
+     * @param position The position that user is about to type to
+     * @param keyboardEvent Optional keyboard event object
+     */
+    ensureTypeInContainer(position: NodePosition, keyboardEvent?: KeyboardEvent): void;
+    /**
+     * Transform the given node and all its child nodes to dark mode color if editor is in dark mode
+     * @param node The node to transform
+     * @param direction The transform direction. @default ColorTransformDirection.LightToDark
+     */
+    transformToDarkColor(node: Node, direction?: ColorTransformDirection | CompatibleColorTransformDirection): void;
+    /**
+     * Check if the given experimental feature is enabled
+     * @param feature The feature to check
+     */
+    isFeatureEnabled(feature: ExperimentalFeatures | CompatibleExperimentalFeatures): boolean;
+    /**
+     * Get current zoom scale, default value is 1
+     * When editor is put under a zoomed container, need to pass the zoom scale number using EditorOptions.zoomScale
+     * to let editor behave correctly especially for those mouse drag/drop behaviors
+     * @returns current zoom scale number
+     */
+    getZoomScale(): number;
+    /**
+     * Set current zoom scale, default value is 1
+     * When editor is put under a zoomed container, need to pass the zoom scale number using EditorOptions.zoomScale
+     * to let editor behave correctly especially for those mouse drag/drop behaviors
+     * @param scale The new scale number to set. It should be positive number and no greater than 10, otherwise it will be ignored.
+     */
+    setZoomScale(scale: number): void;
+    /**
+     * @deprecated Use getZoomScale() instead
+     */
+    getSizeTransformer(): SizeTransformer;
+    /**
+     * Get a darkColorHandler object for this editor.
+     */
+    getDarkColorHandler(): DarkColorHandler;
+    /**
+     * Check if editor is in IME input sequence
+     * @returns True if editor is in IME input sequence, otherwise false
+     */
+    isInIME(): boolean;
+    private retrieveFormatState;
+    /**
+     * @returns the current EditorAdapterCore object
+     * @throws a standard Error if there's no core object
+     */
+    private getContentModelEditorCore;
+}