@atlaskit/editor-plugin-table 1.1.1 → 1.1.3

package/dist/es2019/plugins/table/pm-plugins/table-local-id.js

@@ -10,27 +10,25 @@
  * TODO: https://product-fabric.atlassian.net/browse/ED-12714
  *
  */
+
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from 'prosemirror-state';
 import rafSchedule from 'raf-schd';
 import { uuid } from '@atlaskit/adf-schema';
 import { stepAddsOneOf } from '@atlaskit/editor-common/utils';
 const pluginKey = new PluginKey('tableLocalIdPlugin');
-
 const getPluginState = state => state && pluginKey.getState(state);
+
 /**
  * Traverses a transaction's steps to see if we're inserting any tables
  */
-
-
 const checkIsAddingTable = (transaction, nodeType) => {
   return transaction.steps.some(step => stepAddsOneOf(step, new Set([nodeType])));
 };
+
 /**
  * Ensures uniqueness of `localId`s on tables being created or edited
  */
-
-
 const createPlugin = dispatch => new SafePlugin({
   key: pluginKey,
   state: {
@@ -39,28 +37,24 @@ const createPlugin = dispatch => new SafePlugin({
         parsedForLocalIds: false
       };
     },
-
     apply(tr, pluginState) {
       const meta = tr.getMeta(pluginKey);
-
       if (meta) {
         const keys = Object.keys(meta);
         const changed = keys.some(key => {
           return pluginState[key] !== meta[key];
         });
-
         if (changed) {
-          const newState = { ...pluginState,
+          const newState = {
+            ...pluginState,
             ...meta
           };
           dispatch(pluginKey, newState);
           return newState;
         }
       }
-
       return pluginState;
     }
-
   },
   view: () => {
     return {
@@ -86,17 +80,13 @@ const createPlugin = dispatch => new SafePlugin({
           state
         } = editorView;
         const pluginState = getPluginState(state);
-
         if (!pluginState) {
           return;
         }
-
         const parsed = pluginState.parsedForLocalIds;
-
         if (parsed) {
           return;
         }
-
         const {
           table
         } = state.schema.nodes;
@@ -106,10 +96,10 @@ const createPlugin = dispatch => new SafePlugin({
           editorView.state.doc.descendants((node, pos) => {
             const isTable = node.type === table;
             const localId = node.attrs.localId;
-
             if (isTable && !localId) {
               tableIdWasAdded = true;
-              tr.setNodeMarkup(pos, undefined, { ...node.attrs,
+              tr.setNodeMarkup(pos, undefined, {
+                ...node.attrs,
                 localId: uuid.generate()
               });
               return false;
@@ -118,11 +108,8 @@ const createPlugin = dispatch => new SafePlugin({
              * Otherwise continue traversing, we can encounter tables nested in
              * expands/bodiedExtensions
              */
-
-
             return true;
           });
-
           if (tableIdWasAdded) {
             tr.setMeta('addToHistory', false);
             editorView.dispatch(tr);
@@ -132,7 +119,6 @@ const createPlugin = dispatch => new SafePlugin({
           parsedForLocalIds: true
         }));
       }
-
     };
   },
   appendTransaction: (transactions, _oldState, newState) => {
@@ -145,57 +131,52 @@ const createPlugin = dispatch => new SafePlugin({
     transactions.forEach(transaction => {
       if (!transaction.docChanged) {
         return;
-      } // Don't interfere with cut as it clashes with fixTables & we don't need
-      // to handle any extra cut cases in this plugin
-
+      }
 
+      // Don't interfere with cut as it clashes with fixTables & we don't need
+      // to handle any extra cut cases in this plugin
       const uiEvent = transaction.getMeta('uiEvent');
-
       if (uiEvent === 'cut') {
         return;
       }
-      /** Check if we're actually inserting a table, otherwise we can ignore this tr */
-
 
+      /** Check if we're actually inserting a table, otherwise we can ignore this tr */
       const isAddingTable = checkIsAddingTable(transaction, table);
-
       if (!isAddingTable) {
         return;
-      } // Can't simply look at changed nodes, as we could be adding a table
-
+      }
 
+      // Can't simply look at changed nodes, as we could be adding a table
       newState.doc.descendants((node, pos) => {
         const isTable = node.type === table;
-        const localId = node.attrs.localId; // Dealing with a table - make sure it's a unique ID
+        const localId = node.attrs.localId;
 
+        // Dealing with a table - make sure it's a unique ID
         if (isTable) {
           if (localId && !idsObserved.has(localId)) {
-            idsObserved.add(localId); // Also add a localId if it happens to not have one,
+            idsObserved.add(localId);
+            // Also add a localId if it happens to not have one,
           } else if (!localId || idsObserved.has(localId)) {
             modified = true;
-            tr.setNodeMarkup(pos, undefined, { ...node.attrs,
+            tr.setNodeMarkup(pos, undefined, {
+              ...node.attrs,
               localId: uuid.generate()
             });
           }
-
           return false;
         }
+
         /**
          * Otherwise continue traversing, we can encounter tables nested in
          * expands/bodiedExtensions
          */
-
-
         return true;
       });
     });
-
     if (modified) {
       return tr;
     }
-
     return;
   }
 });
-
 export { createPlugin };

package/dist/es2019/plugins/table/pm-plugins/table-resizing/commands.js

@@ -7,45 +7,45 @@ export const scaleTable = (tableRef, options, domAtPos) => (state, dispatch) =>
   if (!tableRef) {
     return false;
   }
-
   const {
     node,
     start,
-    parentWidth
-  } = options; // If a table has not been resized yet, columns should be auto.
+    parentWidth,
+    layoutChanged
+  } = options;
 
+  // If a table has not been resized yet, columns should be auto.
   if (hasTableBeenResized(node) === false) {
     // If its not a re-sized table, we still want to re-create cols
     // To force reflow of columns upon delete.
     recreateResizeColsByNode(tableRef, node);
     return false;
   }
-
   let resizeState;
-
   if (parentWidth) {
     resizeState = scaleWithParent(tableRef, parentWidth, node, start, domAtPos);
   } else {
     resizeState = scale(tableRef, options, domAtPos);
   }
-
   if (resizeState) {
     let {
       tr
     } = state;
     tr = updateColumnWidths(resizeState, node, start)(tr);
-
     if (tr.docChanged && dispatch) {
-      tr.setMeta('scrollIntoView', false); // TODO: ED-8995
+      tr.setMeta('scrollIntoView', false);
+      // TODO: ED-8995
       // We need to do this check to reduce the number of race conditions when working with tables.
       // This metadata is been used in the sendTransaction function in the Collab plugin
-
-      tr.setMeta('scaleTable', true);
+      /* Added !layoutChanged check here to solve unnecessary scroll bar after publish when click on breakout button multiple times and publish
+         scaleTable is only called once every time a breakout button is clicked, so it is safe not to add the meta 'scaleTable' to the tr.
+         Leaving the tr.setMeta('scaleTable', true) here for race conditions that we aren't aware of.
+       */
+      !layoutChanged && tr.setMeta('scaleTable', true);
       dispatch(tr);
       return true;
     }
   }
-
   return false;
 };
 export const evenColumns = ({
@@ -56,21 +56,19 @@ export const evenColumns = ({
 }) => (state, dispatch) => {
   if (!isTableSelected(state.selection)) {
     return false;
-  } // double click detection logic
-  // Note: ProseMirror's handleDoubleClick doesn't quite work with DOM mousedown event handler
-
+  }
 
+  // double click detection logic
+  // Note: ProseMirror's handleDoubleClick doesn't quite work with DOM mousedown event handler
   const {
     lastClick
   } = getPluginState(state);
   const now = Date.now();
-
   if (lastClick && now - lastClick.time < 500 && isClickNear(event, lastClick)) {
     const newState = evenAllColumnsWidths(resizeState);
     setLastClick(null, tr => updateColumnWidths(newState, table, start)(tr))(state, dispatch);
     return true;
   }
-
   setLastClick({
     x: event.clientX,
     y: event.clientY,
@@ -83,7 +81,6 @@ export const distributeColumnsWidths = (newResizeState, table) => (state, dispat
     const tr = updateColumnWidths(newResizeState, table.node, table.start)(state.tr);
     stopResizing(tr)(state, dispatch);
   }
-
   return true;
 };
 export const setResizeHandlePos = resizeHandlePos => createCommand({

package/dist/es2019/plugins/table/pm-plugins/table-resizing/event-handlers.js

@@ -9,6 +9,7 @@ import { evenColumns, setDragging, stopResizing } from './commands';
 import { getPluginState } from './plugin-factory';
 import { currentColWidth, getLayoutSize, getResizeState, pointsAtCell, resizeColumn, updateControls } from './utils';
 import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
+import { getParentWidthWithoutPadding } from './utils/misc';
 export const handleMouseDown = (view, event, localResizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, editorAnalyticsAPI) => {
   const {
     state,
@@ -16,11 +17,9 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
   } = view;
   const editorDisabled = !view.editable;
   const domAtPos = view.domAtPos.bind(view);
-
   if (editorDisabled || localResizeHandlePos === null || !pointsAtCell(state.doc.resolve(localResizeHandlePos))) {
     return false;
   }
-
   event.preventDefault();
   const mouseDownTime = event.timeStamp;
   const cell = state.doc.nodeAt(localResizeHandlePos);
@@ -28,19 +27,18 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
   const originalTable = $cell.node(-1);
   const start = $cell.start(-1);
   let dom = domAtPos(start).node;
-
   if (dom && dom.nodeName !== 'TABLE') {
     dom = dom.closest('table');
   }
-
   const containerWidth = getEditorContainerWidth();
   const parentWidth = getParentNodeWidth(start, state, containerWidth);
-  let maxSize = parentWidth || getLayoutSize(dom.getAttribute('data-layout'), containerWidth.width, {});
 
+  // TODO - refactor this logic into getParentNodeWidth() in editor-common [ED-16718]
+  const parentActualWidth = getParentWidthWithoutPadding(parentWidth, start, state);
+  let maxSize = parentActualWidth || getLayoutSize(dom.getAttribute('data-layout'), containerWidth.width, {});
   if (originalTable.attrs.isNumberColumnEnabled) {
     maxSize -= akEditorTableNumberColumnWidth;
   }
-
   const resizeState = getResizeState({
     minWidth: tableCellMinWidth,
     maxSize,
@@ -49,7 +47,6 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
     start,
     domAtPos
   });
-
   if (evenColumns({
     resizeState,
     table: originalTable,
@@ -59,13 +56,11 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
     finish(event);
     return true;
   }
-
   const width = currentColWidth(view, localResizeHandlePos, cell.attrs);
   setDragging({
     startX: event.clientX,
     startWidth: width
   })(state, dispatch);
-
   function finish(event) {
     window.removeEventListener('mouseup', finish);
     window.removeEventListener('mousemove', move);
@@ -80,46 +75,42 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
       dragging,
       resizeHandlePos
     } = getPluginState(state);
-
     if (resizeHandlePos === null) {
       return stopResizing()(state, dispatch);
     }
-
     if (!pointsAtCell(state.doc.resolve(resizeHandlePos))) {
       return;
-    } // resizeHandlePos could be remapped via a collab change.
+    }
+    // resizeHandlePos could be remapped via a collab change.
     // Fetch a fresh reference of the table.
-
-
     const $cell = state.doc.resolve(resizeHandlePos);
     const start = $cell.start(-1);
-    const table = $cell.node(-1); // If we let go in the same place we started, dont need to do anything.
+    const table = $cell.node(-1);
 
+    // If we let go in the same place we started, dont need to do anything.
     if (dragging && clientX === dragging.startX) {
       return stopResizing()(state, dispatch);
     }
-
     let {
       tr
     } = state;
-
     if (dragging) {
       const {
         startX
-      } = dragging; // If the table has changed (via collab for example) don't apply column widths
+      } = dragging;
+
+      // If the table has changed (via collab for example) don't apply column widths
       // For example, if a table col is deleted we won't be able to reliably remap the new widths
       // There may be a more elegant solution to this, to avoid a jarring experience.
-
       if (table.eq(originalTable)) {
         const map = TableMap.get(table);
         const colIndex = map.colCount($cell.pos - start) + ($cell.nodeAfter ? $cell.nodeAfter.attrs.colspan : 1) - 1;
         const selectionRect = getSelectionRect(state.selection);
-        const selectedColumns = selectionRect ? getSelectedColumnIndexes(selectionRect) : []; // only selected (or selected - 1) columns should be distributed
-
+        const selectedColumns = selectionRect ? getSelectedColumnIndexes(selectionRect) : [];
+        // only selected (or selected - 1) columns should be distributed
         const resizingSelectedColumns = selectedColumns.indexOf(colIndex) > -1 || selectedColumns.indexOf(colIndex + 1) > -1;
         const newResizeState = resizeColumn(resizeState, colIndex, clientX - startX, dom, resizingSelectedColumns ? selectedColumns : undefined);
         tr = updateColumnWidths(newResizeState, table, start)(tr);
-
         if (colIndex === map.width - 1) {
           const mouseUpTime = event.timeStamp;
           editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
@@ -136,11 +127,9 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
           })(tr);
         }
       }
-
       return stopResizing(tr)(state, dispatch);
     }
   }
-
   function move(event) {
     const {
       clientX,
@@ -153,11 +142,9 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
       dragging,
       resizeHandlePos
     } = getPluginState(state);
-
     if (!which || !dragging || resizeHandlePos === null || !pointsAtCell(state.doc.resolve(resizeHandlePos))) {
       return finish(event);
     }
-
     const $cell = state.doc.resolve(resizeHandlePos);
     const table = $cell.node(-1);
     const map = TableMap.get(table);
@@ -166,7 +153,6 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
     updateControls(getEditorFeatureFlags)(state);
     updateResizeHandles(dom);
   }
-
   window.addEventListener('mouseup', finish);
   window.addEventListener('mousemove', move);
   return true;

package/dist/es2019/plugins/table/pm-plugins/table-resizing/plugin-factory.js

@@ -1,17 +1,15 @@
 import { pluginFactory } from '@atlaskit/editor-common/utils';
 import { pluginKey } from './plugin-key';
 import reducer from './reducer';
-
 function mapping(tr, pluginState) {
   if (pluginState && pluginState.resizeHandlePos !== null) {
-    return { ...pluginState,
+    return {
+      ...pluginState,
       resizeHandlePos: tr.mapping.map(pluginState.resizeHandlePos)
     };
   }
-
   return pluginState;
 }
-
 const factory = pluginFactory(pluginKey, reducer, {
   mapping
 });

package/dist/es2019/plugins/table/pm-plugins/table-resizing/plugin.js

@@ -27,18 +27,17 @@ export function createPlugin(dispatch, {
           })
         };
       },
-
       handleDOMEvents: {
         mousedown(view, event) {
           const {
             state
           } = view;
-          const resizeHandlePos = // we're setting `resizeHandlePos` via command in unit tests
+          const resizeHandlePos =
+          // we're setting `resizeHandlePos` via command in unit tests
           getPluginState(state).resizeHandlePos || getResizeCellPos(view, event, lastColumnResizable);
           const {
             dragging
           } = getPluginState(state);
-
           if (resizeHandlePos !== null && !dragging) {
             if (handleMouseDown(view, event, resizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, editorAnalyticsAPI)) {
               const {
@@ -48,10 +47,8 @@ export function createPlugin(dispatch, {
               return setResizeHandlePos(resizeHandlePos)(state, dispatch);
             }
           }
-
           return false;
         }
-
       }
     }
   });

package/dist/es2019/plugins/table/pm-plugins/table-resizing/reducer.js

@@ -1,30 +1,30 @@
 export default ((pluginState, action) => {
   switch (action.type) {
     case 'STOP_RESIZING':
-      return { ...pluginState,
+      return {
+        ...pluginState,
         resizeHandlePos: null,
         dragging: null
       };
-
     case 'SET_RESIZE_HANDLE_POSITION':
-      return { ...pluginState,
+      return {
+        ...pluginState,
         resizeHandlePos: action.data.resizeHandlePos
       };
-
     case 'SET_DRAGGING':
-      return { ...pluginState,
+      return {
+        ...pluginState,
         dragging: action.data.dragging
       };
-
     case 'SET_LAST_CLICK':
       const {
         lastClick
       } = action.data;
-      return { ...pluginState,
+      return {
+        ...pluginState,
         lastClick,
         resizeHandlePos: lastClick ? pluginState.resizeHandlePos : null
       };
-
     default:
       return pluginState;
   }

package/dist/es2019/plugins/table/pm-plugins/table-resizing/utils/colgroup.js

@@ -1,10 +1,10 @@
 import { DOMSerializer } from 'prosemirror-model';
 import { getFragmentBackingArray } from '@atlaskit/editor-common/utils';
+import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 export const generateColgroup = table => {
   const cols = [];
   table.content.firstChild.content.forEach(cell => {
     const colspan = cell.attrs.colspan || 1;
-
     if (Array.isArray(cell.attrs.colwidth)) {
       // We slice here to guard against our colwidth array having more entries
       // Than the we actually span. We'll patch the document at a later point.
@@ -26,11 +26,9 @@ export const generateColgroup = table => {
 };
 export const insertColgroupFromNode = (tableRef, table) => {
   let colgroup = tableRef.querySelector('colgroup');
-
   if (colgroup) {
     tableRef.removeChild(colgroup);
   }
-
   colgroup = renderColgroupFromNode(table);
   tableRef.insertBefore(colgroup, tableRef.firstChild);
   return colgroup.children;
@@ -39,6 +37,19 @@ export const hasTableBeenResized = table => {
   return !!getFragmentBackingArray(table.content.firstChild.content).find(cell => cell.attrs.colwidth);
 };
 
+/**
+ * Check if a table has all the column width set to tableCellMinWidth(48px) or null
+ *
+ * @param table
+ * @returns true if all column width is equal to tableCellMinWidth or null, false otherwise
+ */
+export const isMinCellWidthTable = table => {
+  const cellArray = getFragmentBackingArray(table.content.firstChild.content);
+  const isTableMinCellWidth = cellArray.every(cell => {
+    return cell.attrs.colwidth && cell.attrs.colwidth[0] === tableCellMinWidth || cell.attrs.colwidth === null;
+  });
+  return isTableMinCellWidth;
+};
 function renderColgroupFromNode(table) {
   const rendered = DOMSerializer.renderSpec(document, ['colgroup', {}, ...generateColgroup(table)]);
   return rendered.dom;

package/dist/es2019/plugins/table/pm-plugins/table-resizing/utils/column-state.js

@@ -6,7 +6,8 @@ import { unitToNumber } from './unit-to-number';
 // Reads `width` and `minWidth` of each column from DOM and returns `ColumnState` containing those values
 export const getColumnStateFromDOM = (cells, index, minWidth) => {
   const width = calculateColumnWidth(cells, calculateColumnWidthCallback);
-  const minColumnWidth = width < minWidth ? // for newly created column (where width < minWidth) we set minWidth = tableNewColumnMinWidth (140px atm)
+  const minColumnWidth = width < minWidth ?
+  // for newly created column (where width < minWidth) we set minWidth = tableNewColumnMinWidth (140px atm)
   tableNewColumnMinWidth : calculateColumnWidth(cells, calculateColumnMinWidthCallback(minWidth));
   return {
     index,
@@ -16,8 +17,9 @@ export const getColumnStateFromDOM = (cells, index, minWidth) => {
 };
 export const getFreeSpace = state => {
   return Math.max(state.width - state.minWidth, 0);
-}; // Returns DOM refs of all cells in a column by `columnIndex`
+};
 
+// Returns DOM refs of all cells in a column by `columnIndex`
 export const getCellsRefsInColumn = (columnIndex, table, tableStart, domAtPos) => {
   const map = TableMap.get(table);
   const cellsPositions = map.cellsInRect({
@@ -29,26 +31,24 @@ export const getCellsRefsInColumn = (columnIndex, table, tableStart, domAtPos) =
   const cells = [];
   cellsPositions.forEach(pos => {
     const col = findDomRefAtPos(pos + tableStart, domAtPos);
-
     if (col) {
       cells.push(col);
     }
   });
   return cells;
-}; // calculates column widths based on `cells` DOM refs
+};
 
+// calculates column widths based on `cells` DOM refs
 export const calculateColumnWidth = (cells, calculateColumnWidthCb) => {
   let maxColWidth = 0;
   let colSpanWidth = 0;
   cells.forEach(cellRef => {
     const css = getComputedStyle(cellRef);
     const colspan = Number(cellRef.getAttribute('colspan') || 1);
-
     if (colspan > 1) {
       colSpanWidth = calculateColumnWidthCb(css, cellRef, colspan);
       return;
     }
-
     if (css) {
       const colWidth = calculateColumnWidthCb(css, cellRef, colspan);
       maxColWidth = Math.max(colWidth, maxColWidth);
@@ -57,22 +57,19 @@ export const calculateColumnWidth = (cells, calculateColumnWidthCb) => {
   return maxColWidth || colSpanWidth;
 };
 export const addContainerLeftRightPadding = (amount, css) => amount + unitToNumber(css.paddingLeft) + unitToNumber(css.paddingRight);
-
 function calculateColumnWidthCallback(css) {
   return unitToNumber(css.width);
 }
-
 function calculateColumnMinWidthCallback(minColumnWidth) {
   return (css, cellRef, colSpan) => {
     if (colSpan && colSpan > 1) {
       return unitToNumber(css.width);
     }
-
     const {
       minWidth: minContentWidth
-    } = contentWidth(cellRef, cellRef); // Override the min width, if there is content that can't collapse
+    } = contentWidth(cellRef, cellRef);
+    // Override the min width, if there is content that can't collapse
     // Past a certain width.
-
     return Math.max(addContainerLeftRightPadding(minContentWidth, css), minContentWidth, minColumnWidth);
   };
 }