roosterjs-content-model-plugins 9.43.0 → 9.45.0

package/lib/tableEdit/editors/TableEditor.js

@@ -1,342 +1,379 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TableEditor = void 0;
-var CellResizer_1 = require("./features/CellResizer");
-var TableInserter_1 = require("./features/TableInserter");
-var TableMover_1 = require("./features/TableMover");
-var TableResizer_1 = require("./features/TableResizer");
-var TableEditFeature_1 = require("./features/TableEditFeature");
-var roosterjs_content_model_dom_1 = require("roosterjs-content-model-dom");
-var INSERTER_HOVER_OFFSET = 6;
-var TOP_OR_SIDE;
-(function (TOP_OR_SIDE) {
-    TOP_OR_SIDE[TOP_OR_SIDE["top"] = 0] = "top";
-    TOP_OR_SIDE[TOP_OR_SIDE["side"] = 1] = "side";
-})(TOP_OR_SIDE || (TOP_OR_SIDE = {}));
-/**
- * @internal
- *
- * A table has 6 hot areas to be resized/edited (take LTR example):
- *
- *   [6]  [                ]
- *       +[      1         ]+--------------------+
- *       |[                ]|                    |
- *      [ ]               [ ]                    |
- *      [ ]               [ ]                    |
- *      [2]               [3]                    |
- *      [ ]               [ ]                    |
- *      [ ][       4       ]|                    |
- *       +------------------+--------------------+
- *       |                  |                    |
- *       |                  |                    |
- *       |                  |                    |
- *       +------------------+--------------------+
- *                                                [5]
- *
- * 1 - Hover area to show insert column button
- * 2 - Hover area to show insert row button
- * 3 - Hover area to show vertical resizing bar
- * 4 - Hover area to show horizontal resizing bar
- * 5 - Hover area to show whole table resize handle
- * 6 - Hover area to show whole table mover handle
- *
- * When set a different current table or change current TD, we need to update these areas
- */
-var TableEditor = /** @class */ (function () {
-    function TableEditor(editor, table, logicalRoot, onChanged, anchorContainer, contentDiv, onTableEditorCreated, disableFeatures) {
-        var _this = this;
-        var _a;
-        this.editor = editor;
-        this.table = table;
-        this.logicalRoot = logicalRoot;
-        this.onChanged = onChanged;
-        this.anchorContainer = anchorContainer;
-        this.contentDiv = contentDiv;
-        this.onTableEditorCreated = onTableEditorCreated;
-        this.disableFeatures = disableFeatures;
-        // 1, 2 - Insert a column or a row
-        this.horizontalInserter = null;
-        this.verticalInserter = null;
-        // 3, 4 - Resize a column or a row from a cell
-        this.horizontalResizer = null;
-        this.verticalResizer = null;
-        // 5 - Resize whole table
-        this.tableResizer = null;
-        // 6 - Move as well as select whole table
-        this.tableMover = null;
-        this.range = null;
-        this.onEditorCreated = function (featureType, element) {
-            var _a;
-            var disposer = (_a = _this.onTableEditorCreated) === null || _a === void 0 ? void 0 : _a.call(_this, featureType, element);
-            var onMouseOut = element && _this.getOnMouseOut(element);
-            if (onMouseOut) {
-                element.addEventListener('mouseout', onMouseOut);
-            }
-            return function () {
-                disposer === null || disposer === void 0 ? void 0 : disposer();
-                if (onMouseOut) {
-                    element.removeEventListener('mouseout', onMouseOut);
-                }
-            };
-        };
-        this.onFinishEditing = function () {
-            _this.editor.focus();
-            if (_this.range) {
-                _this.editor.setDOMSelection({ type: 'range', range: _this.range, isReverted: false });
-                _this.range = null;
-            }
-            _this.editor.takeSnapshot(); // Pass in an empty callback to make sure ContentChangedEvent is triggered
-            _this.onChanged();
-            _this.isCurrentlyEditing = false;
-            return false;
-        };
-        this.onStartTableResize = function () {
-            _this.isCurrentlyEditing = true;
-            _this.onStartResize();
-        };
-        this.onStartCellResize = function () {
-            _this.isCurrentlyEditing = true;
-            _this.disposeTableResizer();
-            _this.onStartResize();
-        };
-        this.onStartTableMove = function () {
-            _this.onBeforeEditTable();
-            _this.isCurrentlyEditing = true;
-            _this.disposeTableResizer();
-            _this.disposeTableInserter();
-            _this.disposeCellResizers();
-        };
-        this.onEndTableMove = function (disposeHandler) {
-            if (disposeHandler) {
-                _this.disposeTableMover();
-            }
-            return _this.onFinishEditing();
-        };
-        this.onBeforeEditTable = function () {
-            _this.editor.setLogicalRoot(_this.logicalRoot);
-        };
-        this.onAfterInsert = function () {
-            _this.disposeTableResizer();
-            _this.onFinishEditing();
-        };
-        /**
-         * Public only for testing purposes
-         * @param table the table to select
-         */
-        this.onSelect = function (table) {
-            var _a, _b;
-            _this.editor.focus();
-            if (table) {
-                var parsedTable = (0, roosterjs_content_model_dom_1.parseTableCells)(table);
-                var selection = {
-                    table: table,
-                    firstRow: 0,
-                    firstColumn: 0,
-                    lastRow: parsedTable.length - 1,
-                    lastColumn: ((_b = (_a = parsedTable[0]) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) - 1,
-                    type: 'table',
-                };
-                _this.editor.setDOMSelection(selection);
-            }
-        };
-        this.getOnMouseOut = function (feature) {
-            return function (ev) {
-                if (feature &&
-                    ev.relatedTarget != feature &&
-                    (0, roosterjs_content_model_dom_1.isNodeOfType)(_this.contentDiv, 'ELEMENT_NODE') &&
-                    (0, roosterjs_content_model_dom_1.isNodeOfType)(ev.relatedTarget, 'ELEMENT_NODE') &&
-                    !(_this.contentDiv == ev.relatedTarget) &&
-                    !_this.isEditing()) {
-                    _this.dispose();
-                }
-            };
-        };
-        this.isRTL = ((_a = editor.getDocument().defaultView) === null || _a === void 0 ? void 0 : _a.getComputedStyle(table).direction) == 'rtl';
-        this.setEditorFeatures();
-        this.isCurrentlyEditing = false;
-    }
-    TableEditor.prototype.dispose = function () {
-        this.disposeTableResizer();
-        this.disposeCellResizers();
-        this.disposeTableInserter();
-        this.disposeTableMover();
-    };
-    TableEditor.prototype.isEditing = function () {
-        return this.isCurrentlyEditing;
-    };
-    TableEditor.prototype.isOwnedElement = function (node) {
-        return [
-            this.tableResizer,
-            this.tableMover,
-            this.horizontalInserter,
-            this.verticalInserter,
-            this.horizontalResizer,
-            this.verticalResizer,
-        ]
-            .filter(function (feature) { return !!(feature === null || feature === void 0 ? void 0 : feature.div); })
-            .some(function (feature) { return (feature === null || feature === void 0 ? void 0 : feature.div) == node; });
-    };
-    /**
-     * public only for testing purposes
-     */
-    TableEditor.prototype.onMouseMove = function (x, y) {
-        var _a;
-        // Get whole table rect
-        var tableRect = (0, roosterjs_content_model_dom_1.normalizeRect)(this.table.getBoundingClientRect());
-        if (!tableRect) {
-            return;
-        }
-        // Determine if cursor is on top or side
-        var topOrSide = y <= tableRect.top + INSERTER_HOVER_OFFSET
-            ? 0 /* top */
-            : this.isRTL
-                ? x >= tableRect.right - INSERTER_HOVER_OFFSET
-                    ? 1 /* side */
-                    : undefined
-                : x <= tableRect.left + INSERTER_HOVER_OFFSET
-                    ? 1 /* side */
-                    : undefined;
-        var topOrSideBinary = topOrSide ? 1 : 0;
-        // i is row index, j is column index
-        for (var i = 0; i < this.table.rows.length; i++) {
-            var tr = this.table.rows[i];
-            var j = 0;
-            for (; j < tr.cells.length; j++) {
-                var td = tr.cells[j];
-                var tdRect = (0, roosterjs_content_model_dom_1.normalizeRect)(td.getBoundingClientRect());
-                if (!tdRect || !tableRect) {
-                    continue;
-                }
-                // Determine the cell the cursor is in range of
-                // Offset is only used for first row and column
-                var lessThanBottom = y <= tdRect.bottom;
-                var lessThanRight = this.isRTL
-                    ? x <= tdRect.right + INSERTER_HOVER_OFFSET * topOrSideBinary
-                    : x <= tdRect.right;
-                var moreThanLeft = this.isRTL
-                    ? x >= tdRect.left
-                    : x >= tdRect.left - INSERTER_HOVER_OFFSET * topOrSideBinary;
-                if (lessThanBottom && lessThanRight && moreThanLeft) {
-                    if (i === 0 && topOrSide == 0 /* top */) {
-                        var center = (tdRect.left + tdRect.right) / 2;
-                        var isOnRightHalf = this.isRTL ? x < center : x > center;
-                        !this.isFeatureDisabled('VerticalTableInserter') &&
-                            this.setInserterTd(isOnRightHalf ? td : tr.cells[j - 1], false /*isHorizontal*/);
-                    }
-                    else if (j === 0 && topOrSide == 1 /* side */) {
-                        var tdAbove = (_a = this.table.rows[i - 1]) === null || _a === void 0 ? void 0 : _a.cells[0];
-                        var tdAboveRect = tdAbove
-                            ? (0, roosterjs_content_model_dom_1.normalizeRect)(tdAbove.getBoundingClientRect())
-                            : null;
-                        var isTdNotAboveMerged = !tdAboveRect
-                            ? null
-                            : this.isRTL
-                                ? tdAboveRect.right === tdRect.right
-                                : tdAboveRect.left === tdRect.left;
-                        !this.isFeatureDisabled('HorizontalTableInserter') &&
-                            this.setInserterTd(y < (tdRect.top + tdRect.bottom) / 2 && isTdNotAboveMerged
-                                ? tdAbove
-                                : td, true /*isHorizontal*/);
-                    }
-                    else {
-                        this.setInserterTd(null);
-                    }
-                    !this.isFeatureDisabled('CellResizer') && this.setResizingTd(td);
-                    //Cell found
-                    break;
-                }
-            }
-            if (j < tr.cells.length) {
-                break;
-            }
-        }
-        // Create Mover and Resizer
-        this.setEditorFeatures();
-    };
-    TableEditor.prototype.setEditorFeatures = function () {
-        var disableSelector = this.isFeatureDisabled('TableSelector');
-        var disableMovement = this.isFeatureDisabled('TableMover');
-        if (!this.tableMover && !(disableSelector && disableMovement)) {
-            this.tableMover = (0, TableMover_1.createTableMover)(this.table, this.editor, this.isRTL, disableSelector ? function () { } : this.onSelect, this.onStartTableMove, this.onEndTableMove, this.contentDiv, this.anchorContainer, this.onEditorCreated, disableMovement);
-        }
-        if (!this.tableResizer && !this.isFeatureDisabled('TableResizer')) {
-            this.tableResizer = (0, TableResizer_1.createTableResizer)(this.table, this.editor, this.isRTL, this.onStartTableResize, this.onFinishEditing, this.contentDiv, this.anchorContainer, this.onTableEditorCreated);
-        }
-    };
-    TableEditor.prototype.setResizingTd = function (td) {
-        if (this.horizontalResizer && this.horizontalResizer.node != td) {
-            this.disposeCellResizers();
-        }
-        if (!this.horizontalResizer && td) {
-            this.horizontalResizer = (0, CellResizer_1.createCellResizer)(this.editor, td, this.table, this.isRTL, true /*isHorizontal*/, this.onStartCellResize, this.onFinishEditing, this.anchorContainer, this.onTableEditorCreated);
-            this.verticalResizer = (0, CellResizer_1.createCellResizer)(this.editor, td, this.table, this.isRTL, false /*isHorizontal*/, this.onStartCellResize, this.onFinishEditing, this.anchorContainer, this.onTableEditorCreated);
-        }
-    };
-    /**
-     * create or remove TableInserter
-     * @param td td to attach to, set this to null to remove inserters (both horizontal and vertical)
-     */
-    TableEditor.prototype.setInserterTd = function (td, isHorizontal) {
-        var inserter = isHorizontal ? this.horizontalInserter : this.verticalInserter;
-        if (td === null || (inserter && inserter.node != td)) {
-            this.disposeTableInserter();
-        }
-        if (!this.horizontalInserter && !this.verticalInserter && td) {
-            var newInserter = (0, TableInserter_1.createTableInserter)(this.editor, td, this.table, this.isRTL, !!isHorizontal, this.onBeforeEditTable, this.onAfterInsert, this.anchorContainer, this.onEditorCreated);
-            if (isHorizontal) {
-                this.horizontalInserter = newInserter;
-            }
-            else {
-                this.verticalInserter = newInserter;
-            }
-        }
-    };
-    TableEditor.prototype.disposeTableResizer = function () {
-        if (this.tableResizer) {
-            (0, TableEditFeature_1.disposeTableEditFeature)(this.tableResizer);
-            this.tableResizer = null;
-        }
-    };
-    TableEditor.prototype.disposeTableInserter = function () {
-        if (this.horizontalInserter) {
-            (0, TableEditFeature_1.disposeTableEditFeature)(this.horizontalInserter);
-            this.horizontalInserter = null;
-        }
-        if (this.verticalInserter) {
-            (0, TableEditFeature_1.disposeTableEditFeature)(this.verticalInserter);
-            this.verticalInserter = null;
-        }
-    };
-    TableEditor.prototype.disposeCellResizers = function () {
-        if (this.horizontalResizer) {
-            (0, TableEditFeature_1.disposeTableEditFeature)(this.horizontalResizer);
-            this.horizontalResizer = null;
-        }
-        if (this.verticalResizer) {
-            (0, TableEditFeature_1.disposeTableEditFeature)(this.verticalResizer);
-            this.verticalResizer = null;
-        }
-    };
-    TableEditor.prototype.disposeTableMover = function () {
-        if (this.tableMover) {
-            (0, TableEditFeature_1.disposeTableEditFeature)(this.tableMover);
-            this.tableMover = null;
-        }
-    };
-    TableEditor.prototype.onStartResize = function () {
-        this.onBeforeEditTable();
-        this.isCurrentlyEditing = true;
-        var range = this.editor.getDOMSelection();
-        if (range && range.type == 'range') {
-            this.range = range.range;
-        }
-        this.editor.takeSnapshot();
-    };
-    TableEditor.prototype.isFeatureDisabled = function (feature) {
-        var _a;
-        return (_a = this.disableFeatures) === null || _a === void 0 ? void 0 : _a.includes(feature);
-    };
-    return TableEditor;
-}());
-exports.TableEditor = TableEditor;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableEditor = void 0;
+var CellResizer_1 = require("./features/CellResizer");
+var TableInserter_1 = require("./features/TableInserter");
+var TableMover_1 = require("./features/TableMover");
+var TableResizer_1 = require("./features/TableResizer");
+var TableRowColumnSelector_1 = require("./features/TableRowColumnSelector");
+var TableEditFeature_1 = require("./features/TableEditFeature");
+var roosterjs_content_model_dom_1 = require("roosterjs-content-model-dom");
+var INSERTER_HOVER_OFFSET = 6;
+var TOP_OR_SIDE;
+(function (TOP_OR_SIDE) {
+    TOP_OR_SIDE[TOP_OR_SIDE["top"] = 0] = "top";
+    TOP_OR_SIDE[TOP_OR_SIDE["side"] = 1] = "side";
+})(TOP_OR_SIDE || (TOP_OR_SIDE = {}));
+/**
+ * @internal
+ *
+ * A table has 6 hot areas to be resized/edited (take LTR example):
+ *
+ *   [6]  [                ]
+ *       +[      1         ]+--------------------+
+ *       |[                ]|                    |
+ *      [ ]               [ ]                    |
+ *      [ ]               [ ]                    |
+ *      [2]               [3]                    |
+ *      [ ]               [ ]                    |
+ *      [ ][       4       ]|                    |
+ *       +------------------+--------------------+
+ *       |                  |                    |
+ *       |                  |                    |
+ *       |                  |                    |
+ *       +------------------+--------------------+
+ *                                                [5]
+ *
+ * 1 - Hover area to show insert column button
+ * 2 - Hover area to show insert row button
+ * 3 - Hover area to show vertical resizing bar
+ * 4 - Hover area to show horizontal resizing bar
+ * 5 - Hover area to show whole table resize handle
+ * 6 - Hover area to show whole table mover handle
+ *
+ * When set a different current table or change current TD, we need to update these areas
+ */
+var TableEditor = /** @class */ (function () {
+    function TableEditor(editor, table, logicalRoot, onChanged, anchorContainer, contentDiv, onTableEditorCreated, disableFeatures) {
+        var _this = this;
+        var _a;
+        this.editor = editor;
+        this.table = table;
+        this.logicalRoot = logicalRoot;
+        this.onChanged = onChanged;
+        this.anchorContainer = anchorContainer;
+        this.contentDiv = contentDiv;
+        this.onTableEditorCreated = onTableEditorCreated;
+        this.disableFeatures = disableFeatures;
+        // 1, 2 - Insert a column or a row
+        this.horizontalInserter = null;
+        this.verticalInserter = null;
+        // 3, 4 - Resize a column or a row from a cell
+        this.horizontalResizer = null;
+        this.verticalResizer = null;
+        // 5 - Resize whole table
+        this.tableResizer = null;
+        // 6 - Move as well as select whole table
+        this.tableMover = null;
+        // 7 - Select whole column or row
+        this.tableColumnSelector = null;
+        this.tableRowSelector = null;
+        this.range = null;
+        this.onEditorCreated = function (featureType, element) {
+            var _a;
+            var disposer = (_a = _this.onTableEditorCreated) === null || _a === void 0 ? void 0 : _a.call(_this, featureType, element);
+            var onMouseOut = element && _this.getOnMouseOut(element);
+            if (onMouseOut) {
+                element.addEventListener('mouseout', onMouseOut);
+            }
+            return function () {
+                disposer === null || disposer === void 0 ? void 0 : disposer();
+                if (onMouseOut) {
+                    element.removeEventListener('mouseout', onMouseOut);
+                }
+            };
+        };
+        this.onFinishEditing = function () {
+            _this.editor.focus();
+            if (_this.range) {
+                _this.editor.setDOMSelection({ type: 'range', range: _this.range, isReverted: false });
+                _this.range = null;
+            }
+            _this.editor.takeSnapshot(); // Pass in an empty callback to make sure ContentChangedEvent is triggered
+            _this.onChanged();
+            _this.isCurrentlyEditing = false;
+            return false;
+        };
+        this.onStartTableResize = function () {
+            _this.isCurrentlyEditing = true;
+            _this.onStartResize();
+        };
+        this.onStartCellResize = function () {
+            _this.isCurrentlyEditing = true;
+            _this.disposeTableResizer();
+            _this.onStartResize();
+        };
+        this.onStartTableMove = function () {
+            _this.onBeforeEditTable();
+            _this.isCurrentlyEditing = true;
+            _this.disposeTableResizer();
+            _this.disposeTableInserter();
+            _this.disposeCellResizers();
+            _this.disposeTableSelector();
+        };
+        this.onEndTableMove = function (disposeHandler) {
+            if (disposeHandler) {
+                _this.disposeTableMover();
+            }
+            return _this.onFinishEditing();
+        };
+        this.onBeforeEditTable = function () {
+            _this.editor.setLogicalRoot(_this.logicalRoot);
+        };
+        this.onAfterInsert = function () {
+            _this.disposeTableResizer();
+            _this.onFinishEditing();
+        };
+        /**
+         * Public only for testing purposes
+         * @param table the table to select
+         */
+        this.onSelect = function (table) {
+            var _a, _b;
+            _this.editor.focus();
+            if (table) {
+                var parsedTable = (0, roosterjs_content_model_dom_1.parseTableCells)(table);
+                var selection = {
+                    table: table,
+                    firstRow: 0,
+                    firstColumn: 0,
+                    lastRow: parsedTable.length - 1,
+                    lastColumn: ((_b = (_a = parsedTable[0]) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) - 1,
+                    type: 'table',
+                };
+                _this.editor.setDOMSelection(selection);
+            }
+        };
+        this.getOnMouseOut = function (feature) {
+            return function (ev) {
+                if (feature &&
+                    ev.relatedTarget != feature &&
+                    (0, roosterjs_content_model_dom_1.isNodeOfType)(_this.contentDiv, 'ELEMENT_NODE') &&
+                    (0, roosterjs_content_model_dom_1.isNodeOfType)(ev.relatedTarget, 'ELEMENT_NODE') &&
+                    !(_this.contentDiv == ev.relatedTarget) &&
+                    !_this.isEditing()) {
+                    _this.dispose();
+                }
+            };
+        };
+        this.isRTL = ((_a = editor.getDocument().defaultView) === null || _a === void 0 ? void 0 : _a.getComputedStyle(table).direction) == 'rtl';
+        this.setEditorFeatures();
+        this.isCurrentlyEditing = false;
+    }
+    TableEditor.prototype.dispose = function () {
+        this.disposeTableResizer();
+        this.disposeCellResizers();
+        this.disposeTableInserter();
+        this.disposeTableMover();
+        this.disposeTableSelector();
+    };
+    TableEditor.prototype.isEditing = function () {
+        return this.isCurrentlyEditing;
+    };
+    TableEditor.prototype.isOwnedElement = function (node) {
+        return [
+            this.tableResizer,
+            this.tableMover,
+            this.horizontalInserter,
+            this.verticalInserter,
+            this.horizontalResizer,
+            this.verticalResizer,
+            this.tableColumnSelector,
+            this.tableRowSelector,
+        ]
+            .filter(function (feature) { return !!(feature === null || feature === void 0 ? void 0 : feature.div); })
+            .some(function (feature) { return (feature === null || feature === void 0 ? void 0 : feature.div) == node || ((feature === null || feature === void 0 ? void 0 : feature.div) && feature.div.contains(node)); });
+    };
+    /**
+     * public only for testing purposes
+     */
+    TableEditor.prototype.onMouseMove = function (x, y) {
+        var _a;
+        // Get whole table rect
+        var tableRect = (0, roosterjs_content_model_dom_1.normalizeRect)(this.table.getBoundingClientRect());
+        if (!tableRect) {
+            return;
+        }
+        // Determine if cursor is on top or side
+        var topOrSide = y <= tableRect.top + INSERTER_HOVER_OFFSET
+            ? 0 /* top */
+            : this.isRTL
+                ? x >= tableRect.right - INSERTER_HOVER_OFFSET
+                    ? 1 /* side */
+                    : undefined
+                : x <= tableRect.left + INSERTER_HOVER_OFFSET
+                    ? 1 /* side */
+                    : undefined;
+        var topOrSideBinary = topOrSide ? 1 : 0;
+        // i is row index, j is column index
+        for (var i = 0; i < this.table.rows.length; i++) {
+            var tr = this.table.rows[i];
+            var j = 0;
+            for (; j < tr.cells.length; j++) {
+                var td = tr.cells[j];
+                var tdRect = (0, roosterjs_content_model_dom_1.normalizeRect)(td.getBoundingClientRect());
+                if (!tdRect || !tableRect) {
+                    continue;
+                }
+                // Determine the cell the cursor is in range of
+                // Offset is only used for first row and column
+                var lessThanBottom = y <= tdRect.bottom;
+                var lessThanRight = this.isRTL
+                    ? x <= tdRect.right + INSERTER_HOVER_OFFSET * topOrSideBinary
+                    : x <= tdRect.right;
+                var moreThanLeft = this.isRTL
+                    ? x >= tdRect.left
+                    : x >= tdRect.left - INSERTER_HOVER_OFFSET * topOrSideBinary;
+                if (lessThanBottom && lessThanRight && moreThanLeft) {
+                    if (i === 0 && topOrSide == 0 /* top */) {
+                        var center = (tdRect.left + tdRect.right) / 2;
+                        var isOnRightHalf = this.isRTL ? x < center : x > center;
+                        !this.isFeatureDisabled('VerticalTableInserter') &&
+                            this.setInserterTd(isOnRightHalf ? td : tr.cells[j - 1], false /*isHorizontal*/);
+                    }
+                    else if (j === 0 && topOrSide == 1 /* side */) {
+                        var tdAbove = (_a = this.table.rows[i - 1]) === null || _a === void 0 ? void 0 : _a.cells[0];
+                        var tdAboveRect = tdAbove
+                            ? (0, roosterjs_content_model_dom_1.normalizeRect)(tdAbove.getBoundingClientRect())
+                            : null;
+                        var isTdNotAboveMerged = !tdAboveRect
+                            ? null
+                            : this.isRTL
+                                ? tdAboveRect.right === tdRect.right
+                                : tdAboveRect.left === tdRect.left;
+                        !this.isFeatureDisabled('HorizontalTableInserter') &&
+                            this.setInserterTd(y < (tdRect.top + tdRect.bottom) / 2 && isTdNotAboveMerged
+                                ? tdAbove
+                                : td, true /*isHorizontal*/);
+                    }
+                    else {
+                        this.setInserterTd(null);
+                    }
+                    !this.isFeatureDisabled('CellResizer') && this.setResizingTd(td);
+                    //Cell found
+                    break;
+                }
+            }
+            if (j < tr.cells.length) {
+                break;
+            }
+        }
+        if (topOrSide == 0 /* top */) {
+            !this.isFeatureDisabled('TableColumnSelector') &&
+                this.setSelectorRowColumn(false /*isRow*/);
+        }
+        else if (topOrSide == 1 /* side */) {
+            !this.isFeatureDisabled('TableRowSelector') &&
+                this.setSelectorRowColumn(true /*isRow*/);
+        }
+        else {
+            this.setSelectorRowColumn(null);
+        }
+        // Create Mover and Resizer
+        this.setEditorFeatures();
+    };
+    TableEditor.prototype.setEditorFeatures = function () {
+        var disableSelector = this.isFeatureDisabled('TableSelector');
+        var disableMovement = this.isFeatureDisabled('TableMover');
+        if (!this.tableMover && !(disableSelector && disableMovement)) {
+            this.tableMover = (0, TableMover_1.createTableMover)(this.table, this.editor, this.isRTL, disableSelector ? function () { } : this.onSelect, this.onStartTableMove, this.onEndTableMove, this.contentDiv, this.anchorContainer, this.onEditorCreated, disableMovement);
+        }
+        if (!this.tableResizer && !this.isFeatureDisabled('TableResizer')) {
+            this.tableResizer = (0, TableResizer_1.createTableResizer)(this.table, this.editor, this.isRTL, this.onStartTableResize, this.onFinishEditing, this.contentDiv, this.anchorContainer, this.onTableEditorCreated);
+        }
+    };
+    TableEditor.prototype.setResizingTd = function (td) {
+        if (this.horizontalResizer && this.horizontalResizer.node != td) {
+            this.disposeCellResizers();
+        }
+        if (!this.horizontalResizer && td) {
+            this.horizontalResizer = (0, CellResizer_1.createCellResizer)(this.editor, td, this.table, this.isRTL, true /*isHorizontal*/, this.onStartCellResize, this.onFinishEditing, this.anchorContainer, this.onTableEditorCreated);
+            this.verticalResizer = (0, CellResizer_1.createCellResizer)(this.editor, td, this.table, this.isRTL, false /*isHorizontal*/, this.onStartCellResize, this.onFinishEditing, this.anchorContainer, this.onTableEditorCreated);
+        }
+    };
+    /**
+     * create or remove TableInserter
+     * @param td td to attach to, set this to null to remove inserters (both horizontal and vertical)
+     */
+    TableEditor.prototype.setInserterTd = function (td, isHorizontal) {
+        var inserter = isHorizontal ? this.horizontalInserter : this.verticalInserter;
+        if (td === null || (inserter && inserter.node != td)) {
+            this.disposeTableInserter();
+        }
+        if (!this.horizontalInserter && !this.verticalInserter && td) {
+            var newInserter = (0, TableInserter_1.createTableInserter)(this.editor, td, this.table, this.isRTL, !!isHorizontal, this.onBeforeEditTable, this.onAfterInsert, this.anchorContainer, this.onEditorCreated);
+            if (isHorizontal) {
+                this.horizontalInserter = newInserter;
+            }
+            else {
+                this.verticalInserter = newInserter;
+            }
+        }
+    };
+    TableEditor.prototype.setSelectorRowColumn = function (isRowSelector /*undefined means to clear both*/) {
+        if (isRowSelector !== null && !this.tableRowSelector && !this.tableColumnSelector) {
+            this.tableRowSelector = (0, TableRowColumnSelector_1.createTableRowColumnSelector)(this.editor, this.table, !!isRowSelector, this.anchorContainer, this.onEditorCreated);
+        }
+        else {
+            this.disposeTableSelector();
+        }
+    };
+    TableEditor.prototype.disposeTableResizer = function () {
+        if (this.tableResizer) {
+            (0, TableEditFeature_1.disposeTableEditFeature)(this.tableResizer);
+            this.tableResizer = null;
+        }
+    };
+    TableEditor.prototype.disposeTableInserter = function () {
+        if (this.horizontalInserter) {
+            (0, TableEditFeature_1.disposeTableEditFeature)(this.horizontalInserter);
+            this.horizontalInserter = null;
+        }
+        if (this.verticalInserter) {
+            (0, TableEditFeature_1.disposeTableEditFeature)(this.verticalInserter);
+            this.verticalInserter = null;
+        }
+    };
+    TableEditor.prototype.disposeTableSelector = function () {
+        if (this.tableColumnSelector) {
+            (0, TableEditFeature_1.disposeTableEditFeature)(this.tableColumnSelector);
+            this.tableColumnSelector = null;
+        }
+        if (this.tableRowSelector) {
+            (0, TableEditFeature_1.disposeTableEditFeature)(this.tableRowSelector);
+            this.tableRowSelector = null;
+        }
+    };
+    TableEditor.prototype.disposeCellResizers = function () {
+        if (this.horizontalResizer) {
+            (0, TableEditFeature_1.disposeTableEditFeature)(this.horizontalResizer);
+            this.horizontalResizer = null;
+        }
+        if (this.verticalResizer) {
+            (0, TableEditFeature_1.disposeTableEditFeature)(this.verticalResizer);
+            this.verticalResizer = null;
+        }
+    };
+    TableEditor.prototype.disposeTableMover = function () {
+        if (this.tableMover) {
+            (0, TableEditFeature_1.disposeTableEditFeature)(this.tableMover);
+            this.tableMover = null;
+        }
+    };
+    TableEditor.prototype.onStartResize = function () {
+        this.onBeforeEditTable();
+        this.isCurrentlyEditing = true;
+        var range = this.editor.getDOMSelection();
+        if (range && range.type == 'range') {
+            this.range = range.range;
+        }
+        this.editor.takeSnapshot();
+    };
+    TableEditor.prototype.isFeatureDisabled = function (feature) {
+        var _a;
+        return (_a = this.disableFeatures) === null || _a === void 0 ? void 0 : _a.includes(feature);
+    };
+    return TableEditor;
+}());
+exports.TableEditor = TableEditor;
 //# sourceMappingURL=TableEditor.js.map