@atlaskit/editor-plugin-table 1.1.1 → 1.1.3

package/dist/esm/plugins/table/toolbar.js

@@ -1,5 +1,3 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { defineMessages } from 'react-intl-next';
@@ -91,18 +89,18 @@ export var getToolbarMenuConfig = function getToolbarMenuConfig(config, state, _
     }),
     options: options
   };
-}; // Added these options for mobile. Mobile bridge translates this menu and
+};
+
+// Added these options for mobile. Mobile bridge translates this menu and
 // relay it to the native mobile. Native mobile displays the menu
 // with native widgets. It's enabled via a plugin config.
-
 export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(editorState, editorView, initialSelectionRect, _ref2, getEditorContainerWidth, editorAnalyticsAPI) {
   var _pluginState$pluginCo, _pluginState$pluginCo2;
-
   var formatMessage = _ref2.formatMessage;
   var top = initialSelectionRect.top,
-      bottom = initialSelectionRect.bottom,
-      right = initialSelectionRect.right,
-      left = initialSelectionRect.left;
+    bottom = initialSelectionRect.bottom,
+    right = initialSelectionRect.right,
+    left = initialSelectionRect.left;
   var numberOfColumns = right - left;
   var numberOfRows = bottom - top;
   var pluginState = getPluginState(editorState);
@@ -112,11 +110,9 @@ export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(ed
     onClick: function onClick(state, dispatch, view) {
       var selectionRect = getClosestSelectionRect(state);
       var index = selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.right;
-
       if (index) {
         insertColumnWithAnalytics(getEditorContainerWidth, editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, index)(state, dispatch, view);
       }
-
       return true;
     },
     selected: false,
@@ -130,14 +126,12 @@ export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(ed
     onClick: function onClick(state, dispatch) {
       var selectionRect = getClosestSelectionRect(state);
       var index = selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.bottom;
-
       if (index) {
         insertRowWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, {
           index: index,
           moveCursorToInsertedRow: true
         })(state, dispatch);
       }
-
       return true;
     },
     selected: false,
@@ -152,11 +146,9 @@ export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(ed
     }),
     onClick: function onClick(state, dispatch, view) {
       var selectionRect = getClosestSelectionRect(state);
-
       if (selectionRect) {
         deleteColumnsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, selectionRect)(state, dispatch, view);
       }
-
       return true;
     },
     onFocus: highlightColumnsHandler,
@@ -172,11 +164,9 @@ export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(ed
     }),
     onClick: function onClick(state, dispatch) {
       var selectionRect = getClosestSelectionRect(state);
-
       if (selectionRect) {
         deleteRowsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, selectionRect, false)(state, dispatch);
       }
-
       return true;
     },
     onFocus: highlightRowsHandler,
@@ -198,22 +188,17 @@ export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(ed
     selected: false,
     disabled: !splitCell(editorState)
   }];
-
   if (pluginState !== null && pluginState !== void 0 && (_pluginState$pluginCo = pluginState.pluginConfig) !== null && _pluginState$pluginCo !== void 0 && _pluginState$pluginCo.allowDistributeColumns) {
     var _newResizeStateWithAn;
-
     var newResizeStateWithAnalytics = editorView ? getNewResizeStateFromSelectedColumns(initialSelectionRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth) : undefined;
     var wouldChange = (_newResizeStateWithAn = newResizeStateWithAnalytics === null || newResizeStateWithAnalytics === void 0 ? void 0 : newResizeStateWithAnalytics.changed) !== null && _newResizeStateWithAn !== void 0 ? _newResizeStateWithAn : false;
-
     var distributeColumnWidths = function distributeColumnWidths(state, dispatch) {
       if (newResizeStateWithAnalytics) {
         distributeColumnsWidthsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, newResizeStateWithAnalytics)(state, dispatch);
         return true;
       }
-
       return false;
     };
-
     options.push({
       id: 'editor.table.distributeColumns',
       title: formatMessage(ContextualMenuMessages.distributeColumns),
@@ -222,7 +207,6 @@ export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(ed
       disabled: !wouldChange
     });
   }
-
   if (pluginState !== null && pluginState !== void 0 && (_pluginState$pluginCo2 = pluginState.pluginConfig) !== null && _pluginState$pluginCo2 !== void 0 && _pluginState$pluginCo2.allowColumnSorting) {
     var hasMergedCellsInTable = getMergedCellsPositions(editorState.tr).length > 0;
     var warning = hasMergedCellsInTable ? formatMessage(ContextualMenuMessages.canNotSortTable) : undefined;
@@ -234,7 +218,6 @@ export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(ed
           hoverMergedCells()(state, dispatch);
           return true;
         }
-
         return false;
       },
       onMouseOut: function onMouseOut(state, dispatch) {
@@ -257,7 +240,6 @@ export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(ed
           hoverMergedCells()(state, dispatch);
           return true;
         }
-
         return false;
       },
       onMouseOut: function onMouseOut(state, dispatch) {
@@ -273,7 +255,6 @@ export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(ed
       tooltip: warning
     });
   }
-
   options.push({
     id: 'editor.table.clearCells',
     title: formatMessage(ContextualMenuMessages.clearCells, {
@@ -281,8 +262,7 @@ export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(ed
     }),
     onClick: function onClick(state, dispatch) {
       var _getPluginState = getPluginState(state),
-          targetCellPosition = _getPluginState.targetCellPosition;
-
+        targetCellPosition = _getPluginState.targetCellPosition;
       emptyMultipleCellsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, targetCellPosition)(state, dispatch);
       return true;
     },
@@ -303,31 +283,26 @@ export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(ed
     showSelected: false
   };
 };
-
 var getClosestSelectionRect = function getClosestSelectionRect(state) {
   var selection = state.selection;
   return isSelectionType(selection, 'cell') ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
 };
-
 export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth, editorAnalyticsAPI, getEditorFeatureFlags, getEditorView) {
   return function (config) {
     return function (state, intl) {
       var tableObject = findTable(state.selection);
       var pluginState = getPluginState(state);
       var resizeState = tableResizingPluginKey.getState(state);
-
       if (tableObject && pluginState.editorHasFocus) {
         var nodeType = state.schema.nodes.table;
         var menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI);
-
         var _ref3 = getEditorFeatureFlags() || {},
-            tableCellOptionsInFloatingToolbar = _ref3.tableCellOptionsInFloatingToolbar;
-
+          tableCellOptionsInFloatingToolbar = _ref3.tableCellOptionsInFloatingToolbar;
         var cellItems = getCellItems(config, state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, tableCellOptionsInFloatingToolbar);
-        var colorPicker = getColorPicker(state, menu, intl, getEditorContainerWidth, editorAnalyticsAPI, tableCellOptionsInFloatingToolbar); // Check if we need to show confirm dialog for delete button
+        var colorPicker = getColorPicker(state, menu, intl, getEditorContainerWidth, editorAnalyticsAPI, tableCellOptionsInFloatingToolbar);
 
+        // Check if we need to show confirm dialog for delete button
         var confirmDialog;
-
         if (isReferencedSource(state, tableObject.node)) {
           confirmDialog = function confirmDialog() {
             return {
@@ -349,23 +324,18 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
             };
           };
         }
-
         var getDomRef = function getDomRef(editorView) {
           var element;
           var domAtPos = editorView.domAtPos.bind(editorView);
           var parent = findParentDomRefOfType(nodeType, domAtPos)(state.selection);
-
           if (parent) {
             var tableRef = parent.querySelector('table') || undefined;
-
             if (tableRef) {
               element = closestElement(tableRef, ".".concat(TableCssClassName.TABLE_NODE_WRAPPER)) || undefined;
             }
           }
-
           return element;
         };
-
         return {
           title: 'Table floating controls',
           getDomRef: getDomRef,
@@ -373,7 +343,7 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
           offset: [0, 3],
           zIndex: akEditorFloatingPanelZIndex + 1,
           // Place the context menu slightly above the others
-          items: [menu, separator(menu.hidden)].concat(_toConsumableArray(cellItems), _toConsumableArray(colorPicker), [{
+          items: [menu, separator(menu.hidden)].concat(cellItems, colorPicker, [{
             type: 'extensions-placeholder',
             separator: 'end'
           }, {
@@ -407,25 +377,20 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
           scrollable: true
         };
       }
-
       return;
     };
   };
 };
-
 var separator = function separator(hidden) {
   return {
     type: 'separator',
     hidden: hidden
   };
 };
-
 var getCellItems = function getCellItems(pluginConfig, state, view, _ref4, getEditorContainerWidth, editorAnalyticsAPI, tableCellOptionsInFloatingToolbar) {
   var formatMessage = _ref4.formatMessage;
-
   if (pluginConfig.allowCellOptionsInFloatingToolbar || tableCellOptionsInFloatingToolbar) {
     var initialSelectionRect = getClosestSelectionRect(state);
-
     if (initialSelectionRect) {
       var cellOptions = getToolbarCellOptionsConfig(state, view, initialSelectionRect, {
         formatMessage: formatMessage
@@ -433,23 +398,17 @@ var getCellItems = function getCellItems(pluginConfig, state, view, _ref4, getEd
       return [cellOptions, separator(cellOptions.hidden)];
     }
   }
-
   return [];
 };
-
 var getColorPicker = function getColorPicker(state, menu, _ref5, getEditorContainerWidth, editorAnalyticsAPI, tableCellOptionsInFloatingToolbar) {
   var _node$attrs;
-
   var formatMessage = _ref5.formatMessage;
-
   var _getPluginState2 = getPluginState(state),
-      targetCellPosition = _getPluginState2.targetCellPosition,
-      pluginConfig = _getPluginState2.pluginConfig;
-
+    targetCellPosition = _getPluginState2.targetCellPosition,
+    pluginConfig = _getPluginState2.pluginConfig;
   if (!pluginConfig.allowBackgroundColor || !tableCellOptionsInFloatingToolbar) {
     return [];
   }
-
   var node = targetCellPosition ? state.doc.nodeAt(targetCellPosition) : undefined;
   var currentBackground = (node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.background) || '#ffffff';
   var defaultPalette = cellBackgroundColorPalette.find(function (item) {
@@ -471,41 +430,32 @@ var getColorPicker = function getColorPicker(state, menu, _ref5, getEditorContai
     }
   }, separator(menu.hidden)];
 };
-
 var clickWithCheckboxHandler = function clickWithCheckboxHandler(isChecked, node, editorAnalyticsAPI) {
   return function (state, dispatch) {
     if (!node) {
       return false;
     }
-
     if (!isChecked) {
       return deleteTableWithAnalytics(editorAnalyticsAPI)(state, dispatch);
     } else {
       removeDescendantNodes(node)(state, dispatch);
     }
-
     return true;
   };
 };
-
 var highlightRowsHandler = function highlightRowsHandler(state, dispatch) {
   var selectionRect = getClosestSelectionRect(state);
-
   if (selectionRect) {
     hoverRows(getSelectedRowIndexes(selectionRect), true)(state, dispatch);
     return true;
   }
-
   return false;
 };
-
 var highlightColumnsHandler = function highlightColumnsHandler(state, dispatch) {
   var selectionRect = getClosestSelectionRect(state);
-
   if (selectionRect) {
     hoverColumns(getSelectedColumnIndexes(selectionRect), true)(state, dispatch);
     return true;
   }
-
   return false;
 };

package/dist/esm/plugins/table/transforms/column-width.js

@@ -1,32 +1,30 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { tableNewColumnMinWidth } from '@atlaskit/editor-common/styles';
+import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { hasTableBeenResized } from '../pm-plugins/table-resizing/utils';
 import { setMeta } from './metadata';
 import { getResizeState, normaliseTableLayout } from '../pm-plugins/table-resizing/utils/resize-state';
 import { getTableMaxWidth } from '../pm-plugins/table-resizing/utils/misc';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { scaleTableTo } from '../pm-plugins/table-resizing/utils/scale-table';
+import { isMinCellWidthTable } from '../pm-plugins/table-resizing/utils/colgroup';
+import { insertColumnButtonOffset } from '../ui/common-styles';
 export var updateColumnWidths = function updateColumnWidths(resizeState, table, start) {
   return function (tr) {
     var map = TableMap.get(table);
-    var updatedCellsAttrs = {}; // calculating new attributes for each cell
+    var updatedCellsAttrs = {};
 
+    // calculating new attributes for each cell
     for (var columnIndex = 0; columnIndex < map.width; columnIndex++) {
       for (var rowIndex = 0; rowIndex < map.height; rowIndex++) {
         var width = resizeState.cols[columnIndex].width;
         var mapIndex = rowIndex * map.width + columnIndex;
         var cellPos = map.map[mapIndex];
-
         var attrs = updatedCellsAttrs[cellPos] || _objectSpread({}, table.nodeAt(cellPos).attrs);
-
         var colspan = attrs.colspan || 1;
-
         if (attrs.colwidth && attrs.colwidth.length > colspan) {
           tr = setMeta({
             type: 'UPDATE_COLUMN_WIDTHS',
@@ -37,26 +35,22 @@ export var updateColumnWidths = function updateColumnWidths(resizeState, table,
             }
           })(tr);
           attrs.colwidth = attrs.colwidth.slice(0, colspan);
-        } // Rowspanning cell that has already been handled
-
+        }
 
+        // Rowspanning cell that has already been handled
         if (rowIndex && map.map[mapIndex] === map.map[mapIndex - map.width]) {
           continue;
         }
-
         var colspanIndex = colspan === 1 ? 0 : columnIndex - map.colCount(cellPos);
-
         if (attrs.colwidth && attrs.colwidth[colspanIndex] === width) {
           continue;
         }
-
         var colwidths = attrs.colwidth ? attrs.colwidth.slice() : Array.from({
           length: colspan
         }, function (_) {
           return 0;
         });
         colwidths[colspanIndex] = width;
-
         if (colwidths.length > colspan) {
           tr = setMeta({
             type: 'UPDATE_COLUMN_WIDTHS',
@@ -68,36 +62,29 @@ export var updateColumnWidths = function updateColumnWidths(resizeState, table,
           })(tr);
           colwidths = colwidths.slice(0, colspan);
         }
-
         updatedCellsAttrs[cellPos] = _objectSpread(_objectSpread({}, attrs), {}, {
           colwidth: colwidths.includes(0) ? undefined : colwidths
         });
       }
-    } // updating all cells with new attributes
-
+    }
 
+    // updating all cells with new attributes
     var rows = [];
     var seen = {};
-
     for (var _rowIndex = 0; _rowIndex < map.height; _rowIndex++) {
       var row = table.child(_rowIndex);
       var cells = [];
-
       for (var _columnIndex = 0; _columnIndex < map.width; _columnIndex++) {
         var _mapIndex = _rowIndex * map.width + _columnIndex;
-
         var pos = map.map[_mapIndex];
         var cell = table.nodeAt(pos);
-
         if (!seen[pos] && cell) {
           cells.push(cell.type.createChecked(updatedCellsAttrs[pos] || cell.attrs, cell.content, cell.marks));
           seen[pos] = true;
         }
       }
-
       rows.push(row.type.createChecked(row.attrs, cells, row.marks));
     }
-
     var tablePos = start - 1;
     var selectionBookmark = tr.selection.getBookmark();
     tr.replaceWith(tablePos, tablePos + table.nodeSize, table.type.createChecked(table.attrs, rows, table.marks));
@@ -111,10 +98,10 @@ export var updateColumnWidths = function updateColumnWidths(resizeState, table,
      *
      * @see https://github.com/ProseMirror/prosemirror/issues/645
      */
-
     return tr.setSelection(selectionBookmark.resolve(tr.doc));
   };
 };
+
 /**
  * This function is called when user inserts/deletes a column in a table to;
  * - rescale all columns (if the table did not overflow before the insertion)
@@ -125,27 +112,24 @@ export var updateColumnWidths = function updateColumnWidths(resizeState, table,
  * @param view
  * @returns Updated transaction with rescaled columns for a given table
  */
-
 export var rescaleColumns = function rescaleColumns(getEditorContainerWidth) {
   return function (table, view) {
     return function (tr) {
-      // If the table has been not been resized we skip updating the size
-      // of columns here.
-      if (!view || !hasTableBeenResized(table.node)) {
+      var _tableRef$parentEleme;
+      if (!view) {
         return tr;
       }
-
+      var pos = table.pos;
+      var newTable = tr.doc.nodeAt(pos);
       var state = view.state;
       var domAtPos = view.domAtPos.bind(view);
       var maybeTable = domAtPos(table.start).node;
       var tableRef = maybeTable.closest('table');
-
-      if (!tableRef) {
+      if (!tableRef || !newTable) {
         return tr;
       }
-
-      var layout = normaliseTableLayout(tableRef === null || tableRef === void 0 ? void 0 : tableRef.dataset.layout); // The is the width the table can reach before overflowing
-
+      var layout = normaliseTableLayout(tableRef === null || tableRef === void 0 ? void 0 : tableRef.dataset.layout);
+      // The is the width the table can reach before overflowing
       var maxSize = getTableMaxWidth({
         table: table.node,
         tableStart: table.start,
@@ -153,6 +137,44 @@ export var rescaleColumns = function rescaleColumns(getEditorContainerWidth) {
         layout: layout,
         getEditorContainerWidth: getEditorContainerWidth
       });
+      var tableWidth = tableRef.clientWidth || akEditorDefaultLayoutWidth;
+      var tableMaxWidth = (tableRef === null || tableRef === void 0 ? void 0 : (_tableRef$parentEleme = tableRef.parentElement) === null || _tableRef$parentEleme === void 0 ? void 0 : _tableRef$parentEleme.clientWidth) || 0;
+      tableMaxWidth -= insertColumnButtonOffset;
+      var newTableMap = TableMap.get(newTable);
+      var noOfColumns = newTableMap.width;
+      if (!noOfColumns || noOfColumns <= 0) {
+        return tr;
+      }
+      var columnWidthUnresized = tableWidth / noOfColumns;
+
+      // If the table has not been resized, and the column width is bigger than the minimum column width
+      // we skip updating the size of columns here.
+      if (!hasTableBeenResized(table.node) && columnWidthUnresized > tableCellMinWidth) {
+        return tr;
+      }
+
+      // If the table has not been resized, and the column width is smaller than the minimum column width
+      // Or if the table has been resized, but each column width is either 48px or null
+      // we update the table to have 48px for each column
+      if (!hasTableBeenResized(table.node) && columnWidthUnresized <= tableCellMinWidth || hasTableBeenResized(table.node) && isMinCellWidthTable(table.node)) {
+        var widths = new Array(noOfColumns).fill(tableCellMinWidth);
+        var cols = widths.map(function (width, index) {
+          return {
+            width: tableCellMinWidth,
+            minWidth: tableCellMinWidth,
+            index: index
+          };
+        });
+        var overflow = tableWidth > maxSize;
+        var minWidthResizeState = {
+          cols: cols,
+          widths: widths,
+          maxSize: maxSize,
+          tableWidth: tableWidth,
+          overflow: overflow
+        };
+        return updateColumnWidths(minWidthResizeState, table.node, table.start)(tr);
+      }
       var resizeState = getResizeState({
         minWidth: tableCellMinWidth,
         table: table.node,
@@ -162,13 +184,13 @@ export var rescaleColumns = function rescaleColumns(getEditorContainerWidth) {
         maxSize: maxSize
       });
       var previousTableWidth = resizeState.tableWidth - tableNewColumnMinWidth;
-      var tableDidntPreviouslyOverflow = previousTableWidth <= maxSize; // If the new table width will result in the table going into an overflow state
-      // we resize the cells to avoid the overflow occuring
+      var tableDidntPreviouslyOverflow = previousTableWidth <= Math.max(maxSize, tableMaxWidth);
 
+      // If the new table width will result in the table going into an overflow state
+      // we resize the cells to avoid the overflow occuring
       if (tableDidntPreviouslyOverflow && resizeState.overflow) {
         resizeState = scaleTableTo(resizeState, maxSize);
       }
-
       return updateColumnWidths(resizeState, table.node, table.start)(tr);
     };
   };