@atlaskit/editor-plugin-table 7.9.0 → 7.10.1

package/src/pm-plugins/table-resizing/utils/resize-state.ts

@@ -8,6 +8,7 @@ import { calcTableColumnWidths } from '@atlaskit/editor-common/utils';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { Rect } from '@atlaskit/editor-tables/table-map';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import { getSelectedTableInfo } from '../../../utils';
 
@@ -34,7 +35,7 @@ export const getResizeState = ({
   minWidth: number;
   maxSize: number;
   table: PMNode;
-  tableRef: HTMLTableElement;
+  tableRef: HTMLTableElement | null;
   start: number;
   domAtPos: (pos: number) => { node: Node; offset: number };
   isTableScalingEnabled: boolean;
@@ -107,12 +108,12 @@ export const getResizeState = ({
 // updates Colgroup DOM node with new widths
 export const updateColgroup = (
   state: ResizeState,
-  tableRef: HTMLElement,
+  tableRef: HTMLElement | null,
   tableNode?: PMNode,
   isTableScalingEnabled?: boolean,
 ): void => {
-  const cols = tableRef.querySelectorAll('col');
-  const columnsCount = cols.length;
+  const cols = tableRef?.querySelectorAll('col');
+  const columnsCount = cols?.length;
   /**
      updateColgroup will update whole table scale when click the column resize handle, this behavior will affect when table overflowed, when now resize handle been dragged and extend to make table overflowed, table will show overflow. This need to be confirmed because it conflict with how isTableScalingEnabled work.
      We don't want to scale the table when resizing columns, only when viewpoint shrinks the table.
@@ -123,11 +124,11 @@ export const updateColgroup = (
     state.cols
       .filter((column) => column && !!column.width) // if width is 0, we dont want to apply that.
       .forEach((column, i) => {
-        const fixedColWidth = getColWidthFix(column.width, columnsCount);
+        const fixedColWidth = getColWidthFix(column.width, columnsCount ?? 0);
         const scaledWidth = fixedColWidth * scalePercent;
         const finalWidth = Math.max(scaledWidth, tableCellMinWidth);
         // we aren't handling the remaining pixels here when the 48px min width is reached
-        if (cols[i]) {
+        if (cols?.[i]) {
           cols[i].style.width = `${finalWidth}px`;
         }
       });
@@ -135,10 +136,10 @@ export const updateColgroup = (
     state.cols
       .filter((column) => column && !!column.width) // if width is 0, we dont want to apply that.
       .forEach((column, i) => {
-        if (cols[i]) {
+        if (cols?.[i]) {
           cols[i].style.width = `${getColWidthFix(
             column.width,
-            columnsCount,
+            columnsCount ?? 0,
           )}px`;
         }
       });
@@ -361,8 +362,13 @@ export const getNewResizeStateFromSelectedColumns = (
     return;
   }
 
-  const maybeTable = domAtPos(table.start).node as HTMLElement;
-  const tableRef = maybeTable.closest('table');
+  const maybeTable = domAtPos(table.start).node;
+
+  const maybeTableElement =
+    maybeTable instanceof HTMLElement ? maybeTable : null;
+  const tableRef = getBooleanFF('platform.editor.explicit-html-element-check')
+    ? maybeTableElement?.closest('table')
+    : (maybeTable as HTMLElement)?.closest('table');
 
   if (!tableRef) {
     return;

package/src/transforms/column-width.ts

@@ -6,6 +6,7 @@ import { AttrStep } from '@atlaskit/editor-prosemirror/transform';
 import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import type { ResizeState } from '../pm-plugins/table-resizing/utils';
 import {
@@ -119,8 +120,15 @@ export const rescaleColumns =
 
     const newTable = tr.doc.nodeAt(table.pos);
     const domAtPos = view.domAtPos.bind(view);
-    const maybeTable = domAtPos(table.start).node as HTMLElement;
-    const tableRef = maybeTable.closest('table');
+    const maybeTable = domAtPos(table.start).node;
+    const maybeTableElement = getBooleanFF(
+      'platform.editor.explicit-html-element-check',
+    )
+      ? maybeTable instanceof HTMLElement
+        ? maybeTable
+        : null
+      : (maybeTable as HTMLElement | null);
+    const tableRef = maybeTableElement?.closest('table');
 
     if (!tableRef || !newTable) {
       return tr;

package/src/ui/TableFloatingControls/RowControls/DragControls.tsx

@@ -16,6 +16,7 @@ import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { token } from '@atlaskit/tokens';
 
@@ -142,19 +143,35 @@ const DragControlsComponent = ({
 
   const handleMouseMove = useCallback(
     (e: MouseEvent) => {
-      const isParentDragControls = (e.nativeEvent.target as Element).closest(
-        `.${ClassName.DRAG_ROW_CONTROLS}`,
-      );
-      const rowIndex = (e.nativeEvent.target as Element).getAttribute(
-        'data-start-index',
-      );
+      if (getBooleanFF('platform.editor.explicit-html-element-check')) {
+        const target =
+          e.nativeEvent.target instanceof Element ? e.nativeEvent.target : null;
+        const isParentDragControls = target?.closest(
+          `.${ClassName.DRAG_ROW_CONTROLS}`,
+        );
+        const rowIndex = target?.getAttribute('data-start-index');
 
-      // avoid updating if event target is not related
-      if (!isParentDragControls || !rowIndex) {
-        return;
-      }
+        // avoid updating if event target is not related
+        if (!isParentDragControls || !rowIndex) {
+          return;
+        }
 
-      updateCellHoverLocation(Number(rowIndex));
+        updateCellHoverLocation(Number(rowIndex));
+      } else {
+        const isParentDragControls = (e.nativeEvent.target as Element).closest(
+          `.${ClassName.DRAG_ROW_CONTROLS}`,
+        );
+        const rowIndex = (e.nativeEvent.target as Element).getAttribute(
+          'data-start-index',
+        );
+
+        // avoid updating if event target is not related
+        if (!isParentDragControls || !rowIndex) {
+          return;
+        }
+
+        updateCellHoverLocation(Number(rowIndex));
+      }
     },
     [updateCellHoverLocation],
   );

package/src/utils/index.ts

@@ -26,6 +26,7 @@ export {
   getTableWidth,
   tablesHaveDifferentColumnWidths,
   tablesHaveDifferentNoOfColumns,
+  tablesHaveDifferentNoOfRows,
   isTableNested,
   anyChildCellMergedAcrossRow,
   supportedHeaderRow,
@@ -75,7 +76,7 @@ export {
 } from './row-controls';
 export type { RowParams } from './row-controls';
 export { getSelectedTableInfo, getSelectedCellInfo } from './analytics';
-export { getMergedCellsPositions } from './table';
+export { getMergedCellsPositions, getAssistiveMessage } from './table';
 export { updatePluginStateDecorations } from './update-plugin-state-decorations';
 export {
   hasMergedCellsInColumn,

package/src/utils/nodes.ts

@@ -94,6 +94,16 @@ export const tablesHaveDifferentNoOfColumns = (
   return prevMap.width !== currentMap.width;
 };
 
+export const tablesHaveDifferentNoOfRows = (
+  currentTable: PmNode,
+  previousTable: PmNode,
+): boolean => {
+  const prevMap = TableMap.get(previousTable);
+  const currentMap = TableMap.get(currentTable);
+
+  return prevMap.height !== currentMap.height;
+};
+
 function filterNearSelection<T, U>(
   selection: Selection,
   findNode: (selection: Selection) => { pos: number; node: PmNode } | undefined,

package/src/utils/table.ts

@@ -1,3 +1,7 @@
+import type { IntlShape } from 'react-intl-next';
+
+import { tableMessages as messages } from '@atlaskit/editor-common/messages';
+import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { Rect } from '@atlaskit/editor-tables/table-map';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
@@ -30,3 +34,35 @@ export const colsToRect = (cols: Array<number>, noOfRows: number): Rect => ({
   top: 0,
   bottom: noOfRows,
 });
+
+export const getAssistiveMessage = (
+  prevTableNode: PmNode,
+  currentTableNode: PmNode,
+  intl: IntlShape,
+) => {
+  const { formatMessage } = intl;
+  const prevTableMap = TableMap.get(prevTableNode);
+  const currentTableMap = TableMap.get(currentTableNode);
+
+  if (currentTableMap.width !== prevTableMap.width) {
+    const diff = Math.abs(currentTableMap.width - prevTableMap.width);
+    if (currentTableMap.width > prevTableMap.width) {
+      return formatMessage(messages.columnsAreInserted, { count: diff });
+    }
+    if (currentTableMap.width < prevTableMap.width) {
+      return formatMessage(messages.columnsAreRemoved, { count: diff });
+    }
+  }
+
+  if (currentTableMap.height !== prevTableMap.height) {
+    const diff = Math.abs(currentTableMap.height - prevTableMap.height);
+    if (currentTableMap.height > prevTableMap.height) {
+      return formatMessage(messages.rowsAreInserted, { count: diff });
+    }
+    if (currentTableMap.height < prevTableMap.height) {
+      return formatMessage(messages.rowsAreRemoved, { count: diff });
+    }
+  }
+
+  return '';
+};