roosterjs-content-model-plugins 9.44.0 → 9.45.1

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

@@ -1 +1 @@
-{"version":3,"file":"TableMover.js","sourceRoot":"","sources":["../../../../../../packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/TableMover.ts"],"names":[],"mappings":";;;;IA4BA,IAAM,kBAAkB,GAAG,EAAE,CAAC;IAC9B;;OAEG;IACU,QAAA,cAAc,GAAG,cAAc,CAAC;IAC7C,IAAM,qBAAqB,GAAG,wBAAwB,CAAC;IAEvD;;;;OAIG;IACH,SAAgB,gBAAgB,CAC5B,KAAuB,EACvB,MAAe,EACf,KAAc,EACd,gBAAmD,EACnD,OAAmB,EACnB,KAAwC,EACxC,UAA+B,EAC/B,eAA6B,EAC7B,oBAAmD,EACnD,eAAyB;QAEzB,IAAM,IAAI,GAAG,IAAA,2CAAa,EAAC,KAAK,CAAC,qBAAqB,EAAE,CAAC,CAAC;QAE1D,IAAI,CAAC,iBAAiB,CAAC,MAAM,EAAE,IAAI,EAAE,UAAkB,CAAC,EAAE;YACtD,OAAO,IAAI,CAAC;SACf;QAED,IAAM,SAAS,GAAG,MAAM,CAAC,YAAY,EAAE,CAAC,kBAAkB,EAAE,CAAC;QAC7D,IAAM,QAAQ,GAAG,KAAK,CAAC,aAAa,CAAC;QACrC,IAAM,iBAAiB,GAAG;YACtB,GAAG,EAAE,KAAK;YACV,KAAK,EAAE,6EAA6E;SACvF,CAAC;QAEF,IAAM,GAAG,GAAG,IAAA,6BAAa,EAAC,iBAAiB,EAAE,QAAQ,CAAmB,CAAC;QAEzE,GAAG,CAAC,EAAE,GAAG,sBAAc,CAAC;QACxB,GAAG,CAAC,KAAK,CAAC,KAAK,GAAM,kBAAkB,OAAI,CAAC;QAC5C,GAAG,CAAC,KAAK,CAAC,MAAM,GAAM,kBAAkB,OAAI,CAAC;QAE7C,CAAC,eAAe,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;QAEpD,IAAM,OAAO,GAAsB;YAC/B,KAAK,OAAA;YACL,SAAS,WAAA;YACT,IAAI,MAAA;YACJ,KAAK,OAAA;YACL,MAAM,QAAA;YACN,GAAG,KAAA;YACH,gBAAgB,kBAAA;YAChB,OAAO,SAAA;YACP,KAAK,OAAA;YACL,eAAe,iBAAA;SAClB,CAAC;QAEF,cAAc,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;QAE7B,IAAM,cAAc,GAAG,IAAI,iBAAiB,CACxC,GAAG,EACH,OAAO,EACP,cAAO,CAAC,EACR,eAAe;YACX,CAAC,CAAC,EAAE,SAAS,WAAA,EAAE;YACf,CAAC,CAAC;gBACI,WAAW,aAAA;gBACX,UAAU,YAAA;gBACV,SAAS,WAAA;aACZ,EACP,OAAO,CAAC,SAAS,EACjB,oBAAoB,EACpB,MAAM,CAAC,cAAc,EAAE,CAAC,gBAAgB,CAC3C,CAAC;QAEF,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,KAAA,EAAE,cAAc,gBAAA,EAAE,CAAC;IAChD,CAAC;IAjED,4CAiEC;IA6BD;QAAgC,kDAAyD;QAGrF,2BACI,GAAgB,EAChB,OAA0B,EAC1B,QAIS,EACT,OAAmE,EACnE,SAAiB,EACjB,oBAAmD,EACnD,WAAiC;YAXrC,YAaI,kBAAM,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,CAAC,SAEjE;YADG,KAAI,CAAC,QAAQ,GAAG,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAG,YAAY,EAAE,GAAG,CAAC,CAAC;;QAC9D,CAAC;QAED,mCAAO,GAAP;;YACI,MAAA,IAAI,CAAC,QAAQ,+CAAb,IAAI,CAAa,CAAC;YAClB,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC;YAC1B,iBAAM,OAAO,WAAE,CAAC;QACpB,CAAC;QACL,wBAAC;IAAD,CAAC,AAzBD,CAAgC,qCAAiB,GAyBhD;IAED,SAAS,cAAc,CAAC,OAA0B,EAAE,OAAoB;QAC5D,IAAA,IAAI,GAAK,OAAO,KAAZ,CAAa;QACzB,IAAI,IAAI,EAAE;YACN,OAAO,CAAC,KAAK,CAAC,GAAG,GAAM,IAAI,CAAC,GAAG,GAAG,kBAAkB,OAAI,CAAC;YACzD,OAAO,CAAC,KAAK,CAAC,IAAI,GAAM,IAAI,CAAC,IAAI,GAAG,kBAAkB,GAAG,CAAC,OAAI,CAAC;SAClE;IACL,CAAC;IAED,SAAS,iBAAiB,CAAC,MAAe,EAAE,IAAiB,EAAE,UAAwB;QACnF,IAAM,eAAe,GAAG,MAAM,CAAC,kBAAkB,EAAE,CAAC;QACpD,IAAI,IAAA,0CAAY,EAAC,UAAU,EAAE,cAAc,CAAC,IAAI,eAAe,IAAI,IAAI,EAAE;YACrE,IAAM,aAAa,GAAG,IAAA,2CAAa,EAAC,UAAU,CAAC,qBAAqB,EAAE,CAAC,CAAC;YAExE,OAAO,CAAC,CAAC,aAAa,IAAI,aAAa,CAAC,GAAG,IAAI,IAAI,CAAC,GAAG,IAAI,eAAe,CAAC,GAAG,IAAI,IAAI,CAAC,GAAG,CAAC;SAC9F;QAED,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,SAAS,mBAAmB,CAAC,MAAe,EAAE,KAAc,EAAE,IAAsB;;QAChF,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,cAAc,CAAC,qBAAqB,EAAE,KAAK,CAAC,CAAC,CAAC,MAAA,UAAU,GAAG,IAAI,mCAAI,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAC9F,CAAC;IAED;;;OAGG;IACH,SAAgB,WAAW,CAAC,OAA0B;;QAClD,OAAO,CAAC,OAAO,EAAE,CAAC;QAEV,IAAA,MAAM,GAAiB,OAAO,OAAxB,EAAE,KAAK,GAAU,OAAO,MAAjB,EAAE,GAAG,GAAK,OAAO,IAAZ,CAAa;QAEvC,mBAAmB,CAAC,MAAM,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC;QAE1C,iCAAiC;QACjC,IAAM,KAAK,GAAG,KAAK,CAAC,qBAAqB,EAAE,CAAC;QAC5C,IAAM,iBAAiB,GAAG;YACtB,GAAG,EAAE,KAAK;YACV,KAAK,EAAE,+DAA+D;SACzE,CAAC;QACF,IAAM,SAAS,GAAG,IAAA,6BAAa,EAAC,iBAAiB,EAAE,QAAQ,CAAmB,CAAC;QAC/E,SAAS,CAAC,KAAK,CAAC,KAAK,GAAM,KAAK,CAAC,KAAK,OAAI,CAAC;QAC3C,SAAS,CAAC,KAAK,CAAC,MAAM,GAAM,KAAK,CAAC,MAAM,OAAI,CAAC;QAC7C,SAAS,CAAC,KAAK,CAAC,GAAG,GAAM,KAAK,CAAC,GAAG,OAAI,CAAC;QACvC,SAAS,CAAC,KAAK,CAAC,IAAI,GAAM,KAAK,CAAC,IAAI,OAAI,CAAC;QACzC,MAAA,GAAG,CAAC,UAAU,0CAAE,WAAW,CAAC,SAAS,CAAC,CAAC;QAEvC,2BAA2B;QAC3B,IAAM,gBAAgB,GAAG,MAAM,CAAC,eAAe,EAAE,CAAC;QAElD,mCAAmC;QACnC,IAAM,OAAO,GAAG,IAAA,8CAAmB,EAAC,MAAM,EAAE,KAAK,CAAC,CAAC;QAEnD,OAAO;YACH,OAAO,SAAA;YACP,gBAAgB,kBAAA;YAChB,SAAS,WAAA;SACZ,CAAC;IACN,CAAC;IA/BD,kCA+BC;IAED;;;OAGG;IACH,SAAgB,UAAU,CACtB,OAA0B,EAC1B,KAAiB,EACjB,SAA8B;QAEtB,IAAA,SAAS,GAAK,SAAS,UAAd,CAAe;QACxB,IAAA,MAAM,GAAK,OAAO,OAAZ,CAAa;QAE3B,+BAA+B;QAC/B,SAAS,CAAC,KAAK,CAAC,GAAG,GAAM,KAAK,CAAC,OAAO,GAAG,kBAAkB,OAAI,CAAC;QAChE,SAAS,CAAC,KAAK,CAAC,IAAI,GAAM,KAAK,CAAC,OAAO,GAAG,kBAAkB,OAAI,CAAC;QAEjE,IAAM,GAAG,GAAG,IAAA,mDAAwB,EAAC,MAAM,EAAE,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;QAC3E,IAAI,GAAG,EAAE;YACL,IAAM,KAAK,GAAG,MAAM,CAAC,WAAW,EAAE,CAAC,WAAW,EAAE,CAAC;YACjD,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;YACrC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;YAErB,MAAM,CAAC,eAAe,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,OAAA,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,CAAC;YACpE,OAAO,IAAI,CAAC;SACf;QACD,OAAO,KAAK,CAAC;IACjB,CAAC;IAtBD,gCAsBC;IAED;;;OAGG;IACH,SAAgB,SAAS,CACrB,OAA0B,EAC1B,KAAiB,EACjB,SAA0C;;QAElC,IAAA,MAAM,GAAiE,OAAO,OAAxE,EAAE,KAAK,GAA0D,OAAO,MAAjE,EAAoB,gBAAgB,GAAsB,OAAO,iBAA7B,EAAE,eAAe,GAAK,OAAO,gBAAZ,CAAa;QACvF,IAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC;QAE7B,iCAAiC;QACjC,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,SAAS,CAAC,MAAM,EAAE,CAAC;QAE9B,eAAe;QACf,mBAAmB,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;QAEnC,IAAI,OAAO,IAAI,OAAO,CAAC,GAAG,EAAE;YACxB,2FAA2F;YAC3F,gBAAgB,CAAC,KAAK,CAAC,CAAC;YACxB,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,oBAAoB,CAAC,CAAC;YAC1C,OAAO,IAAI,CAAC;SACf;aAAM;YACH,0FAA0F;YAC1F,IACI,KAAK,CAAC,QAAQ,CAAC,OAAe,CAAC;gBAC/B,CAAC,MAAM,CAAC,YAAY,EAAE,CAAC,cAAc,CAAC,OAAe,CAAC;gBACtD,eAAe,EACjB;gBACE,MAAM,CAAC,eAAe,CAAC,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,gBAAgB,mCAAI,IAAI,CAAC,CAAC;gBAC5D,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;gBACzC,OAAO,KAAK,CAAC;aAChB;YAED,IAAI,kBAAgB,GAAY,KAAK,CAAC;YAEtC,+BAA+B;YAC/B,IAAM,cAAc,GAAG,IAAA,mDAAwB,EAAC,MAAM,EAAE,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;YACtF,IAAI,cAAc,EAAE;gBAChB,6BAA6B;gBAC7B,IAAA,+DAAiC,EAC7B,MAAM,EACN,cAAc,EACd,UAAC,KAAK,EAAE,OAAO,EAAE,EAAE;;oBACf,mBAAmB;oBACb,IAAA,KAAA,oBAAmB,IAAA,mDAAqB,EAAC,KAAK,CAAC,IAAA,EAA9C,QAAQ,QAAA,EAAE,IAAI,QAAgC,CAAC;oBACtD,IAAI,QAAQ,EAAE;wBACV,IAAM,KAAK,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;wBAC/C,IAAA,yCAAW,EAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;qBAChD;oBAED,IAAI,EAAE,KAAI,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,CAAA,EAAE;wBAC1B,mBAAmB;wBACnB,IAAM,GAAG,GAAuC,IAAA,wDAA0B,GAAE,CAAC;wBAC7E,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,IAAA,yCAAW,EAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;wBAC5D,kBAAgB,GAAG,CAAC,CAAC,IAAA,wCAAU,EAAC,KAAK,EAAE,IAAA,wCAAU,EAAC,GAAG,CAAC,EAAE,OAAO,EAAE;4BAC7D,WAAW,EAAE,MAAM;4BACnB,cAAc,EAAE,EAAE;yBACrB,CAAC,CAAC;wBAEH,IAAI,kBAAgB,EAAE;4BAClB,qDAAqD;4BACrD,IAAM,UAAU,GAAG,MAAA,IAAA,mDAAqB,EAAC,KAAK,CAAC,CAAC,CAAC,CAAC,mCAAI,SAAS,CAAC,OAAO,CAAC;4BACxE,IAAI,UAAU,EAAE;gCACZ,sDAAsD;gCACtD,IAAM,SAAS,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;gCAC9C,IAAM,eAAe,GAAG,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,MAAM,CAAC,CAAC,CAAC,CAAC;gCAE7C,IAAI,CAAA,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,SAAS,KAAI,WAAW,EAAE;oCAC3C,IAAM,MAAM,GAAG,IAAA,mDAAqB,EAAC,KAAK,CAAC,MAAM,CAAC,CAAC;oCAEnD,IAAA,yCAAW,EAAC,eAAe,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;oCACtD,IAAA,qDAAuB,EAAC,eAAe,CAAC,CAAC;oCACzC,IAAA,0CAAY,EAAC,KAAK,EAAE,MAAM,CAAC,CAAC;iCAC/B;6BACJ;yBACJ;wBACD,OAAO,kBAAgB,CAAC;qBAC3B;gBACL,CAAC,EACD;oBACI,qCAAqC;oBACrC,iBAAiB,EAAE;wBACf,IAAI,EAAE,OAAO;wBACb,WAAW,EAAE,CAAC;wBACd,QAAQ,EAAE,CAAC;wBACX,UAAU,EAAE,CAAC;wBACb,OAAO,EAAE,CAAC;wBACV,KAAK,EAAE,KAAK;qBACf;oBACD,OAAO,EAAE,YAAY;iBACxB,CACJ,CAAC;aACL;iBAAM;gBACH,yCAAyC;gBACzC,MAAM,CAAC,eAAe,CAAC,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,gBAAgB,mCAAI,IAAI,CAAC,CAAC;aAC/D;YACD,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;YACzC,OAAO,kBAAgB,CAAC;SAC3B;IACL,CAAC;IAjGD,8BAiGC","sourcesContent":["import { createElement } from '../../../pluginUtils/CreateElement/createElement';\nimport { DragAndDropHelper } from '../../../pluginUtils/DragAndDrop/DragAndDropHelper';\nimport { formatInsertPointWithContentModel } from 'roosterjs-content-model-api';\nimport { getCMTableFromTable } from '../utils/getTableFromContentModel';\nimport type { TableEditFeature } from './TableEditFeature';\nimport type { OnTableEditorCreatedCallback } from '../../OnTableEditorCreatedCallback';\nimport type { DragAndDropHandler } from '../../../pluginUtils/DragAndDrop/DragAndDropHandler';\nimport {\n    cloneModel,\n    createContentModelDocument,\n    createSelectionMarker,\n    getFirstSelectedTable,\n    isNodeOfType,\n    mergeModel,\n    mutateBlock,\n    normalizeRect,\n    setParagraphNotImplicit,\n    setSelection,\n} from 'roosterjs-content-model-dom';\nimport type {\n    DOMSelection,\n    IEditor,\n    ReadonlyContentModelTable,\n    Rect,\n    ShallowMutableContentModelDocument,\n} from 'roosterjs-content-model-types';\nimport { getNodePositionFromEvent } from '../../../utils/getNodePositionFromEvent';\n\nconst TABLE_MOVER_LENGTH = 12;\n/**\n * @internal\n */\nexport const TABLE_MOVER_ID = '_Table_Mover';\nconst TABLE_MOVER_STYLE_KEY = '_TableMoverCursorStyle';\n\n/**\n * @internal\n * Allows user to move table to another position\n * Contains the function to select whole table\n */\nexport function createTableMover(\n    table: HTMLTableElement,\n    editor: IEditor,\n    isRTL: boolean,\n    onFinishDragging: (table: HTMLTableElement) => void,\n    onStart: () => void,\n    onEnd: (disposeHandler: boolean) => void,\n    contentDiv?: EventTarget | null,\n    anchorContainer?: HTMLElement,\n    onTableEditorCreated?: OnTableEditorCreatedCallback,\n    disableMovement?: boolean\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: move; 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        editor,\n        div,\n        onFinishDragging,\n        onStart,\n        onEnd,\n        disableMovement,\n    };\n\n    setDivPosition(context, div);\n\n    const featureHandler = new TableMoverFeature(\n        div,\n        context,\n        () => {},\n        disableMovement\n            ? { onDragEnd }\n            : {\n                  onDragStart,\n                  onDragging,\n                  onDragEnd,\n              },\n        context.zoomScale,\n        onTableEditorCreated,\n        editor.getEnvironment().isMobileOrTablet\n    );\n\n    return { node: table, div, featureHandler };\n}\n\n/**\n * @internal\n * Exported for testing\n */\nexport interface TableMoverContext {\n    table: HTMLTableElement;\n    zoomScale: number;\n    rect: Rect | null;\n    isRTL: boolean;\n    editor: IEditor;\n    div: HTMLElement;\n    onFinishDragging: (table: HTMLTableElement) => void;\n    onStart: () => void;\n    onEnd: (disposeHandler: boolean) => void;\n    disableMovement?: boolean;\n}\n\n/**\n * @internal\n * Exported for testing\n */\nexport interface TableMoverInitValue {\n    cmTable: ReadonlyContentModelTable | undefined;\n    initialSelection: DOMSelection | null;\n    tableRect: HTMLDivElement;\n}\n\nclass TableMoverFeature extends DragAndDropHelper<TableMoverContext, TableMoverInitValue> {\n    private disposer: undefined | (() => void);\n\n    constructor(\n        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        onTableEditorCreated?: OnTableEditorCreatedCallback,\n        forceMobile?: boolean | undefined\n    ) {\n        super(div, context, onSubmit, handler, zoomScale, forceMobile);\n        this.disposer = onTableEditorCreated?.('TableMover', div);\n    }\n\n    dispose(): void {\n        this.disposer?.();\n        this.disposer = undefined;\n        super.dispose();\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\nfunction setTableMoverCursor(editor: IEditor, state: boolean, type?: 'move' | 'copy') {\n    editor?.setEditorStyle(TABLE_MOVER_STYLE_KEY, state ? 'cursor: ' + type ?? 'move' : null);\n}\n\n/**\n * @internal\n * Exported for testing\n */\nexport function onDragStart(context: TableMoverContext): TableMoverInitValue {\n    context.onStart();\n\n    const { editor, table, div } = context;\n\n    setTableMoverCursor(editor, true, 'move');\n\n    // Create table outline rectangle\n    const trect = table.getBoundingClientRect();\n    const createElementData = {\n        tag: 'div',\n        style: 'position: fixed; user-select: none; border: 1px solid #808080',\n    };\n    const tableRect = createElement(createElementData, document) as HTMLDivElement;\n    tableRect.style.width = `${trect.width}px`;\n    tableRect.style.height = `${trect.height}px`;\n    tableRect.style.top = `${trect.top}px`;\n    tableRect.style.left = `${trect.left}px`;\n    div.parentNode?.appendChild(tableRect);\n\n    // Get drag start selection\n    const initialSelection = editor.getDOMSelection();\n\n    // Get Table block in content model\n    const cmTable = getCMTableFromTable(editor, table);\n\n    return {\n        cmTable,\n        initialSelection,\n        tableRect,\n    };\n}\n\n/**\n * @internal\n * Exported for testing\n */\nexport function onDragging(\n    context: TableMoverContext,\n    event: MouseEvent,\n    initValue: TableMoverInitValue\n) {\n    const { tableRect } = initValue;\n    const { editor } = context;\n\n    // Move table outline rectangle\n    tableRect.style.top = `${event.clientY + TABLE_MOVER_LENGTH}px`;\n    tableRect.style.left = `${event.clientX + TABLE_MOVER_LENGTH}px`;\n\n    const pos = getNodePositionFromEvent(editor, event.clientX, event.clientY);\n    if (pos) {\n        const range = editor.getDocument().createRange();\n        range.setStart(pos.node, pos.offset);\n        range.collapse(true);\n\n        editor.setDOMSelection({ type: 'range', range, isReverted: false });\n        return true;\n    }\n    return false;\n}\n\n/**\n * @internal\n * Exported for testing\n */\nexport function onDragEnd(\n    context: TableMoverContext,\n    event: MouseEvent,\n    initValue: TableMoverInitValue | undefined\n) {\n    const { editor, table, onFinishDragging: selectWholeTable, disableMovement } = context;\n    const element = event.target;\n\n    // Remove table outline rectangle\n    initValue?.tableRect.remove();\n\n    // Reset cursor\n    setTableMoverCursor(editor, false);\n\n    if (element == context.div) {\n        // Table mover was only clicked, select whole table and do not dismiss the handler element.\n        selectWholeTable(table);\n        context.onEnd(false /* disposeHandler */);\n        return true;\n    } else {\n        // Check if table was dragged on itself, element is not in editor, or movement is disabled\n        if (\n            table.contains(element as Node) ||\n            !editor.getDOMHelper().isNodeInEditor(element as Node) ||\n            disableMovement\n        ) {\n            editor.setDOMSelection(initValue?.initialSelection ?? null);\n            context.onEnd(true /* disposeHandler */);\n            return false;\n        }\n\n        let insertionSuccess: boolean = false;\n\n        // Get position to insert table\n        const insertPosition = getNodePositionFromEvent(editor, event.clientX, event.clientY);\n        if (insertPosition) {\n            // Move table to new position\n            formatInsertPointWithContentModel(\n                editor,\n                insertPosition,\n                (model, context, ip) => {\n                    // Remove old table\n                    const [oldTable, path] = getFirstSelectedTable(model);\n                    if (oldTable) {\n                        const index = path[0].blocks.indexOf(oldTable);\n                        mutateBlock(path[0]).blocks.splice(index, 1);\n                    }\n\n                    if (ip && initValue?.cmTable) {\n                        // Insert new table\n                        const doc: ShallowMutableContentModelDocument = createContentModelDocument();\n                        doc.blocks.push(oldTable ?? mutateBlock(initValue.cmTable));\n                        insertionSuccess = !!mergeModel(model, cloneModel(doc), context, {\n                            mergeFormat: 'none',\n                            insertPosition: ip,\n                        });\n\n                        if (insertionSuccess) {\n                            // After mergeModel, the new table should be selected\n                            const finalTable = getFirstSelectedTable(model)[0] ?? initValue.cmTable;\n                            if (finalTable) {\n                                // Add selection marker to the first cell of the table\n                                const firstCell = finalTable.rows[0].cells[0];\n                                const markerParagraph = firstCell?.blocks[0];\n\n                                if (markerParagraph?.blockType == 'Paragraph') {\n                                    const marker = createSelectionMarker(model.format);\n\n                                    mutateBlock(markerParagraph).segments.unshift(marker);\n                                    setParagraphNotImplicit(markerParagraph);\n                                    setSelection(model, marker);\n                                }\n                            }\n                        }\n                        return insertionSuccess;\n                    }\n                },\n                {\n                    // Select first cell of the old table\n                    selectionOverride: {\n                        type: 'table',\n                        firstColumn: 0,\n                        firstRow: 0,\n                        lastColumn: 0,\n                        lastRow: 0,\n                        table: table,\n                    },\n                    apiName: 'TableMover',\n                }\n            );\n        } else {\n            // No movement, restore initial selection\n            editor.setDOMSelection(initValue?.initialSelection ?? null);\n        }\n        context.onEnd(true /* disposeHandler */);\n        return insertionSuccess;\n    }\n}\n"]}
+{"version":3,"file":"TableMover.js","sourceRoot":"","sources":["../../../../../../packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/TableMover.ts"],"names":[],"mappings":";;;;IA4BA,IAAM,kBAAkB,GAAG,EAAE,CAAC;IAC9B;;OAEG;IACU,QAAA,cAAc,GAAG,cAAc,CAAC;IAC7C,IAAM,qBAAqB,GAAG,wBAAwB,CAAC;IAEvD;;;;OAIG;IACH,SAAgB,gBAAgB,CAC5B,KAAuB,EACvB,MAAe,EACf,KAAc,EACd,gBAAmD,EACnD,OAAmB,EACnB,KAAwC,EACxC,UAA+B,EAC/B,eAA6B,EAC7B,oBAAmD,EACnD,eAAyB;QAEzB,IAAM,IAAI,GAAG,IAAA,2CAAa,EAAC,KAAK,CAAC,qBAAqB,EAAE,CAAC,CAAC;QAE1D,IAAI,CAAC,iBAAiB,CAAC,MAAM,EAAE,IAAI,EAAE,UAAkB,CAAC,EAAE;YACtD,OAAO,IAAI,CAAC;SACf;QAED,IAAM,SAAS,GAAG,MAAM,CAAC,YAAY,EAAE,CAAC,kBAAkB,EAAE,CAAC;QAC7D,IAAM,QAAQ,GAAG,KAAK,CAAC,aAAa,CAAC;QACrC,IAAM,iBAAiB,GAAG;YACtB,GAAG,EAAE,KAAK;YACV,KAAK,EAAE,6EAA6E;SACvF,CAAC;QAEF,IAAM,GAAG,GAAG,IAAA,6BAAa,EAAC,iBAAiB,EAAE,QAAQ,CAAmB,CAAC;QAEzE,GAAG,CAAC,EAAE,GAAG,sBAAc,CAAC;QACxB,GAAG,CAAC,KAAK,CAAC,KAAK,GAAM,kBAAkB,OAAI,CAAC;QAC5C,GAAG,CAAC,KAAK,CAAC,MAAM,GAAM,kBAAkB,OAAI,CAAC;QAE7C,CAAC,eAAe,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;QAEpD,IAAM,OAAO,GAAsB;YAC/B,KAAK,OAAA;YACL,SAAS,WAAA;YACT,IAAI,MAAA;YACJ,KAAK,OAAA;YACL,MAAM,QAAA;YACN,GAAG,KAAA;YACH,gBAAgB,kBAAA;YAChB,OAAO,SAAA;YACP,KAAK,OAAA;YACL,eAAe,iBAAA;SAClB,CAAC;QAEF,cAAc,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;QAE7B,IAAM,cAAc,GAAG,IAAI,iBAAiB,CACxC,GAAG,EACH,OAAO,EACP,cAAO,CAAC,EACR,eAAe;YACX,CAAC,CAAC,EAAE,SAAS,WAAA,EAAE;YACf,CAAC,CAAC;gBACI,WAAW,aAAA;gBACX,UAAU,YAAA;gBACV,SAAS,WAAA;aACZ,EACP,OAAO,CAAC,SAAS,EACjB,oBAAoB,EACpB,MAAM,CAAC,cAAc,EAAE,CAAC,gBAAgB,CAC3C,CAAC;QAEF,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,KAAA,EAAE,cAAc,gBAAA,EAAE,CAAC;IAChD,CAAC;IAjED,4CAiEC;IA6BD;QAAgC,kDAAyD;QAGrF,2BACI,GAAgB,EAChB,OAA0B,EAC1B,QAIS,EACT,OAAmE,EACnE,SAAiB,EACjB,oBAAmD,EACnD,WAAiC;YAXrC,YAaI,kBAAM,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,CAAC,SAEjE;YADG,KAAI,CAAC,QAAQ,GAAG,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAG,YAAY,EAAE,GAAG,CAAC,CAAC;;QAC9D,CAAC;QAED,mCAAO,GAAP;;YACI,MAAA,IAAI,CAAC,QAAQ,+CAAb,IAAI,CAAa,CAAC;YAClB,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC;YAC1B,iBAAM,OAAO,WAAE,CAAC;QACpB,CAAC;QACL,wBAAC;IAAD,CAAC,AAzBD,CAAgC,qCAAiB,GAyBhD;IAED,SAAS,cAAc,CAAC,OAA0B,EAAE,OAAoB;QAC5D,IAAA,IAAI,GAAK,OAAO,KAAZ,CAAa;QACzB,IAAI,IAAI,EAAE;YACN,OAAO,CAAC,KAAK,CAAC,GAAG,GAAM,IAAI,CAAC,GAAG,GAAG,kBAAkB,OAAI,CAAC;YACzD,OAAO,CAAC,KAAK,CAAC,IAAI,GAAM,IAAI,CAAC,IAAI,GAAG,kBAAkB,GAAG,CAAC,OAAI,CAAC;SAClE;IACL,CAAC;IAED,SAAS,iBAAiB,CAAC,MAAe,EAAE,IAAiB,EAAE,UAAwB;QACnF,IAAM,eAAe,GAAG,MAAM,CAAC,kBAAkB,EAAE,CAAC;QACpD,IAAI,IAAA,0CAAY,EAAC,UAAU,EAAE,cAAc,CAAC,IAAI,eAAe,IAAI,IAAI,EAAE;YACrE,IAAM,aAAa,GAAG,IAAA,2CAAa,EAAC,UAAU,CAAC,qBAAqB,EAAE,CAAC,CAAC;YAExE,OAAO,CAAC,CAAC,aAAa,IAAI,aAAa,CAAC,GAAG,IAAI,IAAI,CAAC,GAAG,IAAI,eAAe,CAAC,GAAG,IAAI,IAAI,CAAC,GAAG,CAAC;SAC9F;QAED,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,SAAS,mBAAmB,CAAC,MAAe,EAAE,KAAc,EAAE,IAAsB;;QAChF,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,cAAc,CAAC,qBAAqB,EAAE,KAAK,CAAC,CAAC,CAAC,MAAA,UAAU,GAAG,IAAI,mCAAI,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAC9F,CAAC;IAED;;;OAGG;IACH,SAAgB,WAAW,CAAC,OAA0B;;QAClD,OAAO,CAAC,OAAO,EAAE,CAAC;QAEV,IAAA,MAAM,GAAiB,OAAO,OAAxB,EAAE,KAAK,GAAU,OAAO,MAAjB,EAAE,GAAG,GAAK,OAAO,IAAZ,CAAa;QAEvC,mBAAmB,CAAC,MAAM,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC;QAE1C,iCAAiC;QACjC,IAAM,KAAK,GAAG,KAAK,CAAC,qBAAqB,EAAE,CAAC;QAC5C,IAAM,iBAAiB,GAAG;YACtB,GAAG,EAAE,KAAK;YACV,KAAK,EAAE,+DAA+D;SACzE,CAAC;QACF,IAAM,SAAS,GAAG,IAAA,6BAAa,EAAC,iBAAiB,EAAE,MAAM,CAAC,WAAW,EAAE,CAAmB,CAAC;QAC3F,SAAS,CAAC,KAAK,CAAC,KAAK,GAAM,KAAK,CAAC,KAAK,OAAI,CAAC;QAC3C,SAAS,CAAC,KAAK,CAAC,MAAM,GAAM,KAAK,CAAC,MAAM,OAAI,CAAC;QAC7C,SAAS,CAAC,KAAK,CAAC,GAAG,GAAM,KAAK,CAAC,GAAG,OAAI,CAAC;QACvC,SAAS,CAAC,KAAK,CAAC,IAAI,GAAM,KAAK,CAAC,IAAI,OAAI,CAAC;QACzC,MAAA,GAAG,CAAC,UAAU,0CAAE,WAAW,CAAC,SAAS,CAAC,CAAC;QAEvC,2BAA2B;QAC3B,IAAM,gBAAgB,GAAG,MAAM,CAAC,eAAe,EAAE,CAAC;QAElD,mCAAmC;QACnC,IAAM,OAAO,GAAG,IAAA,8CAAmB,EAAC,MAAM,EAAE,KAAK,CAAC,CAAC;QAEnD,OAAO;YACH,OAAO,SAAA;YACP,gBAAgB,kBAAA;YAChB,SAAS,WAAA;SACZ,CAAC;IACN,CAAC;IA/BD,kCA+BC;IAED;;;OAGG;IACH,SAAgB,UAAU,CACtB,OAA0B,EAC1B,KAAiB,EACjB,SAA8B;QAEtB,IAAA,SAAS,GAAK,SAAS,UAAd,CAAe;QACxB,IAAA,MAAM,GAAK,OAAO,OAAZ,CAAa;QAE3B,+BAA+B;QAC/B,SAAS,CAAC,KAAK,CAAC,GAAG,GAAM,KAAK,CAAC,OAAO,GAAG,kBAAkB,OAAI,CAAC;QAChE,SAAS,CAAC,KAAK,CAAC,IAAI,GAAM,KAAK,CAAC,OAAO,GAAG,kBAAkB,OAAI,CAAC;QAEjE,IAAM,GAAG,GAAG,IAAA,mDAAwB,EAAC,MAAM,EAAE,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;QAC3E,IAAI,GAAG,EAAE;YACL,IAAM,KAAK,GAAG,MAAM,CAAC,WAAW,EAAE,CAAC,WAAW,EAAE,CAAC;YACjD,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;YACrC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;YAErB,MAAM,CAAC,eAAe,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,OAAA,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,CAAC;YACpE,OAAO,IAAI,CAAC;SACf;QACD,OAAO,KAAK,CAAC;IACjB,CAAC;IAtBD,gCAsBC;IAED;;;OAGG;IACH,SAAgB,SAAS,CACrB,OAA0B,EAC1B,KAAiB,EACjB,SAA0C;;QAElC,IAAA,MAAM,GAAiE,OAAO,OAAxE,EAAE,KAAK,GAA0D,OAAO,MAAjE,EAAoB,gBAAgB,GAAsB,OAAO,iBAA7B,EAAE,eAAe,GAAK,OAAO,gBAAZ,CAAa;QACvF,IAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC;QAE7B,iCAAiC;QACjC,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,SAAS,CAAC,MAAM,EAAE,CAAC;QAE9B,eAAe;QACf,mBAAmB,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;QAEnC,IAAI,OAAO,IAAI,OAAO,CAAC,GAAG,EAAE;YACxB,2FAA2F;YAC3F,gBAAgB,CAAC,KAAK,CAAC,CAAC;YACxB,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,oBAAoB,CAAC,CAAC;YAC1C,OAAO,IAAI,CAAC;SACf;aAAM;YACH,0FAA0F;YAC1F,IACI,KAAK,CAAC,QAAQ,CAAC,OAAe,CAAC;gBAC/B,CAAC,MAAM,CAAC,YAAY,EAAE,CAAC,cAAc,CAAC,OAAe,CAAC;gBACtD,eAAe,EACjB;gBACE,MAAM,CAAC,eAAe,CAAC,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,gBAAgB,mCAAI,IAAI,CAAC,CAAC;gBAC5D,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;gBACzC,OAAO,KAAK,CAAC;aAChB;YAED,IAAI,kBAAgB,GAAY,KAAK,CAAC;YAEtC,+BAA+B;YAC/B,IAAM,cAAc,GAAG,IAAA,mDAAwB,EAAC,MAAM,EAAE,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;YACtF,IAAI,cAAc,EAAE;gBAChB,6BAA6B;gBAC7B,IAAA,+DAAiC,EAC7B,MAAM,EACN,cAAc,EACd,UAAC,KAAK,EAAE,OAAO,EAAE,EAAE;;oBACf,mBAAmB;oBACb,IAAA,KAAA,oBAAmB,IAAA,mDAAqB,EAAC,KAAK,CAAC,IAAA,EAA9C,QAAQ,QAAA,EAAE,IAAI,QAAgC,CAAC;oBACtD,IAAI,QAAQ,EAAE;wBACV,IAAM,KAAK,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;wBAC/C,IAAA,yCAAW,EAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;qBAChD;oBAED,IAAI,EAAE,KAAI,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,CAAA,EAAE;wBAC1B,mBAAmB;wBACnB,IAAM,GAAG,GAAuC,IAAA,wDAA0B,GAAE,CAAC;wBAC7E,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,IAAA,yCAAW,EAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;wBAC5D,kBAAgB,GAAG,CAAC,CAAC,IAAA,wCAAU,EAAC,KAAK,EAAE,IAAA,wCAAU,EAAC,GAAG,CAAC,EAAE,OAAO,EAAE;4BAC7D,WAAW,EAAE,MAAM;4BACnB,cAAc,EAAE,EAAE;yBACrB,CAAC,CAAC;wBAEH,IAAI,kBAAgB,EAAE;4BAClB,qDAAqD;4BACrD,IAAM,UAAU,GAAG,MAAA,IAAA,mDAAqB,EAAC,KAAK,CAAC,CAAC,CAAC,CAAC,mCAAI,SAAS,CAAC,OAAO,CAAC;4BACxE,IAAI,UAAU,EAAE;gCACZ,sDAAsD;gCACtD,IAAM,SAAS,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;gCAC9C,IAAM,eAAe,GAAG,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,MAAM,CAAC,CAAC,CAAC,CAAC;gCAE7C,IAAI,CAAA,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,SAAS,KAAI,WAAW,EAAE;oCAC3C,IAAM,MAAM,GAAG,IAAA,mDAAqB,EAAC,KAAK,CAAC,MAAM,CAAC,CAAC;oCAEnD,IAAA,yCAAW,EAAC,eAAe,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;oCACtD,IAAA,qDAAuB,EAAC,eAAe,CAAC,CAAC;oCACzC,IAAA,0CAAY,EAAC,KAAK,EAAE,MAAM,CAAC,CAAC;iCAC/B;6BACJ;yBACJ;wBACD,OAAO,kBAAgB,CAAC;qBAC3B;gBACL,CAAC,EACD;oBACI,qCAAqC;oBACrC,iBAAiB,EAAE;wBACf,IAAI,EAAE,OAAO;wBACb,WAAW,EAAE,CAAC;wBACd,QAAQ,EAAE,CAAC;wBACX,UAAU,EAAE,CAAC;wBACb,OAAO,EAAE,CAAC;wBACV,KAAK,EAAE,KAAK;qBACf;oBACD,OAAO,EAAE,YAAY;iBACxB,CACJ,CAAC;aACL;iBAAM;gBACH,yCAAyC;gBACzC,MAAM,CAAC,eAAe,CAAC,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,gBAAgB,mCAAI,IAAI,CAAC,CAAC;aAC/D;YACD,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;YACzC,OAAO,kBAAgB,CAAC;SAC3B;IACL,CAAC;IAjGD,8BAiGC","sourcesContent":["import { createElement } from '../../../pluginUtils/CreateElement/createElement';\nimport { DragAndDropHelper } from '../../../pluginUtils/DragAndDrop/DragAndDropHelper';\nimport { formatInsertPointWithContentModel } from 'roosterjs-content-model-api';\nimport { getCMTableFromTable } from '../utils/getTableFromContentModel';\nimport { getNodePositionFromEvent } from '../../../utils/getNodePositionFromEvent';\nimport type { TableEditFeature } from './TableEditFeature';\nimport type { OnTableEditorCreatedCallback } from '../../OnTableEditorCreatedCallback';\nimport type { DragAndDropHandler } from '../../../pluginUtils/DragAndDrop/DragAndDropHandler';\nimport {\n    cloneModel,\n    createContentModelDocument,\n    createSelectionMarker,\n    getFirstSelectedTable,\n    isNodeOfType,\n    mergeModel,\n    mutateBlock,\n    normalizeRect,\n    setParagraphNotImplicit,\n    setSelection,\n} from 'roosterjs-content-model-dom';\nimport type {\n    DOMSelection,\n    IEditor,\n    ReadonlyContentModelTable,\n    Rect,\n    ShallowMutableContentModelDocument,\n} from 'roosterjs-content-model-types';\n\nconst TABLE_MOVER_LENGTH = 12;\n/**\n * @internal\n */\nexport const TABLE_MOVER_ID = '_Table_Mover';\nconst TABLE_MOVER_STYLE_KEY = '_TableMoverCursorStyle';\n\n/**\n * @internal\n * Allows user to move table to another position\n * Contains the function to select whole table\n */\nexport function createTableMover(\n    table: HTMLTableElement,\n    editor: IEditor,\n    isRTL: boolean,\n    onFinishDragging: (table: HTMLTableElement) => void,\n    onStart: () => void,\n    onEnd: (disposeHandler: boolean) => void,\n    contentDiv?: EventTarget | null,\n    anchorContainer?: HTMLElement,\n    onTableEditorCreated?: OnTableEditorCreatedCallback,\n    disableMovement?: boolean\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: move; 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        editor,\n        div,\n        onFinishDragging,\n        onStart,\n        onEnd,\n        disableMovement,\n    };\n\n    setDivPosition(context, div);\n\n    const featureHandler = new TableMoverFeature(\n        div,\n        context,\n        () => {},\n        disableMovement\n            ? { onDragEnd }\n            : {\n                  onDragStart,\n                  onDragging,\n                  onDragEnd,\n              },\n        context.zoomScale,\n        onTableEditorCreated,\n        editor.getEnvironment().isMobileOrTablet\n    );\n\n    return { node: table, div, featureHandler };\n}\n\n/**\n * @internal\n * Exported for testing\n */\nexport interface TableMoverContext {\n    table: HTMLTableElement;\n    zoomScale: number;\n    rect: Rect | null;\n    isRTL: boolean;\n    editor: IEditor;\n    div: HTMLElement;\n    onFinishDragging: (table: HTMLTableElement) => void;\n    onStart: () => void;\n    onEnd: (disposeHandler: boolean) => void;\n    disableMovement?: boolean;\n}\n\n/**\n * @internal\n * Exported for testing\n */\nexport interface TableMoverInitValue {\n    cmTable: ReadonlyContentModelTable | undefined;\n    initialSelection: DOMSelection | null;\n    tableRect: HTMLDivElement;\n}\n\nclass TableMoverFeature extends DragAndDropHelper<TableMoverContext, TableMoverInitValue> {\n    private disposer: undefined | (() => void);\n\n    constructor(\n        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        onTableEditorCreated?: OnTableEditorCreatedCallback,\n        forceMobile?: boolean | undefined\n    ) {\n        super(div, context, onSubmit, handler, zoomScale, forceMobile);\n        this.disposer = onTableEditorCreated?.('TableMover', div);\n    }\n\n    dispose(): void {\n        this.disposer?.();\n        this.disposer = undefined;\n        super.dispose();\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\nfunction setTableMoverCursor(editor: IEditor, state: boolean, type?: 'move' | 'copy') {\n    editor?.setEditorStyle(TABLE_MOVER_STYLE_KEY, state ? 'cursor: ' + type ?? 'move' : null);\n}\n\n/**\n * @internal\n * Exported for testing\n */\nexport function onDragStart(context: TableMoverContext): TableMoverInitValue {\n    context.onStart();\n\n    const { editor, table, div } = context;\n\n    setTableMoverCursor(editor, true, 'move');\n\n    // Create table outline rectangle\n    const trect = table.getBoundingClientRect();\n    const createElementData = {\n        tag: 'div',\n        style: 'position: fixed; user-select: none; border: 1px solid #808080',\n    };\n    const tableRect = createElement(createElementData, editor.getDocument()) as HTMLDivElement;\n    tableRect.style.width = `${trect.width}px`;\n    tableRect.style.height = `${trect.height}px`;\n    tableRect.style.top = `${trect.top}px`;\n    tableRect.style.left = `${trect.left}px`;\n    div.parentNode?.appendChild(tableRect);\n\n    // Get drag start selection\n    const initialSelection = editor.getDOMSelection();\n\n    // Get Table block in content model\n    const cmTable = getCMTableFromTable(editor, table);\n\n    return {\n        cmTable,\n        initialSelection,\n        tableRect,\n    };\n}\n\n/**\n * @internal\n * Exported for testing\n */\nexport function onDragging(\n    context: TableMoverContext,\n    event: MouseEvent,\n    initValue: TableMoverInitValue\n) {\n    const { tableRect } = initValue;\n    const { editor } = context;\n\n    // Move table outline rectangle\n    tableRect.style.top = `${event.clientY + TABLE_MOVER_LENGTH}px`;\n    tableRect.style.left = `${event.clientX + TABLE_MOVER_LENGTH}px`;\n\n    const pos = getNodePositionFromEvent(editor, event.clientX, event.clientY);\n    if (pos) {\n        const range = editor.getDocument().createRange();\n        range.setStart(pos.node, pos.offset);\n        range.collapse(true);\n\n        editor.setDOMSelection({ type: 'range', range, isReverted: false });\n        return true;\n    }\n    return false;\n}\n\n/**\n * @internal\n * Exported for testing\n */\nexport function onDragEnd(\n    context: TableMoverContext,\n    event: MouseEvent,\n    initValue: TableMoverInitValue | undefined\n) {\n    const { editor, table, onFinishDragging: selectWholeTable, disableMovement } = context;\n    const element = event.target;\n\n    // Remove table outline rectangle\n    initValue?.tableRect.remove();\n\n    // Reset cursor\n    setTableMoverCursor(editor, false);\n\n    if (element == context.div) {\n        // Table mover was only clicked, select whole table and do not dismiss the handler element.\n        selectWholeTable(table);\n        context.onEnd(false /* disposeHandler */);\n        return true;\n    } else {\n        // Check if table was dragged on itself, element is not in editor, or movement is disabled\n        if (\n            table.contains(element as Node) ||\n            !editor.getDOMHelper().isNodeInEditor(element as Node) ||\n            disableMovement\n        ) {\n            editor.setDOMSelection(initValue?.initialSelection ?? null);\n            context.onEnd(true /* disposeHandler */);\n            return false;\n        }\n\n        let insertionSuccess: boolean = false;\n\n        // Get position to insert table\n        const insertPosition = getNodePositionFromEvent(editor, event.clientX, event.clientY);\n        if (insertPosition) {\n            // Move table to new position\n            formatInsertPointWithContentModel(\n                editor,\n                insertPosition,\n                (model, context, ip) => {\n                    // Remove old table\n                    const [oldTable, path] = getFirstSelectedTable(model);\n                    if (oldTable) {\n                        const index = path[0].blocks.indexOf(oldTable);\n                        mutateBlock(path[0]).blocks.splice(index, 1);\n                    }\n\n                    if (ip && initValue?.cmTable) {\n                        // Insert new table\n                        const doc: ShallowMutableContentModelDocument = createContentModelDocument();\n                        doc.blocks.push(oldTable ?? mutateBlock(initValue.cmTable));\n                        insertionSuccess = !!mergeModel(model, cloneModel(doc), context, {\n                            mergeFormat: 'none',\n                            insertPosition: ip,\n                        });\n\n                        if (insertionSuccess) {\n                            // After mergeModel, the new table should be selected\n                            const finalTable = getFirstSelectedTable(model)[0] ?? initValue.cmTable;\n                            if (finalTable) {\n                                // Add selection marker to the first cell of the table\n                                const firstCell = finalTable.rows[0].cells[0];\n                                const markerParagraph = firstCell?.blocks[0];\n\n                                if (markerParagraph?.blockType == 'Paragraph') {\n                                    const marker = createSelectionMarker(model.format);\n\n                                    mutateBlock(markerParagraph).segments.unshift(marker);\n                                    setParagraphNotImplicit(markerParagraph);\n                                    setSelection(model, marker);\n                                }\n                            }\n                        }\n                        return insertionSuccess;\n                    }\n                },\n                {\n                    // Select first cell of the old table\n                    selectionOverride: {\n                        type: 'table',\n                        firstColumn: 0,\n                        firstRow: 0,\n                        lastColumn: 0,\n                        lastRow: 0,\n                        table: table,\n                    },\n                    apiName: 'TableMover',\n                }\n            );\n        } else {\n            // No movement, restore initial selection\n            editor.setDOMSelection(initValue?.initialSelection ?? null);\n        }\n        context.onEnd(true /* disposeHandler */);\n        return insertionSuccess;\n    }\n}\n"]}

package/lib-amd/tableEdit/editors/features/TableRowColumnSelector.d.ts

@@ -0,0 +1,42 @@
+import type { TableEditFeature } from './TableEditFeature';
+import type { OnTableEditorCreatedCallback } from '../../OnTableEditorCreatedCallback';
+import type { DOMSelection, IEditor, ParsedTable, ReadonlyContentModelTable } from 'roosterjs-content-model-types';
+/**
+ * @internal
+ */
+export declare function createTableRowColumnSelector(editor: IEditor, table: HTMLTableElement, isRowSelector: boolean, anchorContainer?: HTMLElement, onTableEditorCreated?: OnTableEditorCreatedCallback): TableEditFeature | null;
+/**
+ * @internal
+ * Exported for testing
+ */
+export interface TableRowColumnSelectorContext {
+    table: HTMLTableElement;
+    zoomScale: number;
+    editor: IEditor;
+    div: HTMLElement;
+    isRow: boolean;
+}
+/**
+ *  @internal
+ */
+export interface TableRowColumnSelectorInitValue {
+    cmTable: ReadonlyContentModelTable | undefined;
+    initialSelection: DOMSelection | null;
+    parsedTable: ParsedTable;
+    startIndex: number;
+}
+/**
+ * @internal
+ * Exported for testing
+ */
+export declare function onDragStart(context: TableRowColumnSelectorContext, event: MouseEvent): TableRowColumnSelectorInitValue;
+/**
+ * @internal
+ * Exported for testing
+ */
+export declare function onDragging(context: TableRowColumnSelectorContext, event: MouseEvent, initValue: TableRowColumnSelectorInitValue | undefined): boolean;
+/**
+ * @internal
+ * Exported for testing
+ */
+export declare function onDragEnd(context: TableRowColumnSelectorContext, event: MouseEvent, initValue: TableRowColumnSelectorInitValue | undefined): boolean;

package/lib-amd/tableEdit/editors/features/TableRowColumnSelector.js

@@ -0,0 +1,221 @@
+define(["require", "exports", "tslib", "../../../pluginUtils/CreateElement/createElement", "../../../pluginUtils/DragAndDrop/DragAndDropHelper", "roosterjs-content-model-dom"], function (require, exports, tslib_1, createElement_1, DragAndDropHelper_1, roosterjs_content_model_dom_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.onDragEnd = exports.onDragging = exports.onDragStart = exports.createTableRowColumnSelector = void 0;
+    var STABLE_DOWN_ARROW_CURSOR = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48dGV4dCB4PSI4IiB5PSIxMiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1zaXplPSIxNCIgZmlsbD0iYmxhY2siPiYjMTI5MDk1OzwvdGV4dD48L3N2Zz4=';
+    var STABLE_RIGHT_ARROW_CURSOR = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48dGV4dCB4PSI4IiB5PSIxMiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1zaXplPSIxNCIgZmlsbD0iYmxhY2siIHRyYW5zZm9ybT0icm90YXRlKC05MCA4IDgpIj4mIzEyOTA5NTs8L3RleHQ+PC9zdmc+';
+    /**
+     * @internal
+     */
+    function createTableRowColumnSelector(editor, table, isRowSelector, anchorContainer, onTableEditorCreated) {
+        var _a;
+        var doc = editor.getDocument();
+        var zoomScale = editor.getDOMHelper().calculateZoomScale();
+        var containerDiv = doc.createElement('div');
+        containerDiv.style.cssText = 'position: fixed; pointer-events: none;';
+        var cells = isRowSelector
+            ? Array.from(table.rows)
+                .map(function (row) { return row.cells[0]; })
+                .filter(function (cell) { return cell; })
+            : Array.from(((_a = table.rows[0]) === null || _a === void 0 ? void 0 : _a.cells) || []);
+        var handlers = [];
+        cells.forEach(function (cell) {
+            var cellRect = (0, roosterjs_content_model_dom_1.normalizeRect)(cell.getBoundingClientRect());
+            if (cellRect) {
+                var createElementData = getInsertElementData(cellRect, isRowSelector);
+                var cellDiv = (0, createElement_1.createElement)(createElementData, doc);
+                containerDiv.appendChild(cellDiv);
+                var context = {
+                    table: table,
+                    zoomScale: zoomScale,
+                    editor: editor,
+                    div: cellDiv,
+                    isRow: isRowSelector,
+                };
+                var handler = new TableRowColumnSelectorHandler(cellDiv, isRowSelector, context, {
+                    onDragStart: onDragStart,
+                    onDragging: onDragging,
+                    onDragEnd: onDragEnd,
+                }, zoomScale, onTableEditorCreated, editor.getEnvironment().isMobileOrTablet);
+                handlers.push(handler);
+            }
+        });
+        (anchorContainer || doc.body).appendChild(containerDiv);
+        var compositeHandler = {
+            dispose: function () {
+                handlers.forEach(function (h) { return h.dispose(); });
+            },
+        };
+        return { div: containerDiv, featureHandler: compositeHandler, node: table };
+    }
+    exports.createTableRowColumnSelector = createTableRowColumnSelector;
+    var TableRowColumnSelectorHandler = /** @class */ (function (_super) {
+        (0, tslib_1.__extends)(TableRowColumnSelectorHandler, _super);
+        function TableRowColumnSelectorHandler(div, isRow, context, handler, zoomScale, onTableEditorCreated, forceMobile) {
+            var _this = _super.call(this, div, context, function () { }, handler, zoomScale, forceMobile) || this;
+            _this.isRow = isRow;
+            _this.disposer = onTableEditorCreated === null || onTableEditorCreated === void 0 ? void 0 : onTableEditorCreated(_this.isRow ? 'TableRowSelector' : 'TableColumnSelector', div);
+            return _this;
+        }
+        TableRowColumnSelectorHandler.prototype.dispose = function () {
+            var _a;
+            (_a = this.disposer) === null || _a === void 0 ? void 0 : _a.call(this);
+            this.disposer = undefined;
+        };
+        return TableRowColumnSelectorHandler;
+    }(DragAndDropHelper_1.DragAndDropHelper));
+    /**
+     * @internal
+     * Helper function to calculate current row/column index from mouse coordinates during drag
+     */
+    function getCurrentIndexFromMouse(table, x, y, isRow) {
+        if (isRow) {
+            for (var i = 0; i < table.rows.length; i++) {
+                var row = table.rows[i];
+                for (var j = 0; j < row.cells.length; j++) {
+                    var cell = row.cells[j];
+                    var cellRect = (0, roosterjs_content_model_dom_1.normalizeRect)(cell.getBoundingClientRect());
+                    if (cellRect && y >= cellRect.top && y <= cellRect.bottom) {
+                        return i;
+                    }
+                }
+            }
+            return Math.max(0, table.rows.length - 1);
+        }
+        else {
+            if (!table.rows[0]) {
+                return 0;
+            }
+            var firstRow = table.rows[0];
+            for (var i = 0; i < firstRow.cells.length; i++) {
+                var cell = firstRow.cells[i];
+                var cellRect = (0, roosterjs_content_model_dom_1.normalizeRect)(cell.getBoundingClientRect());
+                if (cellRect && x >= cellRect.left && x <= cellRect.right) {
+                    return i;
+                }
+            }
+            return firstRow.cells.length - 1;
+        }
+    }
+    /**
+     * @internal
+     * Exported for testing
+     */
+    function onDragStart(context, event) {
+        var table = context.table, editor = context.editor, isRow = context.isRow;
+        editor.setDOMSelection(null);
+        var parsedTable = (0, roosterjs_content_model_dom_1.parseTableCells)(table);
+        var startIndex = getCurrentIndexFromMouse(table, event.clientX, event.clientY, isRow);
+        if (isRow) {
+            var columnNumber = parsedTable[startIndex].length - 1;
+            var initialSelection = {
+                type: 'table',
+                table: table,
+                firstRow: startIndex,
+                lastRow: startIndex,
+                firstColumn: 0,
+                lastColumn: columnNumber,
+            };
+            return {
+                cmTable: undefined,
+                initialSelection: initialSelection,
+                parsedTable: parsedTable,
+                startIndex: startIndex,
+            };
+        }
+        else {
+            var rowNumber = parsedTable.length - 1;
+            var initialSelection = {
+                type: 'table',
+                table: table,
+                firstRow: 0,
+                lastRow: rowNumber,
+                firstColumn: startIndex,
+                lastColumn: startIndex,
+            };
+            return {
+                cmTable: undefined,
+                initialSelection: initialSelection,
+                parsedTable: parsedTable,
+                startIndex: startIndex,
+            };
+        }
+    }
+    exports.onDragStart = onDragStart;
+    /**
+     * @internal
+     * Exported for testing
+     */
+    function onDragging(context, event, initValue) {
+        if (!initValue) {
+            return false;
+        }
+        var table = context.table, editor = context.editor, isRow = context.isRow;
+        var parsedTable = initValue.parsedTable, startIndex = initValue.startIndex;
+        var currentIndex = getCurrentIndexFromMouse(table, event.clientX, event.clientY, isRow);
+        if (isRow) {
+            var columnNumber = parsedTable[startIndex].length - 1;
+            var firstRow = Math.min(startIndex, currentIndex);
+            var lastRow = Math.max(startIndex, currentIndex);
+            editor.setDOMSelection({
+                type: 'table',
+                table: table,
+                firstRow: firstRow,
+                firstColumn: 0,
+                lastRow: lastRow,
+                lastColumn: columnNumber,
+            });
+        }
+        else {
+            var firstColumn = Math.min(startIndex, currentIndex);
+            var lastColumn = Math.max(startIndex, currentIndex);
+            var rowNumber = parsedTable.length - 1;
+            editor.setDOMSelection({
+                type: 'table',
+                table: table,
+                firstRow: 0,
+                firstColumn: firstColumn,
+                lastColumn: lastColumn,
+                lastRow: rowNumber,
+            });
+        }
+        return true;
+    }
+    exports.onDragging = onDragging;
+    /**
+     * @internal
+     * Exported for testing
+     */
+    function onDragEnd(context, event, initValue) {
+        if (!initValue) {
+            return false;
+        }
+        var editor = context.editor;
+        var selection = editor.getDOMSelection();
+        if ((selection === null || selection === void 0 ? void 0 : selection.type) !== 'table') {
+            editor.setDOMSelection(initValue.initialSelection);
+        }
+        return true;
+    }
+    exports.onDragEnd = onDragEnd;
+    function getInsertElementData(rect, isRowSelector) {
+        var MIN_DISTANCE_FROM_BOUNDARY = 5;
+        var GAP_FROM_CELL = 5;
+        var cellLength = isRowSelector ? rect.bottom - rect.top : rect.right - rect.left;
+        var maxSelectorSize = Math.max(16, cellLength - MIN_DISTANCE_FROM_BOUNDARY * 2);
+        var SELECTOR_SIZE = cellLength >= 32 ? Math.min(cellLength - 16, maxSelectorSize) : 16;
+        var centerOffset = (cellLength - SELECTOR_SIZE) / 2;
+        var size = isRowSelector
+            ? "width: 5px; height: " + SELECTOR_SIZE + "px; top: " + (rect.top + centerOffset) + "px; left: " + (rect.left - 5 - GAP_FROM_CELL) + "px"
+            : "width: " + SELECTOR_SIZE + "px; height: 5px; top: " + (rect.top - 5 - GAP_FROM_CELL) + "px; left: " + (rect.left + centerOffset) + "px";
+        var cursor = isRowSelector
+            ? "url(\"" + STABLE_RIGHT_ARROW_CURSOR + "\"), auto"
+            : "url(\"" + STABLE_DOWN_ARROW_CURSOR + "\") , auto";
+        var outerDivStyle = "position: fixed; " + size + "; background-color: transparent; cursor: " + cursor + "; pointer-events: auto;";
+        return {
+            tag: 'div',
+            style: outerDivStyle,
+        };
+    }
+});
+//# sourceMappingURL=TableRowColumnSelector.js.map

package/lib-amd/tableEdit/editors/features/TableRowColumnSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableRowColumnSelector.js","sourceRoot":"","sources":["../../../../../../packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/TableRowColumnSelector.ts"],"names":[],"mappings":"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","sourcesContent":["import { createElement } from '../../../pluginUtils/CreateElement/createElement';\nimport { DragAndDropHelper } from '../../../pluginUtils/DragAndDrop/DragAndDropHelper';\nimport { normalizeRect, parseTableCells } from 'roosterjs-content-model-dom';\nimport type { CreateElementData } from '../../../pluginUtils/CreateElement/CreateElementData';\nimport type { DragAndDropHandler } from '../../../pluginUtils/DragAndDrop/DragAndDropHandler';\nimport type { Disposable } from '../../../pluginUtils/Disposable';\nimport type { TableEditFeature } from './TableEditFeature';\nimport type { OnTableEditorCreatedCallback } from '../../OnTableEditorCreatedCallback';\nimport type {\n    DOMSelection,\n    IEditor,\n    ParsedTable,\n    ReadonlyContentModelTable,\n    Rect,\n    TableSelection,\n} from 'roosterjs-content-model-types';\n\nconst STABLE_DOWN_ARROW_CURSOR =\n    'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48dGV4dCB4PSI4IiB5PSIxMiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1zaXplPSIxNCIgZmlsbD0iYmxhY2siPiYjMTI5MDk1OzwvdGV4dD48L3N2Zz4=';\n\nconst STABLE_RIGHT_ARROW_CURSOR =\n    'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48dGV4dCB4PSI4IiB5PSIxMiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1zaXplPSIxNCIgZmlsbD0iYmxhY2siIHRyYW5zZm9ybT0icm90YXRlKC05MCA4IDgpIj4mIzEyOTA5NTs8L3RleHQ+PC9zdmc+';\n\n/**\n * @internal\n */\nexport function createTableRowColumnSelector(\n    editor: IEditor,\n    table: HTMLTableElement,\n    isRowSelector: boolean,\n    anchorContainer?: HTMLElement,\n    onTableEditorCreated?: OnTableEditorCreatedCallback\n): TableEditFeature | null {\n    const doc = editor.getDocument();\n    const zoomScale = editor.getDOMHelper().calculateZoomScale();\n\n    const containerDiv = doc.createElement('div');\n    containerDiv.style.cssText = 'position: fixed; pointer-events: none;';\n\n    const cells = isRowSelector\n        ? Array.from(table.rows)\n              .map(row => row.cells[0])\n              .filter(cell => cell)\n        : Array.from(table.rows[0]?.cells || []);\n\n    const handlers: TableRowColumnSelectorHandler[] = [];\n\n    cells.forEach(cell => {\n        const cellRect = normalizeRect(cell.getBoundingClientRect());\n        if (cellRect) {\n            const createElementData = getInsertElementData(cellRect, isRowSelector);\n            const cellDiv = createElement(createElementData, doc) as HTMLDivElement;\n            containerDiv.appendChild(cellDiv);\n\n            const context: TableRowColumnSelectorContext = {\n                table,\n                zoomScale,\n                editor,\n                div: cellDiv,\n                isRow: isRowSelector,\n            };\n\n            const handler = new TableRowColumnSelectorHandler(\n                cellDiv,\n                isRowSelector,\n                context,\n                {\n                    onDragStart,\n                    onDragging,\n                    onDragEnd,\n                },\n                zoomScale,\n                onTableEditorCreated,\n                editor.getEnvironment().isMobileOrTablet\n            );\n            handlers.push(handler);\n        }\n    });\n\n    (anchorContainer || doc.body).appendChild(containerDiv);\n\n    const compositeHandler: Disposable = {\n        dispose: () => {\n            handlers.forEach(h => h.dispose());\n        },\n    };\n\n    return { div: containerDiv, featureHandler: compositeHandler, node: table };\n}\n\n/**\n * @internal\n * Exported for testing\n */\nexport interface TableRowColumnSelectorContext {\n    table: HTMLTableElement;\n    zoomScale: number;\n    editor: IEditor;\n    div: HTMLElement;\n    isRow: boolean;\n}\n\n/**\n *  @internal\n */\nexport interface TableRowColumnSelectorInitValue {\n    cmTable: ReadonlyContentModelTable | undefined;\n    initialSelection: DOMSelection | null;\n    parsedTable: ParsedTable;\n    startIndex: number;\n}\n\nclass TableRowColumnSelectorHandler\n    extends DragAndDropHelper<TableRowColumnSelectorContext, TableRowColumnSelectorInitValue>\n    implements Disposable {\n    private disposer: undefined | (() => void);\n    constructor(\n        div: HTMLDivElement,\n        private isRow: boolean,\n        context: TableRowColumnSelectorContext,\n        handler: DragAndDropHandler<TableRowColumnSelectorContext, TableRowColumnSelectorInitValue>,\n        zoomScale: number,\n        onTableEditorCreated?: OnTableEditorCreatedCallback,\n        forceMobile?: boolean | undefined\n    ) {\n        super(div, context, () => {}, handler, zoomScale, forceMobile);\n        this.disposer = onTableEditorCreated?.(\n            this.isRow ? 'TableRowSelector' : 'TableColumnSelector',\n            div\n        );\n    }\n\n    dispose() {\n        this.disposer?.();\n        this.disposer = undefined;\n    }\n}\n\n/**\n * @internal\n * Helper function to calculate current row/column index from mouse coordinates during drag\n */\nfunction getCurrentIndexFromMouse(\n    table: HTMLTableElement,\n    x: number,\n    y: number,\n    isRow: boolean\n): number {\n    if (isRow) {\n        for (let i = 0; i < table.rows.length; i++) {\n            const row = table.rows[i];\n\n            for (let j = 0; j < row.cells.length; j++) {\n                const cell = row.cells[j];\n                const cellRect = normalizeRect(cell.getBoundingClientRect());\n                if (cellRect && y >= cellRect.top && y <= cellRect.bottom) {\n                    return i;\n                }\n            }\n        }\n        return Math.max(0, table.rows.length - 1);\n    } else {\n        if (!table.rows[0]) {\n            return 0;\n        }\n        const firstRow = table.rows[0];\n        for (let i = 0; i < firstRow.cells.length; i++) {\n            const cell = firstRow.cells[i];\n            const cellRect = normalizeRect(cell.getBoundingClientRect());\n            if (cellRect && x >= cellRect.left && x <= cellRect.right) {\n                return i;\n            }\n        }\n        return firstRow.cells.length - 1;\n    }\n}\n\n/**\n * @internal\n * Exported for testing\n */\nexport function onDragStart(\n    context: TableRowColumnSelectorContext,\n    event: MouseEvent\n): TableRowColumnSelectorInitValue {\n    const { table, editor, isRow } = context;\n    editor.setDOMSelection(null);\n\n    const parsedTable = parseTableCells(table);\n\n    const startIndex = getCurrentIndexFromMouse(table, event.clientX, event.clientY, isRow);\n\n    if (isRow) {\n        const columnNumber = parsedTable[startIndex].length - 1;\n        const initialSelection: TableSelection = {\n            type: 'table',\n            table,\n            firstRow: startIndex,\n            lastRow: startIndex,\n            firstColumn: 0,\n            lastColumn: columnNumber,\n        };\n\n        return {\n            cmTable: undefined,\n            initialSelection,\n\n            parsedTable,\n            startIndex,\n        };\n    } else {\n        const rowNumber = parsedTable.length - 1;\n        const initialSelection: TableSelection = {\n            type: 'table',\n            table,\n            firstRow: 0,\n            lastRow: rowNumber,\n            firstColumn: startIndex,\n            lastColumn: startIndex,\n        };\n\n        return {\n            cmTable: undefined,\n            initialSelection,\n\n            parsedTable,\n            startIndex,\n        };\n    }\n}\n\n/**\n * @internal\n * Exported for testing\n */\nexport function onDragging(\n    context: TableRowColumnSelectorContext,\n    event: MouseEvent,\n    initValue: TableRowColumnSelectorInitValue | undefined\n): boolean {\n    if (!initValue) {\n        return false;\n    }\n\n    const { table, editor, isRow } = context;\n    const { parsedTable, startIndex } = initValue;\n\n    const currentIndex = getCurrentIndexFromMouse(table, event.clientX, event.clientY, isRow);\n\n    if (isRow) {\n        const columnNumber = parsedTable[startIndex].length - 1;\n        const firstRow = Math.min(startIndex, currentIndex);\n        const lastRow = Math.max(startIndex, currentIndex);\n\n        editor.setDOMSelection({\n            type: 'table',\n            table: table,\n            firstRow,\n            firstColumn: 0,\n            lastRow,\n            lastColumn: columnNumber,\n        });\n    } else {\n        const firstColumn = Math.min(startIndex, currentIndex);\n        const lastColumn = Math.max(startIndex, currentIndex);\n        const rowNumber = parsedTable.length - 1;\n\n        editor.setDOMSelection({\n            type: 'table',\n            table: table,\n            firstRow: 0,\n            firstColumn,\n            lastColumn,\n            lastRow: rowNumber,\n        });\n    }\n\n    return true;\n}\n\n/**\n * @internal\n * Exported for testing\n */\nexport function onDragEnd(\n    context: TableRowColumnSelectorContext,\n    event: MouseEvent,\n    initValue: TableRowColumnSelectorInitValue | undefined\n): boolean {\n    if (!initValue) {\n        return false;\n    }\n\n    const { editor } = context;\n    const selection = editor.getDOMSelection();\n\n    if (selection?.type !== 'table') {\n        editor.setDOMSelection(initValue.initialSelection);\n    }\n\n    return true;\n}\n\nfunction getInsertElementData(rect: Rect, isRowSelector: boolean): CreateElementData {\n    const MIN_DISTANCE_FROM_BOUNDARY = 5;\n    const GAP_FROM_CELL = 5;\n    const cellLength = isRowSelector ? rect.bottom - rect.top : rect.right - rect.left;\n\n    const maxSelectorSize = Math.max(16, cellLength - MIN_DISTANCE_FROM_BOUNDARY * 2);\n    const SELECTOR_SIZE = cellLength >= 32 ? Math.min(cellLength - 16, maxSelectorSize) : 16;\n\n    const centerOffset = (cellLength - SELECTOR_SIZE) / 2;\n\n    const size = isRowSelector\n        ? `width: 5px; height: ${SELECTOR_SIZE}px; top: ${rect.top + centerOffset}px; left: ${\n              rect.left - 5 - GAP_FROM_CELL\n          }px`\n        : `width: ${SELECTOR_SIZE}px; height: 5px; top: ${rect.top - 5 - GAP_FROM_CELL}px; left: ${\n              rect.left + centerOffset\n          }px`;\n\n    const cursor = isRowSelector\n        ? `url(\"${STABLE_RIGHT_ARROW_CURSOR}\"), auto`\n        : `url(\"${STABLE_DOWN_ARROW_CURSOR}\") , auto`;\n\n    const outerDivStyle = `position: fixed; ${size}; background-color: transparent; cursor: ${cursor}; pointer-events: auto;`;\n    return {\n        tag: 'div',\n        style: outerDivStyle,\n    };\n}\n"]}

package/lib-amd/tableEdit/editors/utils/getTableFromContentModel.js

@@ -11,6 +11,7 @@ define(["require", "exports", "roosterjs-content-model-dom"], function (require,
         var context = (0, roosterjs_content_model_dom_1.createDomToModelContext)({
             zoomScale: editor.getDOMHelper().calculateZoomScale(),
             recalculateTableSize: true,
+            allowCacheElement: true, // We need this cache so we can retrieve TD element and update TD width and height when resizing table
         });
         context.elementProcessors.element(model, table, context);
         var firstBlock = model.blocks[0];

package/lib-amd/tableEdit/editors/utils/getTableFromContentModel.js.map

@@ -1 +1 @@
-{"version":3,"file":"getTableFromContentModel.js","sourceRoot":"","sources":["../../../../../../packages/roosterjs-content-model-plugins/lib/tableEdit/editors/utils/getTableFromContentModel.ts"],"names":[],"mappings":";;;;IAGA;;;OAGG;IACH,SAAgB,mBAAmB,CAAC,MAAe,EAAE,KAAuB;QACxE,IAAM,KAAK,GAAG,IAAA,wDAA0B,GAAE,CAAC;QAC3C,IAAM,OAAO,GAAG,IAAA,qDAAuB,EAAC;YACpC,SAAS,EAAE,MAAM,CAAC,YAAY,EAAE,CAAC,kBAAkB,EAAE;YACrD,oBAAoB,EAAE,IAAI;SAC7B,CAAC,CAAC;QAEH,OAAO,CAAC,iBAAiB,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC;QAEzD,IAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;QAEnC,OAAO,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,SAAS,KAAI,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC;IACrE,CAAC;IAZD,kDAYC","sourcesContent":["import { createContentModelDocument, createDomToModelContext } from 'roosterjs-content-model-dom';\nimport type { IEditor } from 'roosterjs-content-model-types';\n\n/**\n * @internal\n * Get ContentModelTable from a table element if it is present in the content model\n */\nexport function getCMTableFromTable(editor: IEditor, table: HTMLTableElement) {\n    const model = createContentModelDocument();\n    const context = createDomToModelContext({\n        zoomScale: editor.getDOMHelper().calculateZoomScale(),\n        recalculateTableSize: true,\n    });\n\n    context.elementProcessors.element(model, table, context);\n\n    const firstBlock = model.blocks[0];\n\n    return firstBlock?.blockType == 'Table' ? firstBlock : undefined;\n}\n"]}
+{"version":3,"file":"getTableFromContentModel.js","sourceRoot":"","sources":["../../../../../../packages/roosterjs-content-model-plugins/lib/tableEdit/editors/utils/getTableFromContentModel.ts"],"names":[],"mappings":";;;;IAGA;;;OAGG;IACH,SAAgB,mBAAmB,CAAC,MAAe,EAAE,KAAuB;QACxE,IAAM,KAAK,GAAG,IAAA,wDAA0B,GAAE,CAAC;QAC3C,IAAM,OAAO,GAAG,IAAA,qDAAuB,EAAC;YACpC,SAAS,EAAE,MAAM,CAAC,YAAY,EAAE,CAAC,kBAAkB,EAAE;YACrD,oBAAoB,EAAE,IAAI;YAC1B,iBAAiB,EAAE,IAAI,EAAE,sGAAsG;SAClI,CAAC,CAAC;QAEH,OAAO,CAAC,iBAAiB,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC;QAEzD,IAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;QAEnC,OAAO,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,SAAS,KAAI,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC;IACrE,CAAC;IAbD,kDAaC","sourcesContent":["import { createContentModelDocument, createDomToModelContext } from 'roosterjs-content-model-dom';\nimport type { IEditor } from 'roosterjs-content-model-types';\n\n/**\n * @internal\n * Get ContentModelTable from a table element if it is present in the content model\n */\nexport function getCMTableFromTable(editor: IEditor, table: HTMLTableElement) {\n    const model = createContentModelDocument();\n    const context = createDomToModelContext({\n        zoomScale: editor.getDOMHelper().calculateZoomScale(),\n        recalculateTableSize: true,\n        allowCacheElement: true, // We need this cache so we can retrieve TD element and update TD width and height when resizing table\n    });\n\n    context.elementProcessors.element(model, table, context);\n\n    const firstBlock = model.blocks[0];\n\n    return firstBlock?.blockType == 'Table' ? firstBlock : undefined;\n}\n"]}

package/lib-amd/touch/TouchPlugin.js

@@ -50,7 +50,7 @@ define(["require", "exports", "../utils/getNodePositionFromEvent"], function (re
          */
         TouchPlugin.prototype.onPluginEvent = function (event) {
             var _this = this;
-            var _a, _b, _c, _d;
+            var _a, _b, _c;
             if (!this.editor) {
                 return;
             }
@@ -59,57 +59,59 @@ define(["require", "exports", "../utils/getNodePositionFromEvent"], function (re
                     this.isDblClicked = false;
                     this.isTouchPenPointerEvent = true;
                     event.originalEvent.preventDefault();
-                    var targetWindow = ((_a = this.editor.getDocument()) === null || _a === void 0 ? void 0 : _a.defaultView) || window;
-                    if (this.timer) {
-                        targetWindow.clearTimeout(this.timer);
-                    }
-                    this.timer = targetWindow.setTimeout(function () {
-                        _this.timer = 0;
-                        if (_this.editor) {
-                            if (!_this.isDblClicked) {
-                                _this.editor.focus();
-                                var caretPosition = (0, getNodePositionFromEvent_1.getNodePositionFromEvent)(_this.editor, event.rawEvent.x, event.rawEvent.y);
-                                var newRange = _this.editor.getDocument().createRange();
-                                if (caretPosition) {
-                                    var node = caretPosition.node, offset = caretPosition.offset;
-                                    // Place cursor at same position of browser handler by default
-                                    newRange.setStart(node, offset);
-                                    newRange.setEnd(node, offset);
-                                    var nodeTextContent = node.textContent || '';
-                                    var charAtSelection = nodeTextContent[offset];
-                                    if (node.nodeType === Node.TEXT_NODE &&
-                                        charAtSelection &&
-                                        !SPACE_MATCHING_REGEX.test(charAtSelection) &&
-                                        !PUNCTUATION_MATCHING_REGEX.test(charAtSelection)) {
-                                        var _a = findWordBoundaries(nodeTextContent, offset), wordStart = _a.wordStart, wordEnd = _a.wordEnd;
-                                        // Move cursor to the calculated offset
-                                        var leftCursorWordLength = offset - wordStart;
-                                        var rightCursorWordLength = wordEnd - offset;
-                                        var movingOffset = leftCursorWordLength >= rightCursorWordLength
-                                            ? rightCursorWordLength
-                                            : -leftCursorWordLength;
-                                        movingOffset =
-                                            Math.abs(movingOffset) > MAX_TOUCH_MOVE_DISTANCE
-                                                ? 0
-                                                : movingOffset;
-                                        var newOffsetPosition = offset + movingOffset;
-                                        if (movingOffset !== 0 &&
-                                            nodeTextContent.length >= newOffsetPosition) {
-                                            newRange.setStart(node, newOffsetPosition);
-                                            newRange.setEnd(node, newOffsetPosition);
+                    var targetWindow = this.editor.getDocument().defaultView;
+                    if (targetWindow) {
+                        if (this.timer) {
+                            targetWindow.clearTimeout(this.timer);
+                        }
+                        this.timer = targetWindow.setTimeout(function () {
+                            _this.timer = 0;
+                            if (_this.editor) {
+                                if (!_this.isDblClicked) {
+                                    _this.editor.focus();
+                                    var caretPosition = (0, getNodePositionFromEvent_1.getNodePositionFromEvent)(_this.editor, event.rawEvent.x, event.rawEvent.y);
+                                    var newRange = _this.editor.getDocument().createRange();
+                                    if (caretPosition) {
+                                        var node = caretPosition.node, offset = caretPosition.offset;
+                                        // Place cursor at same position of browser handler by default
+                                        newRange.setStart(node, offset);
+                                        newRange.setEnd(node, offset);
+                                        var nodeTextContent = node.textContent || '';
+                                        var charAtSelection = nodeTextContent[offset];
+                                        if (node.nodeType === Node.TEXT_NODE &&
+                                            charAtSelection &&
+                                            !SPACE_MATCHING_REGEX.test(charAtSelection) &&
+                                            !PUNCTUATION_MATCHING_REGEX.test(charAtSelection)) {
+                                            var _a = findWordBoundaries(nodeTextContent, offset), wordStart = _a.wordStart, wordEnd = _a.wordEnd;
+                                            // Move cursor to the calculated offset
+                                            var leftCursorWordLength = offset - wordStart;
+                                            var rightCursorWordLength = wordEnd - offset;
+                                            var movingOffset = leftCursorWordLength >= rightCursorWordLength
+                                                ? rightCursorWordLength
+                                                : -leftCursorWordLength;
+                                            movingOffset =
+                                                Math.abs(movingOffset) > MAX_TOUCH_MOVE_DISTANCE
+                                                    ? 0
+                                                    : movingOffset;
+                                            var newOffsetPosition = offset + movingOffset;
+                                            if (movingOffset !== 0 &&
+                                                nodeTextContent.length >= newOffsetPosition) {
+                                                newRange.setStart(node, newOffsetPosition);
+                                                newRange.setEnd(node, newOffsetPosition);
+                                            }
                                         }
                                     }
+                                    _this.editor.setDOMSelection({
+                                        type: 'range',
+                                        range: newRange,
+                                        isReverted: false,
+                                    });
+                                    // reset values
+                                    _this.isTouchPenPointerEvent = false;
                                 }
-                                _this.editor.setDOMSelection({
-                                    type: 'range',
-                                    range: newRange,
-                                    isReverted: false,
-                                });
-                                // reset values
-                                _this.isTouchPenPointerEvent = false;
                             }
-                        }
-                    }, POINTER_DETECTION_DELAY);
+                        }, POINTER_DETECTION_DELAY);
+                    }
                     break;
                 case 'doubleClick':
                     if (this.isTouchPenPointerEvent) {
@@ -125,7 +127,7 @@ define(["require", "exports", "../utils/getNodePositionFromEvent"], function (re
                             var char = nodeTextContent.charAt(offset);
                             // Check if the clicked character is a punctuation mark, then highlight that character only
                             if (PUNCTUATION_MATCHING_REGEX.test(char)) {
-                                var newRange = (_b = this.editor.getDocument()) === null || _b === void 0 ? void 0 : _b.createRange();
+                                var newRange = (_a = this.editor.getDocument()) === null || _a === void 0 ? void 0 : _a.createRange();
                                 if (newRange) {
                                     newRange.setStart(node, offset);
                                     newRange.setEnd(node, offset + 1);
@@ -147,7 +149,7 @@ define(["require", "exports", "../utils/getNodePositionFromEvent"], function (re
                                         SPACE_MATCHING_REGEX.test(nodeTextContent.charAt(start - 1))) {
                                         start--;
                                     }
-                                    var newRange = (_c = this.editor.getDocument()) === null || _c === void 0 ? void 0 : _c.createRange();
+                                    var newRange = (_b = this.editor.getDocument()) === null || _b === void 0 ? void 0 : _b.createRange();
                                     if (newRange) {
                                         newRange.setStart(node, start);
                                         newRange.setEnd(node, start + 1);
@@ -160,8 +162,8 @@ define(["require", "exports", "../utils/getNodePositionFromEvent"], function (re
                                 }
                             }
                             else {
-                                var _e = findWordBoundaries(nodeTextContent, offset), wordStart = _e.wordStart, wordEnd = _e.wordEnd;
-                                var newRange = (_d = this.editor.getDocument()) === null || _d === void 0 ? void 0 : _d.createRange();
+                                var _d = findWordBoundaries(nodeTextContent, offset), wordStart = _d.wordStart, wordEnd = _d.wordEnd;
+                                var newRange = (_c = this.editor.getDocument()) === null || _c === void 0 ? void 0 : _c.createRange();
                                 if (newRange) {
                                     newRange.setStart(node, wordStart);
                                     newRange.setEnd(node, wordEnd);