roosterjs-content-model-plugins 0.20.0 → 0.21.0

package/lib/edit/ContentModelEditPlugin.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ContentModelEditPlugin = void 0;
 var keyboardDelete_1 = require("./keyboardDelete");
+var keyboardInput_1 = require("./keyboardInput");
 /**
  * ContentModel edit plugins helps editor to do editing operation on top of content model.
  * This includes:
@@ -62,6 +63,10 @@ var ContentModelEditPlugin = /** @class */ (function () {
                     // No need to clear cache here since if we rely on browser's behavior, there will be Input event and its handler will reconcile cache
                     (0, keyboardDelete_1.keyboardDelete)(editor, rawEvent);
                     break;
+                case 'Enter':
+                default:
+                    (0, keyboardInput_1.keyboardInput)(editor, rawEvent);
+                    break;
             }
         }
     };

package/lib/edit/ContentModelEditPlugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContentModelEditPlugin.js","sourceRoot":"","sources":["../../../../packages-content-model/roosterjs-content-model-plugins/lib/edit/ContentModelEditPlugin.ts"],"names":[],"mappings":";;;AAAA,mDAAkD;AAUlD;;;;;GAKG;AACH;IAAA;QACY,WAAM,GAA+B,IAAI,CAAC;IA4DtD,CAAC;IA1DG;;OAEG;IACH,wCAAO,GAAP;QACI,OAAO,kBAAkB,CAAC;IAC9B,CAAC;IAED;;;;;OAKG;IACH,2CAAU,GAAV,UAAW,MAAe;QACtB,gFAAgF;QAChF,IAAI,CAAC,MAAM,GAAG,MAA6B,CAAC;IAChD,CAAC;IAED;;;;OAIG;IACH,wCAAO,GAAP;QACI,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACvB,CAAC;IAED;;;;;OAKG;IACH,8CAAa,GAAb,UAAc,KAAkB;QAC5B,IAAI,IAAI,CAAC,MAAM,EAAE;YACb,QAAQ,KAAK,CAAC,SAAS,EAAE;gBACrB;oBACI,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;oBAC5C,MAAM;aACb;SACJ;IACL,CAAC;IAEO,mDAAkB,GAA1B,UAA2B,MAA2B,EAAE,KAAyB;QAC7E,IAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC;QAEhC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,IAAI,CAAC,KAAK,CAAC,oBAAoB,EAAE;YAC3D,qHAAqH;YACrH,QAAQ,QAAQ,CAAC,GAAG,EAAE;gBAClB,KAAK,WAAW,CAAC;gBACjB,KAAK,QAAQ;oBACT,8CAA8C;oBAC9C,qIAAqI;oBACrI,IAAA,+BAAc,EAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;oBACjC,MAAM;aACb;SACJ;IACL,CAAC;IACL,6BAAC;AAAD,CAAC,AA7DD,IA6DC;AA7DY,wDAAsB","sourcesContent":["import { keyboardDelete } from './keyboardDelete';\nimport { PluginEventType } from 'roosterjs-editor-types';\nimport type { IContentModelEditor } from 'roosterjs-content-model-editor';\nimport type {\n    EditorPlugin,\n    IEditor,\n    PluginEvent,\n    PluginKeyDownEvent,\n} from 'roosterjs-editor-types';\n\n/**\n * ContentModel edit plugins helps editor to do editing operation on top of content model.\n * This includes:\n * 1. Delete Key\n * 2. Backspace Key\n */\nexport class ContentModelEditPlugin implements EditorPlugin {\n    private editor: IContentModelEditor | null = null;\n\n    /**\n     * Get name of this plugin\n     */\n    getName() {\n        return 'ContentModelEdit';\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 IContentModelEditor;\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     * 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            switch (event.eventType) {\n                case PluginEventType.KeyDown:\n                    this.handleKeyDownEvent(this.editor, event);\n                    break;\n            }\n        }\n    }\n\n    private handleKeyDownEvent(editor: IContentModelEditor, event: PluginKeyDownEvent) {\n        const rawEvent = event.rawEvent;\n\n        if (!rawEvent.defaultPrevented && !event.handledByEditFeature) {\n            // TODO: Consider use ContentEditFeature and need to hide other conflict features that are not based on Content Model\n            switch (rawEvent.key) {\n                case 'Backspace':\n                case 'Delete':\n                    // Use our API to handle BACKSPACE/DELETE key.\n                    // No need to clear cache here since if we rely on browser's behavior, there will be Input event and its handler will reconcile cache\n                    keyboardDelete(editor, rawEvent);\n                    break;\n            }\n        }\n    }\n}\n"]}
+{"version":3,"file":"ContentModelEditPlugin.js","sourceRoot":"","sources":["../../../../packages-content-model/roosterjs-content-model-plugins/lib/edit/ContentModelEditPlugin.ts"],"names":[],"mappings":";;;AAAA,mDAAkD;AAClD,iDAAgD;AAUhD;;;;;GAKG;AACH;IAAA;QACY,WAAM,GAA+B,IAAI,CAAC;IAiEtD,CAAC;IA/DG;;OAEG;IACH,wCAAO,GAAP;QACI,OAAO,kBAAkB,CAAC;IAC9B,CAAC;IAED;;;;;OAKG;IACH,2CAAU,GAAV,UAAW,MAAe;QACtB,gFAAgF;QAChF,IAAI,CAAC,MAAM,GAAG,MAA6B,CAAC;IAChD,CAAC;IAED;;;;OAIG;IACH,wCAAO,GAAP;QACI,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACvB,CAAC;IAED;;;;;OAKG;IACH,8CAAa,GAAb,UAAc,KAAkB;QAC5B,IAAI,IAAI,CAAC,MAAM,EAAE;YACb,QAAQ,KAAK,CAAC,SAAS,EAAE;gBACrB;oBACI,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;oBAC5C,MAAM;aACb;SACJ;IACL,CAAC;IAEO,mDAAkB,GAA1B,UAA2B,MAA2B,EAAE,KAAyB;QAC7E,IAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC;QAEhC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,IAAI,CAAC,KAAK,CAAC,oBAAoB,EAAE;YAC3D,qHAAqH;YACrH,QAAQ,QAAQ,CAAC,GAAG,EAAE;gBAClB,KAAK,WAAW,CAAC;gBACjB,KAAK,QAAQ;oBACT,8CAA8C;oBAC9C,qIAAqI;oBACrI,IAAA,+BAAc,EAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;oBACjC,MAAM;gBAEV,KAAK,OAAO,CAAC;gBACb;oBACI,IAAA,6BAAa,EAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;oBAChC,MAAM;aACb;SACJ;IACL,CAAC;IACL,6BAAC;AAAD,CAAC,AAlED,IAkEC;AAlEY,wDAAsB","sourcesContent":["import { keyboardDelete } from './keyboardDelete';\nimport { keyboardInput } from './keyboardInput';\nimport { PluginEventType } from 'roosterjs-editor-types';\nimport type { IContentModelEditor } from 'roosterjs-content-model-editor';\nimport type {\n    EditorPlugin,\n    IEditor,\n    PluginEvent,\n    PluginKeyDownEvent,\n} from 'roosterjs-editor-types';\n\n/**\n * ContentModel edit plugins helps editor to do editing operation on top of content model.\n * This includes:\n * 1. Delete Key\n * 2. Backspace Key\n */\nexport class ContentModelEditPlugin implements EditorPlugin {\n    private editor: IContentModelEditor | null = null;\n\n    /**\n     * Get name of this plugin\n     */\n    getName() {\n        return 'ContentModelEdit';\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 IContentModelEditor;\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     * 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            switch (event.eventType) {\n                case PluginEventType.KeyDown:\n                    this.handleKeyDownEvent(this.editor, event);\n                    break;\n            }\n        }\n    }\n\n    private handleKeyDownEvent(editor: IContentModelEditor, event: PluginKeyDownEvent) {\n        const rawEvent = event.rawEvent;\n\n        if (!rawEvent.defaultPrevented && !event.handledByEditFeature) {\n            // TODO: Consider use ContentEditFeature and need to hide other conflict features that are not based on Content Model\n            switch (rawEvent.key) {\n                case 'Backspace':\n                case 'Delete':\n                    // Use our API to handle BACKSPACE/DELETE key.\n                    // No need to clear cache here since if we rely on browser's behavior, there will be Input event and its handler will reconcile cache\n                    keyboardDelete(editor, rawEvent);\n                    break;\n\n                case 'Enter':\n                default:\n                    keyboardInput(editor, rawEvent);\n                    break;\n            }\n        }\n    }\n}\n"]}

package/lib/edit/keyboardDelete.d.ts

@@ -4,6 +4,5 @@ import type { IContentModelEditor } from 'roosterjs-content-model-editor';
  * Do keyboard event handling for DELETE/BACKSPACE key
  * @param editor The Content Model Editor
  * @param rawEvent DOM keyboard event
- * @returns True if the event is handled with this function, otherwise false
  */
-export declare function keyboardDelete(editor: IContentModelEditor, rawEvent: KeyboardEvent): boolean;
+export declare function keyboardDelete(editor: IContentModelEditor, rawEvent: KeyboardEvent): true | undefined;

package/lib/edit/keyboardDelete.js

@@ -12,16 +12,12 @@ var deleteCollapsedSelection_1 = require("./deleteSteps/deleteCollapsedSelection
  * Do keyboard event handling for DELETE/BACKSPACE key
  * @param editor The Content Model Editor
  * @param rawEvent DOM keyboard event
- * @returns True if the event is handled with this function, otherwise false
  */
 function keyboardDelete(editor, rawEvent) {
     var selection = editor.getDOMSelection();
-    var range = (selection === null || selection === void 0 ? void 0 : selection.type) == 'range' ? selection.range : null;
-    var isDeleted = false;
-    if (shouldDeleteWithContentModel(range, rawEvent)) {
+    if (shouldDeleteWithContentModel(selection, rawEvent)) {
         editor.formatContentModel(function (model, context) {
             var result = (0, roosterjs_content_model_core_1.deleteSelection)(model, getDeleteSteps(rawEvent, !!editor.getEnvironment().isMac), context).deleteResult;
-            isDeleted = result != 'notDeleted';
             return (0, handleKeyboardEventCommon_1.handleKeyboardEventResult)(editor, model, rawEvent, result, context);
         }, {
             rawEvent: rawEvent,
@@ -31,7 +27,6 @@ function keyboardDelete(editor, rawEvent) {
         });
         return true;
     }
-    return isDeleted;
 }
 exports.keyboardDelete = keyboardDelete;
 function getDeleteSteps(rawEvent, isMac) {
@@ -47,11 +42,20 @@ function getDeleteSteps(rawEvent, isMac) {
         : deleteCollapsedSelection_1.backwardDeleteCollapsedSelection;
     return [deleteAllSegmentBeforeStep, deleteWordSelection, deleteCollapsedSelection];
 }
-function shouldDeleteWithContentModel(range, rawEvent) {
-    return !((range === null || range === void 0 ? void 0 : range.collapsed) &&
-        (0, roosterjs_content_model_dom_1.isNodeOfType)(range.startContainer, 'TEXT_NODE') &&
-        !(0, roosterjs_content_model_core_1.isModifierKey)(rawEvent) &&
-        (canDeleteBefore(rawEvent, range) || canDeleteAfter(rawEvent, range)));
+function shouldDeleteWithContentModel(selection, rawEvent) {
+    if (!selection) {
+        return false; // Nothing to delete
+    }
+    else if (selection.type != 'range' || !selection.range.collapsed) {
+        return true; // Selection is not collapsed, need to delete all selections
+    }
+    else {
+        var range = selection.range;
+        // When selection is collapsed and is in middle of text node, no need to use Content Model to delete
+        return !((0, roosterjs_content_model_dom_1.isNodeOfType)(range.startContainer, 'TEXT_NODE') &&
+            !(0, roosterjs_content_model_core_1.isModifierKey)(rawEvent) &&
+            (canDeleteBefore(rawEvent, range) || canDeleteAfter(rawEvent, range)));
+    }
 }
 function canDeleteBefore(rawEvent, range) {
     return rawEvent.key == 'Backspace' && range.startOffset > 1;

package/lib/edit/keyboardDelete.js.map

@@ -1 +1 @@
-{"version":3,"file":"keyboardDelete.js","sourceRoot":"","sources":["../../../../packages-content-model/roosterjs-content-model-plugins/lib/edit/keyboardDelete.ts"],"names":[],"mappings":";;;AAAA,6EAA4F;AAC5F,+EAA8E;AAC9E,2EAA2D;AAC3D,yEAIqC;AACrC,yEAG2C;AAC3C,mFAGgD;AAIhD;;;;;;GAMG;AACH,SAAgB,cAAc,CAAC,MAA2B,EAAE,QAAuB;IAC/E,IAAM,SAAS,GAAG,MAAM,CAAC,eAAe,EAAE,CAAC;IAC3C,IAAM,KAAK,GAAG,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,IAAI,KAAI,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;IAClE,IAAI,SAAS,GAAG,KAAK,CAAC;IAEtB,IAAI,4BAA4B,CAAC,KAAK,EAAE,QAAQ,CAAC,EAAE;QAC/C,MAAM,CAAC,kBAAkB,CACrB,UAAC,KAAK,EAAE,OAAO;YACX,IAAM,MAAM,GAAG,IAAA,8CAAe,EAC1B,KAAK,EACL,cAAc,CAAC,QAAQ,EAAE,CAAC,CAAC,MAAM,CAAC,cAAc,EAAE,CAAC,KAAK,CAAC,EACzD,OAAO,CACV,CAAC,YAAY,CAAC;YAEf,SAAS,GAAG,MAAM,IAAI,YAAY,CAAC;YAEnC,OAAO,IAAA,qDAAyB,EAAC,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC;QAC/E,CAAC,EACD;YACI,QAAQ,UAAA;YACR,YAAY,EAAE,2CAAY,CAAC,QAAQ;YACnC,aAAa,EAAE,cAAM,OAAA,QAAQ,CAAC,KAAK,EAAd,CAAc;YACnC,OAAO,EAAE,QAAQ,CAAC,GAAG,IAAI,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,oBAAoB;SAC/E,CACJ,CAAC;QAEF,OAAO,IAAI,CAAC;KACf;IAED,OAAO,SAAS,CAAC;AACrB,CAAC;AA9BD,wCA8BC;AAED,SAAS,cAAc,CAAC,QAAuB,EAAE,KAAc;IAC3D,IAAM,SAAS,GAAG,QAAQ,CAAC,GAAG,IAAI,QAAQ,CAAC;IAC3C,IAAM,0BAA0B,GAC5B,IAAA,yDAA6B,EAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,+CAAsB,CAAC,CAAC,CAAC,IAAI,CAAC;IAC1F,IAAM,mBAAmB,GAAG,IAAA,4CAAgB,EAAC,QAAQ,EAAE,KAAK,CAAC;QACzD,CAAC,CAAC,SAAS;YACP,CAAC,CAAC,gDAA0B;YAC5B,CAAC,CAAC,iDAA2B;QACjC,CAAC,CAAC,IAAI,CAAC;IACX,IAAM,wBAAwB,GAAG,SAAS;QACtC,CAAC,CAAC,0DAA+B;QACjC,CAAC,CAAC,2DAAgC,CAAC;IACvC,OAAO,CAAC,0BAA0B,EAAE,mBAAmB,EAAE,wBAAwB,CAAC,CAAC;AACvF,CAAC;AAED,SAAS,4BAA4B,CAAC,KAAmB,EAAE,QAAuB;IAC9E,OAAO,CAAC,CACJ,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,SAAS;QAChB,IAAA,0CAAY,EAAC,KAAK,CAAC,cAAc,EAAE,WAAW,CAAC;QAC/C,CAAC,IAAA,4CAAa,EAAC,QAAQ,CAAC;QACxB,CAAC,eAAe,CAAC,QAAQ,EAAE,KAAK,CAAC,IAAI,cAAc,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,CACxE,CAAC;AACN,CAAC;AAED,SAAS,eAAe,CAAC,QAAuB,EAAE,KAAY;IAC1D,OAAO,QAAQ,CAAC,GAAG,IAAI,WAAW,IAAI,KAAK,CAAC,WAAW,GAAG,CAAC,CAAC;AAChE,CAAC;AAED,SAAS,cAAc,CAAC,QAAuB,EAAE,KAAY;;IACzD,OAAO,CACH,QAAQ,CAAC,GAAG,IAAI,QAAQ;QACxB,KAAK,CAAC,WAAW,GAAG,CAAC,MAAA,MAAA,KAAK,CAAC,cAAc,CAAC,SAAS,0CAAE,MAAM,mCAAI,CAAC,CAAC,GAAG,CAAC,CACxE,CAAC;AACN,CAAC","sourcesContent":["import { ChangeSource, deleteSelection, isModifierKey } from 'roosterjs-content-model-core';\nimport { deleteAllSegmentBefore } from './deleteSteps/deleteAllSegmentBefore';\nimport { isNodeOfType } from 'roosterjs-content-model-dom';\nimport {\n    handleKeyboardEventResult,\n    shouldDeleteAllSegmentsBefore,\n    shouldDeleteWord,\n} from './handleKeyboardEventCommon';\nimport {\n    backwardDeleteWordSelection,\n    forwardDeleteWordSelection,\n} from './deleteSteps/deleteWordSelection';\nimport {\n    backwardDeleteCollapsedSelection,\n    forwardDeleteCollapsedSelection,\n} from './deleteSteps/deleteCollapsedSelection';\nimport type { IContentModelEditor } from 'roosterjs-content-model-editor';\nimport type { DeleteSelectionStep } from 'roosterjs-content-model-types';\n\n/**\n * @internal\n * Do keyboard event handling for DELETE/BACKSPACE key\n * @param editor The Content Model Editor\n * @param rawEvent DOM keyboard event\n * @returns True if the event is handled with this function, otherwise false\n */\nexport function keyboardDelete(editor: IContentModelEditor, rawEvent: KeyboardEvent): boolean {\n    const selection = editor.getDOMSelection();\n    const range = selection?.type == 'range' ? selection.range : null;\n    let isDeleted = false;\n\n    if (shouldDeleteWithContentModel(range, rawEvent)) {\n        editor.formatContentModel(\n            (model, context) => {\n                const result = deleteSelection(\n                    model,\n                    getDeleteSteps(rawEvent, !!editor.getEnvironment().isMac),\n                    context\n                ).deleteResult;\n\n                isDeleted = result != 'notDeleted';\n\n                return handleKeyboardEventResult(editor, model, rawEvent, result, context);\n            },\n            {\n                rawEvent,\n                changeSource: ChangeSource.Keyboard,\n                getChangeData: () => rawEvent.which,\n                apiName: rawEvent.key == 'Delete' ? 'handleDeleteKey' : 'handleBackspaceKey',\n            }\n        );\n\n        return true;\n    }\n\n    return isDeleted;\n}\n\nfunction getDeleteSteps(rawEvent: KeyboardEvent, isMac: boolean): (DeleteSelectionStep | null)[] {\n    const isForward = rawEvent.key == 'Delete';\n    const deleteAllSegmentBeforeStep =\n        shouldDeleteAllSegmentsBefore(rawEvent) && !isForward ? deleteAllSegmentBefore : null;\n    const deleteWordSelection = shouldDeleteWord(rawEvent, isMac)\n        ? isForward\n            ? forwardDeleteWordSelection\n            : backwardDeleteWordSelection\n        : null;\n    const deleteCollapsedSelection = isForward\n        ? forwardDeleteCollapsedSelection\n        : backwardDeleteCollapsedSelection;\n    return [deleteAllSegmentBeforeStep, deleteWordSelection, deleteCollapsedSelection];\n}\n\nfunction shouldDeleteWithContentModel(range: Range | null, rawEvent: KeyboardEvent) {\n    return !(\n        range?.collapsed &&\n        isNodeOfType(range.startContainer, 'TEXT_NODE') &&\n        !isModifierKey(rawEvent) &&\n        (canDeleteBefore(rawEvent, range) || canDeleteAfter(rawEvent, range))\n    );\n}\n\nfunction canDeleteBefore(rawEvent: KeyboardEvent, range: Range) {\n    return rawEvent.key == 'Backspace' && range.startOffset > 1;\n}\n\nfunction canDeleteAfter(rawEvent: KeyboardEvent, range: Range) {\n    return (\n        rawEvent.key == 'Delete' &&\n        range.startOffset < (range.startContainer.nodeValue?.length ?? 0) - 1\n    );\n}\n"]}
+{"version":3,"file":"keyboardDelete.js","sourceRoot":"","sources":["../../../../packages-content-model/roosterjs-content-model-plugins/lib/edit/keyboardDelete.ts"],"names":[],"mappings":"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","sourcesContent":["import { ChangeSource, deleteSelection, isModifierKey } from 'roosterjs-content-model-core';\nimport { deleteAllSegmentBefore } from './deleteSteps/deleteAllSegmentBefore';\nimport { isNodeOfType } from 'roosterjs-content-model-dom';\nimport {\n    handleKeyboardEventResult,\n    shouldDeleteAllSegmentsBefore,\n    shouldDeleteWord,\n} from './handleKeyboardEventCommon';\nimport {\n    backwardDeleteWordSelection,\n    forwardDeleteWordSelection,\n} from './deleteSteps/deleteWordSelection';\nimport {\n    backwardDeleteCollapsedSelection,\n    forwardDeleteCollapsedSelection,\n} from './deleteSteps/deleteCollapsedSelection';\nimport type { IContentModelEditor } from 'roosterjs-content-model-editor';\nimport type { DOMSelection, DeleteSelectionStep } from 'roosterjs-content-model-types';\n\n/**\n * @internal\n * Do keyboard event handling for DELETE/BACKSPACE key\n * @param editor The Content Model Editor\n * @param rawEvent DOM keyboard event\n */\nexport function keyboardDelete(editor: IContentModelEditor, rawEvent: KeyboardEvent) {\n    const selection = editor.getDOMSelection();\n\n    if (shouldDeleteWithContentModel(selection, rawEvent)) {\n        editor.formatContentModel(\n            (model, context) => {\n                const result = deleteSelection(\n                    model,\n                    getDeleteSteps(rawEvent, !!editor.getEnvironment().isMac),\n                    context\n                ).deleteResult;\n\n                return handleKeyboardEventResult(editor, model, rawEvent, result, context);\n            },\n            {\n                rawEvent,\n                changeSource: ChangeSource.Keyboard,\n                getChangeData: () => rawEvent.which,\n                apiName: rawEvent.key == 'Delete' ? 'handleDeleteKey' : 'handleBackspaceKey',\n            }\n        );\n\n        return true;\n    }\n}\n\nfunction getDeleteSteps(rawEvent: KeyboardEvent, isMac: boolean): (DeleteSelectionStep | null)[] {\n    const isForward = rawEvent.key == 'Delete';\n    const deleteAllSegmentBeforeStep =\n        shouldDeleteAllSegmentsBefore(rawEvent) && !isForward ? deleteAllSegmentBefore : null;\n    const deleteWordSelection = shouldDeleteWord(rawEvent, isMac)\n        ? isForward\n            ? forwardDeleteWordSelection\n            : backwardDeleteWordSelection\n        : null;\n    const deleteCollapsedSelection = isForward\n        ? forwardDeleteCollapsedSelection\n        : backwardDeleteCollapsedSelection;\n    return [deleteAllSegmentBeforeStep, deleteWordSelection, deleteCollapsedSelection];\n}\n\nfunction shouldDeleteWithContentModel(selection: DOMSelection | null, rawEvent: KeyboardEvent) {\n    if (!selection) {\n        return false; // Nothing to delete\n    } else if (selection.type != 'range' || !selection.range.collapsed) {\n        return true; // Selection is not collapsed, need to delete all selections\n    } else {\n        const range = selection.range;\n\n        // When selection is collapsed and is in middle of text node, no need to use Content Model to delete\n        return !(\n            isNodeOfType(range.startContainer, 'TEXT_NODE') &&\n            !isModifierKey(rawEvent) &&\n            (canDeleteBefore(rawEvent, range) || canDeleteAfter(rawEvent, range))\n        );\n    }\n}\n\nfunction canDeleteBefore(rawEvent: KeyboardEvent, range: Range) {\n    return rawEvent.key == 'Backspace' && range.startOffset > 1;\n}\n\nfunction canDeleteAfter(rawEvent: KeyboardEvent, range: Range) {\n    return (\n        rawEvent.key == 'Delete' &&\n        range.startOffset < (range.startContainer.nodeValue?.length ?? 0) - 1\n    );\n}\n"]}

package/lib/edit/keyboardInput.d.ts

@@ -0,0 +1,5 @@
+import type { IContentModelEditor } from 'roosterjs-content-model-editor';
+/**
+ * @internal
+ */
+export declare function keyboardInput(editor: IContentModelEditor, rawEvent: KeyboardEvent): true | undefined;

package/lib/edit/keyboardInput.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.keyboardInput = void 0;
+var roosterjs_content_model_core_1 = require("roosterjs-content-model-core");
+/**
+ * @internal
+ */
+function keyboardInput(editor, rawEvent) {
+    var selection = editor.getDOMSelection();
+    if (shouldInputWithContentModel(selection, rawEvent)) {
+        editor.addUndoSnapshot();
+        editor.formatContentModel(function (model, context) {
+            var _a;
+            var result = (0, roosterjs_content_model_core_1.deleteSelection)(model, [], context);
+            // We have deleted selection then we will let browser to handle the input.
+            // With this combined operation, we don't wan to mass up the cached model so clear it
+            context.clearModelCache = true;
+            // Skip undo snapshot here and add undo snapshot before the operation so that we don't add another undo snapshot in middle of this replace operation
+            context.skipUndoSnapshot = true;
+            if (result.deleteResult == 'range') {
+                // We have deleted something, next input should inherit the segment format from deleted content, so set pending format here
+                context.newPendingFormat = (_a = result.insertPoint) === null || _a === void 0 ? void 0 : _a.marker.format;
+                // Do not preventDefault since we still want browser to handle the final input for now
+                return true;
+            }
+            else {
+                return false;
+            }
+        }, {
+            rawEvent: rawEvent,
+        });
+        return true;
+    }
+}
+exports.keyboardInput = keyboardInput;
+function shouldInputWithContentModel(selection, rawEvent) {
+    if (!selection) {
+        return false; // Nothing to delete
+    }
+    else if (!(0, roosterjs_content_model_core_1.isModifierKey)(rawEvent) &&
+        (rawEvent.key == 'Enter' || rawEvent.key == 'Space' || rawEvent.key.length == 1)) {
+        return selection.type != 'range' || !selection.range.collapsed; // TODO: Also handle Enter key even selection is collapsed
+    }
+    else {
+        return false;
+    }
+}
+//# sourceMappingURL=keyboardInput.js.map

package/lib/edit/keyboardInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboardInput.js","sourceRoot":"","sources":["../../../../packages-content-model/roosterjs-content-model-plugins/lib/edit/keyboardInput.ts"],"names":[],"mappings":";;;AAAA,6EAA8E;AAI9E;;GAEG;AACH,SAAgB,aAAa,CAAC,MAA2B,EAAE,QAAuB;IAC9E,IAAM,SAAS,GAAG,MAAM,CAAC,eAAe,EAAE,CAAC;IAE3C,IAAI,2BAA2B,CAAC,SAAS,EAAE,QAAQ,CAAC,EAAE;QAClD,MAAM,CAAC,eAAe,EAAE,CAAC;QAEzB,MAAM,CAAC,kBAAkB,CACrB,UAAC,KAAK,EAAE,OAAO;;YACX,IAAM,MAAM,GAAG,IAAA,8CAAe,EAAC,KAAK,EAAE,EAAE,EAAE,OAAO,CAAC,CAAC;YAEnD,0EAA0E;YAC1E,qFAAqF;YACrF,OAAO,CAAC,eAAe,GAAG,IAAI,CAAC;YAE/B,oJAAoJ;YACpJ,OAAO,CAAC,gBAAgB,GAAG,IAAI,CAAC;YAEhC,IAAI,MAAM,CAAC,YAAY,IAAI,OAAO,EAAE;gBAChC,2HAA2H;gBAC3H,OAAO,CAAC,gBAAgB,GAAG,MAAA,MAAM,CAAC,WAAW,0CAAE,MAAM,CAAC,MAAM,CAAC;gBAE7D,sFAAsF;gBACtF,OAAO,IAAI,CAAC;aACf;iBAAM;gBACH,OAAO,KAAK,CAAC;aAChB;QACL,CAAC,EACD;YACI,QAAQ,UAAA;SACX,CACJ,CAAC;QAEF,OAAO,IAAI,CAAC;KACf;AACL,CAAC;AAlCD,sCAkCC;AAED,SAAS,2BAA2B,CAAC,SAA8B,EAAE,QAAuB;IACxF,IAAI,CAAC,SAAS,EAAE;QACZ,OAAO,KAAK,CAAC,CAAC,oBAAoB;KACrC;SAAM,IACH,CAAC,IAAA,4CAAa,EAAC,QAAQ,CAAC;QACxB,CAAC,QAAQ,CAAC,GAAG,IAAI,OAAO,IAAI,QAAQ,CAAC,GAAG,IAAI,OAAO,IAAI,QAAQ,CAAC,GAAG,CAAC,MAAM,IAAI,CAAC,CAAC,EAClF;QACE,OAAO,SAAS,CAAC,IAAI,IAAI,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,0DAA0D;KAC7H;SAAM;QACH,OAAO,KAAK,CAAC;KAChB;AACL,CAAC","sourcesContent":["import { deleteSelection, isModifierKey } from 'roosterjs-content-model-core';\nimport type { IContentModelEditor } from 'roosterjs-content-model-editor';\nimport type { DOMSelection } from 'roosterjs-content-model-types';\n\n/**\n * @internal\n */\nexport function keyboardInput(editor: IContentModelEditor, rawEvent: KeyboardEvent) {\n    const selection = editor.getDOMSelection();\n\n    if (shouldInputWithContentModel(selection, rawEvent)) {\n        editor.addUndoSnapshot();\n\n        editor.formatContentModel(\n            (model, context) => {\n                const result = deleteSelection(model, [], context);\n\n                // We have deleted selection then we will let browser to handle the input.\n                // With this combined operation, we don't wan to mass up the cached model so clear it\n                context.clearModelCache = true;\n\n                // Skip undo snapshot here and add undo snapshot before the operation so that we don't add another undo snapshot in middle of this replace operation\n                context.skipUndoSnapshot = true;\n\n                if (result.deleteResult == 'range') {\n                    // We have deleted something, next input should inherit the segment format from deleted content, so set pending format here\n                    context.newPendingFormat = result.insertPoint?.marker.format;\n\n                    // Do not preventDefault since we still want browser to handle the final input for now\n                    return true;\n                } else {\n                    return false;\n                }\n            },\n            {\n                rawEvent,\n            }\n        );\n\n        return true;\n    }\n}\n\nfunction shouldInputWithContentModel(selection: DOMSelection | null, rawEvent: KeyboardEvent) {\n    if (!selection) {\n        return false; // Nothing to delete\n    } else if (\n        !isModifierKey(rawEvent) &&\n        (rawEvent.key == 'Enter' || rawEvent.key == 'Space' || rawEvent.key.length == 1)\n    ) {\n        return selection.type != 'range' || !selection.range.collapsed; // TODO: Also handle Enter key even selection is collapsed\n    } else {\n        return false;\n    }\n}\n"]}

package/lib/entityDelimiter/EntityDelimiterPlugin.d.ts

@@ -0,0 +1,35 @@
+import type { EditorPlugin, IEditor, PluginEvent } from 'roosterjs-editor-types';
+/**
+ * Entity delimiter plugin helps maintain delimiter elements around an entity so that user can put focus before/after an entity
+ */
+export declare class EntityDelimiterPlugin implements EditorPlugin {
+    private editor;
+    /**
+     * Get a friendly 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;
+    /**
+     * 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;
+}
+/**
+ * @internal
+ */
+export declare function normalizeDelimitersInEditor(editor: IEditor): void;

package/lib/entityDelimiter/EntityDelimiterPlugin.js

@@ -0,0 +1,255 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizeDelimitersInEditor = exports.EntityDelimiterPlugin = void 0;
+var roosterjs_content_model_core_1 = require("roosterjs-content-model-core");
+var roosterjs_content_model_dom_1 = require("roosterjs-content-model-dom");
+var roosterjs_editor_dom_1 = require("roosterjs-editor-dom");
+var DELIMITER_SELECTOR = '.' + "entityDelimiterAfter" /* DELIMITER_AFTER */ + ',.' + "entityDelimiterBefore" /* DELIMITER_BEFORE */;
+var ZERO_WIDTH_SPACE = '\u200B';
+var INLINE_ENTITY_SELECTOR = 'span' + (0, roosterjs_editor_dom_1.getEntitySelector)();
+/**
+ * Entity delimiter plugin helps maintain delimiter elements around an entity so that user can put focus before/after an entity
+ */
+var EntityDelimiterPlugin = /** @class */ (function () {
+    function EntityDelimiterPlugin() {
+        this.editor = null;
+    }
+    /**
+     * Get a friendly name of this plugin
+     */
+    EntityDelimiterPlugin.prototype.getName = function () {
+        return 'EntityDelimiter';
+    };
+    /**
+     * 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
+     */
+    EntityDelimiterPlugin.prototype.initialize = function (editor) {
+        this.editor = editor;
+    };
+    /**
+     * 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.
+     */
+    EntityDelimiterPlugin.prototype.dispose = function () {
+        this.editor = null;
+    };
+    /**
+     * 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:
+     */
+    EntityDelimiterPlugin.prototype.onPluginEvent = function (event) {
+        if (this.editor) {
+            switch (event.eventType) {
+                case 7 /* ContentChanged */:
+                case 11 /* EditorReady */:
+                    normalizeDelimitersInEditor(this.editor);
+                    break;
+                case 10 /* BeforePaste */:
+                    var fragment = event.fragment;
+                    addDelimitersIfNeeded(fragment.querySelectorAll(INLINE_ENTITY_SELECTOR));
+                    break;
+                case 8 /* ExtractContentWithDom */:
+                case 9 /* BeforeCutCopy */:
+                    event.clonedRoot.querySelectorAll(DELIMITER_SELECTOR).forEach(function (node) {
+                        if ((0, roosterjs_editor_dom_1.getDelimiterFromElement)(node)) {
+                            removeNode(node);
+                        }
+                        else {
+                            removeDelimiterAttr(node);
+                        }
+                    });
+                    break;
+                case 0 /* KeyDown */:
+                    handleKeyDownEvent(this.editor, event);
+                    break;
+            }
+        }
+    };
+    return EntityDelimiterPlugin;
+}());
+exports.EntityDelimiterPlugin = EntityDelimiterPlugin;
+function preventTypeInDelimiter(delimiter) {
+    var _a, _b, _c, _d;
+    delimiter.normalize();
+    var textNode = delimiter.firstChild;
+    var index = (_b = (_a = textNode.nodeValue) === null || _a === void 0 ? void 0 : _a.indexOf(ZERO_WIDTH_SPACE)) !== null && _b !== void 0 ? _b : -1;
+    if (index >= 0) {
+        (0, roosterjs_editor_dom_1.splitTextNode)(textNode, index == 0 ? 1 : index, false /* returnFirstPart */);
+        var nodeToMove_1;
+        delimiter.childNodes.forEach(function (node) {
+            if (node.nodeValue !== ZERO_WIDTH_SPACE) {
+                nodeToMove_1 = node;
+            }
+        });
+        if (nodeToMove_1) {
+            (_c = delimiter.parentElement) === null || _c === void 0 ? void 0 : _c.insertBefore(nodeToMove_1, delimiter.className == "entityDelimiterBefore" /* DELIMITER_BEFORE */
+                ? delimiter
+                : delimiter.nextSibling);
+            var selection = (_d = nodeToMove_1.ownerDocument) === null || _d === void 0 ? void 0 : _d.getSelection();
+            if (selection) {
+                selection.setPosition(nodeToMove_1, new roosterjs_editor_dom_1.Position(nodeToMove_1, -1 /* End */).offset);
+            }
+        }
+    }
+}
+/**
+ * @internal
+ */
+function normalizeDelimitersInEditor(editor) {
+    removeInvalidDelimiters(editor.queryElements(DELIMITER_SELECTOR));
+    addDelimitersIfNeeded(editor.queryElements(INLINE_ENTITY_SELECTOR));
+}
+exports.normalizeDelimitersInEditor = normalizeDelimitersInEditor;
+function addDelimitersIfNeeded(nodes) {
+    nodes.forEach(function (node) {
+        if ((0, roosterjs_content_model_dom_1.isEntityElement)(node)) {
+            (0, roosterjs_content_model_dom_1.addDelimiters)(node.ownerDocument, node);
+        }
+    });
+}
+function removeNode(el) {
+    var _a;
+    (_a = el === null || el === void 0 ? void 0 : el.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(el);
+}
+function removeInvalidDelimiters(nodes) {
+    nodes.forEach(function (node) {
+        if ((0, roosterjs_editor_dom_1.getDelimiterFromElement)(node)) {
+            var sibling = node.classList.contains("entityDelimiterBefore" /* DELIMITER_BEFORE */)
+                ? node.nextElementSibling
+                : node.previousElementSibling;
+            if (!((0, roosterjs_content_model_dom_1.isNodeOfType)(sibling, 'ELEMENT_NODE') && (0, roosterjs_editor_dom_1.getEntityFromElement)(sibling))) {
+                removeNode(node);
+            }
+        }
+        else {
+            removeDelimiterAttr(node);
+        }
+    });
+}
+function removeDelimiterAttr(node, checkEntity) {
+    if (checkEntity === void 0) { checkEntity = true; }
+    if (!node) {
+        return;
+    }
+    var isAfter = node.classList.contains("entityDelimiterAfter" /* DELIMITER_AFTER */);
+    var entitySibling = isAfter ? node.previousElementSibling : node.nextElementSibling;
+    if (checkEntity && entitySibling && (0, roosterjs_content_model_dom_1.isEntityElement)(entitySibling)) {
+        return;
+    }
+    node.classList.remove("entityDelimiterAfter" /* DELIMITER_AFTER */, "entityDelimiterBefore" /* DELIMITER_BEFORE */);
+    node.normalize();
+    node.childNodes.forEach(function (cn) {
+        var _a, _b, _c;
+        var index = (_b = (_a = cn.textContent) === null || _a === void 0 ? void 0 : _a.indexOf(ZERO_WIDTH_SPACE)) !== null && _b !== void 0 ? _b : -1;
+        if (index >= 0) {
+            (_c = (0, roosterjs_editor_dom_1.createRange)(cn, index, cn, index + 1)) === null || _c === void 0 ? void 0 : _c.deleteContents();
+        }
+    });
+}
+function handleCollapsedEnter(editor, delimiter) {
+    var isAfter = delimiter.classList.contains("entityDelimiterAfter" /* DELIMITER_AFTER */);
+    var entity = !isAfter ? delimiter.nextSibling : delimiter.previousSibling;
+    var block = getBlock(editor, delimiter);
+    editor.runAsync(function () {
+        if (!block) {
+            return;
+        }
+        var blockToCheck = isAfter ? block.nextSibling : block.previousSibling;
+        if (blockToCheck && (0, roosterjs_content_model_dom_1.isNodeOfType)(blockToCheck, 'ELEMENT_NODE')) {
+            var delimiters = blockToCheck.querySelectorAll(DELIMITER_SELECTOR);
+            // Check if the last or first delimiter still contain the delimiter class and remove it.
+            var delimiterToCheck = delimiters.item(isAfter ? 0 : delimiters.length - 1);
+            removeDelimiterAttr(delimiterToCheck);
+        }
+        if (entity && (0, roosterjs_content_model_dom_1.isEntityElement)(entity)) {
+            var entityElement = entity;
+            var nextElementSibling = entityElement.nextElementSibling, previousElementSibling = entityElement.previousElementSibling;
+            [nextElementSibling, previousElementSibling].forEach(function (el) {
+                // Check if after Enter the ZWS got removed but we still have a element with the class
+                // Remove the attributes of the element if it is invalid now.
+                if (el && (0, roosterjs_editor_dom_1.matchesSelector)(el, DELIMITER_SELECTOR) && !(0, roosterjs_editor_dom_1.getDelimiterFromElement)(el)) {
+                    removeDelimiterAttr(el, false /* checkEntity */);
+                }
+            });
+            // Add delimiters to the entity if needed because on Enter we can sometimes lose the ZWS of the element.
+            (0, roosterjs_content_model_dom_1.addDelimiters)(entityElement.ownerDocument, entityElement);
+        }
+    });
+}
+var getPosition = function (container) {
+    if (container && (0, roosterjs_editor_dom_1.getDelimiterFromElement)(container)) {
+        var isAfter = container.classList.contains("entityDelimiterAfter" /* DELIMITER_AFTER */);
+        return new roosterjs_editor_dom_1.Position(container, isAfter ? -3 /* After */ : -2 /* Before */);
+    }
+    return undefined;
+};
+function getBlock(editor, element) {
+    var _a;
+    if (!element) {
+        return undefined;
+    }
+    var block = (_a = editor.getBlockElementAtNode(element)) === null || _a === void 0 ? void 0 : _a.getStartNode();
+    while (block && (!(0, roosterjs_content_model_dom_1.isNodeOfType)(block, 'ELEMENT_NODE') || !(0, roosterjs_content_model_dom_1.isBlockElement)(block))) {
+        block = editor.contains(block.parentElement) ? block.parentElement : undefined;
+    }
+    return block;
+}
+function handleSelectionNotCollapsed(editor, range, event) {
+    var startContainer = range.startContainer, endContainer = range.endContainer, startOffset = range.startOffset, endOffset = range.endOffset;
+    var startElement = editor.getElementAtCursor(DELIMITER_SELECTOR, startContainer);
+    var endElement = editor.getElementAtCursor(DELIMITER_SELECTOR, endContainer);
+    var startUpdate = getPosition(startElement);
+    var endUpdate = getPosition(endElement);
+    if (startUpdate || endUpdate) {
+        editor.select(startUpdate !== null && startUpdate !== void 0 ? startUpdate : new roosterjs_editor_dom_1.Position(startContainer, startOffset), endUpdate !== null && endUpdate !== void 0 ? endUpdate : new roosterjs_editor_dom_1.Position(endContainer, endOffset));
+    }
+    editor.runAsync(function (aEditor) {
+        var delimiter = aEditor.getElementAtCursor(DELIMITER_SELECTOR);
+        if (delimiter) {
+            preventTypeInDelimiter(delimiter);
+            if (event.which === 13 /* ENTER */) {
+                removeDelimiterAttr(delimiter);
+            }
+        }
+    });
+}
+function handleKeyDownEvent(editor, event) {
+    var _a, _b;
+    var range = editor.getSelectionRangeEx();
+    var rawEvent = event.rawEvent;
+    if (range.type != 0 /* Normal */) {
+        return;
+    }
+    if (range.areAllCollapsed && ((0, roosterjs_content_model_core_1.isCharacterValue)(rawEvent) || rawEvent.which === 13 /* ENTER */)) {
+        var position = (_a = editor.getFocusedPosition()) === null || _a === void 0 ? void 0 : _a.normalize();
+        if (!position) {
+            return;
+        }
+        var element = position.element, node = position.node;
+        var refNode = element == node ? element.childNodes.item(position.offset) : element;
+        var delimiter_1 = editor.getElementAtCursor(DELIMITER_SELECTOR, refNode);
+        if (!delimiter_1) {
+            return;
+        }
+        if (rawEvent.which === 13 /* ENTER */) {
+            handleCollapsedEnter(editor, delimiter_1);
+        }
+        else if (((_b = delimiter_1.firstChild) === null || _b === void 0 ? void 0 : _b.nodeType) == 3 /* Text */) {
+            editor.runAsync(function () { return preventTypeInDelimiter(delimiter_1); });
+        }
+    }
+    else if (!range.areAllCollapsed && !rawEvent.shiftKey && rawEvent.which != 16 /* SHIFT */) {
+        var currentRange = range.ranges[0];
+        if (!currentRange) {
+            return;
+        }
+        handleSelectionNotCollapsed(editor, currentRange, rawEvent);
+    }
+}
+//# sourceMappingURL=EntityDelimiterPlugin.js.map

package/lib/entityDelimiter/EntityDelimiterPlugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EntityDelimiterPlugin.js","sourceRoot":"","sources":["../../../../packages-content-model/roosterjs-content-model-plugins/lib/entityDelimiter/EntityDelimiterPlugin.ts"],"names":[],"mappings":";;;AAAA,6EAAgE;AAChE,2EAKqC;AASrC,6DAQ8B;AAS9B,IAAM,kBAAkB,GACpB,GAAG,+CAAmC,GAAG,IAAI,iDAAoC,CAAC;AACtF,IAAM,gBAAgB,GAAG,QAAQ,CAAC;AAClC,IAAM,sBAAsB,GAAG,MAAM,GAAG,IAAA,wCAAiB,GAAE,CAAC;AAE5D;;GAEG;AACH;IAAA;QACY,WAAM,GAA+B,IAAI,CAAC;IAiEtD,CAAC;IA/DG;;OAEG;IACH,uCAAO,GAAP;QACI,OAAO,iBAAiB,CAAC;IAC7B,CAAC;IAED;;;;;OAKG;IACH,0CAAU,GAAV,UAAW,MAAe;QACtB,IAAI,CAAC,MAAM,GAAG,MAA6B,CAAC;IAChD,CAAC;IAED;;;;OAIG;IACH,uCAAO,GAAP;QACI,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACvB,CAAC;IAED;;;;;OAKG;IACH,6CAAa,GAAb,UAAc,KAAkB;QAC5B,IAAI,IAAI,CAAC,MAAM,EAAE;YACb,QAAQ,KAAK,CAAC,SAAS,EAAE;gBACrB,4BAAoC;gBACpC;oBACI,2BAA2B,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;oBACzC,MAAM;gBAEV;oBACY,IAAA,QAAQ,GAAK,KAAK,SAAV,CAAW;oBAC3B,qBAAqB,CAAC,QAAQ,CAAC,gBAAgB,CAAC,sBAAsB,CAAC,CAAC,CAAC;oBAEzE,MAAM;gBAEV,mCAA2C;gBAC3C;oBACI,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,OAAO,CAAC,UAAA,IAAI;wBAC9D,IAAI,IAAA,8CAAuB,EAAC,IAAI,CAAC,EAAE;4BAC/B,UAAU,CAAC,IAAI,CAAC,CAAC;yBACpB;6BAAM;4BACH,mBAAmB,CAAC,IAAI,CAAC,CAAC;yBAC7B;oBACL,CAAC,CAAC,CAAC;oBACH,MAAM;gBAEV;oBACI,kBAAkB,CAAC,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;oBACvC,MAAM;aACb;SACJ;IACL,CAAC;IACL,4BAAC;AAAD,CAAC,AAlED,IAkEC;AAlEY,sDAAqB;AAoElC,SAAS,sBAAsB,CAAC,SAAsB;;IAClD,SAAS,CAAC,SAAS,EAAE,CAAC;IACtB,IAAM,QAAQ,GAAG,SAAS,CAAC,UAAkB,CAAC;IAC9C,IAAM,KAAK,GAAG,MAAA,MAAA,QAAQ,CAAC,SAAS,0CAAE,OAAO,CAAC,gBAAgB,CAAC,mCAAI,CAAC,CAAC,CAAC;IAClE,IAAI,KAAK,IAAI,CAAC,EAAE;QACZ,IAAA,oCAAa,EAAO,QAAQ,EAAE,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,qBAAqB,CAAC,CAAC;QACnF,IAAI,YAA4B,CAAC;QACjC,SAAS,CAAC,UAAU,CAAC,OAAO,CAAC,UAAA,IAAI;YAC7B,IAAI,IAAI,CAAC,SAAS,KAAK,gBAAgB,EAAE;gBACrC,YAAU,GAAG,IAAI,CAAC;aACrB;QACL,CAAC,CAAC,CAAC;QACH,IAAI,YAAU,EAAE;YACZ,MAAA,SAAS,CAAC,aAAa,0CAAE,YAAY,CACjC,YAAU,EACV,SAAS,CAAC,SAAS,kDAAqC;gBACpD,CAAC,CAAC,SAAS;gBACX,CAAC,CAAC,SAAS,CAAC,WAAW,CAC9B,CAAC;YACF,IAAM,SAAS,GAAG,MAAA,YAAU,CAAC,aAAa,0CAAE,YAAY,EAAE,CAAC;YAE3D,IAAI,SAAS,EAAE;gBACX,SAAS,CAAC,WAAW,CACjB,YAAU,EACV,IAAI,+BAAQ,CAAC,YAAU,eAAmB,CAAC,MAAM,CACpD,CAAC;aACL;SACJ;KACJ;AACL,CAAC;AAED;;GAEG;AACH,SAAgB,2BAA2B,CAAC,MAAe;IACvD,uBAAuB,CAAC,MAAM,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAClE,qBAAqB,CAAC,MAAM,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC,CAAC;AACxE,CAAC;AAHD,kEAGC;AAED,SAAS,qBAAqB,CAAC,KAAsC;IACjE,KAAK,CAAC,OAAO,CAAC,UAAA,IAAI;QACd,IAAI,IAAA,6CAAe,EAAC,IAAI,CAAC,EAAE;YACvB,IAAA,2CAAa,EAAC,IAAI,CAAC,aAAa,EAAE,IAAmB,CAAC,CAAC;SAC1D;IACL,CAAC,CAAC,CAAC;AACP,CAAC;AAED,SAAS,UAAU,CAAC,EAA2B;;IAC3C,MAAA,EAAE,aAAF,EAAE,uBAAF,EAAE,CAAE,aAAa,0CAAE,WAAW,CAAC,EAAE,CAAC,CAAC;AACvC,CAAC;AAED,SAAS,uBAAuB,CAAC,KAAsC;IACnE,KAAK,CAAC,OAAO,CAAC,UAAA,IAAI;QACd,IAAI,IAAA,8CAAuB,EAAC,IAAI,CAAC,EAAE;YAC/B,IAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,QAAQ,gDAAmC;gBACtE,CAAC,CAAC,IAAI,CAAC,kBAAkB;gBACzB,CAAC,CAAC,IAAI,CAAC,sBAAsB,CAAC;YAClC,IAAI,CAAC,CAAC,IAAA,0CAAY,EAAC,OAAO,EAAE,cAAc,CAAC,IAAI,IAAA,2CAAoB,EAAC,OAAO,CAAC,CAAC,EAAE;gBAC3E,UAAU,CAAC,IAAI,CAAC,CAAC;aACpB;SACJ;aAAM;YACH,mBAAmB,CAAC,IAAI,CAAC,CAAC;SAC7B;IACL,CAAC,CAAC,CAAC;AACP,CAAC;AAED,SAAS,mBAAmB,CAAC,IAAgC,EAAE,WAA2B;IAA3B,4BAAA,EAAA,kBAA2B;IACtF,IAAI,CAAC,IAAI,EAAE;QACP,OAAO;KACV;IAED,IAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,QAAQ,8CAAkC,CAAC;IAC1E,IAAM,aAAa,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,IAAI,CAAC,kBAAkB,CAAC;IACtF,IAAI,WAAW,IAAI,aAAa,IAAI,IAAA,6CAAe,EAAC,aAAa,CAAC,EAAE;QAChE,OAAO;KACV;IAED,IAAI,CAAC,SAAS,CAAC,MAAM,8FAAqE,CAAC;IAE3F,IAAI,CAAC,SAAS,EAAE,CAAC;IACjB,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,UAAA,EAAE;;QACtB,IAAM,KAAK,GAAG,MAAA,MAAA,EAAE,CAAC,WAAW,0CAAE,OAAO,CAAC,gBAAgB,CAAC,mCAAI,CAAC,CAAC,CAAC;QAC9D,IAAI,KAAK,IAAI,CAAC,EAAE;YACZ,MAAA,IAAA,kCAAW,EAAC,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,GAAG,CAAC,CAAC,0CAAE,cAAc,EAAE,CAAC;SAC3D;IACL,CAAC,CAAC,CAAC;AACP,CAAC;AAED,SAAS,oBAAoB,CAAC,MAAe,EAAE,SAAsB;IACjE,IAAM,OAAO,GAAG,SAAS,CAAC,SAAS,CAAC,QAAQ,8CAAkC,CAAC;IAC/E,IAAM,MAAM,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,eAAe,CAAC;IAC5E,IAAM,KAAK,GAAG,QAAQ,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAE1C,MAAM,CAAC,QAAQ,CAAC;QACZ,IAAI,CAAC,KAAK,EAAE;YACR,OAAO;SACV;QACD,IAAM,YAAY,GAAG,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,eAAe,CAAC;QACzE,IAAI,YAAY,IAAI,IAAA,0CAAY,EAAC,YAAY,EAAE,cAAc,CAAC,EAAE;YAC5D,IAAM,UAAU,GAAG,YAAY,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;YACrE,wFAAwF;YACxF,IAAM,gBAAgB,GAAG,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;YAC9E,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;SACzC;QAED,IAAI,MAAM,IAAI,IAAA,6CAAe,EAAC,MAAM,CAAC,EAAE;YACnC,IAAM,aAAa,GAAG,MAAqB,CAAC;YACpC,IAAA,kBAAkB,GAA6B,aAAa,mBAA1C,EAAE,sBAAsB,GAAK,aAAa,uBAAlB,CAAmB;YACrE,CAAC,kBAAkB,EAAE,sBAAsB,CAAC,CAAC,OAAO,CAAC,UAAA,EAAE;gBACnD,sFAAsF;gBACtF,6DAA6D;gBAC7D,IAAI,EAAE,IAAI,IAAA,sCAAe,EAAC,EAAE,EAAE,kBAAkB,CAAC,IAAI,CAAC,IAAA,8CAAuB,EAAC,EAAE,CAAC,EAAE;oBAC/E,mBAAmB,CAAC,EAAE,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC;iBACpD;YACL,CAAC,CAAC,CAAC;YAEH,wGAAwG;YACxG,IAAA,2CAAa,EAAC,aAAa,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;SAC7D;IACL,CAAC,CAAC,CAAC;AACP,CAAC;AAED,IAAM,WAAW,GAAG,UAAC,SAA6B;IAC9C,IAAI,SAAS,IAAI,IAAA,8CAAuB,EAAC,SAAS,CAAC,EAAE;QACjD,IAAM,OAAO,GAAG,SAAS,CAAC,SAAS,CAAC,QAAQ,8CAAkC,CAAC;QAC/E,OAAO,IAAI,+BAAQ,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,gBAAoB,CAAC,gBAAoB,CAAC,CAAC;KACtF;IACD,OAAO,SAAS,CAAC;AACrB,CAAC,CAAC;AAEF,SAAS,QAAQ,CAAC,MAAe,EAAE,OAAyB;;IACxD,IAAI,CAAC,OAAO,EAAE;QACV,OAAO,SAAS,CAAC;KACpB;IAED,IAAI,KAAK,GAAG,MAAA,MAAM,CAAC,qBAAqB,CAAC,OAAO,CAAC,0CAAE,YAAY,EAAE,CAAC;IAElE,OAAO,KAAK,IAAI,CAAC,CAAC,IAAA,0CAAY,EAAC,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,IAAA,4CAAc,EAAC,KAAK,CAAC,CAAC,EAAE;QAC9E,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,aAAc,CAAC,CAAC,CAAC,SAAS,CAAC;KACnF;IAED,OAAO,KAAK,CAAC;AACjB,CAAC;AAED,SAAS,2BAA2B,CAAC,MAAe,EAAE,KAAY,EAAE,KAAoB;IAC5E,IAAA,cAAc,GAA2C,KAAK,eAAhD,EAAE,YAAY,GAA6B,KAAK,aAAlC,EAAE,WAAW,GAAgB,KAAK,YAArB,EAAE,SAAS,GAAK,KAAK,UAAV,CAAW;IAEvE,IAAM,YAAY,GAAG,MAAM,CAAC,kBAAkB,CAAC,kBAAkB,EAAE,cAAc,CAAC,CAAC;IACnF,IAAM,UAAU,GAAG,MAAM,CAAC,kBAAkB,CAAC,kBAAkB,EAAE,YAAY,CAAC,CAAC;IAE/E,IAAM,WAAW,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC;IAC9C,IAAM,SAAS,GAAG,WAAW,CAAC,UAAU,CAAC,CAAC;IAE1C,IAAI,WAAW,IAAI,SAAS,EAAE;QAC1B,MAAM,CAAC,MAAM,CACT,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,IAAI,+BAAQ,CAAC,cAAc,EAAE,WAAW,CAAC,EACxD,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,IAAI,+BAAQ,CAAC,YAAY,EAAE,SAAS,CAAC,CACrD,CAAC;KACL;IACD,MAAM,CAAC,QAAQ,CAAC,UAAA,OAAO;QACnB,IAAM,SAAS,GAAG,OAAO,CAAC,kBAAkB,CAAC,kBAAkB,CAAC,CAAC;QACjE,IAAI,SAAS,EAAE;YACX,sBAAsB,CAAC,SAAS,CAAC,CAAC;YAClC,IAAI,KAAK,CAAC,KAAK,mBAAe,EAAE;gBAC5B,mBAAmB,CAAC,SAAS,CAAC,CAAC;aAClC;SACJ;IACL,CAAC,CAAC,CAAC;AACP,CAAC;AAED,SAAS,kBAAkB,CAAC,MAAe,EAAE,KAAyB;;IAClE,IAAM,KAAK,GAAG,MAAM,CAAC,mBAAmB,EAAE,CAAC;IACnC,IAAA,QAAQ,GAAK,KAAK,SAAV,CAAW;IAC3B,IAAI,KAAK,CAAC,IAAI,kBAA8B,EAAE;QAC1C,OAAO;KACV;IAED,IAAI,KAAK,CAAC,eAAe,IAAI,CAAC,IAAA,+CAAgB,EAAC,QAAQ,CAAC,IAAI,QAAQ,CAAC,KAAK,mBAAe,CAAC,EAAE;QACxF,IAAM,QAAQ,GAAG,MAAA,MAAM,CAAC,kBAAkB,EAAE,0CAAE,SAAS,EAAE,CAAC;QAC1D,IAAI,CAAC,QAAQ,EAAE;YACX,OAAO;SACV;QAEO,IAAA,OAAO,GAAW,QAAQ,QAAnB,EAAE,IAAI,GAAK,QAAQ,KAAb,CAAc;QACnC,IAAM,OAAO,GAAG,OAAO,IAAI,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;QAErF,IAAM,WAAS,GAAG,MAAM,CAAC,kBAAkB,CAAC,kBAAkB,EAAE,OAAO,CAAC,CAAC;QACzE,IAAI,CAAC,WAAS,EAAE;YACZ,OAAO;SACV;QAED,IAAI,QAAQ,CAAC,KAAK,mBAAe,EAAE;YAC/B,oBAAoB,CAAC,MAAM,EAAE,WAAS,CAAC,CAAC;SAC3C;aAAM,IAAI,CAAA,MAAA,WAAS,CAAC,UAAU,0CAAE,QAAQ,iBAAiB,EAAE;YACxD,MAAM,CAAC,QAAQ,CAAC,cAAM,OAAA,sBAAsB,CAAC,WAAS,CAAC,EAAjC,CAAiC,CAAC,CAAC;SAC5D;KACJ;SAAM,IAAI,CAAC,KAAK,CAAC,eAAe,IAAI,CAAC,QAAQ,CAAC,QAAQ,IAAI,QAAQ,CAAC,KAAK,kBAAc,EAAE;QACrF,IAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;QACrC,IAAI,CAAC,YAAY,EAAE;YACf,OAAO;SACV;QACD,2BAA2B,CAAC,MAAM,EAAE,YAAY,EAAE,QAAQ,CAAC,CAAC;KAC/D;AACL,CAAC","sourcesContent":["import { isCharacterValue } from 'roosterjs-content-model-core';\nimport {\n    addDelimiters,\n    isBlockElement,\n    isEntityElement,\n    isNodeOfType,\n} from 'roosterjs-content-model-dom';\nimport {\n    DelimiterClasses,\n    Keys,\n    NodeType,\n    PluginEventType,\n    PositionType,\n    SelectionRangeTypes,\n} from 'roosterjs-editor-types';\nimport {\n    Position,\n    createRange,\n    getDelimiterFromElement,\n    getEntityFromElement,\n    getEntitySelector,\n    matchesSelector,\n    splitTextNode,\n} from 'roosterjs-editor-dom';\nimport type {\n    EditorPlugin,\n    IEditor,\n    PluginEvent,\n    PluginKeyDownEvent,\n} from 'roosterjs-editor-types';\nimport type { IContentModelEditor } from 'roosterjs-content-model-editor';\n\nconst DELIMITER_SELECTOR =\n    '.' + DelimiterClasses.DELIMITER_AFTER + ',.' + DelimiterClasses.DELIMITER_BEFORE;\nconst ZERO_WIDTH_SPACE = '\\u200B';\nconst INLINE_ENTITY_SELECTOR = 'span' + getEntitySelector();\n\n/**\n * Entity delimiter plugin helps maintain delimiter elements around an entity so that user can put focus before/after an entity\n */\nexport class EntityDelimiterPlugin implements EditorPlugin {\n    private editor: IContentModelEditor | null = null;\n\n    /**\n     * Get a friendly name of this plugin\n     */\n    getName() {\n        return 'EntityDelimiter';\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        this.editor = editor as IContentModelEditor;\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     * 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            switch (event.eventType) {\n                case PluginEventType.ContentChanged:\n                case PluginEventType.EditorReady:\n                    normalizeDelimitersInEditor(this.editor);\n                    break;\n\n                case PluginEventType.BeforePaste:\n                    const { fragment } = event;\n                    addDelimitersIfNeeded(fragment.querySelectorAll(INLINE_ENTITY_SELECTOR));\n\n                    break;\n\n                case PluginEventType.ExtractContentWithDom:\n                case PluginEventType.BeforeCutCopy:\n                    event.clonedRoot.querySelectorAll(DELIMITER_SELECTOR).forEach(node => {\n                        if (getDelimiterFromElement(node)) {\n                            removeNode(node);\n                        } else {\n                            removeDelimiterAttr(node);\n                        }\n                    });\n                    break;\n\n                case PluginEventType.KeyDown:\n                    handleKeyDownEvent(this.editor, event);\n                    break;\n            }\n        }\n    }\n}\n\nfunction preventTypeInDelimiter(delimiter: HTMLElement) {\n    delimiter.normalize();\n    const textNode = delimiter.firstChild as Node;\n    const index = textNode.nodeValue?.indexOf(ZERO_WIDTH_SPACE) ?? -1;\n    if (index >= 0) {\n        splitTextNode(<Text>textNode, index == 0 ? 1 : index, false /* returnFirstPart */);\n        let nodeToMove: Node | undefined;\n        delimiter.childNodes.forEach(node => {\n            if (node.nodeValue !== ZERO_WIDTH_SPACE) {\n                nodeToMove = node;\n            }\n        });\n        if (nodeToMove) {\n            delimiter.parentElement?.insertBefore(\n                nodeToMove,\n                delimiter.className == DelimiterClasses.DELIMITER_BEFORE\n                    ? delimiter\n                    : delimiter.nextSibling\n            );\n            const selection = nodeToMove.ownerDocument?.getSelection();\n\n            if (selection) {\n                selection.setPosition(\n                    nodeToMove,\n                    new Position(nodeToMove, PositionType.End).offset\n                );\n            }\n        }\n    }\n}\n\n/**\n * @internal\n */\nexport function normalizeDelimitersInEditor(editor: IEditor) {\n    removeInvalidDelimiters(editor.queryElements(DELIMITER_SELECTOR));\n    addDelimitersIfNeeded(editor.queryElements(INLINE_ENTITY_SELECTOR));\n}\n\nfunction addDelimitersIfNeeded(nodes: Element[] | NodeListOf<Element>) {\n    nodes.forEach(node => {\n        if (isEntityElement(node)) {\n            addDelimiters(node.ownerDocument, node as HTMLElement);\n        }\n    });\n}\n\nfunction removeNode(el: Node | undefined | null) {\n    el?.parentElement?.removeChild(el);\n}\n\nfunction removeInvalidDelimiters(nodes: Element[] | NodeListOf<Element>) {\n    nodes.forEach(node => {\n        if (getDelimiterFromElement(node)) {\n            const sibling = node.classList.contains(DelimiterClasses.DELIMITER_BEFORE)\n                ? node.nextElementSibling\n                : node.previousElementSibling;\n            if (!(isNodeOfType(sibling, 'ELEMENT_NODE') && getEntityFromElement(sibling))) {\n                removeNode(node);\n            }\n        } else {\n            removeDelimiterAttr(node);\n        }\n    });\n}\n\nfunction removeDelimiterAttr(node: Element | undefined | null, checkEntity: boolean = true) {\n    if (!node) {\n        return;\n    }\n\n    const isAfter = node.classList.contains(DelimiterClasses.DELIMITER_AFTER);\n    const entitySibling = isAfter ? node.previousElementSibling : node.nextElementSibling;\n    if (checkEntity && entitySibling && isEntityElement(entitySibling)) {\n        return;\n    }\n\n    node.classList.remove(DelimiterClasses.DELIMITER_AFTER, DelimiterClasses.DELIMITER_BEFORE);\n\n    node.normalize();\n    node.childNodes.forEach(cn => {\n        const index = cn.textContent?.indexOf(ZERO_WIDTH_SPACE) ?? -1;\n        if (index >= 0) {\n            createRange(cn, index, cn, index + 1)?.deleteContents();\n        }\n    });\n}\n\nfunction handleCollapsedEnter(editor: IEditor, delimiter: HTMLElement) {\n    const isAfter = delimiter.classList.contains(DelimiterClasses.DELIMITER_AFTER);\n    const entity = !isAfter ? delimiter.nextSibling : delimiter.previousSibling;\n    const block = getBlock(editor, delimiter);\n\n    editor.runAsync(() => {\n        if (!block) {\n            return;\n        }\n        const blockToCheck = isAfter ? block.nextSibling : block.previousSibling;\n        if (blockToCheck && isNodeOfType(blockToCheck, 'ELEMENT_NODE')) {\n            const delimiters = blockToCheck.querySelectorAll(DELIMITER_SELECTOR);\n            // Check if the last or first delimiter still contain the delimiter class and remove it.\n            const delimiterToCheck = delimiters.item(isAfter ? 0 : delimiters.length - 1);\n            removeDelimiterAttr(delimiterToCheck);\n        }\n\n        if (entity && isEntityElement(entity)) {\n            const entityElement = entity as HTMLElement;\n            const { nextElementSibling, previousElementSibling } = entityElement;\n            [nextElementSibling, previousElementSibling].forEach(el => {\n                // Check if after Enter the ZWS got removed but we still have a element with the class\n                // Remove the attributes of the element if it is invalid now.\n                if (el && matchesSelector(el, DELIMITER_SELECTOR) && !getDelimiterFromElement(el)) {\n                    removeDelimiterAttr(el, false /* checkEntity */);\n                }\n            });\n\n            // Add delimiters to the entity if needed because on Enter we can sometimes lose the ZWS of the element.\n            addDelimiters(entityElement.ownerDocument, entityElement);\n        }\n    });\n}\n\nconst getPosition = (container: HTMLElement | null) => {\n    if (container && getDelimiterFromElement(container)) {\n        const isAfter = container.classList.contains(DelimiterClasses.DELIMITER_AFTER);\n        return new Position(container, isAfter ? PositionType.After : PositionType.Before);\n    }\n    return undefined;\n};\n\nfunction getBlock(editor: IEditor, element: Node | undefined) {\n    if (!element) {\n        return undefined;\n    }\n\n    let block = editor.getBlockElementAtNode(element)?.getStartNode();\n\n    while (block && (!isNodeOfType(block, 'ELEMENT_NODE') || !isBlockElement(block))) {\n        block = editor.contains(block.parentElement) ? block.parentElement! : undefined;\n    }\n\n    return block;\n}\n\nfunction handleSelectionNotCollapsed(editor: IEditor, range: Range, event: KeyboardEvent) {\n    const { startContainer, endContainer, startOffset, endOffset } = range;\n\n    const startElement = editor.getElementAtCursor(DELIMITER_SELECTOR, startContainer);\n    const endElement = editor.getElementAtCursor(DELIMITER_SELECTOR, endContainer);\n\n    const startUpdate = getPosition(startElement);\n    const endUpdate = getPosition(endElement);\n\n    if (startUpdate || endUpdate) {\n        editor.select(\n            startUpdate ?? new Position(startContainer, startOffset),\n            endUpdate ?? new Position(endContainer, endOffset)\n        );\n    }\n    editor.runAsync(aEditor => {\n        const delimiter = aEditor.getElementAtCursor(DELIMITER_SELECTOR);\n        if (delimiter) {\n            preventTypeInDelimiter(delimiter);\n            if (event.which === Keys.ENTER) {\n                removeDelimiterAttr(delimiter);\n            }\n        }\n    });\n}\n\nfunction handleKeyDownEvent(editor: IEditor, event: PluginKeyDownEvent) {\n    const range = editor.getSelectionRangeEx();\n    const { rawEvent } = event;\n    if (range.type != SelectionRangeTypes.Normal) {\n        return;\n    }\n\n    if (range.areAllCollapsed && (isCharacterValue(rawEvent) || rawEvent.which === Keys.ENTER)) {\n        const position = editor.getFocusedPosition()?.normalize();\n        if (!position) {\n            return;\n        }\n\n        const { element, node } = position;\n        const refNode = element == node ? element.childNodes.item(position.offset) : element;\n\n        const delimiter = editor.getElementAtCursor(DELIMITER_SELECTOR, refNode);\n        if (!delimiter) {\n            return;\n        }\n\n        if (rawEvent.which === Keys.ENTER) {\n            handleCollapsedEnter(editor, delimiter);\n        } else if (delimiter.firstChild?.nodeType == NodeType.Text) {\n            editor.runAsync(() => preventTypeInDelimiter(delimiter));\n        }\n    } else if (!range.areAllCollapsed && !rawEvent.shiftKey && rawEvent.which != Keys.SHIFT) {\n        const currentRange = range.ranges[0];\n        if (!currentRange) {\n            return;\n        }\n        handleSelectionNotCollapsed(editor, currentRange, rawEvent);\n    }\n}\n"]}

package/lib/index.d.ts

@@ -1,2 +1,3 @@
 export { ContentModelPastePlugin } from './paste/ContentModelPastePlugin';
 export { ContentModelEditPlugin } from './edit/ContentModelEditPlugin';
+export { EntityDelimiterPlugin } from './entityDelimiter/EntityDelimiterPlugin';

package/lib/index.js

@@ -1,8 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ContentModelEditPlugin = exports.ContentModelPastePlugin = void 0;
+exports.EntityDelimiterPlugin = exports.ContentModelEditPlugin = exports.ContentModelPastePlugin = void 0;
 var ContentModelPastePlugin_1 = require("./paste/ContentModelPastePlugin");
 Object.defineProperty(exports, "ContentModelPastePlugin", { enumerable: true, get: function () { return ContentModelPastePlugin_1.ContentModelPastePlugin; } });
 var ContentModelEditPlugin_1 = require("./edit/ContentModelEditPlugin");
 Object.defineProperty(exports, "ContentModelEditPlugin", { enumerable: true, get: function () { return ContentModelEditPlugin_1.ContentModelEditPlugin; } });
+var EntityDelimiterPlugin_1 = require("./entityDelimiter/EntityDelimiterPlugin");
+Object.defineProperty(exports, "EntityDelimiterPlugin", { enumerable: true, get: function () { return EntityDelimiterPlugin_1.EntityDelimiterPlugin; } });
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../packages-content-model/roosterjs-content-model-plugins/lib/index.ts"],"names":[],"mappings":";;;AAAA,2EAA0E;AAAjE,kIAAA,uBAAuB,OAAA;AAChC,wEAAuE;AAA9D,gIAAA,sBAAsB,OAAA","sourcesContent":["export { ContentModelPastePlugin } from './paste/ContentModelPastePlugin';\nexport { ContentModelEditPlugin } from './edit/ContentModelEditPlugin';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../packages-content-model/roosterjs-content-model-plugins/lib/index.ts"],"names":[],"mappings":";;;AAAA,2EAA0E;AAAjE,kIAAA,uBAAuB,OAAA;AAChC,wEAAuE;AAA9D,gIAAA,sBAAsB,OAAA;AAC/B,iFAAgF;AAAvE,8HAAA,qBAAqB,OAAA","sourcesContent":["export { ContentModelPastePlugin } from './paste/ContentModelPastePlugin';\nexport { ContentModelEditPlugin } from './edit/ContentModelEditPlugin';\nexport { EntityDelimiterPlugin } from './entityDelimiter/EntityDelimiterPlugin';\n"]}

package/lib-amd/edit/ContentModelEditPlugin.js

@@ -1,4 +1,4 @@
-define(["require", "exports", "./keyboardDelete"], function (require, exports, keyboardDelete_1) {
+define(["require", "exports", "./keyboardDelete", "./keyboardInput"], function (require, exports, keyboardDelete_1, keyboardInput_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.ContentModelEditPlugin = void 0;
@@ -62,6 +62,10 @@ define(["require", "exports", "./keyboardDelete"], function (require, exports, k
                         // No need to clear cache here since if we rely on browser's behavior, there will be Input event and its handler will reconcile cache
                         (0, keyboardDelete_1.keyboardDelete)(editor, rawEvent);
                         break;
+                    case 'Enter':
+                    default:
+                        (0, keyboardInput_1.keyboardInput)(editor, rawEvent);
+                        break;
                 }
             }
         };

package/lib-amd/edit/ContentModelEditPlugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContentModelEditPlugin.js","sourceRoot":"","sources":["../../../../packages-content-model/roosterjs-content-model-plugins/lib/edit/ContentModelEditPlugin.ts"],"names":[],"mappings":";;;;IAUA;;;;;OAKG;IACH;QAAA;YACY,WAAM,GAA+B,IAAI,CAAC;QA4DtD,CAAC;QA1DG;;WAEG;QACH,wCAAO,GAAP;YACI,OAAO,kBAAkB,CAAC;QAC9B,CAAC;QAED;;;;;WAKG;QACH,2CAAU,GAAV,UAAW,MAAe;YACtB,gFAAgF;YAChF,IAAI,CAAC,MAAM,GAAG,MAA6B,CAAC;QAChD,CAAC;QAED;;;;WAIG;QACH,wCAAO,GAAP;YACI,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACvB,CAAC;QAED;;;;;WAKG;QACH,8CAAa,GAAb,UAAc,KAAkB;YAC5B,IAAI,IAAI,CAAC,MAAM,EAAE;gBACb,QAAQ,KAAK,CAAC,SAAS,EAAE;oBACrB;wBACI,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;wBAC5C,MAAM;iBACb;aACJ;QACL,CAAC;QAEO,mDAAkB,GAA1B,UAA2B,MAA2B,EAAE,KAAyB;YAC7E,IAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC;YAEhC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,IAAI,CAAC,KAAK,CAAC,oBAAoB,EAAE;gBAC3D,qHAAqH;gBACrH,QAAQ,QAAQ,CAAC,GAAG,EAAE;oBAClB,KAAK,WAAW,CAAC;oBACjB,KAAK,QAAQ;wBACT,8CAA8C;wBAC9C,qIAAqI;wBACrI,IAAA,+BAAc,EAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;wBACjC,MAAM;iBACb;aACJ;QACL,CAAC;QACL,6BAAC;IAAD,CAAC,AA7DD,IA6DC;IA7DY,wDAAsB","sourcesContent":["import { keyboardDelete } from './keyboardDelete';\nimport { PluginEventType } from 'roosterjs-editor-types';\nimport type { IContentModelEditor } from 'roosterjs-content-model-editor';\nimport type {\n    EditorPlugin,\n    IEditor,\n    PluginEvent,\n    PluginKeyDownEvent,\n} from 'roosterjs-editor-types';\n\n/**\n * ContentModel edit plugins helps editor to do editing operation on top of content model.\n * This includes:\n * 1. Delete Key\n * 2. Backspace Key\n */\nexport class ContentModelEditPlugin implements EditorPlugin {\n    private editor: IContentModelEditor | null = null;\n\n    /**\n     * Get name of this plugin\n     */\n    getName() {\n        return 'ContentModelEdit';\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 IContentModelEditor;\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     * 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            switch (event.eventType) {\n                case PluginEventType.KeyDown:\n                    this.handleKeyDownEvent(this.editor, event);\n                    break;\n            }\n        }\n    }\n\n    private handleKeyDownEvent(editor: IContentModelEditor, event: PluginKeyDownEvent) {\n        const rawEvent = event.rawEvent;\n\n        if (!rawEvent.defaultPrevented && !event.handledByEditFeature) {\n            // TODO: Consider use ContentEditFeature and need to hide other conflict features that are not based on Content Model\n            switch (rawEvent.key) {\n                case 'Backspace':\n                case 'Delete':\n                    // Use our API to handle BACKSPACE/DELETE key.\n                    // No need to clear cache here since if we rely on browser's behavior, there will be Input event and its handler will reconcile cache\n                    keyboardDelete(editor, rawEvent);\n                    break;\n            }\n        }\n    }\n}\n"]}
+{"version":3,"file":"ContentModelEditPlugin.js","sourceRoot":"","sources":["../../../../packages-content-model/roosterjs-content-model-plugins/lib/edit/ContentModelEditPlugin.ts"],"names":[],"mappings":";;;;IAWA;;;;;OAKG;IACH;QAAA;YACY,WAAM,GAA+B,IAAI,CAAC;QAiEtD,CAAC;QA/DG;;WAEG;QACH,wCAAO,GAAP;YACI,OAAO,kBAAkB,CAAC;QAC9B,CAAC;QAED;;;;;WAKG;QACH,2CAAU,GAAV,UAAW,MAAe;YACtB,gFAAgF;YAChF,IAAI,CAAC,MAAM,GAAG,MAA6B,CAAC;QAChD,CAAC;QAED;;;;WAIG;QACH,wCAAO,GAAP;YACI,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACvB,CAAC;QAED;;;;;WAKG;QACH,8CAAa,GAAb,UAAc,KAAkB;YAC5B,IAAI,IAAI,CAAC,MAAM,EAAE;gBACb,QAAQ,KAAK,CAAC,SAAS,EAAE;oBACrB;wBACI,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;wBAC5C,MAAM;iBACb;aACJ;QACL,CAAC;QAEO,mDAAkB,GAA1B,UAA2B,MAA2B,EAAE,KAAyB;YAC7E,IAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC;YAEhC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,IAAI,CAAC,KAAK,CAAC,oBAAoB,EAAE;gBAC3D,qHAAqH;gBACrH,QAAQ,QAAQ,CAAC,GAAG,EAAE;oBAClB,KAAK,WAAW,CAAC;oBACjB,KAAK,QAAQ;wBACT,8CAA8C;wBAC9C,qIAAqI;wBACrI,IAAA,+BAAc,EAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;wBACjC,MAAM;oBAEV,KAAK,OAAO,CAAC;oBACb;wBACI,IAAA,6BAAa,EAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;wBAChC,MAAM;iBACb;aACJ;QACL,CAAC;QACL,6BAAC;IAAD,CAAC,AAlED,IAkEC;IAlEY,wDAAsB","sourcesContent":["import { keyboardDelete } from './keyboardDelete';\nimport { keyboardInput } from './keyboardInput';\nimport { PluginEventType } from 'roosterjs-editor-types';\nimport type { IContentModelEditor } from 'roosterjs-content-model-editor';\nimport type {\n    EditorPlugin,\n    IEditor,\n    PluginEvent,\n    PluginKeyDownEvent,\n} from 'roosterjs-editor-types';\n\n/**\n * ContentModel edit plugins helps editor to do editing operation on top of content model.\n * This includes:\n * 1. Delete Key\n * 2. Backspace Key\n */\nexport class ContentModelEditPlugin implements EditorPlugin {\n    private editor: IContentModelEditor | null = null;\n\n    /**\n     * Get name of this plugin\n     */\n    getName() {\n        return 'ContentModelEdit';\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 IContentModelEditor;\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     * 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            switch (event.eventType) {\n                case PluginEventType.KeyDown:\n                    this.handleKeyDownEvent(this.editor, event);\n                    break;\n            }\n        }\n    }\n\n    private handleKeyDownEvent(editor: IContentModelEditor, event: PluginKeyDownEvent) {\n        const rawEvent = event.rawEvent;\n\n        if (!rawEvent.defaultPrevented && !event.handledByEditFeature) {\n            // TODO: Consider use ContentEditFeature and need to hide other conflict features that are not based on Content Model\n            switch (rawEvent.key) {\n                case 'Backspace':\n                case 'Delete':\n                    // Use our API to handle BACKSPACE/DELETE key.\n                    // No need to clear cache here since if we rely on browser's behavior, there will be Input event and its handler will reconcile cache\n                    keyboardDelete(editor, rawEvent);\n                    break;\n\n                case 'Enter':\n                default:\n                    keyboardInput(editor, rawEvent);\n                    break;\n            }\n        }\n    }\n}\n"]}

package/lib-amd/edit/keyboardDelete.d.ts

@@ -4,6 +4,5 @@ import type { IContentModelEditor } from 'roosterjs-content-model-editor';
  * Do keyboard event handling for DELETE/BACKSPACE key
  * @param editor The Content Model Editor
  * @param rawEvent DOM keyboard event
- * @returns True if the event is handled with this function, otherwise false
  */
-export declare function keyboardDelete(editor: IContentModelEditor, rawEvent: KeyboardEvent): boolean;
+export declare function keyboardDelete(editor: IContentModelEditor, rawEvent: KeyboardEvent): true | undefined;