@atlaskit/editor-plugin-table 1.1.0 → 1.1.2

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

@@ -29,9 +29,9 @@ export const getResizeState = ({
       tableWidth,
       overflow
     };
-  } // Getting the resize state from DOM
-
+  }
 
+  // Getting the resize state from DOM
   const colgroupChildren = insertColgroupFromNode(tableRef, table);
   const cols = Array.from(colgroupChildren).map((_, index) => {
     const cellsRefs = getCellsRefsInColumn(index, table, start, domAtPos);
@@ -47,8 +47,9 @@ export const getResizeState = ({
     tableWidth,
     overflow
   };
-}; // updates Colgroup DOM node with new widths
+};
 
+// updates Colgroup DOM node with new widths
 export const updateColgroup = (state, tableRef) => {
   const cols = tableRef.querySelectorAll('col');
   state.cols.filter(column => column && !!column.width) // if width is 0, we dont want to apply that.
@@ -56,72 +57,77 @@ export const updateColgroup = (state, tableRef) => {
     if (cols[i]) {
       cols[i].style.width = `${column.width}px`;
     }
-  }); // colgroup has updated, reflect new widths in sticky header
+  });
 
+  // colgroup has updated, reflect new widths in sticky header
   syncStickyRowToTable(tableRef);
 };
 export const getTotalWidth = ({
   cols
 }) => {
   return cols.reduce((totalWidth, col) => totalWidth + col.width, 0);
-}; // adjust columns to take up the total width
-// difference in total columns widths vs table width happens due to the "Math.floor"
+};
 
+// adjust columns to take up the total width
+// difference in total columns widths vs table width happens due to the "Math.floor"
 export const adjustColumnsWidths = (resizeState, maxSize) => {
   const totalWidth = getTotalWidth(resizeState);
   const diff = maxSize - totalWidth;
-
   if (diff > 0 || diff < 0 && Math.abs(diff) < tableCellMinWidth) {
     let updated = false;
-    return { ...resizeState,
+    return {
+      ...resizeState,
       cols: resizeState.cols.map(col => {
         if (!updated && col.width + diff > col.minWidth) {
           updated = true;
-          return { ...col,
+          return {
+            ...col,
             width: col.width + diff
           };
         }
-
         return col;
       })
     };
   }
-
   return resizeState;
 };
 export const evenAllColumnsWidths = resizeState => {
   const maxSize = getTotalWidth(resizeState);
   const evenWidth = Math.floor(maxSize / resizeState.cols.length);
-  const cols = resizeState.cols.map(col => ({ ...col,
+  const cols = resizeState.cols.map(col => ({
+    ...col,
     width: evenWidth
   }));
-  return adjustColumnsWidths({ ...resizeState,
+  return adjustColumnsWidths({
+    ...resizeState,
     cols
   }, maxSize);
 };
-
 const getSpace = (columns, start, end) => columns.slice(start, end).map(col => col.width).reduce((sum, width) => sum + width, 0);
-
 export const evenSelectedColumnsWidths = (resizeState, rect) => {
   const cols = resizeState.cols;
   const selectedSpace = getSpace(cols, rect.left, rect.right);
   const allSpace = getSpace(cols, 0, cols.length);
   const allWidth = allSpace / cols.length;
-  const width = selectedSpace / (rect.right - rect.left); // Result equals even distribution of all columns -
-  // unset widths of all columns
+  const width = selectedSpace / (rect.right - rect.left);
 
+  // Result equals even distribution of all columns -
+  // unset widths of all columns
   if (allWidth === width) {
-    return { ...resizeState,
+    return {
+      ...resizeState,
       widths: cols.map(() => width),
-      cols: resizeState.cols.map(col => ({ ...col,
+      cols: resizeState.cols.map(col => ({
+        ...col,
         width: 0
       }))
     };
   }
-
-  return { ...resizeState,
+  return {
+    ...resizeState,
     widths: cols.map((col, i) => i >= rect.left && i < rect.right ? width : col.width),
-    cols: cols.map((col, i) => ({ ...col,
+    cols: cols.map((col, i) => ({
+      ...col,
       width: i >= rect.left && i < rect.right ? width : col.width
     }))
   };
@@ -135,89 +141,90 @@ export const bulkColumnsResize = (resizeState, columnsIndexes, sourceColumnIndex
   const cols = resizeState.cols.map(col => {
     if (columnsIndexes.indexOf(col.index) > -1) {
       const diff = col.width - sourceCol.width;
-
       if (diff !== 0) {
         widthsDiffs.push(diff);
       }
-
-      return { ...col,
+      return {
+        ...col,
         width: sourceCol.width
       };
     }
-
     return col;
   });
-  let newState = { ...resizeState,
+  let newState = {
+    ...resizeState,
     cols: cols.map(col => {
-      if (columnsIndexes.indexOf(col.index) > -1 || // take from prev columns only if dragging the first handle to the left
+      if (columnsIndexes.indexOf(col.index) > -1 ||
+      // take from prev columns only if dragging the first handle to the left
       columnsIndexes.indexOf(sourceColumnIndex) > -1 && col.index < colIndex) {
         return col;
       }
-
       while (widthsDiffs.length) {
         const diff = widthsDiffs.shift() || 0;
         const column = seenColumns[col.index] || col;
         const maybeWidth = column.width + diff;
-
         if (maybeWidth > column.minWidth) {
-          seenColumns[column.index] = { ...column,
+          seenColumns[column.index] = {
+            ...column,
             width: maybeWidth
           };
         } else {
           widthsDiffs.push(maybeWidth - column.minWidth);
-          seenColumns[column.index] = { ...column,
+          seenColumns[column.index] = {
+            ...column,
             width: column.minWidth
           };
           break;
         }
       }
-
       return seenColumns[col.index] || col;
     })
-  }; // minimum possible table widths at the current layout
-
-  const minTableWidth = resizeState.maxSize; // new table widths after bulk resize
-
-  const newTotalWidth = getTotalWidth(newState); // when all columns are selected, what do we do when sum of columns widths is lower than min possible table widths?
+  };
 
+  // minimum possible table widths at the current layout
+  const minTableWidth = resizeState.maxSize;
+  // new table widths after bulk resize
+  const newTotalWidth = getTotalWidth(newState);
+  // when all columns are selected, what do we do when sum of columns widths is lower than min possible table widths?
   if (columnsIndexes.length === resizeState.cols.length && newTotalWidth < minTableWidth) {
     // table is not in overflow -> normal resize of a single column
     if (currentTableWidth === minTableWidth) {
       return resizeState;
-    } // table is in overflow: keep the dragged column at its widths and evenly distribute columns
+    }
+    // table is in overflow: keep the dragged column at its widths and evenly distribute columns
     // to recover from overflow state
     else {
       const columnWidth = Math.floor((minTableWidth - sourceCol.width) / (newState.cols.length - 1));
-      newState = { ...resizeState,
+      newState = {
+        ...resizeState,
         cols: newState.cols.map(col => {
           if (col.index === sourceCol.index) {
             return col;
           }
-
-          return { ...col,
+          return {
+            ...col,
             width: columnWidth
           };
         })
       };
     }
-  } // fix total table widths by adding missing pixels to columns widths here and there
-
+  }
 
+  // fix total table widths by adding missing pixels to columns widths here and there
   return adjustColumnsWidths(newState, resizeState.maxSize);
 };
 export const areColumnsEven = resizeState => {
   const newResizeState = evenAllColumnsWidths(resizeState);
   return newResizeState.cols.every((col, i) => col.width === resizeState.cols[i].width);
-}; // Get the layout
+};
 
+// Get the layout
 export const normaliseTableLayout = input => {
   switch (input) {
     case 'wide':
       return input;
-
     case 'full-width':
       return input;
-
     default:
       return 'default';
   }
@@ -228,18 +235,14 @@ export const getNewResizeStateFromSelectedColumns = (rect, state, domAtPos, getE
     totalColumnCount,
     table
   } = getSelectedTableInfo(state.selection);
-
   if (!table) {
     return;
   }
-
   const maybeTable = domAtPos(table.start).node;
   const tableRef = maybeTable.closest('table');
-
   if (!tableRef) {
     return;
   }
-
   const layout = normaliseTableLayout(tableRef === null || tableRef === void 0 ? void 0 : tableRef.dataset.layout);
   const maxSize = getTableMaxWidth({
     table: table.node,

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

@@ -11,6 +11,7 @@ export const scale = (tableRef, options, domAtPos) => {
    * isBreakoutEnabled === true -> default center aligned
    * isBreakoutEnabled === false -> full width mode
    */
+
   const {
     node,
     containerWidth,
@@ -27,14 +28,13 @@ export const scale = (tableRef, options, domAtPos) => {
   const previousMaxSize = getLayoutSize(prevNode.attrs.layout, previousContainerWidth, {
     isBreakoutEnabled
   });
-  let newWidth = maxSize; // adjust table width if layout is updated
+  let newWidth = maxSize;
 
+  // adjust table width if layout is updated
   const hasOverflow = prevTableWidth > previousMaxSize;
-
   if (layoutChanged && hasOverflow) {
     // No keep overflow if the old content can be in the new size
     const canFitInNewSize = prevTableWidth < maxSize;
-
     if (canFitInNewSize) {
       newWidth = maxSize;
     } else {
@@ -43,11 +43,9 @@ export const scale = (tableRef, options, domAtPos) => {
       newWidth = Math.floor(newWidth * overflowScale);
     }
   }
-
   if (node.attrs.isNumberColumnEnabled) {
     newWidth -= akEditorTableNumberColumnWidth;
   }
-
   const resizeState = getResizeState({
     minWidth: tableCellMinWidth,
     maxSize,
@@ -67,17 +65,17 @@ export const scaleWithParent = (tableRef, parentWidth, table, start, domAtPos) =
     start,
     domAtPos
   });
-
   if (table.attrs.isNumberColumnEnabled) {
     parentWidth -= akEditorTableNumberColumnWidth;
   }
-
   return scaleTableTo(resizeState, Math.floor(parentWidth));
-}; // Scales the table to a given size and updates its colgroup DOM node
+};
 
+// Scales the table to a given size and updates its colgroup DOM node
 export function scaleTableTo(state, maxSize) {
   const scaleFactor = maxSize / getTotalWidth(state);
-  let newState = { ...state,
+  let newState = {
+    ...state,
     maxSize,
     cols: state.cols.map(col => {
       const {
@@ -85,21 +83,18 @@ export function scaleTableTo(state, maxSize) {
         width
       } = col;
       let newColWidth = Math.floor(width * scaleFactor);
-
       if (newColWidth < minWidth) {
         newColWidth = minWidth;
       }
-
-      return { ...col,
+      return {
+        ...col,
         width: newColWidth
       };
     })
   };
   let newTotalWidth = getTotalWidth(newState);
-
   if (newTotalWidth > maxSize) {
     newState = reduceSpace(newState, newTotalWidth - maxSize);
   }
-
   return adjustColumnsWidths(newState, maxSize);
 }

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

@@ -2,91 +2,87 @@ import { defaultTableSelection } from './pm-plugins/default-table-selection';
 export default ((pluginState, action) => {
   switch (action.type) {
     case 'TOGGLE_HEADER_COLUMN':
-      return { ...pluginState,
+      return {
+        ...pluginState,
         isHeaderColumnEnabled: !pluginState.isHeaderColumnEnabled
       };
-
     case 'TOGGLE_HEADER_ROW':
-      return { ...pluginState,
+      return {
+        ...pluginState,
         isHeaderRowEnabled: !pluginState.isHeaderRowEnabled
       };
-
     case 'CLEAR_HOVER_SELECTION':
-      return { ...pluginState,
+      return {
+        ...pluginState,
         ...action.data,
         ...defaultTableSelection
       };
-
     case 'SELECT_COLUMN':
-      return { ...pluginState,
+      return {
+        ...pluginState,
         ...action.data,
         isContextualMenuOpen: false
       };
-
     case 'SET_TARGET_CELL_POSITION':
-      return { ...pluginState,
+      return {
+        ...pluginState,
         ...action.data,
         isContextualMenuOpen: false
       };
-
     case 'SET_TABLE_LAYOUT':
-      return { ...pluginState,
+      return {
+        ...pluginState,
         ...action.data
       };
-
     case 'TOGGLE_CONTEXTUAL_MENU':
-      return { ...pluginState,
+      return {
+        ...pluginState,
         isContextualMenuOpen: !pluginState.isContextualMenuOpen
       };
-
     case 'SHOW_INSERT_ROW_BUTTON':
       if (action.data.insertRowButtonIndex === pluginState.insertRowButtonIndex) {
         return pluginState;
       }
-
-      return { ...pluginState,
+      return {
+        ...pluginState,
         ...action.data,
         insertColumnButtonIndex: undefined // We need to assure that column is not shown
-
       };
 
     case 'SHOW_INSERT_COLUMN_BUTTON':
       if (action.data.insertColumnButtonIndex === pluginState.insertColumnButtonIndex) {
         return pluginState;
       }
-
-      return { ...pluginState,
+      return {
+        ...pluginState,
         ...action.data,
         insertRowButtonIndex: undefined // We need to assure that row is not shown
-
       };
 
     case 'HIDE_INSERT_COLUMN_OR_ROW_BUTTON':
       if (pluginState.insertRowButtonIndex !== undefined || pluginState.insertColumnButtonIndex !== undefined) {
-        return { ...pluginState,
+        return {
+          ...pluginState,
           insertRowButtonIndex: undefined,
           insertColumnButtonIndex: undefined
         };
       }
-
       return pluginState;
-
     case 'HIDE_RESIZE_HANDLE_LINE':
-      return { ...pluginState,
+      return {
+        ...pluginState,
         ...action.data,
         resizeHandleColumnIndex: undefined,
         resizeHandleRowIndex: undefined
       };
-
     case 'ADD_RESIZE_HANDLE_DECORATIONS':
       if (action.data.resizeHandleColumnIndex === pluginState.resizeHandleColumnIndex && action.data.resizeHandleRowIndex === pluginState.resizeHandleRowIndex) {
         return pluginState;
       }
-
-      return { ...pluginState,
+      return {
+        ...pluginState,
         ...action.data
       };
-
     case 'SET_TABLE_REF':
     case 'HOVER_ROWS':
     case 'HOVER_COLUMNS':
@@ -94,10 +90,10 @@ export default ((pluginState, action) => {
     case 'HOVER_CELLS':
     case 'SHOW_RESIZE_HANDLE_LINE':
     case 'SET_EDITOR_FOCUS':
-      return { ...pluginState,
+      return {
+        ...pluginState,
         ...action.data
       };
-
     default:
       return pluginState;
   }