@atlaskit/editor-plugin-table 1.1.0 → 1.1.2

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

@@ -1,35 +1,31 @@
-import { unitToNumber } from './unit-to-number'; // calculates content width of a cell
+import { unitToNumber } from './unit-to-number';
 
+// calculates content width of a cell
 export function contentWidth(elem, container, colWidths = [], canvas = document.createElement('canvas')) {
   return calcContentWidth(elem, container || elem, canvas, colWidths);
 }
-
 function calcContentWidth(elem, container, canvas, colWidths) {
   const flowWidths = [];
   let curWidth = 0;
-
   for (let i = 0; i < elem.childNodes.length; i++) {
     const child = elem.childNodes[i];
-
     if (child.nodeType === Node.COMMENT_NODE) {
       continue;
     }
-
     if (child.nodeType === Node.TEXT_NODE) {
       const parent = child.parentNode;
       const parentStyle = getComputedStyle(parent);
       let contentLength = 0;
-
       if (parent.nodeName === 'CODE' || parent.nodeName === 'PRE') {
         contentLength = handlePreText(canvas, parent, child.textContent, parentStyle.font);
       } else {
         contentLength = measureText(canvas, child.textContent, parentStyle.font);
       }
-
       const left = parent.offsetLeft - container.offsetLeft;
       flowWidths.push(curWidth);
-      curWidth += contentLength + left; // If the text isn't meant to wrap, we should set that as a hard limit.
+      curWidth += contentLength + left;
 
+      // If the text isn't meant to wrap, we should set that as a hard limit.
       if (parentStyle.whiteSpace === 'nowrap') {
         // + 3 is for date offset plus cursor
         // TODO There should be a programmatic way to get this.
@@ -38,15 +34,12 @@ function calcContentWidth(elem, container, canvas, colWidths) {
     } else {
       // FIXME: doesn't quite work right with spacing
       const style = getComputedStyle(child);
-
       if (style.minWidth && style.minWidth.endsWith('px') && style.minWidth !== '0px') {
         colWidths.push(unitToNumber(style.minWidth));
       }
-
       const {
         width
       } = contentWidth(child, container, colWidths, canvas);
-
       if (style.display && style.display.indexOf('inline') > -1) {
         // is inline element, add to curWidth
         curWidth += width;
@@ -57,41 +50,31 @@ function calcContentWidth(elem, container, canvas, colWidths) {
       }
     }
   }
-
   flowWidths.push(curWidth);
   return {
     minWidth: colWidths.reduce((oldMax, width) => Math.max(width, oldMax), 0),
     width: flowWidths.reduce((oldMax, width) => Math.max(width, oldMax), 0)
   };
 }
-
 function measureText(canvas, text, font) {
   const ctx = canvas.getContext('2d');
-
   if (!ctx) {
     return 0;
   }
-
   if (font) {
     ctx.font = font;
   }
-
   return Math.round(ctx.measureText(text || '').width);
 }
-
 function handlePreText(canvas, node, textContent, font) {
   let parent = node;
-
   if (node.nodeName === 'CODE') {
     parent = node.parentNode;
   }
-
   const computedStyle = getComputedStyle(parent);
-
   if (textContent && computedStyle.whiteSpace === 'pre') {
     // If white space is pre grab the longest line in the block.
     return textContent.split('\n').reduce((acc, current) => Math.max(measureText(canvas, current, font), acc), 0);
   }
-
   return measureText(canvas, textContent, font);
 }

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

@@ -9,73 +9,59 @@ export const updateControls = getEditorFeatureFlags => state => {
   const {
     tableRef
   } = getMainPluginState(state);
-
   if (!tableRef) {
     return;
   }
-
   const tr = tableRef.querySelector('tr');
-
   if (!tr) {
     return;
   }
-
   const wrapper = tableRef.parentElement;
-
   if (!(wrapper && wrapper.parentElement)) {
     return;
   }
-
   const rowControls = wrapper.parentElement.querySelectorAll(`.${ClassName.ROW_CONTROLS_BUTTON_WRAP}`);
   const numberedRows = wrapper.parentElement.querySelectorAll(ClassName.NUMBERED_COLUMN_BUTTON);
   syncStickyRowToTable(tableRef);
-  const rowHeights = getRowHeights(tableRef); // update rows controls height on resize
+  const rowHeights = getRowHeights(tableRef);
 
+  // update rows controls height on resize
   for (let i = 0, count = rowControls.length; i < count; i++) {
     const height = rowHeights[i];
-
     if (height) {
       rowControls[i].style.height = `${height}px`;
-
       if (numberedRows.length) {
         numberedRows[i].style.height = `${height}px`;
       }
     }
   }
-
   const rightShadows = wrapper.parentElement.querySelectorAll(`.${ClassName.TABLE_RIGHT_SHADOW}`);
   const leftShadows = wrapper.parentElement.querySelectorAll(`.${ClassName.TABLE_LEFT_SHADOW}`);
   updateOverflowShadows(getEditorFeatureFlags)(state, wrapper, tableRef, rightShadows, leftShadows);
 };
 export const isClickNear = (event, click) => {
   const dx = click.x - event.clientX,
-        dy = click.y - event.clientY;
+    dy = click.y - event.clientY;
   return dx * dx + dy * dy < 100;
 };
 export const getResizeCellPos = (view, event, lastColumnResizable) => {
   const target = event.target;
-
   if (!containsClassName(target, ClassName.RESIZE_HANDLE_DECORATION)) {
     return null;
   }
-
   const tableCell = closestElement(target, 'td, th');
-
   if (!tableCell) {
     return null;
   }
-
   const cellStartPosition = view.posAtDOM(tableCell, 0);
   return cellStartPosition - 1;
 };
 export const updateStickyMargins = table => {
   const row = table.querySelector('tr.sticky');
-
   if (!row) {
     table.style.marginTop = '';
     return;
   }
-
   const paddingTop = parsePx(window.getComputedStyle(row).paddingTop || '') || 0;
   const firstRowHeight = row.getBoundingClientRect().height - paddingTop - tableCellBorderWidth;
   table.style.marginTop = `${tableMarginTop + firstRowHeight}px`;
@@ -83,7 +69,6 @@ export const updateStickyMargins = table => {
 export const applyColWidthsToStickyRow = (colGroup, headerRow) => {
   // sync column widths for the sticky row
   const newCols = colWidthsForRow(colGroup, headerRow);
-
   if (newCols) {
     headerRow.style.gridTemplateColumns = newCols;
   }
@@ -92,20 +77,16 @@ export const syncStickyRowToTable = tableRef => {
   if (!tableRef) {
     return;
   }
-
   const headerRow = tableRef.querySelector('tr[data-header-row]');
-
   if (!headerRow) {
     return;
   }
-
   applyColWidthsToStickyRow(tableRef.querySelector('colgroup'), headerRow);
   applyTableWidthToStickyRow(tableRef, headerRow);
 };
 export const applyTableWidthToStickyRow = (tableRef, headerRow) => {
   const tbody = tableRef.querySelector('tbody');
   const wrapper = tableRef.parentElement;
-
   if (tbody && wrapper) {
     // when resizing in Chrome, clientWidth will give us 759px
     // but toggling the sticky class will reset it to 760px.

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

@@ -7,51 +7,46 @@ export const tableLayoutToSize = {
   default: akEditorDefaultLayoutWidth,
   wide: akEditorWideLayoutWidth,
   'full-width': akEditorFullWidthLayoutWidth
-}; // Translates named layouts in number values.
+};
 
+// Translates named layouts in number values.
 export function getLayoutSize(tableLayout, containerWidth = 0, options) {
   const {
     isFullWidthModeEnabled
   } = options;
-
   if (isFullWidthModeEnabled) {
     return containerWidth ? Math.min(containerWidth - akEditorGutterPadding * 2, akEditorFullWidthLayoutWidth) : akEditorFullWidthLayoutWidth;
   }
-
   const calculatedTableWidth = calcTableWidth(tableLayout, containerWidth, true);
-
   if (calculatedTableWidth.endsWith('px')) {
     return parseInt(calculatedTableWidth, 10);
   }
-
   if (tableLayout === 'default') {
     return getDefaultLayoutMaxWidth(containerWidth);
   }
-
   return tableLayoutToSize[tableLayout] || containerWidth;
 }
 export function getDefaultLayoutMaxWidth(containerWidth) {
   return mapBreakpointToLayoutMaxWidth(getBreakpoint(containerWidth));
-} // Does the current position point at a cell.
+}
 
+// Does the current position point at a cell.
 export function pointsAtCell($pos) {
   return $pos.parent.type.spec.tableRole === 'row' && $pos.nodeAfter;
-} // Get the current col width, handles colspan.
+}
 
+// Get the current col width, handles colspan.
 export function currentColWidth(view, cellPos, {
   colspan,
   colwidth
 }) {
   let width = colwidth && colwidth[colwidth.length - 1];
-
   if (width) {
     return width;
-  } // Not fixed, read current width from DOM
-
-
+  }
+  // Not fixed, read current width from DOM
   let domWidth = view.domAtPos(cellPos + 1).node.offsetWidth;
   let parts = colspan || 0;
-
   if (colwidth) {
     for (let i = 0; i < (colspan || 0); i++) {
       if (colwidth[i]) {
@@ -60,15 +55,14 @@ export function currentColWidth(view, cellPos, {
       }
     }
   }
-
   return domWidth / parts;
-} // Attempts to find a parent TD/TH depending on target element.
+}
 
+// Attempts to find a parent TD/TH depending on target element.
 export function domCellAround(target) {
   while (target && target.nodeName !== 'TD' && target.nodeName !== 'TH') {
     target = containsClassName(target, 'ProseMirror') ? null : target.parentNode;
   }
-
   return target;
 }
 export const getTableMaxWidth = ({
@@ -81,10 +75,8 @@ export const getTableMaxWidth = ({
   const containerWidth = getEditorContainerWidth();
   const parentWidth = getParentNodeWidth(tableStart, state, containerWidth);
   let maxWidth = parentWidth || getLayoutSize(layout, containerWidth.width, {});
-
   if (table.attrs.isNumberColumnEnabled) {
     maxWidth -= akEditorTableNumberColumnWidth;
   }
-
   return maxWidth;
 };

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

@@ -5,72 +5,59 @@ export const growColumn = (state, colIndex, amount, selectedColumns) => {
   if (!state.cols[colIndex] || !state.cols[colIndex + 1]) {
     return state;
   }
-
   const res = moveSpaceFrom(state, colIndex + 1, colIndex, amount);
   const remaining = amount - res.amount;
   let newState = res.state;
-
   if (remaining > 0) {
     newState = stackSpace(newState, colIndex, remaining).state;
   }
-
   if (selectedColumns) {
     return bulkColumnsResize(newState, selectedColumns, colIndex);
   }
-
   return newState;
 };
 export const shrinkColumn = (state, colIndex, amount, selectedColumns) => {
   // can't shrink if columns don't exist
   if (!state.cols[colIndex]) {
     return state;
-  } // try to shrink dragging column by giving from the column to the right first
-
-
+  }
+  // try to shrink dragging column by giving from the column to the right first
   const res = moveSpaceFrom(state, colIndex, colIndex + 1, -amount);
   let newState = res.state;
   const isOverflownTable = getTotalWidth(newState) > newState.maxSize;
-  const isLastColumn = !newState.cols[colIndex + 1]; // stop resizing the last column once table is not overflown
-
+  const isLastColumn = !newState.cols[colIndex + 1];
+  // stop resizing the last column once table is not overflown
   if (isLastColumn && !isOverflownTable) {
     return newState;
   }
-
   const remaining = amount + res.amount;
-
   if (remaining < 0) {
     newState = stackSpace(newState, colIndex + 1, remaining).state;
   }
-
   if (selectedColumns) {
     return bulkColumnsResize(newState, selectedColumns, colIndex);
   }
-
   return newState;
 };
 export function reduceSpace(state, amount, ignoreCols = []) {
-  let remaining = amount; // keep trying to resolve resize request until we run out of free space,
-  // or nothing to resize
+  let remaining = amount;
 
+  // keep trying to resolve resize request until we run out of free space,
+  // or nothing to resize
   while (remaining > 0) {
     // filter candidates only with free space
     const candidates = state.cols.filter(column => {
       return getFreeSpace(column) && ignoreCols.indexOf(column.index) === -1;
     });
-
     if (candidates.length === 0) {
       break;
     }
-
     const requestedResize = Math.floor(remaining / candidates.length);
-
     if (requestedResize === 0) {
       break;
     }
-
     candidates.forEach(candidate => {
       let newWidth = candidate.width - requestedResize;
-
       if (newWidth < candidate.minWidth) {
         // If the new requested width is less than our min
         // Calc what width we didn't use, we'll try extract that
@@ -81,146 +68,129 @@ export function reduceSpace(state, amount, ignoreCols = []) {
       } else {
         remaining -= requestedResize;
       }
-
-      state = { ...state,
-        cols: [...state.cols.slice(0, candidate.index), { ...candidate,
+      state = {
+        ...state,
+        cols: [...state.cols.slice(0, candidate.index), {
+          ...candidate,
           width: newWidth
         }, ...state.cols.slice(candidate.index + 1)]
       };
     });
   }
-
   return state;
 }
 var ColType; // TODO: should handle when destIdx:
 // - is beyond the range, and then not give it back
-
 (function (ColType) {
   ColType["SOURCE"] = "src";
   ColType["DEST"] = "dest";
 })(ColType || (ColType = {}));
-
 function moveSpaceFrom(state, srcIdx, destIdx, amount, useFreeSpace = true) {
   const srcCol = state.cols[srcIdx];
   const destCol = state.cols[destIdx];
-
   if (useFreeSpace) {
-    const freeSpace = getFreeSpace(srcCol); // if taking more than source column's free space, only take that much
-
+    const freeSpace = getFreeSpace(srcCol);
+    // if taking more than source column's free space, only take that much
     if (amountFor(ColType.DEST)(amount) > freeSpace) {
       amount = amount > 0 ? freeSpace : -freeSpace;
     }
-  } // if the source column shrinks past its min size, don't give the space away
-
+  }
 
+  // if the source column shrinks past its min size, don't give the space away
   if (amountFor(ColType.SOURCE)(amount) < 0 && widthFor(ColType.SOURCE)(amount, srcCol, destCol) < srcCol.minWidth) {
     amount = srcCol.width - srcCol.minWidth;
   }
-
-  const newDest = destCol ? { ...destCol,
+  const newDest = destCol ? {
+    ...destCol,
     width: widthFor(ColType.DEST)(amount, srcCol, destCol)
   } : undefined;
-
   if (!newDest && amountFor(ColType.SOURCE)(amount) < 0) {
     // non-zero-sum game, ensure that we're not removing more than the total table width either
     const totalWidth = getTotalWidth(state);
-
     if (totalWidth - srcCol.width + widthFor(ColType.SOURCE)(amount, srcCol, destCol) < state.maxSize) {
       // would shrink table below max width, stop it
       amount = state.maxSize - (totalWidth - srcCol.width) - srcCol.width - 1;
     }
   }
-
-  const newSrc = { ...srcCol,
+  const newSrc = {
+    ...srcCol,
     width: widthFor(ColType.SOURCE)(amount, srcCol, destCol)
   };
   const newCols = state.cols.map((existingCol, idx) => idx === srcIdx ? newSrc : idx === destIdx ? newDest : existingCol).filter(Boolean);
   return {
-    state: { ...state,
+    state: {
+      ...state,
       cols: newCols
     },
     amount
   };
 }
-
 function stackSpace(state, destIdx, amount) {
   let candidates = getCandidates(state, destIdx, amount);
-
   while (candidates.length && amount) {
     // search for most (or least) free space in candidates
     let candidateIdx = findNextFreeColumn(candidates, amount);
-
     if (candidateIdx === -1) {
       // stack to the right -> growing the dragging column and go overflow
       if (amount > 0) {
         return {
-          state: { ...state,
-            cols: [...state.cols.slice(0, destIdx), { ...state.cols[destIdx],
+          state: {
+            ...state,
+            cols: [...state.cols.slice(0, destIdx), {
+              ...state.cols[destIdx],
               width: state.cols[destIdx].width + amount
             }, ...state.cols.slice(destIdx + 1)]
           },
           remaining: amount
         };
-      } // stacking to the left, if no free space remains
-
+      }
 
+      // stacking to the left, if no free space remains
       break;
     }
-
     const column = candidates.find(col => col.index === candidateIdx);
-
     if (!column || getFreeSpace(column) <= 0) {
       // no more columns with free space remain
       break;
     }
-
     const res = moveSpaceFrom(state, column.index, destIdx, amount);
     state = res.state;
     amount -= res.amount;
     candidates = candidates.filter(col => col.index !== candidateIdx);
   }
-
   return {
     state,
     remaining: amount
   };
 }
-
 function findNextFreeColumn(columns, amount) {
   if (columns.length === 0) {
     return -1;
   }
-
   const direction = amount < 0 ? 'left' : 'right';
-
   if (direction === 'left') {
     columns = columns.slice().reverse();
   }
-
   let freeIndex = -1;
   columns.forEach(column => {
     if (getFreeSpace(column) && freeIndex === -1) {
       freeIndex = column.index;
     }
   });
-
   if (freeIndex === -1) {
     return -1;
   }
-
   return freeIndex;
 }
-
 function amountFor(colType) {
   return amount => colType === ColType.SOURCE ? amount > 0 ? -amount : amount : amount < 0 ? -amount : amount;
 }
-
 function widthFor(colType) {
   return (amount, srcCol, destCol) => (colType === ColType.SOURCE ? srcCol : destCol).width + amountFor(colType)(amount);
 }
-
 function getCandidates(state, destIdx, amount) {
-  const candidates = state.cols; // only consider rows after the selected column in the direction of resize
+  const candidates = state.cols;
 
+  // only consider rows after the selected column in the direction of resize
   return amount < 0 ? candidates.slice(0, destIdx) : candidates.slice(destIdx + 1);
 }