@atlaskit/editor-plugin-table 7.5.4 → 7.5.6

package/dist/esm/event-handlers.js

@@ -1,4 +1,5 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import rafSchedule from 'raf-schd';
 import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
 import { browser, closestElement, isElementInTableCell, isLastItemMediaGroup, setNodeSelection } from '@atlaskit/editor-common/utils';
 import { Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
@@ -248,7 +249,10 @@ export var handleMouseLeave = function handleMouseLeave(view, event) {
   }
   return false;
 };
-export var handleMouseMove = function handleMouseMove(view, event, elementContentRects) {
+
+// IMPORTANT: The mouse move handler has been setup with RAF schedule to avoid Reflows which will occur as some methods
+// need to access the mouse event offset position and also the target clientWidth vallue.
+var handleMouseMoveDebounce = rafSchedule(function (view, event, offsetX) {
   if (!(event.target instanceof HTMLElement)) {
     return false;
   }
@@ -257,13 +261,12 @@ export var handleMouseMove = function handleMouseMove(view, event, elementConten
     var state = view.state,
       dispatch = view.dispatch;
     var _getPluginState6 = getPluginState(state),
-      insertColumnButtonIndex = _getPluginState6.insertColumnButtonIndex,
-      isDragAndDropEnabled = _getPluginState6.isDragAndDropEnabled;
+      insertColumnButtonIndex = _getPluginState6.insertColumnButtonIndex;
     var _getColumnOrRowIndex9 = getColumnOrRowIndex(element),
       _getColumnOrRowIndex10 = _slicedToArray(_getColumnOrRowIndex9, 2),
       startIndex = _getColumnOrRowIndex10[0],
       endIndex = _getColumnOrRowIndex10[1];
-    var positionColumn = getMousePositionHorizontalRelativeByElement(event, elementContentRects, undefined, isDragAndDropEnabled) === 'right' ? endIndex : startIndex;
+    var positionColumn = getMousePositionHorizontalRelativeByElement(event, offsetX, undefined) === 'right' ? endIndex : startIndex;
     if (positionColumn !== insertColumnButtonIndex) {
       return showInsertColumnButton(positionColumn)(state, dispatch);
     }
@@ -283,7 +286,7 @@ export var handleMouseMove = function handleMouseMove(view, event, elementConten
     }
   }
   if (!isResizeHandleDecoration(element) && isCell(element)) {
-    var _positionColumn = getMousePositionHorizontalRelativeByElement(event, elementContentRects, RESIZE_HANDLE_AREA_DECORATION_GAP);
+    var _positionColumn = getMousePositionHorizontalRelativeByElement(event, offsetX, RESIZE_HANDLE_AREA_DECORATION_GAP);
     if (_positionColumn !== null) {
       var _state4 = view.state,
         _dispatch5 = view.dispatch;
@@ -308,6 +311,19 @@ export var handleMouseMove = function handleMouseMove(view, event, elementConten
     }
   }
   return false;
+});
+export var handleMouseMove = function handleMouseMove(view, event) {
+  if (!(event.target instanceof HTMLElement)) {
+    return false;
+  }
+
+  // NOTE: When accessing offsetX in gecko from a deferred callback, it will return 0. However it will be non-zero if accessed
+  // within the scope of it's initial mouse move handler. Also Chrome does return the correct value, however it could trigger
+  // a reflow. So for now this will just grab the offsetX value immediately for gecko and chrome will calculate later
+  // in the deferred callback handler.
+  // Bug Tracking: https://bugzilla.mozilla.org/show_bug.cgi?id=1882903
+  handleMouseMoveDebounce(view, event, browser.gecko ? event.offsetX : NaN);
+  return false;
 };
 export function handleTripleClick(view, pos) {
   var state = view.state,
@@ -328,7 +344,7 @@ export function handleTripleClick(view, pos) {
   return false;
 }
 export var handleCut = function handleCut(oldTr, oldState, newState, editorAnalyticsAPI, editorView) {
-  var tablePreserveWidth = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
+  var isTableScalingEnabled = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
   var oldSelection = oldState.tr.selection;
   var tr = newState.tr;
   if (oldSelection instanceof CellSelection) {
@@ -371,7 +387,7 @@ export var handleCut = function handleCut(oldTr, oldState, newState, editorAnaly
               isHeaderRowRequired = _getPluginState9.pluginConfig.isHeaderRowRequired;
             tr = deleteRows(rect, isHeaderRowRequired)(tr);
           } else if (tr.selection.isColSelection()) {
-            tr = deleteColumns(rect, getAllowAddColumnCustomStep(oldState), editorView, tablePreserveWidth)(tr);
+            tr = deleteColumns(rect, getAllowAddColumnCustomStep(oldState), editorView, isTableScalingEnabled)(tr);
           }
         }
       }
@@ -383,12 +399,12 @@ export var isTableInFocus = function isTableInFocus(view) {
   var _getPluginState10, _getResizePluginState;
   return !!((_getPluginState10 = getPluginState(view.state)) !== null && _getPluginState10 !== void 0 && _getPluginState10.tableNode) && !((_getResizePluginState = getResizePluginState(view.state)) !== null && _getResizePluginState !== void 0 && _getResizePluginState.dragging);
 };
-export var whenTableInFocus = function whenTableInFocus(eventHandler, elementContentRects) {
+export var whenTableInFocus = function whenTableInFocus(eventHandler) {
   return function (view, mouseEvent) {
     if (!isTableInFocus(view)) {
       return false;
     }
-    return eventHandler(view, mouseEvent, elementContentRects);
+    return eventHandler(view, mouseEvent);
   };
 };
 var trackCellLocation = function trackCellLocation(view, mouseEvent) {
@@ -418,11 +434,11 @@ var trackCellLocation = function trackCellLocation(view, mouseEvent) {
   }
   hoverCell(htmlRowIndex, colIndex)(view.state, view.dispatch);
 };
-export var withCellTracking = function withCellTracking(eventHandler, elementContentRects) {
+export var withCellTracking = function withCellTracking(eventHandler) {
   return function (view, mouseEvent) {
     if (getPluginState(view.state).isDragAndDropEnabled && !getDragDropPluginState(view.state).isDragging) {
       trackCellLocation(view, mouseEvent);
     }
-    return eventHandler(view, mouseEvent, elementContentRects);
+    return eventHandler(view, mouseEvent);
   };
 };

package/dist/esm/nodeviews/OverflowShadowsObserver.js

@@ -1,6 +1,7 @@
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import rafSchedule from 'raf-schd';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { TableCssClassName as ClassName, ShadowEvent } from '../types';
 import { tableInsertColumnButtonSize } from '../ui/consts';
@@ -42,8 +43,13 @@ export var OverflowShadowsObserver = /*#__PURE__*/function () {
     });
     _defineProperty(this, "observeShadowSentinels", function (isSticky) {
       var _this$table, _this$table2;
+      if (_this.isSticky === isSticky) {
+        return;
+      }
       _this.isSticky = !!isSticky;
 
+      // reset height
+      _this.stickyRowHeight = 0;
       // update sticky shadows
       _this.updateStickyShadowsHeightIfChanged();
       _this.leftShadowSentinel = (_this$table = _this.table) === null || _this$table === void 0 ? void 0 : _this$table.querySelector(".".concat(ClassName.TABLE_SHADOW_SENTINEL_LEFT));
@@ -60,8 +66,8 @@ export var OverflowShadowsObserver = /*#__PURE__*/function () {
      * e.g. bounds on an IntersectionObserverEntry, otherwise proceed with
      * reading it from sticky cell
      */
-    _defineProperty(this, "updateStickyShadows", function (stickyRowHeight) {
-      var _this$wrapper, _this$wrapper2, _this$wrapper3;
+    _defineProperty(this, "updateStickyShadows", rafSchedule(function (stickyRowHeight) {
+      var _this$wrapper;
       if (!_this.isSticky) {
         return;
       }
@@ -69,14 +75,21 @@ export var OverflowShadowsObserver = /*#__PURE__*/function () {
       if (!stickyCell || !((_this$wrapper = _this.wrapper) !== null && _this$wrapper !== void 0 && _this$wrapper.parentElement)) {
         return;
       }
-      var heightStyleOrCompute = "".concat(stickyRowHeight || stickyCell.clientHeight + 1, "px");
-      // Use getElementsByClassName here for a live node list to capture
-      // sticky shadows
-      var liveRightShadows = (_this$wrapper2 = _this.wrapper) === null || _this$wrapper2 === void 0 || (_this$wrapper2 = _this$wrapper2.parentElement) === null || _this$wrapper2 === void 0 ? void 0 : _this$wrapper2.getElementsByClassName("".concat(ClassName.TABLE_RIGHT_SHADOW));
-      var liveLeftShadows = (_this$wrapper3 = _this.wrapper) === null || _this$wrapper3 === void 0 || (_this$wrapper3 = _this$wrapper3.parentElement) === null || _this$wrapper3 === void 0 ? void 0 : _this$wrapper3.getElementsByClassName("".concat(ClassName.TABLE_LEFT_SHADOW));
-      updateShadowListForStickyStyles(heightStyleOrCompute, liveLeftShadows);
-      updateShadowListForStickyStyles(heightStyleOrCompute, liveRightShadows);
-    });
+
+      // Reflow Warning! - stickyCell.clientHeight
+      var newStickyRowHeight = stickyRowHeight || stickyCell.clientHeight + 1;
+      if (newStickyRowHeight !== _this.stickyRowHeight) {
+        var _this$wrapper2, _this$wrapper3;
+        _this.stickyRowHeight = newStickyRowHeight;
+        var heightStyleOrCompute = "".concat(newStickyRowHeight, "px");
+        // Use getElementsByClassName here for a live node list to capture
+        // sticky shadows
+        var liveRightShadows = (_this$wrapper2 = _this.wrapper) === null || _this$wrapper2 === void 0 || (_this$wrapper2 = _this$wrapper2.parentElement) === null || _this$wrapper2 === void 0 ? void 0 : _this$wrapper2.getElementsByClassName("".concat(ClassName.TABLE_RIGHT_SHADOW));
+        var liveLeftShadows = (_this$wrapper3 = _this.wrapper) === null || _this$wrapper3 === void 0 || (_this$wrapper3 = _this$wrapper3.parentElement) === null || _this$wrapper3 === void 0 ? void 0 : _this$wrapper3.getElementsByClassName("".concat(ClassName.TABLE_LEFT_SHADOW));
+        updateShadowListForStickyStyles(heightStyleOrCompute, liveLeftShadows);
+        updateShadowListForStickyStyles(heightStyleOrCompute, liveRightShadows);
+      }
+    }));
     this.updateShadowState = updateShadowState;
     this.table = _table;
     this.wrapper = wrapper;
@@ -92,11 +105,7 @@ export var OverflowShadowsObserver = /*#__PURE__*/function () {
       if (!stickyCell) {
         return;
       }
-      var newStickyRowHeight = stickyCell.clientHeight + 1;
-      if (newStickyRowHeight === this.stickyRowHeight) {
-        this.stickyRowHeight = newStickyRowHeight;
-        this.updateStickyShadows(this.stickyRowHeight);
-      }
+      this.updateStickyShadows();
     }
   }, {
     key: "getStickyCell",

package/dist/esm/nodeviews/TableCell.js

@@ -6,35 +6,17 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-import uuid from 'uuid';
 import { getCellAttrs, getCellDomAttrs } from '@atlaskit/adf-schema';
-import { getPluginState } from '../pm-plugins/plugin-factory';
 import TableNodeView from './TableNodeViewBase';
 var DEFAULT_COL_SPAN = 1;
 var DEFAULT_ROW_SPAN = 1;
 var TableCell = /*#__PURE__*/function (_ref) {
   _inherits(TableCell, _ref);
   var _super = _createSuper(TableCell);
-  function TableCell(node, view, getPos, eventDispatcher, observer) {
-    var _this;
+  function TableCell(node, view, getPos, eventDispatcher) {
     _classCallCheck(this, TableCell);
-    _this = _super.call(this, node, view, getPos, eventDispatcher);
-    _this.observer = observer;
-    var _getPluginState = getPluginState(view.state),
-      pluginConfig = _getPluginState.pluginConfig,
-      isDragAndDropEnabled = _getPluginState.isDragAndDropEnabled;
-    _this.isStickyHeaderEnabled = !!pluginConfig.stickyHeaders;
-    _this.isDragAndDropEnabled = !!isDragAndDropEnabled;
-    if (observer) {
-      _this.contentDOM.id = uuid();
-      observer.observe(_this.contentDOM);
-    }
-    return _this;
+    return _super.call(this, node, view, getPos, eventDispatcher);
   }
-
-  // @ts-ignore
-
-  // @ts-ignore
   _createClass(TableCell, [{
     key: "update",
     value: function update(node) {
@@ -44,17 +26,10 @@ var TableCell = /*#__PURE__*/function (_ref) {
       }
       return didUpdate;
     }
-  }, {
-    key: "destroy",
-    value: function destroy() {
-      if (this.observer) {
-        this.observer.unobserve(this.contentDOM);
-      }
-    }
   }, {
     key: "updateNodeView",
     value: function updateNodeView(node) {
-      var _this2 = this;
+      var _this = this;
       if (this.node.type !== node.type) {
         return false;
       }
@@ -85,10 +60,10 @@ var TableCell = /*#__PURE__*/function (_ref) {
           var _ref5 = _slicedToArray(_ref4, 2),
             key = _ref5[0],
             value = _ref5[1];
-          return _this2.dom.setAttribute(key, value || '');
+          return _this.dom.setAttribute(key, value || '');
         });
         removedAttrs.forEach(function (key) {
-          return _this2.dom.removeAttribute(key);
+          return _this.dom.removeAttribute(key);
         });
         return true;
       }