npm - @atlaskit/editor-core - Versions diffs - 174.0.0 → 175.0.1 - Mend

@atlaskit/editor-core 174.0.0 → 175.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2015) hide show

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

@@ -1,546 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
-import { mapChildren } from '../../../../../utils/slice';
-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 DELETED Viewed

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

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

@@ -1,47 +0,0 @@
-import { pluginFactory } from '../../../../utils/plugin-state-factory';
-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 DELETED Viewed

@@ -1,17 +0,0 @@
-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 DELETED Viewed

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

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

@@ -1,14 +0,0 @@
-// 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;
-};