@atlaskit/editor-plugin-table 0.0.0 → 0.0.1

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

@@ -0,0 +1,546 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
+import { mapChildren } from '@atlaskit/editor-common/utils';
+import { TableCssClassName as ClassName, TableCssClassName } from '../../../types';
+import { stickyHeaderBorderBottomWidth, stickyRowOffsetTop, tableControlsSpacing, tableScrollbarOffset } from '../../../ui/consts';
+import { pluginKey as tablePluginKey } from '../../plugin-key';
+import { syncStickyRowToTable, updateStickyMargins as updateTableMargin } from '../../table-resizing/utils/dom';
+import { updateStickyState } from '../commands';
+import { getTop, getTree } from './dom';
+import debounce from 'lodash/debounce';
+import throttle from 'lodash/throttle'; // 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 udpates.
+
+const HEADER_ROW_SCROLL_RESET_DEBOUNCE_TIMEOUT = 400;
+export const supportedHeaderRow = node => {
+  const allHeaders = mapChildren(node, child => child.type.name === 'tableHeader').every(Boolean);
+  const someMerged = mapChildren(node, child => child.attrs.rowspan || 0).some(rowspan => rowspan > 1);
+  return allHeaders && !someMerged;
+};
+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); // 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();
+    });
+
+    _defineProperty(this, "onTablePluginState", state => {
+      const tableRef = state.tableRef;
+      let focusChanged = false;
+      const tree = this.tree;
+
+      if (!tree) {
+        return;
+      } // make it non-sticky initially to avoid making it look separated
+
+
+      if (!this.isTableInit) {
+        if (this.tree) {
+          this.makeRowHeaderNotSticky(this.tree.table);
+          this.isTableInit = true;
+        }
+      } // when header rows are toggled off - mark sentinels as unobserved
+
+
+      if (!state.isHeaderRowEnabled) {
+        [this.sentinels.top, this.sentinels.bottom].forEach(el => {
+          if (el) {
+            delete el.dataset.isObserved;
+          }
+        });
+      }
+
+      const isCurrentTableSelected = tableRef === tree.table;
+
+      if (isCurrentTableSelected !== this.focused) {
+        focusChanged = true;
+      }
+
+      this.focused = isCurrentTableSelected;
+      const {
+        wrapper
+      } = tree;
+      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
+          tableContentWrapper.style.paddingLeft = '11px';
+        }
+      } else {
+        this.colControlsOffset = 0;
+
+        if (layoutContainer && layoutContainer.getAttribute('data-layout-content')) {
+          tableContentWrapper.style.removeProperty('padding-left');
+        }
+      } // 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
+      } = tree;
+      const tableWrapperRect = wrapper.getBoundingClientRect();
+      const editorAreaRect = this.editorScrollableElement.getBoundingClientRect();
+      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
+      // 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 (stickyHeaderRect.top > editorAreaRect.top) {
+        return false;
+      } // otherwise make it non-sticky
+
+
+      return false;
+    });
+
+    _defineProperty(this, "makeHeaderRowSticky", tree => {
+      // 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;
+      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);
+      this.isSticky = false;
+      this.dom.style.top = '';
+      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({
+        pos: this.getPos(),
+        top,
+        sticky: true,
+        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(),
+          sticky: false,
+          top: this.top,
+          padding: this.padding
+        })(this.view.state, this.view.dispatch, this.view);
+      }
+    });
+
+    this.view = view;
+    this.node = node;
+    this.getPos = getPos;
+    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;
+    this.isTableInit = false;
+
+    if (this.isHeaderRow) {
+      this.dom.setAttribute('data-header-row', 'true');
+      this.subscribe();
+    }
+  }
+  /* 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
+
+
+  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);
+        [this.sentinels.top, this.sentinels.bottom].forEach(el => {
+          // skip if already observed for another row on this table
+          if (el && !el.dataset.isObserved) {
+            el.dataset.isObserved = 'true';
+            this.intersectionObserver.observe(el);
+          }
+        });
+      }
+    });
+  } // 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),
+        // So we adding this check to allow a 1px difference.
+        Math.abs(newHeight - (this.stickyRowHeight || 0)) > stickyHeaderBorderBottomWidth) {
+          this.stickyRowHeight = newHeight;
+          this.sentinels.bottom.style.bottom = `${tableScrollbarOffset + stickyRowOffsetTop + newHeight}px`;
+          updateTableMargin(table);
+        }
+      });
+    });
+  }
+
+  createIntersectionObserver() {
+    this.intersectionObserver = new IntersectionObserver((entries, _) => {
+      if (!this.tree) {
+        return;
+      }
+
+      const {
+        table
+      } = this.tree;
+      entries.forEach(entry => {
+        var _entry$rootBounds;
+
+        const target = entry.target; // 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) {
+            this.tree && this.makeHeaderRowSticky(this.tree);
+          }
+        }
+      });
+    }, {
+      root: this.editorScrollableElement
+    });
+  }
+  /* 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
+
+
+    const newNodeisHeaderRow = supportedHeaderRow(node);
+
+    if (this.isHeaderRow !== newNodeisHeaderRow) {
+      return false; // re-create nodeview
+    } // 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
+
+
+    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
+     * by updating styles and classnames on this DOM element
+     *
+     * Update: should not ignore mutations for row selection to avoid known issue with table selection highlight in firefox
+     * Related bug report: https://bugzilla.mozilla.org/show_bug.cgi?id=1289673
+     * */
+    const isTableSelection = mutationRecord.type === 'selection' && mutationRecord.target.nodeName === 'TR';
+    /**
+     * Update: should not ignore mutations when an node is added, as this interferes with
+     * prosemirrors handling of some language inputs in Safari (ie. Pinyin, Hiragana).
+     *
+     * In paticular, when a composition occurs at the start of the first node inside a table cell, if the resulting mutation
+     * 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 */
+
+
+}

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

@@ -0,0 +1,2 @@
+import { PluginKey } from 'prosemirror-state';
+export const pluginKey = new PluginKey('stickyHeadersPlugin');

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

@@ -0,0 +1,47 @@
+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
+} = pluginFactory(pluginKey, reducer, {
+  mapping: (tr, pluginState) => {
+    if (tr.docChanged) {
+      return pluginState.map(rowInfo => {
+        const remapped = tr.mapping.mapResult(rowInfo.pos);
+        return remapped ? { ...rowInfo,
+          pos: remapped.pos
+        } : undefined;
+      }).filter(f => f !== undefined);
+    }
+
+    return pluginState;
+  }
+});
+export { createPluginState, createCommand };

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

@@ -0,0 +1,17 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { TableRowNodeView } from './nodeviews/tableRow';
+import { pluginKey } from './plugin-key';
+import { createPluginState } from './plugin-state';
+export const createPlugin = (dispatch, eventDispatcher, initialState = () => [], getEditorFeatureFlags) => {
+  return new SafePlugin({
+    state: createPluginState(dispatch, initialState),
+    key: pluginKey,
+    props: {
+      nodeViews: {
+        tableRow: (node, view, getPos) => {
+          return new TableRowNodeView(node, view, getPos, eventDispatcher, getEditorFeatureFlags);
+        }
+      }
+    }
+  });
+};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,14 @@
+// only worry about the first row for now
+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;
+};