roosterjs-content-model-core - npm Package Compare versions

Comparing version 0.22.0 to 0.23.0

lib-amd/coreApi/createContentModel.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "tslib", "../publicApi/model/cloneModel", "roosterjs-content-model-dom"], function (require, exports, tslib_1, cloneModel_1, roosterjs_content_model_dom_1) {
+define(["require", "exports", "../publicApi/model/cloneModel", "roosterjs-content-model-dom"], function (require, exports, cloneModel_1, roosterjs_content_model_dom_1) {
     "use strict";
@@ -35,3 +35,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
         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);
+            ? (0, roosterjs_content_model_dom_1.createDomToModelContext)(editorContext, core.domToModelSettings.builtIn, core.domToModelSettings.customized, option)
+            : (0, roosterjs_content_model_dom_1.createDomToModelContextWithConfig)(core.domToModelSettings.calculated, editorContext);
         return (0, roosterjs_content_model_dom_1.domToContentModel)(core.contentDiv, domToModelContext, selection);
@@ -38,0 +39,0 @@ }

lib-amd/coreApi/setContentModel.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "tslib", "roosterjs-content-model-dom"], function (require, exports, tslib_1, roosterjs_content_model_dom_1) {
+define(["require", "exports", "roosterjs-content-model-dom"], function (require, exports, roosterjs_content_model_dom_1) {
     "use strict";
@@ -15,3 +15,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
         var modelToDomContext = option
-            ? roosterjs_content_model_dom_1.createModelToDomContext.apply(void 0, (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([editorContext], (0, tslib_1.__read)((core.defaultModelToDomOptions || [])), false), [option], false)) : (0, roosterjs_content_model_dom_1.createModelToDomContextWithConfig)(core.defaultModelToDomConfig, editorContext);
+            ? (0, roosterjs_content_model_dom_1.createModelToDomContext)(editorContext, core.modelToDomSettings.builtIn, core.modelToDomSettings.customized, option)
+            : (0, roosterjs_content_model_dom_1.createModelToDomContextWithConfig)(core.modelToDomSettings.calculated, editorContext);
         var selection = (0, roosterjs_content_model_dom_1.contentModelToDom)(core.contentDiv.ownerDocument, core.contentDiv, model, modelToDomContext, onNodeCreated);
@@ -18,0 +19,0 @@ if (!core.lifecycle.shadowEditFragment) {

lib-amd/coreApi/setDOMSelection.js

@@ -9,3 +9,4 @@ define(["require", "exports", "../corePlugin/utils/addRangeToSelection", "roosterjs-content-model-dom", "../publicApi/domUtils/tableCellUtils"], function (require, exports, addRangeToSelection_1, roosterjs_content_model_dom_1, tableCellUtils_1) {
     var DEFAULT_SELECTION_BORDER_COLOR = '#DB626C';
-    var TABLE_CSS_RULE = '{background-color: rgb(198,198,198) !important; caret-color: transparent}';
+    var TABLE_CSS_RULE = '{background-color: rgb(198,198,198) !important;}';
+    var CARET_CSS_RULE = '{caret-color: transparent}';
     var MAX_RULE_SELECTOR_LENGTH = 9000;
@@ -29,3 +30,3 @@ /**
                     var image = selection.image;
-                    selectionRules = buildImageCSS(rootSelector + ' #' + addUniqueId(image, IMAGE_ID), core.selection.imageSelectionBorderColor);
+                    selectionRules = buildImageCSS(rootSelector, addUniqueId(image, IMAGE_ID), core.selection.imageSelectionBorderColor);
                     core.selection.selection = selection;
@@ -36,3 +37,3 @@ setRangeSelection(doc, image);
                     var table = selection.table, firstColumn = selection.firstColumn, firstRow = selection.firstRow;
-                    selectionRules = buildTableCss(rootSelector + ' #' + addUniqueId(table, TABLE_ID), selection);
+                    selectionRules = buildTableCss(rootSelector, addUniqueId(table, TABLE_ID), selection);
                     core.selection.selection = selection;
@@ -73,9 +74,10 @@ setRangeSelection(doc, (_b = table.rows[firstRow]) === null || _b === void 0 ? void 0 : _b.cells[firstColumn]);
     exports.setDOMSelection = setDOMSelection;
-    function buildImageCSS(rootSelector, borderColor) {
+    function buildImageCSS(editorSelector, imageId, borderColor) {
         var color = borderColor || DEFAULT_SELECTION_BORDER_COLOR;
         return [
-            rootSelector + " {outline-style:auto!important;outline-color:" + color + "!important;caret-color:transparent;}",
+            editorSelector + " #" + imageId + " {outline-style:auto!important;outline-color:" + color + "!important;}",
+            editorSelector + " " + CARET_CSS_RULE,
         ];
     }
-    function buildTableCss(rootSelector, selection) {
+    function buildTableCss(editorSelector, tableId, selection) {
         var _a, _b, _c;
@@ -88,6 +90,7 @@ var firstColumn = selection.firstColumn, firstRow = selection.firstRow, lastColumn = selection.lastColumn, lastRow = selection.lastRow;
             lastColumn == ((_b = (_a = cells[lastRow]) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) - 1;
+        var rootSelector = editorSelector + ' #' + tableId;
         var selectors = isAllTableSelected
             ? [rootSelector, rootSelector + " *"]
             : handleTableSelected(rootSelector, selection, cells);
-        var cssRules = [];
+        var cssRules = [editorSelector + " " + CARET_CSS_RULE];
         var currentRules = '';
@@ -94,0 +97,0 @@ for (var i = 0; i < selectors.length; i++) {

lib-amd/corePlugin/ContentModelCopyPastePlugin.d.ts

@@ -1,2 +0,2 @@
-import type { CopyPastePluginState, ContentModelTable, OnNodeCreated, StandaloneEditorOptions } from 'roosterjs-content-model-types';
+import type { CopyPastePluginState, ContentModelTable, OnNodeCreated, StandaloneEditorOptions, ContentModelDocument } from 'roosterjs-content-model-types';
 import type { PluginWithState } from 'roosterjs-editor-types';
@@ -7,2 +7,7 @@ /**
  */
+export declare function adjustSelectionForCopyCut(pasteModel: ContentModelDocument): void;
+/**
+ * @internal
+ * Exported only for unit testing
+ */
 export declare const onNodeCreated: OnNodeCreated;
@@ -9,0 +14,0 @@ /**

lib-amd/corePlugin/ContentModelCopyPastePlugin.js

@@ -1,5 +0,5 @@
-define(["require", "exports", "tslib", "./utils/addRangeToSelection", "../constants/ChangeSource", "../publicApi/model/cloneModel", "./utils/deleteEmptyList", "../publicApi/selection/deleteSelection", "../utils/extractClipboardItems", "../publicApi/table/getSelectedCells", "../publicApi/selection/iterateSelections", "../publicApi/model/paste", "../publicApi/color/transformColor", "roosterjs-content-model-dom"], function (require, exports, tslib_1, addRangeToSelection_1, ChangeSource_1, cloneModel_1, deleteEmptyList_1, deleteSelection_1, extractClipboardItems_1, getSelectedCells_1, iterateSelections_1, paste_1, transformColor_1, roosterjs_content_model_dom_1) {
+define(["require", "exports", "tslib", "./utils/addRangeToSelection", "../constants/ChangeSource", "../publicApi/model/cloneModel", "./utils/deleteEmptyList", "../publicApi/selection/deleteSelection", "../utils/extractClipboardItems", "../publicApi/table/getSelectedCells", "../publicApi/selection/iterateSelections", "../publicApi/color/transformColor", "roosterjs-content-model-dom"], function (require, exports, tslib_1, addRangeToSelection_1, ChangeSource_1, cloneModel_1, deleteEmptyList_1, deleteSelection_1, extractClipboardItems_1, getSelectedCells_1, iterateSelections_1, transformColor_1, roosterjs_content_model_dom_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.createContentModelCopyPastePlugin = exports.preprocessTable = exports.onNodeCreated = void 0;
+    exports.createContentModelCopyPastePlugin = exports.preprocessTable = exports.onNodeCreated = exports.adjustSelectionForCopyCut = void 0;
     /**
@@ -25,3 +25,3 @@ * Copy and paste plugin for handling onCopy and onPaste event
                             if (!editor_1.isDisposed()) {
-                                (0, paste_1.paste)(editor_1, clipboardData);
+                                editor_1.pasteFromClipboard(clipboardData);
                             }
@@ -95,2 +95,4 @@ });
         ContentModelCopyPastePlugin.prototype.onCutCopy = function (event, isCut) {
+            var _this = this;
+            var _a;
             if (!this.editor) {
@@ -102,3 +104,3 @@ return;
             if (selection && (selection.type != 'range' || !selection.range.collapsed)) {
-                var model = this.editor.createContentModel();
+                var model = this.editor.createContentModel(undefined /* option */, selection);
                 var cacheProcessor = this.editor.isDarkMode() ? this.processEntityColor : false;
@@ -117,2 +119,5 @@ var pasteModel = (0, cloneModel_1.cloneModel)(model, {
                 }
+                else if (selection.type === 'range') {
+                    adjustSelectionForCopyCut(pasteModel);
+                }
                 var tempDiv_1 = this.getTempDiv(this.editor.getDocument());
@@ -133,9 +138,11 @@ var selectionForCopy = (0, roosterjs_content_model_dom_1.contentModelToDom)(tempDiv_1.ownerDocument, tempDiv_1, pasteModel, (0, roosterjs_content_model_dom_1.createModelToDomContext)(), exports.onNodeCreated);
                     }
-                    this.editor.runAsync(function (e) {
-                        var editor = e;
+                    (_a = doc.defaultView) === null || _a === void 0 ? void 0 : _a.requestAnimationFrame(function () {
+                        if (!_this.editor) {
+                            return;
+                        }
                         cleanUpAndRestoreSelection(tempDiv_1);
-                        editor.focus();
-                        editor.setDOMSelection(selection);
+                        _this.editor.focus();
+                        _this.editor.setDOMSelection(selection);
                         if (isCut) {
-                            editor.formatContentModel(function (model, context) {
+                            _this.editor.formatContentModel(function (model, context) {
                                 if ((0, deleteSelection_1.deleteSelection)(model, [deleteEmptyList_1.deleteEmptyList], context)
@@ -182,2 +189,27 @@ .deleteResult == 'range') {
     }());
+    /**
+     * @internal
+     * Exported only for unit testing
+     */
+    function adjustSelectionForCopyCut(pasteModel) {
+        var selectionMarker;
+        var firstBlock;
+        var tableContext;
+        (0, iterateSelections_1.iterateSelections)(pasteModel, function (_, tableCtxt, block, segments) {
+            if (selectionMarker) {
+                if (tableCtxt != tableContext && (firstBlock === null || firstBlock === void 0 ? void 0 : firstBlock.segments.includes(selectionMarker))) {
+                    firstBlock.segments.splice(firstBlock.segments.indexOf(selectionMarker), 1);
+                }
+                return true;
+            }
+            var marker = segments === null || segments === void 0 ? void 0 : segments.find(function (segment) { return segment.segmentType == 'SelectionMarker'; });
+            if (!selectionMarker && marker) {
+                tableContext = tableCtxt;
+                firstBlock = (block === null || block === void 0 ? void 0 : block.blockType) == 'Paragraph' ? block : undefined;
+                selectionMarker = marker;
+            }
+            return false;
+        });
+    }
+    exports.adjustSelectionForCopyCut = adjustSelectionForCopyCut;
     function cleanUpAndRestoreSelection(tempDiv) {
@@ -184,0 +216,0 @@ tempDiv.style.backgroundColor = '';

lib-amd/corePlugin/DOMEventPlugin.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "tslib", "../constants/ChangeSource", "../publicApi/domUtils/eventUtils"], function (require, exports, tslib_1, ChangeSource_1, eventUtils_1) {
+define(["require", "exports", "../constants/ChangeSource", "../publicApi/domUtils/eventUtils", "roosterjs-content-model-dom"], function (require, exports, ChangeSource_1, eventUtils_1, roosterjs_content_model_dom_1) {
     "use strict";
@@ -24,9 +24,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
             var _this = this;
-            var _a;
             this.editor = null;
             this.disposer = null;
             this.onDragStart = function (e) {
-                var _a;
                 var dragEvent = e;
-                var element = (_a = _this.editor) === null || _a === void 0 ? void 0 : _a.getElementAtCursor('*', dragEvent.target);
+                var node = dragEvent.target;
+                var element = (0, roosterjs_content_model_dom_1.isNodeOfType)(node, 'ELEMENT_NODE') ? node : node.parentElement;
                 if (element && !element.isContentEditable) {
@@ -37,7 +36,10 @@ dragEvent.preventDefault();
             this.onDrop = function () {
-                var _a;
-                (_a = _this.editor) === null || _a === void 0 ? void 0 : _a.runAsync(function () {
+                var _a, _b;
+                var doc = (_a = _this.editor) === null || _a === void 0 ? void 0 : _a.getDocument();
+                (_b = doc === null || doc === void 0 ? void 0 : doc.defaultView) === null || _b === void 0 ? void 0 : _b.requestAnimationFrame(function () {
                     if (_this.editor) {
                         _this.editor.takeSnapshot();
-                        _this.editor.triggerContentChangedEvent(ChangeSource_1.ChangeSource.Drop);
+                        _this.editor.triggerPluginEvent(7 /* ContentChanged */, {
+                            source: ChangeSource_1.ChangeSource.Drop,
+                        });
                     }
@@ -88,27 +90,2 @@ });
             };
-            this.onContextMenuEvent = function (event) {
-                var _a, _b;
-                var allItems = [];
-                // TODO: Remove dependency to ContentSearcher
-                var searcher = (_a = _this.editor) === null || _a === void 0 ? void 0 : _a.getContentSearcherOfCursor();
-                var elementBeforeCursor = searcher === null || searcher === void 0 ? void 0 : searcher.getInlineElementBefore();
-                var eventTargetNode = event.target;
-                if (event.button != 2 && elementBeforeCursor) {
-                    eventTargetNode = elementBeforeCursor.getContainerNode();
-                }
-                _this.state.contextMenuProviders.forEach(function (provider) {
-                    var _a;
-                    var items = (_a = provider.getContextMenuItems(eventTargetNode)) !== 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));
-                    }
-                });
-                (_b = _this.editor) === null || _b === void 0 ? void 0 : _b.triggerPluginEvent(16 /* ContextMenu */, {
-                    rawEvent: event,
-                    items: allItems,
-                });
-            };
             this.onCompositionStart = function () {
@@ -127,3 +104,2 @@ _this.state.isInIME = true;
                 scrollContainer: options.scrollContainer || contentDiv,
-                contextMenuProviders: ((_a = options.plugins) === null || _a === void 0 ? void 0 : _a.filter(isContextMenuProvider)) || [],
                 mouseDownX: null,
@@ -155,3 +131,2 @@ mouseDownY: null,
                 mousedown: { beforeDispatch: this.onMouseDown },
-                contextmenu: { beforeDispatch: this.onContextMenuEvent },
                 // 3. IME state management
@@ -212,6 +187,2 @@ compositionstart: { beforeDispatch: this.onCompositionStart },
     }());
-    function isContextMenuProvider(source) {
-        var _a;
-        return !!((_a = source) === null || _a === void 0 ? void 0 : _a.getContextMenuItems);
-    }
     /**
@@ -218,0 +189,0 @@ * @internal

lib-amd/corePlugin/EntityPlugin.js

@@ -82,3 +82,3 @@ define(["require", "exports", "./utils/findAllEntities", "../publicApi/color/transformColor", "roosterjs-content-model-dom"], function (require, exports, findAllEntities_1, transformColor_1, roosterjs_content_model_dom_1) {
             if (isClicking && this.editor) {
-                while (node && this.editor.contains(node)) {
+                while (node && this.editor.isNodeInEditor(node)) {
                     if ((0, roosterjs_content_model_dom_1.isEntityElement)(node)) {
@@ -85,0 +85,0 @@ this.triggerEvent(editor, node, 'click', rawEvent);

lib-amd/corePlugin/SelectionPlugin.js

@@ -6,2 +6,3 @@ define(["require", "exports", "roosterjs-content-model-dom", "../publicApi/domUtils/eventUtils"], function (require, exports, roosterjs_content_model_dom_1, eventUtils_1) {
     var MouseMiddleButton = 1;
+    var MouseRightButton = 2;
     var SelectionPlugin = /** @class */ (function () {
@@ -33,3 +34,3 @@ function SelectionPlugin(options) {
             this.onMouseDownDocument = function (event) {
-                if (_this.editor && !_this.editor.contains(event.target)) {
+                if (_this.editor && !_this.editor.isNodeInEditor(event.target)) {
                     _this.onBlur();
@@ -107,3 +108,9 @@ }
                     selection = this.editor.getDOMSelection();
-                    if ((selection === null || selection === void 0 ? void 0 : selection.type) == 'image' && selection.image !== event.rawEvent.target) {
+                    if (event.rawEvent.button === MouseRightButton &&
+                        (image = this.getClickingImage(event.rawEvent)) &&
+                        image.isContentEditable) {
+                        this.selectImage(this.editor, image);
+                    }
+                    else if ((selection === null || selection === void 0 ? void 0 : selection.type) == 'image' &&
+                        selection.image !== event.rawEvent.target) {
                         this.selectBeforeImage(this.editor, selection.image);
@@ -129,8 +136,2 @@ }
                     break;
-                case 16 /* ContextMenu */:
-                    selection = this.editor.getDOMSelection();
-                    if ((image = this.getClickingImage(event.rawEvent)) &&
-                        ((selection === null || selection === void 0 ? void 0 : selection.type) != 'image' || selection.image != image)) {
-                        this.selectImage(this.editor, image);
-                    }
             }
@@ -137,0 +138,0 @@ };

lib-amd/corePlugin/utils/applyDefaultFormat.d.ts

@@ -1,2 +0,1 @@
-import type { IEditor } from 'roosterjs-editor-types';
 import type { ContentModelSegmentFormat, IStandaloneEditor } from 'roosterjs-content-model-types';
@@ -9,2 +8,2 @@ /**
  */
-export declare function applyDefaultFormat(editor: IStandaloneEditor & IEditor, defaultFormat: ContentModelSegmentFormat): void;
+export declare function applyDefaultFormat(editor: IStandaloneEditor, defaultFormat: ContentModelSegmentFormat): void;

lib-amd/corePlugin/utils/applyDefaultFormat.js

@@ -19,3 +19,3 @@ define(["require", "exports", "tslib", "../../publicApi/selection/deleteSelection", "roosterjs-content-model-dom"], function (require, exports, tslib_1, deleteSelection_1, roosterjs_content_model_dom_1) {
             var node = posContainer;
-            while (node && editor.contains(node)) {
+            while (node && editor.isNodeInEditor(node)) {
                 if ((0, roosterjs_content_model_dom_1.isNodeOfType)(node, 'ELEMENT_NODE')) {
@@ -22,0 +22,0 @@ if ((_c = node.getAttribute) === null || _c === void 0 ? void 0 : _c.call(node, 'style')) {

lib-amd/editor/createStandaloneEditorCore.d.ts

@@ -1,4 +0,4 @@
-import type { EditorPlugin } from 'roosterjs-editor-types';
-import type { StandaloneEditorCore, StandaloneEditorOptions, UnportedCoreApiMap, UnportedCorePluginState } from 'roosterjs-content-model-types';
+import type { StandaloneEditorCore, StandaloneEditorOptions } from 'roosterjs-content-model-types';
 /**
+ * @internal
  * A temporary function to create Standalone Editor core
@@ -8,3 +8,3 @@ * @param contentDiv Editor content DIV
  */
-export declare function createStandaloneEditorCore(contentDiv: HTMLDivElement, options: StandaloneEditorOptions, unportedCoreApiMap: UnportedCoreApiMap, unportedCorePluginState: UnportedCorePluginState, tempPlugins: EditorPlugin[]): StandaloneEditorCore;
+export declare function createStandaloneEditorCore(contentDiv: HTMLDivElement, options: StandaloneEditorOptions): StandaloneEditorCore;
 /**
@@ -14,1 +14,6 @@ * @internal export for test only
 export declare function defaultTrustHtmlHandler(html: string): string;
+/**
+ * @internal Export for test only
+ * A fallback function, always return original color
+ */
+export declare function getDarkColorFallback(color: string): string;

lib-amd/editor/createStandaloneEditorCore.js

@@ -1,6 +0,7 @@
-define(["require", "exports", "tslib", "../corePlugin/createStandaloneEditorCorePlugins", "./createStandaloneEditorDefaultSettings", "./DarkColorHandlerImpl", "./standaloneCoreApiMap"], function (require, exports, tslib_1, createStandaloneEditorCorePlugins_1, createStandaloneEditorDefaultSettings_1, DarkColorHandlerImpl_1, standaloneCoreApiMap_1) {
+define(["require", "exports", "tslib", "./DarkColorHandlerImpl", "../corePlugin/createStandaloneEditorCorePlugins", "./standaloneCoreApiMap", "./createStandaloneEditorDefaultSettings"], function (require, exports, tslib_1, DarkColorHandlerImpl_1, createStandaloneEditorCorePlugins_1, standaloneCoreApiMap_1, createStandaloneEditorDefaultSettings_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.defaultTrustHtmlHandler = exports.createStandaloneEditorCore = void 0;
+    exports.getDarkColorFallback = exports.defaultTrustHtmlHandler = exports.createStandaloneEditorCore = void 0;
     /**
+     * @internal
      * A temporary function to create Standalone Editor core
@@ -10,6 +11,6 @@ * @param contentDiv Editor content DIV
      */
-    function createStandaloneEditorCore(contentDiv, options, unportedCoreApiMap, unportedCorePluginState, tempPlugins) {
-        var _a;
+    function createStandaloneEditorCore(contentDiv, options) {
+        var _a, _b, _c;
         var corePlugins = (0, createStandaloneEditorCorePlugins_1.createStandaloneEditorCorePlugins)(options, contentDiv);
-        return (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({ contentDiv: contentDiv, api: (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, standaloneCoreApiMap_1.standaloneCoreApiMap), unportedCoreApiMap), options.coreApiOverride), originalApi: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, standaloneCoreApiMap_1.standaloneCoreApiMap), unportedCoreApiMap), plugins: (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([
+        return (0, tslib_1.__assign)((0, tslib_1.__assign)({ contentDiv: contentDiv, api: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, standaloneCoreApiMap_1.standaloneCoreApiMap), options.coreApiOverride), originalApi: (0, tslib_1.__assign)({}, standaloneCoreApiMap_1.standaloneCoreApiMap), plugins: (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([
                 corePlugins.cache,
@@ -21,13 +22,15 @@ corePlugins.format,
                 corePlugins.entity
-            ], (0, tslib_1.__read)(tempPlugins), false), [
+            ], (0, tslib_1.__read)(((_a = options.plugins) !== null && _a !== void 0 ? _a : []).filter(function (x) { return !!x; })), false), [
                 corePlugins.undo,
                 corePlugins.lifecycle,
-            ], false), environment: createEditorEnvironment(), darkColorHandler: new DarkColorHandlerImpl_1.DarkColorHandlerImpl(contentDiv, (_a = options.getDarkColor) !== null && _a !== void 0 ? _a : getDarkColorFallback), trustedHTMLHandler: options.trustedHTMLHandler || defaultTrustHtmlHandler }, (0, createStandaloneEditorDefaultSettings_1.createStandaloneEditorDefaultSettings)(options)), getPluginState(corePlugins)), unportedCorePluginState);
+            ], false), environment: createEditorEnvironment(contentDiv), darkColorHandler: (0, DarkColorHandlerImpl_1.createDarkColorHandler)(contentDiv, (_b = options.getDarkColor) !== null && _b !== void 0 ? _b : getDarkColorFallback), trustedHTMLHandler: options.trustedHTMLHandler || defaultTrustHtmlHandler, domToModelSettings: (0, createStandaloneEditorDefaultSettings_1.createDomToModelSettings)(options), modelToDomSettings: (0, createStandaloneEditorDefaultSettings_1.createModelToDomSettings)(options) }, getPluginState(corePlugins)), { disposeErrorHandler: options.disposeErrorHandler, zoomScale: ((_c = options.zoomScale) !== null && _c !== void 0 ? _c : -1) > 0 ? options.zoomScale : 1 });
     }
     exports.createStandaloneEditorCore = createStandaloneEditorCore;
-    function createEditorEnvironment() {
-        // It is ok to use global window here since the environment should always be the same for all windows in one session
-        var userAgent = window.navigator.userAgent;
+    function createEditorEnvironment(contentDiv) {
+        var _a, _b, _c;
+        var navigator = (_a = contentDiv.ownerDocument.defaultView) === null || _a === void 0 ? void 0 : _a.navigator;
+        var userAgent = (_b = navigator === null || navigator === void 0 ? void 0 : navigator.userAgent) !== null && _b !== void 0 ? _b : '';
+        var appVersion = (_c = navigator === null || navigator === void 0 ? void 0 : navigator.appVersion) !== null && _c !== void 0 ? _c : '';
         return {
-            isMac: window.navigator.appVersion.indexOf('Mac') != -1,
+            isMac: appVersion.indexOf('Mac') != -1,
             isAndroid: /android/i.test(userAgent),
@@ -58,7 +61,11 @@ isSafari: userAgent.indexOf('Safari') >= 0 &&
     }
-    // A fallback function, always return original color
+    /**
+     * @internal Export for test only
+     * A fallback function, always return original color
+     */
     function getDarkColorFallback(color) {
         return color;
     }
+    exports.getDarkColorFallback = getDarkColorFallback;
 });
 //# sourceMappingURL=createStandaloneEditorCore.js.map

lib-amd/editor/createStandaloneEditorDefaultSettings.d.ts

@@ -1,7 +0,13 @@
-import type { StandaloneEditorDefaultSettings, StandaloneEditorOptions } from 'roosterjs-content-model-types';
+import type { ContentModelSettings, DomToModelOption, DomToModelSettings, ModelToDomOption, ModelToDomSettings, StandaloneEditorOptions } from 'roosterjs-content-model-types';
 /**
  * @internal
- * Create default DOM and Content Model conversion settings for a standalone editor
+ * Create default DOM to Content Model conversion settings for a standalone editor
  * @param options The editor options
  */
-export declare function createStandaloneEditorDefaultSettings(options: StandaloneEditorOptions): StandaloneEditorDefaultSettings;
+export declare function createDomToModelSettings(options: StandaloneEditorOptions): ContentModelSettings<DomToModelOption, DomToModelSettings>;
+/**
+ * @internal
+ * Create default Content Model to DOM conversion settings for a standalone editor
+ * @param options The editor options
+ */
+export declare function createModelToDomSettings(options: StandaloneEditorOptions): ContentModelSettings<ModelToDomOption, ModelToDomSettings>;

lib-amd/editor/createStandaloneEditorDefaultSettings.js

 define(["require", "exports", "roosterjs-content-model-dom", "../metadata/updateListMetadata", "../override/tablePreProcessor"], function (require, exports, roosterjs_content_model_dom_1, updateListMetadata_1, tablePreProcessor_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.createStandaloneEditorDefaultSettings = void 0;
+    exports.createModelToDomSettings = exports.createDomToModelSettings = void 0;
     /**
      * @internal
-     * Create default DOM and Content Model conversion settings for a standalone editor
+     * Create default DOM to Content Model conversion settings for a standalone editor
      * @param options The editor options
      */
-    function createStandaloneEditorDefaultSettings(options) {
-        var defaultDomToModelOptions = [
-            {
-                processorOverride: {
-                    table: tablePreProcessor_1.tablePreProcessor,
-                },
+    function createDomToModelSettings(options) {
+        var _a;
+        var builtIn = {
+            processorOverride: {
+                table: tablePreProcessor_1.tablePreProcessor,
             },
-            options.defaultDomToModelOptions,
-        ];
-        var defaultModelToDomOptions = [
-            {
-                metadataAppliers: {
-                    listItem: updateListMetadata_1.listItemMetadataApplier,
-                    listLevel: updateListMetadata_1.listLevelMetadataApplier,
-                },
+        };
+        var customized = (_a = options.defaultDomToModelOptions) !== null && _a !== void 0 ? _a : {};
+        return {
+            builtIn: builtIn,
+            customized: customized,
+            calculated: (0, roosterjs_content_model_dom_1.createDomToModelConfig)([builtIn, customized]),
+        };
+    }
+    exports.createDomToModelSettings = createDomToModelSettings;
+    /**
+     * @internal
+     * Create default Content Model to DOM conversion settings for a standalone editor
+     * @param options The editor options
+     */
+    function createModelToDomSettings(options) {
+        var _a;
+        var builtIn = {
+            metadataAppliers: {
+                listItem: updateListMetadata_1.listItemMetadataApplier,
+                listLevel: updateListMetadata_1.listLevelMetadataApplier,
             },
-            options.defaultModelToDomOptions,
-        ];
+        };
+        var customized = (_a = options.defaultModelToDomOptions) !== null && _a !== void 0 ? _a : {};
         return {
-            defaultDomToModelOptions: defaultDomToModelOptions,
-            defaultModelToDomOptions: defaultModelToDomOptions,
-            defaultDomToModelConfig: (0, roosterjs_content_model_dom_1.createDomToModelConfig)(defaultDomToModelOptions),
-            defaultModelToDomConfig: (0, roosterjs_content_model_dom_1.createModelToDomConfig)(defaultModelToDomOptions),
+            builtIn: builtIn,
+            customized: customized,
+            calculated: (0, roosterjs_content_model_dom_1.createModelToDomConfig)([builtIn, customized]),
         };
     }
-    exports.createStandaloneEditorDefaultSettings = createStandaloneEditorDefaultSettings;
+    exports.createModelToDomSettings = createModelToDomSettings;
 });
 //# sourceMappingURL=createStandaloneEditorDefaultSettings.js.map

lib-amd/editor/DarkColorHandlerImpl.d.ts

@@ -47,2 +47,11 @@ import type { ColorKeyAndValue, DarkColorHandler, ModeIndependentColor } from 'roosterjs-editor-types';
     transformElementColor(element: HTMLElement, fromDarkMode: boolean, toDarkMode: boolean): void;
+    /**
+     * Parse color string to r/g/b value.
+     * If the given color is not in a recognized format, return null
+     */
+    private parseColor;
 }
+/**
+ * @internal
+ */
+export declare function createDarkColorHandler(contentDiv: HTMLElement, getDarkColor: (color: string) => string): DarkColorHandler;

lib-amd/editor/DarkColorHandlerImpl.js

@@ -1,6 +0,6 @@
-define(["require", "exports", "roosterjs-editor-dom"], function (require, exports, roosterjs_editor_dom_1) {
+define(["require", "exports", "roosterjs-content-model-dom"], function (require, exports, roosterjs_content_model_dom_1) {
     "use strict";
     var _a, _b;
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.DarkColorHandlerImpl = void 0;
+    exports.createDarkColorHandler = exports.DarkColorHandlerImpl = void 0;
     var VARIABLE_REGEX = /^\s*var\(\s*(\-\-[a-zA-Z0-9\-_]+)\s*(?:,\s*(.*))?\)\s*$/;
@@ -24,2 +24,6 @@ var VARIABLE_PREFIX = 'var(';
     ];
+    var HEX3_REGEX = /^#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])$/;
+    var HEX6_REGEX = /^#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})$/;
+    var RGB_REGEX = /^rgb\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\s*\)$/;
+    var RGBA_REGEX = /^rgba\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\s*\)$/;
     /**
@@ -75,3 +79,3 @@ * @internal
             var _this = this;
-            (0, roosterjs_editor_dom_1.getObjectKeys)(this.knownColors).forEach(function (key) { return _this.contentDiv.style.removeProperty(key); });
+            (0, roosterjs_content_model_dom_1.getObjectKeys)(this.knownColors).forEach(function (key) { return _this.contentDiv.style.removeProperty(key); });
             this.knownColors = {};
@@ -124,6 +128,6 @@ };
             var _this = this;
-            var rgbSearch = (0, roosterjs_editor_dom_1.parseColor)(darkColor);
+            var rgbSearch = this.parseColor(darkColor);
             if (rgbSearch) {
-                var key = (0, roosterjs_editor_dom_1.getObjectKeys)(this.knownColors).find(function (key) {
-                    var rgbCurrent = (0, roosterjs_editor_dom_1.parseColor)(_this.knownColors[key].darkModeColor);
+                var key = (0, roosterjs_content_model_dom_1.getObjectKeys)(this.knownColors).find(function (key) {
+                    var rgbCurrent = _this.parseColor(_this.knownColors[key].darkModeColor);
                     return (rgbCurrent &&
@@ -151,13 +155,44 @@ rgbCurrent[0] == rgbSearch[0] &&
                     element.getAttribute(names[1 /* HtmlColor */]), !!fromDarkMode).lightModeColor;
-                element.style.setProperty(names[0 /* CssColor */], null);
+                var transformedColor = color && color != 'inherit' ? _this.registerColor(color, !!toDarkMode) : null;
+                element.style.setProperty(names[0 /* CssColor */], transformedColor);
                 element.removeAttribute(names[1 /* HtmlColor */]);
-                if (color && color != 'inherit') {
-                    (0, roosterjs_editor_dom_1.setColor)(element, color, i != 0, toDarkMode, false /*shouldAdaptFontColor*/, _this);
-                }
             });
         };
+        /**
+         * Parse color string to r/g/b value.
+         * If the given color is not in a recognized format, return null
+         */
+        DarkColorHandlerImpl.prototype.parseColor = function (color) {
+            color = (color || '').trim();
+            var match;
+            if ((match = color.match(HEX3_REGEX))) {
+                return [
+                    parseInt(match[1] + match[1], 16),
+                    parseInt(match[2] + match[2], 16),
+                    parseInt(match[3] + match[3], 16),
+                ];
+            }
+            else if ((match = color.match(HEX6_REGEX))) {
+                return [parseInt(match[1], 16), parseInt(match[2], 16), parseInt(match[3], 16)];
+            }
+            else if ((match = color.match(RGB_REGEX) || color.match(RGBA_REGEX))) {
+                return [parseInt(match[1]), parseInt(match[2]), parseInt(match[3])];
+            }
+            else {
+                // CSS color names such as red, green is not included for now.
+                // If need, we can add those colors from https://www.w3.org/wiki/CSS/Properties/color/keywords
+                return null;
+            }
+        };
         return DarkColorHandlerImpl;
     }());
     exports.DarkColorHandlerImpl = DarkColorHandlerImpl;
+    /**
+     * @internal
+     */
+    function createDarkColorHandler(contentDiv, getDarkColor) {
+        return new DarkColorHandlerImpl(contentDiv, getDarkColor);
+    }
+    exports.createDarkColorHandler = createDarkColorHandler;
 });
 //# sourceMappingURL=DarkColorHandlerImpl.js.map

lib-amd/editor/standaloneCoreApiMap.d.ts

@@ -1,2 +0,2 @@
-import type { PortedCoreApiMap } from 'roosterjs-content-model-types';
+import type { StandaloneCoreApiMap } from 'roosterjs-content-model-types';
 /**
@@ -6,2 +6,2 @@ * @internal
  */
-export declare const standaloneCoreApiMap: PortedCoreApiMap;
+export declare const standaloneCoreApiMap: StandaloneCoreApiMap;

lib-amd/editor/standaloneCoreApiMap.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "../coreApi/addUndoSnapshot", "../coreApi/attachDomEvent", "../coreApi/createContentModel", "../coreApi/createEditorContext", "../coreApi/focus", "../coreApi/formatContentModel", "../coreApi/getDOMSelection", "../coreApi/getVisibleViewport", "../coreApi/hasFocus", "../coreApi/restoreUndoSnapshot", "../coreApi/setContentModel", "../coreApi/setDOMSelection", "../coreApi/switchShadowEdit", "../coreApi/triggerEvent"], function (require, exports, addUndoSnapshot_1, attachDomEvent_1, createContentModel_1, createEditorContext_1, focus_1, formatContentModel_1, getDOMSelection_1, getVisibleViewport_1, hasFocus_1, restoreUndoSnapshot_1, setContentModel_1, setDOMSelection_1, switchShadowEdit_1, triggerEvent_1) {
+define(["require", "exports", "../coreApi/addUndoSnapshot", "../coreApi/attachDomEvent", "../coreApi/createContentModel", "../coreApi/createEditorContext", "../coreApi/focus", "../coreApi/formatContentModel", "../coreApi/getDOMSelection", "../coreApi/getVisibleViewport", "../coreApi/hasFocus", "../coreApi/paste", "../coreApi/restoreUndoSnapshot", "../coreApi/setContentModel", "../coreApi/setDOMSelection", "../coreApi/switchShadowEdit", "../coreApi/triggerEvent"], function (require, exports, addUndoSnapshot_1, attachDomEvent_1, createContentModel_1, createEditorContext_1, focus_1, formatContentModel_1, getDOMSelection_1, getVisibleViewport_1, hasFocus_1, paste_1, restoreUndoSnapshot_1, setContentModel_1, setDOMSelection_1, switchShadowEdit_1, triggerEvent_1) {
     "use strict";
@@ -24,4 +24,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
         triggerEvent: triggerEvent_1.triggerEvent,
+        paste: paste_1.paste,
     };
 });
 //# sourceMappingURL=standaloneCoreApiMap.js.map

lib-amd/index.d.ts

 export { CachedElementHandler, CloneModelOptions, cloneModel } from './publicApi/model/cloneModel';
-export { paste } from './publicApi/model/paste';
 export { mergeModel, MergeModelOption } from './publicApi/model/mergeModel';
@@ -39,3 +38,3 @@ export { isBlockGroupOfType } from './publicApi/model/isBlockGroupOfType';
 export { TableBorderFormat } from './constants/TableBorderFormat';
-export { createStandaloneEditorCore } from './editor/createStandaloneEditorCore';
+export { StandaloneEditor } from './editor/StandaloneEditor';
 export { createSnapshotsManager } from './editor/SnapshotsManagerImpl';

lib-amd/index.js

@@ -1,7 +0,6 @@
-define(["require", "exports", "./publicApi/model/cloneModel", "./publicApi/model/paste", "./publicApi/model/mergeModel", "./publicApi/model/isBlockGroupOfType", "./publicApi/model/getClosestAncestorBlockGroupIndex", "./publicApi/model/isBold", "./publicApi/model/createModelFromHtml", "./publicApi/selection/iterateSelections", "./publicApi/selection/getSelectionRootNode", "./publicApi/selection/deleteSelection", "./publicApi/selection/deleteSegment", "./publicApi/selection/deleteBlock", "./publicApi/selection/hasSelectionInBlock", "./publicApi/selection/hasSelectionInSegment", "./publicApi/selection/hasSelectionInBlockGroup", "./publicApi/selection/collectSelections", "./publicApi/selection/setSelection", "./publicApi/table/applyTableFormat", "./publicApi/table/normalizeTable", "./publicApi/table/setTableCellBackgroundColor", "./publicApi/table/getSelectedCells", "./publicApi/domUtils/eventUtils", "./publicApi/domUtils/borderValues", "./publicApi/domUtils/stringUtil", "./publicApi/domUtils/tableCellUtils", "./publicApi/domUtils/getSegmentTextFormat", "./publicApi/domUtils/readFile", "./publicApi/undo/undo", "./publicApi/undo/redo", "./publicApi/color/transformColor", "./metadata/updateImageMetadata", "./metadata/updateTableCellMetadata", "./metadata/updateTableMetadata", "./metadata/updateListMetadata", "./constants/ChangeSource", "./constants/BulletListType", "./constants/NumberingListType", "./constants/TableBorderFormat", "./editor/createStandaloneEditorCore", "./editor/SnapshotsManagerImpl"], function (require, exports, cloneModel_1, paste_1, mergeModel_1, isBlockGroupOfType_1, getClosestAncestorBlockGroupIndex_1, isBold_1, createModelFromHtml_1, iterateSelections_1, getSelectionRootNode_1, deleteSelection_1, deleteSegment_1, deleteBlock_1, hasSelectionInBlock_1, hasSelectionInSegment_1, hasSelectionInBlockGroup_1, collectSelections_1, setSelection_1, applyTableFormat_1, normalizeTable_1, setTableCellBackgroundColor_1, getSelectedCells_1, eventUtils_1, borderValues_1, stringUtil_1, tableCellUtils_1, getSegmentTextFormat_1, readFile_1, undo_1, redo_1, transformColor_1, updateImageMetadata_1, updateTableCellMetadata_1, updateTableMetadata_1, updateListMetadata_1, ChangeSource_1, BulletListType_1, NumberingListType_1, TableBorderFormat_1, createStandaloneEditorCore_1, SnapshotsManagerImpl_1) {
+define(["require", "exports", "./publicApi/model/cloneModel", "./publicApi/model/mergeModel", "./publicApi/model/isBlockGroupOfType", "./publicApi/model/getClosestAncestorBlockGroupIndex", "./publicApi/model/isBold", "./publicApi/model/createModelFromHtml", "./publicApi/selection/iterateSelections", "./publicApi/selection/getSelectionRootNode", "./publicApi/selection/deleteSelection", "./publicApi/selection/deleteSegment", "./publicApi/selection/deleteBlock", "./publicApi/selection/hasSelectionInBlock", "./publicApi/selection/hasSelectionInSegment", "./publicApi/selection/hasSelectionInBlockGroup", "./publicApi/selection/collectSelections", "./publicApi/selection/setSelection", "./publicApi/table/applyTableFormat", "./publicApi/table/normalizeTable", "./publicApi/table/setTableCellBackgroundColor", "./publicApi/table/getSelectedCells", "./publicApi/domUtils/eventUtils", "./publicApi/domUtils/borderValues", "./publicApi/domUtils/stringUtil", "./publicApi/domUtils/tableCellUtils", "./publicApi/domUtils/getSegmentTextFormat", "./publicApi/domUtils/readFile", "./publicApi/undo/undo", "./publicApi/undo/redo", "./publicApi/color/transformColor", "./metadata/updateImageMetadata", "./metadata/updateTableCellMetadata", "./metadata/updateTableMetadata", "./metadata/updateListMetadata", "./constants/ChangeSource", "./constants/BulletListType", "./constants/NumberingListType", "./constants/TableBorderFormat", "./editor/StandaloneEditor", "./editor/SnapshotsManagerImpl"], function (require, exports, cloneModel_1, mergeModel_1, isBlockGroupOfType_1, getClosestAncestorBlockGroupIndex_1, isBold_1, createModelFromHtml_1, iterateSelections_1, getSelectionRootNode_1, deleteSelection_1, deleteSegment_1, deleteBlock_1, hasSelectionInBlock_1, hasSelectionInSegment_1, hasSelectionInBlockGroup_1, collectSelections_1, setSelection_1, applyTableFormat_1, normalizeTable_1, setTableCellBackgroundColor_1, getSelectedCells_1, eventUtils_1, borderValues_1, stringUtil_1, tableCellUtils_1, getSegmentTextFormat_1, readFile_1, undo_1, redo_1, transformColor_1, updateImageMetadata_1, updateTableCellMetadata_1, updateTableMetadata_1, updateListMetadata_1, ChangeSource_1, BulletListType_1, NumberingListType_1, TableBorderFormat_1, StandaloneEditor_1, SnapshotsManagerImpl_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.createSnapshotsManager = exports.createStandaloneEditorCore = exports.TableBorderFormat = exports.NumberingListType = exports.BulletListType = exports.ChangeSource = exports.getListStyleTypeFromString = exports.updateListMetadata = exports.updateTableMetadata = exports.updateTableCellMetadata = exports.updateImageMetadata = exports.transformColor = exports.redo = exports.undo = exports.readFile = exports.getSegmentTextFormat = exports.createTableRanges = exports.parseTableCells = exports.normalizeText = exports.isSpace = exports.isPunctuation = exports.extractBorderValues = exports.combineBorderValue = exports.isModifierKey = exports.isCharacterValue = exports.getSelectedCells = exports.setTableCellBackgroundColor = exports.normalizeTable = exports.applyTableFormat = exports.setSelection = exports.getSelectedSegmentsAndParagraphs = exports.getSelectedSegments = exports.getSelectedParagraphs = exports.getOperationalBlocks = exports.getFirstSelectedTable = exports.getFirstSelectedListItem = exports.hasSelectionInBlockGroup = exports.hasSelectionInSegment = exports.hasSelectionInBlock = exports.deleteBlock = exports.deleteSegment = exports.deleteSelection = exports.getSelectionRootNode = exports.iterateSelections = exports.createModelFromHtml = exports.isBold = exports.getClosestAncestorBlockGroupIndex = exports.isBlockGroupOfType = exports.mergeModel = exports.paste = exports.cloneModel = void 0;
+    exports.createSnapshotsManager = exports.StandaloneEditor = exports.TableBorderFormat = exports.NumberingListType = exports.BulletListType = exports.ChangeSource = exports.getListStyleTypeFromString = exports.updateListMetadata = exports.updateTableMetadata = exports.updateTableCellMetadata = exports.updateImageMetadata = exports.transformColor = exports.redo = exports.undo = exports.readFile = exports.getSegmentTextFormat = exports.createTableRanges = exports.parseTableCells = exports.normalizeText = exports.isSpace = exports.isPunctuation = exports.extractBorderValues = exports.combineBorderValue = exports.isModifierKey = exports.isCharacterValue = exports.getSelectedCells = exports.setTableCellBackgroundColor = exports.normalizeTable = exports.applyTableFormat = exports.setSelection = exports.getSelectedSegmentsAndParagraphs = exports.getSelectedSegments = exports.getSelectedParagraphs = exports.getOperationalBlocks = exports.getFirstSelectedTable = exports.getFirstSelectedListItem = exports.hasSelectionInBlockGroup = exports.hasSelectionInSegment = exports.hasSelectionInBlock = exports.deleteBlock = exports.deleteSegment = exports.deleteSelection = exports.getSelectionRootNode = exports.iterateSelections = exports.createModelFromHtml = exports.isBold = exports.getClosestAncestorBlockGroupIndex = exports.isBlockGroupOfType = exports.mergeModel = exports.cloneModel = void 0;
     Object.defineProperty(exports, "cloneModel", { enumerable: true, get: function () { return cloneModel_1.cloneModel; } });
-    Object.defineProperty(exports, "paste", { enumerable: true, get: function () { return paste_1.paste; } });
     Object.defineProperty(exports, "mergeModel", { enumerable: true, get: function () { return mergeModel_1.mergeModel; } });
@@ -54,5 +53,5 @@ Object.defineProperty(exports, "isBlockGroupOfType", { enumerable: true, get: function () { return isBlockGroupOfType_1.isBlockGroupOfType; } });
     Object.defineProperty(exports, "TableBorderFormat", { enumerable: true, get: function () { return TableBorderFormat_1.TableBorderFormat; } });
-    Object.defineProperty(exports, "createStandaloneEditorCore", { enumerable: true, get: function () { return createStandaloneEditorCore_1.createStandaloneEditorCore; } });
+    Object.defineProperty(exports, "StandaloneEditor", { enumerable: true, get: function () { return StandaloneEditor_1.StandaloneEditor; } });
     Object.defineProperty(exports, "createSnapshotsManager", { enumerable: true, get: function () { return SnapshotsManagerImpl_1.createSnapshotsManager; } });
 });
 //# sourceMappingURL=index.js.map

lib-amd/publicApi/selection/deleteSegment.js

@@ -16,3 +16,3 @@ define(["require", "exports", "../../modelApi/edit/deleteSingleChar", "roosterjs-content-model-dom", "../domUtils/stringUtil"], function (require, exports, deleteSingleChar_1, roosterjs_content_model_dom_1, stringUtil_1) {
         var index = segments.indexOf(segmentToDelete);
-        var preserveWhiteSpace = (0, roosterjs_content_model_dom_1.isWhiteSpacePreserved)(paragraph);
+        var preserveWhiteSpace = (0, roosterjs_content_model_dom_1.isWhiteSpacePreserved)(paragraph.format.whiteSpace);
         var isForward = direction == 'forward';
@@ -19,0 +19,0 @@ var isBackward = direction == 'backward';

lib-mjs/coreApi/createContentModel.js

@@ -1,2 +0,1 @@
-import { __read, __spreadArray } from "tslib";
 import { cloneModel } from '../publicApi/model/cloneModel';
@@ -33,5 +32,6 @@ import { createDomToModelContext, createDomToModelContextWithConfig, domToContentModel, } from 'roosterjs-content-model-dom';
     var domToModelContext = option
-        ? createDomToModelContext.apply(void 0, __spreadArray(__spreadArray([editorContext], __read((core.defaultDomToModelOptions || [])), false), [option], false)) : createDomToModelContextWithConfig(core.defaultDomToModelConfig, editorContext);
+        ? createDomToModelContext(editorContext, core.domToModelSettings.builtIn, core.domToModelSettings.customized, option)
+        : createDomToModelContextWithConfig(core.domToModelSettings.calculated, editorContext);
     return domToContentModel(core.contentDiv, domToModelContext, selection);
 }
 //# sourceMappingURL=createContentModel.js.map

lib-mjs/coreApi/setContentModel.js

@@ -1,2 +0,1 @@
-import { __read, __spreadArray } from "tslib";
 import { contentModelToDom, createModelToDomContext, createModelToDomContextWithConfig, } from 'roosterjs-content-model-dom';
@@ -13,3 +12,4 @@ /**
     var modelToDomContext = option
-        ? createModelToDomContext.apply(void 0, __spreadArray(__spreadArray([editorContext], __read((core.defaultModelToDomOptions || [])), false), [option], false)) : createModelToDomContextWithConfig(core.defaultModelToDomConfig, editorContext);
+        ? createModelToDomContext(editorContext, core.modelToDomSettings.builtIn, core.modelToDomSettings.customized, option)
+        : createModelToDomContextWithConfig(core.modelToDomSettings.calculated, editorContext);
     var selection = contentModelToDom(core.contentDiv.ownerDocument, core.contentDiv, model, modelToDomContext, onNodeCreated);
@@ -16,0 +16,0 @@ if (!core.lifecycle.shadowEditFragment) {

lib-mjs/coreApi/setDOMSelection.js

@@ -8,3 +8,4 @@ import { addRangeToSelection } from '../corePlugin/utils/addRangeToSelection';
 var DEFAULT_SELECTION_BORDER_COLOR = '#DB626C';
-var TABLE_CSS_RULE = '{background-color: rgb(198,198,198) !important; caret-color: transparent}';
+var TABLE_CSS_RULE = '{background-color: rgb(198,198,198) !important;}';
+var CARET_CSS_RULE = '{caret-color: transparent}';
 var MAX_RULE_SELECTOR_LENGTH = 9000;
@@ -28,3 +29,3 @@ /**
                 var image = selection.image;
-                selectionRules = buildImageCSS(rootSelector + ' #' + addUniqueId(image, IMAGE_ID), core.selection.imageSelectionBorderColor);
+                selectionRules = buildImageCSS(rootSelector, addUniqueId(image, IMAGE_ID), core.selection.imageSelectionBorderColor);
                 core.selection.selection = selection;
@@ -35,3 +36,3 @@ setRangeSelection(doc, image);
                 var table = selection.table, firstColumn = selection.firstColumn, firstRow = selection.firstRow;
-                selectionRules = buildTableCss(rootSelector + ' #' + addUniqueId(table, TABLE_ID), selection);
+                selectionRules = buildTableCss(rootSelector, addUniqueId(table, TABLE_ID), selection);
                 core.selection.selection = selection;
@@ -71,9 +72,10 @@ setRangeSelection(doc, (_b = table.rows[firstRow]) === null || _b === void 0 ? void 0 : _b.cells[firstColumn]);
 };
-function buildImageCSS(rootSelector, borderColor) {
+function buildImageCSS(editorSelector, imageId, borderColor) {
     var color = borderColor || DEFAULT_SELECTION_BORDER_COLOR;
     return [
-        rootSelector + " {outline-style:auto!important;outline-color:" + color + "!important;caret-color:transparent;}",
+        editorSelector + " #" + imageId + " {outline-style:auto!important;outline-color:" + color + "!important;}",
+        editorSelector + " " + CARET_CSS_RULE,
     ];
 }
-function buildTableCss(rootSelector, selection) {
+function buildTableCss(editorSelector, tableId, selection) {
     var _a, _b, _c;
@@ -86,6 +88,7 @@ var firstColumn = selection.firstColumn, firstRow = selection.firstRow, lastColumn = selection.lastColumn, lastRow = selection.lastRow;
         lastColumn == ((_b = (_a = cells[lastRow]) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) - 1;
+    var rootSelector = editorSelector + ' #' + tableId;
     var selectors = isAllTableSelected
         ? [rootSelector, rootSelector + " *"]
         : handleTableSelected(rootSelector, selection, cells);
-    var cssRules = [];
+    var cssRules = [editorSelector + " " + CARET_CSS_RULE];
     var currentRules = '';
@@ -92,0 +95,0 @@ for (var i = 0; i < selectors.length; i++) {

lib-mjs/corePlugin/ContentModelCopyPastePlugin.d.ts

@@ -1,2 +0,2 @@
-import type { CopyPastePluginState, ContentModelTable, OnNodeCreated, StandaloneEditorOptions } from 'roosterjs-content-model-types';
+import type { CopyPastePluginState, ContentModelTable, OnNodeCreated, StandaloneEditorOptions, ContentModelDocument } from 'roosterjs-content-model-types';
 import type { PluginWithState } from 'roosterjs-editor-types';
@@ -7,2 +7,7 @@ /**
  */
+export declare function adjustSelectionForCopyCut(pasteModel: ContentModelDocument): void;
+/**
+ * @internal
+ * Exported only for unit testing
+ */
 export declare const onNodeCreated: OnNodeCreated;
@@ -9,0 +14,0 @@ /**

lib-mjs/corePlugin/ContentModelCopyPastePlugin.js

@@ -10,3 +10,2 @@ import { __assign } from "tslib";
 import { iterateSelections } from '../publicApi/selection/iterateSelections';
-import { paste } from '../publicApi/model/paste';
 import { transformColor } from '../publicApi/color/transformColor';
@@ -34,3 +33,3 @@ import { contentModelToDom, createModelToDomContext, isElementOfType, isNodeOfType, moveChildNodes, normalizeContentModel, toArray, wrap, } from 'roosterjs-content-model-dom';
                         if (!editor_1.isDisposed()) {
-                            paste(editor_1, clipboardData);
+                            editor_1.pasteFromClipboard(clipboardData);
                         }
@@ -104,2 +103,4 @@ });
     ContentModelCopyPastePlugin.prototype.onCutCopy = function (event, isCut) {
+        var _this = this;
+        var _a;
         if (!this.editor) {
@@ -111,3 +112,3 @@ return;
         if (selection && (selection.type != 'range' || !selection.range.collapsed)) {
-            var model = this.editor.createContentModel();
+            var model = this.editor.createContentModel(undefined /* option */, selection);
             var cacheProcessor = this.editor.isDarkMode() ? this.processEntityColor : false;
@@ -126,2 +127,5 @@ var pasteModel = cloneModel(model, {
             }
+            else if (selection.type === 'range') {
+                adjustSelectionForCopyCut(pasteModel);
+            }
             var tempDiv_1 = this.getTempDiv(this.editor.getDocument());
@@ -142,9 +146,11 @@ var selectionForCopy = contentModelToDom(tempDiv_1.ownerDocument, tempDiv_1, pasteModel, createModelToDomContext(), onNodeCreated);
                 }
-                this.editor.runAsync(function (e) {
-                    var editor = e;
+                (_a = doc.defaultView) === null || _a === void 0 ? void 0 : _a.requestAnimationFrame(function () {
+                    if (!_this.editor) {
+                        return;
+                    }
                     cleanUpAndRestoreSelection(tempDiv_1);
-                    editor.focus();
-                    editor.setDOMSelection(selection);
+                    _this.editor.focus();
+                    _this.editor.setDOMSelection(selection);
                     if (isCut) {
-                        editor.formatContentModel(function (model, context) {
+                        _this.editor.formatContentModel(function (model, context) {
                             if (deleteSelection(model, [deleteEmptyList], context)
@@ -191,2 +197,26 @@ .deleteResult == 'range') {
 }());
+/**
+ * @internal
+ * Exported only for unit testing
+ */
+export function adjustSelectionForCopyCut(pasteModel) {
+    var selectionMarker;
+    var firstBlock;
+    var tableContext;
+    iterateSelections(pasteModel, function (_, tableCtxt, block, segments) {
+        if (selectionMarker) {
+            if (tableCtxt != tableContext && (firstBlock === null || firstBlock === void 0 ? void 0 : firstBlock.segments.includes(selectionMarker))) {
+                firstBlock.segments.splice(firstBlock.segments.indexOf(selectionMarker), 1);
+            }
+            return true;
+        }
+        var marker = segments === null || segments === void 0 ? void 0 : segments.find(function (segment) { return segment.segmentType == 'SelectionMarker'; });
+        if (!selectionMarker && marker) {
+            tableContext = tableCtxt;
+            firstBlock = (block === null || block === void 0 ? void 0 : block.blockType) == 'Paragraph' ? block : undefined;
+            selectionMarker = marker;
+        }
+        return false;
+    });
+}
 function cleanUpAndRestoreSelection(tempDiv) {
@@ -193,0 +223,0 @@ tempDiv.style.backgroundColor = '';

lib-mjs/corePlugin/DOMEventPlugin.js

@@ -1,4 +0,4 @@
-import { __read, __spreadArray } from "tslib";
 import { ChangeSource } from '../constants/ChangeSource';
 import { isCharacterValue, isCursorMovingKey } from '../publicApi/domUtils/eventUtils';
+import { isNodeOfType } from 'roosterjs-content-model-dom';
 /**
@@ -23,9 +23,8 @@ * DOMEventPlugin handles customized DOM events, including:
         var _this = this;
-        var _a;
         this.editor = null;
         this.disposer = null;
         this.onDragStart = function (e) {
-            var _a;
             var dragEvent = e;
-            var element = (_a = _this.editor) === null || _a === void 0 ? void 0 : _a.getElementAtCursor('*', dragEvent.target);
+            var node = dragEvent.target;
+            var element = isNodeOfType(node, 'ELEMENT_NODE') ? node : node.parentElement;
             if (element && !element.isContentEditable) {
@@ -36,7 +35,10 @@ dragEvent.preventDefault();
         this.onDrop = function () {
-            var _a;
-            (_a = _this.editor) === null || _a === void 0 ? void 0 : _a.runAsync(function () {
+            var _a, _b;
+            var doc = (_a = _this.editor) === null || _a === void 0 ? void 0 : _a.getDocument();
+            (_b = doc === null || doc === void 0 ? void 0 : doc.defaultView) === null || _b === void 0 ? void 0 : _b.requestAnimationFrame(function () {
                 if (_this.editor) {
                     _this.editor.takeSnapshot();
-                    _this.editor.triggerContentChangedEvent(ChangeSource.Drop);
+                    _this.editor.triggerPluginEvent(7 /* ContentChanged */, {
+                        source: ChangeSource.Drop,
+                    });
                 }
@@ -87,27 +89,2 @@ });
         };
-        this.onContextMenuEvent = function (event) {
-            var _a, _b;
-            var allItems = [];
-            // TODO: Remove dependency to ContentSearcher
-            var searcher = (_a = _this.editor) === null || _a === void 0 ? void 0 : _a.getContentSearcherOfCursor();
-            var elementBeforeCursor = searcher === null || searcher === void 0 ? void 0 : searcher.getInlineElementBefore();
-            var eventTargetNode = event.target;
-            if (event.button != 2 && elementBeforeCursor) {
-                eventTargetNode = elementBeforeCursor.getContainerNode();
-            }
-            _this.state.contextMenuProviders.forEach(function (provider) {
-                var _a;
-                var items = (_a = provider.getContextMenuItems(eventTargetNode)) !== 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, __spreadArray([], __read(items), false));
-                }
-            });
-            (_b = _this.editor) === null || _b === void 0 ? void 0 : _b.triggerPluginEvent(16 /* ContextMenu */, {
-                rawEvent: event,
-                items: allItems,
-            });
-        };
         this.onCompositionStart = function () {
@@ -126,3 +103,2 @@ _this.state.isInIME = true;
             scrollContainer: options.scrollContainer || contentDiv,
-            contextMenuProviders: ((_a = options.plugins) === null || _a === void 0 ? void 0 : _a.filter(isContextMenuProvider)) || [],
             mouseDownX: null,
@@ -154,3 +130,2 @@ mouseDownY: null,
             mousedown: { beforeDispatch: this.onMouseDown },
-            contextmenu: { beforeDispatch: this.onContextMenuEvent },
             // 3. IME state management
@@ -211,6 +186,2 @@ compositionstart: { beforeDispatch: this.onCompositionStart },
 }());
-function isContextMenuProvider(source) {
-    var _a;
-    return !!((_a = source) === null || _a === void 0 ? void 0 : _a.getContextMenuItems);
-}
 /**
@@ -217,0 +188,0 @@ * @internal

lib-mjs/corePlugin/EntityPlugin.js

@@ -81,3 +81,3 @@ import { findAllEntities } from './utils/findAllEntities';
         if (isClicking && this.editor) {
-            while (node && this.editor.contains(node)) {
+            while (node && this.editor.isNodeInEditor(node)) {
                 if (isEntityElement(node)) {
@@ -84,0 +84,0 @@ this.triggerEvent(editor, node, 'click', rawEvent);

lib-mjs/corePlugin/SelectionPlugin.js

 import { isElementOfType, isNodeOfType, toArray } from 'roosterjs-content-model-dom';
 import { isModifierKey } from '../publicApi/domUtils/eventUtils';
 var MouseMiddleButton = 1;
+var MouseRightButton = 2;
 var SelectionPlugin = /** @class */ (function () {
@@ -30,3 +31,3 @@ function SelectionPlugin(options) {
         this.onMouseDownDocument = function (event) {
-            if (_this.editor && !_this.editor.contains(event.target)) {
+            if (_this.editor && !_this.editor.isNodeInEditor(event.target)) {
                 _this.onBlur();
@@ -104,3 +105,9 @@ }
                 selection = this.editor.getDOMSelection();
-                if ((selection === null || selection === void 0 ? void 0 : selection.type) == 'image' && selection.image !== event.rawEvent.target) {
+                if (event.rawEvent.button === MouseRightButton &&
+                    (image = this.getClickingImage(event.rawEvent)) &&
+                    image.isContentEditable) {
+                    this.selectImage(this.editor, image);
+                }
+                else if ((selection === null || selection === void 0 ? void 0 : selection.type) == 'image' &&
+                    selection.image !== event.rawEvent.target) {
                     this.selectBeforeImage(this.editor, selection.image);
@@ -126,8 +133,2 @@ }
                 break;
-            case 16 /* ContextMenu */:
-                selection = this.editor.getDOMSelection();
-                if ((image = this.getClickingImage(event.rawEvent)) &&
-                    ((selection === null || selection === void 0 ? void 0 : selection.type) != 'image' || selection.image != image)) {
-                    this.selectImage(this.editor, image);
-                }
         }
@@ -134,0 +135,0 @@ };

lib-mjs/corePlugin/utils/applyDefaultFormat.d.ts

@@ -1,2 +0,1 @@
-import type { IEditor } from 'roosterjs-editor-types';
 import type { ContentModelSegmentFormat, IStandaloneEditor } from 'roosterjs-content-model-types';
@@ -9,2 +8,2 @@ /**
  */
-export declare function applyDefaultFormat(editor: IStandaloneEditor & IEditor, defaultFormat: ContentModelSegmentFormat): void;
+export declare function applyDefaultFormat(editor: IStandaloneEditor, defaultFormat: ContentModelSegmentFormat): void;

lib-mjs/corePlugin/utils/applyDefaultFormat.js

@@ -18,3 +18,3 @@ import { __assign } from "tslib";
         var node = posContainer;
-        while (node && editor.contains(node)) {
+        while (node && editor.isNodeInEditor(node)) {
             if (isNodeOfType(node, 'ELEMENT_NODE')) {
@@ -21,0 +21,0 @@ if ((_c = node.getAttribute) === null || _c === void 0 ? void 0 : _c.call(node, 'style')) {

lib-mjs/editor/createStandaloneEditorCore.d.ts

@@ -1,4 +0,4 @@
-import type { EditorPlugin } from 'roosterjs-editor-types';
-import type { StandaloneEditorCore, StandaloneEditorOptions, UnportedCoreApiMap, UnportedCorePluginState } from 'roosterjs-content-model-types';
+import type { StandaloneEditorCore, StandaloneEditorOptions } from 'roosterjs-content-model-types';
 /**
+ * @internal
  * A temporary function to create Standalone Editor core
@@ -8,3 +8,3 @@ * @param contentDiv Editor content DIV
  */
-export declare function createStandaloneEditorCore(contentDiv: HTMLDivElement, options: StandaloneEditorOptions, unportedCoreApiMap: UnportedCoreApiMap, unportedCorePluginState: UnportedCorePluginState, tempPlugins: EditorPlugin[]): StandaloneEditorCore;
+export declare function createStandaloneEditorCore(contentDiv: HTMLDivElement, options: StandaloneEditorOptions): StandaloneEditorCore;
 /**
@@ -14,1 +14,6 @@ * @internal export for test only
 export declare function defaultTrustHtmlHandler(html: string): string;
+/**
+ * @internal Export for test only
+ * A fallback function, always return original color
+ */
+export declare function getDarkColorFallback(color: string): string;

lib-mjs/editor/createStandaloneEditorCore.js

 import { __assign, __read, __spreadArray } from "tslib";
+import { createDarkColorHandler } from './DarkColorHandlerImpl';
 import { createStandaloneEditorCorePlugins } from '../corePlugin/createStandaloneEditorCorePlugins';
-import { createStandaloneEditorDefaultSettings } from './createStandaloneEditorDefaultSettings';
-import { DarkColorHandlerImpl } from './DarkColorHandlerImpl';
 import { standaloneCoreApiMap } from './standaloneCoreApiMap';
+import { createDomToModelSettings, createModelToDomSettings, } from './createStandaloneEditorDefaultSettings';
 /**
+ * @internal
  * A temporary function to create Standalone Editor core
@@ -11,6 +12,6 @@ * @param contentDiv Editor content DIV
  */
-export function createStandaloneEditorCore(contentDiv, options, unportedCoreApiMap, unportedCorePluginState, tempPlugins) {
-    var _a;
+export function createStandaloneEditorCore(contentDiv, options) {
+    var _a, _b, _c;
     var corePlugins = createStandaloneEditorCorePlugins(options, contentDiv);
-    return __assign(__assign(__assign({ contentDiv: contentDiv, api: __assign(__assign(__assign({}, standaloneCoreApiMap), unportedCoreApiMap), options.coreApiOverride), originalApi: __assign(__assign({}, standaloneCoreApiMap), unportedCoreApiMap), plugins: __spreadArray(__spreadArray([
+    return __assign(__assign({ contentDiv: contentDiv, api: __assign(__assign({}, standaloneCoreApiMap), options.coreApiOverride), originalApi: __assign({}, standaloneCoreApiMap), plugins: __spreadArray(__spreadArray([
             corePlugins.cache,
@@ -22,12 +23,14 @@ corePlugins.format,
             corePlugins.entity
-        ], __read(tempPlugins), false), [
+        ], __read(((_a = options.plugins) !== null && _a !== void 0 ? _a : []).filter(function (x) { return !!x; })), false), [
             corePlugins.undo,
             corePlugins.lifecycle,
-        ], false), environment: createEditorEnvironment(), darkColorHandler: new DarkColorHandlerImpl(contentDiv, (_a = options.getDarkColor) !== null && _a !== void 0 ? _a : getDarkColorFallback), trustedHTMLHandler: options.trustedHTMLHandler || defaultTrustHtmlHandler }, createStandaloneEditorDefaultSettings(options)), getPluginState(corePlugins)), unportedCorePluginState);
+        ], false), environment: createEditorEnvironment(contentDiv), darkColorHandler: createDarkColorHandler(contentDiv, (_b = options.getDarkColor) !== null && _b !== void 0 ? _b : getDarkColorFallback), trustedHTMLHandler: options.trustedHTMLHandler || defaultTrustHtmlHandler, domToModelSettings: createDomToModelSettings(options), modelToDomSettings: createModelToDomSettings(options) }, getPluginState(corePlugins)), { disposeErrorHandler: options.disposeErrorHandler, zoomScale: ((_c = options.zoomScale) !== null && _c !== void 0 ? _c : -1) > 0 ? options.zoomScale : 1 });
 }
-function createEditorEnvironment() {
-    // It is ok to use global window here since the environment should always be the same for all windows in one session
-    var userAgent = window.navigator.userAgent;
+function createEditorEnvironment(contentDiv) {
+    var _a, _b, _c;
+    var navigator = (_a = contentDiv.ownerDocument.defaultView) === null || _a === void 0 ? void 0 : _a.navigator;
+    var userAgent = (_b = navigator === null || navigator === void 0 ? void 0 : navigator.userAgent) !== null && _b !== void 0 ? _b : '';
+    var appVersion = (_c = navigator === null || navigator === void 0 ? void 0 : navigator.appVersion) !== null && _c !== void 0 ? _c : '';
     return {
-        isMac: window.navigator.appVersion.indexOf('Mac') != -1,
+        isMac: appVersion.indexOf('Mac') != -1,
         isAndroid: /android/i.test(userAgent),
@@ -57,6 +60,9 @@ isSafari: userAgent.indexOf('Safari') >= 0 &&
 }
-// A fallback function, always return original color
-function getDarkColorFallback(color) {
+/**
+ * @internal Export for test only
+ * A fallback function, always return original color
+ */
+export function getDarkColorFallback(color) {
     return color;
 }
 //# sourceMappingURL=createStandaloneEditorCore.js.map

lib-mjs/editor/createStandaloneEditorDefaultSettings.d.ts

@@ -1,7 +0,13 @@
-import type { StandaloneEditorDefaultSettings, StandaloneEditorOptions } from 'roosterjs-content-model-types';
+import type { ContentModelSettings, DomToModelOption, DomToModelSettings, ModelToDomOption, ModelToDomSettings, StandaloneEditorOptions } from 'roosterjs-content-model-types';
 /**
  * @internal
- * Create default DOM and Content Model conversion settings for a standalone editor
+ * Create default DOM to Content Model conversion settings for a standalone editor
  * @param options The editor options
  */
-export declare function createStandaloneEditorDefaultSettings(options: StandaloneEditorOptions): StandaloneEditorDefaultSettings;
+export declare function createDomToModelSettings(options: StandaloneEditorOptions): ContentModelSettings<DomToModelOption, DomToModelSettings>;
+/**
+ * @internal
+ * Create default Content Model to DOM conversion settings for a standalone editor
+ * @param options The editor options
+ */
+export declare function createModelToDomSettings(options: StandaloneEditorOptions): ContentModelSettings<ModelToDomOption, ModelToDomSettings>;

lib-mjs/editor/createStandaloneEditorDefaultSettings.js

@@ -6,30 +6,39 @@ import { createDomToModelConfig, createModelToDomConfig } from 'roosterjs-content-model-dom';
  * @internal
- * Create default DOM and Content Model conversion settings for a standalone editor
+ * Create default DOM to Content Model conversion settings for a standalone editor
  * @param options The editor options
  */
-export function createStandaloneEditorDefaultSettings(options) {
-    var defaultDomToModelOptions = [
-        {
-            processorOverride: {
-                table: tablePreProcessor,
-            },
+export function createDomToModelSettings(options) {
+    var _a;
+    var builtIn = {
+        processorOverride: {
+            table: tablePreProcessor,
         },
-        options.defaultDomToModelOptions,
-    ];
-    var defaultModelToDomOptions = [
-        {
-            metadataAppliers: {
-                listItem: listItemMetadataApplier,
-                listLevel: listLevelMetadataApplier,
-            },
+    };
+    var customized = (_a = options.defaultDomToModelOptions) !== null && _a !== void 0 ? _a : {};
+    return {
+        builtIn: builtIn,
+        customized: customized,
+        calculated: createDomToModelConfig([builtIn, customized]),
+    };
+}
+/**
+ * @internal
+ * Create default Content Model to DOM conversion settings for a standalone editor
+ * @param options The editor options
+ */
+export function createModelToDomSettings(options) {
+    var _a;
+    var builtIn = {
+        metadataAppliers: {
+            listItem: listItemMetadataApplier,
+            listLevel: listLevelMetadataApplier,
         },
-        options.defaultModelToDomOptions,
-    ];
+    };
+    var customized = (_a = options.defaultModelToDomOptions) !== null && _a !== void 0 ? _a : {};
     return {
-        defaultDomToModelOptions: defaultDomToModelOptions,
-        defaultModelToDomOptions: defaultModelToDomOptions,
-        defaultDomToModelConfig: createDomToModelConfig(defaultDomToModelOptions),
-        defaultModelToDomConfig: createModelToDomConfig(defaultModelToDomOptions),
+        builtIn: builtIn,
+        customized: customized,
+        calculated: createModelToDomConfig([builtIn, customized]),
     };
 }
 //# sourceMappingURL=createStandaloneEditorDefaultSettings.js.map

lib-mjs/editor/DarkColorHandlerImpl.d.ts

@@ -47,2 +47,11 @@ import type { ColorKeyAndValue, DarkColorHandler, ModeIndependentColor } from 'roosterjs-editor-types';
     transformElementColor(element: HTMLElement, fromDarkMode: boolean, toDarkMode: boolean): void;
+    /**
+     * Parse color string to r/g/b value.
+     * If the given color is not in a recognized format, return null
+     */
+    private parseColor;
 }
+/**
+ * @internal
+ */
+export declare function createDarkColorHandler(contentDiv: HTMLElement, getDarkColor: (color: string) => string): DarkColorHandler;

lib-mjs/editor/DarkColorHandlerImpl.js

 var _a, _b;
-import { getObjectKeys, parseColor, setColor } from 'roosterjs-editor-dom';
+import { getObjectKeys } from 'roosterjs-content-model-dom';
 var VARIABLE_REGEX = /^\s*var\(\s*(\-\-[a-zA-Z0-9\-_]+)\s*(?:,\s*(.*))?\)\s*$/;
@@ -21,2 +21,6 @@ var VARIABLE_PREFIX = 'var(';
 ];
+var HEX3_REGEX = /^#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])$/;
+var HEX6_REGEX = /^#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})$/;
+var RGB_REGEX = /^rgb\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\s*\)$/;
+var RGBA_REGEX = /^rgba\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\s*\)$/;
 /**
@@ -120,6 +124,6 @@ * @internal
         var _this = this;
-        var rgbSearch = parseColor(darkColor);
+        var rgbSearch = this.parseColor(darkColor);
         if (rgbSearch) {
             var key = getObjectKeys(this.knownColors).find(function (key) {
-                var rgbCurrent = parseColor(_this.knownColors[key].darkModeColor);
+                var rgbCurrent = _this.parseColor(_this.knownColors[key].darkModeColor);
                 return (rgbCurrent &&
@@ -147,12 +151,42 @@ rgbCurrent[0] == rgbSearch[0] &&
                 element.getAttribute(names[1 /* HtmlColor */]), !!fromDarkMode).lightModeColor;
-            element.style.setProperty(names[0 /* CssColor */], null);
+            var transformedColor = color && color != 'inherit' ? _this.registerColor(color, !!toDarkMode) : null;
+            element.style.setProperty(names[0 /* CssColor */], transformedColor);
             element.removeAttribute(names[1 /* HtmlColor */]);
-            if (color && color != 'inherit') {
-                setColor(element, color, i != 0, toDarkMode, false /*shouldAdaptFontColor*/, _this);
-            }
         });
     };
+    /**
+     * Parse color string to r/g/b value.
+     * If the given color is not in a recognized format, return null
+     */
+    DarkColorHandlerImpl.prototype.parseColor = function (color) {
+        color = (color || '').trim();
+        var match;
+        if ((match = color.match(HEX3_REGEX))) {
+            return [
+                parseInt(match[1] + match[1], 16),
+                parseInt(match[2] + match[2], 16),
+                parseInt(match[3] + match[3], 16),
+            ];
+        }
+        else if ((match = color.match(HEX6_REGEX))) {
+            return [parseInt(match[1], 16), parseInt(match[2], 16), parseInt(match[3], 16)];
+        }
+        else if ((match = color.match(RGB_REGEX) || color.match(RGBA_REGEX))) {
+            return [parseInt(match[1]), parseInt(match[2]), parseInt(match[3])];
+        }
+        else {
+            // CSS color names such as red, green is not included for now.
+            // If need, we can add those colors from https://www.w3.org/wiki/CSS/Properties/color/keywords
+            return null;
+        }
+    };
     return DarkColorHandlerImpl;
 }());
 export { DarkColorHandlerImpl };
+/**
+ * @internal
+ */
+export function createDarkColorHandler(contentDiv, getDarkColor) {
+    return new DarkColorHandlerImpl(contentDiv, getDarkColor);
+}
 //# sourceMappingURL=DarkColorHandlerImpl.js.map

lib-mjs/editor/standaloneCoreApiMap.d.ts

@@ -1,2 +0,2 @@
-import type { PortedCoreApiMap } from 'roosterjs-content-model-types';
+import type { StandaloneCoreApiMap } from 'roosterjs-content-model-types';
 /**
@@ -6,2 +6,2 @@ * @internal
  */
-export declare const standaloneCoreApiMap: PortedCoreApiMap;
+export declare const standaloneCoreApiMap: StandaloneCoreApiMap;

lib-mjs/editor/standaloneCoreApiMap.js

@@ -10,2 +10,3 @@ import { addUndoSnapshot } from '../coreApi/addUndoSnapshot';
 import { hasFocus } from '../coreApi/hasFocus';
+import { paste } from '../coreApi/paste';
 import { restoreUndoSnapshot } from '../coreApi/restoreUndoSnapshot';
@@ -35,3 +36,4 @@ import { setContentModel } from '../coreApi/setContentModel';
     triggerEvent: triggerEvent,
+    paste: paste,
 };
 //# sourceMappingURL=standaloneCoreApiMap.js.map

lib-mjs/index.d.ts

 export { CachedElementHandler, CloneModelOptions, cloneModel } from './publicApi/model/cloneModel';
-export { paste } from './publicApi/model/paste';
 export { mergeModel, MergeModelOption } from './publicApi/model/mergeModel';
@@ -39,3 +38,3 @@ export { isBlockGroupOfType } from './publicApi/model/isBlockGroupOfType';
 export { TableBorderFormat } from './constants/TableBorderFormat';
-export { createStandaloneEditorCore } from './editor/createStandaloneEditorCore';
+export { StandaloneEditor } from './editor/StandaloneEditor';
 export { createSnapshotsManager } from './editor/SnapshotsManagerImpl';

lib-mjs/index.js

 export { cloneModel } from './publicApi/model/cloneModel';
-export { paste } from './publicApi/model/paste';
 export { mergeModel } from './publicApi/model/mergeModel';
@@ -39,4 +38,4 @@ export { isBlockGroupOfType } from './publicApi/model/isBlockGroupOfType';
 export { TableBorderFormat } from './constants/TableBorderFormat';
-export { createStandaloneEditorCore } from './editor/createStandaloneEditorCore';
+export { StandaloneEditor } from './editor/StandaloneEditor';
 export { createSnapshotsManager } from './editor/SnapshotsManagerImpl';
 //# sourceMappingURL=index.js.map

lib-mjs/publicApi/selection/deleteSegment.js

@@ -15,3 +15,3 @@ import { deleteSingleChar } from '../../modelApi/edit/deleteSingleChar';
     var index = segments.indexOf(segmentToDelete);
-    var preserveWhiteSpace = isWhiteSpacePreserved(paragraph);
+    var preserveWhiteSpace = isWhiteSpacePreserved(paragraph.format.whiteSpace);
     var isForward = direction == 'forward';
@@ -18,0 +18,0 @@ var isBackward = direction == 'backward';

lib/coreApi/createContentModel.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createContentModel = void 0;
-var tslib_1 = require("tslib");
 var cloneModel_1 = require("../publicApi/model/cloneModel");
@@ -37,5 +36,6 @@ var roosterjs_content_model_dom_1 = require("roosterjs-content-model-dom");
     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);
+        ? (0, roosterjs_content_model_dom_1.createDomToModelContext)(editorContext, core.domToModelSettings.builtIn, core.domToModelSettings.customized, option)
+        : (0, roosterjs_content_model_dom_1.createDomToModelContextWithConfig)(core.domToModelSettings.calculated, editorContext);
     return (0, roosterjs_content_model_dom_1.domToContentModel)(core.contentDiv, domToModelContext, selection);
 }
 //# sourceMappingURL=createContentModel.js.map

lib/coreApi/setContentModel.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.setContentModel = void 0;
-var tslib_1 = require("tslib");
 var roosterjs_content_model_dom_1 = require("roosterjs-content-model-dom");
@@ -16,3 +15,4 @@ /**
     var modelToDomContext = option
-        ? roosterjs_content_model_dom_1.createModelToDomContext.apply(void 0, (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([editorContext], (0, tslib_1.__read)((core.defaultModelToDomOptions || [])), false), [option], false)) : (0, roosterjs_content_model_dom_1.createModelToDomContextWithConfig)(core.defaultModelToDomConfig, editorContext);
+        ? (0, roosterjs_content_model_dom_1.createModelToDomContext)(editorContext, core.modelToDomSettings.builtIn, core.modelToDomSettings.customized, option)
+        : (0, roosterjs_content_model_dom_1.createModelToDomContextWithConfig)(core.modelToDomSettings.calculated, editorContext);
     var selection = (0, roosterjs_content_model_dom_1.contentModelToDom)(core.contentDiv.ownerDocument, core.contentDiv, model, modelToDomContext, onNodeCreated);
@@ -19,0 +19,0 @@ if (!core.lifecycle.shadowEditFragment) {

lib/coreApi/setDOMSelection.js

@@ -11,3 +11,4 @@ "use strict";
 var DEFAULT_SELECTION_BORDER_COLOR = '#DB626C';
-var TABLE_CSS_RULE = '{background-color: rgb(198,198,198) !important; caret-color: transparent}';
+var TABLE_CSS_RULE = '{background-color: rgb(198,198,198) !important;}';
+var CARET_CSS_RULE = '{caret-color: transparent}';
 var MAX_RULE_SELECTOR_LENGTH = 9000;
@@ -31,3 +32,3 @@ /**
                 var image = selection.image;
-                selectionRules = buildImageCSS(rootSelector + ' #' + addUniqueId(image, IMAGE_ID), core.selection.imageSelectionBorderColor);
+                selectionRules = buildImageCSS(rootSelector, addUniqueId(image, IMAGE_ID), core.selection.imageSelectionBorderColor);
                 core.selection.selection = selection;
@@ -38,3 +39,3 @@ setRangeSelection(doc, image);
                 var table = selection.table, firstColumn = selection.firstColumn, firstRow = selection.firstRow;
-                selectionRules = buildTableCss(rootSelector + ' #' + addUniqueId(table, TABLE_ID), selection);
+                selectionRules = buildTableCss(rootSelector, addUniqueId(table, TABLE_ID), selection);
                 core.selection.selection = selection;
@@ -75,9 +76,10 @@ setRangeSelection(doc, (_b = table.rows[firstRow]) === null || _b === void 0 ? void 0 : _b.cells[firstColumn]);
 exports.setDOMSelection = setDOMSelection;
-function buildImageCSS(rootSelector, borderColor) {
+function buildImageCSS(editorSelector, imageId, borderColor) {
     var color = borderColor || DEFAULT_SELECTION_BORDER_COLOR;
     return [
-        rootSelector + " {outline-style:auto!important;outline-color:" + color + "!important;caret-color:transparent;}",
+        editorSelector + " #" + imageId + " {outline-style:auto!important;outline-color:" + color + "!important;}",
+        editorSelector + " " + CARET_CSS_RULE,
     ];
 }
-function buildTableCss(rootSelector, selection) {
+function buildTableCss(editorSelector, tableId, selection) {
     var _a, _b, _c;
@@ -90,6 +92,7 @@ var firstColumn = selection.firstColumn, firstRow = selection.firstRow, lastColumn = selection.lastColumn, lastRow = selection.lastRow;
         lastColumn == ((_b = (_a = cells[lastRow]) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) - 1;
+    var rootSelector = editorSelector + ' #' + tableId;
     var selectors = isAllTableSelected
         ? [rootSelector, rootSelector + " *"]
         : handleTableSelected(rootSelector, selection, cells);
-    var cssRules = [];
+    var cssRules = [editorSelector + " " + CARET_CSS_RULE];
     var currentRules = '';
@@ -96,0 +99,0 @@ for (var i = 0; i < selectors.length; i++) {

lib/corePlugin/ContentModelCopyPastePlugin.d.ts

@@ -1,2 +0,2 @@
-import type { CopyPastePluginState, ContentModelTable, OnNodeCreated, StandaloneEditorOptions } from 'roosterjs-content-model-types';
+import type { CopyPastePluginState, ContentModelTable, OnNodeCreated, StandaloneEditorOptions, ContentModelDocument } from 'roosterjs-content-model-types';
 import type { PluginWithState } from 'roosterjs-editor-types';
@@ -7,2 +7,7 @@ /**
  */
+export declare function adjustSelectionForCopyCut(pasteModel: ContentModelDocument): void;
+/**
+ * @internal
+ * Exported only for unit testing
+ */
 export declare const onNodeCreated: OnNodeCreated;
@@ -9,0 +14,0 @@ /**

lib/corePlugin/ContentModelCopyPastePlugin.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createContentModelCopyPastePlugin = exports.preprocessTable = exports.onNodeCreated = void 0;
+exports.createContentModelCopyPastePlugin = exports.preprocessTable = exports.onNodeCreated = exports.adjustSelectionForCopyCut = void 0;
 var tslib_1 = require("tslib");
@@ -13,3 +13,2 @@ var addRangeToSelection_1 = require("./utils/addRangeToSelection");
 var iterateSelections_1 = require("../publicApi/selection/iterateSelections");
-var paste_1 = require("../publicApi/model/paste");
 var transformColor_1 = require("../publicApi/color/transformColor");
@@ -37,3 +36,3 @@ var roosterjs_content_model_dom_1 = require("roosterjs-content-model-dom");
                         if (!editor_1.isDisposed()) {
-                            (0, paste_1.paste)(editor_1, clipboardData);
+                            editor_1.pasteFromClipboard(clipboardData);
                         }
@@ -107,2 +106,4 @@ });
     ContentModelCopyPastePlugin.prototype.onCutCopy = function (event, isCut) {
+        var _this = this;
+        var _a;
         if (!this.editor) {
@@ -114,3 +115,3 @@ return;
         if (selection && (selection.type != 'range' || !selection.range.collapsed)) {
-            var model = this.editor.createContentModel();
+            var model = this.editor.createContentModel(undefined /* option */, selection);
             var cacheProcessor = this.editor.isDarkMode() ? this.processEntityColor : false;
@@ -129,2 +130,5 @@ var pasteModel = (0, cloneModel_1.cloneModel)(model, {
             }
+            else if (selection.type === 'range') {
+                adjustSelectionForCopyCut(pasteModel);
+            }
             var tempDiv_1 = this.getTempDiv(this.editor.getDocument());
@@ -145,9 +149,11 @@ var selectionForCopy = (0, roosterjs_content_model_dom_1.contentModelToDom)(tempDiv_1.ownerDocument, tempDiv_1, pasteModel, (0, roosterjs_content_model_dom_1.createModelToDomContext)(), exports.onNodeCreated);
                 }
-                this.editor.runAsync(function (e) {
-                    var editor = e;
+                (_a = doc.defaultView) === null || _a === void 0 ? void 0 : _a.requestAnimationFrame(function () {
+                    if (!_this.editor) {
+                        return;
+                    }
                     cleanUpAndRestoreSelection(tempDiv_1);
-                    editor.focus();
-                    editor.setDOMSelection(selection);
+                    _this.editor.focus();
+                    _this.editor.setDOMSelection(selection);
                     if (isCut) {
-                        editor.formatContentModel(function (model, context) {
+                        _this.editor.formatContentModel(function (model, context) {
                             if ((0, deleteSelection_1.deleteSelection)(model, [deleteEmptyList_1.deleteEmptyList], context)
@@ -194,2 +200,27 @@ .deleteResult == 'range') {
 }());
+/**
+ * @internal
+ * Exported only for unit testing
+ */
+function adjustSelectionForCopyCut(pasteModel) {
+    var selectionMarker;
+    var firstBlock;
+    var tableContext;
+    (0, iterateSelections_1.iterateSelections)(pasteModel, function (_, tableCtxt, block, segments) {
+        if (selectionMarker) {
+            if (tableCtxt != tableContext && (firstBlock === null || firstBlock === void 0 ? void 0 : firstBlock.segments.includes(selectionMarker))) {
+                firstBlock.segments.splice(firstBlock.segments.indexOf(selectionMarker), 1);
+            }
+            return true;
+        }
+        var marker = segments === null || segments === void 0 ? void 0 : segments.find(function (segment) { return segment.segmentType == 'SelectionMarker'; });
+        if (!selectionMarker && marker) {
+            tableContext = tableCtxt;
+            firstBlock = (block === null || block === void 0 ? void 0 : block.blockType) == 'Paragraph' ? block : undefined;
+            selectionMarker = marker;
+        }
+        return false;
+    });
+}
+exports.adjustSelectionForCopyCut = adjustSelectionForCopyCut;
 function cleanUpAndRestoreSelection(tempDiv) {
@@ -196,0 +227,0 @@ tempDiv.style.backgroundColor = '';

lib/corePlugin/DOMEventPlugin.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createDOMEventPlugin = void 0;
-var tslib_1 = require("tslib");
 var ChangeSource_1 = require("../constants/ChangeSource");
 var eventUtils_1 = require("../publicApi/domUtils/eventUtils");
+var roosterjs_content_model_dom_1 = require("roosterjs-content-model-dom");
 /**
@@ -26,9 +26,8 @@ * DOMEventPlugin handles customized DOM events, including:
         var _this = this;
-        var _a;
         this.editor = null;
         this.disposer = null;
         this.onDragStart = function (e) {
-            var _a;
             var dragEvent = e;
-            var element = (_a = _this.editor) === null || _a === void 0 ? void 0 : _a.getElementAtCursor('*', dragEvent.target);
+            var node = dragEvent.target;
+            var element = (0, roosterjs_content_model_dom_1.isNodeOfType)(node, 'ELEMENT_NODE') ? node : node.parentElement;
             if (element && !element.isContentEditable) {
@@ -39,7 +38,10 @@ dragEvent.preventDefault();
         this.onDrop = function () {
-            var _a;
-            (_a = _this.editor) === null || _a === void 0 ? void 0 : _a.runAsync(function () {
+            var _a, _b;
+            var doc = (_a = _this.editor) === null || _a === void 0 ? void 0 : _a.getDocument();
+            (_b = doc === null || doc === void 0 ? void 0 : doc.defaultView) === null || _b === void 0 ? void 0 : _b.requestAnimationFrame(function () {
                 if (_this.editor) {
                     _this.editor.takeSnapshot();
-                    _this.editor.triggerContentChangedEvent(ChangeSource_1.ChangeSource.Drop);
+                    _this.editor.triggerPluginEvent(7 /* ContentChanged */, {
+                        source: ChangeSource_1.ChangeSource.Drop,
+                    });
                 }
@@ -90,27 +92,2 @@ });
         };
-        this.onContextMenuEvent = function (event) {
-            var _a, _b;
-            var allItems = [];
-            // TODO: Remove dependency to ContentSearcher
-            var searcher = (_a = _this.editor) === null || _a === void 0 ? void 0 : _a.getContentSearcherOfCursor();
-            var elementBeforeCursor = searcher === null || searcher === void 0 ? void 0 : searcher.getInlineElementBefore();
-            var eventTargetNode = event.target;
-            if (event.button != 2 && elementBeforeCursor) {
-                eventTargetNode = elementBeforeCursor.getContainerNode();
-            }
-            _this.state.contextMenuProviders.forEach(function (provider) {
-                var _a;
-                var items = (_a = provider.getContextMenuItems(eventTargetNode)) !== 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));
-                }
-            });
-            (_b = _this.editor) === null || _b === void 0 ? void 0 : _b.triggerPluginEvent(16 /* ContextMenu */, {
-                rawEvent: event,
-                items: allItems,
-            });
-        };
         this.onCompositionStart = function () {
@@ -129,3 +106,2 @@ _this.state.isInIME = true;
             scrollContainer: options.scrollContainer || contentDiv,
-            contextMenuProviders: ((_a = options.plugins) === null || _a === void 0 ? void 0 : _a.filter(isContextMenuProvider)) || [],
             mouseDownX: null,
@@ -157,3 +133,2 @@ mouseDownY: null,
             mousedown: { beforeDispatch: this.onMouseDown },
-            contextmenu: { beforeDispatch: this.onContextMenuEvent },
             // 3. IME state management
@@ -214,6 +189,2 @@ compositionstart: { beforeDispatch: this.onCompositionStart },
 }());
-function isContextMenuProvider(source) {
-    var _a;
-    return !!((_a = source) === null || _a === void 0 ? void 0 : _a.getContextMenuItems);
-}
 /**
@@ -220,0 +191,0 @@ * @internal

lib/corePlugin/EntityPlugin.js

@@ -84,3 +84,3 @@ "use strict";
         if (isClicking && this.editor) {
-            while (node && this.editor.contains(node)) {
+            while (node && this.editor.isNodeInEditor(node)) {
                 if ((0, roosterjs_content_model_dom_1.isEntityElement)(node)) {
@@ -87,0 +87,0 @@ this.triggerEvent(editor, node, 'click', rawEvent);

lib/corePlugin/SelectionPlugin.js

@@ -7,2 +7,3 @@ "use strict";
 var MouseMiddleButton = 1;
+var MouseRightButton = 2;
 var SelectionPlugin = /** @class */ (function () {
@@ -34,3 +35,3 @@ function SelectionPlugin(options) {
         this.onMouseDownDocument = function (event) {
-            if (_this.editor && !_this.editor.contains(event.target)) {
+            if (_this.editor && !_this.editor.isNodeInEditor(event.target)) {
                 _this.onBlur();
@@ -108,3 +109,9 @@ }
                 selection = this.editor.getDOMSelection();
-                if ((selection === null || selection === void 0 ? void 0 : selection.type) == 'image' && selection.image !== event.rawEvent.target) {
+                if (event.rawEvent.button === MouseRightButton &&
+                    (image = this.getClickingImage(event.rawEvent)) &&
+                    image.isContentEditable) {
+                    this.selectImage(this.editor, image);
+                }
+                else if ((selection === null || selection === void 0 ? void 0 : selection.type) == 'image' &&
+                    selection.image !== event.rawEvent.target) {
                     this.selectBeforeImage(this.editor, selection.image);
@@ -130,8 +137,2 @@ }
                 break;
-            case 16 /* ContextMenu */:
-                selection = this.editor.getDOMSelection();
-                if ((image = this.getClickingImage(event.rawEvent)) &&
-                    ((selection === null || selection === void 0 ? void 0 : selection.type) != 'image' || selection.image != image)) {
-                    this.selectImage(this.editor, image);
-                }
         }
@@ -138,0 +139,0 @@ };

lib/corePlugin/utils/applyDefaultFormat.d.ts

@@ -1,2 +0,1 @@
-import type { IEditor } from 'roosterjs-editor-types';
 import type { ContentModelSegmentFormat, IStandaloneEditor } from 'roosterjs-content-model-types';
@@ -9,2 +8,2 @@ /**
  */
-export declare function applyDefaultFormat(editor: IStandaloneEditor & IEditor, defaultFormat: ContentModelSegmentFormat): void;
+export declare function applyDefaultFormat(editor: IStandaloneEditor, defaultFormat: ContentModelSegmentFormat): void;

lib/corePlugin/utils/applyDefaultFormat.js

@@ -21,3 +21,3 @@ "use strict";
         var node = posContainer;
-        while (node && editor.contains(node)) {
+        while (node && editor.isNodeInEditor(node)) {
             if ((0, roosterjs_content_model_dom_1.isNodeOfType)(node, 'ELEMENT_NODE')) {
@@ -24,0 +24,0 @@ if ((_c = node.getAttribute) === null || _c === void 0 ? void 0 : _c.call(node, 'style')) {

lib/editor/createStandaloneEditorCore.d.ts

@@ -1,4 +0,4 @@
-import type { EditorPlugin } from 'roosterjs-editor-types';
-import type { StandaloneEditorCore, StandaloneEditorOptions, UnportedCoreApiMap, UnportedCorePluginState } from 'roosterjs-content-model-types';
+import type { StandaloneEditorCore, StandaloneEditorOptions } from 'roosterjs-content-model-types';
 /**
+ * @internal
  * A temporary function to create Standalone Editor core
@@ -8,3 +8,3 @@ * @param contentDiv Editor content DIV
  */
-export declare function createStandaloneEditorCore(contentDiv: HTMLDivElement, options: StandaloneEditorOptions, unportedCoreApiMap: UnportedCoreApiMap, unportedCorePluginState: UnportedCorePluginState, tempPlugins: EditorPlugin[]): StandaloneEditorCore;
+export declare function createStandaloneEditorCore(contentDiv: HTMLDivElement, options: StandaloneEditorOptions): StandaloneEditorCore;
 /**
@@ -14,1 +14,6 @@ * @internal export for test only
 export declare function defaultTrustHtmlHandler(html: string): string;
+/**
+ * @internal Export for test only
+ * A fallback function, always return original color
+ */
+export declare function getDarkColorFallback(color: string): string;

lib/editor/createStandaloneEditorCore.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultTrustHtmlHandler = exports.createStandaloneEditorCore = void 0;
+exports.getDarkColorFallback = exports.defaultTrustHtmlHandler = exports.createStandaloneEditorCore = void 0;
 var tslib_1 = require("tslib");
+var DarkColorHandlerImpl_1 = require("./DarkColorHandlerImpl");
 var createStandaloneEditorCorePlugins_1 = require("../corePlugin/createStandaloneEditorCorePlugins");
+var standaloneCoreApiMap_1 = require("./standaloneCoreApiMap");
 var createStandaloneEditorDefaultSettings_1 = require("./createStandaloneEditorDefaultSettings");
-var DarkColorHandlerImpl_1 = require("./DarkColorHandlerImpl");
-var standaloneCoreApiMap_1 = require("./standaloneCoreApiMap");
 /**
+ * @internal
  * A temporary function to create Standalone Editor core
@@ -14,6 +15,6 @@ * @param contentDiv Editor content DIV
  */
-function createStandaloneEditorCore(contentDiv, options, unportedCoreApiMap, unportedCorePluginState, tempPlugins) {
-    var _a;
+function createStandaloneEditorCore(contentDiv, options) {
+    var _a, _b, _c;
     var corePlugins = (0, createStandaloneEditorCorePlugins_1.createStandaloneEditorCorePlugins)(options, contentDiv);
-    return (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({ contentDiv: contentDiv, api: (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, standaloneCoreApiMap_1.standaloneCoreApiMap), unportedCoreApiMap), options.coreApiOverride), originalApi: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, standaloneCoreApiMap_1.standaloneCoreApiMap), unportedCoreApiMap), plugins: (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([
+    return (0, tslib_1.__assign)((0, tslib_1.__assign)({ contentDiv: contentDiv, api: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, standaloneCoreApiMap_1.standaloneCoreApiMap), options.coreApiOverride), originalApi: (0, tslib_1.__assign)({}, standaloneCoreApiMap_1.standaloneCoreApiMap), plugins: (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([
             corePlugins.cache,
@@ -25,13 +26,15 @@ corePlugins.format,
             corePlugins.entity
-        ], (0, tslib_1.__read)(tempPlugins), false), [
+        ], (0, tslib_1.__read)(((_a = options.plugins) !== null && _a !== void 0 ? _a : []).filter(function (x) { return !!x; })), false), [
             corePlugins.undo,
             corePlugins.lifecycle,
-        ], false), environment: createEditorEnvironment(), darkColorHandler: new DarkColorHandlerImpl_1.DarkColorHandlerImpl(contentDiv, (_a = options.getDarkColor) !== null && _a !== void 0 ? _a : getDarkColorFallback), trustedHTMLHandler: options.trustedHTMLHandler || defaultTrustHtmlHandler }, (0, createStandaloneEditorDefaultSettings_1.createStandaloneEditorDefaultSettings)(options)), getPluginState(corePlugins)), unportedCorePluginState);
+        ], false), environment: createEditorEnvironment(contentDiv), darkColorHandler: (0, DarkColorHandlerImpl_1.createDarkColorHandler)(contentDiv, (_b = options.getDarkColor) !== null && _b !== void 0 ? _b : getDarkColorFallback), trustedHTMLHandler: options.trustedHTMLHandler || defaultTrustHtmlHandler, domToModelSettings: (0, createStandaloneEditorDefaultSettings_1.createDomToModelSettings)(options), modelToDomSettings: (0, createStandaloneEditorDefaultSettings_1.createModelToDomSettings)(options) }, getPluginState(corePlugins)), { disposeErrorHandler: options.disposeErrorHandler, zoomScale: ((_c = options.zoomScale) !== null && _c !== void 0 ? _c : -1) > 0 ? options.zoomScale : 1 });
 }
 exports.createStandaloneEditorCore = createStandaloneEditorCore;
-function createEditorEnvironment() {
-    // It is ok to use global window here since the environment should always be the same for all windows in one session
-    var userAgent = window.navigator.userAgent;
+function createEditorEnvironment(contentDiv) {
+    var _a, _b, _c;
+    var navigator = (_a = contentDiv.ownerDocument.defaultView) === null || _a === void 0 ? void 0 : _a.navigator;
+    var userAgent = (_b = navigator === null || navigator === void 0 ? void 0 : navigator.userAgent) !== null && _b !== void 0 ? _b : '';
+    var appVersion = (_c = navigator === null || navigator === void 0 ? void 0 : navigator.appVersion) !== null && _c !== void 0 ? _c : '';
     return {
-        isMac: window.navigator.appVersion.indexOf('Mac') != -1,
+        isMac: appVersion.indexOf('Mac') != -1,
         isAndroid: /android/i.test(userAgent),
@@ -62,6 +65,10 @@ isSafari: userAgent.indexOf('Safari') >= 0 &&
 }
-// A fallback function, always return original color
+/**
+ * @internal Export for test only
+ * A fallback function, always return original color
+ */
 function getDarkColorFallback(color) {
     return color;
 }
+exports.getDarkColorFallback = getDarkColorFallback;
 //# sourceMappingURL=createStandaloneEditorCore.js.map

lib/editor/createStandaloneEditorDefaultSettings.d.ts

@@ -1,7 +0,13 @@
-import type { StandaloneEditorDefaultSettings, StandaloneEditorOptions } from 'roosterjs-content-model-types';
+import type { ContentModelSettings, DomToModelOption, DomToModelSettings, ModelToDomOption, ModelToDomSettings, StandaloneEditorOptions } from 'roosterjs-content-model-types';
 /**
  * @internal
- * Create default DOM and Content Model conversion settings for a standalone editor
+ * Create default DOM to Content Model conversion settings for a standalone editor
  * @param options The editor options
  */
-export declare function createStandaloneEditorDefaultSettings(options: StandaloneEditorOptions): StandaloneEditorDefaultSettings;
+export declare function createDomToModelSettings(options: StandaloneEditorOptions): ContentModelSettings<DomToModelOption, DomToModelSettings>;
+/**
+ * @internal
+ * Create default Content Model to DOM conversion settings for a standalone editor
+ * @param options The editor options
+ */
+export declare function createModelToDomSettings(options: StandaloneEditorOptions): ContentModelSettings<ModelToDomOption, ModelToDomSettings>;

lib/editor/createStandaloneEditorDefaultSettings.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createStandaloneEditorDefaultSettings = void 0;
+exports.createModelToDomSettings = exports.createDomToModelSettings = void 0;
 var roosterjs_content_model_dom_1 = require("roosterjs-content-model-dom");
@@ -9,31 +9,41 @@ var updateListMetadata_1 = require("../metadata/updateListMetadata");
  * @internal
- * Create default DOM and Content Model conversion settings for a standalone editor
+ * Create default DOM to Content Model conversion settings for a standalone editor
  * @param options The editor options
  */
-function createStandaloneEditorDefaultSettings(options) {
-    var defaultDomToModelOptions = [
-        {
-            processorOverride: {
-                table: tablePreProcessor_1.tablePreProcessor,
-            },
+function createDomToModelSettings(options) {
+    var _a;
+    var builtIn = {
+        processorOverride: {
+            table: tablePreProcessor_1.tablePreProcessor,
         },
-        options.defaultDomToModelOptions,
-    ];
-    var defaultModelToDomOptions = [
-        {
-            metadataAppliers: {
-                listItem: updateListMetadata_1.listItemMetadataApplier,
-                listLevel: updateListMetadata_1.listLevelMetadataApplier,
-            },
+    };
+    var customized = (_a = options.defaultDomToModelOptions) !== null && _a !== void 0 ? _a : {};
+    return {
+        builtIn: builtIn,
+        customized: customized,
+        calculated: (0, roosterjs_content_model_dom_1.createDomToModelConfig)([builtIn, customized]),
+    };
+}
+exports.createDomToModelSettings = createDomToModelSettings;
+/**
+ * @internal
+ * Create default Content Model to DOM conversion settings for a standalone editor
+ * @param options The editor options
+ */
+function createModelToDomSettings(options) {
+    var _a;
+    var builtIn = {
+        metadataAppliers: {
+            listItem: updateListMetadata_1.listItemMetadataApplier,
+            listLevel: updateListMetadata_1.listLevelMetadataApplier,
         },
-        options.defaultModelToDomOptions,
-    ];
+    };
+    var customized = (_a = options.defaultModelToDomOptions) !== null && _a !== void 0 ? _a : {};
     return {
-        defaultDomToModelOptions: defaultDomToModelOptions,
-        defaultModelToDomOptions: defaultModelToDomOptions,
-        defaultDomToModelConfig: (0, roosterjs_content_model_dom_1.createDomToModelConfig)(defaultDomToModelOptions),
-        defaultModelToDomConfig: (0, roosterjs_content_model_dom_1.createModelToDomConfig)(defaultModelToDomOptions),
+        builtIn: builtIn,
+        customized: customized,
+        calculated: (0, roosterjs_content_model_dom_1.createModelToDomConfig)([builtIn, customized]),
     };
 }
-exports.createStandaloneEditorDefaultSettings = createStandaloneEditorDefaultSettings;
+exports.createModelToDomSettings = createModelToDomSettings;
 //# sourceMappingURL=createStandaloneEditorDefaultSettings.js.map

lib/editor/DarkColorHandlerImpl.d.ts

@@ -47,2 +47,11 @@ import type { ColorKeyAndValue, DarkColorHandler, ModeIndependentColor } from 'roosterjs-editor-types';
     transformElementColor(element: HTMLElement, fromDarkMode: boolean, toDarkMode: boolean): void;
+    /**
+     * Parse color string to r/g/b value.
+     * If the given color is not in a recognized format, return null
+     */
+    private parseColor;
 }
+/**
+ * @internal
+ */
+export declare function createDarkColorHandler(contentDiv: HTMLElement, getDarkColor: (color: string) => string): DarkColorHandler;

lib/editor/DarkColorHandlerImpl.js

 "use strict";
 var _a, _b;
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DarkColorHandlerImpl = void 0;
-var roosterjs_editor_dom_1 = require("roosterjs-editor-dom");
+exports.createDarkColorHandler = exports.DarkColorHandlerImpl = void 0;
+var roosterjs_content_model_dom_1 = require("roosterjs-content-model-dom");
 var VARIABLE_REGEX = /^\s*var\(\s*(\-\-[a-zA-Z0-9\-_]+)\s*(?:,\s*(.*))?\)\s*$/;
@@ -24,2 +24,6 @@ var VARIABLE_PREFIX = 'var(';
 ];
+var HEX3_REGEX = /^#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])$/;
+var HEX6_REGEX = /^#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})$/;
+var RGB_REGEX = /^rgb\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\s*\)$/;
+var RGBA_REGEX = /^rgba\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\s*\)$/;
 /**
@@ -75,3 +79,3 @@ * @internal
         var _this = this;
-        (0, roosterjs_editor_dom_1.getObjectKeys)(this.knownColors).forEach(function (key) { return _this.contentDiv.style.removeProperty(key); });
+        (0, roosterjs_content_model_dom_1.getObjectKeys)(this.knownColors).forEach(function (key) { return _this.contentDiv.style.removeProperty(key); });
         this.knownColors = {};
@@ -124,6 +128,6 @@ };
         var _this = this;
-        var rgbSearch = (0, roosterjs_editor_dom_1.parseColor)(darkColor);
+        var rgbSearch = this.parseColor(darkColor);
         if (rgbSearch) {
-            var key = (0, roosterjs_editor_dom_1.getObjectKeys)(this.knownColors).find(function (key) {
-                var rgbCurrent = (0, roosterjs_editor_dom_1.parseColor)(_this.knownColors[key].darkModeColor);
+            var key = (0, roosterjs_content_model_dom_1.getObjectKeys)(this.knownColors).find(function (key) {
+                var rgbCurrent = _this.parseColor(_this.knownColors[key].darkModeColor);
                 return (rgbCurrent &&
@@ -151,12 +155,43 @@ rgbCurrent[0] == rgbSearch[0] &&
                 element.getAttribute(names[1 /* HtmlColor */]), !!fromDarkMode).lightModeColor;
-            element.style.setProperty(names[0 /* CssColor */], null);
+            var transformedColor = color && color != 'inherit' ? _this.registerColor(color, !!toDarkMode) : null;
+            element.style.setProperty(names[0 /* CssColor */], transformedColor);
             element.removeAttribute(names[1 /* HtmlColor */]);
-            if (color && color != 'inherit') {
-                (0, roosterjs_editor_dom_1.setColor)(element, color, i != 0, toDarkMode, false /*shouldAdaptFontColor*/, _this);
-            }
         });
     };
+    /**
+     * Parse color string to r/g/b value.
+     * If the given color is not in a recognized format, return null
+     */
+    DarkColorHandlerImpl.prototype.parseColor = function (color) {
+        color = (color || '').trim();
+        var match;
+        if ((match = color.match(HEX3_REGEX))) {
+            return [
+                parseInt(match[1] + match[1], 16),
+                parseInt(match[2] + match[2], 16),
+                parseInt(match[3] + match[3], 16),
+            ];
+        }
+        else if ((match = color.match(HEX6_REGEX))) {
+            return [parseInt(match[1], 16), parseInt(match[2], 16), parseInt(match[3], 16)];
+        }
+        else if ((match = color.match(RGB_REGEX) || color.match(RGBA_REGEX))) {
+            return [parseInt(match[1]), parseInt(match[2]), parseInt(match[3])];
+        }
+        else {
+            // CSS color names such as red, green is not included for now.
+            // If need, we can add those colors from https://www.w3.org/wiki/CSS/Properties/color/keywords
+            return null;
+        }
+    };
     return DarkColorHandlerImpl;
 }());
 exports.DarkColorHandlerImpl = DarkColorHandlerImpl;
+/**
+ * @internal
+ */
+function createDarkColorHandler(contentDiv, getDarkColor) {
+    return new DarkColorHandlerImpl(contentDiv, getDarkColor);
+}
+exports.createDarkColorHandler = createDarkColorHandler;
 //# sourceMappingURL=DarkColorHandlerImpl.js.map

lib/editor/standaloneCoreApiMap.d.ts

@@ -1,2 +0,2 @@
-import type { PortedCoreApiMap } from 'roosterjs-content-model-types';
+import type { StandaloneCoreApiMap } from 'roosterjs-content-model-types';
 /**
@@ -6,2 +6,2 @@ * @internal
  */
-export declare const standaloneCoreApiMap: PortedCoreApiMap;
+export declare const standaloneCoreApiMap: StandaloneCoreApiMap;

lib/editor/standaloneCoreApiMap.js

@@ -13,2 +13,3 @@ "use strict";
 var hasFocus_1 = require("../coreApi/hasFocus");
+var paste_1 = require("../coreApi/paste");
 var restoreUndoSnapshot_1 = require("../coreApi/restoreUndoSnapshot");
@@ -38,3 +39,4 @@ var setContentModel_1 = require("../coreApi/setContentModel");
     triggerEvent: triggerEvent_1.triggerEvent,
+    paste: paste_1.paste,
 };
 //# sourceMappingURL=standaloneCoreApiMap.js.map

lib/index.d.ts

 export { CachedElementHandler, CloneModelOptions, cloneModel } from './publicApi/model/cloneModel';
-export { paste } from './publicApi/model/paste';
 export { mergeModel, MergeModelOption } from './publicApi/model/mergeModel';
@@ -39,3 +38,3 @@ export { isBlockGroupOfType } from './publicApi/model/isBlockGroupOfType';
 export { TableBorderFormat } from './constants/TableBorderFormat';
-export { createStandaloneEditorCore } from './editor/createStandaloneEditorCore';
+export { StandaloneEditor } from './editor/StandaloneEditor';
 export { createSnapshotsManager } from './editor/SnapshotsManagerImpl';

lib/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createStandaloneEditorCore = exports.TableBorderFormat = exports.NumberingListType = exports.BulletListType = exports.ChangeSource = exports.getListStyleTypeFromString = exports.updateListMetadata = exports.updateTableMetadata = exports.updateTableCellMetadata = exports.updateImageMetadata = exports.transformColor = exports.redo = exports.undo = exports.readFile = exports.getSegmentTextFormat = exports.createTableRanges = exports.parseTableCells = exports.normalizeText = exports.isSpace = exports.isPunctuation = exports.extractBorderValues = exports.combineBorderValue = exports.isModifierKey = exports.isCharacterValue = exports.getSelectedCells = exports.setTableCellBackgroundColor = exports.normalizeTable = exports.applyTableFormat = exports.setSelection = exports.getSelectedSegmentsAndParagraphs = exports.getSelectedSegments = exports.getSelectedParagraphs = exports.getOperationalBlocks = exports.getFirstSelectedTable = exports.getFirstSelectedListItem = exports.hasSelectionInBlockGroup = exports.hasSelectionInSegment = exports.hasSelectionInBlock = exports.deleteBlock = exports.deleteSegment = exports.deleteSelection = exports.getSelectionRootNode = exports.iterateSelections = exports.createModelFromHtml = exports.isBold = exports.getClosestAncestorBlockGroupIndex = exports.isBlockGroupOfType = exports.mergeModel = exports.paste = exports.cloneModel = void 0;
-exports.createSnapshotsManager = void 0;
+exports.createSnapshotsManager = exports.StandaloneEditor = exports.TableBorderFormat = exports.NumberingListType = exports.BulletListType = exports.ChangeSource = exports.getListStyleTypeFromString = exports.updateListMetadata = exports.updateTableMetadata = exports.updateTableCellMetadata = exports.updateImageMetadata = exports.transformColor = exports.redo = exports.undo = exports.readFile = exports.getSegmentTextFormat = exports.createTableRanges = exports.parseTableCells = exports.normalizeText = exports.isSpace = exports.isPunctuation = exports.extractBorderValues = exports.combineBorderValue = exports.isModifierKey = exports.isCharacterValue = exports.getSelectedCells = exports.setTableCellBackgroundColor = exports.normalizeTable = exports.applyTableFormat = exports.setSelection = exports.getSelectedSegmentsAndParagraphs = exports.getSelectedSegments = exports.getSelectedParagraphs = exports.getOperationalBlocks = exports.getFirstSelectedTable = exports.getFirstSelectedListItem = exports.hasSelectionInBlockGroup = exports.hasSelectionInSegment = exports.hasSelectionInBlock = exports.deleteBlock = exports.deleteSegment = exports.deleteSelection = exports.getSelectionRootNode = exports.iterateSelections = exports.createModelFromHtml = exports.isBold = exports.getClosestAncestorBlockGroupIndex = exports.isBlockGroupOfType = exports.mergeModel = exports.cloneModel = void 0;
 var cloneModel_1 = require("./publicApi/model/cloneModel");
 Object.defineProperty(exports, "cloneModel", { enumerable: true, get: function () { return cloneModel_1.cloneModel; } });
-var paste_1 = require("./publicApi/model/paste");
-Object.defineProperty(exports, "paste", { enumerable: true, get: function () { return paste_1.paste; } });
 var mergeModel_1 = require("./publicApi/model/mergeModel");
@@ -92,6 +89,6 @@ Object.defineProperty(exports, "mergeModel", { enumerable: true, get: function () { return mergeModel_1.mergeModel; } });
 Object.defineProperty(exports, "TableBorderFormat", { enumerable: true, get: function () { return TableBorderFormat_1.TableBorderFormat; } });
-var createStandaloneEditorCore_1 = require("./editor/createStandaloneEditorCore");
-Object.defineProperty(exports, "createStandaloneEditorCore", { enumerable: true, get: function () { return createStandaloneEditorCore_1.createStandaloneEditorCore; } });
+var StandaloneEditor_1 = require("./editor/StandaloneEditor");
+Object.defineProperty(exports, "StandaloneEditor", { enumerable: true, get: function () { return StandaloneEditor_1.StandaloneEditor; } });
 var SnapshotsManagerImpl_1 = require("./editor/SnapshotsManagerImpl");
 Object.defineProperty(exports, "createSnapshotsManager", { enumerable: true, get: function () { return SnapshotsManagerImpl_1.createSnapshotsManager; } });
 //# sourceMappingURL=index.js.map

lib/publicApi/selection/deleteSegment.js

@@ -18,3 +18,3 @@ "use strict";
     var index = segments.indexOf(segmentToDelete);
-    var preserveWhiteSpace = (0, roosterjs_content_model_dom_1.isWhiteSpacePreserved)(paragraph);
+    var preserveWhiteSpace = (0, roosterjs_content_model_dom_1.isWhiteSpacePreserved)(paragraph.format.whiteSpace);
     var isForward = direction == 'forward';
@@ -21,0 +21,0 @@ var isBackward = direction == 'backward';

package.json

@@ -7,7 +7,6 @@ {
         "roosterjs-editor-types": "^8.59.0",
-        "roosterjs-editor-dom": "^8.59.0",
-        "roosterjs-content-model-dom": "^0.22.0",
-        "roosterjs-content-model-types": "^0.22.0"
+        "roosterjs-content-model-dom": "^0.23.0",
+        "roosterjs-content-model-types": "^0.23.0"
     },
-    "version": "0.22.0",
+    "version": "0.23.0",
     "main": "./lib/index.js",
@@ -14,0 +13,0 @@ "typings": "./lib/index.d.ts",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2855635

increased by13.09%

Dependency count

4

decreased by-20%

Number of package files

858

increased by14.4%

Lines of code

26820

increased by16.68%

Dependency changes

• + Addedroosterjs-content-model-dom@0.23.0(transitive)

• + Addedroosterjs-content-model-types@0.23.0(transitive)

• - Removedroosterjs-editor-dom@^8.59.0

• - Removedroosterjs-content-model-dom@0.22.0(transitive)

• - Removedroosterjs-content-model-types@0.22.0(transitive)

• - Removedroosterjs-editor-dom@8.62.0(transitive)

• Updatedroosterjs-content-model-dom@^0.23.0

• Updatedroosterjs-content-model-types@^0.23.0