roosterjs-content-model-plugins 9.4.1 → 9.5.0

package/lib-amd/edit/tabUtils/handleTabOnTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"handleTabOnTable.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-plugins/lib/edit/tabUtils/handleTabOnTable.ts"],"names":[],"mappings":";;;;IAIA;;;OAGG;IACH,SAAgB,gBAAgB,CAAC,KAA2B,EAAE,QAAuB;QACjF,IAAM,UAAU,GAAG,IAAA,mDAAqB,EAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;QACnD,IAAI,UAAU,IAAI,oBAAoB,CAAC,UAAU,CAAC,EAAE;YAChD,IAAA,iDAAmB,EAAC,KAAK,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;YACrE,QAAQ,CAAC,cAAc,EAAE,CAAC;YAC1B,OAAO,IAAI,CAAC;SACf;QACD,OAAO,KAAK,CAAC;IACjB,CAAC;IARD,4CAQC;IAED,SAAS,oBAAoB,CAAC,UAA6B;;QACvD,OAAO,CACH,CAAA,MAAA,MAAA,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,0CAAE,KAAK,CAAC,CAAC,CAAC,0CAAE,UAAU;aACxC,MAAA,MAAA,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,0CAAE,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,0CAAE,UAAU,CAAA,CAC/F,CAAC;IACN,CAAC","sourcesContent":["import { getFirstSelectedTable } from 'roosterjs-content-model-dom';\nimport { setModelIndentation } from 'roosterjs-content-model-api';\nimport type { ContentModelDocument, ContentModelTable } from 'roosterjs-content-model-types';\n\n/**\n * When the whole table is selected, indent or outdent the whole table with setModelIndentation.\n * @internal\n */\nexport function handleTabOnTable(model: ContentModelDocument, rawEvent: KeyboardEvent) {\n    const tableModel = getFirstSelectedTable(model)[0];\n    if (tableModel && isWholeTableSelected(tableModel)) {\n        setModelIndentation(model, rawEvent.shiftKey ? 'outdent' : 'indent');\n        rawEvent.preventDefault();\n        return true;\n    }\n    return false;\n}\n\nfunction isWholeTableSelected(tableModel: ContentModelTable) {\n    return (\n        tableModel.rows[0]?.cells[0]?.isSelected &&\n        tableModel.rows[tableModel.rows.length - 1]?.cells[tableModel.widths.length - 1]?.isSelected\n    );\n}\n"]}
+{"version":3,"file":"handleTabOnTable.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-plugins/lib/edit/tabUtils/handleTabOnTable.ts"],"names":[],"mappings":";;;;IAOA;;;OAGG;IACH,SAAgB,gBAAgB,CAAC,KAAmC,EAAE,QAAuB;QACzF,IAAM,UAAU,GAAG,IAAA,mDAAqB,EAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;QACnD,IAAI,UAAU,IAAI,oBAAoB,CAAC,UAAU,CAAC,EAAE;YAChD,IAAA,iDAAmB,EAAC,KAAK,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;YACrE,QAAQ,CAAC,cAAc,EAAE,CAAC;YAC1B,OAAO,IAAI,CAAC;SACf;QACD,OAAO,KAAK,CAAC;IACjB,CAAC;IARD,4CAQC;IAED,SAAS,oBAAoB,CAAC,UAAqC;;QAC/D,OAAO,CACH,CAAA,MAAA,MAAA,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,0CAAE,KAAK,CAAC,CAAC,CAAC,0CAAE,UAAU;aACxC,MAAA,MAAA,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,0CAAE,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,0CAAE,UAAU,CAAA,CAC/F,CAAC;IACN,CAAC","sourcesContent":["import { getFirstSelectedTable } from 'roosterjs-content-model-dom';\nimport { setModelIndentation } from 'roosterjs-content-model-api';\nimport type {\n    ReadonlyContentModelDocument,\n    ReadonlyContentModelTable,\n} from 'roosterjs-content-model-types';\n\n/**\n * When the whole table is selected, indent or outdent the whole table with setModelIndentation.\n * @internal\n */\nexport function handleTabOnTable(model: ReadonlyContentModelDocument, rawEvent: KeyboardEvent) {\n    const tableModel = getFirstSelectedTable(model)[0];\n    if (tableModel && isWholeTableSelected(tableModel)) {\n        setModelIndentation(model, rawEvent.shiftKey ? 'outdent' : 'indent');\n        rawEvent.preventDefault();\n        return true;\n    }\n    return false;\n}\n\nfunction isWholeTableSelected(tableModel: ReadonlyContentModelTable) {\n    return (\n        tableModel.rows[0]?.cells[0]?.isSelected &&\n        tableModel.rows[tableModel.rows.length - 1]?.cells[tableModel.widths.length - 1]?.isSelected\n    );\n}\n"]}

package/lib-amd/edit/tabUtils/handleTabOnTableCell.d.ts

@@ -1,6 +1,6 @@
-import type { ContentModelDocument, ContentModelTableCell } from 'roosterjs-content-model-types';
+import type { ReadonlyContentModelDocument, ReadonlyContentModelTableCell } from 'roosterjs-content-model-types';
 /**
  * When the cursor is on the last cell of a table, add new row and focus first new cell.
  * @internal
  */
-export declare function handleTabOnTableCell(model: ContentModelDocument, cell: ContentModelTableCell, rawEvent: KeyboardEvent): boolean;
+export declare function handleTabOnTableCell(model: ReadonlyContentModelDocument, cell: ReadonlyContentModelTableCell, rawEvent: KeyboardEvent): boolean;

package/lib-amd/edit/tabUtils/handleTabOnTableCell.js

@@ -8,11 +8,12 @@ define(["require", "exports", "roosterjs-content-model-api", "roosterjs-content-
      */
     function handleTabOnTableCell(model, cell, rawEvent) {
         var _a, _b, _c;
-        var tableModel = (0, roosterjs_content_model_dom_1.getFirstSelectedTable)(model)[0];
+        var readonlyTableModel = (0, roosterjs_content_model_dom_1.getFirstSelectedTable)(model)[0];
         // Check if cursor is on last cell of the table
         if (!rawEvent.shiftKey &&
-            tableModel &&
-            ((_a = tableModel.rows[tableModel.rows.length - 1]) === null || _a === void 0 ? void 0 : _a.cells[tableModel.widths.length - 1]) === cell) {
+            readonlyTableModel &&
+            ((_a = readonlyTableModel.rows[readonlyTableModel.rows.length - 1]) === null || _a === void 0 ? void 0 : _a.cells[readonlyTableModel.widths.length - 1]) === cell) {
+            var tableModel = (0, roosterjs_content_model_dom_1.mutateBlock)(readonlyTableModel);
             (0, roosterjs_content_model_api_1.insertTableRow)(tableModel, 'insertBelow');
             // Clear Table selection
             (0, roosterjs_content_model_api_1.clearSelectedCells)(tableModel, {
@@ -26,7 +27,7 @@ define(["require", "exports", "roosterjs-content-model-api", "roosterjs-content-
             var markerParagraph = (_c = (_b = tableModel.rows[tableModel.rows.length - 1]) === null || _b === void 0 ? void 0 : _b.cells[0]) === null || _c === void 0 ? void 0 : _c.blocks[0];
             if (markerParagraph.blockType == 'Paragraph') {
                 var marker = (0, roosterjs_content_model_dom_1.createSelectionMarker)(model.format);
-                markerParagraph.segments.unshift(marker);
+                (0, roosterjs_content_model_dom_1.mutateBlock)(markerParagraph).segments.unshift(marker);
                 (0, roosterjs_content_model_dom_1.setParagraphNotImplicit)(markerParagraph);
                 (0, roosterjs_content_model_dom_1.setSelection)(tableModel.rows[tableModel.rows.length - 1].cells[0], marker);
             }

package/lib-amd/edit/tabUtils/handleTabOnTableCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"handleTabOnTableCell.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-plugins/lib/edit/tabUtils/handleTabOnTableCell.ts"],"names":[],"mappings":";;;;IAUA;;;OAGG;IACH,SAAgB,oBAAoB,CAChC,KAA2B,EAC3B,IAA2B,EAC3B,QAAuB;;QAEvB,IAAM,UAAU,GAAG,IAAA,mDAAqB,EAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;QACnD,+CAA+C;QAC/C,IACI,CAAC,QAAQ,CAAC,QAAQ;YAClB,UAAU;YACV,CAAA,MAAA,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,0CAAE,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,MAAK,IAAI,EAC3F;YACE,IAAA,4CAAc,EAAC,UAAU,EAAE,aAAa,CAAC,CAAC;YAE1C,wBAAwB;YACxB,IAAA,gDAAkB,EAAC,UAAU,EAAE;gBAC3B,QAAQ,EAAE,UAAU,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC;gBACpC,WAAW,EAAE,CAAC;gBACd,OAAO,EAAE,UAAU,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC;gBACnC,UAAU,EAAE,UAAU,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC;aAC3C,CAAC,CAAC;YACH,IAAA,4CAAc,EAAC,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;YAEzC,wDAAwD;YACxD,IAAM,eAAe,GAAG,MAAA,MAAA,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,0CAAE,KAAK,CAAC,CAAC,CAAC,0CAAE,MAAM,CAAC,CAAC,CAAC,CAAC;YACzF,IAAI,eAAe,CAAC,SAAS,IAAI,WAAW,EAAE;gBAC1C,IAAM,MAAM,GAAG,IAAA,mDAAqB,EAAC,KAAK,CAAC,MAAM,CAAC,CAAC;gBAEnD,eAAe,CAAC,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;gBACzC,IAAA,qDAAuB,EAAC,eAAe,CAAC,CAAC;gBACzC,IAAA,0CAAY,EAAC,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;aAC9E;YAED,QAAQ,CAAC,cAAc,EAAE,CAAC;YAC1B,OAAO,IAAI,CAAC;SACf;QAED,OAAO,KAAK,CAAC;IACjB,CAAC;IAtCD,oDAsCC","sourcesContent":["import { clearSelectedCells, insertTableRow } from 'roosterjs-content-model-api';\nimport {\n    createSelectionMarker,\n    getFirstSelectedTable,\n    normalizeTable,\n    setParagraphNotImplicit,\n    setSelection,\n} from 'roosterjs-content-model-dom';\nimport type { ContentModelDocument, ContentModelTableCell } from 'roosterjs-content-model-types';\n\n/**\n * When the cursor is on the last cell of a table, add new row and focus first new cell.\n * @internal\n */\nexport function handleTabOnTableCell(\n    model: ContentModelDocument,\n    cell: ContentModelTableCell,\n    rawEvent: KeyboardEvent\n) {\n    const tableModel = getFirstSelectedTable(model)[0];\n    // Check if cursor is on last cell of the table\n    if (\n        !rawEvent.shiftKey &&\n        tableModel &&\n        tableModel.rows[tableModel.rows.length - 1]?.cells[tableModel.widths.length - 1] === cell\n    ) {\n        insertTableRow(tableModel, 'insertBelow');\n\n        // Clear Table selection\n        clearSelectedCells(tableModel, {\n            firstRow: tableModel.rows.length - 1,\n            firstColumn: 0,\n            lastRow: tableModel.rows.length - 1,\n            lastColumn: tableModel.widths.length - 1,\n        });\n        normalizeTable(tableModel, model.format);\n\n        // Add selection marker to the first cell of the new row\n        const markerParagraph = tableModel.rows[tableModel.rows.length - 1]?.cells[0]?.blocks[0];\n        if (markerParagraph.blockType == 'Paragraph') {\n            const marker = createSelectionMarker(model.format);\n\n            markerParagraph.segments.unshift(marker);\n            setParagraphNotImplicit(markerParagraph);\n            setSelection(tableModel.rows[tableModel.rows.length - 1].cells[0], marker);\n        }\n\n        rawEvent.preventDefault();\n        return true;\n    }\n\n    return false;\n}\n"]}
+{"version":3,"file":"handleTabOnTableCell.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-plugins/lib/edit/tabUtils/handleTabOnTableCell.ts"],"names":[],"mappings":";;;;IAcA;;;OAGG;IACH,SAAgB,oBAAoB,CAChC,KAAmC,EACnC,IAAmC,EACnC,QAAuB;;QAEvB,IAAM,kBAAkB,GAAG,IAAA,mDAAqB,EAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;QAE3D,+CAA+C;QAC/C,IACI,CAAC,QAAQ,CAAC,QAAQ;YAClB,kBAAkB;YAClB,CAAA,MAAA,kBAAkB,CAAC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,0CAAE,KAAK,CAC9D,kBAAkB,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CACvC,MAAK,IAAI,EACZ;YACE,IAAM,UAAU,GAAG,IAAA,yCAAW,EAAC,kBAAkB,CAAC,CAAC;YACnD,IAAA,4CAAc,EAAC,UAAU,EAAE,aAAa,CAAC,CAAC;YAE1C,wBAAwB;YACxB,IAAA,gDAAkB,EAAC,UAAU,EAAE;gBAC3B,QAAQ,EAAE,UAAU,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC;gBACpC,WAAW,EAAE,CAAC;gBACd,OAAO,EAAE,UAAU,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC;gBACnC,UAAU,EAAE,UAAU,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC;aAC3C,CAAC,CAAC;YACH,IAAA,4CAAc,EAAC,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;YAEzC,wDAAwD;YACxD,IAAM,eAAe,GAAG,MAAA,MAAA,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,0CAAE,KAAK,CAAC,CAAC,CAAC,0CAAE,MAAM,CAAC,CAAC,CAAC,CAAC;YACzF,IAAI,eAAe,CAAC,SAAS,IAAI,WAAW,EAAE;gBAC1C,IAAM,MAAM,GAAG,IAAA,mDAAqB,EAAC,KAAK,CAAC,MAAM,CAAC,CAAC;gBAEnD,IAAA,yCAAW,EAAC,eAAe,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;gBACtD,IAAA,qDAAuB,EAAC,eAAe,CAAC,CAAC;gBACzC,IAAA,0CAAY,EAAC,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;aAC9E;YAED,QAAQ,CAAC,cAAc,EAAE,CAAC;YAC1B,OAAO,IAAI,CAAC;SACf;QAED,OAAO,KAAK,CAAC;IACjB,CAAC;IA1CD,oDA0CC","sourcesContent":["import { clearSelectedCells, insertTableRow } from 'roosterjs-content-model-api';\nimport {\n    createSelectionMarker,\n    getFirstSelectedTable,\n    mutateBlock,\n    normalizeTable,\n    setParagraphNotImplicit,\n    setSelection,\n} from 'roosterjs-content-model-dom';\nimport type {\n    ReadonlyContentModelDocument,\n    ReadonlyContentModelTableCell,\n} from 'roosterjs-content-model-types';\n\n/**\n * When the cursor is on the last cell of a table, add new row and focus first new cell.\n * @internal\n */\nexport function handleTabOnTableCell(\n    model: ReadonlyContentModelDocument,\n    cell: ReadonlyContentModelTableCell,\n    rawEvent: KeyboardEvent\n) {\n    const readonlyTableModel = getFirstSelectedTable(model)[0];\n\n    // Check if cursor is on last cell of the table\n    if (\n        !rawEvent.shiftKey &&\n        readonlyTableModel &&\n        readonlyTableModel.rows[readonlyTableModel.rows.length - 1]?.cells[\n            readonlyTableModel.widths.length - 1\n        ] === cell\n    ) {\n        const tableModel = mutateBlock(readonlyTableModel);\n        insertTableRow(tableModel, 'insertBelow');\n\n        // Clear Table selection\n        clearSelectedCells(tableModel, {\n            firstRow: tableModel.rows.length - 1,\n            firstColumn: 0,\n            lastRow: tableModel.rows.length - 1,\n            lastColumn: tableModel.widths.length - 1,\n        });\n        normalizeTable(tableModel, model.format);\n\n        // Add selection marker to the first cell of the new row\n        const markerParagraph = tableModel.rows[tableModel.rows.length - 1]?.cells[0]?.blocks[0];\n        if (markerParagraph.blockType == 'Paragraph') {\n            const marker = createSelectionMarker(model.format);\n\n            mutateBlock(markerParagraph).segments.unshift(marker);\n            setParagraphNotImplicit(markerParagraph);\n            setSelection(tableModel.rows[tableModel.rows.length - 1].cells[0], marker);\n        }\n\n        rawEvent.preventDefault();\n        return true;\n    }\n\n    return false;\n}\n"]}

package/lib-amd/edit/utils/getLeafSiblingBlock.d.ts

@@ -1,4 +1,4 @@
-import type { ContentModelBlock, ContentModelBlockGroup, ContentModelSegment, ReadonlyContentModelBlock, ReadonlyContentModelBlockGroup, ReadonlyContentModelSegment } from 'roosterjs-content-model-types';
+import type { ReadonlyContentModelBlock, ReadonlyContentModelBlockGroup, ReadonlyContentModelSegment } from 'roosterjs-content-model-types';
 /**
  * @internal
  */
@@ -6,16 +6,16 @@ export declare type BlockAndPath = {
     /**
      * The sibling block
      */
-    block: ContentModelBlock;
+    block: ReadonlyContentModelBlock;
     /**
      * Path of this sibling block
      */
-    path: ContentModelBlockGroup[];
+    path: ReadonlyContentModelBlockGroup[];
     /**
      * If the input block is under a general segment, it is possible there are sibling segments under the same paragraph.
      * Use this property to return the sibling sibling under the same paragraph
      */
-    siblingSegment?: ContentModelSegment;
+    siblingSegment?: ReadonlyContentModelSegment;
 };
 /**
  * @internal
@@ -38,7 +38,7 @@ export declare type ReadonlyBlockAndPath = {
 /**
  * @internal
  */
-export declare function getLeafSiblingBlock(path: ContentModelBlockGroup[], block: ContentModelBlock, isNext: boolean): BlockAndPath | null;
+export declare function getLeafSiblingBlock(path: ReadonlyContentModelBlockGroup[], block: ReadonlyContentModelBlock, isNext: boolean): BlockAndPath | null;
 /**
  * @internal (Readonly)
  */

package/lib-amd/edit/utils/getLeafSiblingBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"getLeafSiblingBlock.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-plugins/lib/edit/utils/getLeafSiblingBlock.ts"],"names":[],"mappings":";;;;IAuEA,SAAgB,mBAAmB,CAC/B,IAAsC,EACtC,KAAgC,EAChC,MAAe;;QAEf,IAAM,OAAO,sDAAO,IAAI,SAAC,CAAC;;YAGtB,IAAM,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;YACzB,IAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;YAE1C,IAAI,KAAK,GAAG,CAAC,EAAE;;aAEd;YAED,IAAI,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAExD,IAAI,SAAS,EAAE;gBACX,OAAO,SAAS,CAAC,SAAS,IAAI,YAAY,EAAE;oBACxC,IAAM,KAAK,GAAG,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;oBAEzE,IAAI,CAAC,KAAK,EAAE;wCACD,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE;qBAC7C;yBAAM,IAAI,KAAK,CAAC,SAAS,IAAI,YAAY,EAAE;wBACxC,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;wCACpB,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE;qBACzC;yBAAM;wBACH,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;wBAC3B,SAAS,GAAG,KAAK,CAAC;qBACrB;iBACJ;gCAEM,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE;aAC7C;iBAAM,IAAI,IAAA,8CAAgB,EAAC,KAAK,CAAC,EAAE;gBAChC,6FAA6F;gBAC7F,wDAAwD;gBACxD,OAAO,CAAC,KAAK,EAAE,CAAC;gBAEhB,IAAI,cAAY,GAAG,CAAC,CAAC,CAAC;gBACtB,IAAM,SAAO,GAAG,KAAK,CAAC;gBACtB,IAAM,IAAI,GAAG,MAAA,OAAO,CAAC,CAAC,CAAC,0CAAE,MAAM,CAAC,IAAI,CAChC,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,SAAS,IAAI,WAAW,IAAI,CAAC,cAAY,GAAG,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,SAAO,CAAC,CAAC,IAAI,CAAC,EAA/E,CAA+E,CAC9D,CAAC;gBAE3B,IAAI,IAAI,EAAE;oBACN,qFAAqF;oBACrF,IAAM,cAAc,GAAG,IAAI,CAAC,QAAQ,CAAC,cAAY,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;oBAEvE,IAAI,cAAc,EAAE;wCAET,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,cAAc,gBAAA,EAAE;qBACxD;yBAAM;wBACH,gDAAgD;wBAChD,KAAK,GAAG,IAAI,CAAC;qBAChB;iBACJ;qBAAM;;iBAGN;aACJ;iBAAM,IAAI,KAAK,CAAC,cAAc,IAAI,UAAU,IAAI,KAAK,CAAC,cAAc,IAAI,WAAW,EAAE;gBAClF,OAAO,CAAC,KAAK,EAAE,CAAC;gBAChB,KAAK,GAAG,KAAK,CAAC;aACjB;iBAAM;;aAEN;;QAzDL,OAAO,OAAO,CAAC,MAAM,GAAG,CAAC;;;;;;SA0DxB;QAED,OAAO,IAAI,CAAC;IAChB,CAAC;IApED,kDAoEC","sourcesContent":["import { isGeneralSegment } from 'roosterjs-content-model-dom';\nimport type {\n    ContentModelBlock,\n    ContentModelBlockGroup,\n    ContentModelParagraph,\n    ContentModelSegment,\n    ReadonlyContentModelBlock,\n    ReadonlyContentModelBlockGroup,\n    ReadonlyContentModelSegment,\n} from 'roosterjs-content-model-types';\n\n/**\n * @internal\n */\nexport type BlockAndPath = {\n    /**\n     * The sibling block\n     */\n    block: ContentModelBlock;\n\n    /**\n     * Path of this sibling block\n     */\n    path: ContentModelBlockGroup[];\n\n    /**\n     * If the input block is under a general segment, it is possible there are sibling segments under the same paragraph.\n     * Use this property to return the sibling sibling under the same paragraph\n     */\n    siblingSegment?: ContentModelSegment;\n};\n\n/**\n * @internal\n */\nexport type ReadonlyBlockAndPath = {\n    /**\n     * The sibling block\n     */\n    block: ReadonlyContentModelBlock;\n\n    /**\n     * Path of this sibling block\n     */\n    path: ReadonlyContentModelBlockGroup[];\n\n    /**\n     * If the input block is under a general segment, it is possible there are sibling segments under the same paragraph.\n     * Use this property to return the sibling sibling under the same paragraph\n     */\n    siblingSegment?: ReadonlyContentModelSegment;\n};\n\n/**\n * @internal\n */\nexport function getLeafSiblingBlock(\n    path: ContentModelBlockGroup[],\n    block: ContentModelBlock,\n    isNext: boolean\n): BlockAndPath | null;\n\n/**\n * @internal (Readonly)\n */\nexport function getLeafSiblingBlock(\n    path: ReadonlyContentModelBlockGroup[],\n    block: ReadonlyContentModelBlock,\n    isNext: boolean\n): ReadonlyBlockAndPath | null;\n\nexport function getLeafSiblingBlock(\n    path: ReadonlyContentModelBlockGroup[],\n    block: ReadonlyContentModelBlock,\n    isNext: boolean\n): ReadonlyBlockAndPath | null {\n    const newPath = [...path];\n\n    while (newPath.length > 0) {\n        const group = newPath[0];\n        const index = group.blocks.indexOf(block);\n\n        if (index < 0) {\n            break;\n        }\n\n        let nextBlock = group.blocks[index + (isNext ? 1 : -1)];\n\n        if (nextBlock) {\n            while (nextBlock.blockType == 'BlockGroup') {\n                const child = nextBlock.blocks[isNext ? 0 : nextBlock.blocks.length - 1];\n\n                if (!child) {\n                    return { block: nextBlock, path: newPath };\n                } else if (child.blockType != 'BlockGroup') {\n                    newPath.unshift(nextBlock);\n                    return { block: child, path: newPath };\n                } else {\n                    newPath.unshift(nextBlock);\n                    nextBlock = child;\n                }\n            }\n\n            return { block: nextBlock, path: newPath };\n        } else if (isGeneralSegment(group)) {\n            // For general segment, we need to check if there is sibling segment under the same paragraph\n            // First let's find the parent paragraph of this segment\n            newPath.shift();\n\n            let segmentIndex = -1;\n            const segment = group;\n            const para = newPath[0]?.blocks.find(\n                x => x.blockType == 'Paragraph' && (segmentIndex = x.segments.indexOf(segment)) >= 0\n            ) as ContentModelParagraph;\n\n            if (para) {\n                // Now we have found the parent paragraph, so let's check if it has a sibling segment\n                const siblingSegment = para.segments[segmentIndex + (isNext ? 1 : -1)];\n\n                if (siblingSegment) {\n                    // Return this block, path and segment since we have found it\n                    return { block: para, path: newPath, siblingSegment };\n                } else {\n                    // No sibling segment, let's keep go upper level\n                    block = para;\n                }\n            } else {\n                // Parent sibling is not found (in theory this should never happen), just return null\n                break;\n            }\n        } else if (group.blockGroupType != 'Document' && group.blockGroupType != 'TableCell') {\n            newPath.shift();\n            block = group;\n        } else {\n            break;\n        }\n    }\n\n    return null;\n}\n"]}
+{"version":3,"file":"getLeafSiblingBlock.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-plugins/lib/edit/utils/getLeafSiblingBlock.ts"],"names":[],"mappings":";;;;IAoEA,SAAgB,mBAAmB,CAC/B,IAAsC,EACtC,KAAgC,EAChC,MAAe;;QAEf,IAAM,OAAO,sDAAO,IAAI,SAAC,CAAC;;YAGtB,IAAM,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;YACzB,IAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;YAE1C,IAAI,KAAK,GAAG,CAAC,EAAE;;aAEd;YAED,IAAI,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAExD,IAAI,SAAS,EAAE;gBACX,OAAO,SAAS,CAAC,SAAS,IAAI,YAAY,EAAE;oBACxC,IAAM,KAAK,GAAG,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;oBAEzE,IAAI,CAAC,KAAK,EAAE;wCACD,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE;qBAC7C;yBAAM,IAAI,KAAK,CAAC,SAAS,IAAI,YAAY,EAAE;wBACxC,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;wCACpB,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE;qBACzC;yBAAM;wBACH,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;wBAC3B,SAAS,GAAG,KAAK,CAAC;qBACrB;iBACJ;gCAEM,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE;aAC7C;iBAAM,IAAI,IAAA,8CAAgB,EAAC,KAAK,CAAC,EAAE;gBAChC,6FAA6F;gBAC7F,wDAAwD;gBACxD,OAAO,CAAC,KAAK,EAAE,CAAC;gBAEhB,IAAI,cAAY,GAAG,CAAC,CAAC,CAAC;gBACtB,IAAM,SAAO,GAAG,KAAK,CAAC;gBACtB,IAAM,IAAI,GAAG,MAAA,OAAO,CAAC,CAAC,CAAC,0CAAE,MAAM,CAAC,IAAI,CAChC,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,SAAS,IAAI,WAAW,IAAI,CAAC,cAAY,GAAG,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,SAAO,CAAC,CAAC,IAAI,CAAC,EAA/E,CAA+E,CAC9D,CAAC;gBAE3B,IAAI,IAAI,EAAE;oBACN,qFAAqF;oBACrF,IAAM,cAAc,GAAG,IAAI,CAAC,QAAQ,CAAC,cAAY,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;oBAEvE,IAAI,cAAc,EAAE;wCAET,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,cAAc,gBAAA,EAAE;qBACxD;yBAAM;wBACH,gDAAgD;wBAChD,KAAK,GAAG,IAAI,CAAC;qBAChB;iBACJ;qBAAM;;iBAGN;aACJ;iBAAM,IAAI,KAAK,CAAC,cAAc,IAAI,UAAU,IAAI,KAAK,CAAC,cAAc,IAAI,WAAW,EAAE;gBAClF,OAAO,CAAC,KAAK,EAAE,CAAC;gBAChB,KAAK,GAAG,KAAK,CAAC;aACjB;iBAAM;;aAEN;;QAzDL,OAAO,OAAO,CAAC,MAAM,GAAG,CAAC;;;;;;SA0DxB;QAED,OAAO,IAAI,CAAC;IAChB,CAAC;IApED,kDAoEC","sourcesContent":["import { isGeneralSegment } from 'roosterjs-content-model-dom';\nimport type {\n    ContentModelParagraph,\n    ReadonlyContentModelBlock,\n    ReadonlyContentModelBlockGroup,\n    ReadonlyContentModelSegment,\n} from 'roosterjs-content-model-types';\n\n/**\n * @internal\n */\nexport type BlockAndPath = {\n    /**\n     * The sibling block\n     */\n    block: ReadonlyContentModelBlock;\n\n    /**\n     * Path of this sibling block\n     */\n    path: ReadonlyContentModelBlockGroup[];\n\n    /**\n     * If the input block is under a general segment, it is possible there are sibling segments under the same paragraph.\n     * Use this property to return the sibling sibling under the same paragraph\n     */\n    siblingSegment?: ReadonlyContentModelSegment;\n};\n\n/**\n * @internal\n */\nexport type ReadonlyBlockAndPath = {\n    /**\n     * The sibling block\n     */\n    block: ReadonlyContentModelBlock;\n\n    /**\n     * Path of this sibling block\n     */\n    path: ReadonlyContentModelBlockGroup[];\n\n    /**\n     * If the input block is under a general segment, it is possible there are sibling segments under the same paragraph.\n     * Use this property to return the sibling sibling under the same paragraph\n     */\n    siblingSegment?: ReadonlyContentModelSegment;\n};\n\n/**\n * @internal\n */\nexport function getLeafSiblingBlock(\n    path: ReadonlyContentModelBlockGroup[],\n    block: ReadonlyContentModelBlock,\n    isNext: boolean\n): BlockAndPath | null;\n\n/**\n * @internal (Readonly)\n */\nexport function getLeafSiblingBlock(\n    path: ReadonlyContentModelBlockGroup[],\n    block: ReadonlyContentModelBlock,\n    isNext: boolean\n): ReadonlyBlockAndPath | null;\n\nexport function getLeafSiblingBlock(\n    path: ReadonlyContentModelBlockGroup[],\n    block: ReadonlyContentModelBlock,\n    isNext: boolean\n): ReadonlyBlockAndPath | null {\n    const newPath = [...path];\n\n    while (newPath.length > 0) {\n        const group = newPath[0];\n        const index = group.blocks.indexOf(block);\n\n        if (index < 0) {\n            break;\n        }\n\n        let nextBlock = group.blocks[index + (isNext ? 1 : -1)];\n\n        if (nextBlock) {\n            while (nextBlock.blockType == 'BlockGroup') {\n                const child = nextBlock.blocks[isNext ? 0 : nextBlock.blocks.length - 1];\n\n                if (!child) {\n                    return { block: nextBlock, path: newPath };\n                } else if (child.blockType != 'BlockGroup') {\n                    newPath.unshift(nextBlock);\n                    return { block: child, path: newPath };\n                } else {\n                    newPath.unshift(nextBlock);\n                    nextBlock = child;\n                }\n            }\n\n            return { block: nextBlock, path: newPath };\n        } else if (isGeneralSegment(group)) {\n            // For general segment, we need to check if there is sibling segment under the same paragraph\n            // First let's find the parent paragraph of this segment\n            newPath.shift();\n\n            let segmentIndex = -1;\n            const segment = group;\n            const para = newPath[0]?.blocks.find(\n                x => x.blockType == 'Paragraph' && (segmentIndex = x.segments.indexOf(segment)) >= 0\n            ) as ContentModelParagraph;\n\n            if (para) {\n                // Now we have found the parent paragraph, so let's check if it has a sibling segment\n                const siblingSegment = para.segments[segmentIndex + (isNext ? 1 : -1)];\n\n                if (siblingSegment) {\n                    // Return this block, path and segment since we have found it\n                    return { block: para, path: newPath, siblingSegment };\n                } else {\n                    // No sibling segment, let's keep go upper level\n                    block = para;\n                }\n            } else {\n                // Parent sibling is not found (in theory this should never happen), just return null\n                break;\n            }\n        } else if (group.blockGroupType != 'Document' && group.blockGroupType != 'TableCell') {\n            newPath.shift();\n            block = group;\n        } else {\n            break;\n        }\n    }\n\n    return null;\n}\n"]}

package/lib-amd/edit/utils/splitParagraph.d.ts

@@ -0,0 +1,9 @@
+import type { InsertPoint, ShallowMutableContentModelParagraph } from 'roosterjs-content-model-types';
+/**
+ * @internal
+ * Split the given paragraph from insert point into two paragraphs,
+ * and move the selection marker to the beginning of the second paragraph
+ * @param insertPoint The input insert point which includes the paragraph and selection marker
+ * @returns The new paragraph it created
+ */
+export declare function splitParagraph(insertPoint: InsertPoint): ShallowMutableContentModelParagraph;

package/lib-amd/edit/utils/splitParagraph.js

@@ -0,0 +1,29 @@
+define(["require", "exports", "tslib", "roosterjs-content-model-dom"], function (require, exports, tslib_1, roosterjs_content_model_dom_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.splitParagraph = void 0;
+    /**
+     * @internal
+     * Split the given paragraph from insert point into two paragraphs,
+     * and move the selection marker to the beginning of the second paragraph
+     * @param insertPoint The input insert point which includes the paragraph and selection marker
+     * @returns The new paragraph it created
+     */
+    function splitParagraph(insertPoint) {
+        var _a;
+        var paragraph = insertPoint.paragraph, marker = insertPoint.marker;
+        var newParagraph = (0, roosterjs_content_model_dom_1.createParagraph)(false /*isImplicit*/, paragraph.format, paragraph.segmentFormat);
+        var markerIndex = paragraph.segments.indexOf(marker);
+        var segments = paragraph.segments.splice(markerIndex, paragraph.segments.length - markerIndex);
+        if (paragraph.segments.length == 0) {
+            paragraph.segments.push((0, roosterjs_content_model_dom_1.createBr)(marker.format));
+        }
+        (_a = newParagraph.segments).push.apply(_a, (0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(segments), false));
+        (0, roosterjs_content_model_dom_1.setParagraphNotImplicit)(paragraph);
+        insertPoint.paragraph = newParagraph;
+        (0, roosterjs_content_model_dom_1.normalizeParagraph)(paragraph);
+        return newParagraph;
+    }
+    exports.splitParagraph = splitParagraph;
+});
+//# sourceMappingURL=splitParagraph.js.map

package/lib-amd/edit/utils/splitParagraph.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"splitParagraph.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-plugins/lib/edit/utils/splitParagraph.ts"],"names":[],"mappings":";;;;IAWA;;;;;;OAMG;IACH,SAAgB,cAAc,CAAC,WAAwB;;QAC3C,IAAA,SAAS,GAAa,WAAW,UAAxB,EAAE,MAAM,GAAK,WAAW,OAAhB,CAAiB;QAC1C,IAAM,YAAY,GAAwC,IAAA,6CAAe,EACrE,KAAK,CAAC,cAAc,EACpB,SAAS,CAAC,MAAM,EAChB,SAAS,CAAC,aAAa,CAC1B,CAAC;QAEF,IAAM,WAAW,GAAG,SAAS,CAAC,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;QACvD,IAAM,QAAQ,GAAG,SAAS,CAAC,QAAQ,CAAC,MAAM,CACtC,WAAW,EACX,SAAS,CAAC,QAAQ,CAAC,MAAM,GAAG,WAAW,CAC1C,CAAC;QAEF,IAAI,SAAS,CAAC,QAAQ,CAAC,MAAM,IAAI,CAAC,EAAE;YAChC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAA,sCAAQ,EAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;SACpD;QAED,CAAA,KAAA,YAAY,CAAC,QAAQ,CAAA,CAAC,IAAI,8DAAI,QAAQ,WAAE;QAExC,IAAA,qDAAuB,EAAC,SAAS,CAAC,CAAC;QAEnC,WAAW,CAAC,SAAS,GAAG,YAAY,CAAC;QAErC,IAAA,gDAAkB,EAAC,SAAS,CAAC,CAAC;QAE9B,OAAO,YAAY,CAAC;IACxB,CAAC;IA3BD,wCA2BC","sourcesContent":["import {\n    createBr,\n    createParagraph,\n    normalizeParagraph,\n    setParagraphNotImplicit,\n} from 'roosterjs-content-model-dom';\nimport type {\n    InsertPoint,\n    ShallowMutableContentModelParagraph,\n} from 'roosterjs-content-model-types';\n\n/**\n * @internal\n * Split the given paragraph from insert point into two paragraphs,\n * and move the selection marker to the beginning of the second paragraph\n * @param insertPoint The input insert point which includes the paragraph and selection marker\n * @returns The new paragraph it created\n */\nexport function splitParagraph(insertPoint: InsertPoint) {\n    const { paragraph, marker } = insertPoint;\n    const newParagraph: ShallowMutableContentModelParagraph = createParagraph(\n        false /*isImplicit*/,\n        paragraph.format,\n        paragraph.segmentFormat\n    );\n\n    const markerIndex = paragraph.segments.indexOf(marker);\n    const segments = paragraph.segments.splice(\n        markerIndex,\n        paragraph.segments.length - markerIndex\n    );\n\n    if (paragraph.segments.length == 0) {\n        paragraph.segments.push(createBr(marker.format));\n    }\n\n    newParagraph.segments.push(...segments);\n\n    setParagraphNotImplicit(paragraph);\n\n    insertPoint.paragraph = newParagraph;\n\n    normalizeParagraph(paragraph);\n\n    return newParagraph;\n}\n"]}

package/lib-amd/imageEdit/Cropper/createImageCropper.d.ts

@@ -0,0 +1,10 @@
+import type { CreateElementData } from '../../pluginUtils/CreateElement/CreateElementData';
+/**
+ * @internal
+ */
+export declare function createImageCropper(doc: Document): HTMLDivElement[];
+/**
+ * @internal
+ * Get HTML for crop elements, including 4 overlays (to show dark shadow), 1 container and 4 crop handles
+ */
+export declare function getCropHTML(): CreateElementData[];

package/lib-amd/imageEdit/Cropper/createImageCropper.js

@@ -0,0 +1,78 @@
+define(["require", "exports", "../../pluginUtils/CreateElement/createElement", "../types/ImageEditElementClass", "roosterjs-content-model-dom", "../constants/constants"], function (require, exports, createElement_1, ImageEditElementClass_1, roosterjs_content_model_dom_1, constants_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.getCropHTML = exports.createImageCropper = void 0;
+    /**
+     * @internal
+     */
+    function createImageCropper(doc) {
+        var cropper = getCropHTML()
+            .map(function (data) {
+            var cropper = (0, createElement_1.createElement)(data, doc);
+            if (cropper &&
+                (0, roosterjs_content_model_dom_1.isNodeOfType)(cropper, 'ELEMENT_NODE') &&
+                (0, roosterjs_content_model_dom_1.isElementOfType)(cropper, 'div')) {
+                return cropper;
+            }
+        })
+            .filter(function (cropper) { return !!cropper; });
+        return cropper;
+    }
+    exports.createImageCropper = createImageCropper;
+    /**
+     * @internal
+     * Get HTML for crop elements, including 4 overlays (to show dark shadow), 1 container and 4 crop handles
+     */
+    function getCropHTML() {
+        var overlayHTML = {
+            tag: 'div',
+            style: 'position:absolute;background-color:rgb(0,0,0,0.5);pointer-events:none',
+            className: ImageEditElementClass_1.ImageEditElementClass.CropOverlay,
+        };
+        var containerHTML = {
+            tag: 'div',
+            style: 'position:absolute;overflow:hidden;inset:0px;',
+            className: ImageEditElementClass_1.ImageEditElementClass.CropContainer,
+            children: [],
+        };
+        if (containerHTML) {
+            constants_1.XS_CROP.forEach(function (x) {
+                return constants_1.YS_CROP.forEach(function (y) { var _a; return (_a = containerHTML.children) === null || _a === void 0 ? void 0 : _a.push(getCropHTMLInternal(x, y)); });
+            });
+        }
+        return [containerHTML, overlayHTML, overlayHTML, overlayHTML, overlayHTML];
+    }
+    exports.getCropHTML = getCropHTML;
+    function getCropHTMLInternal(x, y) {
+        var leftOrRight = x == 'w' ? 'left' : 'right';
+        var topOrBottom = y == 'n' ? 'top' : 'bottom';
+        var rotation = constants_1.ROTATION[y + x];
+        return {
+            tag: 'div',
+            className: ImageEditElementClass_1.ImageEditElementClass.CropHandle,
+            style: "position:absolute;pointer-events:auto;cursor:" + y + x + "-resize;" + leftOrRight + ":0;" + topOrBottom + ":0;width:" + constants_1.CROP_HANDLE_SIZE + "px;height:" + constants_1.CROP_HANDLE_SIZE + "px;transform:rotate(" + rotation + "deg)",
+            dataset: { x: x, y: y },
+            children: getCropHandleHTML(),
+        };
+    }
+    function getCropHandleHTML() {
+        var result = [];
+        [0, 1].forEach(function (layer) {
+            return [0, 1].forEach(function (dir) {
+                result.push(getCropHandleHTMLInternal(layer, dir));
+            });
+        });
+        return result;
+    }
+    function getCropHandleHTMLInternal(layer, dir) {
+        var position = dir == 0
+            ? "right:" + layer + "px;height:" + (constants_1.CROP_HANDLE_WIDTH - layer * 2) + "px;"
+            : "top:" + layer + "px;width:" + (constants_1.CROP_HANDLE_WIDTH - layer * 2) + "px;";
+        var bgColor = layer == 0 ? 'white' : 'black';
+        return {
+            tag: 'div',
+            style: "position:absolute;left:" + layer + "px;bottom:" + layer + "px;" + position + ";background-color:" + bgColor,
+        };
+    }
+});
+//# sourceMappingURL=createImageCropper.js.map

package/lib-amd/imageEdit/Cropper/createImageCropper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createImageCropper.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-plugins/lib/imageEdit/Cropper/createImageCropper.ts"],"names":[],"mappings":"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","sourcesContent":["import { createElement } from '../../pluginUtils/CreateElement/createElement';\nimport { ImageEditElementClass } from '../types/ImageEditElementClass';\nimport { isElementOfType, isNodeOfType } from 'roosterjs-content-model-dom';\nimport type { CreateElementData } from '../../pluginUtils/CreateElement/CreateElementData';\nimport type { DNDDirectionX, DnDDirectionY } from '../types/DragAndDropContext';\nimport {\n    CROP_HANDLE_SIZE,\n    CROP_HANDLE_WIDTH,\n    ROTATION,\n    XS_CROP,\n    YS_CROP,\n} from '../constants/constants';\n\n/**\n * @internal\n */\nexport function createImageCropper(doc: Document) {\n    const cropper = getCropHTML()\n        .map(data => {\n            const cropper = createElement(data, doc);\n            if (\n                cropper &&\n                isNodeOfType(cropper, 'ELEMENT_NODE') &&\n                isElementOfType(cropper, 'div')\n            ) {\n                return cropper;\n            }\n        })\n        .filter(cropper => !!cropper) as HTMLDivElement[];\n    return cropper;\n}\n\n/**\n * @internal\n * Get HTML for crop elements, including 4 overlays (to show dark shadow), 1 container and 4 crop handles\n */\nexport function getCropHTML(): CreateElementData[] {\n    const overlayHTML: CreateElementData = {\n        tag: 'div',\n        style: 'position:absolute;background-color:rgb(0,0,0,0.5);pointer-events:none',\n        className: ImageEditElementClass.CropOverlay,\n    };\n    const containerHTML: CreateElementData = {\n        tag: 'div',\n        style: 'position:absolute;overflow:hidden;inset:0px;',\n        className: ImageEditElementClass.CropContainer,\n        children: [],\n    };\n\n    if (containerHTML) {\n        XS_CROP.forEach(x =>\n            YS_CROP.forEach(y => containerHTML.children?.push(getCropHTMLInternal(x, y)))\n        );\n    }\n    return [containerHTML, overlayHTML, overlayHTML, overlayHTML, overlayHTML];\n}\n\nfunction getCropHTMLInternal(x: DNDDirectionX, y: DnDDirectionY): CreateElementData {\n    const leftOrRight = x == 'w' ? 'left' : 'right';\n    const topOrBottom = y == 'n' ? 'top' : 'bottom';\n    const rotation = ROTATION[y + x];\n\n    return {\n        tag: 'div',\n        className: ImageEditElementClass.CropHandle,\n        style: `position:absolute;pointer-events:auto;cursor:${y}${x}-resize;${leftOrRight}:0;${topOrBottom}:0;width:${CROP_HANDLE_SIZE}px;height:${CROP_HANDLE_SIZE}px;transform:rotate(${rotation}deg)`,\n        dataset: { x, y },\n        children: getCropHandleHTML(),\n    };\n}\n\nfunction getCropHandleHTML(): CreateElementData[] {\n    const result: CreateElementData[] = [];\n    [0, 1].forEach(layer =>\n        [0, 1].forEach(dir => {\n            result.push(getCropHandleHTMLInternal(layer, dir));\n        })\n    );\n    return result;\n}\n\nfunction getCropHandleHTMLInternal(layer: number, dir: number): CreateElementData {\n    const position =\n        dir == 0\n            ? `right:${layer}px;height:${CROP_HANDLE_WIDTH - layer * 2}px;`\n            : `top:${layer}px;width:${CROP_HANDLE_WIDTH - layer * 2}px;`;\n    const bgColor = layer == 0 ? 'white' : 'black';\n\n    return {\n        tag: 'div',\n        style: `position:absolute;left:${layer}px;bottom:${layer}px;${position};background-color:${bgColor}`,\n    };\n}\n"]}

package/lib-amd/imageEdit/Cropper/cropperContext.d.ts

@@ -0,0 +1,8 @@
+import type { DragAndDropContext } from '../types/DragAndDropContext';
+import type { DragAndDropHandler } from '../../pluginUtils/DragAndDrop/DragAndDropHandler';
+import type { ImageCropMetadataFormat } from 'roosterjs-content-model-types';
+/**
+ * @internal
+ * Crop handle for DragAndDropHelper
+ */
+export declare const Cropper: DragAndDropHandler<DragAndDropContext, ImageCropMetadataFormat>;

package/lib-amd/imageEdit/Cropper/cropperContext.js

@@ -0,0 +1,73 @@
+define(["require", "exports", "tslib", "../utils/imageEditUtils"], function (require, exports, tslib_1, imageEditUtils_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.Cropper = void 0;
+    /**
+     * @internal
+     * Crop handle for DragAndDropHelper
+     */
+    exports.Cropper = {
+        onDragStart: function (_a) {
+            var editInfo = _a.editInfo;
+            return ((0, tslib_1.__assign)({}, editInfo));
+        },
+        onDragging: function (_a, e, base, dx, dy) {
+            var _b;
+            var _c;
+            var editInfo = _a.editInfo, x = _a.x, y = _a.y, options = _a.options;
+            _b = (0, tslib_1.__read)((0, imageEditUtils_1.rotateCoordinate)(dx, dy, (_c = editInfo.angleRad) !== null && _c !== void 0 ? _c : 0), 2), dx = _b[0], dy = _b[1];
+            var widthPx = editInfo.widthPx, heightPx = editInfo.heightPx, leftPercent = editInfo.leftPercent, rightPercent = editInfo.rightPercent, topPercent = editInfo.topPercent, bottomPercent = editInfo.bottomPercent;
+            if (leftPercent === undefined ||
+                rightPercent === undefined ||
+                topPercent === undefined ||
+                bottomPercent === undefined ||
+                base.leftPercent === undefined ||
+                base.rightPercent === undefined ||
+                base.topPercent === undefined ||
+                base.bottomPercent === undefined ||
+                widthPx === undefined ||
+                heightPx === undefined) {
+                return false;
+            }
+            var minWidth = options.minWidth, minHeight = options.minHeight;
+            var widthPercent = 1 - leftPercent - rightPercent;
+            var heightPercent = 1 - topPercent - bottomPercent;
+            if (widthPercent > 0 &&
+                heightPercent > 0 &&
+                minWidth !== undefined &&
+                minHeight !== undefined) {
+                var fullWidth = widthPx / widthPercent;
+                var fullHeight = heightPx / heightPercent;
+                var newLeft = x != 'e'
+                    ? crop(base.leftPercent, dx, fullWidth, rightPercent, minWidth)
+                    : leftPercent;
+                var newRight = x != 'w'
+                    ? crop(base.rightPercent, -dx, fullWidth, leftPercent, minWidth)
+                    : rightPercent;
+                var newTop = y != 's'
+                    ? crop(base.topPercent, dy, fullHeight, bottomPercent, minHeight)
+                    : topPercent;
+                var newBottom = y != 'n'
+                    ? crop(base.bottomPercent, -dy, fullHeight, topPercent, minHeight)
+                    : bottomPercent;
+                editInfo.leftPercent = newLeft;
+                editInfo.rightPercent = newRight;
+                editInfo.topPercent = newTop;
+                editInfo.bottomPercent = newBottom;
+                editInfo.widthPx = fullWidth * (1 - newLeft - newRight);
+                editInfo.heightPx = fullHeight * (1 - newTop - newBottom);
+                return true;
+            }
+            else {
+                return false;
+            }
+        },
+    };
+    function crop(basePercentage, deltaValue, fullValue, currentPercentage, minValue) {
+        var maxValue = fullValue * (1 - currentPercentage) - minValue;
+        var newValue = fullValue * basePercentage + deltaValue;
+        var validValue = Math.max(Math.min(newValue, maxValue), 0);
+        return validValue / fullValue;
+    }
+});
+//# sourceMappingURL=cropperContext.js.map

package/lib-amd/imageEdit/Cropper/cropperContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cropperContext.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-plugins/lib/imageEdit/Cropper/cropperContext.ts"],"names":[],"mappings":"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","sourcesContent":["import { rotateCoordinate } from '../utils/imageEditUtils';\nimport type { DragAndDropContext } from '../types/DragAndDropContext';\nimport type { DragAndDropHandler } from '../../pluginUtils/DragAndDrop/DragAndDropHandler';\nimport type { ImageCropMetadataFormat } from 'roosterjs-content-model-types';\n\n/**\n * @internal\n * Crop handle for DragAndDropHelper\n */\nexport const Cropper: DragAndDropHandler<DragAndDropContext, ImageCropMetadataFormat> = {\n    onDragStart: ({ editInfo }) => ({ ...editInfo }),\n    onDragging: ({ editInfo, x, y, options }, e, base, dx, dy) => {\n        [dx, dy] = rotateCoordinate(dx, dy, editInfo.angleRad ?? 0);\n\n        const {\n            widthPx,\n            heightPx,\n            leftPercent,\n            rightPercent,\n            topPercent,\n            bottomPercent,\n        } = editInfo;\n\n        if (\n            leftPercent === undefined ||\n            rightPercent === undefined ||\n            topPercent === undefined ||\n            bottomPercent === undefined ||\n            base.leftPercent === undefined ||\n            base.rightPercent === undefined ||\n            base.topPercent === undefined ||\n            base.bottomPercent === undefined ||\n            widthPx === undefined ||\n            heightPx === undefined\n        ) {\n            return false;\n        }\n\n        const { minWidth, minHeight } = options;\n        const widthPercent = 1 - leftPercent - rightPercent;\n        const heightPercent = 1 - topPercent - bottomPercent;\n\n        if (\n            widthPercent > 0 &&\n            heightPercent > 0 &&\n            minWidth !== undefined &&\n            minHeight !== undefined\n        ) {\n            const fullWidth = widthPx / widthPercent;\n            const fullHeight = heightPx / heightPercent;\n            const newLeft =\n                x != 'e'\n                    ? crop(base.leftPercent, dx, fullWidth, rightPercent, minWidth)\n                    : leftPercent;\n            const newRight =\n                x != 'w'\n                    ? crop(base.rightPercent, -dx, fullWidth, leftPercent, minWidth)\n                    : rightPercent;\n            const newTop =\n                y != 's'\n                    ? crop(base.topPercent, dy, fullHeight, bottomPercent, minHeight)\n                    : topPercent;\n            const newBottom =\n                y != 'n'\n                    ? crop(base.bottomPercent, -dy, fullHeight, topPercent, minHeight)\n                    : bottomPercent;\n\n            editInfo.leftPercent = newLeft;\n            editInfo.rightPercent = newRight;\n            editInfo.topPercent = newTop;\n            editInfo.bottomPercent = newBottom;\n            editInfo.widthPx = fullWidth * (1 - newLeft - newRight);\n            editInfo.heightPx = fullHeight * (1 - newTop - newBottom);\n\n            return true;\n        } else {\n            return false;\n        }\n    },\n};\n\nfunction crop(\n    basePercentage: number,\n    deltaValue: number,\n    fullValue: number,\n    currentPercentage: number,\n    minValue: number\n): number {\n    const maxValue = fullValue * (1 - currentPercentage) - minValue;\n    const newValue = fullValue * basePercentage + deltaValue;\n    const validValue = Math.max(Math.min(newValue, maxValue), 0);\n    return validValue / fullValue;\n}\n"]}

package/lib-amd/imageEdit/ImageEditPlugin.d.ts

@@ -0,0 +1,66 @@
+import type { ImageEditOptions } from './types/ImageEditOptions';
+import type { EditorPlugin, IEditor, ImageEditOperation, ImageEditor, PluginEvent } from 'roosterjs-content-model-types';
+/**
+ * ImageEdit plugin handles the following image editing features:
+ * - Resize image
+ * - Crop image
+ * - Rotate image
+ * - Flip image
+ */
+export declare class ImageEditPlugin implements ImageEditor, EditorPlugin {
+    protected options: ImageEditOptions;
+    protected editor: IEditor | null;
+    private shadowSpan;
+    private selectedImage;
+    wrapper: HTMLSpanElement | null;
+    private imageEditInfo;
+    private imageHTMLOptions;
+    private dndHelpers;
+    private clonedImage;
+    private lastSrc;
+    private wasImageResized;
+    private isCropMode;
+    private resizers;
+    private rotators;
+    private croppers;
+    private zoomScale;
+    private disposer;
+    constructor(options?: ImageEditOptions);
+    /**
+     * Get name of this plugin
+     */
+    getName(): string;
+    /**
+     * The first method that editor will call to a plugin when editor is initializing.
+     * It will pass in the editor instance, plugin should take this chance to save the
+     * editor reference so that it can call to any editor method or format API later.
+     * @param editor The editor object
+     */
+    initialize(editor: IEditor): void;
+    /**
+     * The last method that editor will call to a plugin before it is disposed.
+     * Plugin can take this chance to clear the reference to editor. After this method is
+     * called, plugin should not call to any editor method since it will result in error.
+     */
+    dispose(): void;
+    /**
+     * Core method for a plugin. Once an event happens in editor, editor will call this
+     * method of each plugin to handle the event as long as the event is not handled
+     * exclusively by another plugin.
+     * @param event The event to handle:
+     */
+    onPluginEvent(_event: PluginEvent): void;
+    private startEditing;
+    startRotateAndResize(editor: IEditor, image: HTMLImageElement, apiOperation?: 'resize' | 'rotate'): void;
+    private updateRotateHandleState;
+    isOperationAllowed(operation: ImageEditOperation): boolean;
+    canRegenerateImage(image: HTMLImageElement): boolean;
+    cropImage(): void;
+    private editImage;
+    private cleanInfo;
+    private formatImageWithContentModel;
+    private removeImageWrapper;
+    flipImage(direction: 'horizontal' | 'vertical'): void;
+    rotateImage(angleRad: number): void;
+    getWrapper(): HTMLSpanElement | null;
+}