roosterjs-content-model-core 0.20.0

package/lib-mjs/corePlugin/ContentModelCopyPastePlugin.d.ts

@@ -0,0 +1,46 @@
+import type { OnNodeCreated } from 'roosterjs-content-model-types';
+import type { CopyPastePluginState, IEditor, PluginWithState } from 'roosterjs-editor-types';
+/**
+ * Copy and paste plugin for handling onCopy and onPaste event
+ */
+export declare class ContentModelCopyPastePlugin implements PluginWithState<CopyPastePluginState> {
+    private state;
+    private editor;
+    private disposer;
+    /**
+     * Construct a new instance of CopyPastePlugin
+     * @param options The editor options
+     */
+    constructor(state: CopyPastePluginState);
+    /**
+     * Get a friendly name of  this plugin
+     */
+    getName(): string;
+    /**
+     * Initialize this plugin. This should only be called from Editor
+     * @param editor Editor instance
+     */
+    initialize(editor: IEditor): void;
+    /**
+     * Dispose this plugin
+     */
+    dispose(): void;
+    /**
+     * Get plugin state object
+     */
+    getState(): CopyPastePluginState;
+    private onCutCopy;
+    private onPaste;
+    private getTempDiv;
+}
+/**
+ * @internal
+ * Exported only for unit testing
+ */
+export declare const onNodeCreated: OnNodeCreated;
+/**
+ * @internal
+ * Create a new instance of ContentModelCopyPastePlugin
+ * @param state The plugin state object
+ */
+export declare function createContentModelCopyPastePlugin(state: CopyPastePluginState): ContentModelCopyPastePlugin;

package/lib-mjs/corePlugin/ContentModelCopyPastePlugin.js

@@ -0,0 +1,228 @@
+import { __assign } from "tslib";
+import { addRangeToSelection } from './utils/addRangeToSelection';
+import { ChangeSource } from '../constants/ChangeSource';
+import { cloneModel } from '../publicApi/model/cloneModel';
+import { deleteSelection } from '../publicApi/selection/deleteSelection';
+import { extractClipboardItems } from 'roosterjs-editor-dom';
+import { iterateSelections } from '../publicApi/selection/iterateSelections';
+import { paste } from '../publicApi/model/paste';
+import { contentModelToDom, createModelToDomContext, isElementOfType, isNodeOfType, moveChildNodes, normalizeContentModel, toArray, wrap, } from 'roosterjs-content-model-dom';
+/**
+ * Copy and paste plugin for handling onCopy and onPaste event
+ */
+var ContentModelCopyPastePlugin = /** @class */ (function () {
+    /**
+     * Construct a new instance of CopyPastePlugin
+     * @param options The editor options
+     */
+    function ContentModelCopyPastePlugin(state) {
+        var _this = this;
+        this.state = state;
+        this.editor = null;
+        this.disposer = null;
+        this.onPaste = function (event) {
+            if (_this.editor && isClipboardEvent(event)) {
+                var editor_1 = _this.editor;
+                var dataTransfer = event.clipboardData;
+                if (dataTransfer === null || dataTransfer === void 0 ? void 0 : dataTransfer.items) {
+                    event.preventDefault();
+                    extractClipboardItems(toArray(dataTransfer.items), {
+                        allowedCustomPasteType: _this.state.allowedCustomPasteType,
+                    }, true /*pasteNativeEvent*/).then(function (clipboardData) {
+                        if (!editor_1.isDisposed()) {
+                            paste(editor_1, clipboardData);
+                        }
+                    });
+                }
+            }
+        };
+    }
+    /**
+     * Get a friendly name of  this plugin
+     */
+    ContentModelCopyPastePlugin.prototype.getName = function () {
+        return 'ContentModelCopyPaste';
+    };
+    /**
+     * Initialize this plugin. This should only be called from Editor
+     * @param editor Editor instance
+     */
+    ContentModelCopyPastePlugin.prototype.initialize = function (editor) {
+        var _this = this;
+        this.editor = editor;
+        this.disposer = this.editor.addDomEventHandler({
+            paste: function (e) { return _this.onPaste(e); },
+            copy: function (e) { return _this.onCutCopy(e, false /*isCut*/); },
+            cut: function (e) { return _this.onCutCopy(e, true /*isCut*/); },
+        });
+    };
+    /**
+     * Dispose this plugin
+     */
+    ContentModelCopyPastePlugin.prototype.dispose = function () {
+        if (this.disposer) {
+            this.disposer();
+        }
+        this.disposer = null;
+        this.editor = null;
+    };
+    /**
+     * Get plugin state object
+     */
+    ContentModelCopyPastePlugin.prototype.getState = function () {
+        return this.state;
+    };
+    ContentModelCopyPastePlugin.prototype.onCutCopy = function (event, isCut) {
+        var _this = this;
+        if (!this.editor) {
+            return;
+        }
+        var doc = this.editor.getDocument();
+        var selection = this.editor.getDOMSelection();
+        if (selection && (selection.type != 'range' || !selection.range.collapsed)) {
+            var model = this.editor.createContentModel();
+            var pasteModel = cloneModel(model, {
+                includeCachedElement: this.editor.isDarkMode()
+                    ? function (node, type) {
+                        var _a;
+                        if (type == 'cache') {
+                            return undefined;
+                        }
+                        else {
+                            var result = node.cloneNode(true /*deep*/);
+                            (_a = _this.editor) === null || _a === void 0 ? void 0 : _a.transformToDarkColor(result, 1 /* DarkToLight */);
+                            result.style.color = result.style.color || 'inherit';
+                            result.style.backgroundColor =
+                                result.style.backgroundColor || 'inherit';
+                            return result;
+                        }
+                    }
+                    : false,
+            });
+            if (selection.type === 'table') {
+                iterateSelections(pasteModel, function (_, tableContext) {
+                    if (tableContext === null || tableContext === void 0 ? void 0 : tableContext.table) {
+                        var table = tableContext === null || tableContext === void 0 ? void 0 : tableContext.table;
+                        table.rows = table.rows
+                            .map(function (row) {
+                            return __assign(__assign({}, row), { cells: row.cells.filter(function (cell) { return cell.isSelected; }) });
+                        })
+                            .filter(function (row) { return row.cells.length > 0; });
+                        return true;
+                    }
+                    return false;
+                });
+            }
+            var tempDiv_1 = this.getTempDiv(this.editor);
+            var selectionForCopy = contentModelToDom(tempDiv_1.ownerDocument, tempDiv_1, pasteModel, createModelToDomContext(), onNodeCreated);
+            var newRange = selectionForCopy
+                ? domSelectionToRange(doc, selectionForCopy, tempDiv_1)
+                : null;
+            if (newRange) {
+                newRange = this.editor.triggerPluginEvent(9 /* BeforeCutCopy */, {
+                    clonedRoot: tempDiv_1,
+                    range: newRange,
+                    rawEvent: event,
+                    isCut: isCut,
+                }).range;
+                if (newRange) {
+                    addRangeToSelection(doc, newRange);
+                }
+                this.editor.runAsync(function (e) {
+                    var editor = e;
+                    cleanUpAndRestoreSelection(tempDiv_1);
+                    editor.focus();
+                    editor.setDOMSelection(selection);
+                    if (isCut) {
+                        editor.formatContentModel(function (model, context) {
+                            if (deleteSelection(model, [], context).deleteResult == 'range') {
+                                normalizeContentModel(model);
+                            }
+                            return true;
+                        }, {
+                            apiName: 'cut',
+                            changeSource: ChangeSource.Cut,
+                        });
+                    }
+                });
+            }
+            else {
+                cleanUpAndRestoreSelection(tempDiv_1);
+            }
+        }
+    };
+    ContentModelCopyPastePlugin.prototype.getTempDiv = function (editor) {
+        var div = editor.getCustomData('CopyPasteTempDiv', function () {
+            var tempDiv = editor.getDocument().createElement('div');
+            tempDiv.style.width = '600px';
+            tempDiv.style.height = '1px';
+            tempDiv.style.overflow = 'hidden';
+            tempDiv.style.position = 'fixed';
+            tempDiv.style.top = '0';
+            tempDiv.style.left = '0';
+            tempDiv.style.userSelect = 'text';
+            tempDiv.contentEditable = 'true';
+            editor.getDocument().body.appendChild(tempDiv);
+            return tempDiv;
+        }, function (tempDiv) { var _a; return (_a = tempDiv.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(tempDiv); });
+        div.style.backgroundColor = 'white';
+        div.style.color = 'black';
+        div.childNodes.forEach(function (node) { return div.removeChild(node); });
+        div.style.display = '';
+        div.focus();
+        return div;
+    };
+    return ContentModelCopyPastePlugin;
+}());
+export { ContentModelCopyPastePlugin };
+function cleanUpAndRestoreSelection(tempDiv) {
+    tempDiv.style.backgroundColor = '';
+    tempDiv.style.color = '';
+    tempDiv.style.display = 'none';
+    moveChildNodes(tempDiv);
+}
+function isClipboardEvent(event) {
+    return !!event.clipboardData;
+}
+function domSelectionToRange(doc, selection, tempDiv) {
+    var _a;
+    var newRange = null;
+    if (selection.type === 'table') {
+        var table = tempDiv.querySelector("#" + selection.table.id);
+        var elementToSelect = ((_a = table.parentElement) === null || _a === void 0 ? void 0 : _a.childElementCount) == 1 ? table.parentElement : table;
+        newRange = doc.createRange();
+        newRange.selectNode(elementToSelect);
+    }
+    else if (selection.type === 'image') {
+        var image = tempDiv.querySelector('#' + selection.image.id);
+        if (image) {
+            newRange = doc.createRange();
+            newRange.selectNode(image);
+        }
+    }
+    else {
+        newRange = selection.range;
+    }
+    return newRange;
+}
+/**
+ * @internal
+ * Exported only for unit testing
+ */
+export var onNodeCreated = function (_, node) {
+    if (isNodeOfType(node, 'ELEMENT_NODE') && isElementOfType(node, 'table')) {
+        wrap(node.ownerDocument, node, 'div');
+    }
+    if (isNodeOfType(node, 'ELEMENT_NODE') && !node.isContentEditable) {
+        node.removeAttribute('contenteditable');
+    }
+};
+/**
+ * @internal
+ * Create a new instance of ContentModelCopyPastePlugin
+ * @param state The plugin state object
+ */
+export function createContentModelCopyPastePlugin(state) {
+    return new ContentModelCopyPastePlugin(state);
+}
+//# sourceMappingURL=ContentModelCopyPastePlugin.js.map

package/lib-mjs/corePlugin/ContentModelCopyPastePlugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentModelCopyPastePlugin.js","sourceRoot":"","sources":["../../../../packages-content-model/roosterjs-content-model-core/lib/corePlugin/ContentModelCopyPastePlugin.ts"],"names":[],"mappings":"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","sourcesContent":["import { addRangeToSelection } from './utils/addRangeToSelection';\nimport { ChangeSource } from '../constants/ChangeSource';\nimport { cloneModel } from '../publicApi/model/cloneModel';\nimport { ColorTransformDirection, PluginEventType } from 'roosterjs-editor-types';\nimport { deleteSelection } from '../publicApi/selection/deleteSelection';\nimport { extractClipboardItems } from 'roosterjs-editor-dom';\nimport { iterateSelections } from '../publicApi/selection/iterateSelections';\nimport { paste } from '../publicApi/model/paste';\nimport {\n    contentModelToDom,\n    createModelToDomContext,\n    isElementOfType,\n    isNodeOfType,\n    moveChildNodes,\n    normalizeContentModel,\n    toArray,\n    wrap,\n} from 'roosterjs-content-model-dom';\nimport type { DOMSelection, IStandaloneEditor, OnNodeCreated } from 'roosterjs-content-model-types';\nimport type {\n    CopyPastePluginState,\n    IEditor,\n    PluginWithState,\n    ClipboardData,\n} from 'roosterjs-editor-types';\n\n/**\n * Copy and paste plugin for handling onCopy and onPaste event\n */\nexport class ContentModelCopyPastePlugin implements PluginWithState<CopyPastePluginState> {\n    private editor: (IStandaloneEditor & IEditor) | null = null;\n    private disposer: (() => void) | null = null;\n\n    /**\n     * Construct a new instance of CopyPastePlugin\n     * @param options The editor options\n     */\n    constructor(private state: CopyPastePluginState) {}\n\n    /**\n     * Get a friendly name of  this plugin\n     */\n    getName() {\n        return 'ContentModelCopyPaste';\n    }\n\n    /**\n     * Initialize this plugin. This should only be called from Editor\n     * @param editor Editor instance\n     */\n    initialize(editor: IEditor) {\n        this.editor = editor as IStandaloneEditor & IEditor;\n        this.disposer = this.editor.addDomEventHandler({\n            paste: e => this.onPaste(e),\n            copy: e => this.onCutCopy(e, false /*isCut*/),\n            cut: e => this.onCutCopy(e, true /*isCut*/),\n        });\n    }\n\n    /**\n     * Dispose this plugin\n     */\n    dispose() {\n        if (this.disposer) {\n            this.disposer();\n        }\n        this.disposer = null;\n        this.editor = null;\n    }\n\n    /**\n     * Get plugin state object\n     */\n    getState() {\n        return this.state;\n    }\n\n    private onCutCopy(event: Event, isCut: boolean) {\n        if (!this.editor) {\n            return;\n        }\n\n        const doc = this.editor.getDocument();\n        const selection = this.editor.getDOMSelection();\n\n        if (selection && (selection.type != 'range' || !selection.range.collapsed)) {\n            const model = this.editor.createContentModel();\n\n            const pasteModel = cloneModel(model, {\n                includeCachedElement: this.editor.isDarkMode()\n                    ? (node, type) => {\n                          if (type == 'cache') {\n                              return undefined;\n                          } else {\n                              const result = node.cloneNode(true /*deep*/) as HTMLElement;\n\n                              this.editor?.transformToDarkColor(\n                                  result,\n                                  ColorTransformDirection.DarkToLight\n                              );\n\n                              result.style.color = result.style.color || 'inherit';\n                              result.style.backgroundColor =\n                                  result.style.backgroundColor || 'inherit';\n\n                              return result;\n                          }\n                      }\n                    : false,\n            });\n            if (selection.type === 'table') {\n                iterateSelections(pasteModel, (_, tableContext) => {\n                    if (tableContext?.table) {\n                        const table = tableContext?.table;\n                        table.rows = table.rows\n                            .map(row => {\n                                return {\n                                    ...row,\n                                    cells: row.cells.filter(cell => cell.isSelected),\n                                };\n                            })\n                            .filter(row => row.cells.length > 0);\n                        return true;\n                    }\n                    return false;\n                });\n            }\n            const tempDiv = this.getTempDiv(this.editor);\n            const selectionForCopy = contentModelToDom(\n                tempDiv.ownerDocument,\n                tempDiv,\n                pasteModel,\n                createModelToDomContext(),\n                onNodeCreated\n            );\n\n            let newRange: Range | null = selectionForCopy\n                ? domSelectionToRange(doc, selectionForCopy, tempDiv)\n                : null;\n            if (newRange) {\n                newRange = this.editor.triggerPluginEvent(PluginEventType.BeforeCutCopy, {\n                    clonedRoot: tempDiv,\n                    range: newRange,\n                    rawEvent: event as ClipboardEvent,\n                    isCut,\n                }).range;\n\n                if (newRange) {\n                    addRangeToSelection(doc, newRange);\n                }\n\n                this.editor.runAsync(e => {\n                    const editor = e as IStandaloneEditor & IEditor;\n\n                    cleanUpAndRestoreSelection(tempDiv);\n                    editor.focus();\n                    editor.setDOMSelection(selection);\n\n                    if (isCut) {\n                        editor.formatContentModel(\n                            (model, context) => {\n                                if (deleteSelection(model, [], context).deleteResult == 'range') {\n                                    normalizeContentModel(model);\n                                }\n\n                                return true;\n                            },\n                            {\n                                apiName: 'cut',\n                                changeSource: ChangeSource.Cut,\n                            }\n                        );\n                    }\n                });\n            } else {\n                cleanUpAndRestoreSelection(tempDiv);\n            }\n        }\n    }\n\n    private onPaste = (event: Event) => {\n        if (this.editor && isClipboardEvent(event)) {\n            const editor = this.editor;\n\n            const dataTransfer = event.clipboardData;\n\n            if (dataTransfer?.items) {\n                event.preventDefault();\n                extractClipboardItems(\n                    toArray(dataTransfer.items),\n                    {\n                        allowedCustomPasteType: this.state.allowedCustomPasteType,\n                    },\n                    true /*pasteNativeEvent*/\n                ).then((clipboardData: ClipboardData) => {\n                    if (!editor.isDisposed()) {\n                        paste(editor, clipboardData);\n                    }\n                });\n            }\n        }\n    };\n\n    private getTempDiv(editor: IEditor) {\n        const div = editor.getCustomData(\n            'CopyPasteTempDiv',\n            () => {\n                const tempDiv = editor.getDocument().createElement('div');\n\n                tempDiv.style.width = '600px';\n                tempDiv.style.height = '1px';\n                tempDiv.style.overflow = 'hidden';\n                tempDiv.style.position = 'fixed';\n                tempDiv.style.top = '0';\n                tempDiv.style.left = '0';\n                tempDiv.style.userSelect = 'text';\n                tempDiv.contentEditable = 'true';\n\n                editor.getDocument().body.appendChild(tempDiv);\n\n                return tempDiv;\n            },\n            tempDiv => tempDiv.parentNode?.removeChild(tempDiv)\n        );\n\n        div.style.backgroundColor = 'white';\n        div.style.color = 'black';\n        div.childNodes.forEach(node => div.removeChild(node));\n\n        div.style.display = '';\n        div.focus();\n\n        return div;\n    }\n}\n\nfunction cleanUpAndRestoreSelection(tempDiv: HTMLDivElement) {\n    tempDiv.style.backgroundColor = '';\n    tempDiv.style.color = '';\n    tempDiv.style.display = 'none';\n    moveChildNodes(tempDiv);\n}\n\nfunction isClipboardEvent(event: Event): event is ClipboardEvent {\n    return !!(event as ClipboardEvent).clipboardData;\n}\n\nfunction domSelectionToRange(\n    doc: Document,\n    selection: DOMSelection,\n    tempDiv: HTMLDivElement\n): Range | null {\n    let newRange: Range | null = null;\n\n    if (selection.type === 'table') {\n        const table = tempDiv.querySelector(`#${selection.table.id}`) as HTMLTableElement;\n        const elementToSelect =\n            table.parentElement?.childElementCount == 1 ? table.parentElement : table;\n\n        newRange = doc.createRange();\n        newRange.selectNode(elementToSelect);\n    } else if (selection.type === 'image') {\n        const image = tempDiv.querySelector('#' + selection.image.id);\n\n        if (image) {\n            newRange = doc.createRange();\n            newRange.selectNode(image);\n        }\n    } else {\n        newRange = selection.range;\n    }\n\n    return newRange;\n}\n\n/**\n * @internal\n * Exported only for unit testing\n */\nexport const onNodeCreated: OnNodeCreated = (_, node): void => {\n    if (isNodeOfType(node, 'ELEMENT_NODE') && isElementOfType(node, 'table')) {\n        wrap(node.ownerDocument, node, 'div');\n    }\n    if (isNodeOfType(node, 'ELEMENT_NODE') && !node.isContentEditable) {\n        node.removeAttribute('contenteditable');\n    }\n};\n\n/**\n * @internal\n * Create a new instance of ContentModelCopyPastePlugin\n * @param state The plugin state object\n */\nexport function createContentModelCopyPastePlugin(state: CopyPastePluginState) {\n    return new ContentModelCopyPastePlugin(state);\n}\n"]}

package/lib-mjs/corePlugin/ContentModelFormatPlugin.d.ts

@@ -0,0 +1,59 @@
+import type { IEditor, PluginEvent, PluginWithState } from 'roosterjs-editor-types';
+import type { ContentModelFormatPluginState } from 'roosterjs-content-model-types';
+/**
+ * ContentModelFormat plugins helps editor to do formatting on top of content model.
+ * This includes:
+ * 1. Handle pending format changes when selection is collapsed
+ */
+export declare class ContentModelFormatPlugin implements PluginWithState<ContentModelFormatPluginState> {
+    private state;
+    private editor;
+    private hasDefaultFormat;
+    /**
+     * Construct a new instance of ContentModelEditPlugin class
+     * @param state State of this plugin
+     */
+    constructor(state: ContentModelFormatPluginState);
+    /**
+     * Get name of this plugin
+     */
+    getName(): string;
+    /**
+     * The first method that editor will call to a plugin when editor is initializing.
+     * It will pass in the editor instance, plugin should take this chance to save the
+     * editor reference so that it can call to any editor method or format API later.
+     * @param editor The editor object
+     */
+    initialize(editor: IEditor): void;
+    /**
+     * The last method that editor will call to a plugin before it is disposed.
+     * Plugin can take this chance to clear the reference to editor. After this method is
+     * called, plugin should not call to any editor method since it will result in error.
+     */
+    dispose(): void;
+    /**
+     * Get plugin state object
+     */
+    getState(): ContentModelFormatPluginState;
+    /**
+     * Core method for a plugin. Once an event happens in editor, editor will call this
+     * method of each plugin to handle the event as long as the event is not handled
+     * exclusively by another plugin.
+     * @param event The event to handle:
+     */
+    onPluginEvent(event: PluginEvent): void;
+    private checkAndApplyPendingFormat;
+    private clearPendingFormat;
+    /**
+     * @internal
+     * Check if this editor can apply pending format
+     * @param editor The editor to get format from
+     */
+    private canApplyPendingFormat;
+}
+/**
+ * @internal
+ * Create a new instance of ContentModelFormatPlugin.
+ * This is mostly for unit test
+ */
+export declare function createContentModelFormatPlugin(state: ContentModelFormatPluginState): ContentModelFormatPlugin;

package/lib-mjs/corePlugin/ContentModelFormatPlugin.js

@@ -0,0 +1,143 @@
+import { applyDefaultFormat } from './utils/applyDefaultFormat';
+import { applyPendingFormat } from './utils/applyPendingFormat';
+import { getObjectKeys } from 'roosterjs-content-model-dom';
+import { isCharacterValue } from '../publicApi/domUtils/eventUtils';
+// During IME input, KeyDown event will have "Process" as key
+var ProcessKey = 'Process';
+var CursorMovingKeys = new Set([
+    'ArrowUp',
+    'ArrowDown',
+    'ArrowLeft',
+    'ArrowRight',
+    'Home',
+    'End',
+    'PageUp',
+    'PageDown',
+]);
+/**
+ * ContentModelFormat plugins helps editor to do formatting on top of content model.
+ * This includes:
+ * 1. Handle pending format changes when selection is collapsed
+ */
+var ContentModelFormatPlugin = /** @class */ (function () {
+    /**
+     * Construct a new instance of ContentModelEditPlugin class
+     * @param state State of this plugin
+     */
+    function ContentModelFormatPlugin(state) {
+        this.state = state;
+        this.editor = null;
+        this.hasDefaultFormat = false;
+        // TODO: Remove tempState parameter once we have standalone Content Model editor
+    }
+    /**
+     * Get name of this plugin
+     */
+    ContentModelFormatPlugin.prototype.getName = function () {
+        return 'ContentModelFormat';
+    };
+    /**
+     * The first method that editor will call to a plugin when editor is initializing.
+     * It will pass in the editor instance, plugin should take this chance to save the
+     * editor reference so that it can call to any editor method or format API later.
+     * @param editor The editor object
+     */
+    ContentModelFormatPlugin.prototype.initialize = function (editor) {
+        var _this = this;
+        // TODO: Later we may need a different interface for Content Model editor plugin
+        this.editor = editor;
+        this.hasDefaultFormat =
+            getObjectKeys(this.state.defaultFormat).filter(function (x) { return typeof _this.state.defaultFormat[x] !== 'undefined'; }).length > 0;
+    };
+    /**
+     * The last method that editor will call to a plugin before it is disposed.
+     * Plugin can take this chance to clear the reference to editor. After this method is
+     * called, plugin should not call to any editor method since it will result in error.
+     */
+    ContentModelFormatPlugin.prototype.dispose = function () {
+        this.editor = null;
+    };
+    /**
+     * Get plugin state object
+     */
+    ContentModelFormatPlugin.prototype.getState = function () {
+        return this.state;
+    };
+    /**
+     * Core method for a plugin. Once an event happens in editor, editor will call this
+     * method of each plugin to handle the event as long as the event is not handled
+     * exclusively by another plugin.
+     * @param event The event to handle:
+     */
+    ContentModelFormatPlugin.prototype.onPluginEvent = function (event) {
+        if (!this.editor) {
+            return;
+        }
+        switch (event.eventType) {
+            case 3 /* Input */:
+                var env = this.editor.getEnvironment();
+                // In Safari, isComposing will be undefined but isInIME() works
+                // For Android, we can skip checking isComposing since this property is not always reliable in all IME,
+                // and we have tested without this check it can still work correctly
+                if (env.isAndroid || (!event.rawEvent.isComposing && !this.editor.isInIME())) {
+                    this.checkAndApplyPendingFormat(event.rawEvent.data);
+                }
+                break;
+            case 4 /* CompositionEnd */:
+                this.checkAndApplyPendingFormat(event.rawEvent.data);
+                break;
+            case 0 /* KeyDown */:
+                if (CursorMovingKeys.has(event.rawEvent.key)) {
+                    this.clearPendingFormat();
+                }
+                else if (this.hasDefaultFormat &&
+                    (isCharacterValue(event.rawEvent) || event.rawEvent.key == ProcessKey)) {
+                    applyDefaultFormat(this.editor, this.state.defaultFormat);
+                }
+                break;
+            case 6 /* MouseUp */:
+            case 7 /* ContentChanged */:
+                if (!this.canApplyPendingFormat()) {
+                    this.clearPendingFormat();
+                }
+                break;
+        }
+    };
+    ContentModelFormatPlugin.prototype.checkAndApplyPendingFormat = function (data) {
+        if (this.editor && data && this.state.pendingFormat) {
+            applyPendingFormat(this.editor, data, this.state.pendingFormat.format);
+            this.clearPendingFormat();
+        }
+    };
+    ContentModelFormatPlugin.prototype.clearPendingFormat = function () {
+        this.state.pendingFormat = null;
+    };
+    /**
+     * @internal
+     * Check if this editor can apply pending format
+     * @param editor The editor to get format from
+     */
+    ContentModelFormatPlugin.prototype.canApplyPendingFormat = function () {
+        var result = false;
+        if (this.state.pendingFormat && this.editor) {
+            var selection = this.editor.getDOMSelection();
+            var range = (selection === null || selection === void 0 ? void 0 : selection.type) == 'range' && selection.range.collapsed ? selection.range : null;
+            var _a = this.state.pendingFormat, posContainer = _a.posContainer, posOffset = _a.posOffset;
+            if (range && range.startContainer == posContainer && range.startOffset == posOffset) {
+                result = true;
+            }
+        }
+        return result;
+    };
+    return ContentModelFormatPlugin;
+}());
+export { ContentModelFormatPlugin };
+/**
+ * @internal
+ * Create a new instance of ContentModelFormatPlugin.
+ * This is mostly for unit test
+ */
+export function createContentModelFormatPlugin(state) {
+    return new ContentModelFormatPlugin(state);
+}
+//# sourceMappingURL=ContentModelFormatPlugin.js.map

package/lib-mjs/corePlugin/ContentModelFormatPlugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentModelFormatPlugin.js","sourceRoot":"","sources":["../../../../packages-content-model/roosterjs-content-model-core/lib/corePlugin/ContentModelFormatPlugin.ts"],"names":[],"mappings":"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","sourcesContent":["import { applyDefaultFormat } from './utils/applyDefaultFormat';\nimport { applyPendingFormat } from './utils/applyPendingFormat';\nimport { getObjectKeys } from 'roosterjs-content-model-dom';\nimport { isCharacterValue } from '../publicApi/domUtils/eventUtils';\nimport { PluginEventType } from 'roosterjs-editor-types';\nimport type { IEditor, PluginEvent, PluginWithState } from 'roosterjs-editor-types';\nimport type {\n    ContentModelFormatPluginState,\n    IStandaloneEditor,\n} from 'roosterjs-content-model-types';\n\n// During IME input, KeyDown event will have \"Process\" as key\nconst ProcessKey = 'Process';\nconst CursorMovingKeys = new Set<string>([\n    'ArrowUp',\n    'ArrowDown',\n    'ArrowLeft',\n    'ArrowRight',\n    'Home',\n    'End',\n    'PageUp',\n    'PageDown',\n]);\n\n/**\n * ContentModelFormat plugins helps editor to do formatting on top of content model.\n * This includes:\n * 1. Handle pending format changes when selection is collapsed\n */\nexport class ContentModelFormatPlugin implements PluginWithState<ContentModelFormatPluginState> {\n    private editor: (IStandaloneEditor & IEditor) | null = null;\n    private hasDefaultFormat = false;\n\n    /**\n     * Construct a new instance of ContentModelEditPlugin class\n     * @param state State of this plugin\n     */\n    constructor(private state: ContentModelFormatPluginState) {\n        // TODO: Remove tempState parameter once we have standalone Content Model editor\n    }\n\n    /**\n     * Get name of this plugin\n     */\n    getName() {\n        return 'ContentModelFormat';\n    }\n\n    /**\n     * The first method that editor will call to a plugin when editor is initializing.\n     * It will pass in the editor instance, plugin should take this chance to save the\n     * editor reference so that it can call to any editor method or format API later.\n     * @param editor The editor object\n     */\n    initialize(editor: IEditor) {\n        // TODO: Later we may need a different interface for Content Model editor plugin\n        this.editor = editor as IStandaloneEditor & IEditor;\n        this.hasDefaultFormat =\n            getObjectKeys(this.state.defaultFormat).filter(\n                x => typeof this.state.defaultFormat[x] !== 'undefined'\n            ).length > 0;\n    }\n\n    /**\n     * The last method that editor will call to a plugin before it is disposed.\n     * Plugin can take this chance to clear the reference to editor. After this method is\n     * called, plugin should not call to any editor method since it will result in error.\n     */\n    dispose() {\n        this.editor = null;\n    }\n\n    /**\n     * Get plugin state object\n     */\n    getState(): ContentModelFormatPluginState {\n        return this.state;\n    }\n\n    /**\n     * Core method for a plugin. Once an event happens in editor, editor will call this\n     * method of each plugin to handle the event as long as the event is not handled\n     * exclusively by another plugin.\n     * @param event The event to handle:\n     */\n    onPluginEvent(event: PluginEvent) {\n        if (!this.editor) {\n            return;\n        }\n\n        switch (event.eventType) {\n            case PluginEventType.Input:\n                const env = this.editor.getEnvironment();\n\n                // In Safari, isComposing will be undefined but isInIME() works\n                // For Android, we can skip checking isComposing since this property is not always reliable in all IME,\n                // and we have tested without this check it can still work correctly\n                if (env.isAndroid || (!event.rawEvent.isComposing && !this.editor.isInIME())) {\n                    this.checkAndApplyPendingFormat(event.rawEvent.data);\n                }\n\n                break;\n\n            case PluginEventType.CompositionEnd:\n                this.checkAndApplyPendingFormat(event.rawEvent.data);\n                break;\n\n            case PluginEventType.KeyDown:\n                if (CursorMovingKeys.has(event.rawEvent.key)) {\n                    this.clearPendingFormat();\n                } else if (\n                    this.hasDefaultFormat &&\n                    (isCharacterValue(event.rawEvent) || event.rawEvent.key == ProcessKey)\n                ) {\n                    applyDefaultFormat(this.editor, this.state.defaultFormat);\n                }\n\n                break;\n\n            case PluginEventType.MouseUp:\n            case PluginEventType.ContentChanged:\n                if (!this.canApplyPendingFormat()) {\n                    this.clearPendingFormat();\n                }\n                break;\n        }\n    }\n\n    private checkAndApplyPendingFormat(data: string | null) {\n        if (this.editor && data && this.state.pendingFormat) {\n            applyPendingFormat(this.editor, data, this.state.pendingFormat.format);\n            this.clearPendingFormat();\n        }\n    }\n\n    private clearPendingFormat() {\n        this.state.pendingFormat = null;\n    }\n\n    /**\n     * @internal\n     * Check if this editor can apply pending format\n     * @param editor The editor to get format from\n     */\n    private canApplyPendingFormat(): boolean {\n        let result = false;\n\n        if (this.state.pendingFormat && this.editor) {\n            const selection = this.editor.getDOMSelection();\n            const range =\n                selection?.type == 'range' && selection.range.collapsed ? selection.range : null;\n            const { posContainer, posOffset } = this.state.pendingFormat;\n\n            if (range && range.startContainer == posContainer && range.startOffset == posOffset) {\n                result = true;\n            }\n        }\n\n        return result;\n    }\n}\n\n/**\n * @internal\n * Create a new instance of ContentModelFormatPlugin.\n * This is mostly for unit test\n */\nexport function createContentModelFormatPlugin(state: ContentModelFormatPluginState) {\n    return new ContentModelFormatPlugin(state);\n}\n"]}

package/lib-mjs/corePlugin/ContentModelTypeInContainerPlugin.d.ts

@@ -0,0 +1,23 @@
+import type { EditorPlugin } from 'roosterjs-editor-types';
+/**
+ * Dummy plugin, just to skip original TypeInContainerPlugin's behavior
+ */
+export declare class ContentModelTypeInContainerPlugin implements EditorPlugin {
+    /**
+     * Get name of this plugin
+     */
+    getName(): string;
+    /**
+     * The first method that editor will call to a plugin when editor is initializing.
+     * It will pass in the editor instance, plugin should take this chance to save the
+     * editor reference so that it can call to any editor method or format API later.
+     * @param editor The editor object
+     */
+    initialize(): void;
+    /**
+     * The last method that editor will call to a plugin before it is disposed.
+     * Plugin can take this chance to clear the reference to editor. After this method is
+     * called, plugin should not call to any editor method since it will result in error.
+     */
+    dispose(): void;
+}

package/lib-mjs/corePlugin/ContentModelTypeInContainerPlugin.js

@@ -0,0 +1,29 @@
+/**
+ * Dummy plugin, just to skip original TypeInContainerPlugin's behavior
+ */
+var ContentModelTypeInContainerPlugin = /** @class */ (function () {
+    function ContentModelTypeInContainerPlugin() {
+    }
+    /**
+     * Get name of this plugin
+     */
+    ContentModelTypeInContainerPlugin.prototype.getName = function () {
+        return 'ContentModelTypeInContainer';
+    };
+    /**
+     * The first method that editor will call to a plugin when editor is initializing.
+     * It will pass in the editor instance, plugin should take this chance to save the
+     * editor reference so that it can call to any editor method or format API later.
+     * @param editor The editor object
+     */
+    ContentModelTypeInContainerPlugin.prototype.initialize = function () { };
+    /**
+     * The last method that editor will call to a plugin before it is disposed.
+     * Plugin can take this chance to clear the reference to editor. After this method is
+     * called, plugin should not call to any editor method since it will result in error.
+     */
+    ContentModelTypeInContainerPlugin.prototype.dispose = function () { };
+    return ContentModelTypeInContainerPlugin;
+}());
+export { ContentModelTypeInContainerPlugin };
+//# sourceMappingURL=ContentModelTypeInContainerPlugin.js.map

package/lib-mjs/corePlugin/ContentModelTypeInContainerPlugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentModelTypeInContainerPlugin.js","sourceRoot":"","sources":["../../../../packages-content-model/roosterjs-content-model-core/lib/corePlugin/ContentModelTypeInContainerPlugin.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH;IAAA;IAsBA,CAAC;IArBG;;OAEG;IACH,mDAAO,GAAP;QACI,OAAO,6BAA6B,CAAC;IACzC,CAAC;IAED;;;;;OAKG;IACH,sDAAU,GAAV,cAAc,CAAC;IAEf;;;;OAIG;IACH,mDAAO,GAAP,cAAW,CAAC;IAChB,wCAAC;AAAD,CAAC,AAtBD,IAsBC","sourcesContent":["import type { EditorPlugin } from 'roosterjs-editor-types';\n\n/**\n * Dummy plugin, just to skip original TypeInContainerPlugin's behavior\n */\nexport class ContentModelTypeInContainerPlugin implements EditorPlugin {\n    /**\n     * Get name of this plugin\n     */\n    getName() {\n        return 'ContentModelTypeInContainer';\n    }\n\n    /**\n     * The first method that editor will call to a plugin when editor is initializing.\n     * It will pass in the editor instance, plugin should take this chance to save the\n     * editor reference so that it can call to any editor method or format API later.\n     * @param editor The editor object\n     */\n    initialize() {}\n\n    /**\n     * The last method that editor will call to a plugin before it is disposed.\n     * Plugin can take this chance to clear the reference to editor. After this method is\n     * called, plugin should not call to any editor method since it will result in error.\n     */\n    dispose() {}\n}\n"]}

package/lib-mjs/corePlugin/utils/addRangeToSelection.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @internal
+ */
+export declare function addRangeToSelection(doc: Document, range: Range): void;

package/lib-mjs/corePlugin/utils/addRangeToSelection.js

@@ -0,0 +1,12 @@
+/**
+ * @internal
+ */
+export function addRangeToSelection(doc, range) {
+    var _a;
+    var selection = (_a = doc.defaultView) === null || _a === void 0 ? void 0 : _a.getSelection();
+    if (selection) {
+        selection.removeAllRanges();
+        selection.addRange(range);
+    }
+}
+//# sourceMappingURL=addRangeToSelection.js.map

package/lib-mjs/corePlugin/utils/addRangeToSelection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"addRangeToSelection.js","sourceRoot":"","sources":["../../../../../packages-content-model/roosterjs-content-model-core/lib/corePlugin/utils/addRangeToSelection.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,UAAU,mBAAmB,CAAC,GAAa,EAAE,KAAY;;IAC3D,IAAM,SAAS,GAAG,MAAA,GAAG,CAAC,WAAW,0CAAE,YAAY,EAAE,CAAC;IAElD,IAAI,SAAS,EAAE;QACX,SAAS,CAAC,eAAe,EAAE,CAAC;QAC5B,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;KAC7B;AACL,CAAC","sourcesContent":["/**\n * @internal\n */\nexport function addRangeToSelection(doc: Document, range: Range) {\n    const selection = doc.defaultView?.getSelection();\n\n    if (selection) {\n        selection.removeAllRanges();\n        selection.addRange(range);\n    }\n}\n"]}

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

@@ -0,0 +1,9 @@
+import type { IEditor } from 'roosterjs-editor-types';
+import type { ContentModelSegmentFormat, IStandaloneEditor } from 'roosterjs-content-model-types';
+/**
+ * @internal
+ * When necessary, set default format as current pending format so it will be applied when Input event is fired
+ * @param editor The Content Model Editor
+ * @param defaultFormat The default segment format to apply
+ */
+export declare function applyDefaultFormat(editor: IStandaloneEditor & IEditor, defaultFormat: ContentModelSegmentFormat): void;