@atlaskit/editor-plugin-table 1.1.1 → 1.1.3

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

@@ -88,15 +88,15 @@ export const getToolbarMenuConfig = (config, state, {
     hidden: options.every(option => option.hidden),
     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 const getToolbarCellOptionsConfig = (editorState, editorView, initialSelectionRect, {
   formatMessage
 }, getEditorContainerWidth, editorAnalyticsAPI) => {
   var _pluginState$pluginCo, _pluginState$pluginCo2;
-
   const {
     top,
     bottom,
@@ -112,11 +112,9 @@ export const getToolbarCellOptionsConfig = (editorState, editorView, initialSele
     onClick: (state, dispatch, view) => {
       const selectionRect = getClosestSelectionRect(state);
       const 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 +128,12 @@ export const getToolbarCellOptionsConfig = (editorState, editorView, initialSele
     onClick: (state, dispatch) => {
       const selectionRect = getClosestSelectionRect(state);
       const index = selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.bottom;
-
       if (index) {
         insertRowWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, {
           index,
           moveCursorToInsertedRow: true
         })(state, dispatch);
       }
-
       return true;
     },
     selected: false,
@@ -152,11 +148,9 @@ export const getToolbarCellOptionsConfig = (editorState, editorView, initialSele
     }),
     onClick: (state, dispatch, view) => {
       const selectionRect = getClosestSelectionRect(state);
-
       if (selectionRect) {
         deleteColumnsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, selectionRect)(state, dispatch, view);
       }
-
       return true;
     },
     onFocus: highlightColumnsHandler,
@@ -172,11 +166,9 @@ export const getToolbarCellOptionsConfig = (editorState, editorView, initialSele
     }),
     onClick: (state, dispatch) => {
       const selectionRect = getClosestSelectionRect(state);
-
       if (selectionRect) {
         deleteRowsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, selectionRect, false)(state, dispatch);
       }
-
       return true;
     },
     onFocus: highlightRowsHandler,
@@ -198,22 +190,17 @@ export const getToolbarCellOptionsConfig = (editorState, editorView, initialSele
     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;
-
     const newResizeStateWithAnalytics = editorView ? getNewResizeStateFromSelectedColumns(initialSelectionRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth) : 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) {
         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 +209,6 @@ export const getToolbarCellOptionsConfig = (editorState, editorView, initialSele
       disabled: !wouldChange
     });
   }
-
   if (pluginState !== null && pluginState !== void 0 && (_pluginState$pluginCo2 = pluginState.pluginConfig) !== null && _pluginState$pluginCo2 !== void 0 && _pluginState$pluginCo2.allowColumnSorting) {
     const hasMergedCellsInTable = getMergedCellsPositions(editorState.tr).length > 0;
     const warning = hasMergedCellsInTable ? formatMessage(ContextualMenuMessages.canNotSortTable) : undefined;
@@ -234,7 +220,6 @@ export const getToolbarCellOptionsConfig = (editorState, editorView, initialSele
           hoverMergedCells()(state, dispatch);
           return true;
         }
-
         return false;
       },
       onMouseOut: (state, dispatch) => {
@@ -257,7 +242,6 @@ export const getToolbarCellOptionsConfig = (editorState, editorView, initialSele
           hoverMergedCells()(state, dispatch);
           return true;
         }
-
         return false;
       },
       onMouseOut: (state, dispatch) => {
@@ -273,7 +257,6 @@ export const getToolbarCellOptionsConfig = (editorState, editorView, initialSele
       tooltip: warning
     });
   }
-
   options.push({
     id: 'editor.table.clearCells',
     title: formatMessage(ContextualMenuMessages.clearCells, {
@@ -303,17 +286,14 @@ export const getToolbarCellOptionsConfig = (editorState, editorView, initialSele
     showSelected: false
   };
 };
-
 const getClosestSelectionRect = state => {
   const selection = state.selection;
   return isSelectionType(selection, 'cell') ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
 };
-
 export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, getEditorFeatureFlags, getEditorView) => config => (state, intl) => {
   const tableObject = findTable(state.selection);
   const pluginState = getPluginState(state);
   const resizeState = tableResizingPluginKey.getState(state);
-
   if (tableObject && pluginState.editorHasFocus) {
     const nodeType = state.schema.nodes.table;
     const menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI);
@@ -321,10 +301,10 @@ export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, ge
       tableCellOptionsInFloatingToolbar
     } = getEditorFeatureFlags() || {};
     const cellItems = getCellItems(config, state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, tableCellOptionsInFloatingToolbar);
-    const colorPicker = getColorPicker(state, menu, intl, getEditorContainerWidth, editorAnalyticsAPI, tableCellOptionsInFloatingToolbar); // Check if we need to show confirm dialog for delete button
+    const colorPicker = getColorPicker(state, menu, intl, getEditorContainerWidth, editorAnalyticsAPI, tableCellOptionsInFloatingToolbar);
 
+    // Check if we need to show confirm dialog for delete button
     let confirmDialog;
-
     if (isReferencedSource(state, tableObject.node)) {
       confirmDialog = () => ({
         title: intl.formatMessage(tableMessages.deleteElementTitle),
@@ -339,23 +319,18 @@ export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, ge
         onConfirm: (isChecked = false) => clickWithCheckboxHandler(isChecked, tableObject.node)
       });
     }
-
     const getDomRef = editorView => {
       let element;
       const domAtPos = editorView.domAtPos.bind(editorView);
       const parent = findParentDomRefOfType(nodeType, domAtPos)(state.selection);
-
       if (parent) {
         const tableRef = parent.querySelector('table') || undefined;
-
         if (tableRef) {
           element = closestElement(tableRef, `.${TableCssClassName.TABLE_NODE_WRAPPER}`) || undefined;
         }
       }
-
       return element;
     };
-
     return {
       title: 'Table floating controls',
       getDomRef,
@@ -397,23 +372,19 @@ export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, ge
       scrollable: true
     };
   }
-
   return;
 };
-
 const separator = hidden => {
   return {
     type: 'separator',
     hidden: hidden
   };
 };
-
 const getCellItems = (pluginConfig, state, view, {
   formatMessage
 }, getEditorContainerWidth, editorAnalyticsAPI, tableCellOptionsInFloatingToolbar) => {
   if (pluginConfig.allowCellOptionsInFloatingToolbar || tableCellOptionsInFloatingToolbar) {
     const initialSelectionRect = getClosestSelectionRect(state);
-
     if (initialSelectionRect) {
       const cellOptions = getToolbarCellOptionsConfig(state, view, initialSelectionRect, {
         formatMessage
@@ -421,24 +392,19 @@ const getCellItems = (pluginConfig, state, view, {
       return [cellOptions, separator(cellOptions.hidden)];
     }
   }
-
   return [];
 };
-
 const getColorPicker = (state, menu, {
   formatMessage
 }, getEditorContainerWidth, editorAnalyticsAPI, tableCellOptionsInFloatingToolbar) => {
   var _node$attrs;
-
   const {
     targetCellPosition,
     pluginConfig
   } = getPluginState(state);
-
   if (!pluginConfig.allowBackgroundColor || !tableCellOptionsInFloatingToolbar) {
     return [];
   }
-
   const node = targetCellPosition ? state.doc.nodeAt(targetCellPosition) : undefined;
   const currentBackground = (node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.background) || '#ffffff';
   const defaultPalette = cellBackgroundColorPalette.find(item => item.value === currentBackground) || {
@@ -456,39 +422,30 @@ const getColorPicker = (state, menu, {
     onChange: option => setColorWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, option.value, targetCellPosition)
   }, separator(menu.hidden)];
 };
-
 const clickWithCheckboxHandler = (isChecked, node, editorAnalyticsAPI) => (state, dispatch) => {
   if (!node) {
     return false;
   }
-
   if (!isChecked) {
     return deleteTableWithAnalytics(editorAnalyticsAPI)(state, dispatch);
   } else {
     removeDescendantNodes(node)(state, dispatch);
   }
-
   return true;
 };
-
 const highlightRowsHandler = (state, dispatch) => {
   const selectionRect = getClosestSelectionRect(state);
-
   if (selectionRect) {
     hoverRows(getSelectedRowIndexes(selectionRect), true)(state, dispatch);
     return true;
   }
-
   return false;
 };
-
 const highlightColumnsHandler = (state, dispatch) => {
   const selectionRect = getClosestSelectionRect(state);
-
   if (selectionRect) {
     hoverColumns(getSelectedColumnIndexes(selectionRect), true)(state, dispatch);
     return true;
   }
-
   return false;
 };

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

@@ -1,15 +1,19 @@
 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 const updateColumnWidths = (resizeState, table, start) => tr => {
   const map = TableMap.get(table);
-  const updatedCellsAttrs = {}; // calculating new attributes for each cell
+  const updatedCellsAttrs = {};
 
+  // calculating new attributes for each cell
   for (let columnIndex = 0; columnIndex < map.width; columnIndex++) {
     for (let rowIndex = 0; rowIndex < map.height; rowIndex++) {
       const {
@@ -17,10 +21,10 @@ export const updateColumnWidths = (resizeState, table, start) => tr => {
       } = resizeState.cols[columnIndex];
       const mapIndex = rowIndex * map.width + columnIndex;
       const cellPos = map.map[mapIndex];
-      const attrs = updatedCellsAttrs[cellPos] || { ...table.nodeAt(cellPos).attrs
+      const attrs = updatedCellsAttrs[cellPos] || {
+        ...table.nodeAt(cellPos).attrs
       };
       const colspan = attrs.colspan || 1;
-
       if (attrs.colwidth && attrs.colwidth.length > colspan) {
         tr = setMeta({
           type: 'UPDATE_COLUMN_WIDTHS',
@@ -31,24 +35,20 @@ export const updateColumnWidths = (resizeState, table, start) => tr => {
           }
         })(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;
       }
-
       const colspanIndex = colspan === 1 ? 0 : columnIndex - map.colCount(cellPos);
-
       if (attrs.colwidth && attrs.colwidth[colspanIndex] === width) {
         continue;
       }
-
       let colwidths = attrs.colwidth ? attrs.colwidth.slice() : Array.from({
         length: colspan
       }, _ => 0);
       colwidths[colspanIndex] = width;
-
       if (colwidths.length > colspan) {
         tr = setMeta({
           type: 'UPDATE_COLUMN_WIDTHS',
@@ -60,35 +60,30 @@ export const updateColumnWidths = (resizeState, table, start) => tr => {
         })(tr);
         colwidths = colwidths.slice(0, colspan);
       }
-
-      updatedCellsAttrs[cellPos] = { ...attrs,
+      updatedCellsAttrs[cellPos] = {
+        ...attrs,
         colwidth: colwidths.includes(0) ? undefined : colwidths
       };
     }
-  } // updating all cells with new attributes
-
+  }
 
+  // updating all cells with new attributes
   const rows = [];
   const seen = {};
-
   for (let rowIndex = 0; rowIndex < map.height; rowIndex++) {
     const row = table.child(rowIndex);
     const cells = [];
-
     for (let columnIndex = 0; columnIndex < map.width; columnIndex++) {
       const mapIndex = rowIndex * map.width + columnIndex;
       const pos = map.map[mapIndex];
       const 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));
   }
-
   const tablePos = start - 1;
   const selectionBookmark = tr.selection.getBookmark();
   tr.replaceWith(tablePos, tablePos + table.nodeSize, table.type.createChecked(table.attrs, rows, table.marks));
@@ -102,9 +97,9 @@ export const updateColumnWidths = (resizeState, table, start) => tr => {
    *
    * @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)
@@ -115,27 +110,24 @@ export const updateColumnWidths = (resizeState, table, start) => tr => {
  * @param view
  * @returns Updated transaction with rescaled columns for a given table
  */
-
 export const rescaleColumns = getEditorContainerWidth => (table, view) => 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;
   }
-
+  const pos = table.pos;
+  const newTable = tr.doc.nodeAt(pos);
   const {
     state
   } = view;
   const domAtPos = view.domAtPos.bind(view);
   const maybeTable = domAtPos(table.start).node;
   const tableRef = maybeTable.closest('table');
-
-  if (!tableRef) {
+  if (!tableRef || !newTable) {
     return tr;
   }
-
-  const layout = normaliseTableLayout(tableRef === null || tableRef === void 0 ? void 0 : tableRef.dataset.layout); // The is the width the table can reach before overflowing
-
+  const layout = normaliseTableLayout(tableRef === null || tableRef === void 0 ? void 0 : tableRef.dataset.layout);
+  // The is the width the table can reach before overflowing
   const maxSize = getTableMaxWidth({
     table: table.node,
     tableStart: table.start,
@@ -143,6 +135,42 @@ export const rescaleColumns = getEditorContainerWidth => (table, view) => tr =>
     layout,
     getEditorContainerWidth
   });
+  const tableWidth = tableRef.clientWidth || akEditorDefaultLayoutWidth;
+  let 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;
+  const newTableMap = TableMap.get(newTable);
+  const noOfColumns = newTableMap.width;
+  if (!noOfColumns || noOfColumns <= 0) {
+    return tr;
+  }
+  const 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)) {
+    const widths = new Array(noOfColumns).fill(tableCellMinWidth);
+    const cols = widths.map((width, index) => ({
+      width: tableCellMinWidth,
+      minWidth: tableCellMinWidth,
+      index
+    }));
+    const overflow = tableWidth > maxSize;
+    const minWidthResizeState = {
+      cols,
+      widths,
+      maxSize,
+      tableWidth,
+      overflow
+    };
+    return updateColumnWidths(minWidthResizeState, table.node, table.start)(tr);
+  }
   let resizeState = getResizeState({
     minWidth: tableCellMinWidth,
     table: table.node,
@@ -152,12 +180,12 @@ export const rescaleColumns = getEditorContainerWidth => (table, view) => tr =>
     maxSize
   });
   const previousTableWidth = resizeState.tableWidth - tableNewColumnMinWidth;
-  const 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
+  const 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);
 };