@atlaskit/editor-plugin-table 2.9.1 → 2.10.1

package/dist/es2019/plugins/table/nodeviews/table.js

@@ -55,7 +55,6 @@ export default class TableView extends ReactNodeView {
     });
     _defineProperty(this, "hasHoveredRows", false);
     this.getPos = props.getPos;
-    this.tableRenderOptimization = props.tableRenderOptimization;
     this.eventDispatcher = props.eventDispatcher;
   }
   getContentDOM() {
@@ -148,34 +147,31 @@ export default class TableView extends ReactNodeView {
     });
   }
   viewShouldUpdate(nextNode) {
-    if (this.tableRenderOptimization) {
-      const {
-        hoveredRows
-      } = getPluginState(this.view.state);
-      const hoveredRowsChanged = !!(hoveredRows !== null && hoveredRows !== void 0 && hoveredRows.length) !== this.hasHoveredRows;
-      if (nextNode.attrs.isNumberColumnEnabled && hoveredRowsChanged) {
-        this.hasHoveredRows = !!(hoveredRows !== null && hoveredRows !== void 0 && hoveredRows.length);
-        return true;
-      }
-      const node = this.getNode();
-      if (typeof node.attrs !== typeof nextNode.attrs) {
-        return true;
-      }
-      const attrKeys = Object.keys(node.attrs);
-      const nextAttrKeys = Object.keys(nextNode.attrs);
-      if (attrKeys.length !== nextAttrKeys.length) {
-        return true;
-      }
-      const tableMap = TableMap.get(node);
-      const nextTableMap = TableMap.get(nextNode);
-      if (tableMap.width !== nextTableMap.width) {
-        return true;
-      }
-      return attrKeys.some(key => {
-        return node.attrs[key] !== nextNode.attrs[key];
-      });
+    const {
+      hoveredRows
+    } = getPluginState(this.view.state);
+    const hoveredRowsChanged = !!(hoveredRows !== null && hoveredRows !== void 0 && hoveredRows.length) !== this.hasHoveredRows;
+    if (nextNode.attrs.isNumberColumnEnabled && hoveredRowsChanged) {
+      this.hasHoveredRows = !!(hoveredRows !== null && hoveredRows !== void 0 && hoveredRows.length);
+      return true;
     }
-    return super.viewShouldUpdate(nextNode);
+    const node = this.getNode();
+    if (typeof node.attrs !== typeof nextNode.attrs) {
+      return true;
+    }
+    const attrKeys = Object.keys(node.attrs);
+    const nextAttrKeys = Object.keys(nextNode.attrs);
+    if (attrKeys.length !== nextAttrKeys.length) {
+      return true;
+    }
+    const tableMap = TableMap.get(node);
+    const nextTableMap = TableMap.get(nextNode);
+    if (tableMap.width !== nextTableMap.width) {
+      return true;
+    }
+    return attrKeys.some(key => {
+      return node.attrs[key] !== nextNode.attrs[key];
+    });
   }
   ignoreMutation(mutation) {
     const {
@@ -213,9 +209,6 @@ export const createTableView = (node, view, getPos, portalProviderAPI, eventDisp
   const {
     allowColumnResizing
   } = getPluginConfig(pluginConfig);
-  const {
-    tableRenderOptimization
-  } = getEditorFeatureFlags();
   const hasIntlContext = true;
   return new TableView({
     node,
@@ -225,7 +218,6 @@ export const createTableView = (node, view, getPos, portalProviderAPI, eventDisp
     eventDispatcher,
     getPos: getPos,
     options,
-    tableRenderOptimization,
     getEditorContainerWidth,
     getEditorFeatureFlags,
     hasIntlContext,

package/dist/es2019/plugins/table/nodeviews/tableCell.js

@@ -4,7 +4,7 @@ import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 const DEFAULT_COL_SPAN = 1;
 const DEFAULT_ROW_SPAN = 1;
 export default class TableCellNodeView {
-  constructor(node, view, getPos, getEditorFeatureFlags, observer) {
+  constructor(node, view, getPos, observer) {
     this.view = view;
     this.node = node;
     const {
@@ -14,12 +14,8 @@ export default class TableCellNodeView {
     this.getPos = getPos;
     this.dom = dom;
     this.contentDOM = contentDOM;
-    const {
-      mouseMoveOptimization
-    } = getEditorFeatureFlags();
-    if (mouseMoveOptimization && observer) {
+    if (observer) {
       this.contentDOM.id = uuid();
-      this.mouseMoveOptimization = mouseMoveOptimization;
       this.observer = observer;
       observer.observe(this.contentDOM);
     }
@@ -64,7 +60,7 @@ export default class TableCellNodeView {
     return didUpdate;
   }
   destroy() {
-    if (this.mouseMoveOptimization && this.observer) {
+    if (this.observer) {
       this.observer.unobserve(this.contentDOM);
     }
   }

package/dist/es2019/plugins/table/nodeviews/update-overflow-shadows.js

@@ -7,39 +7,4 @@ export const updateShadowListForStickyStyles = (heightStyle, shadows) => {
       }
     }
   });
-};
-
-/**
- * Update overflow shadows for a given wrapper & table.
- * if `overflowShadowOptimization` is enabled, this will exit early.
- */
-export const updateOverflowShadows = getEditorFeatureFlags => (wrapper, table, rightShadows, leftShadows) => {
-  var _getEditorFeatureFlag;
-  if (((_getEditorFeatureFlag = getEditorFeatureFlags()) === null || _getEditorFeatureFlag === void 0 ? void 0 : _getEditorFeatureFlag.tableOverflowShadowsOptimization) === true) {
-    return false;
-  }
-  // Right shadow
-  if (table && wrapper) {
-    const stickyRow = wrapper.querySelector('tr.sticky');
-    const stickyCell = stickyRow && stickyRow.firstElementChild;
-    if (rightShadows) {
-      const diff = table.offsetWidth - wrapper.offsetWidth;
-      for (let i = 0; i < rightShadows.length; i++) {
-        const rightShadow = rightShadows[i];
-        rightShadow.style.display = diff > 0 && diff > wrapper.scrollLeft ? 'block' : 'none';
-        if (rightShadow.classList.contains(ClassName.TABLE_STICKY_SHADOW) && stickyCell) {
-          rightShadow.style.height = `${stickyCell.clientHeight + 1}px`;
-        }
-      }
-    }
-    if (leftShadows) {
-      for (let i = 0; i < leftShadows.length; i++) {
-        const leftShadow = leftShadows[i];
-        leftShadow.style.display = wrapper.scrollLeft > 0 ? 'block' : 'none';
-        if (leftShadow.classList.contains(ClassName.TABLE_STICKY_SHADOW) && stickyCell) {
-          leftShadow.style.height = `${stickyCell.clientHeight + 1}px`;
-        }
-      }
-    }
-  }
 };

package/dist/es2019/plugins/table/pm-plugins/main.js

@@ -47,8 +47,8 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
     });
   }) : undefined;
   const tableCellNodeview = {
-    tableCell: (node, view, getPos) => new TableCellNodeView(node, view, getPos, getEditorFeatureFlags, observer),
-    tableHeader: (node, view, getPos) => new TableCellNodeView(node, view, getPos, getEditorFeatureFlags, observer)
+    tableCell: (node, view, getPos) => new TableCellNodeView(node, view, getPos, observer),
+    tableHeader: (node, view, getPos) => new TableCellNodeView(node, view, getPos, observer)
   };
 
   // Used to prevent invalid table cell spans being reported more than once per editor/document
@@ -225,7 +225,6 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
         return false;
       },
       nodeViews: {
-        //temporary flag to test tableCell optimisation
         ...tableCellNodeview,
         table: (node, view, getPos) => createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, {
           isBreakoutEnabled,
@@ -241,7 +240,7 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
         mouseover: whenTableInFocus(handleMouseOver),
         mouseleave: whenTableInFocus(handleMouseLeave),
         mouseout: whenTableInFocus(handleMouseOut),
-        mousemove: whenTableInFocus(handleMouseMove(getEditorFeatureFlags), elementContentRects),
+        mousemove: whenTableInFocus(handleMouseMove, elementContentRects),
         click: whenTableInFocus(handleClick)
       },
       handleTripleClick

package/dist/es2019/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.js

@@ -35,12 +35,11 @@ export class TableRowNodeView {
   get tree() {
     return getTree(this.dom);
   }
-  constructor(node, view, getPos, eventDispatcher, getEditorFeatureFlags) {
+  constructor(node, view, getPos, eventDispatcher) {
     // this is the sticky header table row
     _defineProperty(this, "colControlsOffset", 0);
     _defineProperty(this, "focused", false);
     _defineProperty(this, "topPosEditorElement", 0);
-    _defineProperty(this, "stickyHeadersOptimization", false);
     _defineProperty(this, "sentinels", {});
     /* external events */
     _defineProperty(this, "listening", false);
@@ -56,64 +55,9 @@ export class TableRowNodeView {
         this.headerRowMouseScrollEnd();
       }
     }, HEADER_ROW_SCROLL_THROTTLE_TIMEOUT));
-    _defineProperty(this, "onScroll", () => {
-      if (!this.tree) {
-        return;
-      }
-      this.latestDomTop = getTop(this.tree.wrapper);
-
-      // kick off rAF loop again if it hasn't already happened
-      if (!this.nextFrame) {
-        this.loop();
-      }
-    });
-    _defineProperty(this, "loop", () => {
-      this.nextFrame = window.requestAnimationFrame(() => {
-        if (this.previousDomTop === this.latestDomTop && this.previousPadding === this.padding) {
-          this.nextFrame = undefined;
-          return;
-        }
-
-        // can't store these since React might re-render at any time
-        const tree = this.tree;
-        if (!tree) {
-          this.nextFrame = undefined;
-          return;
-        }
-        this.paint(tree);
-
-        // run again on next frame
-        this.previousPadding = this.padding;
-        this.previousDomTop = this.latestDomTop;
-        this.loop();
-      });
-    });
-    _defineProperty(this, "paint", tree => {
-      const {
-        table,
-        wrapper
-      } = tree;
-
-      // If the previous refresh is less than 10ms then don't do anything.
-      // The jumpiness happen under that time and this is to avoid it.
-      const timelapse = Math.abs(performance.now() - this.lastTimePainted);
-      if (timelapse < 10) {
-        return;
-      }
-      if (this.shouldHeaderStick(tree)) {
-        this.makeHeaderRowSticky(tree);
-      } else {
-        this.makeRowHeaderNotSticky(table);
-      }
-
-      // ensure scroll positions are locked
-      this.dom.scrollLeft = wrapper.scrollLeft;
-      this.lastTimePainted = performance.now();
-    });
     /* receive external events */
     _defineProperty(this, "onTablePluginState", state => {
       const tableRef = state.tableRef;
-      let focusChanged = false;
       const tree = this.tree;
       if (!tree) {
         return;
@@ -133,9 +77,6 @@ export class TableRowNodeView {
       if (isCurrentTableSelected && !state.isHeaderRowEnabled && this.tree) {
         this.makeRowHeaderNotSticky(this.tree.table);
       }
-      if (isCurrentTableSelected !== this.focused) {
-        focusChanged = true;
-      }
       this.focused = isCurrentTableSelected;
       const {
         wrapper
@@ -159,10 +100,6 @@ export class TableRowNodeView {
 
       // run after table style changes have been committed
       setTimeout(() => {
-        // if focus changed while header is sticky - still repaint the positions will shift
-        if (!this.stickyHeadersOptimization || focusChanged && this.isSticky) {
-          this.paint(tree);
-        }
         syncStickyRowToTable(tree.table);
       }, 0);
     });
@@ -290,11 +227,6 @@ export class TableRowNodeView {
     this.eventDispatcher = eventDispatcher;
     this.dom = document.createElement('tr');
     this.contentDOM = this.dom;
-    const featureFlags = getEditorFeatureFlags();
-    const {
-      stickyHeadersOptimization
-    } = featureFlags;
-    this.stickyHeadersOptimization = !!stickyHeadersOptimization;
     this.lastTimePainted = 0;
     this.isHeaderRow = supportedHeaderRow(node);
     this.isSticky = false;
@@ -306,11 +238,7 @@ export class TableRowNodeView {
   subscribe() {
     this.editorScrollableElement = findOverflowScrollParent(this.view.dom) || window;
     if (this.editorScrollableElement) {
-      if (this.stickyHeadersOptimization) {
-        this.initObservers();
-      } else {
-        this.editorScrollableElement.addEventListener('scroll', this.onScroll);
-      }
+      this.initObservers();
       this.topPosEditorElement = getTop(this.editorScrollableElement);
     }
     this.eventDispatcher.on('widthPlugin', this.updateStickyHeaderWidth);
@@ -336,9 +264,6 @@ export class TableRowNodeView {
     if (this.resizeObserver) {
       this.resizeObserver.disconnect();
     }
-    if (this.editorScrollableElement && !this.stickyHeadersOptimization) {
-      this.editorScrollableElement.removeEventListener('scroll', this.onScroll);
-    }
     this.eventDispatcher.off('widthPlugin', this.updateStickyHeaderWidth);
     this.eventDispatcher.off(tablePluginKey.key, this.onTablePluginState);
     this.listening = false;

package/dist/es2019/plugins/table/pm-plugins/sticky-headers/plugin.js

@@ -9,7 +9,7 @@ export const createPlugin = (dispatch, eventDispatcher, initialState = () => [],
     props: {
       nodeViews: {
         tableRow: (node, view, getPos) => {
-          return new TableRowNodeView(node, view, getPos, eventDispatcher, getEditorFeatureFlags);
+          return new TableRowNodeView(node, view, getPos, eventDispatcher);
         }
       }
     }

package/dist/es2019/plugins/table/pm-plugins/table-resizing/event-handlers.js

@@ -149,7 +149,7 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
     const map = TableMap.get(table);
     const colIndex = map.colCount($cell.pos - $cell.start(-1)) + $cell.nodeAfter.attrs.colspan - 1;
     resizeColumn(resizeState, colIndex, clientX - dragging.startX, dom);
-    updateControls(getEditorFeatureFlags)(state);
+    updateControls()(state);
     updateResizeHandles(dom);
   }
   window.addEventListener('mouseup', finish);

package/dist/es2019/plugins/table/pm-plugins/table-resizing/utils/dom.js

@@ -1,11 +1,10 @@
 import { tableCellBorderWidth, tableMarginTop } from '@atlaskit/editor-common/styles';
 import { closestElement, containsClassName, parsePx } from '@atlaskit/editor-common/utils';
-import { updateOverflowShadows } from '../../../nodeviews/update-overflow-shadows';
 import { TableCssClassName as ClassName } from '../../../types';
 import { colWidthsForRow } from '../../../utils/column-controls';
 import { getRowHeights } from '../../../utils/row-controls';
 import { getPluginState as getMainPluginState } from '../../plugin-factory';
-export const updateControls = getEditorFeatureFlags => state => {
+export const updateControls = () => state => {
   const {
     tableRef
   } = getMainPluginState(state);
@@ -35,9 +34,6 @@ export const updateControls = getEditorFeatureFlags => state => {
       }
     }
   }
-  const rightShadows = wrapper.parentElement.querySelectorAll(`.${ClassName.TABLE_RIGHT_SHADOW}`);
-  const leftShadows = wrapper.parentElement.querySelectorAll(`.${ClassName.TABLE_LEFT_SHADOW}`);
-  updateOverflowShadows(getEditorFeatureFlags)(wrapper, tableRef, rightShadows, leftShadows);
 };
 export const isClickNear = (event, click) => {
   const dx = click.x - event.clientX,

package/dist/es2019/plugins/table/ui/TableFloatingControls/index.js

@@ -45,10 +45,7 @@ export default class TableFloatingControls extends Component {
     let {
       tableRef
     } = this.props;
-    const {
-      tableRenderOptimization
-    } = this.props.getEditorFeatureFlags();
-    if (tableRenderOptimization && tableRef && !this.resizeObserver && (_window = window) !== null && _window !== void 0 && _window.ResizeObserver) {
+    if (tableRef && !this.resizeObserver && (_window = window) !== null && _window !== void 0 && _window.ResizeObserver) {
       this.resizeObserver = new ResizeObserver(entries => {
         for (let entry of entries) {
           const tableHeight = entry.contentRect.height;
@@ -76,11 +73,8 @@ export default class TableFloatingControls extends Component {
       headerRowHeight,
       stickyHeader
     } = this.props;
-    const {
-      tableRenderOptimization
-    } = this.props.getEditorFeatureFlags();
-    const tableHeight = tableRenderOptimization ? (_this$state = this.state) === null || _this$state === void 0 ? void 0 : _this$state.tableHeight : this.props.tableHeight;
-    const nextTableHeight = tableRenderOptimization ? nextState === null || nextState === void 0 ? void 0 : nextState.tableHeight : nextProps.tableHeight;
+    const tableHeight = (_this$state = this.state) === null || _this$state === void 0 ? void 0 : _this$state.tableHeight;
+    const nextTableHeight = nextState === null || nextState === void 0 ? void 0 : nextState.tableHeight;
     return ordering !== nextProps.ordering || tableRef !== nextProps.tableRef || tableHeight !== nextTableHeight || tableActive !== nextProps.tableActive || isInDanger !== nextProps.isInDanger || isResizing !== nextProps.isResizing || hoveredRows !== nextProps.hoveredRows || isHeaderRowEnabled !== nextProps.isHeaderRowEnabled || isHeaderColumnEnabled !== nextProps.isHeaderColumnEnabled || isNumberColumnEnabled !== nextProps.isNumberColumnEnabled || isSelectionUpdated(selection, nextProps.selection) || headerRowHeight !== nextProps.headerRowHeight || stickyHeader !== nextProps.stickyHeader;
   }
   componentWillUnmount() {

package/dist/es2019/plugins/table/ui/common-styles.js

@@ -117,7 +117,7 @@ const tableWrapperStyles = () => {
 
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4139
 export const tableStyles = props => {
-  var _props$featureFlags, _props$featureFlags2;
+  var _props$featureFlags;
   return css`
   .${ClassName.LAYOUT_BUTTON} button {
     background: ${`var(--ds-background-neutral, ${N20A})`};
@@ -342,7 +342,7 @@ export const tableStyles = props => {
         ${"var(--ds-surface, white)"};
     }
 
-    ${(_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.stickyHeadersOptimization ? sentinelStyles : ''}
+    ${sentinelStyles}
     ${OverflowShadow(props)}
 
     .${ClassName.TABLE_STICKY} .${ClassName.TABLE_STICKY_SHADOW} {
@@ -703,7 +703,7 @@ export const tableStyles = props => {
   styles that handle this generally (in editor-common) so we can
   throw away the older table-specific styles here.
   */
-  ${props !== null && props !== void 0 && (_props$featureFlags2 = props.featureFlags) !== null && _props$featureFlags2 !== void 0 && _props$featureFlags2.restartNumberedLists ? `` : listLargeNumericMarkersOldStyles}
+  ${props !== null && props !== void 0 && (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.restartNumberedLists ? `` : listLargeNumericMarkersOldStyles}
 
   ${shadowSentinelStyles}
 `;

package/dist/es2019/plugins/table/utils/dom.js

@@ -68,22 +68,15 @@ export const isTableContainerOrWrapper = node => containsClassName(node, ClassNa
  * the same is valid to the right side.
  */
 
-export const getMousePositionHorizontalRelativeByElement = (mouseEvent, mouseMoveOptimization, elementContentRects, gapInPixels) => {
+export const getMousePositionHorizontalRelativeByElement = (mouseEvent, elementContentRects, gapInPixels) => {
   const element = mouseEvent.target;
   if (element instanceof HTMLElement) {
+    var _closestCell$id, _elementContentRects$, _elementContentRects$2;
     let width, x;
     const closestCell = element.closest(SELECTOR_TABLE_LEAFS);
-    if (mouseMoveOptimization) {
-      var _closestCell$id, _elementContentRects$, _elementContentRects$2;
-      const id = (_closestCell$id = closestCell === null || closestCell === void 0 ? void 0 : closestCell.id) !== null && _closestCell$id !== void 0 ? _closestCell$id : '';
-      width = (_elementContentRects$ = elementContentRects === null || elementContentRects === void 0 ? void 0 : (_elementContentRects$2 = elementContentRects[id]) === null || _elementContentRects$2 === void 0 ? void 0 : _elementContentRects$2.width) !== null && _elementContentRects$ !== void 0 ? _elementContentRects$ : 0;
-      x = mouseEvent.offsetX;
-    } else {
-      const elementRect = element.getBoundingClientRect();
-      width = elementRect.width;
-      const left = elementRect.left;
-      x = mouseEvent.clientX - left;
-    }
+    const id = (_closestCell$id = closestCell === null || closestCell === void 0 ? void 0 : closestCell.id) !== null && _closestCell$id !== void 0 ? _closestCell$id : '';
+    width = (_elementContentRects$ = elementContentRects === null || elementContentRects === void 0 ? void 0 : (_elementContentRects$2 = elementContentRects[id]) === null || _elementContentRects$2 === void 0 ? void 0 : _elementContentRects$2.width) !== null && _elementContentRects$ !== void 0 ? _elementContentRects$ : 0;
+    x = mouseEvent.offsetX;
     if (width <= 0) {
       return null;
     }

package/dist/esm/plugins/table/event-handlers.js

@@ -174,67 +174,63 @@ export var handleMouseLeave = function handleMouseLeave(view, event) {
   }
   return false;
 };
-export var handleMouseMove = function handleMouseMove(getEditorFeatureFlags) {
-  return function (view, event, elementContentRects) {
-    if (!(event.target instanceof HTMLElement)) {
-      return false;
-    }
-    var element = event.target;
-    if (isColumnControlsDecorations(element)) {
-      var state = view.state,
-        dispatch = view.dispatch;
-      var _getPluginState3 = getPluginState(state),
-        insertColumnButtonIndex = _getPluginState3.insertColumnButtonIndex;
-      var _getColumnOrRowIndex9 = getColumnOrRowIndex(element),
-        _getColumnOrRowIndex10 = _slicedToArray(_getColumnOrRowIndex9, 2),
-        startIndex = _getColumnOrRowIndex10[0],
-        endIndex = _getColumnOrRowIndex10[1];
-      var positionColumn = getMousePositionHorizontalRelativeByElement(event, false, elementContentRects) === 'right' ? endIndex : startIndex;
-      if (positionColumn !== insertColumnButtonIndex) {
-        return showInsertColumnButton(positionColumn)(state, dispatch);
-      }
+export var handleMouseMove = function handleMouseMove(view, event, elementContentRects) {
+  if (!(event.target instanceof HTMLElement)) {
+    return false;
+  }
+  var element = event.target;
+  if (isColumnControlsDecorations(element)) {
+    var state = view.state,
+      dispatch = view.dispatch;
+    var _getPluginState3 = getPluginState(state),
+      insertColumnButtonIndex = _getPluginState3.insertColumnButtonIndex;
+    var _getColumnOrRowIndex9 = getColumnOrRowIndex(element),
+      _getColumnOrRowIndex10 = _slicedToArray(_getColumnOrRowIndex9, 2),
+      startIndex = _getColumnOrRowIndex10[0],
+      endIndex = _getColumnOrRowIndex10[1];
+    var positionColumn = getMousePositionHorizontalRelativeByElement(event, elementContentRects) === 'right' ? endIndex : startIndex;
+    if (positionColumn !== insertColumnButtonIndex) {
+      return showInsertColumnButton(positionColumn)(state, dispatch);
     }
-    if (isRowControlsButton(element)) {
-      var _state3 = view.state,
-        _dispatch4 = view.dispatch;
-      var _getPluginState4 = getPluginState(_state3),
-        insertRowButtonIndex = _getPluginState4.insertRowButtonIndex;
-      var _getColumnOrRowIndex11 = getColumnOrRowIndex(element),
-        _getColumnOrRowIndex12 = _slicedToArray(_getColumnOrRowIndex11, 2),
-        _startIndex3 = _getColumnOrRowIndex12[0],
-        _endIndex2 = _getColumnOrRowIndex12[1];
-      var positionRow = getMousePositionVerticalRelativeByElement(event) === 'bottom' ? _endIndex2 : _startIndex3;
-      if (positionRow !== insertRowButtonIndex) {
-        return showInsertRowButton(positionRow)(_state3, _dispatch4);
-      }
+  }
+  if (isRowControlsButton(element)) {
+    var _state3 = view.state,
+      _dispatch4 = view.dispatch;
+    var _getPluginState4 = getPluginState(_state3),
+      insertRowButtonIndex = _getPluginState4.insertRowButtonIndex;
+    var _getColumnOrRowIndex11 = getColumnOrRowIndex(element),
+      _getColumnOrRowIndex12 = _slicedToArray(_getColumnOrRowIndex11, 2),
+      _startIndex3 = _getColumnOrRowIndex12[0],
+      _endIndex2 = _getColumnOrRowIndex12[1];
+    var positionRow = getMousePositionVerticalRelativeByElement(event) === 'bottom' ? _endIndex2 : _startIndex3;
+    if (positionRow !== insertRowButtonIndex) {
+      return showInsertRowButton(positionRow)(_state3, _dispatch4);
     }
-    var _getEditorFeatureFlag = getEditorFeatureFlags(),
-      mouseMoveOptimization = _getEditorFeatureFlag.mouseMoveOptimization;
-    if (!isResizeHandleDecoration(element) && isCell(element)) {
-      var _positionColumn = getMousePositionHorizontalRelativeByElement(event, mouseMoveOptimization, elementContentRects, RESIZE_HANDLE_AREA_DECORATION_GAP);
-      if (_positionColumn !== null) {
-        var _state4 = view.state,
-          _dispatch5 = view.dispatch;
-        var _getPluginState5 = getPluginState(_state4),
-          resizeHandleColumnIndex = _getPluginState5.resizeHandleColumnIndex,
-          resizeHandleRowIndex = _getPluginState5.resizeHandleRowIndex;
-        var tableCell = closestElement(element, 'td, th');
-        var cellStartPosition = view.posAtDOM(tableCell, 0);
-        var rect = findCellRectClosestToPos(_state4.doc.resolve(cellStartPosition));
-        if (rect) {
-          var columnEndIndexTarget = _positionColumn === 'left' ? rect.left : rect.right;
-          var rowIndexTarget = rect.top;
-          if (columnEndIndexTarget !== resizeHandleColumnIndex || rowIndexTarget !== resizeHandleRowIndex || !hasResizeHandler({
-            target: element,
-            columnEndIndexTarget: columnEndIndexTarget
-          })) {
-            return addResizeHandleDecorations(rowIndexTarget, columnEndIndexTarget)(_state4, _dispatch5);
-          }
+  }
+  if (!isResizeHandleDecoration(element) && isCell(element)) {
+    var _positionColumn = getMousePositionHorizontalRelativeByElement(event, elementContentRects, RESIZE_HANDLE_AREA_DECORATION_GAP);
+    if (_positionColumn !== null) {
+      var _state4 = view.state,
+        _dispatch5 = view.dispatch;
+      var _getPluginState5 = getPluginState(_state4),
+        resizeHandleColumnIndex = _getPluginState5.resizeHandleColumnIndex,
+        resizeHandleRowIndex = _getPluginState5.resizeHandleRowIndex;
+      var tableCell = closestElement(element, 'td, th');
+      var cellStartPosition = view.posAtDOM(tableCell, 0);
+      var rect = findCellRectClosestToPos(_state4.doc.resolve(cellStartPosition));
+      if (rect) {
+        var columnEndIndexTarget = _positionColumn === 'left' ? rect.left : rect.right;
+        var rowIndexTarget = rect.top;
+        if (columnEndIndexTarget !== resizeHandleColumnIndex || rowIndexTarget !== resizeHandleRowIndex || !hasResizeHandler({
+          target: element,
+          columnEndIndexTarget: columnEndIndexTarget
+        })) {
+          return addResizeHandleDecorations(rowIndexTarget, columnEndIndexTarget)(_state4, _dispatch5);
         }
       }
     }
-    return false;
-  };
+  }
+  return false;
 };
 export function handleTripleClick(view, pos) {
   var state = view.state,