roosterjs 8.17.0 → 8.18.0

package/dist/rooster-amd.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for roosterjs (Version 8.17.0)
+// Type definitions for roosterjs (Version 8.18.0)
 // Generated by dts tool from roosterjs
 // Project: https://github.com/Microsoft/roosterjs
 
@@ -733,7 +733,11 @@ export const enum ExperimentalFeatures {
     /**
      * Align table elements to left, center and right using setAlignment API
      */
-    TableAlignment = "TableAlignment"
+    TableAlignment = "TableAlignment",
+    /**
+     * Provide additional Tab Key Features. Requires Text Features Content Editable Features
+     */
+    TabKeyTextFeatures = "TabKeyTextFeatures"
 }
 
 /**
@@ -1773,6 +1777,14 @@ export interface Entity {
  * The format state
  */
 export interface FormatState extends PendableFormatState, ElementBasedFormatState, StyleBasedFormatState, EditorUndoState  {
+    /**
+     * Whether editor is in dark mode
+     */
+    isDarkMode?: boolean;
+    /**
+     * Current zoom scale of editor
+     */
+    zoomScale?: number;
 }
 
 /**
@@ -1837,6 +1849,10 @@ export interface ElementBasedFormatState {
      * Header level (0-6, 0 means no header)
      */
     headerLevel?: number;
+    /**
+     * Whether the cursor is in table
+     */
+    isInTable?: boolean;
 }
 
 /**
@@ -2325,6 +2341,10 @@ export interface TableFormat {
      * Table Borders Type
      */
     tableBorderFormat?: TableBorderFormat;
+    /**
+     * If true, the new format will not overlay cells that has color applied
+     */
+    keepCellShade?: boolean;
 }
 
 /**
@@ -3796,6 +3816,27 @@ export interface TableFeatureSettings {
     upDownInTable: boolean;
 }
 
+/**
+ * Settings for text features
+ */
+export interface TextFeatureSettings {
+    /**
+     * Requires @see ExperimentalFeatures.TabKeyTextFeatures to be enabled
+     * When press Tab:
+     *      If Whole Paragraph selected, indent paragraph,
+     *      If range is collapsed, add spaces
+     *      If range is not collapsed but not all the paragraph is selected, remove selection and add
+     *          spaces
+     */
+    indentWhenTabText: boolean;
+    /**
+     * Requires @see ExperimentalFeatures.TabKeyTextFeatures to be enabled
+     * When press Tab:
+     *      If Whole Paragraph selected, outdent paragraph
+     */
+    outdentWhenTabText: boolean;
+}
+
 /**
  * An interface to define a replacement rule for CustomReplace plugin
  */
@@ -5076,8 +5117,10 @@ export function getInnerHTML(node: HTMLElement | DocumentFragment): string;
  * @param color The color to set, it can be a string of color name/value or a ModeIndependentColor object
  * @param isBackgroundColor Whether set background color or text color
  * @param isDarkMode Whether current mode is dark mode. @default false
+ * @param shouldAdaptTheFontColor Whether the font color needs to be adapted to be visible in a dark or bright background color. @default false
+ * @param defaultFontColor Set the default colors that needs to be set to the to be visible.
  */
-export function setColor(element: HTMLElement, color: string | ModeIndependentColor, isBackgroundColor: boolean, isDarkMode?: boolean): void;
+export function setColor(element: HTMLElement, color: string | ModeIndependentColor, isBackgroundColor: boolean, isDarkMode?: boolean, shouldAdaptTheFontColor?: boolean): void;
 
 /**
  * A wrapper function of Element.matches
@@ -5268,7 +5311,7 @@ export class VTable {
  * the writeBack() function will handle everything related to DOM change
  */
 export class VList {
-    private rootList;
+    rootList: HTMLOListElement | HTMLUListElement;
     readonly items: VListItem[];
     /**
      * Create a new instance of VList class
@@ -5336,6 +5379,16 @@ export class VList {
      * @param list The vList to merge from
      */
     mergeVList(list: VList): void;
+    /**
+     * Get the index of the List Item in the current List
+     * @param input List item to find in the root list
+     */
+    getListItemIndex(input: Node): number;
+    /**
+     * Get the Start property of the root list of this VList
+     * @returns Start number of the list
+     */
+    getStart(): number | undefined;
     private findListItems;
     private populateItems;
 }

package/dist/rooster-amd.js

@@ -2761,6 +2761,7 @@ function getElementBasedFormatState(editor, event) {
         canUnlink: !!editor.queryElements('a[href]', 1 /* OnSelection */)[0],
         canAddImageAltText: !!editor.queryElements('img', 1 /* OnSelection */)[0],
         isBlockQuote: !!editor.queryElements('blockquote', 1 /* OnSelection */)[0],
+        isInTable: !!editor.queryElements('table', 1 /* OnSelection */)[0],
     };
 }
 exports.getElementBasedFormatState = getElementBasedFormatState;
@@ -2775,7 +2776,7 @@ exports.getElementBasedFormatState = getElementBasedFormatState;
  * @returns The format state at cursor
  */
 function getFormatState(editor, event) {
-    return __assign(__assign(__assign(__assign({}, editor.getPendableFormatState(false /* forceGetStateFromDom */)), getElementBasedFormatState(editor, event)), editor.getStyleBasedFormatState()), editor.getUndoState());
+    return __assign(__assign(__assign(__assign(__assign({}, editor.getPendableFormatState(false /* forceGetStateFromDom */)), getElementBasedFormatState(editor, event)), editor.getStyleBasedFormatState()), editor.getUndoState()), { isDarkMode: editor.isDarkMode(), zoomScale: editor.getZoomScale() });
 }
 exports.default = getFormatState;
 
@@ -3287,18 +3288,28 @@ var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./
 function setIndentation(editor, indentation) {
     var handler = indentation == 0 /* Increase */ ? indent : outdent;
     (0, blockFormat_1.default)(editor, function (region, start, end) {
+        var _a;
         var blocks = (0, roosterjs_editor_dom_1.getSelectedBlockElementsInRegion)(region, true /*createBlockIfEmpty*/);
         var blockGroups = [[]];
         for (var i = 0; i < blocks.length; i++) {
             var startNode = blocks[i].getStartNode();
             var vList = (0, roosterjs_editor_dom_1.createVListFromRegion)(region, true /*includeSiblingLists*/, startNode);
             if (vList) {
-                blockGroups.push([]);
                 while (blocks[i + 1] && vList.contains(blocks[i + 1].getStartNode())) {
                     i++;
                 }
-                vList.setIndentation(start, end, indentation);
-                vList.writeBack();
+                if (((_a = vList.items[0]) === null || _a === void 0 ? void 0 : _a.getNode()) == startNode &&
+                    vList.getListItemIndex(startNode) == vList.getStart() &&
+                    (indentation == 0 /* Increase */ ||
+                        editor.getElementAtCursor('blockquote', startNode))) {
+                    var block = editor.getBlockElementAtNode(vList.rootList);
+                    blockGroups.push([block]);
+                }
+                else {
+                    vList.setIndentation(start, end, indentation);
+                    vList.writeBack();
+                    blockGroups.push([]);
+                }
             }
             else {
                 blockGroups[blockGroups.length - 1].push(blocks[i]);
@@ -3873,7 +3884,7 @@ function applyCellShading(editor, color) {
         var regions = editor.getSelectedRegions();
         regions.forEach(function (region) {
             if ((0, roosterjs_editor_dom_1.safeInstanceOf)(region.rootNode, 'HTMLTableCellElement')) {
-                (0, roosterjs_editor_dom_1.setColor)(region.rootNode, color, true /* isBackgroundColor */, editor.isDarkMode());
+                (0, roosterjs_editor_dom_1.setColor)(region.rootNode, color, true /* isBackgroundColor */, editor.isDarkMode(), true /** shouldAdaptFontColor */);
                 region.rootNode.dataset[CELL_SHADE] = 'true';
                 region.rootNode.dataset[TEMP_BACKGROUND_COLOR] =
                     region.rootNode.style.backgroundColor;
@@ -5514,7 +5525,7 @@ var STYLE_ID = 'tableStyle';
  */
 var selectTable = function (core, table, coordinates) {
     unselect(core);
-    if (coordinates && table) {
+    if (areValidCoordinates(coordinates) && table) {
         ensureUniqueId(table, TABLE_ID);
         ensureUniqueId(core.contentDiv, CONTENT_DIV_ID);
         var ranges = select(core, table, coordinates);
@@ -5666,6 +5677,21 @@ function removeImportant(cell) {
         }
     }
 }
+function areValidCoordinates(input) {
+    if (input) {
+        var _a = input || {}, firstCell = _a.firstCell, lastCell = _a.lastCell;
+        if (firstCell && lastCell) {
+            var handler = function (coordinate) {
+                return isValidCoordinate(coordinate.x) && isValidCoordinate(coordinate.y);
+            };
+            return handler(firstCell) && handler(lastCell);
+        }
+    }
+    return false;
+}
+function isValidCoordinate(input) {
+    return (!!input || input == 0) && input > -1;
+}
 
 
 /***/ }),
@@ -5971,7 +5997,7 @@ var CopyPastePlugin = /** @class */ (function () {
                     return _this.getTempDiv();
                 },
                 removeTempDiv: function (div) {
-                    _this.cleanUpAndRestoreSelection(div, range);
+                    _this.cleanUpAndRestoreSelection(div, range, false /* isCopy */);
                 },
             });
         };
@@ -6030,7 +6056,7 @@ var CopyPastePlugin = /** @class */ (function () {
                 isCut: isCut,
             });
             this.editor.runAsync(function (editor) {
-                _this.cleanUpAndRestoreSelection(tempDiv_1, originalRange_1);
+                _this.cleanUpAndRestoreSelection(tempDiv_1, originalRange_1, !isCut /* isCopy */);
                 if (isCut) {
                     editor.addUndoSnapshot(function () {
                         var position = _this.editor.deleteSelectedContent();
@@ -6058,8 +6084,8 @@ var CopyPastePlugin = /** @class */ (function () {
         div.focus();
         return div;
     };
-    CopyPastePlugin.prototype.cleanUpAndRestoreSelection = function (tempDiv, range) {
-        if (roosterjs_editor_dom_1.Browser.isAndroid) {
+    CopyPastePlugin.prototype.cleanUpAndRestoreSelection = function (tempDiv, range, isCopy) {
+        if (isCopy && roosterjs_editor_dom_1.Browser.isAndroid) {
             range.collapse();
         }
         this.editor.select(range);
@@ -11784,7 +11810,7 @@ var VList = /** @class */ (function () {
      * If there is no order list item, result will be undefined
      */
     VList.prototype.getLastItemNumber = function () {
-        var start = getStart(this.rootList);
+        var start = this.getStart();
         return start === undefined
             ? start
             : start -
@@ -11807,7 +11833,7 @@ var VList = /** @class */ (function () {
         var doc = this.rootList.ownerDocument;
         var listStack = [doc.createDocumentFragment()];
         var placeholder = doc.createTextNode('');
-        var start = getStart(this.rootList) || 1;
+        var start = this.getStart() || 1;
         var lastList;
         // Use a placeholder to hold the position since the root list may be moved into document fragment later
         this.rootList.parentNode.replaceChild(placeholder, this.rootList);
@@ -11915,6 +11941,34 @@ var VList = /** @class */ (function () {
             (_a = list.rootList.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(list.rootList);
         }
     };
+    /**
+     * Get the index of the List Item in the current List
+     * @param input List item to find in the root list
+     */
+    VList.prototype.getListItemIndex = function (input) {
+        if (this.items) {
+            var listIndex = this.getStart() - 1;
+            for (var index = 0; index < this.items.length; index++) {
+                var child = this.items[index];
+                if (child.getListType() == 1 /* Ordered */ &&
+                    child.getLevel() == 1 &&
+                    !child.isDummy()) {
+                    listIndex++;
+                }
+                if (child.getNode() == input) {
+                    return listIndex;
+                }
+            }
+        }
+        return -1;
+    };
+    /**
+     * Get the Start property of the root list of this VList
+     * @returns Start number of the list
+     */
+    VList.prototype.getStart = function () {
+        return (0, safeInstanceOf_1.default)(this.rootList, 'HTMLOListElement') ? this.rootList.start : undefined;
+    };
     VList.prototype.findListItems = function (start, end, callback) {
         if (this.items.length == 0) {
             return [];
@@ -11989,9 +12043,6 @@ function moveLiToList(li) {
         (0, unwrap_1.default)(li.parentNode);
     }
 }
-function getStart(list) {
-    return (0, safeInstanceOf_1.default)(list, 'HTMLOListElement') ? list.start : undefined;
-}
 
 
 /***/ }),
@@ -14018,6 +14069,7 @@ var DEFAULT_FORMAT = {
     bgColorOdd: '#ABABAB20',
     headerRowColor: '#ABABAB',
     tableBorderFormat: 0 /* DEFAULT */,
+    keepCellShade: false,
 };
 /**
  * A virtual table class, represent an HTML table, by expand all merged cells to each separated cells
@@ -14105,7 +14157,9 @@ var VTable = /** @class */ (function () {
             return;
         }
         this.formatInfo = __assign(__assign(__assign({}, DEFAULT_FORMAT), (this.formatInfo || {})), (format || {}));
-        this.deleteCellShadeDataset(this.cells);
+        if (!this.formatInfo.keepCellShade) {
+            this.deleteCellShadeDataset(this.cells);
+        }
     };
     /**
      * Remove the cellShade dataset to apply a new style format at the cell.
@@ -14597,13 +14651,13 @@ function setCellColor(cells, format) {
             if (cell.td && !hasCellShade(cell)) {
                 if (hasBandedRows) {
                     var backgroundColor = color(index);
-                    (0, setColor_1.default)(cell.td, backgroundColor || TRANSPARENT, true /** isBackgroundColor*/);
+                    (0, setColor_1.default)(cell.td, backgroundColor || TRANSPARENT, true /** isBackgroundColor*/, true /** shouldAdaptFontColor */);
                 }
                 else if (shouldColorWholeTable) {
                     (0, setColor_1.default)(cell.td, format.bgColorOdd || TRANSPARENT, true /** isBackgroundColor*/);
                 }
                 else {
-                    (0, setColor_1.default)(cell.td, TRANSPARENT, true /** isBackgroundColor*/);
+                    (0, setColor_1.default)(cell.td, TRANSPARENT, true /** isBackgroundColor*/, true /** shouldAdaptFontColor */);
                 }
             }
         });
@@ -14613,7 +14667,7 @@ function setCellColor(cells, format) {
             row.forEach(function (cell, index) {
                 var backgroundColor = color(index);
                 if (cell.td && backgroundColor && !hasCellShade(cell)) {
-                    (0, setColor_1.default)(cell.td, backgroundColor, true /** isBackgroundColor*/);
+                    (0, setColor_1.default)(cell.td, backgroundColor, true /** isBackgroundColor*/, true /** shouldAdaptFontColor */);
                 }
             });
         });
@@ -14778,9 +14832,9 @@ function setFirstColumnFormat(cells, format) {
     cells.forEach(function (row, rowIndex) {
         row.forEach(function (cell, cellIndex) {
             if (cell.td && cellIndex === 0) {
-                if (rowIndex !== 0) {
+                if (rowIndex !== 0 && !hasCellShade(cell)) {
                     cell.td.style.borderTopColor = TRANSPARENT;
-                    (0, setColor_1.default)(cell.td, TRANSPARENT, true /** isBackgroundColor*/);
+                    (0, setColor_1.default)(cell.td, TRANSPARENT, true /** isBackgroundColor*/, true /** shouldAdaptFontColor */);
                 }
                 if (rowIndex !== cells.length - 1 && rowIndex !== 0) {
                     cell.td.style.borderBottomColor = TRANSPARENT;
@@ -14809,7 +14863,9 @@ function setHeaderRowFormat(cells, format) {
     }
     (_b = cells[0]) === null || _b === void 0 ? void 0 : _b.forEach(function (cell) {
         if (cell.td && format.headerRowColor) {
-            (0, setColor_1.default)(cell.td, format.headerRowColor, true /** isBackgroundColor*/);
+            if (!hasCellShade(cell)) {
+                (0, setColor_1.default)(cell.td, format.headerRowColor, true /** isBackgroundColor*/, true /** shouldAdaptFontColor */);
+            }
             cell.td.style.borderRightColor = format.headerRowColor;
             cell.td.style.borderLeftColor = format.headerRowColor;
             cell.td.style.borderTopColor = format.headerRowColor;
@@ -16210,14 +16266,24 @@ exports.default = safeInstanceOf;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
+var WHITE = '#ffffff';
+var GRAY = '#333333';
+var BLACK = '#000000';
+var TRANSPARENT = 'transparent';
+//Using the HSL (hue, saturation and lightness) representation for RGB color values, if the value of the lightness is less than 20, the color is dark
+var DARK_COLORS_LIGHTNESS = 20;
+//If the value of the lightness is more than 80, the color is bright
+var BRIGHT_COLORS_LIGHTNESS = 80;
 /**
  * Set text color or background color to the given element
  * @param element The element to set color to
  * @param color The color to set, it can be a string of color name/value or a ModeIndependentColor object
  * @param isBackgroundColor Whether set background color or text color
  * @param isDarkMode Whether current mode is dark mode. @default false
+ * @param shouldAdaptTheFontColor Whether the font color needs to be adapted to be visible in a dark or bright background color. @default false
+ * @param defaultFontColor Set the default colors that needs to be set to the to be visible.
  */
-function setColor(element, color, isBackgroundColor, isDarkMode) {
+function setColor(element, color, isBackgroundColor, isDarkMode, shouldAdaptTheFontColor) {
     var colorString = typeof color === 'string' ? color.trim() : '';
     var modeIndependentColor = typeof color === 'string' ? null : color;
     if (colorString || modeIndependentColor) {
@@ -16235,9 +16301,98 @@ function setColor(element, color, isBackgroundColor, isDarkMode) {
                 element.dataset[dataSetName] = modeIndependentColor.lightModeColor;
             }
         }
+        if (isBackgroundColor && shouldAdaptTheFontColor) {
+            adaptFontColorToBackgroundColor(element, isDarkMode);
+        }
     }
 }
 exports.default = setColor;
+/**
+ * Change the font color to white or some other color, so the text can be visible with a darker background
+ * @param element The element that contains text.
+ */
+function adaptFontColorToBackgroundColor(element, isDarkMode) {
+    var _a;
+    if ((_a = element.firstElementChild) === null || _a === void 0 ? void 0 : _a.hasAttribute('style')) {
+        return;
+    }
+    var backgroundColor = element.style.getPropertyValue('background-color');
+    var lightModeBackgroundColor = (isDarkMode &&
+        (element.dataset["ogsb" /* OriginalStyleBackgroundColor */] ||
+            element.dataset["ogab" /* OriginalAttributeBackgroundColor */])) ||
+        backgroundColor;
+    if (!lightModeBackgroundColor || lightModeBackgroundColor === TRANSPARENT) {
+        return;
+    }
+    var isADarkOrBrightOrNone = isADarkOrBrightColor(lightModeBackgroundColor);
+    switch (isADarkOrBrightOrNone) {
+        case 1 /* DARK */:
+            var fontForDark = {
+                lightModeColor: WHITE,
+                darkModeColor: GRAY,
+            };
+            setColor(element, fontForDark, false /*isBackground*/, isDarkMode);
+            break;
+        case 0 /* BRIGHT */:
+            var fontForLight = {
+                lightModeColor: BLACK,
+                darkModeColor: WHITE,
+            };
+            setColor(element, fontForLight, false /*isBackground*/, isDarkMode);
+            break;
+    }
+}
+function isADarkOrBrightColor(color) {
+    var lightness = calculateLightness(color);
+    if (lightness < DARK_COLORS_LIGHTNESS) {
+        return 1 /* DARK */;
+    }
+    else if (lightness > BRIGHT_COLORS_LIGHTNESS) {
+        return 0 /* BRIGHT */;
+    }
+    return 2 /* NONE */;
+}
+/**
+ * Calculate the lightness of HSL (hue, saturation and lightness) representation
+ * @param color a RBG or RGBA COLOR
+ * @returns
+ */
+function calculateLightness(color) {
+    var _a, _b;
+    var r;
+    var g;
+    var b;
+    if (color.substring(0, 1) == '#') {
+        _a = getColorsFromHEX(color), r = _a[0], g = _a[1], b = _a[2];
+    }
+    else {
+        _b = getColorsFromRGB(color), r = _b[0], g = _b[1], b = _b[2];
+    }
+    // Use the values of r,g,b to calculate the lightness in the HSl representation
+    //First calculate the fraction of the light in each color, since in css the value of r,g,b is in the interval of [0,255], we have
+    var red = r / 255;
+    var green = g / 255;
+    var blue = b / 255;
+    //Then the lightness in the HSL representation is the average between maximum fraction of r,g,b and the minimum fraction
+    return (Math.max(red, green, blue) + Math.min(red, green, blue)) * 50;
+}
+function getColorsFromHEX(color) {
+    if (color.length === 4) {
+        color = color.replace(/(.)/g, '$1$1');
+    }
+    var colors = color.replace('#', '');
+    var r = parseInt(colors.substr(0, 2), 16);
+    var g = parseInt(colors.substr(2, 2), 16);
+    var b = parseInt(colors.substr(4, 2), 16);
+    return [r, g, b];
+}
+function getColorsFromRGB(color) {
+    var colors = color.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/);
+    var r = parseInt(colors[1]);
+    var g = parseInt(colors[2]);
+    var b = parseInt(colors[3]);
+    return [r, g, b];
+}
 
 
 /***/ }),
@@ -18047,6 +18202,137 @@ exports.TableFeatures = {
 };
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-plugins/lib/plugins/ContentEdit/features/textFeatures.ts":
+/*!********************************************************************************************!*\
+  !*** ./packages/roosterjs-editor-plugins/lib/plugins/ContentEdit/features/textFeatures.ts ***!
+  \********************************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextFeatures = void 0;
+var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
+var roosterjs_editor_api_1 = __webpack_require__(/*! roosterjs-editor-api */ "./packages/roosterjs-editor-api/lib/index.ts");
+var TAB_SPACES = 6;
+/**
+ * Requires @see ExperimentalFeatures.TabKeyTextFeatures to be enabled
+ * Provides additional functionality when press Tab:
+ *      If Whole Paragraph selected, indent paragraph,
+ *      If range is collapsed, add tab spaces
+ *      If range is not collapsed but not all the paragraph is selected, replace selection with Tab spaces
+ *      If there are more than one block in the selection, indent all selection
+ */
+var IndentWhenTabText = {
+    keys: [9 /* TAB */],
+    shouldHandleEvent: function (event, editor) {
+        return editor.isFeatureEnabled("TabKeyTextFeatures" /* TabKeyTextFeatures */) &&
+            !event.rawEvent.shiftKey &&
+            !editor.getElementAtCursor('LI,TABLE', null /*startFrom*/, event);
+    },
+    handleEvent: function (event, editor) {
+        var selection = editor.getSelectionRangeEx();
+        if (selection.type == 0 /* Normal */) {
+            editor.addUndoSnapshot(function () {
+                if (selection.areAllCollapsed) {
+                    insertTab(editor, event);
+                }
+                else {
+                    var ranges = selection.ranges;
+                    var range = ranges[0];
+                    if (shouldSetIndentation(editor, range)) {
+                        (0, roosterjs_editor_api_1.setIndentation)(editor, 0 /* Increase */);
+                    }
+                    else {
+                        var tempRange = (0, roosterjs_editor_dom_1.createRange)(range.startContainer, range.startOffset);
+                        ranges.forEach(function (range) { return range.deleteContents(); });
+                        editor.select(tempRange);
+                        insertTab(editor, event);
+                    }
+                }
+            });
+            event.rawEvent.preventDefault();
+        }
+    },
+};
+/**
+ * Requires @see ExperimentalFeatures.TabKeyTextFeatures to be enabled
+ * If Whole Paragraph selected, outdent paragraph on Tab press
+ */
+var OutdentWhenTabText = {
+    keys: [9 /* TAB */],
+    shouldHandleEvent: function (event, editor) {
+        if (event.rawEvent.shiftKey &&
+            editor.isFeatureEnabled("TabKeyTextFeatures" /* TabKeyTextFeatures */)) {
+            var selection = editor.getSelectionRangeEx();
+            return (selection.type == 0 /* Normal */ &&
+                !selection.areAllCollapsed &&
+                editor.getElementAtCursor('blockquote', null, event) &&
+                !editor.getElementAtCursor('LI,TABLE', null /*startFrom*/, event) &&
+                shouldSetIndentation(editor, selection.ranges[0]));
+        }
+        return false;
+    },
+    handleEvent: function (event, editor) {
+        editor.addUndoSnapshot(function () { return (0, roosterjs_editor_api_1.setIndentation)(editor, 1 /* Decrease */); });
+        event.rawEvent.preventDefault();
+    },
+};
+/**
+ * @internal
+ */
+exports.TextFeatures = {
+    indentWhenTabText: IndentWhenTabText,
+    outdentWhenTabText: OutdentWhenTabText,
+};
+function shouldSetIndentation(editor, range) {
+    var result = false;
+    var startPosition = roosterjs_editor_dom_1.Position.getStart(range);
+    var endPosition = roosterjs_editor_dom_1.Position.getEnd(range);
+    var firstBlock = editor.getBlockElementAtNode(startPosition.node);
+    var lastBlock = editor.getBlockElementAtNode(endPosition.node);
+    if (!firstBlock.equals(lastBlock)) {
+        //If the selections has more than one block, we indent all the blocks in the selection
+        return true;
+    }
+    else {
+        //We only indent a single block if all the block is selected.
+        var blockStart = new roosterjs_editor_dom_1.Position(firstBlock.getStartNode(), 0 /* Begin */);
+        var blockEnd = new roosterjs_editor_dom_1.Position(firstBlock.getEndNode(), -1 /* End */);
+        var rangeBefore = (0, roosterjs_editor_dom_1.createRange)(blockStart, roosterjs_editor_dom_1.Position.getStart(range));
+        var rangeAfter = (0, roosterjs_editor_dom_1.createRange)(roosterjs_editor_dom_1.Position.getEnd(range), blockEnd);
+        if (!result && isRangeEmpty(rangeBefore) && isRangeEmpty(rangeAfter)) {
+            result = true;
+        }
+        return result;
+    }
+}
+function isRangeEmpty(range) {
+    return (range.toString() == '' &&
+        (0, roosterjs_editor_dom_1.queryElements)(range.commonAncestorContainer, 'img,table,ul,ol', null, 2 /* InSelection */, range).length == 0);
+}
+function insertTab(editor, event) {
+    var span = editor.getDocument().createElement('span');
+    var searcher = editor.getContentSearcherOfCursor(event);
+    var charsBefore = searcher.getSubStringBefore(Number.MAX_SAFE_INTEGER);
+    var numberOfChars = TAB_SPACES - (charsBefore.length % TAB_SPACES);
+    var textContent = '';
+    for (var index = 0; index < numberOfChars; index++) {
+        textContent += '&ensp;';
+    }
+    editor.insertNode(span);
+    editor.insertContent(textContent, {
+        position: 5 /* Range */,
+        range: (0, roosterjs_editor_dom_1.createRange)(span, 0 /* Begin */),
+        updateCursor: false,
+    });
+    editor.select((0, roosterjs_editor_dom_1.createRange)(span, -3 /* After */));
+}
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-plugins/lib/plugins/ContentEdit/getAllFeatures.ts":
@@ -18079,7 +18365,8 @@ var quoteFeatures_1 = __webpack_require__(/*! ./features/quoteFeatures */ "./pac
 var shortcutFeatures_1 = __webpack_require__(/*! ./features/shortcutFeatures */ "./packages/roosterjs-editor-plugins/lib/plugins/ContentEdit/features/shortcutFeatures.ts");
 var structuredNodeFeatures_1 = __webpack_require__(/*! ./features/structuredNodeFeatures */ "./packages/roosterjs-editor-plugins/lib/plugins/ContentEdit/features/structuredNodeFeatures.ts");
 var tableFeatures_1 = __webpack_require__(/*! ./features/tableFeatures */ "./packages/roosterjs-editor-plugins/lib/plugins/ContentEdit/features/tableFeatures.ts");
-var allFeatures = __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, listFeatures_1.ListFeatures), quoteFeatures_1.QuoteFeatures), tableFeatures_1.TableFeatures), structuredNodeFeatures_1.StructuredNodeFeatures), autoLinkFeatures_1.AutoLinkFeatures), shortcutFeatures_1.ShortcutFeatures), cursorFeatures_1.CursorFeatures), markdownFeatures_1.MarkdownFeatures), entityFeatures_1.EntityFeatures);
+var textFeatures_1 = __webpack_require__(/*! ./features/textFeatures */ "./packages/roosterjs-editor-plugins/lib/plugins/ContentEdit/features/textFeatures.ts");
+var allFeatures = __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, listFeatures_1.ListFeatures), quoteFeatures_1.QuoteFeatures), tableFeatures_1.TableFeatures), structuredNodeFeatures_1.StructuredNodeFeatures), autoLinkFeatures_1.AutoLinkFeatures), shortcutFeatures_1.ShortcutFeatures), cursorFeatures_1.CursorFeatures), markdownFeatures_1.MarkdownFeatures), entityFeatures_1.EntityFeatures), textFeatures_1.TextFeatures);
 /**
  * Get all content edit features provided by roosterjs
  */