@atlaskit/editor-plugin-table 0.1.0 → 0.1.1

package/src/plugins/table/toolbar.tsx

@@ -370,126 +370,129 @@ const getClosestSelectionRect = (state: EditorState): Rect | undefined => {
     : findCellRectClosestToPos(selection.$from);
 };
 
-export const getToolbarConfig = (
-  getEditorContainerWidth: GetEditorContainerWidth,
-  editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
-  getEditorFeatureFlags: GetEditorFeatureFlags,
-) => (config: PluginConfig): FloatingToolbarHandler => (state, intl) => {
-  const tableObject = findTable(state.selection);
-  const pluginState = getPluginState(state);
-  const resizeState:
-    | ColumnResizingPluginState
-    | undefined = tableResizingPluginKey.getState(state);
-  if (tableObject && pluginState.editorHasFocus) {
-    const nodeType = state.schema.nodes.table;
-    const menu = getToolbarMenuConfig(
-      config,
-      pluginState,
-      intl,
-      editorAnalyticsAPI,
-    );
+export const getToolbarConfig =
+  (
+    getEditorContainerWidth: GetEditorContainerWidth,
+    editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
+    getEditorFeatureFlags: GetEditorFeatureFlags,
+  ) =>
+  (config: PluginConfig): FloatingToolbarHandler =>
+  (state, intl) => {
+    const tableObject = findTable(state.selection);
+    const pluginState = getPluginState(state);
+    const resizeState: ColumnResizingPluginState | undefined =
+      tableResizingPluginKey.getState(state);
+    if (tableObject && pluginState.editorHasFocus) {
+      const nodeType = state.schema.nodes.table;
+      const menu = getToolbarMenuConfig(
+        config,
+        pluginState,
+        intl,
+        editorAnalyticsAPI,
+      );
 
-    const { tableCellOptionsInFloatingToolbar } = getEditorFeatureFlags() || {};
-    const cellItems = getCellItems(
-      config,
-      state,
-      intl,
-      getEditorContainerWidth,
-      editorAnalyticsAPI,
-      tableCellOptionsInFloatingToolbar,
-    );
-    const colorPicker = getColorPicker(
-      state,
-      menu,
-      intl,
-      getEditorContainerWidth,
-      editorAnalyticsAPI,
-      tableCellOptionsInFloatingToolbar,
-    );
+      const { tableCellOptionsInFloatingToolbar } =
+        getEditorFeatureFlags() || {};
+      const cellItems = getCellItems(
+        config,
+        state,
+        intl,
+        getEditorContainerWidth,
+        editorAnalyticsAPI,
+        tableCellOptionsInFloatingToolbar,
+      );
+      const colorPicker = getColorPicker(
+        state,
+        menu,
+        intl,
+        getEditorContainerWidth,
+        editorAnalyticsAPI,
+        tableCellOptionsInFloatingToolbar,
+      );
 
-    // Check if we need to show confirm dialog for delete button
-    let confirmDialog;
-    const localId: string | undefined = tableObject.node.attrs.localId;
+      // Check if we need to show confirm dialog for delete button
+      let confirmDialog;
+      const localId: string | undefined = tableObject.node.attrs.localId;
 
-    if (localId && isReferencedSource(state, localId)) {
-      confirmDialog = {
-        okButtonLabel: intl.formatMessage(
-          tableMessages.confirmDeleteLinkedModalOKButton,
-        ),
-        message: intl.formatMessage(
-          tableMessages.confirmDeleteLinkedModalMessage,
-        ),
-      };
-    }
+      if (localId && isReferencedSource(state, localId)) {
+        confirmDialog = {
+          okButtonLabel: intl.formatMessage(
+            tableMessages.confirmDeleteLinkedModalOKButton,
+          ),
+          message: intl.formatMessage(
+            tableMessages.confirmDeleteLinkedModalMessage,
+          ),
+        };
+      }
 
-    const getDomRef = (editorView: EditorView) => {
-      let element: HTMLElement | undefined;
-      const domAtPos = editorView.domAtPos.bind(editorView);
-      const parent = findParentDomRefOfType(
-        nodeType,
-        domAtPos,
-      )(state.selection);
-      if (parent) {
-        const tableRef =
-          (parent as HTMLElement).querySelector<HTMLTableElement>('table') ||
-          undefined;
-        if (tableRef) {
-          element =
-            closestElement(
-              tableRef,
-              `.${TableCssClassName.TABLE_NODE_WRAPPER}`,
-            ) || undefined;
+      const getDomRef = (editorView: EditorView) => {
+        let element: HTMLElement | undefined;
+        const domAtPos = editorView.domAtPos.bind(editorView);
+        const parent = findParentDomRefOfType(
+          nodeType,
+          domAtPos,
+        )(state.selection);
+        if (parent) {
+          const tableRef =
+            (parent as HTMLElement).querySelector<HTMLTableElement>('table') ||
+            undefined;
+          if (tableRef) {
+            element =
+              closestElement(
+                tableRef,
+                `.${TableCssClassName.TABLE_NODE_WRAPPER}`,
+              ) || undefined;
+          }
         }
-      }
 
-      return element;
-    };
+        return element;
+      };
 
-    return {
-      title: 'Table floating controls',
-      getDomRef,
-      nodeType,
-      offset: [0, 3],
-      items: [
-        menu,
-        separator(menu.hidden),
-        ...cellItems,
-        ...colorPicker,
-        {
-          type: 'extensions-placeholder',
-          separator: 'end',
-        },
-        {
-          type: 'copy-button',
-          items: [
-            {
-              state,
-              formatMessage: intl.formatMessage,
-              nodeType,
-              onMouseEnter: hoverTable(false, true),
-              onMouseLeave: clearHoverSelection(),
-            },
-            { type: 'separator' },
-          ],
-        },
-        {
-          id: 'editor.table.delete',
-          type: 'button',
-          appearance: 'danger',
-          icon: RemoveIcon,
-          onClick: deleteTableWithAnalytics(editorAnalyticsAPI),
-          disabled: !!resizeState && !!resizeState.dragging,
-          onMouseEnter: hoverTable(true),
-          onMouseLeave: clearHoverSelection(),
-          title: intl.formatMessage(commonMessages.remove),
-          confirmDialog,
-        },
-      ],
-      scrollable: true,
-    };
-  }
-  return;
-};
+      return {
+        title: 'Table floating controls',
+        getDomRef,
+        nodeType,
+        offset: [0, 3],
+        items: [
+          menu,
+          separator(menu.hidden),
+          ...cellItems,
+          ...colorPicker,
+          {
+            type: 'extensions-placeholder',
+            separator: 'end',
+          },
+          {
+            type: 'copy-button',
+            items: [
+              {
+                state,
+                formatMessage: intl.formatMessage,
+                nodeType,
+                onMouseEnter: hoverTable(false, true),
+                onMouseLeave: clearHoverSelection(),
+              },
+              { type: 'separator' },
+            ],
+          },
+          {
+            id: 'editor.table.delete',
+            type: 'button',
+            appearance: 'danger',
+            icon: RemoveIcon,
+            onClick: deleteTableWithAnalytics(editorAnalyticsAPI),
+            disabled: !!resizeState && !!resizeState.dragging,
+            onMouseEnter: hoverTable(true),
+            onMouseLeave: clearHoverSelection(),
+            title: intl.formatMessage(commonMessages.remove),
+            confirmDialog,
+          },
+        ],
+        scrollable: true,
+      };
+    }
+    return;
+  };
 
 const separator = (hidden?: boolean): FloatingToolbarItem<Command> => {
   return {

package/src/plugins/table/transforms/column-width.ts

@@ -22,109 +22,107 @@ import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { scaleTableTo } from '../pm-plugins/table-resizing/utils/scale-table';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 
-export const updateColumnWidths = (
-  resizeState: ResizeState,
-  table: PMNode,
-  start: number,
-) => (tr: Transaction): Transaction => {
-  const map = TableMap.get(table);
-  const updatedCellsAttrs: { [key: number]: CellAttributes } = {};
-
-  // calculating new attributes for each cell
-  for (let columnIndex = 0; columnIndex < map.width; columnIndex++) {
-    for (let rowIndex = 0; rowIndex < map.height; rowIndex++) {
-      const { width } = resizeState.cols[columnIndex];
-      const mapIndex = rowIndex * map.width + columnIndex;
-      const cellPos = map.map[mapIndex];
-      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',
-          problem: 'COLWIDTHS_BEFORE_UPDATE',
-          data: { colwidths: attrs.colwidth, colspan },
-        })(tr);
-        attrs.colwidth = attrs.colwidth.slice(0, colspan);
-      }
-
-      // 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;
-      }
+export const updateColumnWidths =
+  (resizeState: ResizeState, table: PMNode, start: number) =>
+  (tr: Transaction): Transaction => {
+    const map = TableMap.get(table);
+    const updatedCellsAttrs: { [key: number]: CellAttributes } = {};
 
-      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',
-          problem: 'COLWIDTHS_AFTER_UPDATE',
-          data: { colwidths, colspan },
-        })(tr);
-        colwidths = colwidths.slice(0, colspan);
+    // calculating new attributes for each cell
+    for (let columnIndex = 0; columnIndex < map.width; columnIndex++) {
+      for (let rowIndex = 0; rowIndex < map.height; rowIndex++) {
+        const { width } = resizeState.cols[columnIndex];
+        const mapIndex = rowIndex * map.width + columnIndex;
+        const cellPos = map.map[mapIndex];
+        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',
+            problem: 'COLWIDTHS_BEFORE_UPDATE',
+            data: { colwidths: attrs.colwidth, colspan },
+          })(tr);
+          attrs.colwidth = attrs.colwidth.slice(0, colspan);
+        }
+
+        // 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',
+            problem: 'COLWIDTHS_AFTER_UPDATE',
+            data: { colwidths, colspan },
+          })(tr);
+          colwidths = colwidths.slice(0, colspan);
+        }
+        updatedCellsAttrs[cellPos] = {
+          ...attrs,
+          colwidth: colwidths.includes(0) ? undefined : colwidths,
+        };
       }
-      updatedCellsAttrs[cellPos] = {
-        ...attrs,
-        colwidth: colwidths.includes(0) ? undefined : colwidths,
-      };
     }
-  }
-
-  // updating all cells with new attributes
-  const rows: PMNode[] = [];
-  const seen: { [key: number]: boolean } = {};
-  for (let rowIndex = 0; rowIndex < map.height; rowIndex++) {
-    const row = table.child(rowIndex);
-    const cells: PMNode[] = [];
 
-    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;
+    // updating all cells with new attributes
+    const rows: PMNode[] = [];
+    const seen: { [key: number]: boolean } = {};
+    for (let rowIndex = 0; rowIndex < map.height; rowIndex++) {
+      const row = table.child(rowIndex);
+      const cells: PMNode[] = [];
+
+      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));
     }
-    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),
-  );
-  /**
-   * We want to restore to the original selection but w/o applying the mapping. Function
-   * tr.replaceWith puts the selection after the inserted content. We need to manually
-   * set the selection back to original state. Mapping in this case doesn't quite work
-   * e.g. if we change the content before a selection. This is because mapping
-   * means moving it if the content in front of it changed. Instead we can get
-   * bookmark of selection.
-   *
-   * @see https://github.com/ProseMirror/prosemirror/issues/645
-   */
-  return tr.setSelection(selectionBookmark.resolve(tr.doc));
-};
+
+    const tablePos = start - 1;
+    const selectionBookmark = tr.selection.getBookmark();
+
+    tr.replaceWith(
+      tablePos,
+      tablePos + table.nodeSize,
+      table.type.createChecked(table.attrs, rows, table.marks),
+    );
+    /**
+     * We want to restore to the original selection but w/o applying the mapping. Function
+     * tr.replaceWith puts the selection after the inserted content. We need to manually
+     * set the selection back to original state. Mapping in this case doesn't quite work
+     * e.g. if we change the content before a selection. This is because mapping
+     * means moving it if the content in front of it changed. Instead we can get
+     * bookmark of selection.
+     *
+     * @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;
@@ -136,52 +134,51 @@ export const updateColumnWidths = (
  * @param view
  * @returns Updated transaction with rescaled columns for a given table
  */
-export const rescaleColumns = (
-  getEditorContainerWidth: GetEditorContainerWidth,
-) => (table: ContentNodeWithPos, view: EditorView | undefined) => (
-  tr: Transaction,
-): Transaction => {
-  // If the table has been not been resized we skip updating the size
-  // of columns here.
-  if (!view || !hasTableBeenResized(table.node)) {
-    return tr;
-  }
-
-  const { state } = view;
-  const domAtPos = view.domAtPos.bind(view);
-
-  const maybeTable = domAtPos(table.start).node as HTMLElement;
-  const tableRef = maybeTable.closest('table');
-
-  if (!tableRef) {
-    return tr;
-  }
-
-  const layout = normaliseTableLayout(tableRef?.dataset.layout);
-  // The is the width the table can reach before overflowing
-  const maxSize = getTableMaxWidth({
-    table: table.node,
-    tableStart: table.start,
-    state,
-    layout,
-    getEditorContainerWidth,
-  });
-  let resizeState = getResizeState({
-    minWidth: tableCellMinWidth,
-    table: table.node,
-    start: table.start,
-    tableRef,
-    domAtPos,
-    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
-  if (tableDidntPreviouslyOverflow && resizeState.overflow) {
-    resizeState = scaleTableTo(resizeState, maxSize);
-  }
-
-  return updateColumnWidths(resizeState, table.node, table.start)(tr);
-};
+export const rescaleColumns =
+  (getEditorContainerWidth: GetEditorContainerWidth) =>
+  (table: ContentNodeWithPos, view: EditorView | undefined) =>
+  (tr: Transaction): Transaction => {
+    // If the table has been not been resized we skip updating the size
+    // of columns here.
+    if (!view || !hasTableBeenResized(table.node)) {
+      return tr;
+    }
+
+    const { state } = view;
+    const domAtPos = view.domAtPos.bind(view);
+
+    const maybeTable = domAtPos(table.start).node as HTMLElement;
+    const tableRef = maybeTable.closest('table');
+
+    if (!tableRef) {
+      return tr;
+    }
+
+    const layout = normaliseTableLayout(tableRef?.dataset.layout);
+    // The is the width the table can reach before overflowing
+    const maxSize = getTableMaxWidth({
+      table: table.node,
+      tableStart: table.start,
+      state,
+      layout,
+      getEditorContainerWidth,
+    });
+    let resizeState = getResizeState({
+      minWidth: tableCellMinWidth,
+      table: table.node,
+      start: table.start,
+      tableRef,
+      domAtPos,
+      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
+    if (tableDidntPreviouslyOverflow && resizeState.overflow) {
+      resizeState = scaleTableTo(resizeState, maxSize);
+    }
+
+    return updateColumnWidths(resizeState, table.node, table.start)(tr);
+  };