roosterjs-editor-adapter 0.26.0

package/LICENSE

@@ -0,0 +1,25 @@
+    RoosterJS
+    Copyright (c) Microsoft Corporation
+    All rights reserved.
+
+    MIT License
+
+    Copyright (c) Microsoft Corporation. All rights reserved.
+
+    Permission is hereby granted, free of charge, to any person obtaining a copy
+    of this software and associated documentation files (the "Software"), to deal
+    in the Software without restriction, including without limitation the rights
+    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+    copies of the Software, and to permit persons to whom the Software is
+    furnished to do so, subject to the following conditions:
+
+    The above copyright notice and this permission notice shall be included in all
+    copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+    SOFTWARE

package/README.md

@@ -0,0 +1,262 @@
+[![Build Status](https://github.com/microsoft/roosterjs/actions/workflows/build-and-deploy.yml/badge.svg)](https://github.com/microsoft/roosterjs/actions/workflows/build-and-deploy.yml)
+
+# Rooster
+
+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:
+
+[RoosterJs Sample Site](https://microsoft.github.io/roosterjs/index.html).
+
+## Upgrade from RoosterJs 7.\*
+
+Please see [here](https://github.com/microsoft/roosterjs/wiki/RoosterJs-8).
+
+## Features
+
+### Packages
+
+Rooster contains 6 basic packages.
+
+1. [roosterjs](https://microsoft.github.io/roosterjs/docs/modules/roosterjs.html):
+   A facade of all Rooster code for those who want a quick start. Use the
+   `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`
+   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):
+   Defines APIs for editor operations. Use these APIs to modify content and
+   formatting in the editor you built using `roosterjs-editor-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.
+
+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.
+
+6. [roosterjs-editor-types](https://microsoft.github.io/roosterjs/docs/modules/roosterjs_editor_types.html):
+   Defines public interfaces and enumerations.
+
+There are also some extension packages to provide additional functionalities.
+
+1. [roosterjs-color-utils](https://microsoft.github.io/roosterjs/docs/modules/roosterjs_color_utils.html):
+   Provide color transformation utility to make editor work under dark mode.
+
+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
+
+### 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.
+
+`roosterjs-editor-dom` provides several levels of DOM 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.
+
+`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
+API overrides in Editor options when creating the editor.
+
+`roosterjs-editor-api` provides APIs for scenario-based operations triggered by
+user interaction.
+
+## Plugins
+
+Rooster supports plugins. You can use built-in plugins or build your own.
+Plugins call APIs to communicate with the editor. When an operation is
+performed by the user or when content is changed by code, the editor will
+trigger events for the plugins to handle.
+
+Here's a sample plugin which will show a dialog containing "Hello Rooster" when
+an "a" is typed in the editor:
+
+```typescript
+class HelloRooster implements EditorPlugin {
+    getName() {
+        return 'HelloRooster';
+    }
+
+    initialize(editor: IEditor) {}
+
+    dispose() {}
+
+    onPluginEvent(e: PluginEvent) {
+        if (e.eventType == PluginEventType.KeyPress && e.rawEvent.which == 65) {
+            alert('Hello Rooster');
+        }
+    }
+}
+```
+
+## Installation
+
+Install via NPM or Yarn:
+
+`yarn add roosterjs`
+
+You can also install sub packages separately:
+
+`yarn add roosterjs-editor-core`
+
+`yarn add roosterjs-editor-api`
+
+`...`
+
+In order to run the code below, you may also need to install [webpack](https://webpack.js.org/):
+
+`yarn add webpack -g`
+
+## Usage
+
+### A quick start
+
+1. Create `editor.htm` which contains a DIV with some styles, buttons to handle some click events and a reference to rooster.js (update with the path to your rooster.js file):
+
+```html
+<html>
+    <body>
+        <div style="width: 500px; height: 400px; border: solid 1px black" id="contentDiv"></div>
+        <button id="buttonB">B</button> <button id="buttonI">I</button>
+        <button id="buttonU">U</button>
+        <script src="rooster.js"></script>
+        <script>
+            var contentDiv = document.getElementById('contentDiv');
+            var editor = roosterjs.createEditor(contentDiv);
+
+            editor.setContent('Welcome to <b>RoosterJs</b>!');
+            document.getElementById('buttonB').addEventListener('click', function () {
+                roosterjs.toggleBold(editor);
+            });
+            document.getElementById('buttonI').addEventListener('click', function () {
+                roosterjs.toggleItalic(editor);
+            });
+            document.getElementById('buttonU').addEventListener('click', function () {
+                roosterjs.toggleUnderline(editor);
+            });
+        </script>
+    </body>
+</html>
+```
+
+2. Navigate to editor.htm, you will see a editor shown in the page which includes buttons with bold, italic, underline
+   actions.
+
+## Sample code
+
+To view the sample site, please click [here](https://microsoft.github.io/roosterjs/index.html).
+
+To build the sample site code yourself, follow these instructions:
+
+1. Get dependencies using [yarn](https://yarnpkg.com) or [npm](https://www.npmjs.com/):
+
+    ```cmd
+    yarn
+    ```
+
+2. Build the source code, and start the sample editor:
+
+    ```
+    yarn start
+    ```
+
+    or
+
+    ```
+    npm start
+    ```
+
+## Debugging
+
+There are two options for debugging:
+
+1. Debugging from VSCode
+
+    - Ensure the sample editor is running
+    - Set the breakpoints within VSCode
+    - Select "Debug app in Chrome" from the VSCode debugging configuration dropdown
+      <img src="/assets/readme-images/debug-in-VSCode.png" width="411" height="278"><br>
+    - Run the scenario that needs to be debugged
+
+2. Debugging directly from the development tools within the web browser
+    - The directions for how to do this are specific to each web browser. By opening the developer
+      tools for the web browser that Rooster is running on, you will be able to set breakpoints in
+      the code and debug accordingly.
+
+## Running tests
+
+There are two ways that tests can be run:
+
+1. Run all tests or a single test from VSCode<br>
+    - (Skip if running all tests) Ensure the file that you want to test is selected (ie: toggleBold.ts
+      or toggleBoldTest.ts)
+    - Select "Test all files" or "Test current file" from the VSCode debugging configuration dropdown
+      <img src="/assets/readme-images/test-in-VSCode.png" width="402" height="268">
+2. Run all tests from command line
+    ```
+    yarn test
+    ```
+
+## Dependencies
+
+As a NodeJs package, RoosterJs has dependencies for runtime (specified in package.json under each sub
+packages in "dependencies" section) and dependencies for build time (specified in package.json under
+root path in "devDependencies" section).
+
+For runtime dependencies, there are two parts:
+
+-   Internal dependencies (a RoosterJs package depends on other RoosterJs packages)
+-   External dependencies (RoosterJs depends on other NPM packages)
+
+Currently we have very few external dependencies. Before adding any new dependency, we need to check:
+
+1. What's the value of the new dependency and the code using the dependency bring into roosterjs?
+   If we add a new dependency and create our new API to just call into the dependency, that new API
+   doesn't actually bring too much value, and people who uses roosterjs in their project can do this
+   themselves in their code, and we should not add such dependency to people who don't really need it.
+
+2. What's the dependency tree of the dependency?
+   If we introduce a new dependency which has a deep dependency tree, we need to be careful since it
+   means we are actually adding a lot of new dependencies and our code size may be increased a lot.
+
+3. How much functionalities do we need from the dependency?
+   If the dependency provides a lot of functionalities but we actually only need a small piece of them,
+   we may need to consider other solutions, such as find another smaller one, or do it ourselves.
+
+4. What's the license of the dependency?
+   A dependency package under MIT license is good to be used for RoosterJs. For other licenses, we need
+   to review and see if we can take it as a dependency.
+
+If you still feel a new dependency is required after checking these questions, we can review it and
+finally decide whether we should add the new dependency.
+
+For build time dependencies, it is more flexible to add new dependencies since it won't increase runtime
+code size or dependencies.
+
+## More documentation
+
+We are still working on more documentation in [roosterjs wiki](https://github.com/Microsoft/roosterjs/wiki) and [API reference](https://microsoft.github.io/roosterjs/docs/index.html).
+
+## License - MIT
+
+License
+Copyright (c) Microsoft Corporation. All rights reserved.
+
+Licensed under the [MIT](LICENSE) License.

package/lib/corePlugins/BridgePlugin.d.ts

@@ -0,0 +1,73 @@
+import type { EditorPlugin as LegacyEditorPlugin, ContextMenuProvider as LegacyContextMenuProvider, IEditor as ILegacyEditor, ExperimentalFeatures, SizeTransformer, EditPluginState, CustomData, DarkColorHandler } from 'roosterjs-editor-types';
+import type { ContextMenuProvider, IStandaloneEditor, PluginEvent } from 'roosterjs-content-model-types';
+/**
+ * @internal
+ * Represents the core data structure of a editor adapter
+ */
+export interface EditorAdapterCore {
+    /**
+     * Custom data of this editor
+     */
+    readonly customData: Record<string, CustomData>;
+    /**
+     * Enabled experimental features
+     */
+    readonly experimentalFeatures: ExperimentalFeatures[];
+    /**
+     * Dark model handler for the editor, used for variable-based solution.
+     * If keep it null, editor will still use original dataset-based dark mode solution.
+     */
+    readonly darkColorHandler: DarkColorHandler;
+    /**
+     * Plugin state of EditPlugin
+     */
+    readonly edit: EditPluginState;
+    /**
+     * Context Menu providers
+     */
+    readonly contextMenuProviders: LegacyContextMenuProvider<any>[];
+    /**
+     * @deprecated Use zoomScale instead
+     */
+    readonly sizeTransformer: SizeTransformer;
+}
+/**
+ * @internal
+ * Act as a bridge between Standalone editor and Content Model editor, translate Standalone editor event type to legacy event type
+ */
+export declare class BridgePlugin implements ContextMenuProvider<any> {
+    private onInitialize;
+    private experimentalFeatures;
+    private legacyPlugins;
+    private edit;
+    private contextMenuProviders;
+    private checkExclusivelyHandling;
+    constructor(onInitialize: (core: EditorAdapterCore) => ILegacyEditor, legacyPlugins?: LegacyEditorPlugin[], experimentalFeatures?: ExperimentalFeatures[]);
+    /**
+     * Get a friendly name of  this plugin
+     */
+    getName(): string;
+    /**
+     * Initialize this plugin. This should only be called from Editor
+     * @param editor Editor instance
+     */
+    initialize(editor: IStandaloneEditor): void;
+    /**
+     * Dispose this plugin
+     */
+    dispose(): void;
+    willHandleEventExclusively(event: PluginEvent): boolean;
+    onPluginEvent(event: PluginEvent): void;
+    /**
+     * A callback to return context menu items
+     * @param target Target node that triggered a ContextMenu event
+     * @returns An array of context menu items, or null means no items needed
+     */
+    getContextMenuItems(target: Node): any[];
+    private createEditorCore;
+}
+/**
+ * @internal Export for test only. This function is only used for compatibility from older build
+
+ */
+export declare function createSizeTransformer(editor: IStandaloneEditor): SizeTransformer;

package/lib/corePlugins/BridgePlugin.js

@@ -0,0 +1,124 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createSizeTransformer = exports.BridgePlugin = void 0;
+var tslib_1 = require("tslib");
+var DarkColorHandlerImpl_1 = require("../editor/DarkColorHandlerImpl");
+var EditPlugin_1 = require("./EditPlugin");
+var eventConverter_1 = require("../editor/utils/eventConverter");
+var ExclusivelyHandleEventPluginKey = '__ExclusivelyHandleEventPlugin';
+/**
+ * @internal
+ * Act as a bridge between Standalone editor and Content Model editor, translate Standalone editor event type to legacy event type
+ */
+var BridgePlugin = /** @class */ (function () {
+    function BridgePlugin(onInitialize, legacyPlugins, experimentalFeatures) {
+        if (legacyPlugins === void 0) { legacyPlugins = []; }
+        if (experimentalFeatures === void 0) { experimentalFeatures = []; }
+        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.edit = editPlugin.getState();
+        this.contextMenuProviders = this.legacyPlugins.filter(isContextMenuProvider);
+        this.checkExclusivelyHandling = this.legacyPlugins.some(function (plugin) { return plugin.willHandleEventExclusively; });
+    }
+    /**
+     * Get a friendly name of  this plugin
+     */
+    BridgePlugin.prototype.getName = function () {
+        return 'Bridge';
+    };
+    /**
+     * Initialize this plugin. This should only be called from Editor
+     * @param editor Editor instance
+     */
+    BridgePlugin.prototype.initialize = function (editor) {
+        var outerEditor = this.onInitialize(this.createEditorCore(editor));
+        this.legacyPlugins.forEach(function (plugin) { return plugin.initialize(outerEditor); });
+    };
+    /**
+     * Dispose this plugin
+     */
+    BridgePlugin.prototype.dispose = function () {
+        for (var i = this.legacyPlugins.length - 1; i >= 0; i--) {
+            var plugin = this.legacyPlugins[i];
+            plugin.dispose();
+        }
+    };
+    BridgePlugin.prototype.willHandleEventExclusively = function (event) {
+        var _a;
+        var oldEvent;
+        if (this.checkExclusivelyHandling && (oldEvent = (0, eventConverter_1.newEventToOldEvent)(event))) {
+            for (var i = 0; i < this.legacyPlugins.length; i++) {
+                var plugin = this.legacyPlugins[i];
+                if ((_a = plugin.willHandleEventExclusively) === null || _a === void 0 ? void 0 : _a.call(plugin, oldEvent)) {
+                    if (!event.eventDataCache) {
+                        event.eventDataCache = {};
+                    }
+                    event.eventDataCache[ExclusivelyHandleEventPluginKey] = plugin;
+                    return true;
+                }
+            }
+        }
+        return false;
+    };
+    BridgePlugin.prototype.onPluginEvent = function (event) {
+        var _a, _b;
+        var oldEvent = (0, eventConverter_1.newEventToOldEvent)(event);
+        if (oldEvent) {
+            var exclusivelyHandleEventPlugin = (_a = event.eventDataCache) === null || _a === void 0 ? void 0 : _a[ExclusivelyHandleEventPluginKey];
+            if (exclusivelyHandleEventPlugin) {
+                (_b = exclusivelyHandleEventPlugin.onPluginEvent) === null || _b === void 0 ? void 0 : _b.call(exclusivelyHandleEventPlugin, oldEvent);
+            }
+            else {
+                this.legacyPlugins.forEach(function (plugin) { var _a; return (_a = plugin.onPluginEvent) === null || _a === void 0 ? void 0 : _a.call(plugin, oldEvent); });
+            }
+            Object.assign(event, (0, eventConverter_1.oldEventToNewEvent)(oldEvent, event));
+        }
+    };
+    /**
+     * A callback to return context menu items
+     * @param target Target node that triggered a ContextMenu event
+     * @returns An array of context menu items, or null means no items needed
+     */
+    BridgePlugin.prototype.getContextMenuItems = function (target) {
+        var allItems = [];
+        this.contextMenuProviders.forEach(function (provider) {
+            var _a;
+            var items = (_a = provider.getContextMenuItems(target)) !== null && _a !== void 0 ? _a : [];
+            if ((items === null || items === void 0 ? void 0 : items.length) > 0) {
+                if (allItems.length > 0) {
+                    allItems.push(null);
+                }
+                allItems.push.apply(allItems, (0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(items), false));
+            }
+        });
+        return allItems;
+    };
+    BridgePlugin.prototype.createEditorCore = function (editor) {
+        var _a;
+        return {
+            customData: {},
+            experimentalFeatures: (_a = this.experimentalFeatures) !== null && _a !== void 0 ? _a : [],
+            sizeTransformer: createSizeTransformer(editor),
+            darkColorHandler: (0, DarkColorHandlerImpl_1.createDarkColorHandler)(editor.getColorManager()),
+            edit: this.edit,
+            contextMenuProviders: this.contextMenuProviders,
+        };
+    };
+    return BridgePlugin;
+}());
+exports.BridgePlugin = BridgePlugin;
+/**
+ * @internal Export for test only. This function is only used for compatibility from older build
+
+ */
+function createSizeTransformer(editor) {
+    return function (size) { return size / editor.getDOMHelper().calculateZoomScale(); };
+}
+exports.createSizeTransformer = createSizeTransformer;
+function isContextMenuProvider(source) {
+    var _a;
+    return !!((_a = source) === null || _a === void 0 ? void 0 : _a.getContextMenuItems);
+}
+//# sourceMappingURL=BridgePlugin.js.map

package/lib/corePlugins/BridgePlugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BridgePlugin.js","sourceRoot":"","sources":["../../../../packages/roosterjs-editor-adapter/lib/corePlugins/BridgePlugin.ts"],"names":[],"mappings":";;;;AAAA,uEAAwE;AACxE,2CAAgD;AAChD,iEAAwF;AAkBxF,IAAM,+BAA+B,GAAG,gCAAgC,CAAC;AAuCzE;;;GAGG;AACH;IAMI,sBACY,YAAwD,EAChE,aAAwC,EAChC,oBAAiD;QADzD,8BAAA,EAAA,kBAAwC;QAChC,qCAAA,EAAA,yBAAiD;QAFjD,iBAAY,GAAZ,YAAY,CAA4C;QAExD,yBAAoB,GAApB,oBAAoB,CAA6B;QAEzD,IAAM,UAAU,GAAG,IAAA,6BAAgB,GAAE,CAAC;QAEtC,IAAI,CAAC,aAAa,+BAAI,UAAU,uBAAK,aAAa,CAAC,MAAM,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,CAAC,EAAH,CAAG,CAAC,SAAC,CAAC;QACrE,IAAI,CAAC,IAAI,GAAG,UAAU,CAAC,QAAQ,EAAE,CAAC;QAClC,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC;QAC7E,IAAI,CAAC,wBAAwB,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CACnD,UAAA,MAAM,IAAI,OAAA,MAAM,CAAC,0BAA0B,EAAjC,CAAiC,CAC9C,CAAC;IACN,CAAC;IAED;;OAEG;IACH,8BAAO,GAAP;QACI,OAAO,QAAQ,CAAC;IACpB,CAAC;IAED;;;OAGG;IACH,iCAAU,GAAV,UAAW,MAAyB;QAChC,IAAM,WAAW,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,CAAC;QAErE,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,UAAA,MAAM,IAAI,OAAA,MAAM,CAAC,UAAU,CAAC,WAAW,CAAC,EAA9B,CAA8B,CAAC,CAAC;IACzE,CAAC;IAED;;OAEG;IACH,8BAAO,GAAP;QACI,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE;YACrD,IAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;YAErC,MAAM,CAAC,OAAO,EAAE,CAAC;SACpB;IACL,CAAC;IAED,iDAA0B,GAA1B,UAA2B,KAAkB;;QACzC,IAAI,QAAuC,CAAC;QAE5C,IAAI,IAAI,CAAC,wBAAwB,IAAI,CAAC,QAAQ,GAAG,IAAA,mCAAkB,EAAC,KAAK,CAAC,CAAC,EAAE;YACzE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gBAChD,IAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;gBAErC,IAAI,MAAA,MAAM,CAAC,0BAA0B,+CAAjC,MAAM,EAA8B,QAAQ,CAAC,EAAE;oBAC/C,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE;wBACvB,KAAK,CAAC,cAAc,GAAG,EAAE,CAAC;qBAC7B;oBAED,KAAK,CAAC,cAAc,CAAC,+BAA+B,CAAC,GAAG,MAAM,CAAC;oBAC/D,OAAO,IAAI,CAAC;iBACf;aACJ;SACJ;QAED,OAAO,KAAK,CAAC;IACjB,CAAC;IAED,oCAAa,GAAb,UAAc,KAAkB;;QAC5B,IAAM,QAAQ,GAAG,IAAA,mCAAkB,EAAC,KAAK,CAAC,CAAC;QAE3C,IAAI,QAAQ,EAAE;YACV,IAAM,4BAA4B,GAAG,MAAA,KAAK,CAAC,cAAc,0CACrD,+BAA+B,CACA,CAAC;YAEpC,IAAI,4BAA4B,EAAE;gBAC9B,MAAA,4BAA4B,CAAC,aAAa,+CAA1C,4BAA4B,EAAiB,QAAQ,CAAC,CAAC;aAC1D;iBAAM;gBACH,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,UAAA,MAAM,YAAI,OAAA,MAAA,MAAM,CAAC,aAAa,+CAApB,MAAM,EAAiB,QAAQ,CAAC,CAAA,EAAA,CAAC,CAAC;aAC1E;YAED,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,IAAA,mCAAkB,EAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC;SAC7D;IACL,CAAC;IAED;;;;OAIG;IACH,0CAAmB,GAAnB,UAAoB,MAAY;QAC5B,IAAM,QAAQ,GAAU,EAAE,CAAC;QAE3B,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,UAAA,QAAQ;;YACtC,IAAM,KAAK,GAAG,MAAA,QAAQ,CAAC,mBAAmB,CAAC,MAAM,CAAC,mCAAI,EAAE,CAAC;YACzD,IAAI,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,IAAG,CAAC,EAAE;gBACnB,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE;oBACrB,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;iBACvB;gBAED,QAAQ,CAAC,IAAI,OAAb,QAAQ,qDAAS,KAAK,WAAE;aAC3B;QACL,CAAC,CAAC,CAAC;QAEH,OAAO,QAAQ,CAAC;IACpB,CAAC;IAEO,uCAAgB,GAAxB,UAAyB,MAAyB;;QAC9C,OAAO;YACH,UAAU,EAAE,EAAE;YACd,oBAAoB,EAAE,MAAA,IAAI,CAAC,oBAAoB,mCAAI,EAAE;YACrD,eAAe,EAAE,qBAAqB,CAAC,MAAM,CAAC;YAC9C,gBAAgB,EAAE,IAAA,6CAAsB,EAAC,MAAM,CAAC,eAAe,EAAE,CAAC;YAClE,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,oBAAoB,EAAE,IAAI,CAAC,oBAAoB;SAClD,CAAC;IACN,CAAC;IACL,mBAAC;AAAD,CAAC,AAxHD,IAwHC;AAxHY,oCAAY;AA0HzB;;;GAGG;AACH,SAAgB,qBAAqB,CAAC,MAAyB;IAC3D,OAAO,UAAA,IAAI,IAAI,OAAA,IAAI,GAAG,MAAM,CAAC,YAAY,EAAE,CAAC,kBAAkB,EAAE,EAAjD,CAAiD,CAAC;AACrE,CAAC;AAFD,sDAEC;AAED,SAAS,qBAAqB,CAC1B,MAA0B;;IAE1B,OAAO,CAAC,CAAC,CAAA,MAAiC,MAAO,0CAAE,mBAAmB,CAAA,CAAC;AAC3E,CAAC","sourcesContent":["import { createDarkColorHandler } from '../editor/DarkColorHandlerImpl';\r\nimport { createEditPlugin } from './EditPlugin';\r\nimport { newEventToOldEvent, oldEventToNewEvent } from '../editor/utils/eventConverter';\r\nimport type {\r\n    EditorPlugin as LegacyEditorPlugin,\r\n    PluginEvent as LegacyPluginEvent,\r\n    ContextMenuProvider as LegacyContextMenuProvider,\r\n    IEditor as ILegacyEditor,\r\n    ExperimentalFeatures,\r\n    SizeTransformer,\r\n    EditPluginState,\r\n    CustomData,\r\n    DarkColorHandler,\r\n} from 'roosterjs-editor-types';\r\nimport type {\r\n    ContextMenuProvider,\r\n    IStandaloneEditor,\r\n    PluginEvent,\r\n} from 'roosterjs-content-model-types';\r\n\r\nconst ExclusivelyHandleEventPluginKey = '__ExclusivelyHandleEventPlugin';\r\n\r\n/**\r\n * @internal\r\n * Represents the core data structure of a editor adapter\r\n */\r\nexport interface EditorAdapterCore {\r\n    /**\r\n     * Custom data of this editor\r\n     */\r\n    readonly customData: Record<string, CustomData>;\r\n\r\n    /**\r\n     * Enabled experimental features\r\n     */\r\n    readonly experimentalFeatures: ExperimentalFeatures[];\r\n\r\n    /**\r\n     * Dark model handler for the editor, used for variable-based solution.\r\n     * If keep it null, editor will still use original dataset-based dark mode solution.\r\n     */\r\n    readonly darkColorHandler: DarkColorHandler;\r\n\r\n    /**\r\n     * Plugin state of EditPlugin\r\n     */\r\n    readonly edit: EditPluginState;\r\n\r\n    /**\r\n     * Context Menu providers\r\n     */\r\n    readonly contextMenuProviders: LegacyContextMenuProvider<any>[];\r\n\r\n    /**\r\n     * @deprecated Use zoomScale instead\r\n     */\r\n    readonly sizeTransformer: SizeTransformer;\r\n}\r\n\r\n/**\r\n * @internal\r\n * Act as a bridge between Standalone editor and Content Model editor, translate Standalone editor event type to legacy event type\r\n */\r\nexport class BridgePlugin implements ContextMenuProvider<any> {\r\n    private legacyPlugins: LegacyEditorPlugin[];\r\n    private edit: EditPluginState;\r\n    private contextMenuProviders: LegacyContextMenuProvider<any>[];\r\n    private checkExclusivelyHandling: boolean;\r\n\r\n    constructor(\r\n        private onInitialize: (core: EditorAdapterCore) => ILegacyEditor,\r\n        legacyPlugins: LegacyEditorPlugin[] = [],\r\n        private experimentalFeatures: ExperimentalFeatures[] = []\r\n    ) {\r\n        const editPlugin = createEditPlugin();\r\n\r\n        this.legacyPlugins = [editPlugin, ...legacyPlugins.filter(x => !!x)];\r\n        this.edit = editPlugin.getState();\r\n        this.contextMenuProviders = this.legacyPlugins.filter(isContextMenuProvider);\r\n        this.checkExclusivelyHandling = this.legacyPlugins.some(\r\n            plugin => plugin.willHandleEventExclusively\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 'Bridge';\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: IStandaloneEditor) {\r\n        const outerEditor = this.onInitialize(this.createEditorCore(editor));\r\n\r\n        this.legacyPlugins.forEach(plugin => plugin.initialize(outerEditor));\r\n    }\r\n\r\n    /**\r\n     * Dispose this plugin\r\n     */\r\n    dispose() {\r\n        for (let i = this.legacyPlugins.length - 1; i >= 0; i--) {\r\n            const plugin = this.legacyPlugins[i];\r\n\r\n            plugin.dispose();\r\n        }\r\n    }\r\n\r\n    willHandleEventExclusively(event: PluginEvent) {\r\n        let oldEvent: LegacyPluginEvent | undefined;\r\n\r\n        if (this.checkExclusivelyHandling && (oldEvent = newEventToOldEvent(event))) {\r\n            for (let i = 0; i < this.legacyPlugins.length; i++) {\r\n                const plugin = this.legacyPlugins[i];\r\n\r\n                if (plugin.willHandleEventExclusively?.(oldEvent)) {\r\n                    if (!event.eventDataCache) {\r\n                        event.eventDataCache = {};\r\n                    }\r\n\r\n                    event.eventDataCache[ExclusivelyHandleEventPluginKey] = plugin;\r\n                    return true;\r\n                }\r\n            }\r\n        }\r\n\r\n        return false;\r\n    }\r\n\r\n    onPluginEvent(event: PluginEvent) {\r\n        const oldEvent = newEventToOldEvent(event);\r\n\r\n        if (oldEvent) {\r\n            const exclusivelyHandleEventPlugin = event.eventDataCache?.[\r\n                ExclusivelyHandleEventPluginKey\r\n            ] as LegacyEditorPlugin | undefined;\r\n\r\n            if (exclusivelyHandleEventPlugin) {\r\n                exclusivelyHandleEventPlugin.onPluginEvent?.(oldEvent);\r\n            } else {\r\n                this.legacyPlugins.forEach(plugin => plugin.onPluginEvent?.(oldEvent));\r\n            }\r\n\r\n            Object.assign(event, oldEventToNewEvent(oldEvent, event));\r\n        }\r\n    }\r\n\r\n    /**\r\n     * A callback to return context menu items\r\n     * @param target Target node that triggered a ContextMenu event\r\n     * @returns An array of context menu items, or null means no items needed\r\n     */\r\n    getContextMenuItems(target: Node): any[] {\r\n        const allItems: any[] = [];\r\n\r\n        this.contextMenuProviders.forEach(provider => {\r\n            const items = provider.getContextMenuItems(target) ?? [];\r\n            if (items?.length > 0) {\r\n                if (allItems.length > 0) {\r\n                    allItems.push(null);\r\n                }\r\n\r\n                allItems.push(...items);\r\n            }\r\n        });\r\n\r\n        return allItems;\r\n    }\r\n\r\n    private createEditorCore(editor: IStandaloneEditor): EditorAdapterCore {\r\n        return {\r\n            customData: {},\r\n            experimentalFeatures: this.experimentalFeatures ?? [],\r\n            sizeTransformer: createSizeTransformer(editor),\r\n            darkColorHandler: createDarkColorHandler(editor.getColorManager()),\r\n            edit: this.edit,\r\n            contextMenuProviders: this.contextMenuProviders,\r\n        };\r\n    }\r\n}\r\n\r\n/**\r\n * @internal Export for test only. This function is only used for compatibility from older build\r\n\r\n */\r\nexport function createSizeTransformer(editor: IStandaloneEditor): SizeTransformer {\r\n    return size => size / editor.getDOMHelper().calculateZoomScale();\r\n}\r\n\r\nfunction isContextMenuProvider(\r\n    source: LegacyEditorPlugin\r\n): source is LegacyContextMenuProvider<any> {\r\n    return !!(<LegacyContextMenuProvider<any>>source)?.getContextMenuItems;\r\n}\r\n"]}

package/lib/corePlugins/EditPlugin.d.ts

@@ -0,0 +1,6 @@
+import type { EditPluginState, PluginWithState } from 'roosterjs-editor-types';
+/**
+ * @internal
+ * Create a new instance of EditPlugin.
+ */
+export declare function createEditPlugin(): PluginWithState<EditPluginState>;

package/lib/corePlugins/EditPlugin.js

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createEditPlugin = void 0;
+var roosterjs_editor_dom_1 = require("roosterjs-editor-dom");
+/**
+ * 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/corePlugins/EditPlugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditPlugin.js","sourceRoot":"","sources":["../../../../packages/roosterjs-editor-adapter/lib/corePlugins/EditPlugin.ts"],"names":[],"mappings":";;;AAAA,6DAA2D;AAU3D;;GAEG;AACH;IAII;;;OAGG;IACH;QAPQ,WAAM,GAAmB,IAAI,CAAC;QAQlC,IAAI,CAAC,KAAK,GAAG;YACT,QAAQ,EAAE,EAAE;SACf,CAAC;IACN,CAAC;IAED;;OAEG;IACH,4BAAO,GAAP;QACI,OAAO,MAAM,CAAC;IAClB,CAAC;IAED;;;OAGG;IACH,+BAAU,GAAV,UAAW,MAAe;QACtB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;IACzB,CAAC;IAED;;OAEG;IACH,4BAAO,GAAP;QACI,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACvB,CAAC;IAED;;OAEG;IACH,6BAAQ,GAAR;QACI,OAAO,IAAI,CAAC,KAAK,CAAC;IACtB,CAAC;IAED;;;OAGG;IACH,kCAAa,GAAb,UAAc,KAAkB;;QAC5B,IAAI,cAAc,GAAG,KAAK,CAAC;QAC3B,IAAI,QAAQ,GAAoD,IAAI,CAAC;QACrE,IAAI,UAAU,GAAG,KAAK,CAAC;QACvB,IAAM,cAAc,GAAG,KAAK,CAAC,SAAS,mBAA2B,CAAC;QAElE,IAAI,cAAc,EAAE;YAChB,IAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC;YAChC,IAAM,KAAK,GAAG,MAAA,IAAI,CAAC,MAAM,0CAAE,iBAAiB,EAAE,CAAC;YAE/C,UAAU,GAAG,IAAA,0CAAmB,EAAC,QAAQ,CAAC,CAAC;YAC3C,cAAc,GAAG,UAAU,IAAI,QAAQ,CAAC,MAAM,CAAC;YAC/C,QAAQ;gBACJ,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC;oBACnC,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,iBAAY,CAAC,CAAC;SACtE;aAAM,IAAI,KAAK,CAAC,SAAS,0BAAkC,EAAE;YAC1D,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,0BAAqB,CAAC;SACvD;QAED,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,QAAQ,IAAI,CAAC,IAAG,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,MAAM,CAAA,EAAE,CAAC,EAAE,EAAE;YACnD,IAAM,OAAO,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;YAC5B,IACI,CAAC,OAAO,CAAC,iBAAiB,IAAI,CAAC,cAAc,CAAC;gBAC9C,IAAI,CAAC,MAAM;gBACX,OAAO,CAAC,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,UAAU,CAAC,EAC3D;gBACE,OAAO,CAAC,WAAW,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;gBACxC,IAAI,cAAc,EAAE;oBAChB,KAAK,CAAC,oBAAoB,GAAG,IAAI,CAAC;iBACrC;gBACD,MAAM;aACT;SACJ;IACL,CAAC;IACL,iBAAC;AAAD,CAAC,AAjFD,IAiFC;AAED;;;GAGG;AACH,SAAgB,gBAAgB;IAC5B,OAAO,IAAI,UAAU,EAAE,CAAC;AAC5B,CAAC;AAFD,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/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;