@atlaskit/editor-plugin-table 1.1.0 → 1.1.2

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

@@ -8,25 +8,26 @@ import { syncStickyRowToTable, updateStickyMargins as updateTableMargin } from '
 import { updateStickyState } from '../commands';
 import { getTop, getTree } from './dom';
 import debounce from 'lodash/debounce';
-import throttle from 'lodash/throttle'; // limit scroll event calls
+import throttle from 'lodash/throttle';
 
-const 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.
+// limit scroll event calls
+const 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.
 const HEADER_ROW_SCROLL_RESET_DEBOUNCE_TIMEOUT = 400;
-
 const anyChildCellMergedAcrossRow = node => mapChildren(node, child => child.attrs.rowspan || 0).some(rowspan => 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
  */
-
-
 const rowHasDifferentMergedCells = (prevNode, incomingNode) => {
   const incomingNodeChildrenRowSpan = mapChildren(prevNode, child => child.attrs.rowspan || 0);
   const currentNodeChildrenRowSpan = mapChildren(incomingNode, child => child.attrs.rowspan || 0);
   return incomingNodeChildrenRowSpan.length !== currentNodeChildrenRowSpan.length || currentNodeChildrenRowSpan.some((child, index) => child !== incomingNodeChildrenRowSpan[index]);
 };
+
 /**
  * Check if a given node is a header row with this definition:
  *  - all children are tableHeader cells
@@ -35,8 +36,6 @@ const rowHasDifferentMergedCells = (prevNode, incomingNode) => {
  * @param node ProseMirror node
  * @return boolean if it meets definition
  */
-
-
 export const supportedHeaderRow = node => {
   const allHeaders = mapChildren(node, child => child.type.name === 'tableHeader').every(Boolean);
   const someMerged = anyChildCellMergedAcrossRow(node);
@@ -44,103 +43,89 @@ export const supportedHeaderRow = node => {
 };
 export class TableRowNodeView {
   // this is the sticky header table row
+
   get tree() {
     return getTree(this.dom);
   }
-
   constructor(node, view, getPos, eventDispatcher, getEditorFeatureFlags) {
     _defineProperty(this, "colControlsOffset", 0);
-
     _defineProperty(this, "focused", false);
-
     _defineProperty(this, "topPosEditorElement", 0);
-
     _defineProperty(this, "stickyHeadersOptimization", false);
-
     _defineProperty(this, "sentinels", {});
-
     _defineProperty(this, "listening", false);
-
     _defineProperty(this, "headerRowMouseScrollEnd", debounce(() => {
       this.dom.classList.remove('no-pointer-events');
     }, HEADER_ROW_SCROLL_RESET_DEBOUNCE_TIMEOUT));
-
     _defineProperty(this, "headerRowMouseScroll", throttle(() => {
       if (this.isSticky) {
         this.dom.classList.add('no-pointer-events');
         this.headerRowMouseScrollEnd();
       }
     }, HEADER_ROW_SCROLL_THROTTLE_TIMEOUT));
-
     _defineProperty(this, "onScroll", () => {
       if (!this.tree) {
         return;
       }
+      this.latestDomTop = getTop(this.tree.wrapper);
 
-      this.latestDomTop = 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();
       }
     });
-
     _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
-
+        }
 
+        // 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);
 
-        this.paint(tree); // run again on next frame
-
+        // 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.
+      } = 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
-
+      }
 
+      // ensure scroll positions are locked
       this.dom.scrollLeft = wrapper.scrollLeft;
       this.lastTimePainted = performance.now();
     });
-
     _defineProperty(this, "onTablePluginState", state => {
       const tableRef = state.tableRef;
       let focusChanged = false;
       const 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(el => {
           if (el) {
@@ -148,17 +133,15 @@ export class TableRowNodeView {
           }
         });
       }
+      const isCurrentTableSelected = tableRef === tree.table;
 
-      const 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;
       const {
         wrapper
@@ -166,10 +149,8 @@ export class TableRowNodeView {
       const tableContainer = wrapper.parentElement;
       const tableContentWrapper = tableContainer.parentElement;
       const layoutContainer = tableContentWrapper && tableContentWrapper.parentElement;
-
       if (isCurrentTableSelected) {
         this.colControlsOffset = tableControlsSpacing;
-
         if (layoutContainer && layoutContainer.getAttribute('data-layout-content')) {
           // move table a little out of the way
           // to provide spacing for table controls
@@ -177,34 +158,28 @@ export class TableRowNodeView {
         }
       } 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(() => {
         // 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);
     });
-
     _defineProperty(this, "onWidthPluginState", () => {
       // table width might have changed, sync that back to sticky row
       const tree = this.tree;
-
       if (!tree) {
         return;
       }
-
       syncStickyRowToTable(tree.table);
     });
-
     _defineProperty(this, "shouldHeaderStick", tree => {
       const {
         wrapper
@@ -214,62 +189,55 @@ export class TableRowNodeView {
       const stickyHeaderRect = this.contentDOM.getBoundingClientRect();
       const firstHeaderRow = !this.dom.previousElementSibling;
       const subsequentRows = !!this.dom.nextElementSibling;
-      const isHeaderValid = firstHeaderRow && subsequentRows; // if the table wrapper is less than the editor top pos then make it sticky
+      const 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;
     });
-
     _defineProperty(this, "makeHeaderRowSticky", 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;
       }
-
       const {
         table
-      } = tree; // ED-16035 Make sure sticky header is only applied to first row
+      } = tree;
 
+      // ED-16035 Make sure sticky header is only applied to first row
       const tbody = this.dom.parentElement;
       const 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;
       }
-
       const currentTableTop = this.getCurrentTableTop(tree);
       const domTop = currentTableTop > 0 ? this.topPosEditorElement : this.topPosEditorElement + currentTableTop;
-
       if (!this.isSticky) {
         syncStickyRowToTable(table);
         this.dom.classList.add('sticky');
         table.classList.add(ClassName.TABLE_STICKY);
         this.isSticky = true;
       }
-
       this.dom.style.top = `${domTop}px`;
       updateTableMargin(table);
       this.emitOn(domTop, this.colControlsOffset);
     });
-
     _defineProperty(this, "makeRowHeaderNotSticky", (table, isEditorDestroyed = false) => {
       if (!this.isSticky || !table || !this.dom) {
         return;
       }
-
       this.dom.style.removeProperty('width');
       this.dom.classList.remove('sticky');
       table.classList.remove(ClassName.TABLE_STICKY);
@@ -278,27 +246,19 @@ export class TableRowNodeView {
       table.style.removeProperty('margin-top');
       this.emitOff(isEditorDestroyed);
     });
-
     _defineProperty(this, "getWrapperoffset", (inverse = false) => {
       const focusValue = inverse ? !this.focused : this.focused;
       return focusValue ? 0 : tableControlsSpacing;
     });
-
     _defineProperty(this, "getWrapperRefTop", wrapper => Math.round(getTop(wrapper)) + this.getWrapperoffset());
-
     _defineProperty(this, "getScrolledTableTop", wrapper => this.getWrapperRefTop(wrapper) - this.topPosEditorElement);
-
     _defineProperty(this, "getCurrentTableTop", tree => this.getScrolledTableTop(tree.wrapper) + tree.table.clientHeight);
-
     _defineProperty(this, "padding", 0);
-
     _defineProperty(this, "top", 0);
-
     _defineProperty(this, "emitOn", (top, padding) => {
       if (top === this.top && padding === this.padding) {
         return;
       }
-
       this.top = top;
       this.padding = padding;
       updateStickyState({
@@ -308,15 +268,12 @@ export class TableRowNodeView {
         padding
       })(this.view.state, this.view.dispatch, this.view);
     });
-
     _defineProperty(this, "emitOff", isEditorDestroyed => {
       if (this.top === 0 && this.padding === 0) {
         return;
       }
-
       this.top = 0;
       this.padding = 0;
-
       if (!isEditorDestroyed) {
         updateStickyState({
           pos: this.getPos(),
@@ -326,7 +283,6 @@ export class TableRowNodeView {
         })(this.view.state, this.view.dispatch, this.view);
       }
     });
-
     this.view = view;
     this.node = node;
     this.getPos = getPos;
@@ -341,80 +297,66 @@ export class TableRowNodeView {
     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 */
 
   subscribe() {
     this.editorScrollableElement = findOverflowScrollParent(this.view.dom) || window;
-
     if (this.editorScrollableElement) {
       if (this.stickyHeadersOptimization) {
         this.initObservers();
       } else {
         this.editorScrollableElement.addEventListener('scroll', this.onScroll);
       }
-
       this.topPosEditorElement = getTop(this.editorScrollableElement);
     }
-
     this.eventDispatcher.on('widthPlugin', this.onWidthPluginState);
     this.eventDispatcher.on(tablePluginKey.key, this.onTablePluginState);
     this.listening = true;
     this.dom.addEventListener('wheel', this.headerRowMouseScroll.bind(this));
     this.dom.addEventListener('touchmove', this.headerRowMouseScroll.bind(this));
   }
-
   unsubscribe() {
     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(tablePluginKey.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
   initObservers() {
     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(() => {
       var _this$tree;
-
       // we expect tree to be defined after animation frame
       const tableContainer = (_this$tree = this.tree) === null || _this$tree === void 0 ? void 0 : _this$tree.wrapper.closest(`.${TableCssClassName.NODEVIEW_WRAPPER}`);
-
       if (tableContainer) {
         this.sentinels.top = tableContainer.getElementsByClassName(ClassName.TABLE_STICKY_SENTINEL_TOP).item(0);
         this.sentinels.bottom = tableContainer.getElementsByClassName(ClassName.TABLE_STICKY_SENTINEL_BOTTOM).item(0);
@@ -427,23 +369,22 @@ export class TableRowNodeView {
         });
       }
     });
-  } // 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
   createResizeObserver() {
     this.resizeObserver = new ResizeObserver(entries => {
       if (!this.tree) {
         return;
       }
-
       const {
         table
       } = this.tree;
       entries.forEach(entry => {
         const newHeight = entry.contentRect ? entry.contentRect.height : entry.target.offsetHeight;
-
-        if (this.sentinels.bottom && // When the table header is sticky, it would be taller by a 1px (border-bottom),
+        if (this.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 - (this.stickyRowHeight || 0)) > stickyHeaderBorderBottomWidth) {
           this.stickyRowHeight = newHeight;
@@ -453,42 +394,34 @@ export class TableRowNodeView {
       });
     });
   }
-
   createIntersectionObserver() {
     this.intersectionObserver = new IntersectionObserver((entries, _) => {
       if (!this.tree) {
         return;
       }
-
       const {
         table
       } = this.tree;
       entries.forEach(entry => {
         var _entry$rootBounds;
+        const target = entry.target;
 
-        const 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(ClassName.TABLE_STICKY_SENTINEL_TOP)) {
           var _entry$rootBounds2;
-
           const sentinelIsBelowScrollArea = (((_entry$rootBounds2 = entry.rootBounds) === null || _entry$rootBounds2 === void 0 ? void 0 : _entry$rootBounds2.bottom) || 0) < entry.boundingClientRect.bottom;
-
           if (!entry.isIntersecting && !sentinelIsBelowScrollArea) {
             this.tree && this.makeHeaderRowSticky(this.tree);
           } else {
             table && this.makeRowHeaderNotSticky(table);
           }
         }
-
         if (target.classList.contains(ClassName.TABLE_STICKY_SENTINEL_BOTTOM)) {
           var _entry$rootBounds3;
-
           const sentinelIsAboveScrollArea = entry.boundingClientRect.top - this.dom.offsetHeight < (((_entry$rootBounds3 = entry.rootBounds) === null || _entry$rootBounds3 === void 0 ? void 0 : _entry$rootBounds3.top) || 0);
-
           if (table && !entry.isIntersecting && sentinelIsAboveScrollArea) {
             this.makeRowHeaderNotSticky(table);
           } else if (entry.isIntersecting && sentinelIsAboveScrollArea) {
@@ -500,52 +433,48 @@ export class TableRowNodeView {
       root: this.editorScrollableElement
     });
   }
-  /* paint/update loop */
 
+  /* paint/update loop */
 
   /* nodeview lifecycle */
   update(node, ..._args) {
     // 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
     const 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
     const tbody = this.dom.parentElement;
     const table = tbody && tbody.parentElement;
     syncStickyRowToTable(table);
     return true;
   }
-
   destroy() {
     this.unsubscribe();
-
     if (this.tree) {
       this.makeRowHeaderNotSticky(this.tree.table, true);
     }
-
     this.emitOff(true);
   }
-
   ignoreMutation(mutationRecord) {
     /* tableRows are not directly editable by the user
      * so it should be safe to ignore mutations that we cause
@@ -563,16 +492,12 @@ export class TableRowNodeView {
      * from the composition end is ignored than prosemirror will end up with; invalid table markup nesting and a misplaced
      * selection and insertion.
      */
-
     const isNodeInsertion = mutationRecord.type === 'childList' && mutationRecord.target.nodeName === 'TR' && mutationRecord.addedNodes.length;
-
     if (isTableSelection || isNodeInsertion) {
       return false;
     }
-
     return true;
   }
-  /* receive external events */
-
 
+  /* receive external events */
 }

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

@@ -1,32 +1,25 @@
 import { pluginFactory } from '@atlaskit/editor-common/utils';
 import { pluginKey } from './plugin-key';
-
 const reducer = (pluginState, action) => {
   if (action.name === 'UPDATE') {
     let updated = false;
     const updatedState = pluginState.map(oldTableState => {
       const replace = oldTableState.pos === action.state.pos;
-
       if (replace) {
         updated = true;
       }
-
       return replace ? action.state : oldTableState;
     });
-
     if (!updated) {
       // new, add it
       updatedState.push(action.state);
     }
-
     return updatedState;
   } else if (action.name === 'REMOVE') {
     return pluginState.filter(rowState => rowState.pos !== action.pos);
   }
-
   return pluginState;
 };
-
 const {
   createPluginState,
   createCommand
@@ -35,12 +28,12 @@ const {
     if (tr.docChanged) {
       return pluginState.map(rowInfo => {
         const remapped = tr.mapping.mapResult(rowInfo.pos);
-        return remapped ? { ...rowInfo,
+        return remapped ? {
+          ...rowInfo,
           pos: remapped.pos
         } : undefined;
       }).filter(f => f !== undefined);
     }
-
     return pluginState;
   }
 });

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

@@ -3,12 +3,9 @@ export const findStickyHeaderForTable = (state, tablePos) => {
   if (!state || tablePos === undefined) {
     return undefined;
   }
-
   const rowInfo = state.find(rowInfo => rowInfo.pos === tablePos + 1);
-
   if (!rowInfo) {
     return undefined;
   }
-
   return rowInfo.sticky ? rowInfo : undefined;
 };