roosterjs-content-model-plugins 0.20.0

package/LICENSE

@@ -0,0 +1,25 @@
+    RoosterJS
+    Copyright (c) Microsoft Corporation
+    All rights reserved.
+
+    MIT License
+
+    Copyright (c) Microsoft Corporation. All rights reserved.
+
+    Permission is hereby granted, free of charge, to any person obtaining a copy
+    of this software and associated documentation files (the "Software"), to deal
+    in the Software without restriction, including without limitation the rights
+    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+    copies of the Software, and to permit persons to whom the Software is
+    furnished to do so, subject to the following conditions:
+
+    The above copyright notice and this permission notice shall be included in all
+    copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+    SOFTWARE

package/README.md

@@ -0,0 +1,262 @@
+[![Build Status](https://github.com/microsoft/roosterjs/actions/workflows/build-and-deploy.yml/badge.svg)](https://github.com/microsoft/roosterjs/actions/workflows/build-and-deploy.yml)
+
+# Rooster
+
+Rooster is a framework-independent JavaScript rich-text editor neatly nested
+inside one HTML `<div>` element. Editing operations performed by end users are
+handled in simple ways to generate the final HTML.
+
+To view the sample site, please click the link below:
+
+[RoosterJs Sample Site](https://microsoft.github.io/roosterjs/index.html).
+
+## Upgrade from RoosterJs 7.\*
+
+Please see [here](https://github.com/microsoft/roosterjs/wiki/RoosterJs-8).
+
+## Features
+
+### Packages
+
+Rooster contains 6 basic packages.
+
+1. [roosterjs](https://microsoft.github.io/roosterjs/docs/modules/roosterjs.html):
+   A facade of all Rooster code for those who want a quick start. Use the
+   `createEditor()` function in roosterjs to create an editor with default
+   configurations.
+
+2. [roosterjs-editor-core](https://microsoft.github.io/roosterjs/docs/modules/roosterjs_editor_core.html):
+   Defines the core editor and plugin infrastructure. Use `roosterjs-editor-core`
+   instead of `roosterjs` to build and customize your own editor.
+
+3. [roosterjs-editor-api](https://microsoft.github.io/roosterjs/docs/modules/roosterjs_editor_api.html):
+   Defines APIs for editor operations. Use these APIs to modify content and
+   formatting in the editor you built using `roosterjs-editor-core`.
+
+4. [roosterjs-editor-dom](https://microsoft.github.io/roosterjs/docs/modules/roosterjs_editor_dom.html):
+   Defines APIs for DOM operations. Use `roosterjs-editor-api` instead unless
+   you want to access DOM API directly.
+
+5. [roosterjs-editor-plugins](https://microsoft.github.io/roosterjs/docs/modules/roosterjs_editor_plugins.html):
+   Defines basic plugins for common features. Examples: making hyperlinks,
+   pasting HTML content, inserting inline images.
+
+6. [roosterjs-editor-types](https://microsoft.github.io/roosterjs/docs/modules/roosterjs_editor_types.html):
+   Defines public interfaces and enumerations.
+
+There are also some extension packages to provide additional functionalities.
+
+1. [roosterjs-color-utils](https://microsoft.github.io/roosterjs/docs/modules/roosterjs_color_utils.html):
+   Provide color transformation utility to make editor work under dark mode.
+
+2. [roosterjs-react](https://microsoft.github.io/roosterjs/docs/modules/roosterjs_react.html):
+   Provide a React wrapper of roosterjs so it can be easily used with React.
+
+3. [roosterjs-editor-types-compatible](https://microsoft.github.io/roosterjs/docs/modules/roosterjs_editor_types_compatible.html):
+   Provide types that are compatible with isolatedModules mode. When using isolatedModules mode,
+   "const enum" will not work correctly, this package provides enums with prefix "Compatible" in
+   their names and they have the same value with const enums in roosterjs-editor-types package
+
+### APIs
+
+Rooster provides DOM level APIs (in `roosterjs-editor-dom`), core APIs (in `roosterjs-editor-core`), and formatting APIs
+(in `roosterjs-editor-api`) to perform editing operations.
+
+`roosterjs-editor-dom` provides several levels of DOM operations:
+
+-   Perform basic DOM operations such as `wrap()`, `unwrap()`, ...
+-   Wrap a given DOM node with `InlineElement` or `BlockElement` and perform
+    operations with DOM Walker API.
+-   Perform DOM operations on a given scope using scopers.
+-   Travel among `InlineElements` and `BlockElements` with scope using
+    ContentTraverser API.
+
+`roosterjs-editor-core` provides APIs for editor core. Editor class will call such
+APIs to perform basic editor operations. These APIs are overridable by specifying
+API overrides in Editor options when creating the editor.
+
+`roosterjs-editor-api` provides APIs for scenario-based operations triggered by
+user interaction.
+
+## Plugins
+
+Rooster supports plugins. You can use built-in plugins or build your own.
+Plugins call APIs to communicate with the editor. When an operation is
+performed by the user or when content is changed by code, the editor will
+trigger events for the plugins to handle.
+
+Here's a sample plugin which will show a dialog containing "Hello Rooster" when
+an "a" is typed in the editor:
+
+```typescript
+class HelloRooster implements EditorPlugin {
+    getName() {
+        return 'HelloRooster';
+    }
+
+    initialize(editor: IEditor) {}
+
+    dispose() {}
+
+    onPluginEvent(e: PluginEvent) {
+        if (e.eventType == PluginEventType.KeyPress && e.rawEvent.which == 65) {
+            alert('Hello Rooster');
+        }
+    }
+}
+```
+
+## Installation
+
+Install via NPM or Yarn:
+
+`yarn add roosterjs`
+
+You can also install sub packages separately:
+
+`yarn add roosterjs-editor-core`
+
+`yarn add roosterjs-editor-api`
+
+`...`
+
+In order to run the code below, you may also need to install [webpack](https://webpack.js.org/):
+
+`yarn add webpack -g`
+
+## Usage
+
+### A quick start
+
+1. Create `editor.htm` which contains a DIV with some styles, buttons to handle some click events and a reference to rooster.js (update with the path to your rooster.js file):
+
+```html
+<html>
+    <body>
+        <div style="width: 500px; height: 400px; border: solid 1px black" id="contentDiv"></div>
+        <button id="buttonB">B</button> <button id="buttonI">I</button>
+        <button id="buttonU">U</button>
+        <script src="rooster.js"></script>
+        <script>
+            var contentDiv = document.getElementById('contentDiv');
+            var editor = roosterjs.createEditor(contentDiv);
+
+            editor.setContent('Welcome to <b>RoosterJs</b>!');
+            document.getElementById('buttonB').addEventListener('click', function () {
+                roosterjs.toggleBold(editor);
+            });
+            document.getElementById('buttonI').addEventListener('click', function () {
+                roosterjs.toggleItalic(editor);
+            });
+            document.getElementById('buttonU').addEventListener('click', function () {
+                roosterjs.toggleUnderline(editor);
+            });
+        </script>
+    </body>
+</html>
+```
+
+2. Navigate to editor.htm, you will see a editor shown in the page which includes buttons with bold, italic, underline
+   actions.
+
+## Sample code
+
+To view the sample site, please click [here](https://microsoft.github.io/roosterjs/index.html).
+
+To build the sample site code yourself, follow these instructions:
+
+1. Get dependencies using [yarn](https://yarnpkg.com) or [npm](https://www.npmjs.com/):
+
+    ```cmd
+    yarn
+    ```
+
+2. Build the source code, and start the sample editor:
+
+    ```
+    yarn start
+    ```
+
+    or
+
+    ```
+    npm start
+    ```
+
+## Debugging
+
+There are two options for debugging:
+
+1. Debugging from VSCode
+
+    - Ensure the sample editor is running
+    - Set the breakpoints within VSCode
+    - Select "Debug app in Chrome" from the VSCode debugging configuration dropdown
+      <img src="/assets/readme-images/debug-in-VSCode.png" width="411" height="278"><br>
+    - Run the scenario that needs to be debugged
+
+2. Debugging directly from the development tools within the web browser
+    - The directions for how to do this are specific to each web browser. By opening the developer
+      tools for the web browser that Rooster is running on, you will be able to set breakpoints in
+      the code and debug accordingly.
+
+## Running tests
+
+There are two ways that tests can be run:
+
+1. Run all tests or a single test from VSCode<br>
+    - (Skip if running all tests) Ensure the file that you want to test is selected (ie: toggleBold.ts
+      or toggleBoldTest.ts)
+    - Select "Test all files" or "Test current file" from the VSCode debugging configuration dropdown
+      <img src="/assets/readme-images/test-in-VSCode.png" width="402" height="268">
+2. Run all tests from command line
+    ```
+    yarn test
+    ```
+
+## Dependencies
+
+As a NodeJs package, RoosterJs has dependencies for runtime (specified in package.json under each sub
+packages in "dependencies" section) and dependencies for build time (specified in package.json under
+root path in "devDependencies" section).
+
+For runtime dependencies, there are two parts:
+
+-   Internal dependencies (a RoosterJs package depends on other RoosterJs packages)
+-   External dependencies (RoosterJs depends on other NPM packages)
+
+Currently we have very few external dependencies. Before adding any new dependency, we need to check:
+
+1. What's the value of the new dependency and the code using the dependency bring into roosterjs?
+   If we add a new dependency and create our new API to just call into the dependency, that new API
+   doesn't actually bring too much value, and people who uses roosterjs in their project can do this
+   themselves in their code, and we should not add such dependency to people who don't really need it.
+
+2. What's the dependency tree of the dependency?
+   If we introduce a new dependency which has a deep dependency tree, we need to be careful since it
+   means we are actually adding a lot of new dependencies and our code size may be increased a lot.
+
+3. How much functionalities do we need from the dependency?
+   If the dependency provides a lot of functionalities but we actually only need a small piece of them,
+   we may need to consider other solutions, such as find another smaller one, or do it ourselves.
+
+4. What's the license of the dependency?
+   A dependency package under MIT license is good to be used for RoosterJs. For other licenses, we need
+   to review and see if we can take it as a dependency.
+
+If you still feel a new dependency is required after checking these questions, we can review it and
+finally decide whether we should add the new dependency.
+
+For build time dependencies, it is more flexible to add new dependencies since it won't increase runtime
+code size or dependencies.
+
+## More documentation
+
+We are still working on more documentation in [roosterjs wiki](https://github.com/Microsoft/roosterjs/wiki) and [API reference](https://microsoft.github.io/roosterjs/docs/index.html).
+
+## License - MIT
+
+License
+Copyright (c) Microsoft Corporation. All rights reserved.
+
+Licensed under the [MIT](LICENSE) License.

package/lib/edit/ContentModelEditPlugin.d.ts

@@ -0,0 +1,35 @@
+import type { EditorPlugin, IEditor, PluginEvent } from 'roosterjs-editor-types';
+/**
+ * ContentModel edit plugins helps editor to do editing operation on top of content model.
+ * This includes:
+ * 1. Delete Key
+ * 2. Backspace Key
+ */
+export declare class ContentModelEditPlugin implements EditorPlugin {
+    private editor;
+    /**
+     * 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;
+    /**
+     * 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 handleKeyDownEvent;
+}

package/lib/edit/ContentModelEditPlugin.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContentModelEditPlugin = void 0;
+var keyboardDelete_1 = require("./keyboardDelete");
+/**
+ * ContentModel edit plugins helps editor to do editing operation on top of content model.
+ * This includes:
+ * 1. Delete Key
+ * 2. Backspace Key
+ */
+var ContentModelEditPlugin = /** @class */ (function () {
+    function ContentModelEditPlugin() {
+        this.editor = null;
+    }
+    /**
+     * Get name of this plugin
+     */
+    ContentModelEditPlugin.prototype.getName = function () {
+        return 'ContentModelEdit';
+    };
+    /**
+     * 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
+     */
+    ContentModelEditPlugin.prototype.initialize = function (editor) {
+        // TODO: Later we may need a different interface for Content Model editor plugin
+        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.
+     */
+    ContentModelEditPlugin.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:
+     */
+    ContentModelEditPlugin.prototype.onPluginEvent = function (event) {
+        if (this.editor) {
+            switch (event.eventType) {
+                case 0 /* KeyDown */:
+                    this.handleKeyDownEvent(this.editor, event);
+                    break;
+            }
+        }
+    };
+    ContentModelEditPlugin.prototype.handleKeyDownEvent = function (editor, event) {
+        var rawEvent = event.rawEvent;
+        if (!rawEvent.defaultPrevented && !event.handledByEditFeature) {
+            // TODO: Consider use ContentEditFeature and need to hide other conflict features that are not based on Content Model
+            switch (rawEvent.key) {
+                case 'Backspace':
+                case 'Delete':
+                    // Use our API to handle BACKSPACE/DELETE key.
+                    // 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;
+            }
+        }
+    };
+    return ContentModelEditPlugin;
+}());
+exports.ContentModelEditPlugin = ContentModelEditPlugin;
+//# sourceMappingURL=ContentModelEditPlugin.js.map

package/lib/edit/ContentModelEditPlugin.js.map

@@ -0,0 +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"]}

package/lib/edit/deleteSteps/deleteAllSegmentBefore.d.ts

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

package/lib/edit/deleteSteps/deleteAllSegmentBefore.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.deleteAllSegmentBefore = void 0;
+var roosterjs_content_model_core_1 = require("roosterjs-content-model-core");
+/**
+ * @internal
+ */
+var deleteAllSegmentBefore = function (context) {
+    var _a = context.insertPoint, paragraph = _a.paragraph, marker = _a.marker;
+    var index = paragraph.segments.indexOf(marker);
+    for (var i = index - 1; i >= 0; i--) {
+        var segment = paragraph.segments[i];
+        segment.isSelected = true;
+        if ((0, roosterjs_content_model_core_1.deleteSegment)(paragraph, segment, context.formatContext)) {
+            context.deleteResult = 'range';
+        }
+    }
+};
+exports.deleteAllSegmentBefore = deleteAllSegmentBefore;
+//# sourceMappingURL=deleteAllSegmentBefore.js.map

package/lib/edit/deleteSteps/deleteAllSegmentBefore.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"deleteAllSegmentBefore.js","sourceRoot":"","sources":["../../../../../packages-content-model/roosterjs-content-model-plugins/lib/edit/deleteSteps/deleteAllSegmentBefore.ts"],"names":[],"mappings":";;;AAAA,6EAA6D;AAG7D;;GAEG;AACI,IAAM,sBAAsB,GAAwB,UAAA,OAAO;IACxD,IAAA,KAAwB,OAAO,CAAC,WAAW,EAAzC,SAAS,eAAA,EAAE,MAAM,YAAwB,CAAC;IAClD,IAAM,KAAK,GAAG,SAAS,CAAC,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IAEjD,KAAK,IAAI,CAAC,GAAG,KAAK,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE;QACjC,IAAM,OAAO,GAAG,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;QAEtC,OAAO,CAAC,UAAU,GAAG,IAAI,CAAC;QAE1B,IAAI,IAAA,4CAAa,EAAC,SAAS,EAAE,OAAO,EAAE,OAAO,CAAC,aAAa,CAAC,EAAE;YAC1D,OAAO,CAAC,YAAY,GAAG,OAAO,CAAC;SAClC;KACJ;AACL,CAAC,CAAC;AAbW,QAAA,sBAAsB,0BAajC","sourcesContent":["import { deleteSegment } from 'roosterjs-content-model-core';\nimport type { DeleteSelectionStep } from 'roosterjs-content-model-types';\n\n/**\n * @internal\n */\nexport const deleteAllSegmentBefore: DeleteSelectionStep = context => {\n    const { paragraph, marker } = context.insertPoint;\n    const index = paragraph.segments.indexOf(marker);\n\n    for (let i = index - 1; i >= 0; i--) {\n        const segment = paragraph.segments[i];\n\n        segment.isSelected = true;\n\n        if (deleteSegment(paragraph, segment, context.formatContext)) {\n            context.deleteResult = 'range';\n        }\n    }\n};\n"]}

package/lib/edit/deleteSteps/deleteCollapsedSelection.d.ts

@@ -0,0 +1,9 @@
+import type { DeleteSelectionStep } from 'roosterjs-content-model-types';
+/**
+ * @internal if we didn't delete anything, and we want to delete forward, now perform it
+ */
+export declare const forwardDeleteCollapsedSelection: DeleteSelectionStep;
+/**
+ * @internal if we didn't delete anything, and we want to delete backward, now perform it
+ */
+export declare const backwardDeleteCollapsedSelection: DeleteSelectionStep;

package/lib/edit/deleteSteps/deleteCollapsedSelection.js

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.backwardDeleteCollapsedSelection = exports.forwardDeleteCollapsedSelection = void 0;
+var roosterjs_content_model_core_1 = require("roosterjs-content-model-core");
+var getLeafSiblingBlock_1 = require("../utils/getLeafSiblingBlock");
+var roosterjs_content_model_dom_1 = require("roosterjs-content-model-dom");
+function getDeleteCollapsedSelection(direction) {
+    return function (context) {
+        var _a;
+        var isForward = direction == 'forward';
+        var _b = context.insertPoint, paragraph = _b.paragraph, marker = _b.marker, path = _b.path, tableContext = _b.tableContext;
+        var segments = paragraph.segments;
+        fixupBr(segments);
+        var index = segments.indexOf(marker) + (isForward ? 1 : -1);
+        var segmentToDelete = segments[index];
+        var blockToDelete;
+        if (segmentToDelete) {
+            if ((0, roosterjs_content_model_core_1.deleteSegment)(paragraph, segmentToDelete, context.formatContext, direction)) {
+                context.deleteResult = 'singleChar';
+                // It is possible that we have deleted everything from this paragraph, so we need to mark it as not implicit
+                // to avoid losing its format. See https://github.com/microsoft/roosterjs/issues/1953
+                (0, roosterjs_content_model_dom_1.setParagraphNotImplicit)(paragraph);
+            }
+        }
+        else if ((blockToDelete = (0, getLeafSiblingBlock_1.getLeafSiblingBlock)(path, paragraph, isForward))) {
+            var block = blockToDelete.block, path_1 = blockToDelete.path, siblingSegment = blockToDelete.siblingSegment;
+            if (block.blockType == 'Paragraph') {
+                if (siblingSegment) {
+                    // When selection is under general segment, need to check if it has a sibling sibling, and delete from it
+                    if ((0, roosterjs_content_model_core_1.deleteSegment)(block, siblingSegment, context.formatContext, direction)) {
+                        context.deleteResult = 'range';
+                    }
+                }
+                else {
+                    if (isForward) {
+                        context.lastParagraph = block;
+                    }
+                    else {
+                        if (((_a = block.segments[block.segments.length - 1]) === null || _a === void 0 ? void 0 : _a.segmentType) == 'Br') {
+                            block.segments.pop();
+                        }
+                        context.insertPoint = {
+                            marker: marker,
+                            paragraph: block,
+                            path: path_1,
+                            tableContext: tableContext,
+                        };
+                        context.lastParagraph = paragraph;
+                        delete block.cachedElement;
+                    }
+                    context.deleteResult = 'range';
+                }
+                // When go across table, getLeafSiblingBlock will return null, when we are here, we must be in the same table context
+                context.lastTableContext = tableContext;
+            }
+            else {
+                if ((0, roosterjs_content_model_core_1.deleteBlock)(path_1[0].blocks, block, undefined /*replacement*/, context.formatContext, direction)) {
+                    context.deleteResult = 'range';
+                }
+            }
+        }
+        else {
+            // We have nothing to delete, in this case we don't want browser handle it as well.
+            // Because when Backspace on an empty document, it will also delete the only DIV and SPAN element, causes
+            // editor is really empty. We don't want that happen. So the handling should stop here.
+            context.deleteResult = 'nothingToDelete';
+        }
+    };
+}
+/**
+ * If the last segment is BR, remove it for now. We may add it back later when normalize model.
+ * So that if this is an empty paragraph, it will start to delete next block
+ */
+function fixupBr(segments) {
+    var _a, _b;
+    if (((_a = segments[segments.length - 1]) === null || _a === void 0 ? void 0 : _a.segmentType) == 'Br') {
+        var segmentsWithoutBr = segments.filter(function (x) { return x.segmentType != 'SelectionMarker'; });
+        if (((_b = segmentsWithoutBr[segmentsWithoutBr.length - 2]) === null || _b === void 0 ? void 0 : _b.segmentType) != 'Br') {
+            segments.pop();
+        }
+    }
+}
+/**
+ * @internal if we didn't delete anything, and we want to delete forward, now perform it
+ */
+exports.forwardDeleteCollapsedSelection = getDeleteCollapsedSelection('forward');
+/**
+ * @internal if we didn't delete anything, and we want to delete backward, now perform it
+ */
+exports.backwardDeleteCollapsedSelection = getDeleteCollapsedSelection('backward');
+//# sourceMappingURL=deleteCollapsedSelection.js.map

package/lib/edit/deleteSteps/deleteCollapsedSelection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"deleteCollapsedSelection.js","sourceRoot":"","sources":["../../../../../packages-content-model/roosterjs-content-model-plugins/lib/edit/deleteSteps/deleteCollapsedSelection.ts"],"names":[],"mappings":"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","sourcesContent":["import { deleteBlock, deleteSegment } from 'roosterjs-content-model-core';\nimport { getLeafSiblingBlock } from '../utils/getLeafSiblingBlock';\nimport { setParagraphNotImplicit } from 'roosterjs-content-model-dom';\nimport type { BlockAndPath } from '../utils/getLeafSiblingBlock';\nimport type { ContentModelSegment, DeleteSelectionStep } from 'roosterjs-content-model-types';\n\nfunction getDeleteCollapsedSelection(direction: 'forward' | 'backward'): DeleteSelectionStep {\n    return context => {\n        const isForward = direction == 'forward';\n        const { paragraph, marker, path, tableContext } = context.insertPoint;\n        const segments = paragraph.segments;\n\n        fixupBr(segments);\n\n        const index = segments.indexOf(marker) + (isForward ? 1 : -1);\n        const segmentToDelete = segments[index];\n        let blockToDelete: BlockAndPath | null;\n\n        if (segmentToDelete) {\n            if (deleteSegment(paragraph, segmentToDelete, context.formatContext, direction)) {\n                context.deleteResult = 'singleChar';\n\n                // It is possible that we have deleted everything from this paragraph, so we need to mark it as not implicit\n                // to avoid losing its format. See https://github.com/microsoft/roosterjs/issues/1953\n                setParagraphNotImplicit(paragraph);\n            }\n        } else if ((blockToDelete = getLeafSiblingBlock(path, paragraph, isForward))) {\n            const { block, path, siblingSegment } = blockToDelete;\n\n            if (block.blockType == 'Paragraph') {\n                if (siblingSegment) {\n                    // When selection is under general segment, need to check if it has a sibling sibling, and delete from it\n                    if (deleteSegment(block, siblingSegment, context.formatContext, direction)) {\n                        context.deleteResult = 'range';\n                    }\n                } else {\n                    if (isForward) {\n                        context.lastParagraph = block;\n                    } else {\n                        if (block.segments[block.segments.length - 1]?.segmentType == 'Br') {\n                            block.segments.pop();\n                        }\n\n                        context.insertPoint = {\n                            marker,\n                            paragraph: block,\n                            path,\n                            tableContext,\n                        };\n                        context.lastParagraph = paragraph;\n                        delete block.cachedElement;\n                    }\n\n                    context.deleteResult = 'range';\n                }\n\n                // When go across table, getLeafSiblingBlock will return null, when we are here, we must be in the same table context\n                context.lastTableContext = tableContext;\n            } else {\n                if (\n                    deleteBlock(\n                        path[0].blocks,\n                        block,\n                        undefined /*replacement*/,\n                        context.formatContext,\n                        direction\n                    )\n                ) {\n                    context.deleteResult = 'range';\n                }\n            }\n        } else {\n            // We have nothing to delete, in this case we don't want browser handle it as well.\n            // Because when Backspace on an empty document, it will also delete the only DIV and SPAN element, causes\n            // editor is really empty. We don't want that happen. So the handling should stop here.\n            context.deleteResult = 'nothingToDelete';\n        }\n    };\n}\n\n/**\n * If the last segment is BR, remove it for now. We may add it back later when normalize model.\n * So that if this is an empty paragraph, it will start to delete next block\n */\nfunction fixupBr(segments: ContentModelSegment[]) {\n    if (segments[segments.length - 1]?.segmentType == 'Br') {\n        const segmentsWithoutBr = segments.filter(x => x.segmentType != 'SelectionMarker');\n\n        if (segmentsWithoutBr[segmentsWithoutBr.length - 2]?.segmentType != 'Br') {\n            segments.pop();\n        }\n    }\n}\n\n/**\n * @internal if we didn't delete anything, and we want to delete forward, now perform it\n */\nexport const forwardDeleteCollapsedSelection = getDeleteCollapsedSelection('forward');\n\n/**\n * @internal if we didn't delete anything, and we want to delete backward, now perform it\n */\nexport const backwardDeleteCollapsedSelection = getDeleteCollapsedSelection('backward');\n"]}

package/lib/edit/deleteSteps/deleteWordSelection.d.ts

@@ -0,0 +1,9 @@
+import type { DeleteSelectionStep } from 'roosterjs-content-model-types';
+/**
+ * @internal
+ */
+export declare const forwardDeleteWordSelection: DeleteSelectionStep;
+/**
+ * @internal
+ */
+export declare const backwardDeleteWordSelection: DeleteSelectionStep;