@atlaskit/editor-plugin-table 1.1.0 → 1.1.2

package/dist/cjs/plugins/table/pm-plugins/sticky-headers/index.js

@@ -39,13 +39,8 @@ Object.defineProperty(exports, "updateStickyState", {
     return _commands.updateStickyState;
   }
 });
-
 var _plugin = require("./plugin");
-
 var _pluginKey = require("./plugin-key");
-
 var _util = require("./util");
-
 var _commands = require("./commands");
-
 var _tableRow = require("./nodeviews/tableRow");

package/dist/cjs/plugins/table/pm-plugins/sticky-headers/nodeviews/dom.js

@@ -4,43 +4,34 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getTree = exports.getTop = void 0;
-
 var getTree = function getTree(tr) {
   // pm renders into tbody, owned by react
   var tbody = tr.parentElement;
-
   if (!tbody) {
     return null;
-  } // rendered by react
-
+  }
 
+  // rendered by react
   var table = tbody.parentElement;
-
   if (!table) {
     return null;
-  } // rendered by react
-
+  }
 
+  // rendered by react
   var wrapper = table.parentElement;
-
   if (!wrapper) {
     return null;
   }
-
   return {
     wrapper: wrapper,
     table: table
   };
 };
-
 exports.getTree = getTree;
-
 var getTop = function getTop(element) {
   if (!element || element instanceof Window) {
     return 0;
   }
-
   return element.getBoundingClientRect().top;
 };
-
 exports.getTop = getTop;

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

@@ -1,44 +1,29 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.supportedHeaderRow = exports.TableRowNodeView = void 0;
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _ui = require("@atlaskit/editor-common/ui");
-
 var _utils = require("@atlaskit/editor-common/utils");
-
 var _types = require("../../../types");
-
 var _consts = require("../../../ui/consts");
-
 var _pluginKey = require("../../plugin-key");
-
 var _dom = require("../../table-resizing/utils/dom");
-
 var _commands = require("../commands");
-
 var _dom2 = require("./dom");
-
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
-
 var _throttle = _interopRequireDefault(require("lodash/throttle"));
-
 // limit scroll event calls
-var HEADER_ROW_SCROLL_THROTTLE_TIMEOUT = 200; // timeout for resetting the scroll class - if it’s too long then users won’t be able to click on the header cells,
-// if too short it would trigger too many dom updates.
+var HEADER_ROW_SCROLL_THROTTLE_TIMEOUT = 200;
 
+// timeout for resetting the scroll class - if it’s too long then users won’t be able to click on the header cells,
+// if too short it would trigger too many dom updates.
 var HEADER_ROW_SCROLL_RESET_DEBOUNCE_TIMEOUT = 400;
-
 var anyChildCellMergedAcrossRow = function anyChildCellMergedAcrossRow(node) {
   return (0, _utils.mapChildren)(node, function (child) {
     return child.attrs.rowspan || 0;
@@ -46,12 +31,11 @@ var anyChildCellMergedAcrossRow = function anyChildCellMergedAcrossRow(node) {
     return rowspan > 1;
   });
 };
+
 /**
  * Compare two table row nodes and return true if the two table rows have a
  * different number of table cells or if table cell row spans are different
  */
-
-
 var rowHasDifferentMergedCells = function rowHasDifferentMergedCells(prevNode, incomingNode) {
   var incomingNodeChildrenRowSpan = (0, _utils.mapChildren)(prevNode, function (child) {
     return child.attrs.rowspan || 0;
@@ -63,6 +47,7 @@ var rowHasDifferentMergedCells = function rowHasDifferentMergedCells(prevNode, i
     return child !== incomingNodeChildrenRowSpan[index];
   });
 };
+
 /**
  * Check if a given node is a header row with this definition:
  *  - all children are tableHeader cells
@@ -71,8 +56,6 @@ var rowHasDifferentMergedCells = function rowHasDifferentMergedCells(prevNode, i
  * @param node ProseMirror node
  * @return boolean if it meets definition
  */
-
-
 var supportedHeaderRow = function supportedHeaderRow(node) {
   var allHeaders = (0, _utils.mapChildren)(node, function (child) {
     return child.type.name === 'tableHeader';
@@ -80,13 +63,10 @@ var supportedHeaderRow = function supportedHeaderRow(node) {
   var someMerged = anyChildCellMergedAcrossRow(node);
   return allHeaders && !someMerged;
 };
-
 exports.supportedHeaderRow = supportedHeaderRow;
-
 var TableRowNodeView = /*#__PURE__*/function () {
   function TableRowNodeView(node, view, getPos, eventDispatcher, getEditorFeatureFlags) {
     var _this = this;
-
     (0, _classCallCheck2.default)(this, TableRowNodeView);
     (0, _defineProperty2.default)(this, "colControlsOffset", 0);
     (0, _defineProperty2.default)(this, "focused", false);
@@ -100,7 +80,6 @@ var TableRowNodeView = /*#__PURE__*/function () {
     (0, _defineProperty2.default)(this, "headerRowMouseScroll", (0, _throttle.default)(function () {
       if (_this.isSticky) {
         _this.dom.classList.add('no-pointer-events');
-
         _this.headerRowMouseScrollEnd();
       }
     }, HEADER_ROW_SCROLL_THROTTLE_TIMEOUT));
@@ -108,9 +87,9 @@ var TableRowNodeView = /*#__PURE__*/function () {
       if (!_this.tree) {
         return;
       }
+      _this.latestDomTop = (0, _dom2.getTop)(_this.tree.wrapper);
 
-      _this.latestDomTop = (0, _dom2.getTop)(_this.tree.wrapper); // kick off rAF loop again if it hasn't already happened
-
+      // kick off rAF loop again if it hasn't already happened
       if (!_this.nextFrame) {
         _this.loop();
       }
@@ -120,43 +99,39 @@ var TableRowNodeView = /*#__PURE__*/function () {
         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
-
+        }
 
+        // can't store these since React might re-render at any time
         var tree = _this.tree;
-
         if (!tree) {
           _this.nextFrame = undefined;
           return;
         }
+        _this.paint(tree);
 
-        _this.paint(tree); // run again on next frame
-
-
+        // run again on next frame
         _this.previousPadding = _this.padding;
         _this.previousDomTop = _this.latestDomTop;
-
         _this.loop();
       });
     });
     (0, _defineProperty2.default)(this, "paint", function (tree) {
       var table = tree.table,
-          wrapper = tree.wrapper; // 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.
+        wrapper = tree.wrapper;
 
+      // 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.
       var 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
-
+      }
 
+      // ensure scroll positions are locked
       _this.dom.scrollLeft = wrapper.scrollLeft;
       _this.lastTimePainted = performance.now();
     });
@@ -164,12 +139,11 @@ var TableRowNodeView = /*#__PURE__*/function () {
       var tableRef = state.tableRef;
       var focusChanged = false;
       var tree = _this.tree;
-
       if (!tree) {
         return;
-      } // when header rows are toggled off - mark sentinels as unobserved
-
+      }
 
+      // when header rows are toggled off - mark sentinels as unobserved
       if (!state.isHeaderRowEnabled) {
         [_this.sentinels.top, _this.sentinels.bottom].forEach(function (el) {
           if (el) {
@@ -177,26 +151,22 @@ var TableRowNodeView = /*#__PURE__*/function () {
           }
         });
       }
+      var isCurrentTableSelected = tableRef === tree.table;
 
-      var isCurrentTableSelected = tableRef === tree.table; // If current table selected and header row is toggled off, turn off sticky header
-
+      // If current table selected and header row is toggled off, turn off sticky header
       if (isCurrentTableSelected && !state.isHeaderRowEnabled && _this.tree) {
         _this.makeRowHeaderNotSticky(_this.tree.table);
       }
-
       if (isCurrentTableSelected !== _this.focused) {
         focusChanged = true;
       }
-
       _this.focused = isCurrentTableSelected;
       var wrapper = tree.wrapper;
       var tableContainer = wrapper.parentElement;
       var tableContentWrapper = tableContainer.parentElement;
       var layoutContainer = tableContentWrapper && tableContentWrapper.parentElement;
-
       if (isCurrentTableSelected) {
         _this.colControlsOffset = _consts.tableControlsSpacing;
-
         if (layoutContainer && layoutContainer.getAttribute('data-layout-content')) {
           // move table a little out of the way
           // to provide spacing for table controls
@@ -204,109 +174,89 @@ var TableRowNodeView = /*#__PURE__*/function () {
         }
       } else {
         _this.colControlsOffset = 0;
-
         if (layoutContainer && layoutContainer.getAttribute('data-layout-content')) {
           tableContentWrapper.style.removeProperty('padding-left');
         }
-      } // run after table style changes have been committed
-
+      }
 
+      // run after table style changes have been committed
       setTimeout(function () {
         // if focus changed while header is sticky - still repaint the positions will shift
         if (!_this.stickyHeadersOptimization || focusChanged && _this.isSticky) {
           _this.paint(tree);
         }
-
         (0, _dom.syncStickyRowToTable)(tree.table);
       }, 0);
     });
     (0, _defineProperty2.default)(this, "onWidthPluginState", function () {
       // table width might have changed, sync that back to sticky row
       var tree = _this.tree;
-
       if (!tree) {
         return;
       }
-
       (0, _dom.syncStickyRowToTable)(tree.table);
     });
     (0, _defineProperty2.default)(this, "shouldHeaderStick", function (tree) {
       var wrapper = tree.wrapper;
       var tableWrapperRect = wrapper.getBoundingClientRect();
-
       var editorAreaRect = _this.editorScrollableElement.getBoundingClientRect();
-
       var stickyHeaderRect = _this.contentDOM.getBoundingClientRect();
-
       var firstHeaderRow = !_this.dom.previousElementSibling;
       var subsequentRows = !!_this.dom.nextElementSibling;
-      var isHeaderValid = firstHeaderRow && subsequentRows; // if the table wrapper is less than the editor top pos then make it sticky
+      var isHeaderValid = firstHeaderRow && subsequentRows;
+
+      // if the table wrapper is less than the editor top pos then make it sticky
       // Make header sticky if table wrapper top is outside viewport
       //  but bottom is still in the viewport.
-
       if (tableWrapperRect.top < editorAreaRect.top && tableWrapperRect.bottom > editorAreaRect.top && isHeaderValid) {
         return true;
-      } // if the sticky header is below the editor area make it non-sticky
-
+      }
 
+      // if the sticky header is below the editor area make it non-sticky
       if (stickyHeaderRect.top > editorAreaRect.top) {
         return false;
-      } // otherwise make it non-sticky
-
+      }
 
+      // otherwise make it non-sticky
       return false;
     });
     (0, _defineProperty2.default)(this, "makeHeaderRowSticky", function (tree) {
       var _tbody$firstChild;
-
       // If header row height is more than 50% of viewport height don't do this
       if (_this.stickyRowHeight && _this.stickyRowHeight > window.innerHeight / 2) {
         return;
       }
+      var table = tree.table;
 
-      var table = tree.table; // ED-16035 Make sure sticky header is only applied to first row
-
+      // ED-16035 Make sure sticky header is only applied to first row
       var tbody = _this.dom.parentElement;
       var isFirstHeader = tbody === null || tbody === void 0 ? void 0 : (_tbody$firstChild = tbody.firstChild) === null || _tbody$firstChild === void 0 ? void 0 : _tbody$firstChild.isEqualNode(_this.dom);
-
       if (!isFirstHeader) {
         return;
       }
-
       var currentTableTop = _this.getCurrentTableTop(tree);
-
       var domTop = currentTableTop > 0 ? _this.topPosEditorElement : _this.topPosEditorElement + currentTableTop;
-
       if (!_this.isSticky) {
         (0, _dom.syncStickyRowToTable)(table);
-
         _this.dom.classList.add('sticky');
-
         table.classList.add(_types.TableCssClassName.TABLE_STICKY);
         _this.isSticky = true;
       }
-
       _this.dom.style.top = "".concat(domTop, "px");
       (0, _dom.updateStickyMargins)(table);
-
       _this.emitOn(domTop, _this.colControlsOffset);
     });
     (0, _defineProperty2.default)(this, "makeRowHeaderNotSticky", function (table) {
       var isEditorDestroyed = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-
       if (!_this.isSticky || !table || !_this.dom) {
         return;
       }
-
       _this.dom.style.removeProperty('width');
-
       _this.dom.classList.remove('sticky');
-
       table.classList.remove(_types.TableCssClassName.TABLE_STICKY);
       _this.isSticky = false;
       _this.dom.style.top = '';
       table.style.removeProperty('margin-top');
-
       _this.emitOff(isEditorDestroyed);
     });
     (0, _defineProperty2.default)(this, "getWrapperoffset", function () {
@@ -329,7 +279,6 @@ var TableRowNodeView = /*#__PURE__*/function () {
       if (top === _this.top && padding === _this.padding) {
         return;
       }
-
       _this.top = top;
       _this.padding = padding;
       (0, _commands.updateStickyState)({
@@ -343,10 +292,8 @@ var TableRowNodeView = /*#__PURE__*/function () {
       if (_this.top === 0 && _this.padding === 0) {
         return;
       }
-
       _this.top = 0;
       _this.padding = 0;
-
       if (!isEditorDestroyed) {
         (0, _commands.updateStickyState)({
           pos: _this.getPos(),
@@ -368,18 +315,18 @@ var TableRowNodeView = /*#__PURE__*/function () {
     this.lastTimePainted = 0;
     this.isHeaderRow = supportedHeaderRow(node);
     this.isSticky = false;
-
     if (this.isHeaderRow) {
       this.dom.setAttribute('data-header-row', 'true');
       this.subscribe();
     }
   }
-  /* external events */
-
 
+  /* external events */
   (0, _createClass2.default)(TableRowNodeView, [{
     key: "tree",
-    get: // this is the sticky header table row
+    get:
+    // this is the sticky header table row
+
     function get() {
       return (0, _dom2.getTree)(this.dom);
     }
@@ -387,17 +334,14 @@ var TableRowNodeView = /*#__PURE__*/function () {
     key: "subscribe",
     value: function subscribe() {
       this.editorScrollableElement = (0, _ui.findOverflowScrollParent)(this.view.dom) || window;
-
       if (this.editorScrollableElement) {
         if (this.stickyHeadersOptimization) {
           this.initObservers();
         } else {
           this.editorScrollableElement.addEventListener('scroll', this.onScroll);
         }
-
         this.topPosEditorElement = (0, _dom2.getTop)(this.editorScrollableElement);
       }
-
       this.eventDispatcher.on('widthPlugin', this.onWidthPluginState);
       this.eventDispatcher.on(_pluginKey.pluginKey.key, this.onTablePluginState);
       this.listening = true;
@@ -410,50 +354,41 @@ var TableRowNodeView = /*#__PURE__*/function () {
       if (!this.listening) {
         return;
       }
-
       if (this.intersectionObserver) {
         this.intersectionObserver.disconnect();
       }
-
       if (this.resizeObserver) {
         this.resizeObserver.disconnect();
       }
-
       if (this.editorScrollableElement && !this.stickyHeadersOptimization) {
         this.editorScrollableElement.removeEventListener('scroll', this.onScroll);
       }
-
       this.eventDispatcher.off('widthPlugin', this.onWidthPluginState);
       this.eventDispatcher.off(_pluginKey.pluginKey.key, this.onTablePluginState);
       this.listening = false;
       this.dom.removeEventListener('wheel', this.headerRowMouseScroll);
       this.dom.removeEventListener('touchmove', this.headerRowMouseScroll);
-    } // initialize intersection observer to track if table is within scroll area
+    }
 
+    // initialize intersection observer to track if table is within scroll area
   }, {
     key: "initObservers",
     value: function initObservers() {
       var _this2 = this;
-
       if (!this.dom || this.dom.dataset.isObserved) {
         return;
       }
-
       this.dom.dataset.isObserved = 'true';
       this.createIntersectionObserver();
       this.createResizeObserver();
-
       if (!this.intersectionObserver || !this.resizeObserver) {
         return;
       }
-
       this.resizeObserver.observe(this.dom);
       window.requestAnimationFrame(function () {
         var _this2$tree;
-
         // we expect tree to be defined after animation frame
         var tableContainer = (_this2$tree = _this2.tree) === null || _this2$tree === void 0 ? void 0 : _this2$tree.wrapper.closest(".".concat(_types.TableCssClassName.NODEVIEW_WRAPPER));
-
         if (tableContainer) {
           _this2.sentinels.top = tableContainer.getElementsByClassName(_types.TableCssClassName.TABLE_STICKY_SENTINEL_TOP).item(0);
           _this2.sentinels.bottom = tableContainer.getElementsByClassName(_types.TableCssClassName.TABLE_STICKY_SENTINEL_BOTTOM).item(0);
@@ -461,30 +396,28 @@ var TableRowNodeView = /*#__PURE__*/function () {
             // skip if already observed for another row on this table
             if (el && !el.dataset.isObserved) {
               el.dataset.isObserved = 'true';
-
               _this2.intersectionObserver.observe(el);
             }
           });
         }
       });
-    } // updating bottom sentinel position if sticky header height changes
-    // to allocate for new header height
+    }
 
+    // updating bottom sentinel position if sticky header height changes
+    // to allocate for new header height
   }, {
     key: "createResizeObserver",
     value: function createResizeObserver() {
       var _this3 = this;
-
       this.resizeObserver = new ResizeObserver(function (entries) {
         if (!_this3.tree) {
           return;
         }
-
         var table = _this3.tree.table;
         entries.forEach(function (entry) {
           var newHeight = entry.contentRect ? entry.contentRect.height : entry.target.offsetHeight;
-
-          if (_this3.sentinels.bottom && // When the table header is sticky, it would be taller by a 1px (border-bottom),
+          if (_this3.sentinels.bottom &&
+          // When the table header is sticky, it would be taller by a 1px (border-bottom),
           // So we adding this check to allow a 1px difference.
           Math.abs(newHeight - (_this3.stickyRowHeight || 0)) > _consts.stickyHeaderBorderBottomWidth) {
             _this3.stickyRowHeight = newHeight;
@@ -498,39 +431,31 @@ var TableRowNodeView = /*#__PURE__*/function () {
     key: "createIntersectionObserver",
     value: function createIntersectionObserver() {
       var _this4 = this;
-
       this.intersectionObserver = new IntersectionObserver(function (entries, _) {
         if (!_this4.tree) {
           return;
         }
-
         var table = _this4.tree.table;
         entries.forEach(function (entry) {
           var _entry$rootBounds;
+          var target = entry.target;
 
-          var target = entry.target; // if the rootBounds has 0 height, e.g. confluence preview mode, we do nothing.
-
+          // if the rootBounds has 0 height, e.g. confluence preview mode, we do nothing.
           if (((_entry$rootBounds = entry.rootBounds) === null || _entry$rootBounds === void 0 ? void 0 : _entry$rootBounds.height) === 0) {
             return;
           }
-
           if (target.classList.contains(_types.TableCssClassName.TABLE_STICKY_SENTINEL_TOP)) {
             var _entry$rootBounds2;
-
             var sentinelIsBelowScrollArea = (((_entry$rootBounds2 = entry.rootBounds) === null || _entry$rootBounds2 === void 0 ? void 0 : _entry$rootBounds2.bottom) || 0) < entry.boundingClientRect.bottom;
-
             if (!entry.isIntersecting && !sentinelIsBelowScrollArea) {
               _this4.tree && _this4.makeHeaderRowSticky(_this4.tree);
             } else {
               table && _this4.makeRowHeaderNotSticky(table);
             }
           }
-
           if (target.classList.contains(_types.TableCssClassName.TABLE_STICKY_SENTINEL_BOTTOM)) {
             var _entry$rootBounds3;
-
             var sentinelIsAboveScrollArea = entry.boundingClientRect.top - _this4.dom.offsetHeight < (((_entry$rootBounds3 = entry.rootBounds) === null || _entry$rootBounds3 === void 0 ? void 0 : _entry$rootBounds3.top) || 0);
-
             if (table && !entry.isIntersecting && sentinelIsAboveScrollArea) {
               _this4.makeRowHeaderNotSticky(table);
             } else if (entry.isIntersecting && sentinelIsAboveScrollArea) {
@@ -542,38 +467,37 @@ var TableRowNodeView = /*#__PURE__*/function () {
         root: this.editorScrollableElement
       });
     }
-    /* paint/update loop */
 
+    /* paint/update loop */
   }, {
     key: "update",
-    value:
-    /* nodeview lifecycle */
+    value: /* nodeview lifecycle */
     function update(node) {
       // do nothing if nodes were identical
       if (node === this.node) {
         return true;
-      } // see if we're changing into a header row or
-      // changing away from one
-
+      }
 
+      // see if we're changing into a header row or
+      // changing away from one
       var newNodeIsHeaderRow = supportedHeaderRow(node);
-
       if (this.isHeaderRow !== newNodeIsHeaderRow) {
         return false; // re-create nodeview
       }
 
       if (rowHasDifferentMergedCells(this.node, node)) {
         return false;
-      } // node is different but no need to re-create nodeview
-
+      }
 
-      this.node = node; // don't do anything if we're just a regular tr
+      // node is different but no need to re-create nodeview
+      this.node = node;
 
+      // don't do anything if we're just a regular tr
       if (!this.isHeaderRow) {
         return true;
-      } // something changed, sync widths
-
+      }
 
+      // something changed, sync widths
       var tbody = this.dom.parentElement;
       var table = tbody && tbody.parentElement;
       (0, _dom.syncStickyRowToTable)(table);
@@ -583,11 +507,9 @@ var TableRowNodeView = /*#__PURE__*/function () {
     key: "destroy",
     value: function destroy() {
       this.unsubscribe();
-
       if (this.tree) {
         this.makeRowHeaderNotSticky(this.tree.table, true);
       }
-
       this.emitOff(true);
     }
   }, {
@@ -609,19 +531,15 @@ var TableRowNodeView = /*#__PURE__*/function () {
        * from the composition end is ignored than prosemirror will end up with; invalid table markup nesting and a misplaced
        * selection and insertion.
        */
-
       var isNodeInsertion = mutationRecord.type === 'childList' && mutationRecord.target.nodeName === 'TR' && mutationRecord.addedNodes.length;
-
       if (isTableSelection || isNodeInsertion) {
         return false;
       }
-
       return true;
     }
-    /* receive external events */
 
+    /* receive external events */
   }]);
   return TableRowNodeView;
 }();
-
 exports.TableRowNodeView = TableRowNodeView;

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

@@ -4,8 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.pluginKey = void 0;
-
 var _prosemirrorState = require("prosemirror-state");
-
 var pluginKey = new _prosemirrorState.PluginKey('stickyHeadersPlugin');
 exports.pluginKey = pluginKey;