@atlaskit/editor-plugin-table 1.1.0 → 1.1.2

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

@@ -22,13 +22,10 @@ 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',
@@ -37,49 +34,39 @@ class TableComponent extends React.Component {
       [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
-
-
+      }
+      // 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
@@ -88,43 +75,34 @@ class TableComponent extends React.Component {
         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,
@@ -133,20 +111,24 @@ class TableComponent extends React.Component {
       } = 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 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
+      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
+      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
@@ -156,16 +138,13 @@ class TableComponent extends React.Component {
             layoutChanged
           });
         }
-
         this.updateParentWidth(parentWidth);
       }
-
       this.updateTableContainerWidth();
       this.node = node;
       this.containerWidth = containerWidth;
       this.layoutSize = layoutSize;
     });
-
     _defineProperty(this, "scaleTable", scaleOptions => {
       const {
         view,
@@ -180,17 +159,16 @@ class TableComponent extends React.Component {
         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,
+      scaleTable(this.table, {
+        ...scaleOptions,
         node,
         prevNode: this.node || node,
         start: pos + 1,
@@ -199,7 +177,6 @@ class TableComponent extends React.Component {
         ...options
       }, domAtPos)(state, dispatch);
     });
-
     _defineProperty(this, "handleAutoSize", () => {
       if (this.table) {
         const {
@@ -210,32 +187,26 @@ class TableComponent extends React.Component {
         } = 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,
@@ -243,30 +214,24 @@ class TableComponent extends React.Component {
         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,
@@ -277,32 +242,22 @@ class TableComponent extends React.Component {
         }
       } = 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,
@@ -310,14 +265,16 @@ class TableComponent extends React.Component {
       getEditorFeatureFlags
     } = props;
     this.node = _getNode();
-    this.containerWidth = _containerWidth; // store table size using previous full-width mode so can detect if it has changed
+    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
+    });
 
+    // 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)) {
@@ -325,11 +282,9 @@ class TableComponent extends React.Component {
         }
       });
     }
-
     const {
       initialRenderOptimization
     } = getEditorFeatureFlags();
-
     if (!initialRenderOptimization) {
       // @see ED-7945
       requestAnimationFrame(() => {
@@ -339,17 +294,14 @@ class TableComponent extends React.Component {
       });
     }
   }
-
   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).
@@ -359,38 +311,29 @@ class TableComponent extends React.Component {
       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 {
       view,
@@ -402,43 +345,35 @@ class TableComponent extends React.Component {
       isInDanger
     } = getPluginState(view.state);
     const table = findTable(view.state.selection);
-
     if (isInDanger && !table) {
       clearHoverSelection()(view.state, view.dispatch);
     }
-
     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
+    }
+    // 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
@@ -446,23 +381,18 @@ class TableComponent extends React.Component {
         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,
@@ -481,8 +411,8 @@ class TableComponent extends React.Component {
       showBeforeShadow,
       showAfterShadow
     } = this.state;
-    const node = getNode(); // doesn't work well with WithPluginState
-
+    const node = getNode();
+    // doesn't work well with WithPluginState
     const {
       isInDanger,
       hoveredRows
@@ -495,8 +425,9 @@ class TableComponent extends React.Component {
     } = 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 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", {
@@ -512,7 +443,8 @@ class TableComponent extends React.Component {
       isHeaderRowEnabled: isHeaderRowEnabled,
       ordering: ordering,
       isHeaderColumnEnabled: isHeaderColumnEnabled,
-      hasHeaderRow: hasHeaderRow // pass `selection` and `tableHeight` to control re-render
+      hasHeaderRow: hasHeaderRow
+      // pass `selection` and `tableHeight` to control re-render
       ,
       selection: view.state.selection,
       tableHeight: tableHeight,
@@ -554,11 +486,9 @@ class TableComponent extends React.Component {
       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;
           }
@@ -583,9 +513,6 @@ class TableComponent extends React.Component {
       "data-testid": "sticky-sentinel-bottom"
     }));
   }
-
 }
-
 _defineProperty(TableComponent, "displayName", 'TableComponent');
-
 export default TableComponent;

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

@@ -10,7 +10,6 @@ import { pluginKey as tableResizingPluginKey } from '../pm-plugins/table-resizin
 import { generateColgroup } from '../pm-plugins/table-resizing/utils';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import TableComponent from './TableComponent';
-
 const tableAttributes = node => {
   return {
     'data-number-column': node.attrs.isNumberColumnEnabled,
@@ -19,53 +18,40 @@ const tableAttributes = node => {
     'data-table-local-id': node.attrs.localId || ''
   };
 };
-
 const toDOM = (node, props) => {
   let colgroup = '';
-
   if (props.allowColumnResizing) {
     colgroup = ['colgroup', {}, ...generateColgroup(node)];
   }
-
   return ['table', tableAttributes(node), colgroup, ['tbody', 0]];
 };
-
 export default class TableView extends ReactNodeView {
   constructor(props) {
     super(props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props, undefined, undefined, undefined, props.hasIntlContext);
-
     _defineProperty(this, "getNode", () => {
       return this.node;
     });
-
     _defineProperty(this, "hasHoveredRows", false);
-
     this.getPos = props.getPos;
     this.tableRenderOptimization = props.tableRenderOptimization;
     this.eventDispatcher = props.eventDispatcher;
   }
-
   getContentDOM() {
     const rendered = DOMSerializer.renderSpec(document, toDOM(this.node, this.reactComponentProps));
-
     if (rendered.dom) {
       this.table = rendered.dom;
     }
-
     return rendered;
   }
-
   setDomAttrs(node) {
     if (!this.table) {
       return;
     }
-
     const attrs = tableAttributes(node);
     Object.keys(attrs).forEach(attr => {
       this.table.setAttribute(attr, attrs[attr]);
     });
   }
-
   render(props, forwardRef) {
     // TODO: ED-15663
     // Please, do not copy or use this kind of code below
@@ -75,10 +61,11 @@ export default class TableView extends ReactNodeView {
       getState: state => {
         return state['widthPlugin$'];
       }
-    }; // TODO: ED-15663
+    };
+
+    // TODO: ED-15663
     // Please, do not copy or use this kind of code below
     // @ts-ignore
-
     const fakeMediaPluginKey = {
       key: 'mediaPlugin$',
       getState: state => {
@@ -123,47 +110,36 @@ export default class TableView extends ReactNodeView {
       }
     });
   }
-
   viewShouldUpdate(nextNode) {
     if (this.tableRenderOptimization) {
       const {
         hoveredRows
       } = getPluginState(this.view.state);
       const hoveredRowsChanged = !!(hoveredRows !== null && hoveredRows !== void 0 && hoveredRows.length) !== this.hasHoveredRows;
-
       if (nextNode.attrs.isNumberColumnEnabled && hoveredRowsChanged) {
         this.hasHoveredRows = !!(hoveredRows !== null && hoveredRows !== void 0 && hoveredRows.length);
         return true;
       }
-
       const node = this.getNode();
-
       if (typeof node.attrs !== typeof nextNode.attrs) {
         return true;
       }
-
       const attrKeys = Object.keys(node.attrs);
       const nextAttrKeys = Object.keys(nextNode.attrs);
-
       if (attrKeys.length !== nextAttrKeys.length) {
         return true;
       }
-
       const tableMap = TableMap.get(node);
       const nextTableMap = TableMap.get(nextNode);
-
       if (tableMap.width !== nextTableMap.width) {
         return true;
       }
-
       return attrKeys.some(key => {
         return node.attrs[key] !== nextNode.attrs[key];
       });
     }
-
     return super.viewShouldUpdate(nextNode);
   }
-
   ignoreMutation(mutation) {
     const {
       type,
@@ -172,25 +148,19 @@ export default class TableView extends ReactNodeView {
         firstChild
       }
     } = mutation;
-
     if (type === 'selection' && (nodeName === null || nodeName === void 0 ? void 0 : nodeName.toUpperCase()) === 'DIV' && (firstChild === null || firstChild === void 0 ? void 0 : firstChild.nodeName.toUpperCase()) === 'TABLE') {
       return false;
     }
-
     return true;
   }
-
   destroy() {
     var _this$eventDispatcher;
-
     if (this.resizeObserver) {
       this.resizeObserver.disconnect();
     }
-
     (_this$eventDispatcher = this.eventDispatcher) === null || _this$eventDispatcher === void 0 ? void 0 : _this$eventDispatcher.emit('TABLE_DELETED', this.node);
     super.destroy();
   }
-
 }
 export const createTableView = (node, view, getPos, portalProviderAPI, eventDispatcher, options, getEditorContainerWidth, getEditorFeatureFlags) => {
   const {