roosterjs-content-model-api - npm Package Compare versions

Comparing version 0.22.0 to 0.23.0

lib-amd/modelApi/block/setModelAlignment.d.ts

@@ -5,2 +5,2 @@ import type { ContentModelDocument } from 'roosterjs-content-model-types';
  */
-export declare function setModelAlignment(model: ContentModelDocument, alignment: 'left' | 'center' | 'right'): boolean;
+export declare function setModelAlignment(model: ContentModelDocument, alignment: 'left' | 'center' | 'right' | 'justify'): boolean;

lib-amd/modelApi/block/setModelAlignment.js

@@ -18,2 +18,6 @@ define(["require", "exports", "../table/alignTable", "roosterjs-content-model-core"], function (require, exports, alignTable_1, roosterjs_content_model_core_1) {
         },
+        justify: {
+            ltr: 'justify',
+            rtl: 'justify',
+        },
     };
@@ -41,9 +45,15 @@ var TableAlignMap = {
             var block = _a.block;
-            var newAligment = ResultMap[alignment][block.format.direction == 'rtl' ? 'rtl' : 'ltr'];
-            if (block.blockType === 'Table') {
+            var newAlignment = ResultMap[alignment][block.format.direction == 'rtl' ? 'rtl' : 'ltr'];
+            if (block.blockType === 'Table' && alignment !== 'justify') {
                 (0, alignTable_1.alignTable)(block, TableAlignMap[alignment][block.format.direction == 'rtl' ? 'rtl' : 'ltr']);
             }
             else if (block) {
+                if (block.blockType === 'BlockGroup' && block.blockGroupType === 'ListItem') {
+                    block.blocks.forEach(function (b) {
+                        var format = b.format;
+                        format.textAlign = newAlignment;
+                    });
+                }
                 var format = block.format;
-                format.textAlign = newAligment;
+                format.textAlign = newAlignment;
             }
@@ -50,0 +60,0 @@ });

lib-amd/modelApi/block/setModelDirection.js

@@ -22,3 +22,3 @@ define(["require", "exports", "../list/findListItemsInSameThread", "roosterjs-content-model-core"], function (require, exports, findListItemsInSameThread_1, roosterjs_content_model_core_1) {
             else if (block) {
-                internalSetDirection(block.format, direction);
+                internalSetDirection(block.format, direction, block);
             }
@@ -29,3 +29,3 @@ });
     exports.setModelDirection = setModelDirection;
-    function internalSetDirection(format, direction) {
+    function internalSetDirection(format, direction, block) {
         var wasRtl = format.direction == 'rtl';
@@ -37,3 +37,2 @@ var isRtl = direction == 'rtl';
             // TODO: make margin and padding direction-aware, like what we did for textAlign. So no need to adjust them here
-            // TODO: Do we also need to handle border here?
             var marginLeft = format.marginLeft;
@@ -45,2 +44,20 @@ var paddingLeft = format.paddingLeft;
             setProperty(format, 'paddingRight', paddingLeft);
+            // If whole Table direction changed, flip cell side borders
+            if (block && block.blockType == 'Table') {
+                block.rows.forEach(function (row) {
+                    row.cells.forEach(function (cell) {
+                        // Optimise by skipping cells with unchanged borders
+                        (0, roosterjs_content_model_core_1.updateTableCellMetadata)(cell, function (metadata) {
+                            if (metadata === null || metadata === void 0 ? void 0 : metadata.borderOverride) {
+                                var storeBorderLeft = cell.format.borderLeft;
+                                setProperty(cell.format, 'borderLeft', cell.format.borderRight);
+                                setProperty(cell.format, 'borderRight', storeBorderLeft);
+                            }
+                            return metadata;
+                        });
+                    });
+                });
+                // Apply changed borders
+                (0, roosterjs_content_model_core_1.applyTableFormat)(block, undefined /* newFormat */, true /* keepCellShade*/);
+            }
         }
@@ -47,0 +64,0 @@ }

lib-amd/modelApi/common/retrieveModelFormatState.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "roosterjs-content-model-core"], function (require, exports, roosterjs_content_model_core_1) {
+define(["require", "exports", "roosterjs-content-model-dom", "roosterjs-content-model-core"], function (require, exports, roosterjs_content_model_dom_1, roosterjs_content_model_core_1) {
     "use strict";
@@ -98,3 +98,3 @@ Object.defineProperty(exports, "__esModule", { value: true });
         mergeValue(result, 'fontName', mergedFormat.fontFamily, isFirst);
-        mergeValue(result, 'fontSize', mergedFormat.fontSize, isFirst);
+        mergeValue(result, 'fontSize', mergedFormat.fontSize, isFirst, function (val) { return (0, roosterjs_content_model_dom_1.parseValueWithUnit)(val, undefined, 'pt') + 'pt'; });
         mergeValue(result, 'backgroundColor', mergedFormat.backgroundColor, isFirst);
@@ -154,3 +154,4 @@ mergeValue(result, 'textColor', mergedFormat.textColor, isFirst);
     }
-    function mergeValue(format, key, newValue, isFirst) {
+    function mergeValue(format, key, newValue, isFirst, parseFn) {
+        if (parseFn === void 0) { parseFn = function (val) { return val; }; }
         if (isFirst) {
@@ -161,3 +162,3 @@ if (newValue !== undefined) {
         }
-        else if (newValue !== format[key]) {
+        else if (parseFn(newValue) !== parseFn(format[key])) {
             delete format[key];
@@ -164,0 +165,0 @@ }

lib-amd/publicApi/block/setAlignment.d.ts

@@ -7,2 +7,2 @@ import type { IStandaloneEditor } from 'roosterjs-content-model-types';
  */
-export default function setAlignment(editor: IStandaloneEditor, alignment: 'left' | 'center' | 'right'): void;
+export default function setAlignment(editor: IStandaloneEditor, alignment: 'left' | 'center' | 'right' | 'justify'): void;

lib-amd/publicApi/link/insertLink.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "tslib", "roosterjs-content-model-core", "roosterjs-editor-dom", "roosterjs-content-model-dom"], function (require, exports, tslib_1, roosterjs_content_model_core_1, roosterjs_editor_dom_1, roosterjs_content_model_dom_1) {
+define(["require", "exports", "tslib", "../../modelApi/selection/adjustTrailingSpaceSelection", "roosterjs-content-model-core", "roosterjs-editor-dom", "roosterjs-content-model-dom"], function (require, exports, tslib_1, adjustTrailingSpaceSelection_1, roosterjs_content_model_core_1, roosterjs_editor_dom_1, roosterjs_content_model_dom_1) {
     "use strict";
@@ -62,2 +62,3 @@ Object.defineProperty(exports, "__esModule", { value: true });
                 }
+                (0, adjustTrailingSpaceSelection_1.adjustTrailingSpaceSelection)(model);
                 return segments.length > 0;
@@ -64,0 +65,0 @@ }, {

lib-amd/publicApi/segment/toggleUnderline.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "../utils/formatSegmentWithContentModel"], function (require, exports, formatSegmentWithContentModel_1) {
+define(["require", "exports", "../../modelApi/selection/adjustTrailingSpaceSelection", "../utils/formatSegmentWithContentModel"], function (require, exports, adjustTrailingSpaceSelection_1, formatSegmentWithContentModel_1) {
     "use strict";
@@ -15,3 +15,3 @@ Object.defineProperty(exports, "__esModule", { value: true });
             }
-        }, function (format, segment) { var _a, _b; return !!format.underline || !!((_b = (_a = segment === null || segment === void 0 ? void 0 : segment.link) === null || _a === void 0 ? void 0 : _a.format) === null || _b === void 0 ? void 0 : _b.underline); });
+        }, function (format, segment) { var _a, _b; return !!format.underline || !!((_b = (_a = segment === null || segment === void 0 ? void 0 : segment.link) === null || _a === void 0 ? void 0 : _a.format) === null || _b === void 0 ? void 0 : _b.underline); }, false /*includingFormatHolder*/, adjustTrailingSpaceSelection_1.adjustTrailingSpaceSelection);
     }
@@ -18,0 +18,0 @@ exports.default = toggleUnderline;

lib-amd/publicApi/table/applyTableBorderFormat.js

@@ -53,2 +53,4 @@ define(["require", "exports", "tslib", "roosterjs-content-model-dom", "roosterjs-content-model-core"], function (require, exports, tslib_1, roosterjs_content_model_dom_1, roosterjs_content_model_core_1) {
                 }
+                // undefined is treated as Left to Right
+                var isRtl = tableModel.format.direction == 'rtl';
                 if (sel) {
@@ -86,3 +88,3 @@ var operations = [operation];
                                 for (var rowIndex = sel.firstRow; rowIndex <= sel.lastRow; rowIndex++) {
-                                    var cell = tableModel.rows[rowIndex].cells[sel.firstColumn];
+                                    var cell = tableModel.rows[rowIndex].cells[isRtl ? sel.lastColumn : sel.firstColumn];
                                     // Format cells - Left border
@@ -92,3 +94,3 @@ applyBorderFormat(cell, borderFormat, leftBorder);
                                 // Format perimeter
-                                perimeter.Left = true;
+                                isRtl ? (perimeter.Right = true) : (perimeter.Left = true);
                                 break;
@@ -98,3 +100,3 @@ case 'rightBorders':
                                 for (var rowIndex = sel.firstRow; rowIndex <= sel.lastRow; rowIndex++) {
-                                    var cell = tableModel.rows[rowIndex].cells[sel.lastColumn];
+                                    var cell = tableModel.rows[rowIndex].cells[isRtl ? sel.firstColumn : sel.lastColumn];
                                     // Format cells - Right border
@@ -104,3 +106,3 @@ applyBorderFormat(cell, borderFormat, rightBorder);
                                 // Format perimeter
-                                perimeter.Right = true;
+                                isRtl ? (perimeter.Left = true) : (perimeter.Right = true);
                                 break;
@@ -150,3 +152,3 @@ case 'topBorders':
                                 if (singleRow) {
-                                    applyBorderFormat(tableModel.rows[sel.firstRow].cells[sel.firstColumn], borderFormat, ['borderRight']);
+                                    applyBorderFormat(tableModel.rows[sel.firstRow].cells[isRtl ? sel.lastColumn : sel.firstColumn], borderFormat, ['borderRight']);
                                     for (var colIndex = sel.firstColumn + 1; colIndex <= sel.lastColumn - 1; colIndex++) {
@@ -159,3 +161,3 @@ var cell = tableModel.rows[sel.firstRow].cells[colIndex];
                                     }
-                                    applyBorderFormat(tableModel.rows[sel.firstRow].cells[sel.lastColumn], borderFormat, ['borderLeft']);
+                                    applyBorderFormat(tableModel.rows[sel.firstRow].cells[isRtl ? sel.firstColumn : sel.lastColumn], borderFormat, ['borderLeft']);
                                     break;
@@ -165,9 +167,9 @@ }
                                 // Top left cell
-                                applyBorderFormat(tableModel.rows[sel.firstRow].cells[sel.firstColumn], borderFormat, ['borderBottom', 'borderRight']);
+                                applyBorderFormat(tableModel.rows[sel.firstRow].cells[isRtl ? sel.lastColumn : sel.firstColumn], borderFormat, ['borderBottom', 'borderRight']);
                                 // Top right cell
-                                applyBorderFormat(tableModel.rows[sel.firstRow].cells[sel.lastColumn], borderFormat, ['borderBottom', 'borderLeft']);
+                                applyBorderFormat(tableModel.rows[sel.firstRow].cells[isRtl ? sel.firstColumn : sel.lastColumn], borderFormat, ['borderBottom', 'borderLeft']);
                                 // Bottom left cell
-                                applyBorderFormat(tableModel.rows[sel.lastRow].cells[sel.firstColumn], borderFormat, ['borderTop', 'borderRight']);
+                                applyBorderFormat(tableModel.rows[sel.lastRow].cells[isRtl ? sel.lastColumn : sel.firstColumn], borderFormat, ['borderTop', 'borderRight']);
                                 // Bottom right cell
-                                applyBorderFormat(tableModel.rows[sel.lastRow].cells[sel.lastColumn], borderFormat, ['borderTop', 'borderLeft']);
+                                applyBorderFormat(tableModel.rows[sel.lastRow].cells[isRtl ? sel.firstColumn : sel.lastColumn], borderFormat, ['borderTop', 'borderLeft']);
                                 // First row
@@ -197,3 +199,3 @@ for (var colIndex = sel.firstColumn + 1; colIndex < sel.lastColumn; colIndex++) {
                                         'borderBottom',
-                                        'borderRight',
+                                        isRtl ? 'borderLeft' : 'borderRight',
                                     ]);
@@ -207,3 +209,3 @@ }
                                         'borderBottom',
-                                        'borderLeft',
+                                        isRtl ? 'borderRight' : 'borderLeft',
                                     ]);
@@ -230,3 +232,3 @@ }
                     //Format perimeter if necessary or possible
-                    modifyPerimeter(tableModel, sel, borderFormat, perimeter);
+                    modifyPerimeter(tableModel, sel, borderFormat, perimeter, isRtl);
                 }
@@ -271,3 +273,3 @@ return true;
      */
-    function modifyPerimeter(tableModel, sel, borderFormat, perimeter) {
+    function modifyPerimeter(tableModel, sel, borderFormat, perimeter, isRtl) {
         // Top of selection
@@ -291,3 +293,3 @@ if (perimeter.Top && sel.firstRow - 1 >= 0) {
                 var cell = tableModel.rows[rowIndex].cells[sel.firstColumn - 1];
-                applyBorderFormat(cell, borderFormat, ['borderRight']);
+                applyBorderFormat(cell, borderFormat, [isRtl ? 'borderLeft' : 'borderRight']);
             }
@@ -299,3 +301,3 @@ }
                 var cell = tableModel.rows[rowIndex].cells[sel.lastColumn + 1];
-                applyBorderFormat(cell, borderFormat, ['borderLeft']);
+                applyBorderFormat(cell, borderFormat, [isRtl ? 'borderRight' : 'borderLeft']);
             }
@@ -302,0 +304,0 @@ }

lib-mjs/modelApi/block/setModelAlignment.d.ts

@@ -5,2 +5,2 @@ import type { ContentModelDocument } from 'roosterjs-content-model-types';
  */
-export declare function setModelAlignment(model: ContentModelDocument, alignment: 'left' | 'center' | 'right'): boolean;
+export declare function setModelAlignment(model: ContentModelDocument, alignment: 'left' | 'center' | 'right' | 'justify'): boolean;

lib-mjs/modelApi/block/setModelAlignment.js

@@ -16,2 +16,6 @@ import { alignTable } from '../table/alignTable';
     },
+    justify: {
+        ltr: 'justify',
+        rtl: 'justify',
+    },
 };
@@ -39,9 +43,15 @@ var TableAlignMap = {
         var block = _a.block;
-        var newAligment = ResultMap[alignment][block.format.direction == 'rtl' ? 'rtl' : 'ltr'];
-        if (block.blockType === 'Table') {
+        var newAlignment = ResultMap[alignment][block.format.direction == 'rtl' ? 'rtl' : 'ltr'];
+        if (block.blockType === 'Table' && alignment !== 'justify') {
             alignTable(block, TableAlignMap[alignment][block.format.direction == 'rtl' ? 'rtl' : 'ltr']);
         }
         else if (block) {
+            if (block.blockType === 'BlockGroup' && block.blockGroupType === 'ListItem') {
+                block.blocks.forEach(function (b) {
+                    var format = b.format;
+                    format.textAlign = newAlignment;
+                });
+            }
             var format = block.format;
-            format.textAlign = newAligment;
+            format.textAlign = newAlignment;
         }
@@ -48,0 +58,0 @@ });

lib-mjs/modelApi/block/setModelDirection.js

 import { findListItemsInSameThread } from '../list/findListItemsInSameThread';
-import { getOperationalBlocks, isBlockGroupOfType } from 'roosterjs-content-model-core';
+import { applyTableFormat, getOperationalBlocks, isBlockGroupOfType, updateTableCellMetadata, } from 'roosterjs-content-model-core';
 /**
@@ -20,3 +20,3 @@ * @internal
         else if (block) {
-            internalSetDirection(block.format, direction);
+            internalSetDirection(block.format, direction, block);
         }
@@ -26,3 +26,3 @@ });
 }
-function internalSetDirection(format, direction) {
+function internalSetDirection(format, direction, block) {
     var wasRtl = format.direction == 'rtl';
@@ -34,3 +34,2 @@ var isRtl = direction == 'rtl';
         // TODO: make margin and padding direction-aware, like what we did for textAlign. So no need to adjust them here
-        // TODO: Do we also need to handle border here?
         var marginLeft = format.marginLeft;
@@ -42,2 +41,20 @@ var paddingLeft = format.paddingLeft;
         setProperty(format, 'paddingRight', paddingLeft);
+        // If whole Table direction changed, flip cell side borders
+        if (block && block.blockType == 'Table') {
+            block.rows.forEach(function (row) {
+                row.cells.forEach(function (cell) {
+                    // Optimise by skipping cells with unchanged borders
+                    updateTableCellMetadata(cell, function (metadata) {
+                        if (metadata === null || metadata === void 0 ? void 0 : metadata.borderOverride) {
+                            var storeBorderLeft = cell.format.borderLeft;
+                            setProperty(cell.format, 'borderLeft', cell.format.borderRight);
+                            setProperty(cell.format, 'borderRight', storeBorderLeft);
+                        }
+                        return metadata;
+                    });
+                });
+            });
+            // Apply changed borders
+            applyTableFormat(block, undefined /* newFormat */, true /* keepCellShade*/);
+        }
     }
@@ -44,0 +61,0 @@ }

lib-mjs/modelApi/common/retrieveModelFormatState.js

@@ -0,1 +1,2 @@
+import { parseValueWithUnit } from 'roosterjs-content-model-dom';
 import { extractBorderValues, getClosestAncestorBlockGroupIndex, isBold, iterateSelections, updateTableMetadata, } from 'roosterjs-content-model-core';
@@ -94,3 +95,3 @@ /**
     mergeValue(result, 'fontName', mergedFormat.fontFamily, isFirst);
-    mergeValue(result, 'fontSize', mergedFormat.fontSize, isFirst);
+    mergeValue(result, 'fontSize', mergedFormat.fontSize, isFirst, function (val) { return parseValueWithUnit(val, undefined, 'pt') + 'pt'; });
     mergeValue(result, 'backgroundColor', mergedFormat.backgroundColor, isFirst);
@@ -150,3 +151,4 @@ mergeValue(result, 'textColor', mergedFormat.textColor, isFirst);
 }
-function mergeValue(format, key, newValue, isFirst) {
+function mergeValue(format, key, newValue, isFirst, parseFn) {
+    if (parseFn === void 0) { parseFn = function (val) { return val; }; }
     if (isFirst) {
@@ -157,3 +159,3 @@ if (newValue !== undefined) {
     }
-    else if (newValue !== format[key]) {
+    else if (parseFn(newValue) !== parseFn(format[key])) {
         delete format[key];
@@ -160,0 +162,0 @@ }

lib-mjs/publicApi/block/setAlignment.d.ts

@@ -7,2 +7,2 @@ import type { IStandaloneEditor } from 'roosterjs-content-model-types';
  */
-export default function setAlignment(editor: IStandaloneEditor, alignment: 'left' | 'center' | 'right'): void;
+export default function setAlignment(editor: IStandaloneEditor, alignment: 'left' | 'center' | 'right' | 'justify'): void;

lib-mjs/publicApi/link/insertLink.js

 import { __assign } from "tslib";
+import { adjustTrailingSpaceSelection } from '../../modelApi/selection/adjustTrailingSpaceSelection';
 import { ChangeSource, getSelectedSegments, mergeModel } from 'roosterjs-content-model-core';
@@ -63,2 +64,3 @@ import { HtmlSanitizer, matchLink } from 'roosterjs-editor-dom';
             }
+            adjustTrailingSpaceSelection(model);
             return segments.length > 0;
@@ -65,0 +67,0 @@ }, {

lib-mjs/publicApi/segment/toggleUnderline.js

@@ -0,1 +1,2 @@
+import { adjustTrailingSpaceSelection } from '../../modelApi/selection/adjustTrailingSpaceSelection';
 import { formatSegmentWithContentModel } from '../utils/formatSegmentWithContentModel';
@@ -13,4 +14,4 @@ /**
         }
-    }, function (format, segment) { var _a, _b; return !!format.underline || !!((_b = (_a = segment === null || segment === void 0 ? void 0 : segment.link) === null || _a === void 0 ? void 0 : _a.format) === null || _b === void 0 ? void 0 : _b.underline); });
+    }, function (format, segment) { var _a, _b; return !!format.underline || !!((_b = (_a = segment === null || segment === void 0 ? void 0 : segment.link) === null || _a === void 0 ? void 0 : _a.format) === null || _b === void 0 ? void 0 : _b.underline); }, false /*includingFormatHolder*/, adjustTrailingSpaceSelection);
 }
 //# sourceMappingURL=toggleUnderline.js.map

lib-mjs/publicApi/table/applyTableBorderFormat.js

@@ -53,2 +53,4 @@ import { __read } from "tslib";
             }
+            // undefined is treated as Left to Right
+            var isRtl = tableModel.format.direction == 'rtl';
             if (sel) {
@@ -86,3 +88,3 @@ var operations = [operation];
                             for (var rowIndex = sel.firstRow; rowIndex <= sel.lastRow; rowIndex++) {
-                                var cell = tableModel.rows[rowIndex].cells[sel.firstColumn];
+                                var cell = tableModel.rows[rowIndex].cells[isRtl ? sel.lastColumn : sel.firstColumn];
                                 // Format cells - Left border
@@ -92,3 +94,3 @@ applyBorderFormat(cell, borderFormat, leftBorder);
                             // Format perimeter
-                            perimeter.Left = true;
+                            isRtl ? (perimeter.Right = true) : (perimeter.Left = true);
                             break;
@@ -98,3 +100,3 @@ case 'rightBorders':
                             for (var rowIndex = sel.firstRow; rowIndex <= sel.lastRow; rowIndex++) {
-                                var cell = tableModel.rows[rowIndex].cells[sel.lastColumn];
+                                var cell = tableModel.rows[rowIndex].cells[isRtl ? sel.firstColumn : sel.lastColumn];
                                 // Format cells - Right border
@@ -104,3 +106,3 @@ applyBorderFormat(cell, borderFormat, rightBorder);
                             // Format perimeter
-                            perimeter.Right = true;
+                            isRtl ? (perimeter.Left = true) : (perimeter.Right = true);
                             break;
@@ -150,3 +152,3 @@ case 'topBorders':
                             if (singleRow) {
-                                applyBorderFormat(tableModel.rows[sel.firstRow].cells[sel.firstColumn], borderFormat, ['borderRight']);
+                                applyBorderFormat(tableModel.rows[sel.firstRow].cells[isRtl ? sel.lastColumn : sel.firstColumn], borderFormat, ['borderRight']);
                                 for (var colIndex = sel.firstColumn + 1; colIndex <= sel.lastColumn - 1; colIndex++) {
@@ -159,3 +161,3 @@ var cell = tableModel.rows[sel.firstRow].cells[colIndex];
                                 }
-                                applyBorderFormat(tableModel.rows[sel.firstRow].cells[sel.lastColumn], borderFormat, ['borderLeft']);
+                                applyBorderFormat(tableModel.rows[sel.firstRow].cells[isRtl ? sel.firstColumn : sel.lastColumn], borderFormat, ['borderLeft']);
                                 break;
@@ -165,9 +167,9 @@ }
                             // Top left cell
-                            applyBorderFormat(tableModel.rows[sel.firstRow].cells[sel.firstColumn], borderFormat, ['borderBottom', 'borderRight']);
+                            applyBorderFormat(tableModel.rows[sel.firstRow].cells[isRtl ? sel.lastColumn : sel.firstColumn], borderFormat, ['borderBottom', 'borderRight']);
                             // Top right cell
-                            applyBorderFormat(tableModel.rows[sel.firstRow].cells[sel.lastColumn], borderFormat, ['borderBottom', 'borderLeft']);
+                            applyBorderFormat(tableModel.rows[sel.firstRow].cells[isRtl ? sel.firstColumn : sel.lastColumn], borderFormat, ['borderBottom', 'borderLeft']);
                             // Bottom left cell
-                            applyBorderFormat(tableModel.rows[sel.lastRow].cells[sel.firstColumn], borderFormat, ['borderTop', 'borderRight']);
+                            applyBorderFormat(tableModel.rows[sel.lastRow].cells[isRtl ? sel.lastColumn : sel.firstColumn], borderFormat, ['borderTop', 'borderRight']);
                             // Bottom right cell
-                            applyBorderFormat(tableModel.rows[sel.lastRow].cells[sel.lastColumn], borderFormat, ['borderTop', 'borderLeft']);
+                            applyBorderFormat(tableModel.rows[sel.lastRow].cells[isRtl ? sel.firstColumn : sel.lastColumn], borderFormat, ['borderTop', 'borderLeft']);
                             // First row
@@ -197,3 +199,3 @@ for (var colIndex = sel.firstColumn + 1; colIndex < sel.lastColumn; colIndex++) {
                                     'borderBottom',
-                                    'borderRight',
+                                    isRtl ? 'borderLeft' : 'borderRight',
                                 ]);
@@ -207,3 +209,3 @@ }
                                     'borderBottom',
-                                    'borderLeft',
+                                    isRtl ? 'borderRight' : 'borderLeft',
                                 ]);
@@ -230,3 +232,3 @@ }
                 //Format perimeter if necessary or possible
-                modifyPerimeter(tableModel, sel, borderFormat, perimeter);
+                modifyPerimeter(tableModel, sel, borderFormat, perimeter, isRtl);
             }
@@ -270,3 +272,3 @@ return true;
  */
-function modifyPerimeter(tableModel, sel, borderFormat, perimeter) {
+function modifyPerimeter(tableModel, sel, borderFormat, perimeter, isRtl) {
     // Top of selection
@@ -290,3 +292,3 @@ if (perimeter.Top && sel.firstRow - 1 >= 0) {
             var cell = tableModel.rows[rowIndex].cells[sel.firstColumn - 1];
-            applyBorderFormat(cell, borderFormat, ['borderRight']);
+            applyBorderFormat(cell, borderFormat, [isRtl ? 'borderLeft' : 'borderRight']);
         }
@@ -298,3 +300,3 @@ }
             var cell = tableModel.rows[rowIndex].cells[sel.lastColumn + 1];
-            applyBorderFormat(cell, borderFormat, ['borderLeft']);
+            applyBorderFormat(cell, borderFormat, [isRtl ? 'borderRight' : 'borderLeft']);
         }
@@ -301,0 +303,0 @@ }

lib/modelApi/block/setModelAlignment.d.ts

@@ -5,2 +5,2 @@ import type { ContentModelDocument } from 'roosterjs-content-model-types';
  */
-export declare function setModelAlignment(model: ContentModelDocument, alignment: 'left' | 'center' | 'right'): boolean;
+export declare function setModelAlignment(model: ContentModelDocument, alignment: 'left' | 'center' | 'right' | 'justify'): boolean;

lib/modelApi/block/setModelAlignment.js

@@ -19,2 +19,6 @@ "use strict";
     },
+    justify: {
+        ltr: 'justify',
+        rtl: 'justify',
+    },
 };
@@ -42,9 +46,15 @@ var TableAlignMap = {
         var block = _a.block;
-        var newAligment = ResultMap[alignment][block.format.direction == 'rtl' ? 'rtl' : 'ltr'];
-        if (block.blockType === 'Table') {
+        var newAlignment = ResultMap[alignment][block.format.direction == 'rtl' ? 'rtl' : 'ltr'];
+        if (block.blockType === 'Table' && alignment !== 'justify') {
             (0, alignTable_1.alignTable)(block, TableAlignMap[alignment][block.format.direction == 'rtl' ? 'rtl' : 'ltr']);
         }
         else if (block) {
+            if (block.blockType === 'BlockGroup' && block.blockGroupType === 'ListItem') {
+                block.blocks.forEach(function (b) {
+                    var format = b.format;
+                    format.textAlign = newAlignment;
+                });
+            }
             var format = block.format;
-            format.textAlign = newAligment;
+            format.textAlign = newAlignment;
         }
@@ -51,0 +61,0 @@ });

lib/modelApi/block/setModelDirection.js

@@ -23,3 +23,3 @@ "use strict";
         else if (block) {
-            internalSetDirection(block.format, direction);
+            internalSetDirection(block.format, direction, block);
         }
@@ -30,3 +30,3 @@ });
 exports.setModelDirection = setModelDirection;
-function internalSetDirection(format, direction) {
+function internalSetDirection(format, direction, block) {
     var wasRtl = format.direction == 'rtl';
@@ -38,3 +38,2 @@ var isRtl = direction == 'rtl';
         // TODO: make margin and padding direction-aware, like what we did for textAlign. So no need to adjust them here
-        // TODO: Do we also need to handle border here?
         var marginLeft = format.marginLeft;
@@ -46,2 +45,20 @@ var paddingLeft = format.paddingLeft;
         setProperty(format, 'paddingRight', paddingLeft);
+        // If whole Table direction changed, flip cell side borders
+        if (block && block.blockType == 'Table') {
+            block.rows.forEach(function (row) {
+                row.cells.forEach(function (cell) {
+                    // Optimise by skipping cells with unchanged borders
+                    (0, roosterjs_content_model_core_1.updateTableCellMetadata)(cell, function (metadata) {
+                        if (metadata === null || metadata === void 0 ? void 0 : metadata.borderOverride) {
+                            var storeBorderLeft = cell.format.borderLeft;
+                            setProperty(cell.format, 'borderLeft', cell.format.borderRight);
+                            setProperty(cell.format, 'borderRight', storeBorderLeft);
+                        }
+                        return metadata;
+                    });
+                });
+            });
+            // Apply changed borders
+            (0, roosterjs_content_model_core_1.applyTableFormat)(block, undefined /* newFormat */, true /* keepCellShade*/);
+        }
     }
@@ -48,0 +65,0 @@ }

lib/modelApi/common/retrieveModelFormatState.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.retrieveModelFormatState = void 0;
+var roosterjs_content_model_dom_1 = require("roosterjs-content-model-dom");
 var roosterjs_content_model_core_1 = require("roosterjs-content-model-core");
@@ -98,3 +99,3 @@ /**
     mergeValue(result, 'fontName', mergedFormat.fontFamily, isFirst);
-    mergeValue(result, 'fontSize', mergedFormat.fontSize, isFirst);
+    mergeValue(result, 'fontSize', mergedFormat.fontSize, isFirst, function (val) { return (0, roosterjs_content_model_dom_1.parseValueWithUnit)(val, undefined, 'pt') + 'pt'; });
     mergeValue(result, 'backgroundColor', mergedFormat.backgroundColor, isFirst);
@@ -154,3 +155,4 @@ mergeValue(result, 'textColor', mergedFormat.textColor, isFirst);
 }
-function mergeValue(format, key, newValue, isFirst) {
+function mergeValue(format, key, newValue, isFirst, parseFn) {
+    if (parseFn === void 0) { parseFn = function (val) { return val; }; }
     if (isFirst) {
@@ -161,3 +163,3 @@ if (newValue !== undefined) {
     }
-    else if (newValue !== format[key]) {
+    else if (parseFn(newValue) !== parseFn(format[key])) {
         delete format[key];
@@ -164,0 +166,0 @@ }

lib/publicApi/block/setAlignment.d.ts

@@ -7,2 +7,2 @@ import type { IStandaloneEditor } from 'roosterjs-content-model-types';
  */
-export default function setAlignment(editor: IStandaloneEditor, alignment: 'left' | 'center' | 'right'): void;
+export default function setAlignment(editor: IStandaloneEditor, alignment: 'left' | 'center' | 'right' | 'justify'): void;

lib/publicApi/link/insertLink.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
+var adjustTrailingSpaceSelection_1 = require("../../modelApi/selection/adjustTrailingSpaceSelection");
 var roosterjs_content_model_core_1 = require("roosterjs-content-model-core");
@@ -65,2 +66,3 @@ var roosterjs_editor_dom_1 = require("roosterjs-editor-dom");
             }
+            (0, adjustTrailingSpaceSelection_1.adjustTrailingSpaceSelection)(model);
             return segments.length > 0;
@@ -67,0 +69,0 @@ }, {

lib/publicApi/segment/toggleUnderline.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+var adjustTrailingSpaceSelection_1 = require("../../modelApi/selection/adjustTrailingSpaceSelection");
 var formatSegmentWithContentModel_1 = require("../utils/formatSegmentWithContentModel");
@@ -15,5 +16,5 @@ /**
         }
-    }, function (format, segment) { var _a, _b; return !!format.underline || !!((_b = (_a = segment === null || segment === void 0 ? void 0 : segment.link) === null || _a === void 0 ? void 0 : _a.format) === null || _b === void 0 ? void 0 : _b.underline); });
+    }, function (format, segment) { var _a, _b; return !!format.underline || !!((_b = (_a = segment === null || segment === void 0 ? void 0 : segment.link) === null || _a === void 0 ? void 0 : _a.format) === null || _b === void 0 ? void 0 : _b.underline); }, false /*includingFormatHolder*/, adjustTrailingSpaceSelection_1.adjustTrailingSpaceSelection);
 }
 exports.default = toggleUnderline;
 //# sourceMappingURL=toggleUnderline.js.map

lib/publicApi/table/applyTableBorderFormat.js

@@ -55,2 +55,4 @@ "use strict";
             }
+            // undefined is treated as Left to Right
+            var isRtl = tableModel.format.direction == 'rtl';
             if (sel) {
@@ -88,3 +90,3 @@ var operations = [operation];
                             for (var rowIndex = sel.firstRow; rowIndex <= sel.lastRow; rowIndex++) {
-                                var cell = tableModel.rows[rowIndex].cells[sel.firstColumn];
+                                var cell = tableModel.rows[rowIndex].cells[isRtl ? sel.lastColumn : sel.firstColumn];
                                 // Format cells - Left border
@@ -94,3 +96,3 @@ applyBorderFormat(cell, borderFormat, leftBorder);
                             // Format perimeter
-                            perimeter.Left = true;
+                            isRtl ? (perimeter.Right = true) : (perimeter.Left = true);
                             break;
@@ -100,3 +102,3 @@ case 'rightBorders':
                             for (var rowIndex = sel.firstRow; rowIndex <= sel.lastRow; rowIndex++) {
-                                var cell = tableModel.rows[rowIndex].cells[sel.lastColumn];
+                                var cell = tableModel.rows[rowIndex].cells[isRtl ? sel.firstColumn : sel.lastColumn];
                                 // Format cells - Right border
@@ -106,3 +108,3 @@ applyBorderFormat(cell, borderFormat, rightBorder);
                             // Format perimeter
-                            perimeter.Right = true;
+                            isRtl ? (perimeter.Left = true) : (perimeter.Right = true);
                             break;
@@ -152,3 +154,3 @@ case 'topBorders':
                             if (singleRow) {
-                                applyBorderFormat(tableModel.rows[sel.firstRow].cells[sel.firstColumn], borderFormat, ['borderRight']);
+                                applyBorderFormat(tableModel.rows[sel.firstRow].cells[isRtl ? sel.lastColumn : sel.firstColumn], borderFormat, ['borderRight']);
                                 for (var colIndex = sel.firstColumn + 1; colIndex <= sel.lastColumn - 1; colIndex++) {
@@ -161,3 +163,3 @@ var cell = tableModel.rows[sel.firstRow].cells[colIndex];
                                 }
-                                applyBorderFormat(tableModel.rows[sel.firstRow].cells[sel.lastColumn], borderFormat, ['borderLeft']);
+                                applyBorderFormat(tableModel.rows[sel.firstRow].cells[isRtl ? sel.firstColumn : sel.lastColumn], borderFormat, ['borderLeft']);
                                 break;
@@ -167,9 +169,9 @@ }
                             // Top left cell
-                            applyBorderFormat(tableModel.rows[sel.firstRow].cells[sel.firstColumn], borderFormat, ['borderBottom', 'borderRight']);
+                            applyBorderFormat(tableModel.rows[sel.firstRow].cells[isRtl ? sel.lastColumn : sel.firstColumn], borderFormat, ['borderBottom', 'borderRight']);
                             // Top right cell
-                            applyBorderFormat(tableModel.rows[sel.firstRow].cells[sel.lastColumn], borderFormat, ['borderBottom', 'borderLeft']);
+                            applyBorderFormat(tableModel.rows[sel.firstRow].cells[isRtl ? sel.firstColumn : sel.lastColumn], borderFormat, ['borderBottom', 'borderLeft']);
                             // Bottom left cell
-                            applyBorderFormat(tableModel.rows[sel.lastRow].cells[sel.firstColumn], borderFormat, ['borderTop', 'borderRight']);
+                            applyBorderFormat(tableModel.rows[sel.lastRow].cells[isRtl ? sel.lastColumn : sel.firstColumn], borderFormat, ['borderTop', 'borderRight']);
                             // Bottom right cell
-                            applyBorderFormat(tableModel.rows[sel.lastRow].cells[sel.lastColumn], borderFormat, ['borderTop', 'borderLeft']);
+                            applyBorderFormat(tableModel.rows[sel.lastRow].cells[isRtl ? sel.firstColumn : sel.lastColumn], borderFormat, ['borderTop', 'borderLeft']);
                             // First row
@@ -199,3 +201,3 @@ for (var colIndex = sel.firstColumn + 1; colIndex < sel.lastColumn; colIndex++) {
                                     'borderBottom',
-                                    'borderRight',
+                                    isRtl ? 'borderLeft' : 'borderRight',
                                 ]);
@@ -209,3 +211,3 @@ }
                                     'borderBottom',
-                                    'borderLeft',
+                                    isRtl ? 'borderRight' : 'borderLeft',
                                 ]);
@@ -232,3 +234,3 @@ }
                 //Format perimeter if necessary or possible
-                modifyPerimeter(tableModel, sel, borderFormat, perimeter);
+                modifyPerimeter(tableModel, sel, borderFormat, perimeter, isRtl);
             }
@@ -273,3 +275,3 @@ return true;
  */
-function modifyPerimeter(tableModel, sel, borderFormat, perimeter) {
+function modifyPerimeter(tableModel, sel, borderFormat, perimeter, isRtl) {
     // Top of selection
@@ -293,3 +295,3 @@ if (perimeter.Top && sel.firstRow - 1 >= 0) {
             var cell = tableModel.rows[rowIndex].cells[sel.firstColumn - 1];
-            applyBorderFormat(cell, borderFormat, ['borderRight']);
+            applyBorderFormat(cell, borderFormat, [isRtl ? 'borderLeft' : 'borderRight']);
         }
@@ -301,3 +303,3 @@ }
             var cell = tableModel.rows[rowIndex].cells[sel.lastColumn + 1];
-            applyBorderFormat(cell, borderFormat, ['borderLeft']);
+            applyBorderFormat(cell, borderFormat, [isRtl ? 'borderRight' : 'borderLeft']);
         }
@@ -304,0 +306,0 @@ }

package.json

@@ -8,7 +8,7 @@ {
         "roosterjs-editor-dom": "^8.59.0",
-        "roosterjs-content-model-core": "^0.22.0",
-        "roosterjs-content-model-dom": "^0.22.0",
-        "roosterjs-content-model-types": "^0.22.0"
+        "roosterjs-content-model-core": "^0.23.0",
+        "roosterjs-content-model-dom": "^0.23.0",
+        "roosterjs-content-model-types": "^0.23.0"
     },
-    "version": "0.22.0",
+    "version": "0.23.0",
     "main": "./lib/index.js",
@@ -15,0 +15,0 @@ "typings": "./lib/index.d.ts",

No alert changes

Improved metrics

Total package byte prevSize

1477963

increased by3.4%

Number of package files

687

increased by1.33%

Lines of code

11972

increased by2.4%

Dependency changes

• + Addedroosterjs-content-model-core@0.23.1(transitive)

• + Addedroosterjs-content-model-dom@0.23.0(transitive)

• + Addedroosterjs-content-model-types@0.23.0(transitive)

• - Removedroosterjs-content-model-core@0.22.0(transitive)

• - Removedroosterjs-content-model-dom@0.22.0(transitive)

• - Removedroosterjs-content-model-types@0.22.0(transitive)

• Updatedroosterjs-content-model-core@^0.23.0

• Updatedroosterjs-content-model-dom@^0.23.0

• Updatedroosterjs-content-model-types@^0.23.0