roosterjs-content-model-dom 0.10.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,307 @@
+[![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` contains a DIV with some styles, and a reference to a
+   .js file:
+
+```html
+<html>
+    <body>
+        <div
+            id="editorDiv"
+            style="width: 500px; height: 300px; overflow: auto;
+        border: solid 1px black"
+        ></div>
+        <script src="editor.js"></script>
+    </body>
+</html>
+```
+
+2. Create `source.js` to import roosterjs and create an editor:
+
+```javascript
+var roosterjs = require('roosterjs');
+var editorDiv = document.getElementById('editorDiv');
+var editor = roosterjs.createEditor(editorDiv);
+editor.setContent('Welcome to <b>RoosterJs</b>!');
+```
+
+3. Compile the javascript file using webpack:
+
+`webpack source.js editor.js`
+
+4. Navigate to editor.htm, you will see a editor shown in the page.
+
+### Add some format buttons
+
+1. Add some buttons into `editor.htm`:
+
+```html
+<html>
+    <body>
+        <div
+            id="editorDiv"
+            style="width: 500px; height: 300px; overflow: auto;
+        border: solid 1px black"
+        ></div>
+        <button id="buttonB">B</button> <button id="buttonI">I</button>
+        <button id="buttonU">U</button>
+        <script src="editor.js"></script>
+    </body>
+</html>
+```
+
+2. Add code to `source.js` to handle click event of the buttons:
+
+```javascript
+var roosterjs = require('roosterjs');
+var editorDiv = document.getElementById('editorDiv');
+var editor = roosterjs.createEditor(editorDiv);
+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);
+});
+```
+
+3. Compile the javascript file using webpack:
+
+`webpack source.js editor.js`
+
+4. Navigate to editor.htm, you will see buttons with bold, italic, underline
+   actions in the page.
+
+## 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 flexable 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/domToModel/context/createDomToModelContext.d.ts

@@ -0,0 +1,7 @@
+import { DomToModelContext, DomToModelOption, EditorContext } from 'roosterjs-content-model-types';
+/**
+ * Create context object form DOM to Content Model conversion
+ * @param editorContext Context of editor
+ * @param options Options for this context
+ */
+export declare function createDomToModelContext(editorContext?: EditorContext, options?: DomToModelOption): DomToModelContext;

package/lib/domToModel/context/createDomToModelContext.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createDomToModelContext = void 0;
+var tslib_1 = require("tslib");
+var defaultFormatHandlers_1 = require("../../formatHandlers/defaultFormatHandlers");
+var defaultProcessors_1 = require("./defaultProcessors");
+var defaultStyles_1 = require("../../formatHandlers/utils/defaultStyles");
+/**
+ * Create context object form DOM to Content Model conversion
+ * @param editorContext Context of editor
+ * @param options Options for this context
+ */
+function createDomToModelContext(editorContext, options) {
+    var context = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, editorContext), { blockFormat: {}, segmentFormat: {}, zoomScaleFormat: {}, isInSelection: false, listFormat: {
+            levels: [],
+            threadItemCounts: [],
+        }, link: {
+            format: {},
+            dataset: {},
+        }, code: {
+            format: {},
+        }, blockDecorator: {
+            format: {},
+            tagName: '',
+        }, elementProcessors: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, defaultProcessors_1.defaultProcessorMap), ((options === null || options === void 0 ? void 0 : options.processorOverride) || {})), defaultStyles: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, defaultStyles_1.defaultStyleMap), ((options === null || options === void 0 ? void 0 : options.defaultStyleOverride) || {})), formatParsers: (0, defaultFormatHandlers_1.getFormatParsers)(options === null || options === void 0 ? void 0 : options.formatParserOverride, options === null || options === void 0 ? void 0 : options.additionalFormatParsers), defaultElementProcessors: defaultProcessors_1.defaultProcessorMap, defaultFormatParsers: defaultFormatHandlers_1.defaultFormatParsers, allowCacheElement: !(options === null || options === void 0 ? void 0 : options.disableCacheElement) });
+    var range = options === null || options === void 0 ? void 0 : options.selectionRange;
+    var selectionRoot;
+    switch (range === null || range === void 0 ? void 0 : range.type) {
+        case 0 /* Normal */:
+            var regularRange = range.ranges[0];
+            if (regularRange) {
+                selectionRoot = regularRange.commonAncestorContainer;
+                context.regularSelection = {
+                    startContainer: regularRange.startContainer,
+                    startOffset: regularRange.startOffset,
+                    endContainer: regularRange.endContainer,
+                    endOffset: regularRange.endOffset,
+                    isSelectionCollapsed: regularRange.collapsed,
+                };
+            }
+            break;
+        case 1 /* TableSelection */:
+            if (range.coordinates && range.table) {
+                selectionRoot = range.table;
+                context.tableSelection = {
+                    table: range.table,
+                    firstCell: (0, tslib_1.__assign)({}, range.coordinates.firstCell),
+                    lastCell: (0, tslib_1.__assign)({}, range.coordinates.lastCell),
+                };
+            }
+            break;
+        case 2 /* ImageSelection */:
+            selectionRoot = range.image;
+            context.imageSelection = {
+                image: range.image,
+            };
+            break;
+    }
+    if (selectionRoot) {
+        context.selectionRootNode = selectionRoot;
+    }
+    return context;
+}
+exports.createDomToModelContext = createDomToModelContext;
+//# sourceMappingURL=createDomToModelContext.js.map

package/lib/domToModel/context/createDomToModelContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createDomToModelContext.js","sourceRoot":"","sources":["../../../../../packages-content-model/roosterjs-content-model-dom/lib/domToModel/context/createDomToModelContext.ts"],"names":[],"mappings":";;;;AAAA,oFAAoG;AACpG,yDAA0D;AAC1D,0EAA2E;AAI3E;;;;GAIG;AACH,SAAgB,uBAAuB,CACnC,aAA6B,EAC7B,OAA0B;IAE1B,IAAM,OAAO,mDACN,aAAa,KAEhB,WAAW,EAAE,EAAE,EACf,aAAa,EAAE,EAAE,EACjB,eAAe,EAAE,EAAE,EACnB,aAAa,EAAE,KAAK,EAEpB,UAAU,EAAE;YACR,MAAM,EAAE,EAAE;YACV,gBAAgB,EAAE,EAAE;SACvB,EACD,IAAI,EAAE;YACF,MAAM,EAAE,EAAE;YACV,OAAO,EAAE,EAAE;SACd,EACD,IAAI,EAAE;YACF,MAAM,EAAE,EAAE;SACb,EACD,cAAc,EAAE;YACZ,MAAM,EAAE,EAAE;YACV,OAAO,EAAE,EAAE;SACd,EAED,iBAAiB,kDACV,uCAAmB,GACnB,CAAC,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,iBAAiB,KAAI,EAAE,CAAC,GAGzC,aAAa,kDACN,+BAAe,GACf,CAAC,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,oBAAoB,KAAI,EAAE,CAAC,GAG5C,aAAa,EAAE,IAAA,wCAAgB,EAC3B,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,oBAAoB,EAC7B,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,uBAAuB,CACnC,EAED,wBAAwB,EAAE,uCAAmB,EAC7C,oBAAoB,EAAE,4CAAoB,EAC1C,iBAAiB,EAAE,CAAC,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,mBAAmB,CAAA,GACnD,CAAC;IAEF,IAAM,KAAK,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,cAAc,CAAC;IACtC,IAAI,aAA+B,CAAC;IAEpC,QAAQ,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,EAAE;QACjB;YACI,IAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;YACrC,IAAI,YAAY,EAAE;gBACd,aAAa,GAAG,YAAY,CAAC,uBAAuB,CAAC;gBACrD,OAAO,CAAC,gBAAgB,GAAG;oBACvB,cAAc,EAAE,YAAY,CAAC,cAAc;oBAC3C,WAAW,EAAE,YAAY,CAAC,WAAW;oBACrC,YAAY,EAAE,YAAY,CAAC,YAAY;oBACvC,SAAS,EAAE,YAAY,CAAC,SAAS;oBACjC,oBAAoB,EAAE,YAAY,CAAC,SAAS;iBAC/C,CAAC;aACL;YACD,MAAM;QAEV;YACI,IAAI,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,KAAK,EAAE;gBAClC,aAAa,GAAG,KAAK,CAAC,KAAK,CAAC;gBAC5B,OAAO,CAAC,cAAc,GAAG;oBACrB,KAAK,EAAE,KAAK,CAAC,KAAK;oBAClB,SAAS,4BAAO,KAAK,CAAC,WAAW,CAAC,SAAS,CAAE;oBAC7C,QAAQ,4BAAO,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAE;iBAC9C,CAAC;aACL;YAED,MAAM;QAEV;YACI,aAAa,GAAG,KAAK,CAAC,KAAK,CAAC;YAC5B,OAAO,CAAC,cAAc,GAAG;gBACrB,KAAK,EAAE,KAAK,CAAC,KAAK;aACrB,CAAC;YACF,MAAM;KACb;IAED,IAAI,aAAa,EAAE;QACf,OAAO,CAAC,iBAAiB,GAAG,aAAa,CAAC;KAC7C;IAED,OAAO,OAAO,CAAC;AACnB,CAAC;AA3FD,0DA2FC","sourcesContent":["import { defaultFormatParsers, getFormatParsers } from '../../formatHandlers/defaultFormatHandlers';\nimport { defaultProcessorMap } from './defaultProcessors';\nimport { defaultStyleMap } from '../../formatHandlers/utils/defaultStyles';\nimport { DomToModelContext, DomToModelOption, EditorContext } from 'roosterjs-content-model-types';\nimport { SelectionRangeTypes } from 'roosterjs-editor-types';\n\n/**\n * Create context object form DOM to Content Model conversion\n * @param editorContext Context of editor\n * @param options Options for this context\n */\nexport function createDomToModelContext(\n    editorContext?: EditorContext,\n    options?: DomToModelOption\n): DomToModelContext {\n    const context: DomToModelContext = {\n        ...editorContext,\n\n        blockFormat: {},\n        segmentFormat: {},\n        zoomScaleFormat: {},\n        isInSelection: false,\n\n        listFormat: {\n            levels: [],\n            threadItemCounts: [],\n        },\n        link: {\n            format: {},\n            dataset: {},\n        },\n        code: {\n            format: {},\n        },\n        blockDecorator: {\n            format: {},\n            tagName: '',\n        },\n\n        elementProcessors: {\n            ...defaultProcessorMap,\n            ...(options?.processorOverride || {}),\n        },\n\n        defaultStyles: {\n            ...defaultStyleMap,\n            ...(options?.defaultStyleOverride || {}),\n        },\n\n        formatParsers: getFormatParsers(\n            options?.formatParserOverride,\n            options?.additionalFormatParsers\n        ),\n\n        defaultElementProcessors: defaultProcessorMap,\n        defaultFormatParsers: defaultFormatParsers,\n        allowCacheElement: !options?.disableCacheElement,\n    };\n\n    const range = options?.selectionRange;\n    let selectionRoot: Node | undefined;\n\n    switch (range?.type) {\n        case SelectionRangeTypes.Normal:\n            const regularRange = range.ranges[0];\n            if (regularRange) {\n                selectionRoot = regularRange.commonAncestorContainer;\n                context.regularSelection = {\n                    startContainer: regularRange.startContainer,\n                    startOffset: regularRange.startOffset,\n                    endContainer: regularRange.endContainer,\n                    endOffset: regularRange.endOffset,\n                    isSelectionCollapsed: regularRange.collapsed,\n                };\n            }\n            break;\n\n        case SelectionRangeTypes.TableSelection:\n            if (range.coordinates && range.table) {\n                selectionRoot = range.table;\n                context.tableSelection = {\n                    table: range.table,\n                    firstCell: { ...range.coordinates.firstCell },\n                    lastCell: { ...range.coordinates.lastCell },\n                };\n            }\n\n            break;\n\n        case SelectionRangeTypes.ImageSelection:\n            selectionRoot = range.image;\n            context.imageSelection = {\n                image: range.image,\n            };\n            break;\n    }\n\n    if (selectionRoot) {\n        context.selectionRootNode = selectionRoot;\n    }\n\n    return context;\n}\n"]}

package/lib/domToModel/context/defaultProcessors.d.ts

@@ -0,0 +1,5 @@
+import { ElementProcessorMap } from 'roosterjs-content-model-types';
+/**
+ * @internal
+ */
+export declare const defaultProcessorMap: ElementProcessorMap;

package/lib/domToModel/context/defaultProcessors.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultProcessorMap = void 0;
+var brProcessor_1 = require("../processors/brProcessor");
+var childProcessor_1 = require("../processors/childProcessor");
+var codeProcessor_1 = require("../processors/codeProcessor");
+var delimiterProcessor_1 = require("../processors/delimiterProcessor");
+var elementProcessor_1 = require("../processors/elementProcessor");
+var entityProcessor_1 = require("../processors/entityProcessor");
+var fontProcessor_1 = require("../processors/fontProcessor");
+var formatContainerProcessor_1 = require("../processors/formatContainerProcessor");
+var generalProcessor_1 = require("../processors/generalProcessor");
+var headingProcessor_1 = require("../processors/headingProcessor");
+var hrProcessor_1 = require("../processors/hrProcessor");
+var imageProcessor_1 = require("../processors/imageProcessor");
+var knownElementProcessor_1 = require("../processors/knownElementProcessor");
+var linkProcessor_1 = require("../processors/linkProcessor");
+var listItemProcessor_1 = require("../processors/listItemProcessor");
+var listProcessor_1 = require("../processors/listProcessor");
+var pProcessor_1 = require("../processors/pProcessor");
+var tableProcessor_1 = require("../processors/tableProcessor");
+var textProcessor_1 = require("../processors/textProcessor");
+/**
+ * @internal
+ */
+exports.defaultProcessorMap = {
+    a: linkProcessor_1.linkProcessor,
+    b: knownElementProcessor_1.knownElementProcessor,
+    blockquote: knownElementProcessor_1.knownElementProcessor,
+    br: brProcessor_1.brProcessor,
+    code: codeProcessor_1.codeProcessor,
+    div: knownElementProcessor_1.knownElementProcessor,
+    em: knownElementProcessor_1.knownElementProcessor,
+    font: fontProcessor_1.fontProcessor,
+    i: knownElementProcessor_1.knownElementProcessor,
+    img: imageProcessor_1.imageProcessor,
+    h1: headingProcessor_1.headingProcessor,
+    h2: headingProcessor_1.headingProcessor,
+    h3: headingProcessor_1.headingProcessor,
+    h4: headingProcessor_1.headingProcessor,
+    h5: headingProcessor_1.headingProcessor,
+    h6: headingProcessor_1.headingProcessor,
+    hr: hrProcessor_1.hrProcessor,
+    li: listItemProcessor_1.listItemProcessor,
+    ol: listProcessor_1.listProcessor,
+    p: pProcessor_1.pProcessor,
+    pre: formatContainerProcessor_1.formatContainerProcessor,
+    s: knownElementProcessor_1.knownElementProcessor,
+    span: knownElementProcessor_1.knownElementProcessor,
+    strike: knownElementProcessor_1.knownElementProcessor,
+    strong: knownElementProcessor_1.knownElementProcessor,
+    sub: knownElementProcessor_1.knownElementProcessor,
+    sup: knownElementProcessor_1.knownElementProcessor,
+    table: tableProcessor_1.tableProcessor,
+    u: knownElementProcessor_1.knownElementProcessor,
+    ul: listProcessor_1.listProcessor,
+    '*': generalProcessor_1.generalProcessor,
+    '#text': textProcessor_1.textProcessor,
+    element: elementProcessor_1.elementProcessor,
+    entity: entityProcessor_1.entityProcessor,
+    child: childProcessor_1.childProcessor,
+    delimiter: delimiterProcessor_1.delimiterProcessor,
+};
+//# sourceMappingURL=defaultProcessors.js.map

package/lib/domToModel/context/defaultProcessors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaultProcessors.js","sourceRoot":"","sources":["../../../../../packages-content-model/roosterjs-content-model-dom/lib/domToModel/context/defaultProcessors.ts"],"names":[],"mappings":";;;AAAA,yDAAwD;AACxD,+DAA8D;AAC9D,6DAA4D;AAC5D,uEAAsE;AACtE,mEAAkE;AAElE,iEAAgE;AAChE,6DAA4D;AAC5D,mFAAkF;AAClF,mEAAkE;AAClE,mEAAkE;AAClE,yDAAwD;AACxD,+DAA8D;AAC9D,6EAA4E;AAC5E,6DAA4D;AAC5D,qEAAoE;AACpE,6DAA4D;AAC5D,uDAAsD;AACtD,+DAA8D;AAC9D,6DAA4D;AAE5D;;GAEG;AACU,QAAA,mBAAmB,GAAwB;IACpD,CAAC,EAAE,6BAAa;IAChB,CAAC,EAAE,6CAAqB;IACxB,UAAU,EAAE,6CAAqB;IACjC,EAAE,EAAE,yBAAW;IACf,IAAI,EAAE,6BAAa;IACnB,GAAG,EAAE,6CAAqB;IAC1B,EAAE,EAAE,6CAAqB;IACzB,IAAI,EAAE,6BAAa;IACnB,CAAC,EAAE,6CAAqB;IACxB,GAAG,EAAE,+BAAc;IACnB,EAAE,EAAE,mCAAgB;IACpB,EAAE,EAAE,mCAAgB;IACpB,EAAE,EAAE,mCAAgB;IACpB,EAAE,EAAE,mCAAgB;IACpB,EAAE,EAAE,mCAAgB;IACpB,EAAE,EAAE,mCAAgB;IACpB,EAAE,EAAE,yBAAW;IACf,EAAE,EAAE,qCAAiB;IACrB,EAAE,EAAE,6BAAa;IACjB,CAAC,EAAE,uBAAU;IACb,GAAG,EAAE,mDAAwB;IAC7B,CAAC,EAAE,6CAAqB;IACxB,IAAI,EAAE,6CAAqB;IAC3B,MAAM,EAAE,6CAAqB;IAC7B,MAAM,EAAE,6CAAqB;IAC7B,GAAG,EAAE,6CAAqB;IAC1B,GAAG,EAAE,6CAAqB;IAC1B,KAAK,EAAE,+BAAc;IACrB,CAAC,EAAE,6CAAqB;IACxB,EAAE,EAAE,6BAAa;IAEjB,GAAG,EAAE,mCAAgB;IACrB,OAAO,EAAE,6BAAa;IACtB,OAAO,EAAE,mCAAgB;IACzB,MAAM,EAAE,iCAAe;IACvB,KAAK,EAAE,+BAAc;IACrB,SAAS,EAAE,uCAAkB;CAChC,CAAC","sourcesContent":["import { brProcessor } from '../processors/brProcessor';\nimport { childProcessor } from '../processors/childProcessor';\nimport { codeProcessor } from '../processors/codeProcessor';\nimport { delimiterProcessor } from '../processors/delimiterProcessor';\nimport { elementProcessor } from '../processors/elementProcessor';\nimport { ElementProcessorMap } from 'roosterjs-content-model-types';\nimport { entityProcessor } from '../processors/entityProcessor';\nimport { fontProcessor } from '../processors/fontProcessor';\nimport { formatContainerProcessor } from '../processors/formatContainerProcessor';\nimport { generalProcessor } from '../processors/generalProcessor';\nimport { headingProcessor } from '../processors/headingProcessor';\nimport { hrProcessor } from '../processors/hrProcessor';\nimport { imageProcessor } from '../processors/imageProcessor';\nimport { knownElementProcessor } from '../processors/knownElementProcessor';\nimport { linkProcessor } from '../processors/linkProcessor';\nimport { listItemProcessor } from '../processors/listItemProcessor';\nimport { listProcessor } from '../processors/listProcessor';\nimport { pProcessor } from '../processors/pProcessor';\nimport { tableProcessor } from '../processors/tableProcessor';\nimport { textProcessor } from '../processors/textProcessor';\n\n/**\n * @internal\n */\nexport const defaultProcessorMap: ElementProcessorMap = {\n    a: linkProcessor,\n    b: knownElementProcessor,\n    blockquote: knownElementProcessor,\n    br: brProcessor,\n    code: codeProcessor,\n    div: knownElementProcessor,\n    em: knownElementProcessor,\n    font: fontProcessor,\n    i: knownElementProcessor,\n    img: imageProcessor,\n    h1: headingProcessor,\n    h2: headingProcessor,\n    h3: headingProcessor,\n    h4: headingProcessor,\n    h5: headingProcessor,\n    h6: headingProcessor,\n    hr: hrProcessor,\n    li: listItemProcessor,\n    ol: listProcessor,\n    p: pProcessor,\n    pre: formatContainerProcessor,\n    s: knownElementProcessor,\n    span: knownElementProcessor,\n    strike: knownElementProcessor,\n    strong: knownElementProcessor,\n    sub: knownElementProcessor,\n    sup: knownElementProcessor,\n    table: tableProcessor,\n    u: knownElementProcessor,\n    ul: listProcessor,\n\n    '*': generalProcessor,\n    '#text': textProcessor,\n    element: elementProcessor,\n    entity: entityProcessor,\n    child: childProcessor,\n    delimiter: delimiterProcessor,\n};\n"]}

package/lib/domToModel/domToContentModel.d.ts

@@ -0,0 +1,9 @@
+import { ContentModelDocument, DomToModelOption, EditorContext } from 'roosterjs-content-model-types';
+/**
+ * Create Content Model from DOM tree in this editor
+ * @param root Root element of DOM tree to create Content Model from
+ * @param editorContext Context of content model editor
+ * @param option The option to customize the behavior of DOM to Content Model conversion
+ * @returns A ContentModelDocument object that contains all the models created from the give root element
+ */
+export declare function domToContentModel(root: HTMLElement | DocumentFragment, editorContext?: EditorContext, option?: DomToModelOption): ContentModelDocument;

package/lib/domToModel/domToContentModel.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.domToContentModel = void 0;
+var createContentModelDocument_1 = require("../modelApi/creators/createContentModelDocument");
+var createDomToModelContext_1 = require("./context/createDomToModelContext");
+var isNodeOfType_1 = require("../domUtils/isNodeOfType");
+var normalizeContentModel_1 = require("../modelApi/common/normalizeContentModel");
+var parseFormat_1 = require("./utils/parseFormat");
+var rootDirectionFormatHandler_1 = require("../formatHandlers/root/rootDirectionFormatHandler");
+var zoomScaleFormatHandler_1 = require("../formatHandlers/root/zoomScaleFormatHandler");
+/**
+ * Create Content Model from DOM tree in this editor
+ * @param root Root element of DOM tree to create Content Model from
+ * @param editorContext Context of content model editor
+ * @param option The option to customize the behavior of DOM to Content Model conversion
+ * @returns A ContentModelDocument object that contains all the models created from the give root element
+ */
+function domToContentModel(root, editorContext, option) {
+    var model = (0, createContentModelDocument_1.createContentModelDocument)(editorContext === null || editorContext === void 0 ? void 0 : editorContext.defaultFormat);
+    var context = (0, createDomToModelContext_1.createDomToModelContext)(editorContext, option);
+    if ((0, isNodeOfType_1.isNodeOfType)(root, 1 /* Element */)) {
+        // Need to calculate direction (ltr or rtl), use it as initial value
+        (0, parseFormat_1.parseFormat)(root, [rootDirectionFormatHandler_1.rootDirectionFormatHandler.parse], context.blockFormat, context);
+        // Need to calculate zoom scale value from root element, use this value to calculate sizes for elements
+        (0, parseFormat_1.parseFormat)(root, [zoomScaleFormatHandler_1.zoomScaleFormatHandler.parse], context.zoomScaleFormat, context);
+    }
+    context.elementProcessors.child(model, root, context);
+    (0, normalizeContentModel_1.normalizeContentModel)(model);
+    return model;
+}
+exports.domToContentModel = domToContentModel;
+//# sourceMappingURL=domToContentModel.js.map

package/lib/domToModel/domToContentModel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"domToContentModel.js","sourceRoot":"","sources":["../../../../packages-content-model/roosterjs-content-model-dom/lib/domToModel/domToContentModel.ts"],"names":[],"mappings":";;;AAAA,8FAA6F;AAC7F,6EAA4E;AAC5E,yDAAwD;AAExD,kFAAiF;AACjF,mDAAkD;AAClD,gGAA+F;AAC/F,wFAAuF;AAOvF;;;;;;GAMG;AACH,SAAgB,iBAAiB,CAC7B,IAAoC,EACpC,aAA6B,EAC7B,MAAyB;IAEzB,IAAM,KAAK,GAAG,IAAA,uDAA0B,EAAC,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,aAAa,CAAC,CAAC;IACvE,IAAM,OAAO,GAAG,IAAA,iDAAuB,EAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IAE/D,IAAI,IAAA,2BAAY,EAAC,IAAI,kBAAmB,EAAE;QACtC,oEAAoE;QACpE,IAAA,yBAAW,EAAC,IAAI,EAAE,CAAC,uDAA0B,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC;QAEpF,uGAAuG;QACvG,IAAA,yBAAW,EAAC,IAAI,EAAE,CAAC,+CAAsB,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;KACvF;IAED,OAAO,CAAC,iBAAiB,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC;IAEtD,IAAA,6CAAqB,EAAC,KAAK,CAAC,CAAC;IAE7B,OAAO,KAAK,CAAC;AACjB,CAAC;AArBD,8CAqBC","sourcesContent":["import { createContentModelDocument } from '../modelApi/creators/createContentModelDocument';\nimport { createDomToModelContext } from './context/createDomToModelContext';\nimport { isNodeOfType } from '../domUtils/isNodeOfType';\nimport { NodeType } from 'roosterjs-editor-types';\nimport { normalizeContentModel } from '../modelApi/common/normalizeContentModel';\nimport { parseFormat } from './utils/parseFormat';\nimport { rootDirectionFormatHandler } from '../formatHandlers/root/rootDirectionFormatHandler';\nimport { zoomScaleFormatHandler } from '../formatHandlers/root/zoomScaleFormatHandler';\nimport {\n    ContentModelDocument,\n    DomToModelOption,\n    EditorContext,\n} from 'roosterjs-content-model-types';\n\n/**\n * Create Content Model from DOM tree in this editor\n * @param root Root element of DOM tree to create Content Model from\n * @param editorContext Context of content model editor\n * @param option The option to customize the behavior of DOM to Content Model conversion\n * @returns A ContentModelDocument object that contains all the models created from the give root element\n */\nexport function domToContentModel(\n    root: HTMLElement | DocumentFragment,\n    editorContext?: EditorContext,\n    option?: DomToModelOption\n): ContentModelDocument {\n    const model = createContentModelDocument(editorContext?.defaultFormat);\n    const context = createDomToModelContext(editorContext, option);\n\n    if (isNodeOfType(root, NodeType.Element)) {\n        // Need to calculate direction (ltr or rtl), use it as initial value\n        parseFormat(root, [rootDirectionFormatHandler.parse], context.blockFormat, context);\n\n        // Need to calculate zoom scale value from root element, use this value to calculate sizes for elements\n        parseFormat(root, [zoomScaleFormatHandler.parse], context.zoomScaleFormat, context);\n    }\n\n    context.elementProcessors.child(model, root, context);\n\n    normalizeContentModel(model);\n\n    return model;\n}\n"]}

package/lib/domToModel/processors/blockProcessor.d.ts

@@ -0,0 +1,5 @@
+import { ContentModelBlockGroup, ContentModelSegmentFormat, DomToModelContext } from 'roosterjs-content-model-types';
+/**
+ * @internal
+ */
+export declare function blockProcessor(group: ContentModelBlockGroup, element: HTMLElement, context: DomToModelContext, segmentFormat?: ContentModelSegmentFormat): void;

package/lib/domToModel/processors/blockProcessor.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.blockProcessor = void 0;
+var tslib_1 = require("tslib");
+var addBlock_1 = require("../../modelApi/common/addBlock");
+var formatContainerProcessor_1 = require("./formatContainerProcessor");
+var createParagraph_1 = require("../../modelApi/creators/createParagraph");
+var parseFormat_1 = require("../utils/parseFormat");
+var SegmentDecoratorTags = ['A', 'CODE'];
+/**
+ * @internal
+ */
+function blockProcessor(group, element, context, segmentFormat) {
+    var decorator = context.blockDecorator.tagName ? context.blockDecorator : undefined;
+    var isSegmentDecorator = SegmentDecoratorTags.indexOf(element.tagName) >= 0;
+    (0, parseFormat_1.parseFormat)(element, context.formatParsers.block, context.blockFormat, context);
+    var blockFormat = (0, tslib_1.__assign)({}, context.blockFormat);
+    (0, parseFormat_1.parseFormat)(element, context.formatParsers.container, blockFormat, context);
+    formatContainerProcessor_1.ContextStyles.forEach(function (style) {
+        if (blockFormat[style]) {
+            context.blockFormat[style] = blockFormat[style];
+        }
+    });
+    if (!isSegmentDecorator) {
+        var paragraph = (0, createParagraph_1.createParagraph)(false /*isImplicit*/, blockFormat, segmentFormat, decorator);
+        (0, addBlock_1.addBlock)(group, paragraph);
+    }
+    context.elementProcessors.child(group, element, context);
+}
+exports.blockProcessor = blockProcessor;
+//# sourceMappingURL=blockProcessor.js.map

package/lib/domToModel/processors/blockProcessor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"blockProcessor.js","sourceRoot":"","sources":["../../../../../packages-content-model/roosterjs-content-model-dom/lib/domToModel/processors/blockProcessor.ts"],"names":[],"mappings":";;;;AAAA,2DAA0D;AAC1D,uEAA2D;AAC3D,2EAA0E;AAC1E,oDAAmD;AAOnD,IAAM,oBAAoB,GAAG,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC;AAE3C;;GAEG;AACH,SAAgB,cAAc,CAC1B,KAA6B,EAC7B,OAAoB,EACpB,OAA0B,EAC1B,aAAyC;IAEzC,IAAM,SAAS,GAAG,OAAO,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC;IACtF,IAAM,kBAAkB,GAAG,oBAAoB,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IAE9E,IAAA,yBAAW,EAAC,OAAO,EAAE,OAAO,CAAC,aAAa,CAAC,KAAK,EAAE,OAAO,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC;IAEhF,IAAM,WAAW,6BAAQ,OAAO,CAAC,WAAW,CAAE,CAAC;IAE/C,IAAA,yBAAW,EAAC,OAAO,EAAE,OAAO,CAAC,aAAa,CAAC,SAAS,EAAE,WAAW,EAAE,OAAO,CAAC,CAAC;IAE5E,wCAAa,CAAC,OAAO,CAAC,UAAA,KAAK;QACvB,IAAI,WAAW,CAAC,KAAK,CAAC,EAAE;YACpB,OAAO,CAAC,WAAW,CAAC,KAAK,CAAC,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;SACnD;IACL,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,kBAAkB,EAAE;QACrB,IAAM,SAAS,GAAG,IAAA,iCAAe,EAC7B,KAAK,CAAC,cAAc,EACpB,WAAW,EACX,aAAa,EACb,SAAS,CACZ,CAAC;QAEF,IAAA,mBAAQ,EAAC,KAAK,EAAE,SAAS,CAAC,CAAC;KAC9B;IAED,OAAO,CAAC,iBAAiB,CAAC,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;AAC7D,CAAC;AAjCD,wCAiCC","sourcesContent":["import { addBlock } from '../../modelApi/common/addBlock';\nimport { ContextStyles } from './formatContainerProcessor';\nimport { createParagraph } from '../../modelApi/creators/createParagraph';\nimport { parseFormat } from '../utils/parseFormat';\nimport {\n    ContentModelBlockGroup,\n    ContentModelSegmentFormat,\n    DomToModelContext,\n} from 'roosterjs-content-model-types';\n\nconst SegmentDecoratorTags = ['A', 'CODE'];\n\n/**\n * @internal\n */\nexport function blockProcessor(\n    group: ContentModelBlockGroup,\n    element: HTMLElement,\n    context: DomToModelContext,\n    segmentFormat?: ContentModelSegmentFormat\n) {\n    const decorator = context.blockDecorator.tagName ? context.blockDecorator : undefined;\n    const isSegmentDecorator = SegmentDecoratorTags.indexOf(element.tagName) >= 0;\n\n    parseFormat(element, context.formatParsers.block, context.blockFormat, context);\n\n    const blockFormat = { ...context.blockFormat };\n\n    parseFormat(element, context.formatParsers.container, blockFormat, context);\n\n    ContextStyles.forEach(style => {\n        if (blockFormat[style]) {\n            context.blockFormat[style] = blockFormat[style];\n        }\n    });\n\n    if (!isSegmentDecorator) {\n        const paragraph = createParagraph(\n            false /*isImplicit*/,\n            blockFormat,\n            segmentFormat,\n            decorator\n        );\n\n        addBlock(group, paragraph);\n    }\n\n    context.elementProcessors.child(group, element, context);\n}\n"]}

package/lib/domToModel/processors/brProcessor.d.ts

@@ -0,0 +1,5 @@
+import { ElementProcessor } from 'roosterjs-content-model-types';
+/**
+ * @internal
+ */
+export declare const brProcessor: ElementProcessor<HTMLBRElement>;

package/lib/domToModel/processors/brProcessor.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.brProcessor = void 0;
+var addSegment_1 = require("../../modelApi/common/addSegment");
+var createBr_1 = require("../../modelApi/creators/createBr");
+/**
+ * @internal
+ */
+var brProcessor = function (group, element, context) {
+    var br = (0, createBr_1.createBr)(context.segmentFormat);
+    if (context.isInSelection) {
+        br.isSelected = true;
+    }
+    (0, addSegment_1.addSegment)(group, br, context.blockFormat);
+};
+exports.brProcessor = brProcessor;
+//# sourceMappingURL=brProcessor.js.map

package/lib/domToModel/processors/brProcessor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"brProcessor.js","sourceRoot":"","sources":["../../../../../packages-content-model/roosterjs-content-model-dom/lib/domToModel/processors/brProcessor.ts"],"names":[],"mappings":";;;AAAA,+DAA8D;AAC9D,6DAA4D;AAG5D;;GAEG;AACI,IAAM,WAAW,GAAoC,UAAC,KAAK,EAAE,OAAO,EAAE,OAAO;IAChF,IAAM,EAAE,GAAG,IAAA,mBAAQ,EAAC,OAAO,CAAC,aAAa,CAAC,CAAC;IAE3C,IAAI,OAAO,CAAC,aAAa,EAAE;QACvB,EAAE,CAAC,UAAU,GAAG,IAAI,CAAC;KACxB;IAED,IAAA,uBAAU,EAAC,KAAK,EAAE,EAAE,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;AAC/C,CAAC,CAAC;AARW,QAAA,WAAW,eAQtB","sourcesContent":["import { addSegment } from '../../modelApi/common/addSegment';\nimport { createBr } from '../../modelApi/creators/createBr';\nimport { ElementProcessor } from 'roosterjs-content-model-types';\n\n/**\n * @internal\n */\nexport const brProcessor: ElementProcessor<HTMLBRElement> = (group, element, context) => {\n    const br = createBr(context.segmentFormat);\n\n    if (context.isInSelection) {\n        br.isSelected = true;\n    }\n\n    addSegment(group, br, context.blockFormat);\n};\n"]}