roosterjs-content-model-core 0.20.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/constants/ChangeSource.d.ts

@@ -0,0 +1,59 @@
+/**
+ * Possible change sources. Here are the predefined sources.
+ * It can also be other string if the change source can't fall into these sources.
+ */
+export declare const ChangeSource: {
+    /**
+     * Content changed by auto link
+     */
+    AutoLink: string;
+    /**
+     * Content changed by create link
+     */
+    CreateLink: string;
+    /**
+     * Content changed by format
+     */
+    Format: string;
+    /**
+     * Content changed by image resize
+     */
+    ImageResize: string;
+    /**
+     * Content changed by paste
+     */
+    Paste: string;
+    /**
+     * Content changed by setContent API
+     */
+    SetContent: string;
+    /**
+     * Content changed by cut operation
+     */
+    Cut: string;
+    /**
+     * Content changed by drag & drop operation
+     */
+    Drop: string;
+    /**
+     * Insert a new entity into editor
+     */
+    InsertEntity: string;
+    /**
+     * Editor is switched to dark mode, content color is changed
+     */
+    SwitchToDarkMode: string;
+    /**
+     * Editor is switched to light mode, content color is changed
+     */
+    SwitchToLightMode: string;
+    /**
+     * List chain reorganized numbers of lists
+     */
+    ListChain: string;
+    /**
+     * Keyboard event, used by Content Model.
+     * Data of this event will be the key code number
+     */
+    Keyboard: string;
+};

package/lib/constants/ChangeSource.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChangeSource = void 0;
+/**
+ * Possible change sources. Here are the predefined sources.
+ * It can also be other string if the change source can't fall into these sources.
+ */
+exports.ChangeSource = {
+    /**
+     * Content changed by auto link
+     */
+    AutoLink: 'AutoLink',
+    /**
+     * Content changed by create link
+     */
+    CreateLink: 'CreateLink',
+    /**
+     * Content changed by format
+     */
+    Format: 'Format',
+    /**
+     * Content changed by image resize
+     */
+    ImageResize: 'ImageResize',
+    /**
+     * Content changed by paste
+     */
+    Paste: 'Paste',
+    /**
+     * Content changed by setContent API
+     */
+    SetContent: 'SetContent',
+    /**
+     * Content changed by cut operation
+     */
+    Cut: 'Cut',
+    /**
+     * Content changed by drag & drop operation
+     */
+    Drop: 'Drop',
+    /**
+     * Insert a new entity into editor
+     */
+    InsertEntity: 'InsertEntity',
+    /**
+     * Editor is switched to dark mode, content color is changed
+     */
+    SwitchToDarkMode: 'SwitchToDarkMode',
+    /**
+     * Editor is switched to light mode, content color is changed
+     */
+    SwitchToLightMode: 'SwitchToLightMode',
+    /**
+     * List chain reorganized numbers of lists
+     */
+    ListChain: 'ListChain',
+    /**
+     * Keyboard event, used by Content Model.
+     * Data of this event will be the key code number
+     */
+    Keyboard: 'Keyboard',
+};
+//# sourceMappingURL=ChangeSource.js.map

package/lib/constants/ChangeSource.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChangeSource.js","sourceRoot":"","sources":["../../../../packages-content-model/roosterjs-content-model-core/lib/constants/ChangeSource.ts"],"names":[],"mappings":";;;AAAA;;;GAGG;AACU,QAAA,YAAY,GAAG;IACxB;;OAEG;IACH,QAAQ,EAAE,UAAU;IACpB;;OAEG;IACH,UAAU,EAAE,YAAY;IACxB;;OAEG;IACH,MAAM,EAAE,QAAQ;IAChB;;OAEG;IACH,WAAW,EAAE,aAAa;IAC1B;;OAEG;IACH,KAAK,EAAE,OAAO;IACd;;OAEG;IACH,UAAU,EAAE,YAAY;IACxB;;OAEG;IACH,GAAG,EAAE,KAAK;IACV;;OAEG;IACH,IAAI,EAAE,MAAM;IACZ;;OAEG;IACH,YAAY,EAAE,cAAc;IAC5B;;OAEG;IACH,gBAAgB,EAAE,kBAAkB;IACpC;;OAEG;IACH,iBAAiB,EAAE,mBAAmB;IACtC;;OAEG;IACH,SAAS,EAAE,WAAW;IACtB;;;OAGG;IACH,QAAQ,EAAE,UAAU;CACvB,CAAC","sourcesContent":["/**\n * Possible change sources. Here are the predefined sources.\n * It can also be other string if the change source can't fall into these sources.\n */\nexport const ChangeSource = {\n    /**\n     * Content changed by auto link\n     */\n    AutoLink: 'AutoLink',\n    /**\n     * Content changed by create link\n     */\n    CreateLink: 'CreateLink',\n    /**\n     * Content changed by format\n     */\n    Format: 'Format',\n    /**\n     * Content changed by image resize\n     */\n    ImageResize: 'ImageResize',\n    /**\n     * Content changed by paste\n     */\n    Paste: 'Paste',\n    /**\n     * Content changed by setContent API\n     */\n    SetContent: 'SetContent',\n    /**\n     * Content changed by cut operation\n     */\n    Cut: 'Cut',\n    /**\n     * Content changed by drag & drop operation\n     */\n    Drop: 'Drop',\n    /**\n     * Insert a new entity into editor\n     */\n    InsertEntity: 'InsertEntity',\n    /**\n     * Editor is switched to dark mode, content color is changed\n     */\n    SwitchToDarkMode: 'SwitchToDarkMode',\n    /**\n     * Editor is switched to light mode, content color is changed\n     */\n    SwitchToLightMode: 'SwitchToLightMode',\n    /**\n     * List chain reorganized numbers of lists\n     */\n    ListChain: 'ListChain',\n    /**\n     * Keyboard event, used by Content Model.\n     * Data of this event will be the key code number\n     */\n    Keyboard: 'Keyboard',\n};\n"]}

package/lib/coreApi/createContentModel.d.ts

@@ -0,0 +1,9 @@
+import type { CreateContentModel } from 'roosterjs-content-model-types';
+/**
+ * @internal
+ * Create Content Model from DOM tree in this editor
+ * @param core The editor core object
+ * @param option The option to customize the behavior of DOM to Content Model conversion
+ * @param selectionOverride When passed, use this selection range instead of current selection in editor
+ */
+export declare const createContentModel: CreateContentModel;

package/lib/coreApi/createContentModel.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createContentModel = void 0;
+var tslib_1 = require("tslib");
+var cloneModel_1 = require("../publicApi/model/cloneModel");
+var roosterjs_content_model_dom_1 = require("roosterjs-content-model-dom");
+/**
+ * @internal
+ * Create Content Model from DOM tree in this editor
+ * @param core The editor core object
+ * @param option The option to customize the behavior of DOM to Content Model conversion
+ * @param selectionOverride When passed, use this selection range instead of current selection in editor
+ */
+var createContentModel = function (core, option, selectionOverride) {
+    var cachedModel = selectionOverride ? null : core.cache.cachedModel;
+    if (cachedModel && core.lifecycle.shadowEditFragment) {
+        // When in shadow edit, use a cloned model so we won't pollute the cached one
+        cachedModel = (0, cloneModel_1.cloneModel)(cachedModel, { includeCachedElement: true });
+    }
+    if (cachedModel) {
+        return cachedModel;
+    }
+    else {
+        var selection = selectionOverride || core.api.getDOMSelection(core) || undefined;
+        var model = internalCreateContentModel(core, selection, option);
+        if (!option && !selectionOverride) {
+            core.cache.cachedModel = model;
+            core.cache.cachedSelection = selection;
+        }
+        return model;
+    }
+};
+exports.createContentModel = createContentModel;
+function internalCreateContentModel(core, selection, option) {
+    var editorContext = core.api.createEditorContext(core);
+    var domToModelContext = option
+        ? roosterjs_content_model_dom_1.createDomToModelContext.apply(void 0, (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([editorContext], (0, tslib_1.__read)((core.defaultDomToModelOptions || [])), false), [option], false)) : (0, roosterjs_content_model_dom_1.createDomToModelContextWithConfig)(core.defaultDomToModelConfig, editorContext);
+    return (0, roosterjs_content_model_dom_1.domToContentModel)(core.contentDiv, domToModelContext, selection);
+}
+//# sourceMappingURL=createContentModel.js.map

package/lib/coreApi/createContentModel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createContentModel.js","sourceRoot":"","sources":["../../../../packages-content-model/roosterjs-content-model-core/lib/coreApi/createContentModel.ts"],"names":[],"mappings":";;;;AAAA,4DAA2D;AAC3D,2EAIqC;AASrC;;;;;;GAMG;AACI,IAAM,kBAAkB,GAAuB,UAAC,IAAI,EAAE,MAAM,EAAE,iBAAiB;IAClF,IAAI,WAAW,GAAG,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC;IAEpE,IAAI,WAAW,IAAI,IAAI,CAAC,SAAS,CAAC,kBAAkB,EAAE;QAClD,6EAA6E;QAC7E,WAAW,GAAG,IAAA,uBAAU,EAAC,WAAW,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC,CAAC;KACzE;IAED,IAAI,WAAW,EAAE;QACb,OAAO,WAAW,CAAC;KACtB;SAAM;QACH,IAAM,SAAS,GAAG,iBAAiB,IAAI,IAAI,CAAC,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,SAAS,CAAC;QACnF,IAAM,KAAK,GAAG,0BAA0B,CAAC,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC;QAElE,IAAI,CAAC,MAAM,IAAI,CAAC,iBAAiB,EAAE;YAC/B,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC;YAC/B,IAAI,CAAC,KAAK,CAAC,eAAe,GAAG,SAAS,CAAC;SAC1C;QAED,OAAO,KAAK,CAAC;KAChB;AACL,CAAC,CAAC;AArBW,QAAA,kBAAkB,sBAqB7B;AAEF,SAAS,0BAA0B,CAC/B,IAAuC,EACvC,SAAwB,EACxB,MAAyB;IAEzB,IAAM,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC;IACzD,IAAM,iBAAiB,GAAG,MAAM;QAC5B,CAAC,CAAC,qDAAuB,sEAAC,aAAa,uBAAK,CAAC,IAAI,CAAC,wBAAwB,IAAI,EAAE,CAAC,YAAE,MAAM,WACzF,CAAC,CAAC,IAAA,+DAAiC,EAAC,IAAI,CAAC,uBAAuB,EAAE,aAAa,CAAC,CAAC;IAErF,OAAO,IAAA,+CAAiB,EAAC,IAAI,CAAC,UAAU,EAAE,iBAAiB,EAAE,SAAS,CAAC,CAAC;AAC5E,CAAC","sourcesContent":["import { cloneModel } from '../publicApi/model/cloneModel';\nimport {\n    createDomToModelContext,\n    createDomToModelContextWithConfig,\n    domToContentModel,\n} from 'roosterjs-content-model-dom';\nimport type { EditorCore } from 'roosterjs-editor-types';\nimport type {\n    DOMSelection,\n    DomToModelOption,\n    CreateContentModel,\n    StandaloneEditorCore,\n} from 'roosterjs-content-model-types';\n\n/**\n * @internal\n * Create Content Model from DOM tree in this editor\n * @param core The editor core object\n * @param option The option to customize the behavior of DOM to Content Model conversion\n * @param selectionOverride When passed, use this selection range instead of current selection in editor\n */\nexport const createContentModel: CreateContentModel = (core, option, selectionOverride) => {\n    let cachedModel = selectionOverride ? null : core.cache.cachedModel;\n\n    if (cachedModel && core.lifecycle.shadowEditFragment) {\n        // When in shadow edit, use a cloned model so we won't pollute the cached one\n        cachedModel = cloneModel(cachedModel, { includeCachedElement: true });\n    }\n\n    if (cachedModel) {\n        return cachedModel;\n    } else {\n        const selection = selectionOverride || core.api.getDOMSelection(core) || undefined;\n        const model = internalCreateContentModel(core, selection, option);\n\n        if (!option && !selectionOverride) {\n            core.cache.cachedModel = model;\n            core.cache.cachedSelection = selection;\n        }\n\n        return model;\n    }\n};\n\nfunction internalCreateContentModel(\n    core: StandaloneEditorCore & EditorCore,\n    selection?: DOMSelection,\n    option?: DomToModelOption\n) {\n    const editorContext = core.api.createEditorContext(core);\n    const domToModelContext = option\n        ? createDomToModelContext(editorContext, ...(core.defaultDomToModelOptions || []), option)\n        : createDomToModelContextWithConfig(core.defaultDomToModelConfig, editorContext);\n\n    return domToContentModel(core.contentDiv, domToModelContext, selection);\n}\n"]}

package/lib/coreApi/createEditorContext.d.ts

@@ -0,0 +1,6 @@
+import type { CreateEditorContext } from 'roosterjs-content-model-types';
+/**
+ * @internal
+ * Create a EditorContext object used by ContentModel API
+ */
+export declare const createEditorContext: CreateEditorContext;

package/lib/coreApi/createEditorContext.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createEditorContext = void 0;
+/**
+ * @internal
+ * Create a EditorContext object used by ContentModel API
+ */
+var createEditorContext = function (core) {
+    var lifecycle = core.lifecycle, format = core.format, darkColorHandler = core.darkColorHandler, contentDiv = core.contentDiv, cache = core.cache;
+    var context = {
+        isDarkMode: lifecycle.isDarkMode,
+        defaultFormat: format.defaultFormat,
+        darkColorHandler: darkColorHandler,
+        addDelimiterForEntity: true,
+        allowCacheElement: true,
+        domIndexer: cache.domIndexer,
+    };
+    checkRootRtl(contentDiv, context);
+    checkZoomScale(contentDiv, context);
+    return context;
+};
+exports.createEditorContext = createEditorContext;
+function checkZoomScale(element, context) {
+    var _a;
+    var originalWidth = ((_a = element === null || element === void 0 ? void 0 : element.getBoundingClientRect()) === null || _a === void 0 ? void 0 : _a.width) || 0;
+    var visualWidth = element.offsetWidth;
+    if (visualWidth > 0 && originalWidth > 0) {
+        context.zoomScale = Math.round((originalWidth / visualWidth) * 100) / 100;
+    }
+}
+function checkRootRtl(element, context) {
+    var _a;
+    var style = (_a = element === null || element === void 0 ? void 0 : element.ownerDocument.defaultView) === null || _a === void 0 ? void 0 : _a.getComputedStyle(element);
+    if ((style === null || style === void 0 ? void 0 : style.direction) == 'rtl') {
+        context.isRootRtl = true;
+    }
+}
+//# sourceMappingURL=createEditorContext.js.map

package/lib/coreApi/createEditorContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createEditorContext.js","sourceRoot":"","sources":["../../../../packages-content-model/roosterjs-content-model-core/lib/coreApi/createEditorContext.ts"],"names":[],"mappings":";;;AAEA;;;GAGG;AACI,IAAM,mBAAmB,GAAwB,UAAA,IAAI;IAChD,IAAA,SAAS,GAAkD,IAAI,UAAtD,EAAE,MAAM,GAA0C,IAAI,OAA9C,EAAE,gBAAgB,GAAwB,IAAI,iBAA5B,EAAE,UAAU,GAAY,IAAI,WAAhB,EAAE,KAAK,GAAK,IAAI,MAAT,CAAU;IAExE,IAAM,OAAO,GAAkB;QAC3B,UAAU,EAAE,SAAS,CAAC,UAAU;QAChC,aAAa,EAAE,MAAM,CAAC,aAAa;QACnC,gBAAgB,EAAE,gBAAgB;QAClC,qBAAqB,EAAE,IAAI;QAC3B,iBAAiB,EAAE,IAAI;QACvB,UAAU,EAAE,KAAK,CAAC,UAAU;KAC/B,CAAC;IAEF,YAAY,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;IAClC,cAAc,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;IAEpC,OAAO,OAAO,CAAC;AACnB,CAAC,CAAC;AAhBW,QAAA,mBAAmB,uBAgB9B;AAEF,SAAS,cAAc,CAAC,OAAoB,EAAE,OAAsB;;IAChE,IAAM,aAAa,GAAG,CAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,qBAAqB,EAAE,0CAAE,KAAK,KAAI,CAAC,CAAC;IACnE,IAAM,WAAW,GAAG,OAAO,CAAC,WAAW,CAAC;IAExC,IAAI,WAAW,GAAG,CAAC,IAAI,aAAa,GAAG,CAAC,EAAE;QACtC,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,aAAa,GAAG,WAAW,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC;KAC7E;AACL,CAAC;AAED,SAAS,YAAY,CAAC,OAAoB,EAAE,OAAsB;;IAC9D,IAAM,KAAK,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,aAAa,CAAC,WAAW,0CAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAE5E,IAAI,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,SAAS,KAAI,KAAK,EAAE;QAC3B,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC;KAC5B;AACL,CAAC","sourcesContent":["import type { EditorContext, CreateEditorContext } from 'roosterjs-content-model-types';\n\n/**\n * @internal\n * Create a EditorContext object used by ContentModel API\n */\nexport const createEditorContext: CreateEditorContext = core => {\n    const { lifecycle, format, darkColorHandler, contentDiv, cache } = core;\n\n    const context: EditorContext = {\n        isDarkMode: lifecycle.isDarkMode,\n        defaultFormat: format.defaultFormat,\n        darkColorHandler: darkColorHandler,\n        addDelimiterForEntity: true,\n        allowCacheElement: true,\n        domIndexer: cache.domIndexer,\n    };\n\n    checkRootRtl(contentDiv, context);\n    checkZoomScale(contentDiv, context);\n\n    return context;\n};\n\nfunction checkZoomScale(element: HTMLElement, context: EditorContext) {\n    const originalWidth = element?.getBoundingClientRect()?.width || 0;\n    const visualWidth = element.offsetWidth;\n\n    if (visualWidth > 0 && originalWidth > 0) {\n        context.zoomScale = Math.round((originalWidth / visualWidth) * 100) / 100;\n    }\n}\n\nfunction checkRootRtl(element: HTMLElement, context: EditorContext) {\n    const style = element?.ownerDocument.defaultView?.getComputedStyle(element);\n\n    if (style?.direction == 'rtl') {\n        context.isRootRtl = true;\n    }\n}\n"]}

package/lib/coreApi/formatContentModel.d.ts

@@ -0,0 +1,12 @@
+import type { FormatContentModel } from 'roosterjs-content-model-types';
+/**
+ * @internal
+ * The general API to do format change with Content Model
+ * It will grab a Content Model for current editor content, and invoke a callback function
+ * to do format change. Then according to the return value, write back the modified content model into editor.
+ * If there is cached model, it will be used and updated.
+ * @param core The StandaloneEditorCore object
+ * @param formatter Formatter function, see ContentModelFormatter
+ * @param options More options, see FormatWithContentModelOptions
+ */
+export declare const formatContentModel: FormatContentModel;

package/lib/coreApi/formatContentModel.js

@@ -0,0 +1,128 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatContentModel = void 0;
+var tslib_1 = require("tslib");
+var ChangeSource_1 = require("../constants/ChangeSource");
+/**
+ * @internal
+ * The general API to do format change with Content Model
+ * It will grab a Content Model for current editor content, and invoke a callback function
+ * to do format change. Then according to the return value, write back the modified content model into editor.
+ * If there is cached model, it will be used and updated.
+ * @param core The StandaloneEditorCore object
+ * @param formatter Formatter function, see ContentModelFormatter
+ * @param options More options, see FormatWithContentModelOptions
+ */
+var formatContentModel = function (core, formatter, options) {
+    var _a = options || {}, apiName = _a.apiName, onNodeCreated = _a.onNodeCreated, getChangeData = _a.getChangeData, changeSource = _a.changeSource, rawEvent = _a.rawEvent, selectionOverride = _a.selectionOverride;
+    var model = core.api.createContentModel(core, undefined /*option*/, selectionOverride);
+    var context = {
+        newEntities: [],
+        deletedEntities: [],
+        rawEvent: rawEvent,
+        newImages: [],
+    };
+    var selection;
+    if (formatter(model, context)) {
+        var writeBack = function () {
+            handleNewEntities(core, context);
+            handleDeletedEntities(core, context);
+            handleImages(core, context);
+            selection =
+                core.api.setContentModel(core, model, undefined /*options*/, onNodeCreated) ||
+                    undefined;
+            handlePendingFormat(core, context, selection);
+        };
+        if (context.skipUndoSnapshot) {
+            writeBack();
+        }
+        else {
+            core.api.addUndoSnapshot(core, writeBack, null /*changeSource, passing undefined here to avoid triggering ContentChangedEvent. We will trigger it using it with Content Model below */, false /*canUndoByBackspace*/, {
+                formatApiName: apiName,
+            });
+        }
+        var eventData = {
+            eventType: 7 /* ContentChanged */,
+            contentModel: context.clearModelCache ? undefined : model,
+            selection: context.clearModelCache ? undefined : selection,
+            source: changeSource || ChangeSource_1.ChangeSource.Format,
+            data: getChangeData === null || getChangeData === void 0 ? void 0 : getChangeData(),
+            additionalData: {
+                formatApiName: apiName,
+            },
+        };
+        core.api.triggerEvent(core, eventData, true /*broadcast*/);
+    }
+    else {
+        if (context.clearModelCache) {
+            core.cache.cachedModel = undefined;
+            core.cache.cachedSelection = undefined;
+        }
+        handlePendingFormat(core, context, core.api.getDOMSelection(core));
+    }
+};
+exports.formatContentModel = formatContentModel;
+function handleNewEntities(core, context) {
+    // TODO: Ideally we can trigger NewEntity event here. But to be compatible with original editor code, we don't do it here for now.
+    // Once Content Model Editor can be standalone, we can change this behavior to move triggering NewEntity event code
+    // from EntityPlugin to here
+    if (core.lifecycle.isDarkMode) {
+        context.newEntities.forEach(function (entity) {
+            core.api.transformColor(core, entity.wrapper, true /*includeSelf*/, null /*callback*/, 0 /* LightToDark */);
+        });
+    }
+}
+// This is only used for compatibility with old editor
+// TODO: Remove this map once we have standalone editor
+var EntityOperationMap = {
+    overwrite: 6 /* Overwrite */,
+    removeFromEnd: 5 /* RemoveFromEnd */,
+    removeFromStart: 4 /* RemoveFromStart */,
+};
+function handleDeletedEntities(core, context) {
+    context.deletedEntities.forEach(function (_a) {
+        var _b = _a.entity, wrapper = _b.wrapper, _c = _b.entityFormat, id = _c.id, entityType = _c.entityType, isReadonly = _c.isReadonly, operation = _a.operation;
+        if (id && entityType) {
+            // TODO: Revisit this entity parameter for standalone editor, we may just directly pass ContentModelEntity object instead
+            var entity = {
+                id: id,
+                type: entityType,
+                isReadonly: !!isReadonly,
+                wrapper: wrapper,
+            };
+            core.api.triggerEvent(core, {
+                eventType: 15 /* EntityOperation */,
+                entity: entity,
+                operation: EntityOperationMap[operation],
+                rawEvent: context.rawEvent,
+            }, false /*broadcast*/);
+        }
+    });
+}
+function handleImages(core, context) {
+    if (context.newImages.length > 0) {
+        var viewport = core.getVisibleViewport();
+        if (viewport) {
+            var left = viewport.left, right = viewport.right;
+            var minMaxImageSize = 10;
+            var maxWidth_1 = Math.max(right - left, minMaxImageSize);
+            context.newImages.forEach(function (image) {
+                image.format.maxWidth = maxWidth_1 + "px";
+            });
+        }
+    }
+}
+function handlePendingFormat(core, context, selection) {
+    var _a;
+    var pendingFormat = context.newPendingFormat == 'preserve'
+        ? (_a = core.format.pendingFormat) === null || _a === void 0 ? void 0 : _a.format
+        : context.newPendingFormat;
+    if (pendingFormat && (selection === null || selection === void 0 ? void 0 : selection.type) == 'range' && selection.range.collapsed) {
+        core.format.pendingFormat = {
+            format: (0, tslib_1.__assign)({}, pendingFormat),
+            posContainer: selection.range.startContainer,
+            posOffset: selection.range.startOffset,
+        };
+    }
+}
+//# sourceMappingURL=formatContentModel.js.map