@atlaskit/editor-plugin-table 7.5.4 → 7.5.6

package/dist/es2019/toolbar.js

@@ -80,7 +80,7 @@ export const getToolbarMenuConfig = (config, state, {
 // with native widgets. It's enabled via a plugin config.
 export const getToolbarCellOptionsConfig = (editorState, editorView, initialSelectionRect, {
   formatMessage
-}, getEditorContainerWidth, editorAnalyticsAPI, tablePreserveWidth = false) => {
+}, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled = false) => {
   var _pluginState$pluginCo, _pluginState$pluginCo2;
   const {
     top,
@@ -98,7 +98,7 @@ export const getToolbarCellOptionsConfig = (editorState, editorView, initialSele
       const selectionRect = getClosestSelectionRect(state);
       const index = selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.right;
       if (index) {
-        insertColumnWithAnalytics(getEditorContainerWidth, editorAnalyticsAPI, tablePreserveWidth)(INPUT_METHOD.FLOATING_TB, index)(state, dispatch, view);
+        insertColumnWithAnalytics(editorAnalyticsAPI, isTableScalingEnabled)(INPUT_METHOD.FLOATING_TB, index)(state, dispatch, view);
       }
       return true;
     },
@@ -177,7 +177,7 @@ export const getToolbarCellOptionsConfig = (editorState, editorView, initialSele
   }];
   if (pluginState !== null && pluginState !== void 0 && (_pluginState$pluginCo = pluginState.pluginConfig) !== null && _pluginState$pluginCo !== void 0 && _pluginState$pluginCo.allowDistributeColumns) {
     var _newResizeStateWithAn;
-    const newResizeStateWithAnalytics = editorView ? getNewResizeStateFromSelectedColumns(initialSelectionRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth, tablePreserveWidth) : undefined;
+    const newResizeStateWithAnalytics = editorView ? getNewResizeStateFromSelectedColumns(initialSelectionRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled) : undefined;
     const wouldChange = (_newResizeStateWithAn = newResizeStateWithAnalytics === null || newResizeStateWithAnalytics === void 0 ? void 0 : newResizeStateWithAnalytics.changed) !== null && _newResizeStateWithAn !== void 0 ? _newResizeStateWithAn : false;
     const distributeColumnWidths = (state, dispatch) => {
       if (newResizeStateWithAnalytics) {
@@ -297,12 +297,12 @@ export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, ge
     const nodeType = state.schema.nodes.table;
     const menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI);
     const {
-      tablePreserveWidth = false
-    } = getEditorFeatureFlags();
+      isTableScalingEnabled = false
+    } = getPluginState(state);
     let cellItems;
-    cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(config, state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, tablePreserveWidth);
+    cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled);
     let columnSettingsItems;
-    columnSettingsItems = pluginState.isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? getColumnSettingItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, tablePreserveWidth) : [];
+    columnSettingsItems = pluginState.isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? getColumnSettingItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled) : [];
     const colorPicker = getColorPicker(state, menu, intl, editorAnalyticsAPI);
 
     // Check if we need to show confirm dialog for delete button
@@ -391,24 +391,24 @@ const separator = hidden => {
     hidden: hidden
   };
 };
-const getCellItems = (pluginConfig, state, view, {
+const getCellItems = (state, view, {
   formatMessage
-}, getEditorContainerWidth, editorAnalyticsAPI, tablePreserveWidth = false) => {
+}, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled = false) => {
   const initialSelectionRect = getClosestSelectionRect(state);
   if (initialSelectionRect) {
     const cellOptions = getToolbarCellOptionsConfig(state, view, initialSelectionRect, {
       formatMessage
-    }, getEditorContainerWidth, editorAnalyticsAPI, tablePreserveWidth);
+    }, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled);
     return [cellOptions, separator(cellOptions.hidden)];
   }
   return [];
 };
-export const getDistributeConfig = (getEditorContainerWidth, editorAnalyticsAPI, tablePreserveWidth = false) => (state, dispatch, editorView) => {
+export const getDistributeConfig = (getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled = false) => (state, dispatch, editorView) => {
   const selectionOrTableRect = getClosestSelectionOrTableRect(state);
   if (!editorView || !selectionOrTableRect) {
     return false;
   }
-  const newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(selectionOrTableRect, state, editorView.domAtPos.bind(editorView), getEditorContainerWidth, tablePreserveWidth);
+  const newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(selectionOrTableRect, state, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled);
   if (newResizeStateWithAnalytics) {
     distributeColumnsWidthsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, newResizeStateWithAnalytics)(state, dispatch);
     return true;
@@ -420,14 +420,14 @@ export const getDistributeConfig = (getEditorContainerWidth, editorAnalyticsAPI,
 // fixed column button should be in this function call in the future
 const getColumnSettingItems = (editorState, editorView, {
   formatMessage
-}, getEditorContainerWidth, editorAnalyticsAPI, tablePreserveWidth = false) => {
+}, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled = false) => {
   var _newResizeStateWithAn2, _pluginState$pluginCo3;
   const pluginState = getPluginState(editorState);
   const selectionOrTableRect = getClosestSelectionOrTableRect(editorState);
   if (!selectionOrTableRect || !editorView) {
     return [];
   }
-  const newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(selectionOrTableRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth, tablePreserveWidth);
+  const newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(selectionOrTableRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled);
   const wouldChange = (_newResizeStateWithAn2 = newResizeStateWithAnalytics === null || newResizeStateWithAnalytics === void 0 ? void 0 : newResizeStateWithAnalytics.changed) !== null && _newResizeStateWithAn2 !== void 0 ? _newResizeStateWithAn2 : false;
   if (pluginState !== null && pluginState !== void 0 && (_pluginState$pluginCo3 = pluginState.pluginConfig) !== null && _pluginState$pluginCo3 !== void 0 && _pluginState$pluginCo3.allowDistributeColumns && pluginState.isDragAndDropEnabled) {
     return [{
@@ -435,7 +435,7 @@ const getColumnSettingItems = (editorState, editorView, {
       type: 'button',
       title: formatMessage(messages.distributeColumns),
       icon: DistributeColumnIcon,
-      onClick: (state, dispatch, view) => getDistributeConfig(getEditorContainerWidth, editorAnalyticsAPI, tablePreserveWidth)(state, dispatch, view),
+      onClick: (state, dispatch, view) => getDistributeConfig(getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled)(state, dispatch, view),
       disabled: !wouldChange
     }, {
       type: 'separator'

package/dist/es2019/transforms/column-width.js

@@ -2,7 +2,7 @@ import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { AttrStep } from '@atlaskit/editor-prosemirror/transform';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { getTableContainerElement, getTableElementWidth, hasTableBeenResized } from '../pm-plugins/table-resizing/utils';
+import { getTableContainerElementWidth, getTableElementWidth, hasTableBeenResized } from '../pm-plugins/table-resizing/utils';
 import { isMinCellWidthTable } from '../pm-plugins/table-resizing/utils/colgroup';
 import { getResizeState } from '../pm-plugins/table-resizing/utils/resize-state';
 import { scaleTableTo } from '../pm-plugins/table-resizing/utils/scale-table';
@@ -85,7 +85,7 @@ export const updateColumnWidths = (resizeState, table, start) => tr => {
  * @param view
  * @returns Updated transaction with rescaled columns for a given table
  */
-export const rescaleColumns = (tablePreserveWidth = false) => (table, view) => tr => {
+export const rescaleColumns = (isTableScalingEnabled = false) => (table, view) => tr => {
   if (!view) {
     return tr;
   }
@@ -102,11 +102,11 @@ export const rescaleColumns = (tablePreserveWidth = false) => (table, view) => t
     possibleMaxWidth: 0,
     isResized
   };
-  if (tablePreserveWidth) {
+  if (isTableScalingEnabled) {
     previousTableInfo = {
       // TODO - ensure correct width is returned when table doesn't have a width value
       width: getTableElementWidth(table.node),
-      possibleMaxWidth: getBooleanFF('platform.editor.custom-table-width') ? getTableContainerElement(table.node) : getTableContainerElement(table.node) - insertColumnButtonOffset,
+      possibleMaxWidth: getBooleanFF('platform.editor.custom-table-width') ? getTableContainerElementWidth(table.node) : getTableContainerElementWidth(table.node) - insertColumnButtonOffset,
       isResized
     };
   } else {
@@ -162,7 +162,7 @@ export const rescaleColumns = (tablePreserveWidth = false) => (table, view) => t
     tableRef,
     domAtPos,
     maxSize: previousTableInfo.possibleMaxWidth,
-    tablePreserveWidth
+    isTableScalingEnabled
   });
 
   // Two scenarios that require scaling:

package/dist/es2019/transforms/delete-columns.js

@@ -192,7 +192,7 @@ function fixRowSpans(table) {
   }
   return table.type.createChecked(table.attrs, rows, table.marks);
 }
-export const deleteColumns = (rect, allowCustomStep, view, tablePreserveWidth = false) => tr => {
+export const deleteColumns = (rect, allowCustomStep, view, isTableScalingEnabled = false) => tr => {
   let updatedTr = tr;
   updatedTr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
     name: TABLE_OVERFLOW_CHANGE_TRIGGER.DELETED_COLUMN
@@ -204,7 +204,7 @@ export const deleteColumns = (rect, allowCustomStep, view, tablePreserveWidth =
   }
   const table = findTable(updatedTr.selection);
   if (table) {
-    updatedTr = rescaleColumns(tablePreserveWidth)(table, view)(updatedTr);
+    updatedTr = rescaleColumns(isTableScalingEnabled)(table, view)(updatedTr);
   }
   return updatedTr;
 };

package/dist/es2019/ui/FloatingContextualMenu/ContextualMenu.js

@@ -302,11 +302,11 @@ export class ContextualMenu extends Component {
         }
       } = getPluginState(editorView.state);
       if (allowDistributeColumns && (!isDragAndDropEnabled || !getBooleanFF('platform.editor.table.new-cell-context-menu-styling'))) {
-        var _this$props$getEditor, _this$props, _newResizeState$chang;
+        var _newResizeState$chang;
         const {
-          tablePreserveWidth = false
-        } = ((_this$props$getEditor = (_this$props = this.props).getEditorFeatureFlags) === null || _this$props$getEditor === void 0 ? void 0 : _this$props$getEditor.call(_this$props)) || {};
-        const newResizeState = getNewResizeStateFromSelectedColumns(selectionRect, editorView.state, editorView.domAtPos.bind(editorView), getEditorContainerWidth, tablePreserveWidth);
+          isTableScalingEnabled = false
+        } = getPluginState(editorView.state);
+        const newResizeState = getNewResizeStateFromSelectedColumns(selectionRect, editorView.state, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled);
         const wouldChange = (_newResizeState$chang = newResizeState === null || newResizeState === void 0 ? void 0 : newResizeState.changed) !== null && _newResizeState$chang !== void 0 ? _newResizeState$chang : false;
         return {
           content: formatMessage(messages.distributeColumns),
@@ -400,8 +400,7 @@ export class ContextualMenu extends Component {
         editorView,
         selectionRect,
         editorAnalyticsAPI,
-        getEditorContainerWidth,
-        getEditorFeatureFlags
+        getEditorContainerWidth
       } = this.props;
       // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
       const {
@@ -409,11 +408,9 @@ export class ContextualMenu extends Component {
         dispatch
       } = editorView;
       const {
-        targetCellPosition
+        targetCellPosition,
+        isTableScalingEnabled = false
       } = getPluginState(state);
-      const {
-        tablePreserveWidth = false
-      } = (getEditorFeatureFlags === null || getEditorFeatureFlags === void 0 ? void 0 : getEditorFeatureFlags()) || {};
       switch (item.value.name) {
         case 'sort_column_desc':
           sortColumnWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, selectionRect.left, SortOrder.DESC)(state, dispatch);
@@ -432,7 +429,7 @@ export class ContextualMenu extends Component {
           this.toggleOpen();
           break;
         case 'distribute_columns':
-          const newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(selectionRect, state, editorView.domAtPos.bind(editorView), getEditorContainerWidth, tablePreserveWidth);
+          const newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(selectionRect, state, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled);
           if (newResizeStateWithAnalytics) {
             distributeColumnsWidthsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, newResizeStateWithAnalytics)(state, dispatch);
             this.toggleOpen();
@@ -443,7 +440,7 @@ export class ContextualMenu extends Component {
           this.toggleOpen();
           break;
         case 'insert_column':
-          insertColumnWithAnalytics(getEditorContainerWidth, editorAnalyticsAPI, tablePreserveWidth)(INPUT_METHOD.CONTEXT_MENU, selectionRect.right)(state, dispatch, editorView);
+          insertColumnWithAnalytics(editorAnalyticsAPI, isTableScalingEnabled)(INPUT_METHOD.CONTEXT_MENU, selectionRect.right)(state, dispatch, editorView);
           this.toggleOpen();
           break;
         case 'insert_row':

package/dist/es2019/ui/FloatingContextualMenu/index.js

@@ -16,8 +16,7 @@ const FloatingContextualMenu = ({
   isOpen,
   pluginConfig,
   editorAnalyticsAPI,
-  getEditorContainerWidth,
-  getEditorFeatureFlags
+  getEditorContainerWidth
 }) => {
   // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
   const {
@@ -69,8 +68,7 @@ const FloatingContextualMenu = ({
     selectionRect: selectionRect,
     boundariesElement: boundariesElement,
     editorAnalyticsAPI: editorAnalyticsAPI,
-    getEditorContainerWidth: getEditorContainerWidth,
-    getEditorFeatureFlags: getEditorFeatureFlags
+    getEditorContainerWidth: getEditorContainerWidth
   })));
 };
 FloatingContextualMenu.displayName = 'FloatingContextualMenu';

package/dist/es2019/ui/FloatingDragMenu/DragMenu.js

@@ -176,7 +176,7 @@ export const DragMenu = /*#__PURE__*/React.memo(({
   mountPoint,
   scrollableElement,
   boundariesElement,
-  tablePreserveWidth
+  isTableScalingEnabled
 }) => {
   var _pluginConfig$allowBa;
   const {
@@ -196,7 +196,7 @@ export const DragMenu = /*#__PURE__*/React.memo(({
   const shouldMoveDisabled = index !== undefined && hasMergedCells(index)(selection);
   const hasMergedCellsInTable = getMergedCellsPositions(state.tr).length > 0;
   const allowBackgroundColor = (_pluginConfig$allowBa = pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.allowBackgroundColor) !== null && _pluginConfig$allowBa !== void 0 ? _pluginConfig$allowBa : false;
-  const dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, !shouldMoveDisabled, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.isHeaderRowRequired, tablePreserveWidth);
+  const dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, !shouldMoveDisabled, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.isHeaderRowRequired, isTableScalingEnabled);
   const {
     menuItems,
     menuCallback

package/dist/es2019/ui/FloatingDragMenu/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
+import { getPluginState } from '../../pm-plugins/plugin-factory';
 import { dragMenuDropdownWidth, tablePopupMenuFitHeight } from '../consts';
 import DragMenu from './DragMenu';
 const FloatingDragMenu = ({
@@ -17,8 +18,7 @@ const FloatingDragMenu = ({
   getEditorContainerWidth,
   editorAnalyticsAPI,
   stickyHeaders,
-  pluginConfig,
-  getEditorFeatureFlags
+  pluginConfig
 }) => {
   if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
     return null;
@@ -30,8 +30,8 @@ const FloatingDragMenu = ({
     return null;
   }
   const {
-    tablePreserveWidth = false
-  } = getEditorFeatureFlags();
+    isTableScalingEnabled = false
+  } = getPluginState(editorView.state);
   return /*#__PURE__*/React.createElement(Popup, {
     alignX: direction === 'row' ? 'right' : undefined,
     alignY: direction === 'row' ? 'start' : undefined,
@@ -65,7 +65,7 @@ const FloatingDragMenu = ({
     mountPoint: mountPoint,
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
-    tablePreserveWidth: tablePreserveWidth
+    isTableScalingEnabled: isTableScalingEnabled
   }));
 };
 FloatingDragMenu.displayName = 'FloatingDragMenu';

package/dist/es2019/ui/FloatingInsertButton/index.js

@@ -11,6 +11,7 @@ import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { insertColumnWithAnalytics, insertRowWithAnalytics } from '../../commands-with-analytics';
+import { getPluginState } from '../../pm-plugins/plugin-factory';
 import { TableCssClassName as ClassName } from '../../types';
 import { checkIfNumberColumnEnabled } from '../../utils';
 import getPopupOptions from './getPopupOptions';
@@ -173,20 +174,18 @@ export class FloatingInsertButton extends React.Component {
     const {
       editorView,
       insertColumnButtonIndex,
-      editorAnalyticsAPI,
-      getEditorContainerWidth
+      editorAnalyticsAPI
     } = this.props;
     if (typeof insertColumnButtonIndex !== 'undefined') {
-      var _this$props$getEditor, _this$props;
       event.preventDefault();
       const {
-        tablePreserveWidth = false
-      } = ((_this$props$getEditor = (_this$props = this.props).getEditorFeatureFlags) === null || _this$props$getEditor === void 0 ? void 0 : _this$props$getEditor.call(_this$props)) || {};
+        isTableScalingEnabled = false
+      } = getPluginState(editorView.state);
       const {
         state,
         dispatch
       } = editorView;
-      insertColumnWithAnalytics(getEditorContainerWidth, editorAnalyticsAPI, tablePreserveWidth)(INPUT_METHOD.BUTTON, insertColumnButtonIndex)(state, dispatch, editorView);
+      insertColumnWithAnalytics(editorAnalyticsAPI, isTableScalingEnabled)(INPUT_METHOD.BUTTON, insertColumnButtonIndex)(state, dispatch, editorView);
     }
   }
 }

package/dist/es2019/ui/TableFloatingColumnControls/index.js

@@ -18,37 +18,15 @@ export const TableFloatingColumnControls = ({
   isTableHovered,
   tableContainerWidth,
   isNumberColumnEnabled,
-  getScrollOffset
+  getScrollOffset,
+  tableWrapperHeight
 }) => {
-  const [tableRect, setTableRect] = useState({
-    width: 0,
-    height: 0
-  });
   const [isDragging, setIsDragging] = useState(false);
   const containerRef = useRef(null);
   const node = getNode();
   const currentNodeLocalId = node === null || node === void 0 ? void 0 : node.attrs.localId;
   const hasHeaderColumn = containsHeaderColumn(node);
   const stickyTop = stickyHeader && stickyHeader.sticky && hasHeaderRow ? stickyHeader.top : undefined;
-  useEffect(() => {
-    var _window;
-    if (tableRef && (_window = window) !== null && _window !== void 0 && _window.ResizeObserver) {
-      const resizeObserver = new ResizeObserver(entries => {
-        for (let entry of entries) {
-          setTableRect(prev => {
-            if (prev.width !== entry.contentRect.width || prev.height !== entry.contentRect.height) {
-              return entry.contentRect;
-            }
-            return prev;
-          });
-        }
-      });
-      resizeObserver.observe(tableRef);
-      return () => {
-        resizeObserver.disconnect();
-      };
-    }
-  }, [tableRef]);
   useEffect(() => {
     return monitorForElements({
       canMonitor({
@@ -71,11 +49,11 @@ export const TableFloatingColumnControls = ({
   }, [editorView, currentNodeLocalId]);
   const rowHeights = useMemo(() => {
     // NOTE: we don't care so much as to what tableHeight is, we only care that it changed and is a sane value.
-    if (tableRef && !!tableRect.height) {
+    if (tableRef && !!tableWrapperHeight) {
       return getRowHeights(tableRef);
     }
     return [0];
-  }, [tableRef, tableRect.height]);
+  }, [tableRef, tableWrapperHeight]);
   if (!tableRef || !tableActive || isResizing) {
     return null;
   }
@@ -112,7 +90,7 @@ export const TableFloatingColumnControls = ({
   }), isDragging && /*#__PURE__*/React.createElement(ColumnDropTargets, {
     tableRef: tableRef,
     isHeaderSticky: (stickyHeader === null || stickyHeader === void 0 ? void 0 : stickyHeader.sticky) && hasHeaderRow,
-    tableHeight: tableRect.height,
+    tableHeight: tableWrapperHeight,
     localId: currentNodeLocalId,
     colWidths: colWidths,
     getScrollOffset: getScrollOffset