@atlaskit/editor-plugin-table 0.0.0 → 0.0.1

package/src/plugins/table/toolbar.ts

@@ -0,0 +1,401 @@
+import { defineMessages } from 'react-intl-next';
+
+import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
+import commonMessages from '@atlaskit/editor-common/messages';
+import type {
+  Command,
+  CommandDispatch,
+  FloatingToolbarDropdown,
+  FloatingToolbarHandler,
+  FloatingToolbarItem,
+} from '@atlaskit/editor-common/types';
+
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+
+import { clearHoverSelection, hoverTable } from './commands';
+import {
+  deleteTableWithAnalytics,
+  toggleHeaderColumnWithAnalytics,
+  toggleHeaderRowWithAnalytics,
+  toggleNumberColumnWithAnalytics,
+  insertRowWithAnalytics,
+  deleteRowsWithAnalytics,
+  mergeCellsWithAnalytics,
+  splitCellWithAnalytics,
+  deleteColumnsWithAnalytics,
+  emptyMultipleCellsWithAnalytics,
+  insertColumnWithAnalytics,
+  wrapTableInExpandWithAnalytics,
+} from './commands-with-analytics';
+import { getPluginState } from './pm-plugins/plugin-factory';
+import { pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing';
+import {
+  ColumnResizingPluginState,
+  ToolbarMenuConfig,
+  ToolbarMenuState,
+  ToolbarMenuContext,
+  PluginConfig,
+  TableCssClassName,
+} from './types';
+import { isReferencedSource } from './utils/referentiality';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import {
+  findCellRectClosestToPos,
+  findTable,
+  getSelectionRect,
+  isSelectionType,
+} from '@atlaskit/editor-tables/utils';
+import { EditorState } from 'prosemirror-state';
+import { canMergeCells } from './transforms';
+import { splitCell } from '@atlaskit/editor-tables/utils';
+import tableMessages from './ui/messages';
+import { messages as ContextualMenuMessages } from './ui/FloatingContextualMenu/ContextualMenu';
+import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
+
+import { Rect } from '@atlaskit/editor-tables/table-map';
+import { findParentDomRefOfType } from 'prosemirror-utils';
+import { EditorView } from 'prosemirror-view';
+import { closestElement } from '@atlaskit/editor-common/utils';
+
+// TODO: ED-14403 investigate why these translations don't work
+export const messages = defineMessages({
+  tableOptions: {
+    id: 'fabric.editor.tableOptions',
+    defaultMessage: 'Table options',
+    description: 'Opens a menu with additional table options',
+  },
+  headerRow: {
+    id: 'fabric.editor.headerRow',
+    defaultMessage: 'Header row',
+    description: 'Marks the first table row as a header row',
+  },
+  headerColumn: {
+    id: 'fabric.editor.headerColumn',
+    defaultMessage: 'Header column',
+    description: 'Marks the first table column as a header row',
+  },
+  numberedColumn: {
+    id: 'fabric.editor.numberedColumn',
+    defaultMessage: 'Numbered column',
+    description: 'Adds an auto-numbering column to your table',
+  },
+  collapseTable: {
+    id: 'fabric.editor.collapseTable',
+    defaultMessage: 'Collapse table',
+    description: 'Wraps table in an expand',
+  },
+});
+
+export const getToolbarMenuConfig = (
+  config: ToolbarMenuConfig,
+  state: ToolbarMenuState,
+  { formatMessage }: ToolbarMenuContext,
+  editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
+): FloatingToolbarItem<Command> => {
+  const options = [
+    {
+      id: 'editor.table.headerRow',
+      title: formatMessage(messages.headerRow),
+      onClick: toggleHeaderRowWithAnalytics(editorAnalyticsAPI),
+      selected: state.isHeaderRowEnabled,
+      hidden: !config.allowHeaderRow,
+    },
+    {
+      id: 'editor.table.headerColumn',
+      title: formatMessage(messages.headerColumn),
+      onClick: toggleHeaderColumnWithAnalytics(editorAnalyticsAPI),
+      selected: state.isHeaderColumnEnabled,
+      hidden: !config.allowHeaderColumn,
+    },
+    {
+      id: 'editor.table.numberedColumn',
+      title: formatMessage(messages.numberedColumn),
+      onClick: toggleNumberColumnWithAnalytics(editorAnalyticsAPI),
+      selected: state.isNumberColumnEnabled,
+      hidden: !config.allowNumberColumn,
+    },
+    {
+      id: 'editor.table.collapseTable',
+      title: formatMessage(messages.collapseTable),
+      onClick: wrapTableInExpandWithAnalytics(editorAnalyticsAPI),
+      selected: !!state.isTableCollapsed,
+      disabled: !state.canCollapseTable,
+      hidden: !config.allowCollapse,
+    },
+  ];
+
+  return {
+    id: 'editor.table.tableOptions',
+    type: 'dropdown',
+    title: formatMessage(messages.tableOptions),
+    hidden: options.every((option) => option.hidden),
+    options,
+  };
+};
+
+// Added these options for mobile. Mobile bridge translates this menu and
+// relay it to the native mobile. Native mobile displays the menu
+// with native widgets. It's enabled via a plugin config.
+export const getToolbarCellOptionsConfig = (
+  editorState: EditorState,
+  initialSelectionRect: Rect,
+  { formatMessage }: ToolbarMenuContext,
+  getEditorContainerWidth: GetEditorContainerWidth,
+  editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
+): FloatingToolbarDropdown<Command> => {
+  const { top, bottom, right, left } = initialSelectionRect;
+  const numberOfColumns = right - left;
+  const numberOfRows = bottom - top;
+
+  const options = [
+    {
+      id: 'editor.table.insertColumn',
+      title: formatMessage(tableMessages.insertColumn),
+      onClick: (
+        state: EditorState,
+        dispatch?: CommandDispatch,
+        view?: EditorView,
+      ) => {
+        const selectionRect = getClosestSelectionRect(state);
+        const index = selectionRect?.right;
+        if (index) {
+          insertColumnWithAnalytics(
+            getEditorContainerWidth,
+            editorAnalyticsAPI,
+          )(INPUT_METHOD.FLOATING_TB, index)(state, dispatch, view);
+        }
+        return true;
+      },
+      selected: false,
+      disabled: false,
+    },
+    {
+      id: 'editor.table.insertRow',
+      title: formatMessage(tableMessages.insertRow),
+      onClick: (state: EditorState, dispatch?: CommandDispatch) => {
+        const selectionRect = getClosestSelectionRect(state);
+        const index = selectionRect?.bottom;
+        if (index) {
+          insertRowWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, {
+            index,
+            moveCursorToInsertedRow: true,
+          })(state, dispatch);
+        }
+        return true;
+      },
+      selected: false,
+      disabled: false,
+    },
+    {
+      id: 'editor.table.removeColumns',
+      title: formatMessage(tableMessages.removeColumns, {
+        0: numberOfColumns,
+      }),
+      onClick: (
+        state: EditorState,
+        dispatch?: CommandDispatch,
+        view?: EditorView,
+      ) => {
+        const selectionRect = getClosestSelectionRect(state);
+        if (selectionRect) {
+          deleteColumnsWithAnalytics(editorAnalyticsAPI)(
+            INPUT_METHOD.FLOATING_TB,
+            selectionRect,
+          )(state, dispatch, view);
+        }
+        return true;
+      },
+      selected: false,
+      disabled: false,
+    },
+    {
+      id: 'editor.table.removeRows',
+      title: formatMessage(tableMessages.removeRows, {
+        0: numberOfRows,
+      }),
+      onClick: (state: EditorState, dispatch?: CommandDispatch) => {
+        const selectionRect = getClosestSelectionRect(state);
+        if (selectionRect) {
+          deleteRowsWithAnalytics(editorAnalyticsAPI)(
+            INPUT_METHOD.FLOATING_TB,
+            selectionRect,
+            false,
+          )(state, dispatch);
+        }
+        return true;
+      },
+      selected: false,
+      disabled: false,
+    },
+    {
+      id: 'editor.table.mergeCells',
+      title: formatMessage(ContextualMenuMessages.mergeCells),
+      onClick: mergeCellsWithAnalytics(editorAnalyticsAPI),
+      selected: false,
+      disabled: !canMergeCells(editorState.tr),
+    },
+    {
+      id: 'editor.table.splitCell',
+      title: formatMessage(ContextualMenuMessages.splitCell),
+      onClick: splitCellWithAnalytics(editorAnalyticsAPI),
+      selected: false,
+      disabled: !splitCell(editorState),
+    },
+    {
+      id: 'editor.table.clearCells',
+      title: formatMessage(ContextualMenuMessages.clearCells, {
+        0: Math.max(numberOfColumns, numberOfRows),
+      }),
+      onClick: (state: EditorState, dispatch?: CommandDispatch) => {
+        const { targetCellPosition } = getPluginState(state);
+        emptyMultipleCellsWithAnalytics(editorAnalyticsAPI)(
+          INPUT_METHOD.FLOATING_TB,
+          targetCellPosition,
+        )(state, dispatch);
+        return true;
+      },
+      selected: false,
+      disabled: false,
+    },
+  ];
+
+  return {
+    id: 'editor.table.cellOptions',
+    type: 'dropdown',
+    title: formatMessage(tableMessages.cellOptions),
+    hidden: true,
+    options,
+  };
+};
+
+const getClosestSelectionRect = (state: EditorState): Rect | undefined => {
+  const selection = state.selection;
+  return isSelectionType(selection, 'cell')
+    ? getSelectionRect(selection)!
+    : findCellRectClosestToPos(selection.$from);
+};
+
+export const getToolbarConfig = (
+  getEditorContainerWidth: GetEditorContainerWidth,
+  editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
+) => (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 cellItems = getCellItems(
+      config,
+      state,
+      intl,
+      getEditorContainerWidth,
+      editorAnalyticsAPI,
+    );
+
+    // 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,
+        ),
+      };
+    }
+
+    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 {
+      title: 'Table floating controls',
+      getDomRef,
+      nodeType,
+      offset: [0, 3],
+      items: [
+        menu,
+        separator(menu.hidden),
+        ...cellItems,
+        {
+          type: 'extensions-placeholder',
+          separator: 'end',
+        },
+        {
+          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,
+        },
+      ],
+    };
+  }
+  return;
+};
+
+const separator = (hidden?: boolean): FloatingToolbarItem<Command> => {
+  return {
+    type: 'separator',
+    hidden: hidden,
+  };
+};
+
+const getCellItems = (
+  pluginConfig: PluginConfig,
+  state: EditorState,
+  { formatMessage }: ToolbarMenuContext,
+  getEditorContainerWidth: GetEditorContainerWidth,
+  editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
+): Array<FloatingToolbarItem<Command>> => {
+  if (pluginConfig.allowCellOptionsInFloatingToolbar) {
+    const initialSelectionRect = getClosestSelectionRect(state);
+    if (initialSelectionRect) {
+      const cellOptions = getToolbarCellOptionsConfig(
+        state,
+        initialSelectionRect,
+        { formatMessage },
+        getEditorContainerWidth,
+        editorAnalyticsAPI,
+      );
+      return [cellOptions, separator(cellOptions.hidden!)];
+    }
+  }
+  return [];
+};

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

@@ -0,0 +1,187 @@
+import { Node as PMNode } from 'prosemirror-model';
+import { Transaction } from 'prosemirror-state';
+import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { tableNewColumnMinWidth } from '@atlaskit/editor-common/styles';
+
+import { CellAttributes } from '@atlaskit/adf-schema';
+
+import {
+  hasTableBeenResized,
+  ResizeState,
+} from '../pm-plugins/table-resizing/utils';
+
+import { setMeta } from './metadata';
+import { ContentNodeWithPos } from 'prosemirror-utils';
+import { EditorView } from 'prosemirror-view';
+import {
+  getResizeState,
+  normaliseTableLayout,
+} from '../pm-plugins/table-resizing/utils/resize-state';
+import { getTableMaxWidth } from '../pm-plugins/table-resizing/utils/misc';
+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;
+      }
+
+      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,
+      };
+    }
+  }
+
+  // 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));
+  }
+
+  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;
+ * - rescale all columns (if the table did not overflow before the insertion)
+ * - and update column widths.
+ *
+ * This is done manually to avoid a multi-dispatch in TableComponent. See [ED-8288].
+ * @param table
+ * @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);
+};