@atlaskit/editor-plugin-table 0.0.0 → 0.0.1

package/dist/es2019/plugins/table/nodeviews/TableComponent.js

@@ -0,0 +1,578 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import classnames from 'classnames';
+import { isTableSelected } from '@atlaskit/editor-tables/utils';
+import rafSchedule from 'raf-schd';
+import { calcTableWidth, tableMarginSides } from '@atlaskit/editor-common/styles';
+import { browser, isValidPosition } from '@atlaskit/editor-common/utils';
+import { akEditorMobileBreakoutPoint, akEditorTableToolbarSize as tableToolbarSize } from '@atlaskit/editor-shared-styles';
+import { getParentNodeWidth } from '@atlaskit/editor-common/node-width';
+import { parsePx } from '@atlaskit/editor-common/utils';
+import { autoSizeTable } from '../commands';
+import { getPluginState } from '../pm-plugins/plugin-factory';
+import { findStickyHeaderForTable, pluginKey as stickyHeadersPluginKey } from '../pm-plugins/sticky-headers';
+import { scaleTable } from '../pm-plugins/table-resizing';
+import { getLayoutSize, insertColgroupFromNode as recreateResizeColsByNode } from '../pm-plugins/table-resizing/utils';
+import { updateControls } from '../pm-plugins/table-resizing/utils/dom';
+import { TableCssClassName as ClassName, ShadowEvent } from '../types';
+import TableFloatingControls from '../ui/TableFloatingControls';
+import { containsHeaderRow, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns } from '../utils';
+import { updateOverflowShadows } from './update-overflow-shadows';
+import memoizeOne from 'memoize-one';
+import { OverflowShadowsObserver } from './OverflowShadowsObserver';
+const isIE11 = browser.ie_version === 11;
+
+const NOOP = () => undefined;
+
+class TableComponent extends React.Component {
+  constructor(props) {
+    super(props);
+
+    _defineProperty(this, "state", {
+      scroll: 0,
+      tableContainerWidth: 'inherit',
+      parentWidth: undefined,
+      isLoading: true,
+      [ShadowEvent.SHOW_BEFORE_SHADOW]: false,
+      [ShadowEvent.SHOW_AFTER_SHADOW]: false
+    });
+
+    _defineProperty(this, "updateShadowState", (shadowKey, value) => {
+      if (this.state[shadowKey] === value) {
+        return;
+      } // need this check to satisfy types for the setState argument
+
+
+      if (shadowKey === ShadowEvent.SHOW_BEFORE_SHADOW) {
+        return this.setState({
+          [shadowKey]: value
+        });
+      }
+
+      this.setState({
+        [shadowKey]: value
+      });
+    });
+
+    _defineProperty(this, "onStickyState", state => {
+      const {
+        tableOverflowShadowsOptimization
+      } = this.props.getEditorFeatureFlags();
+      const pos = this.props.getPos();
+
+      if (!isValidPosition(pos, this.props.view.state)) {
+        return;
+      }
+
+      const stickyHeader = findStickyHeaderForTable(state, pos);
+
+      if (stickyHeader !== this.state.stickyHeader) {
+        this.setState({
+          stickyHeader
+        });
+
+        if (tableOverflowShadowsOptimization && this.overflowShadowsObserver) {
+          this.overflowShadowsObserver.updateStickyShadows();
+        }
+      }
+    });
+
+    _defineProperty(this, "prevTableState", null);
+
+    _defineProperty(this, "getMarginLeft", tableContainerCssWidth => {
+      const {
+        containerWidth
+      } = this.props;
+      const {
+        lineLength
+      } = containerWidth;
+      let marginLeft;
+
+      if (tableContainerCssWidth !== 'inherit' && lineLength) {
+        const containerWidth = parsePx(tableContainerCssWidth);
+
+        if (containerWidth) {
+          marginLeft = (lineLength - containerWidth) / 2;
+        }
+      }
+
+      return marginLeft;
+    });
+
+    _defineProperty(this, "handleScroll", event => {
+      if (!this.wrapper || event.target !== this.wrapper) {
+        return;
+      }
+
+      if (this.table) {
+        // sync sticky header row to table scroll
+        const headers = this.table.querySelectorAll('tr[data-header-row]');
+
+        for (let i = 0; i < headers.length; i++) {
+          const header = headers[i];
+          header.scrollLeft = this.wrapper.scrollLeft;
+          header.style.marginRight = '2px';
+        }
+      }
+
+      const {
+        tableOverflowShadowsOptimization
+      } = this.props.getEditorFeatureFlags();
+
+      if (!tableOverflowShadowsOptimization) {
+        this.updateShadows();
+      }
+    });
+
+    _defineProperty(this, "handleTableResizing", () => {
+      const {
+        getNode,
+        containerWidth,
+        options
+      } = this.props;
+      const prevNode = this.node;
+      const node = getNode();
+      const prevAttrs = prevNode.attrs; // We only consider a layout change valid if it's done outside of an autoSize.
+
+      const layoutChanged = prevAttrs.layout !== node.attrs.layout && prevAttrs.__autoSize === node.attrs.__autoSize;
+      const parentWidth = this.getParentNodeWidth();
+      const parentWidthChanged = parentWidth && parentWidth !== this.state.parentWidth;
+      const layoutSize = this.tableNodeLayoutSize(node, containerWidth.width, options);
+      const hasNumberedColumnChanged = prevAttrs.isNumberColumnEnabled !== node.attrs.isNumberColumnEnabled;
+      const noOfColumnsChanged = tablesHaveDifferentNoOfColumns(node, prevNode);
+
+      if ( // Breakout mode/layout changed
+      layoutChanged || // We need to react if our parent changes
+      // Scales the cols widths relative to the new parent width.
+      parentWidthChanged || // Enabling / disabling this feature reduces or adds size to the table.
+      hasNumberedColumnChanged || // This last check is also to cater for dynamic text sizing changing the 'default' layout width
+      // Usually happens on window resize.
+      layoutSize !== this.layoutSize || noOfColumnsChanged) {
+        // If column has been inserted/deleted avoid multi dispatch
+        if (!hasNumberedColumnChanged && !noOfColumnsChanged) {
+          this.scaleTable({
+            parentWidth,
+            layoutChanged
+          });
+        }
+
+        this.updateParentWidth(parentWidth);
+      }
+
+      this.updateTableContainerWidth();
+      this.node = node;
+      this.containerWidth = containerWidth;
+      this.layoutSize = layoutSize;
+    });
+
+    _defineProperty(this, "scaleTable", scaleOptions => {
+      const {
+        view,
+        getNode,
+        getPos,
+        containerWidth,
+        options
+      } = this.props;
+      const node = getNode();
+      const {
+        state,
+        dispatch
+      } = view;
+      const pos = getPos();
+
+      if (!isValidPosition(pos, state)) {
+        return;
+      }
+
+      const domAtPos = view.domAtPos.bind(view);
+      const {
+        width
+      } = containerWidth;
+      this.scaleTableDebounced.cancel();
+      scaleTable(this.table, { ...scaleOptions,
+        node,
+        prevNode: this.node || node,
+        start: pos + 1,
+        containerWidth: width,
+        previousContainerWidth: this.containerWidth.width || width,
+        ...options
+      }, domAtPos)(state, dispatch);
+    });
+
+    _defineProperty(this, "handleAutoSize", () => {
+      if (this.table) {
+        const {
+          view,
+          getNode,
+          getPos,
+          containerWidth
+        } = this.props;
+        const node = getNode();
+        const pos = getPos();
+
+        if (!isValidPosition(pos, view.state)) {
+          return;
+        }
+
+        autoSizeTable(view, node, this.table, pos, {
+          containerWidth: containerWidth.width
+        });
+      }
+    });
+
+    _defineProperty(this, "handleWindowResize", () => {
+      const {
+        getNode,
+        containerWidth
+      } = this.props;
+      const layoutSize = this.tableNodeLayoutSize(getNode());
+
+      if (containerWidth.width > layoutSize) {
+        return;
+      }
+
+      const parentWidth = this.getParentNodeWidth();
+      this.scaleTableDebounced(parentWidth);
+    });
+
+    _defineProperty(this, "updateTableContainerWidth", () => {
+      const {
+        getNode,
+        containerWidth,
+        options
+      } = this.props;
+      const node = getNode();
+
+      if (options && options.isBreakoutEnabled === false) {
+        return;
+      }
+
+      const tableContainerWidth = calcTableWidth(node.attrs.layout, containerWidth.width);
+
+      if (this.state.tableContainerWidth === tableContainerWidth) {
+        return null;
+      }
+
+      this.setState(prevState => {
+        if (options && options.isBreakoutEnabled === false && prevState.tableContainerWidth !== 'inherit') {
+          return {
+            tableContainerWidth: 'inherit'
+          };
+        }
+
+        return {
+          tableContainerWidth
+        };
+      });
+    });
+
+    _defineProperty(this, "getParentNodeWidth", () => {
+      const {
+        getPos,
+        containerWidth,
+        options,
+        view: {
+          state
+        }
+      } = this.props;
+      const pos = getPos();
+
+      if (!isValidPosition(pos, state)) {
+        return;
+      }
+
+      return getParentNodeWidth(pos, state, containerWidth, options && options.isFullWidthModeEnabled);
+    });
+
+    _defineProperty(this, "updateParentWidth", width => {
+      this.setState({
+        parentWidth: width
+      });
+    });
+
+    _defineProperty(this, "tableNodeLayoutSize", (node, containerWidth, options) => getLayoutSize(node.attrs.layout, containerWidth || this.props.containerWidth.width, options || this.props.options || {}));
+
+    _defineProperty(this, "scaleTableDebounced", rafSchedule(this.scaleTable));
+
+    _defineProperty(this, "handleTableResizingDebounced", rafSchedule(this.handleTableResizing));
+
+    _defineProperty(this, "handleScrollDebounced", rafSchedule(this.handleScroll));
+
+    _defineProperty(this, "handleAutoSizeDebounced", rafSchedule(this.handleAutoSize));
+
+    _defineProperty(this, "handleWindowResizeDebounced", rafSchedule(this.handleWindowResize));
+
+    const {
+      options: _options,
+      containerWidth: _containerWidth,
+      getNode: _getNode,
+      getEditorFeatureFlags
+    } = props;
+    this.node = _getNode();
+    this.containerWidth = _containerWidth; // store table size using previous full-width mode so can detect if it has changed
+
+    const isFullWidthModeEnabled = _options ? _options.wasFullWidthModeEnabled : false;
+    this.layoutSize = this.tableNodeLayoutSize(this.node, _containerWidth.width, {
+      isFullWidthModeEnabled
+    }); // Disable inline table editing and resizing controls in Firefox
+    // https://github.com/ProseMirror/prosemirror/issues/432
+
+    if ('execCommand' in document) {
+      ['enableObjectResizing', 'enableInlineTableEditing'].forEach(cmd => {
+        if (document.queryCommandSupported(cmd)) {
+          document.execCommand(cmd, false, 'false');
+        }
+      });
+    }
+
+    const {
+      initialRenderOptimization
+    } = getEditorFeatureFlags();
+
+    if (!initialRenderOptimization) {
+      // @see ED-7945
+      requestAnimationFrame(() => {
+        this.setState({
+          isLoading: false
+        });
+      });
+    }
+  }
+
+  componentDidMount() {
+    const {
+      allowColumnResizing,
+      eventDispatcher
+    } = this.props;
+
+    if (allowColumnResizing && this.wrapper && !isIE11) {
+      this.wrapper.addEventListener('scroll', this.handleScrollDebounced);
+    }
+
+    if (allowColumnResizing) {
+      /**
+       * We no longer use `containerWidth` as a variable to determine an update for table resizing (avoids unnecessary updates).
+       * Instead we use the resize event to only trigger updates when necessary.
+       */
+      window.addEventListener('resize', this.handleWindowResizeDebounced);
+      this.updateTableContainerWidth();
+      this.handleTableResizingDebounced();
+    }
+
+    const currentStickyState = stickyHeadersPluginKey.getState(this.props.view.state);
+
+    if (currentStickyState) {
+      this.onStickyState(currentStickyState);
+    }
+
+    eventDispatcher.on(stickyHeadersPluginKey.key, this.onStickyState);
+  }
+
+  componentWillUnmount() {
+    if (this.wrapper && !isIE11) {
+      this.wrapper.removeEventListener('scroll', this.handleScrollDebounced);
+    }
+
+    this.handleScrollDebounced.cancel();
+    this.scaleTableDebounced.cancel();
+    this.handleTableResizingDebounced.cancel();
+    this.handleAutoSizeDebounced.cancel();
+    this.handleWindowResizeDebounced.cancel();
+
+    if (this.props.allowColumnResizing) {
+      window.removeEventListener('resize', this.handleWindowResizeDebounced);
+    }
+
+    if (this.overflowShadowsObserver) {
+      this.overflowShadowsObserver.dispose();
+    }
+
+    this.props.eventDispatcher.off(stickyHeadersPluginKey.key, this.onStickyState);
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      getNode,
+      isMediaFullscreen,
+      allowColumnResizing
+    } = this.props;
+    const {
+      tableOverflowShadowsOptimization
+    } = this.props.getEditorFeatureFlags();
+
+    if (!tableOverflowShadowsOptimization) {
+      this.updateShadows();
+    } else {
+      var _this$wrapper;
+
+      if ((_this$wrapper = this.wrapper) !== null && _this$wrapper !== void 0 && _this$wrapper.parentElement && this.table && !this.overflowShadowsObserver) {
+        this.overflowShadowsObserver = new OverflowShadowsObserver(this.updateShadowState, this.table, this.wrapper);
+      }
+
+      if (this.overflowShadowsObserver) {
+        var _this$state$stickyHea;
+
+        this.overflowShadowsObserver.observeCells((_this$state$stickyHea = this.state.stickyHeader) === null || _this$state$stickyHea === void 0 ? void 0 : _this$state$stickyHea.sticky, containsHeaderRow(getNode()));
+      }
+    }
+
+    const currentTable = getNode();
+
+    if (currentTable.attrs.__autoSize) {
+      // Wait for next tick to handle auto sizing, gives the browser time to do layout calc etc.
+      this.handleAutoSizeDebounced();
+    } // re-drawing will cause media component get unmounted that will exit fullscreen mode if media is in fullscreen mode
+    // see https://product-fabric.atlassian.net/browse/MEX-1290
+    else if (allowColumnResizing && this.table && !isMediaFullscreen) {
+      // If col widths (e.g. via collab) or number of columns (e.g. delete a column) have changed,
+      // re-draw colgroup.
+      const previousTable = this.node;
+
+      if (tablesHaveDifferentColumnWidths(currentTable, previousTable) || tablesHaveDifferentNoOfColumns(currentTable, previousTable)) {
+        const {
+          view
+        } = this.props;
+        recreateResizeColsByNode(this.table, currentTable);
+        updateControls(this.props.getEditorFeatureFlags)(view.state);
+      }
+
+      this.handleTableResizingDebounced();
+    }
+  }
+
+  updateShadows() {
+    var _this$wrapper2;
+
+    const parent = (_this$wrapper2 = this.wrapper) === null || _this$wrapper2 === void 0 ? void 0 : _this$wrapper2.parentElement;
+
+    if (this.wrapper && parent) {
+      const rightShadows = parent.querySelectorAll(`.${ClassName.TABLE_RIGHT_SHADOW}`);
+      const leftShadows = parent.querySelectorAll(`.${ClassName.TABLE_LEFT_SHADOW}`);
+      updateOverflowShadows(this.props.getEditorFeatureFlags)(this.props.view.state, this.wrapper, this.table, rightShadows, leftShadows);
+    }
+  }
+
+  render() {
+    const {
+      view,
+      getNode,
+      tableResizingPluginState,
+      allowControls = true,
+      isHeaderRowEnabled,
+      ordering,
+      isHeaderColumnEnabled,
+      tableActive,
+      containerWidth
+    } = this.props;
+    const {
+      isLoading,
+      tableContainerWidth,
+      showBeforeShadow,
+      showAfterShadow
+    } = this.state;
+    const node = getNode(); // doesn't work well with WithPluginState
+
+    const {
+      isInDanger,
+      hoveredRows
+    } = getPluginState(view.state);
+    const {
+      stickyHeadersOptimization,
+      initialRenderOptimization,
+      tableRenderOptimization,
+      tableOverflowShadowsOptimization
+    } = this.props.getEditorFeatureFlags();
+    const tableRef = this.table || undefined;
+    const isResizing = !!tableResizingPluginState && !!tableResizingPluginState.dragging;
+    const headerRow = tableRef ? tableRef.querySelector('tr[data-header-row]') : undefined; //dont need to change tableHeight with tableRenderOptimization because it will be observed inside floating components
+
+    const tableHeight = tableRef && !tableRenderOptimization ? tableRef.offsetHeight : undefined;
+    const hasHeaderRow = containsHeaderRow(node);
+    const rowControls = /*#__PURE__*/React.createElement("div", {
+      className: ClassName.ROW_CONTROLS_WRAPPER
+    }, /*#__PURE__*/React.createElement(TableFloatingControls, {
+      editorView: view,
+      tableRef: tableRef,
+      tableActive: tableActive,
+      hoveredRows: hoveredRows,
+      isInDanger: isInDanger,
+      isResizing: isResizing,
+      isNumberColumnEnabled: node.attrs.isNumberColumnEnabled,
+      isHeaderRowEnabled: isHeaderRowEnabled,
+      ordering: ordering,
+      isHeaderColumnEnabled: isHeaderColumnEnabled,
+      hasHeaderRow: hasHeaderRow // pass `selection` and `tableHeight` to control re-render
+      ,
+      selection: view.state.selection,
+      tableHeight: tableHeight,
+      headerRowHeight: headerRow ? headerRow.offsetHeight : undefined,
+      stickyHeader: this.state.stickyHeader,
+      getEditorFeatureFlags: this.props.getEditorFeatureFlags
+    }));
+    const shadowPadding = allowControls && (!isLoading || initialRenderOptimization) && tableActive ? -tableToolbarSize : tableMarginSides;
+    const shadowStyle = tableOverflowShadowsOptimization ? memoizeOne(visible => ({
+      visibility: visible ? 'visible' : 'hidden'
+    })) : NOOP;
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: tableContainerWidth,
+        marginLeft: this.getMarginLeft(tableContainerWidth)
+      },
+      className: classnames(ClassName.TABLE_CONTAINER, {
+        [ClassName.WITH_CONTROLS]: allowControls && tableActive,
+        [ClassName.TABLE_STICKY]: this.state.stickyHeader && hasHeaderRow,
+        [ClassName.HOVERED_DELETE_BUTTON]: isInDanger,
+        [ClassName.TABLE_SELECTED]: isTableSelected(view.state.selection),
+        'less-padding': containerWidth.width < akEditorMobileBreakoutPoint
+      }),
+      "data-number-column": node.attrs.isNumberColumnEnabled,
+      "data-layout": node.attrs.layout
+    }, stickyHeadersOptimization && /*#__PURE__*/React.createElement("div", {
+      className: ClassName.TABLE_STICKY_SENTINEL_TOP
+    }), allowControls && (!isLoading || initialRenderOptimization) && rowControls, /*#__PURE__*/React.createElement("div", {
+      style: shadowStyle(showBeforeShadow),
+      className: ClassName.TABLE_LEFT_SHADOW
+    }), this.state.stickyHeader && /*#__PURE__*/React.createElement("div", {
+      className: `${ClassName.TABLE_LEFT_SHADOW} ${ClassName.TABLE_STICKY_SHADOW}`,
+      style: {
+        visibility: tableOverflowShadowsOptimization ? showBeforeShadow && hasHeaderRow ? 'visible' : 'hidden' : undefined,
+        top: `${this.state.stickyHeader.top + this.state.stickyHeader.padding + shadowPadding + 2}px`
+      }
+    }), /*#__PURE__*/React.createElement("div", {
+      className: classnames(ClassName.TABLE_NODE_WRAPPER),
+      ref: elem => {
+        this.wrapper = elem;
+
+        if (elem) {
+          this.props.contentDOM(elem);
+          const tableElement = elem.querySelector('table');
+
+          if (tableElement !== this.table) {
+            this.table = tableElement;
+          }
+        }
+      }
+    }), /*#__PURE__*/React.createElement("div", {
+      style: shadowStyle(showAfterShadow),
+      className: ClassName.TABLE_RIGHT_SHADOW
+    }), this.state.stickyHeader && /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: 'absolute',
+        right: '-2px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: `${ClassName.TABLE_RIGHT_SHADOW} ${ClassName.TABLE_STICKY_SHADOW}`,
+      style: {
+        visibility: tableOverflowShadowsOptimization ? showAfterShadow && hasHeaderRow ? 'visible' : 'hidden' : undefined,
+        top: `${this.state.stickyHeader.top + this.state.stickyHeader.padding + shadowPadding + 2}px`
+      }
+    })), stickyHeadersOptimization && /*#__PURE__*/React.createElement("div", {
+      className: ClassName.TABLE_STICKY_SENTINEL_BOTTOM
+    }));
+  }
+
+}
+
+_defineProperty(TableComponent, "displayName", 'TableComponent');
+
+export default TableComponent;