roosterjs-content-model-plugins 0.26.4 → 0.28.0

package/lib/tableEdit/editors/features/TableInserter.js

@@ -0,0 +1,113 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createTableInserter = void 0;
+var createElement_1 = require("../../../pluginUtils/CreateElement/createElement");
+var getIntersectedRect_1 = require("../../../pluginUtils/Rect/getIntersectedRect");
+var roosterjs_content_model_dom_1 = require("roosterjs-content-model-dom");
+var roosterjs_content_model_api_1 = require("roosterjs-content-model-api");
+var INSERTER_COLOR = '#4A4A4A';
+var INSERTER_COLOR_DARK_MODE = 'white';
+var INSERTER_SIDE_LENGTH = 12;
+var INSERTER_BORDER_SIZE = 1;
+/**
+ * @internal
+ */
+function createTableInserter(editor, td, table, isRTL, isHorizontal, onInsert, getOnMouseOut, anchorContainer) {
+    var tdRect = (0, roosterjs_content_model_dom_1.normalizeRect)(td.getBoundingClientRect());
+    var viewPort = editor.getVisibleViewport();
+    var tableRect = table && viewPort ? (0, getIntersectedRect_1.getIntersectedRect)([table], [viewPort]) : null;
+    // set inserter position
+    if (tdRect && tableRect) {
+        var document_1 = td.ownerDocument;
+        var createElementData = getInsertElementData(isHorizontal, editor.isDarkMode(), isRTL, editor.getDOMHelper().getDomStyle('backgroundColor') || 'white');
+        var div = (0, createElement_1.createElement)(createElementData, document_1);
+        if (isHorizontal) {
+            // tableRect.left/right is used because the Inserter is always intended to be on the side
+            div.id = 'horizontalInserter';
+            div.style.left = (isRTL
+                ? tableRect.right
+                : tableRect.left - (INSERTER_SIDE_LENGTH - 1 + 2 * INSERTER_BORDER_SIZE)) + "px";
+            div.style.top = tdRect.bottom - 8 + "px";
+            div.firstChild.style.width = tableRect.right - tableRect.left + "px";
+        }
+        else {
+            div.id = 'verticalInserter';
+            div.style.left = (isRTL ? tdRect.left - 8 : tdRect.right - 8) + "px";
+            // tableRect.top is used because the Inserter is always intended to be on top
+            div.style.top = tableRect.top - (INSERTER_SIDE_LENGTH - 1 + 2 * INSERTER_BORDER_SIZE) + "px";
+            div.firstChild.style.height = tableRect.bottom - tableRect.top + "px";
+        }
+        (anchorContainer || document_1.body).appendChild(div);
+        var handler = new TableInsertHandler(div, td, table, isHorizontal, editor, onInsert, getOnMouseOut);
+        return { div: div, featureHandler: handler, node: td };
+    }
+    return null;
+}
+exports.createTableInserter = createTableInserter;
+var TableInsertHandler = /** @class */ (function () {
+    function TableInsertHandler(div, td, table, isHorizontal, editor, onInsert, getOnMouseOut) {
+        var _this = this;
+        this.div = div;
+        this.td = td;
+        this.table = table;
+        this.isHorizontal = isHorizontal;
+        this.editor = editor;
+        this.onInsert = onInsert;
+        this.insertTd = function () {
+            // Get cell coordinates
+            var columnIndex = _this.td.cellIndex;
+            var row = _this.td.parentElement && (0, roosterjs_content_model_dom_1.isElementOfType)(_this.td.parentElement, 'tr')
+                ? _this.td.parentElement
+                : undefined;
+            var rowIndex = row && row.rowIndex;
+            if ((row === null || row === void 0 ? void 0 : row.cells) == undefined || rowIndex == undefined) {
+                return;
+            }
+            // Insert row or column
+            (0, roosterjs_content_model_api_1.formatTableWithContentModel)(_this.editor, 'editTablePlugin', function (tableModel) {
+                _this.isHorizontal
+                    ? (0, roosterjs_content_model_api_1.insertTableRow)(tableModel, 'insertBelow')
+                    : (0, roosterjs_content_model_api_1.insertTableColumn)(tableModel, 'insertRight');
+            }, // Select cell to make insertion
+            {
+                type: 'table',
+                firstColumn: columnIndex,
+                firstRow: rowIndex,
+                lastColumn: columnIndex,
+                lastRow: rowIndex,
+                table: _this.table,
+            });
+            _this.onInsert();
+        };
+        this.div.addEventListener('click', this.insertTd);
+        this.onMouseOutEvent = getOnMouseOut(div);
+        this.div.addEventListener('mouseout', this.onMouseOutEvent);
+    }
+    TableInsertHandler.prototype.dispose = function () {
+        this.div.removeEventListener('click', this.insertTd);
+        if (this.onMouseOutEvent) {
+            this.div.removeEventListener('mouseout', this.onMouseOutEvent);
+        }
+        this.onMouseOutEvent = null;
+    };
+    return TableInsertHandler;
+}());
+function getInsertElementData(isHorizontal, isDark, isRTL, backgroundColor) {
+    var inserterColor = isDark ? INSERTER_COLOR_DARK_MODE : INSERTER_COLOR;
+    var outerDivStyle = "position: fixed; width: " + INSERTER_SIDE_LENGTH + "px; height: " + INSERTER_SIDE_LENGTH + "px; font-size: 16px; color: black; line-height: 8px; vertical-align: middle; text-align: center; cursor: pointer; border: solid " + INSERTER_BORDER_SIZE + "px " + inserterColor + "; border-radius: 50%; background-color: " + backgroundColor;
+    var leftOrRight = isRTL ? 'right' : 'left';
+    var childBaseStyles = "position: absolute; box-sizing: border-box; background-color: " + backgroundColor + ";";
+    var childInfo = {
+        tag: 'div',
+        style: childBaseStyles +
+            (isHorizontal
+                ? leftOrRight + ": 12px; top: 5px; height: 3px; border-top: 1px solid " + inserterColor + "; border-bottom: 1px solid " + inserterColor + "; border-right: 1px solid " + inserterColor + "; border-left: 0px;"
+                : "left: 5px; top: 12px; width: 3px; border-left: 1px solid " + inserterColor + "; border-right: 1px solid " + inserterColor + "; border-bottom: 1px solid " + inserterColor + "; border-top: 0px;"),
+    };
+    return {
+        tag: 'div',
+        style: outerDivStyle,
+        children: [childInfo, '+'],
+    };
+}
+//# sourceMappingURL=TableInserter.js.map

package/lib/tableEdit/editors/features/TableInserter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableInserter.js","sourceRoot":"","sources":["../../../../../../packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/TableInserter.ts"],"names":[],"mappings":"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","sourcesContent":["import { createElement } from '../../../pluginUtils/CreateElement/createElement';\nimport { getIntersectedRect } from '../../../pluginUtils/Rect/getIntersectedRect';\nimport { isElementOfType, normalizeRect } from 'roosterjs-content-model-dom';\nimport {\n    formatTableWithContentModel,\n    insertTableColumn,\n    insertTableRow,\n} from 'roosterjs-content-model-api';\nimport type { CreateElementData } from '../../../pluginUtils/CreateElement/CreateElementData';\nimport type { Disposable } from '../../../pluginUtils/Disposable';\nimport type { TableEditFeature } from './TableEditFeature';\nimport type { IEditor } from 'roosterjs-content-model-types';\n\nconst INSERTER_COLOR = '#4A4A4A';\nconst INSERTER_COLOR_DARK_MODE = 'white';\nconst INSERTER_SIDE_LENGTH = 12;\nconst INSERTER_BORDER_SIZE = 1;\n\n/**\n * @internal\n */\nexport function createTableInserter(\n    editor: IEditor,\n    td: HTMLTableCellElement,\n    table: HTMLTableElement,\n    isRTL: boolean,\n    isHorizontal: boolean,\n    onInsert: () => void,\n    getOnMouseOut: (feature: HTMLElement) => (ev: MouseEvent) => void,\n    anchorContainer?: HTMLElement\n): TableEditFeature | null {\n    const tdRect = normalizeRect(td.getBoundingClientRect());\n    const viewPort = editor.getVisibleViewport();\n    const tableRect = table && viewPort ? getIntersectedRect([table], [viewPort]) : null;\n\n    // set inserter position\n    if (tdRect && tableRect) {\n        const document = td.ownerDocument;\n        const createElementData = getInsertElementData(\n            isHorizontal,\n            editor.isDarkMode(),\n            isRTL,\n            editor.getDOMHelper().getDomStyle('backgroundColor') || 'white'\n        );\n\n        const div = createElement(createElementData, document) as HTMLDivElement;\n\n        if (isHorizontal) {\n            // tableRect.left/right is used because the Inserter is always intended to be on the side\n            div.id = 'horizontalInserter';\n            div.style.left = `${\n                isRTL\n                    ? tableRect.right\n                    : tableRect.left - (INSERTER_SIDE_LENGTH - 1 + 2 * INSERTER_BORDER_SIZE)\n            }px`;\n            div.style.top = `${tdRect.bottom - 8}px`;\n            (div.firstChild as HTMLElement).style.width = `${tableRect.right - tableRect.left}px`;\n        } else {\n            div.id = 'verticalInserter';\n            div.style.left = `${isRTL ? tdRect.left - 8 : tdRect.right - 8}px`;\n            // tableRect.top is used because the Inserter is always intended to be on top\n            div.style.top = `${\n                tableRect.top - (INSERTER_SIDE_LENGTH - 1 + 2 * INSERTER_BORDER_SIZE)\n            }px`;\n            (div.firstChild as HTMLElement).style.height = `${tableRect.bottom - tableRect.top}px`;\n        }\n\n        (anchorContainer || document.body).appendChild(div);\n\n        const handler = new TableInsertHandler(\n            div,\n            td,\n            table,\n            isHorizontal,\n            editor,\n            onInsert,\n            getOnMouseOut\n        );\n\n        return { div, featureHandler: handler, node: td };\n    }\n\n    return null;\n}\n\nclass TableInsertHandler implements Disposable {\n    private onMouseOutEvent: null | ((ev: MouseEvent) => void);\n    constructor(\n        private div: HTMLDivElement,\n        private td: HTMLTableCellElement,\n        private table: HTMLTableElement,\n        private isHorizontal: boolean,\n        private editor: IEditor,\n        private onInsert: () => void,\n        getOnMouseOut: (feature: HTMLElement) => (ev: MouseEvent) => void\n    ) {\n        this.div.addEventListener('click', this.insertTd);\n        this.onMouseOutEvent = getOnMouseOut(div);\n        this.div.addEventListener('mouseout', this.onMouseOutEvent);\n    }\n\n    dispose() {\n        this.div.removeEventListener('click', this.insertTd);\n\n        if (this.onMouseOutEvent) {\n            this.div.removeEventListener('mouseout', this.onMouseOutEvent);\n        }\n\n        this.onMouseOutEvent = null;\n    }\n\n    private insertTd = () => {\n        // Get cell coordinates\n        const columnIndex = this.td.cellIndex;\n        const row =\n            this.td.parentElement && isElementOfType(this.td.parentElement, 'tr')\n                ? this.td.parentElement\n                : undefined;\n        const rowIndex = row && row.rowIndex;\n\n        if (row?.cells == undefined || rowIndex == undefined) {\n            return;\n        }\n\n        // Insert row or column\n        formatTableWithContentModel(\n            this.editor,\n            'editTablePlugin',\n            tableModel => {\n                this.isHorizontal\n                    ? insertTableRow(tableModel, 'insertBelow')\n                    : insertTableColumn(tableModel, 'insertRight');\n            }, // Select cell to make insertion\n            {\n                type: 'table',\n                firstColumn: columnIndex,\n                firstRow: rowIndex,\n                lastColumn: columnIndex,\n                lastRow: rowIndex,\n                table: this.table,\n            }\n        );\n\n        this.onInsert();\n    };\n}\n\nfunction getInsertElementData(\n    isHorizontal: boolean,\n    isDark: boolean,\n    isRTL: boolean,\n    backgroundColor: string\n): CreateElementData {\n    const inserterColor = isDark ? INSERTER_COLOR_DARK_MODE : INSERTER_COLOR;\n    const outerDivStyle = `position: fixed; width: ${INSERTER_SIDE_LENGTH}px; height: ${INSERTER_SIDE_LENGTH}px; font-size: 16px; color: black; line-height: 8px; vertical-align: middle; text-align: center; cursor: pointer; border: solid ${INSERTER_BORDER_SIZE}px ${inserterColor}; border-radius: 50%; background-color: ${backgroundColor}`;\n    const leftOrRight = isRTL ? 'right' : 'left';\n    const childBaseStyles = `position: absolute; box-sizing: border-box; background-color: ${backgroundColor};`;\n    const childInfo: CreateElementData = {\n        tag: 'div',\n        style:\n            childBaseStyles +\n            (isHorizontal\n                ? `${leftOrRight}: 12px; top: 5px; height: 3px; border-top: 1px solid ${inserterColor}; border-bottom: 1px solid ${inserterColor}; border-right: 1px solid ${inserterColor}; border-left: 0px;`\n                : `left: 5px; top: 12px; width: 3px; border-left: 1px solid ${inserterColor}; border-right: 1px solid ${inserterColor}; border-bottom: 1px solid ${inserterColor}; border-top: 0px;`),\n    };\n\n    return {\n        tag: 'div',\n        style: outerDivStyle,\n        children: [childInfo, '+'],\n    };\n}\n"]}

package/lib/tableEdit/editors/features/TableMover.d.ts

@@ -0,0 +1,8 @@
+import type { IEditor } from 'roosterjs-content-model-types';
+import type { TableEditFeature } from './TableEditFeature';
+/**
+ * @internal
+ * Contains the function to select whole table
+ * Moving behavior not implemented yet
+ */
+export declare function createTableMover(table: HTMLTableElement, editor: IEditor, isRTL: boolean, onFinishDragging: (table: HTMLTableElement) => void, getOnMouseOut: (feature: HTMLElement) => (ev: MouseEvent) => void, contentDiv?: EventTarget | null, anchorContainer?: HTMLElement): TableEditFeature | null;

package/lib/tableEdit/editors/features/TableMover.js

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createTableMover = void 0;
+var tslib_1 = require("tslib");
+var createElement_1 = require("../../../pluginUtils/CreateElement/createElement");
+var DragAndDropHelper_1 = require("../../../pluginUtils/DragAndDrop/DragAndDropHelper");
+var roosterjs_content_model_dom_1 = require("roosterjs-content-model-dom");
+var TABLE_MOVER_LENGTH = 12;
+var TABLE_MOVER_ID = '_Table_Mover';
+/**
+ * @internal
+ * Contains the function to select whole table
+ * Moving behavior not implemented yet
+ */
+function createTableMover(table, editor, isRTL, onFinishDragging, getOnMouseOut, contentDiv, anchorContainer) {
+    var rect = (0, roosterjs_content_model_dom_1.normalizeRect)(table.getBoundingClientRect());
+    if (!isTableTopVisible(editor, rect, contentDiv)) {
+        return null;
+    }
+    var zoomScale = editor.getDOMHelper().calculateZoomScale();
+    var document = table.ownerDocument;
+    var createElementData = {
+        tag: 'div',
+        style: 'position: fixed; cursor: all-scroll; user-select: none; border: 1px solid #808080',
+    };
+    var div = (0, createElement_1.createElement)(createElementData, document);
+    div.id = TABLE_MOVER_ID;
+    div.style.width = TABLE_MOVER_LENGTH + "px";
+    div.style.height = TABLE_MOVER_LENGTH + "px";
+    (anchorContainer || document.body).appendChild(div);
+    var context = {
+        table: table,
+        zoomScale: zoomScale,
+        rect: rect,
+        isRTL: isRTL,
+    };
+    setDivPosition(context, div);
+    var onDragEnd = function (context, event) {
+        if (event.target == div) {
+            onFinishDragging(context.table);
+        }
+        return false;
+    };
+    var featureHandler = new TableMoverFeature(div, context, setDivPosition, {
+        onDragEnd: onDragEnd,
+    }, context.zoomScale, getOnMouseOut);
+    return { div: div, featureHandler: featureHandler, node: table };
+}
+exports.createTableMover = createTableMover;
+var TableMoverFeature = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(TableMoverFeature, _super);
+    function TableMoverFeature(div, context, onSubmit, handler, zoomScale, getOnMouseOut, forceMobile, container) {
+        var _this = _super.call(this, div, context, onSubmit, handler, zoomScale, forceMobile) || this;
+        _this.div = div;
+        _this.onMouseOut = getOnMouseOut(div);
+        div.addEventListener('mouseout', _this.onMouseOut);
+        return _this;
+    }
+    TableMoverFeature.prototype.dispose = function () {
+        _super.prototype.dispose.call(this);
+        if (this.onMouseOut) {
+            this.div.removeEventListener('mouseout', this.onMouseOut);
+        }
+        this.onMouseOut = null;
+    };
+    return TableMoverFeature;
+}(DragAndDropHelper_1.DragAndDropHelper));
+function setDivPosition(context, trigger) {
+    var rect = context.rect;
+    if (rect) {
+        trigger.style.top = rect.top - TABLE_MOVER_LENGTH + "px";
+        trigger.style.left = rect.left - TABLE_MOVER_LENGTH - 2 + "px";
+    }
+}
+function isTableTopVisible(editor, rect, contentDiv) {
+    var visibleViewport = editor.getVisibleViewport();
+    if ((0, roosterjs_content_model_dom_1.isNodeOfType)(contentDiv, 'ELEMENT_NODE') && visibleViewport && rect) {
+        var containerRect = (0, roosterjs_content_model_dom_1.normalizeRect)(contentDiv.getBoundingClientRect());
+        return !!containerRect && containerRect.top <= rect.top && visibleViewport.top <= rect.top;
+    }
+    return true;
+}
+//# sourceMappingURL=TableMover.js.map

package/lib/tableEdit/editors/features/TableMover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableMover.js","sourceRoot":"","sources":["../../../../../../packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/TableMover.ts"],"names":[],"mappings":"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","sourcesContent":["import { createElement } from '../../../pluginUtils/CreateElement/createElement';\nimport { DragAndDropHelper } from '../../../pluginUtils/DragAndDrop/DragAndDropHelper';\nimport { isNodeOfType, normalizeRect } from 'roosterjs-content-model-dom';\nimport type { DragAndDropHandler } from '../../../pluginUtils/DragAndDrop/DragAndDropHandler';\nimport type { IEditor, Rect } from 'roosterjs-content-model-types';\nimport type { TableEditFeature } from './TableEditFeature';\n\nconst TABLE_MOVER_LENGTH = 12;\nconst TABLE_MOVER_ID = '_Table_Mover';\n\n/**\n * @internal\n * Contains the function to select whole table\n * Moving behavior not implemented yet\n */\nexport function createTableMover(\n    table: HTMLTableElement,\n    editor: IEditor,\n    isRTL: boolean,\n    onFinishDragging: (table: HTMLTableElement) => void,\n    getOnMouseOut: (feature: HTMLElement) => (ev: MouseEvent) => void,\n    contentDiv?: EventTarget | null,\n    anchorContainer?: HTMLElement\n): TableEditFeature | null {\n    const rect = normalizeRect(table.getBoundingClientRect());\n\n    if (!isTableTopVisible(editor, rect, contentDiv as Node)) {\n        return null;\n    }\n\n    const zoomScale = editor.getDOMHelper().calculateZoomScale();\n    const document = table.ownerDocument;\n    const createElementData = {\n        tag: 'div',\n        style: 'position: fixed; cursor: all-scroll; user-select: none; border: 1px solid #808080',\n    };\n\n    const div = createElement(createElementData, document) as HTMLDivElement;\n\n    div.id = TABLE_MOVER_ID;\n    div.style.width = `${TABLE_MOVER_LENGTH}px`;\n    div.style.height = `${TABLE_MOVER_LENGTH}px`;\n\n    (anchorContainer || document.body).appendChild(div);\n\n    const context: TableMoverContext = {\n        table,\n        zoomScale,\n        rect,\n        isRTL,\n    };\n\n    setDivPosition(context, div);\n\n    const onDragEnd = (context: TableMoverContext, event: MouseEvent): false => {\n        if (event.target == div) {\n            onFinishDragging(context.table);\n        }\n        return false;\n    };\n\n    const featureHandler = new TableMoverFeature(\n        div,\n        context,\n        setDivPosition,\n        {\n            onDragEnd,\n        },\n        context.zoomScale,\n        getOnMouseOut\n    );\n\n    return { div, featureHandler, node: table };\n}\n\ninterface TableMoverContext {\n    table: HTMLTableElement;\n    zoomScale: number;\n    rect: Rect | null;\n    isRTL: boolean;\n}\n\ninterface TableMoverInitValue {\n    event: MouseEvent;\n}\n\nclass TableMoverFeature extends DragAndDropHelper<TableMoverContext, TableMoverInitValue> {\n    private onMouseOut: ((ev: MouseEvent) => void) | null;\n\n    constructor(\n        private div: HTMLElement,\n        context: TableMoverContext,\n        onSubmit: (\n            context: TableMoverContext,\n            trigger: HTMLElement,\n            container?: HTMLElement\n        ) => void,\n        handler: DragAndDropHandler<TableMoverContext, TableMoverInitValue>,\n        zoomScale: number,\n        getOnMouseOut: (feature: HTMLElement) => (ev: MouseEvent) => void,\n        forceMobile?: boolean | undefined,\n        container?: HTMLElement\n    ) {\n        super(div, context, onSubmit, handler, zoomScale, forceMobile);\n        this.onMouseOut = getOnMouseOut(div);\n        div.addEventListener('mouseout', this.onMouseOut);\n    }\n\n    dispose(): void {\n        super.dispose();\n        if (this.onMouseOut) {\n            this.div.removeEventListener('mouseout', this.onMouseOut);\n        }\n        this.onMouseOut = null;\n    }\n}\n\nfunction setDivPosition(context: TableMoverContext, trigger: HTMLElement) {\n    const { rect } = context;\n    if (rect) {\n        trigger.style.top = `${rect.top - TABLE_MOVER_LENGTH}px`;\n        trigger.style.left = `${rect.left - TABLE_MOVER_LENGTH - 2}px`;\n    }\n}\n\nfunction isTableTopVisible(editor: IEditor, rect: Rect | null, contentDiv?: Node | null): boolean {\n    const visibleViewport = editor.getVisibleViewport();\n    if (isNodeOfType(contentDiv, 'ELEMENT_NODE') && visibleViewport && rect) {\n        const containerRect = normalizeRect(contentDiv.getBoundingClientRect());\n\n        return !!containerRect && containerRect.top <= rect.top && visibleViewport.top <= rect.top;\n    }\n\n    return true;\n}\n"]}

package/lib/tableEdit/editors/features/TableResizer.d.ts

@@ -0,0 +1,6 @@
+import type { IEditor } from 'roosterjs-content-model-types';
+import type { TableEditFeature } from './TableEditFeature';
+/**
+ * @internal
+ */
+export declare function createTableResizer(table: HTMLTableElement, editor: IEditor, isRTL: boolean, onStart: () => void, onEnd: () => false, contentDiv?: EventTarget | null, anchorContainer?: HTMLElement): TableEditFeature | null;

package/lib/tableEdit/editors/features/TableResizer.js

@@ -0,0 +1,166 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createTableResizer = void 0;
+var createElement_1 = require("../../../pluginUtils/CreateElement/createElement");
+var DragAndDropHelper_1 = require("../../../pluginUtils/DragAndDrop/DragAndDropHelper");
+var roosterjs_content_model_core_1 = require("roosterjs-content-model-core");
+var roosterjs_content_model_dom_1 = require("roosterjs-content-model-dom");
+var TABLE_RESIZER_LENGTH = 12;
+var TABLE_RESIZER_ID = '_Table_Resizer';
+/**
+ * @internal
+ */
+function createTableResizer(table, editor, isRTL, onStart, onEnd, contentDiv, anchorContainer) {
+    var rect = (0, roosterjs_content_model_dom_1.normalizeRect)(table.getBoundingClientRect());
+    if (!isTableBottomVisible(editor, rect, contentDiv)) {
+        return null;
+    }
+    var document = table.ownerDocument;
+    var zoomScale = editor.getDOMHelper().calculateZoomScale();
+    var createElementData = {
+        tag: 'div',
+        style: "position: fixed; cursor: " + (isRTL ? 'ne' : 'nw') + "-resize; user-select: none; border: 1px solid #808080",
+    };
+    var div = (0, createElement_1.createElement)(createElementData, document);
+    div.id = TABLE_RESIZER_ID;
+    div.style.width = TABLE_RESIZER_LENGTH + "px";
+    div.style.height = TABLE_RESIZER_LENGTH + "px";
+    (anchorContainer || document.body).appendChild(div);
+    var context = {
+        isRTL: isRTL,
+        table: table,
+        zoomScale: zoomScale,
+        onStart: onStart,
+        onEnd: onEnd,
+        div: div,
+        editor: editor,
+        contentDiv: contentDiv,
+    };
+    setDivPosition(context, div);
+    var featureHandler = new DragAndDropHelper_1.DragAndDropHelper(div, context, hideResizer, // Resizer is hidden while dragging only
+    {
+        onDragStart: onDragStart,
+        onDragging: onDragging,
+        onDragEnd: onDragEnd,
+    }, zoomScale, editor.getEnvironment().isMobileOrTablet);
+    return { node: table, div: div, featureHandler: featureHandler };
+}
+exports.createTableResizer = createTableResizer;
+function onDragStart(context, event) {
+    context.onStart();
+    var editor = context.editor, table = context.table;
+    // Get current selection
+    var selection = editor.getDOMSelection();
+    // Select first cell of the table
+    editor.setDOMSelection({
+        type: 'table',
+        firstColumn: 0,
+        firstRow: 0,
+        lastColumn: 0,
+        lastRow: 0,
+        table: table,
+    });
+    // Get the table content model
+    var cmTable = (0, roosterjs_content_model_core_1.getFirstSelectedTable)(editor.getContentModelCopy('disconnected'))[0];
+    // Restore selection
+    editor.setDOMSelection(selection);
+    // Save original widths and heights
+    var heights = [];
+    cmTable === null || cmTable === void 0 ? void 0 : cmTable.rows.forEach(function (row) {
+        heights.push(row.height);
+    });
+    var widths = [];
+    cmTable === null || cmTable === void 0 ? void 0 : cmTable.widths.forEach(function (width) {
+        widths.push(width);
+    });
+    return {
+        originalRect: table.getBoundingClientRect(),
+        cmTable: cmTable,
+        originalHeights: heights !== null && heights !== void 0 ? heights : [],
+        originalWidths: widths !== null && widths !== void 0 ? widths : [],
+    };
+}
+function onDragging(context, event, initValue, deltaX, deltaY) {
+    var _a, _b;
+    var isRTL = context.isRTL, zoomScale = context.zoomScale, table = context.table;
+    var originalRect = initValue.originalRect, originalHeights = initValue.originalHeights, originalWidths = initValue.originalWidths, cmTable = initValue.cmTable;
+    var ratioX = 1.0 + (deltaX / originalRect.width) * zoomScale * (isRTL ? -1 : 1);
+    var ratioY = 1.0 + (deltaY / originalRect.height) * zoomScale;
+    var shouldResizeX = Math.abs(ratioX - 1.0) > 1e-3;
+    var shouldResizeY = Math.abs(ratioY - 1.0) > 1e-3;
+    // If the width of some external table is fixed, we need to make it resizable
+    table.style.setProperty('width', null);
+    // If the height of some external table is fixed, we need to make it resizable
+    table.style.setProperty('height', null);
+    // Assign new widths and heights to the CM table
+    if (cmTable && cmTable.rows && (shouldResizeX || shouldResizeY)) {
+        // Modify the CM Table size
+        for (var i = 0; i < cmTable.rows.length; i++) {
+            for (var j = 0; j < cmTable.rows[i].cells.length; j++) {
+                var cell = cmTable.rows[i].cells[j];
+                if (cell) {
+                    if (shouldResizeX && i == 0) {
+                        cmTable.widths[j] = ((_a = originalWidths[j]) !== null && _a !== void 0 ? _a : 0) * ratioX;
+                    }
+                    if (shouldResizeY && j == 0) {
+                        cmTable.rows[i].height = ((_b = originalHeights[i]) !== null && _b !== void 0 ? _b : 0) * ratioY;
+                    }
+                }
+            }
+        }
+        // Normalize the table
+        (0, roosterjs_content_model_core_1.normalizeTable)(cmTable);
+        // Writeback CM Table size changes to DOM Table
+        for (var row = 0; row < table.rows.length; row++) {
+            var tableRow = table.rows[row];
+            if (tableRow.cells.length == 0) {
+                // Skip empty row
+                continue;
+            }
+            for (var col = 0; col < tableRow.cells.length; col++) {
+                var td = tableRow.cells[col];
+                td.style.width = cmTable.widths[col] + 'px';
+                td.style.height = cmTable.rows[row].height + 'px';
+            }
+        }
+        return true;
+    }
+    else {
+        return false;
+    }
+}
+function onDragEnd(context, event, initValue) {
+    if (context.editor.isDisposed()) {
+        return false;
+    }
+    if (isTableBottomVisible(context.editor, (0, roosterjs_content_model_dom_1.normalizeRect)(context.table.getBoundingClientRect()), context.contentDiv)) {
+        context.div.style.visibility = 'visible';
+        setDivPosition(context, context.div);
+    }
+    context.onEnd();
+    return false;
+}
+function setDivPosition(context, trigger) {
+    var table = context.table, isRTL = context.isRTL;
+    var rect = (0, roosterjs_content_model_dom_1.normalizeRect)(table.getBoundingClientRect());
+    if (rect) {
+        trigger.style.top = rect.bottom + "px";
+        trigger.style.left = isRTL
+            ? rect.left - TABLE_RESIZER_LENGTH - 2 + "px"
+            : rect.right + "px";
+    }
+}
+function hideResizer(context, trigger) {
+    trigger.style.visibility = 'hidden';
+}
+function isTableBottomVisible(editor, rect, contentDiv) {
+    var visibleViewport = editor.getVisibleViewport();
+    if ((0, roosterjs_content_model_dom_1.isNodeOfType)(contentDiv, 'ELEMENT_NODE') && visibleViewport && rect) {
+        var containerRect = (0, roosterjs_content_model_dom_1.normalizeRect)(contentDiv.getBoundingClientRect());
+        return (!!containerRect &&
+            containerRect.bottom >= rect.bottom &&
+            visibleViewport.bottom >= rect.bottom);
+    }
+    return true;
+}
+//# sourceMappingURL=TableResizer.js.map

package/lib/tableEdit/editors/features/TableResizer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableResizer.js","sourceRoot":"","sources":["../../../../../../packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/TableResizer.ts"],"names":[],"mappings":"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","sourcesContent":["import { createElement } from '../../../pluginUtils/CreateElement/createElement';\nimport { DragAndDropHelper } from '../../../pluginUtils/DragAndDrop/DragAndDropHelper';\nimport { getFirstSelectedTable, normalizeTable } from 'roosterjs-content-model-core';\nimport { isNodeOfType, normalizeRect } from 'roosterjs-content-model-dom';\nimport type { ContentModelTable, IEditor, Rect } from 'roosterjs-content-model-types';\nimport type { TableEditFeature } from './TableEditFeature';\n\nconst TABLE_RESIZER_LENGTH = 12;\nconst TABLE_RESIZER_ID = '_Table_Resizer';\n\n/**\n * @internal\n */\nexport function createTableResizer(\n    table: HTMLTableElement,\n    editor: IEditor,\n    isRTL: boolean,\n    onStart: () => void,\n    onEnd: () => false,\n    contentDiv?: EventTarget | null,\n    anchorContainer?: HTMLElement\n): TableEditFeature | null {\n    const rect = normalizeRect(table.getBoundingClientRect());\n\n    if (!isTableBottomVisible(editor, rect, contentDiv as Node)) {\n        return null;\n    }\n\n    const document = table.ownerDocument;\n    const zoomScale = editor.getDOMHelper().calculateZoomScale();\n    const createElementData = {\n        tag: 'div',\n        style: `position: fixed; cursor: ${\n            isRTL ? 'ne' : 'nw'\n        }-resize; user-select: none; border: 1px solid #808080`,\n    };\n\n    const div = createElement(createElementData, document) as HTMLDivElement;\n\n    div.id = TABLE_RESIZER_ID;\n    div.style.width = `${TABLE_RESIZER_LENGTH}px`;\n    div.style.height = `${TABLE_RESIZER_LENGTH}px`;\n\n    (anchorContainer || document.body).appendChild(div);\n\n    const context: DragAndDropContext = {\n        isRTL,\n        table,\n        zoomScale,\n        onStart,\n        onEnd,\n        div,\n        editor,\n        contentDiv,\n    };\n\n    setDivPosition(context, div);\n\n    const featureHandler = new DragAndDropHelper<DragAndDropContext, DragAndDropInitValue>(\n        div,\n        context,\n        hideResizer, // Resizer is hidden while dragging only\n        {\n            onDragStart,\n            onDragging,\n            onDragEnd,\n        },\n        zoomScale,\n        editor.getEnvironment().isMobileOrTablet\n    );\n\n    return { node: table, div, featureHandler };\n}\n\ninterface DragAndDropContext {\n    table: HTMLTableElement;\n    isRTL: boolean;\n    zoomScale: number;\n    onStart: () => void;\n    onEnd: () => false;\n    div: HTMLDivElement;\n    editor: IEditor;\n    contentDiv?: EventTarget | null;\n}\n\ninterface DragAndDropInitValue {\n    originalRect: DOMRect;\n    originalHeights: number[];\n    originalWidths: number[];\n    cmTable: ContentModelTable | undefined;\n}\n\nfunction onDragStart(context: DragAndDropContext, event: MouseEvent) {\n    context.onStart();\n\n    const { editor, table } = context;\n\n    // Get current selection\n    const selection = editor.getDOMSelection();\n\n    // Select first cell of the table\n    editor.setDOMSelection({\n        type: 'table',\n        firstColumn: 0,\n        firstRow: 0,\n        lastColumn: 0,\n        lastRow: 0,\n        table: table,\n    });\n\n    // Get the table content model\n    const cmTable = getFirstSelectedTable(editor.getContentModelCopy('disconnected'))[0];\n\n    // Restore selection\n    editor.setDOMSelection(selection);\n\n    // Save original widths and heights\n    const heights: number[] = [];\n    cmTable?.rows.forEach(row => {\n        heights.push(row.height);\n    });\n    const widths: number[] = [];\n    cmTable?.widths.forEach(width => {\n        widths.push(width);\n    });\n\n    return {\n        originalRect: table.getBoundingClientRect(),\n        cmTable,\n        originalHeights: heights ?? [],\n        originalWidths: widths ?? [],\n    };\n}\n\nfunction onDragging(\n    context: DragAndDropContext,\n    event: MouseEvent,\n    initValue: DragAndDropInitValue,\n    deltaX: number,\n    deltaY: number\n) {\n    const { isRTL, zoomScale, table } = context;\n    const { originalRect, originalHeights, originalWidths, cmTable } = initValue;\n\n    const ratioX = 1.0 + (deltaX / originalRect.width) * zoomScale * (isRTL ? -1 : 1);\n    const ratioY = 1.0 + (deltaY / originalRect.height) * zoomScale;\n    const shouldResizeX = Math.abs(ratioX - 1.0) > 1e-3;\n    const shouldResizeY = Math.abs(ratioY - 1.0) > 1e-3;\n\n    // If the width of some external table is fixed, we need to make it resizable\n    table.style.setProperty('width', null);\n    // If the height of some external table is fixed, we need to make it resizable\n    table.style.setProperty('height', null);\n\n    // Assign new widths and heights to the CM table\n    if (cmTable && cmTable.rows && (shouldResizeX || shouldResizeY)) {\n        // Modify the CM Table size\n        for (let i = 0; i < cmTable.rows.length; i++) {\n            for (let j = 0; j < cmTable.rows[i].cells.length; j++) {\n                const cell = cmTable.rows[i].cells[j];\n                if (cell) {\n                    if (shouldResizeX && i == 0) {\n                        cmTable.widths[j] = (originalWidths[j] ?? 0) * ratioX;\n                    }\n                    if (shouldResizeY && j == 0) {\n                        cmTable.rows[i].height = (originalHeights[i] ?? 0) * ratioY;\n                    }\n                }\n            }\n        }\n\n        // Normalize the table\n        normalizeTable(cmTable);\n\n        // Writeback CM Table size changes to DOM Table\n        for (let row = 0; row < table.rows.length; row++) {\n            const tableRow = table.rows[row];\n\n            if (tableRow.cells.length == 0) {\n                // Skip empty row\n                continue;\n            }\n\n            for (let col = 0; col < tableRow.cells.length; col++) {\n                const td = tableRow.cells[col];\n                td.style.width = cmTable.widths[col] + 'px';\n                td.style.height = cmTable.rows[row].height + 'px';\n            }\n        }\n        return true;\n    } else {\n        return false;\n    }\n}\n\nfunction onDragEnd(\n    context: DragAndDropContext,\n    event: MouseEvent,\n    initValue: DragAndDropInitValue | undefined\n) {\n    if (context.editor.isDisposed()) {\n        return false;\n    }\n    if (\n        isTableBottomVisible(\n            context.editor,\n            normalizeRect(context.table.getBoundingClientRect()),\n            context.contentDiv as Node\n        )\n    ) {\n        context.div.style.visibility = 'visible';\n        setDivPosition(context, context.div);\n    }\n    context.onEnd();\n    return false;\n}\n\nfunction setDivPosition(context: DragAndDropContext, trigger: HTMLElement) {\n    const { table, isRTL } = context;\n    const rect = normalizeRect(table.getBoundingClientRect());\n\n    if (rect) {\n        trigger.style.top = `${rect.bottom}px`;\n        trigger.style.left = isRTL\n            ? `${rect.left - TABLE_RESIZER_LENGTH - 2}px`\n            : `${rect.right}px`;\n    }\n}\n\nfunction hideResizer(context: DragAndDropContext, trigger: HTMLElement) {\n    trigger.style.visibility = 'hidden';\n}\n\nfunction isTableBottomVisible(\n    editor: IEditor,\n    rect: Rect | null,\n    contentDiv?: Node | null\n): boolean {\n    const visibleViewport = editor.getVisibleViewport();\n    if (isNodeOfType(contentDiv, 'ELEMENT_NODE') && visibleViewport && rect) {\n        const containerRect = normalizeRect(contentDiv.getBoundingClientRect());\n\n        return (\n            !!containerRect &&\n            containerRect.bottom >= rect.bottom &&\n            visibleViewport.bottom >= rect.bottom\n        );\n    }\n\n    return true;\n}\n"]}

package/lib-amd/autoFormat/AutoFormatPlugin.d.ts

@@ -1,4 +1,4 @@
-import type { EditorPlugin, IStandaloneEditor, PluginEvent } from 'roosterjs-content-model-types';
+import type { EditorPlugin, IEditor, PluginEvent } from 'roosterjs-content-model-types';
 /**
  * Options to customize the Content Model Auto Format Plugin
  */
@@ -11,6 +11,14 @@ export declare type AutoFormatOptions = {
      * When true, after type 1, A, a, i, I followed by ., ), - or between () and space key a type of numbering list will be triggered. @default true
      */
     autoNumbering: boolean;
+    /**
+     * When press backspace before a link, remove the hyperlink
+     */
+    autoUnlink: boolean;
+    /**
+     * When paste content, create hyperlink for the pasted link
+     */
+    autoLink: boolean;
 };
 /**
  * Auto Format plugin handles auto formatting, such as transforming * characters into a bullet list.
@@ -35,7 +43,7 @@ export declare class AutoFormatPlugin implements EditorPlugin {
      * editor reference so that it can call to any editor method or format API later.
      * @param editor The editor object
      */
-    initialize(editor: IStandaloneEditor): void;
+    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
@@ -50,4 +58,5 @@ export declare class AutoFormatPlugin implements EditorPlugin {
      */
     onPluginEvent(event: PluginEvent): void;
     private handleKeyDownEvent;
+    private handleContentChangedEvent;
 }

package/lib-amd/autoFormat/AutoFormatPlugin.js

@@ -1,4 +1,4 @@
-define(["require", "exports", "./keyboardListTrigger"], function (require, exports, keyboardListTrigger_1) {
+define(["require", "exports", "./link/createLink", "./link/createLinkAfterSpace", "./list/keyboardListTrigger", "./link/unlink"], function (require, exports, createLink_1, createLinkAfterSpace_1, keyboardListTrigger_1, unlink_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.AutoFormatPlugin = void 0;
@@ -8,6 +8,8 @@ define(["require", "exports", "./keyboardListTrigger"], function (require, expor
     var DefaultOptions = {
         autoBullet: true,
         autoNumbering: true,
+        autoUnlink: false,
+        autoLink: true,
     };
     /**
      * Auto Format plugin handles auto formatting, such as transforming * characters into a bullet list.
@@ -59,22 +61,37 @@ define(["require", "exports", "./keyboardListTrigger"], function (require, expor
                     case 'keyDown':
                         this.handleKeyDownEvent(this.editor, event);
                         break;
+                    case 'contentChanged':
+                        this.handleContentChangedEvent(this.editor, event);
+                        break;
                 }
             }
         };
         AutoFormatPlugin.prototype.handleKeyDownEvent = function (editor, event) {
             var rawEvent = event.rawEvent;
             if (!rawEvent.defaultPrevented && !event.handledByEditFeature) {
+                var _a = this.options, autoBullet = _a.autoBullet, autoNumbering = _a.autoNumbering, autoUnlink = _a.autoUnlink, autoLink = _a.autoLink;
                 switch (rawEvent.key) {
                     case ' ':
-                        var _a = this.options, autoBullet = _a.autoBullet, autoNumbering = _a.autoNumbering;
-                        if (autoBullet || autoNumbering) {
-                            (0, keyboardListTrigger_1.keyboardListTrigger)(editor, rawEvent, autoBullet, autoNumbering);
+                        (0, keyboardListTrigger_1.keyboardListTrigger)(editor, rawEvent, autoBullet, autoNumbering);
+                        if (autoLink) {
+                            (0, createLinkAfterSpace_1.createLinkAfterSpace)(editor);
+                        }
+                        break;
+                    case 'Backspace':
+                        if (autoUnlink) {
+                            (0, unlink_1.unlink)(editor, rawEvent);
                         }
                         break;
                 }
             }
         };
+        AutoFormatPlugin.prototype.handleContentChangedEvent = function (editor, event) {
+            var autoLink = this.options.autoLink;
+            if (event.source == 'Paste' && autoLink) {
+                (0, createLink_1.createLink)(editor);
+            }
+        };
         return AutoFormatPlugin;
     }());
     exports.AutoFormatPlugin = AutoFormatPlugin;

package/lib-amd/autoFormat/AutoFormatPlugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"AutoFormatPlugin.js","sourceRoot":"","sources":["../../../../packages-content-model/roosterjs-content-model-plugins/lib/autoFormat/AutoFormatPlugin.ts"],"names":[],"mappings":";;;;IAuBA;;OAEG;IACH,IAAM,cAAc,GAAgC;QAChD,UAAU,EAAE,IAAI;QAChB,aAAa,EAAE,IAAI;KACtB,CAAC;IAEF;;;OAGG;IACH;QAGI;;;;WAIG;QACH,0BAAoB,OAA2C;YAA3C,wBAAA,EAAA,wBAA2C;YAA3C,YAAO,GAAP,OAAO,CAAoC;YAPvD,WAAM,GAA6B,IAAI,CAAC;QAOkB,CAAC;QAEnE;;WAEG;QACH,kCAAO,GAAP;YACI,OAAO,YAAY,CAAC;QACxB,CAAC;QAED;;;;;WAKG;QACH,qCAAU,GAAV,UAAW,MAAyB;YAChC,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACzB,CAAC;QAED;;;;WAIG;QACH,kCAAO,GAAP;YACI,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACvB,CAAC;QAED;;;;;WAKG;QACH,wCAAa,GAAb,UAAc,KAAkB;YAC5B,IAAI,IAAI,CAAC,MAAM,EAAE;gBACb,QAAQ,KAAK,CAAC,SAAS,EAAE;oBACrB,KAAK,SAAS;wBACV,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;wBAC5C,MAAM;iBACb;aACJ;QACL,CAAC;QAEO,6CAAkB,GAA1B,UAA2B,MAAyB,EAAE,KAAmB;YACrE,IAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC;YAChC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,IAAI,CAAC,KAAK,CAAC,oBAAoB,EAAE;gBAC3D,QAAQ,QAAQ,CAAC,GAAG,EAAE;oBAClB,KAAK,GAAG;wBACE,IAAA,KAAgC,IAAI,CAAC,OAAO,EAA1C,UAAU,gBAAA,EAAE,aAAa,mBAAiB,CAAC;wBACnD,IAAI,UAAU,IAAI,aAAa,EAAE;4BAC7B,IAAA,yCAAmB,EAAC,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,aAAa,CAAC,CAAC;yBACpE;wBACD,MAAM;iBACb;aACJ;QACL,CAAC;QACL,uBAAC;IAAD,CAAC,AAjED,IAiEC;IAjEY,4CAAgB","sourcesContent":["import { keyboardListTrigger } from './keyboardListTrigger';\nimport type {\n    EditorPlugin,\n    IStandaloneEditor,\n    KeyDownEvent,\n    PluginEvent,\n} from 'roosterjs-content-model-types';\n\n/**\n * Options to customize the Content Model Auto Format Plugin\n */\nexport type AutoFormatOptions = {\n    /**\n     * When true, after type *, ->, -, --, => , —, > and space key a type of bullet list will be triggered. @default true\n     */\n    autoBullet: boolean;\n\n    /**\n     * When true, after type 1, A, a, i, I followed by ., ), - or between () and space key a type of numbering list will be triggered. @default true\n     */\n    autoNumbering: boolean;\n};\n\n/**\n * @internal\n */\nconst DefaultOptions: Required<AutoFormatOptions> = {\n    autoBullet: true,\n    autoNumbering: true,\n};\n\n/**\n * Auto Format plugin handles auto formatting, such as transforming * characters into a bullet list.\n * It can be customized with options to enable or disable auto list features.\n */\nexport class AutoFormatPlugin implements EditorPlugin {\n    private editor: IStandaloneEditor | null = null;\n\n    /**\n     * @param options An optional parameter that takes in an object of type AutoFormatOptions, which includes the following properties:\n     *  - autoBullet: A boolean that enables or disables automatic bullet list formatting. Defaults to true.\n     *  - autoNumbering: A boolean that enables or disables automatic numbering formatting. Defaults to true.\n     */\n    constructor(private options: AutoFormatOptions = DefaultOptions) {}\n\n    /**\n     * Get name of this plugin\n     */\n    getName() {\n        return 'AutoFormat';\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: IStandaloneEditor) {\n        this.editor = editor;\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 'keyDown':\n                    this.handleKeyDownEvent(this.editor, event);\n                    break;\n            }\n        }\n    }\n\n    private handleKeyDownEvent(editor: IStandaloneEditor, event: KeyDownEvent) {\n        const rawEvent = event.rawEvent;\n        if (!rawEvent.defaultPrevented && !event.handledByEditFeature) {\n            switch (rawEvent.key) {\n                case ' ':\n                    const { autoBullet, autoNumbering } = this.options;\n                    if (autoBullet || autoNumbering) {\n                        keyboardListTrigger(editor, rawEvent, autoBullet, autoNumbering);\n                    }\n                    break;\n            }\n        }\n    }\n}\n"]}
+{"version":3,"file":"AutoFormatPlugin.js","sourceRoot":"","sources":["../../../../packages/roosterjs-content-model-plugins/lib/autoFormat/AutoFormatPlugin.ts"],"names":[],"mappings":";;;;IAqCA;;OAEG;IACH,IAAM,cAAc,GAAgC;QAChD,UAAU,EAAE,IAAI;QAChB,aAAa,EAAE,IAAI;QACnB,UAAU,EAAE,KAAK;QACjB,QAAQ,EAAE,IAAI;KACjB,CAAC;IAEF;;;OAGG;IACH;QAGI;;;;WAIG;QACH,0BAAoB,OAA2C;YAA3C,wBAAA,EAAA,wBAA2C;YAA3C,YAAO,GAAP,OAAO,CAAoC;YAPvD,WAAM,GAAmB,IAAI,CAAC;QAO4B,CAAC;QAEnE;;WAEG;QACH,kCAAO,GAAP;YACI,OAAO,YAAY,CAAC;QACxB,CAAC;QAED;;;;;WAKG;QACH,qCAAU,GAAV,UAAW,MAAe;YACtB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACzB,CAAC;QAED;;;;WAIG;QACH,kCAAO,GAAP;YACI,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACvB,CAAC;QAED;;;;;WAKG;QACH,wCAAa,GAAb,UAAc,KAAkB;YAC5B,IAAI,IAAI,CAAC,MAAM,EAAE;gBACb,QAAQ,KAAK,CAAC,SAAS,EAAE;oBACrB,KAAK,SAAS;wBACV,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;wBAC5C,MAAM;oBACV,KAAK,gBAAgB;wBACjB,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;wBACnD,MAAM;iBACb;aACJ;QACL,CAAC;QAEO,6CAAkB,GAA1B,UAA2B,MAAe,EAAE,KAAmB;YAC3D,IAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC;YAChC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,IAAI,CAAC,KAAK,CAAC,oBAAoB,EAAE;gBACrD,IAAA,KAAsD,IAAI,CAAC,OAAO,EAAhE,UAAU,gBAAA,EAAE,aAAa,mBAAA,EAAE,UAAU,gBAAA,EAAE,QAAQ,cAAiB,CAAC;gBACzE,QAAQ,QAAQ,CAAC,GAAG,EAAE;oBAClB,KAAK,GAAG;wBACJ,IAAA,yCAAmB,EAAC,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,aAAa,CAAC,CAAC;wBACjE,IAAI,QAAQ,EAAE;4BACV,IAAA,2CAAoB,EAAC,MAAM,CAAC,CAAC;yBAChC;wBACD,MAAM;oBACV,KAAK,WAAW;wBACZ,IAAI,UAAU,EAAE;4BACZ,IAAA,eAAM,EAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;yBAC5B;wBACD,MAAM;iBACb;aACJ;QACL,CAAC;QAEO,oDAAyB,GAAjC,UAAkC,MAAe,EAAE,KAA0B;YACjE,IAAA,QAAQ,GAAK,IAAI,CAAC,OAAO,SAAjB,CAAkB;YAClC,IAAI,KAAK,CAAC,MAAM,IAAI,OAAO,IAAI,QAAQ,EAAE;gBACrC,IAAA,uBAAU,EAAC,MAAM,CAAC,CAAC;aACtB;QACL,CAAC;QACL,uBAAC;IAAD,CAAC,AAjFD,IAiFC;IAjFY,4CAAgB","sourcesContent":["import { createLink } from './link/createLink';\nimport { createLinkAfterSpace } from './link/createLinkAfterSpace';\nimport { keyboardListTrigger } from './list/keyboardListTrigger';\nimport { unlink } from './link/unlink';\nimport type {\n    ContentChangedEvent,\n    EditorPlugin,\n    IEditor,\n    KeyDownEvent,\n    PluginEvent,\n} from 'roosterjs-content-model-types';\n\n/**\n * Options to customize the Content Model Auto Format Plugin\n */\nexport type AutoFormatOptions = {\n    /**\n     * When true, after type *, ->, -, --, => , —, > and space key a type of bullet list will be triggered. @default true\n     */\n    autoBullet: boolean;\n\n    /**\n     * When true, after type 1, A, a, i, I followed by ., ), - or between () and space key a type of numbering list will be triggered. @default true\n     */\n    autoNumbering: boolean;\n\n    /**\n     * When press backspace before a link, remove the hyperlink\n     */\n    autoUnlink: boolean;\n\n    /**\n     * When paste content, create hyperlink for the pasted link\n     */\n    autoLink: boolean;\n};\n\n/**\n * @internal\n */\nconst DefaultOptions: Required<AutoFormatOptions> = {\n    autoBullet: true,\n    autoNumbering: true,\n    autoUnlink: false,\n    autoLink: true,\n};\n\n/**\n * Auto Format plugin handles auto formatting, such as transforming * characters into a bullet list.\n * It can be customized with options to enable or disable auto list features.\n */\nexport class AutoFormatPlugin implements EditorPlugin {\n    private editor: IEditor | null = null;\n\n    /**\n     * @param options An optional parameter that takes in an object of type AutoFormatOptions, which includes the following properties:\n     *  - autoBullet: A boolean that enables or disables automatic bullet list formatting. Defaults to true.\n     *  - autoNumbering: A boolean that enables or disables automatic numbering formatting. Defaults to true.\n     */\n    constructor(private options: AutoFormatOptions = DefaultOptions) {}\n\n    /**\n     * Get name of this plugin\n     */\n    getName() {\n        return 'AutoFormat';\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;\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 'keyDown':\n                    this.handleKeyDownEvent(this.editor, event);\n                    break;\n                case 'contentChanged':\n                    this.handleContentChangedEvent(this.editor, event);\n                    break;\n            }\n        }\n    }\n\n    private handleKeyDownEvent(editor: IEditor, event: KeyDownEvent) {\n        const rawEvent = event.rawEvent;\n        if (!rawEvent.defaultPrevented && !event.handledByEditFeature) {\n            const { autoBullet, autoNumbering, autoUnlink, autoLink } = this.options;\n            switch (rawEvent.key) {\n                case ' ':\n                    keyboardListTrigger(editor, rawEvent, autoBullet, autoNumbering);\n                    if (autoLink) {\n                        createLinkAfterSpace(editor);\n                    }\n                    break;\n                case 'Backspace':\n                    if (autoUnlink) {\n                        unlink(editor, rawEvent);\n                    }\n                    break;\n            }\n        }\n    }\n\n    private handleContentChangedEvent(editor: IEditor, event: ContentChangedEvent) {\n        const { autoLink } = this.options;\n        if (event.source == 'Paste' && autoLink) {\n            createLink(editor);\n        }\n    }\n}\n"]}

package/lib-amd/autoFormat/link/createLink.d.ts

@@ -0,0 +1,5 @@
+import type { IEditor } from 'roosterjs-content-model-types';
+/**
+ * @internal
+ */
+export declare function createLink(editor: IEditor): void;

package/lib-amd/autoFormat/link/createLink.js

@@ -0,0 +1,26 @@
+define(["require", "exports", "roosterjs-content-model-dom", "./getLinkSegment"], function (require, exports, roosterjs_content_model_dom_1, getLinkSegment_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.createLink = void 0;
+    /**
+     * @internal
+     */
+    function createLink(editor) {
+        editor.formatContentModel(function (model) {
+            var link = (0, getLinkSegment_1.getLinkSegment)(model);
+            if (link && !link.link) {
+                (0, roosterjs_content_model_dom_1.addLink)(link, {
+                    format: {
+                        href: link.text,
+                        underline: true,
+                    },
+                    dataset: {},
+                });
+                return true;
+            }
+            return false;
+        });
+    }
+    exports.createLink = createLink;
+});
+//# sourceMappingURL=createLink.js.map

package/lib-amd/autoFormat/link/createLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createLink.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-plugins/lib/autoFormat/link/createLink.ts"],"names":[],"mappings":";;;;IAIA;;OAEG;IACH,SAAgB,UAAU,CAAC,MAAe;QACtC,MAAM,CAAC,kBAAkB,CAAC,UAAA,KAAK;YAC3B,IAAM,IAAI,GAAG,IAAA,+BAAc,EAAC,KAAK,CAAC,CAAC;YACnC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;gBACpB,IAAA,qCAAO,EAAC,IAAI,EAAE;oBACV,MAAM,EAAE;wBACJ,IAAI,EAAE,IAAI,CAAC,IAAI;wBACf,SAAS,EAAE,IAAI;qBAClB;oBACD,OAAO,EAAE,EAAE;iBACd,CAAC,CAAC;gBACH,OAAO,IAAI,CAAC;aACf;YACD,OAAO,KAAK,CAAC;QACjB,CAAC,CAAC,CAAC;IACP,CAAC;IAfD,gCAeC","sourcesContent":["import { addLink } from 'roosterjs-content-model-dom';\nimport { getLinkSegment } from './getLinkSegment';\nimport type { IEditor } from 'roosterjs-content-model-types';\n\n/**\n * @internal\n */\nexport function createLink(editor: IEditor) {\n    editor.formatContentModel(model => {\n        const link = getLinkSegment(model);\n        if (link && !link.link) {\n            addLink(link, {\n                format: {\n                    href: link.text,\n                    underline: true,\n                },\n                dataset: {},\n            });\n            return true;\n        }\n        return false;\n    });\n}\n"]}

package/lib-amd/autoFormat/link/createLinkAfterSpace.d.ts

@@ -0,0 +1,5 @@
+import type { IEditor } from 'roosterjs-content-model-types';
+/**
+ * @internal
+ */
+export declare function createLinkAfterSpace(editor: IEditor): void;