@atlaskit/editor-plugin-table 0.0.0 → 0.0.1

package/src/plugins/table/pm-plugins/sticky-headers/plugin.ts

@@ -0,0 +1,36 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
+
+import {
+  EventDispatcher,
+  Dispatch,
+} from '@atlaskit/editor-common/event-dispatcher';
+
+import { TableRowNodeView } from './nodeviews/tableRow';
+import { pluginKey } from './plugin-key';
+import { createPluginState } from './plugin-state';
+
+export const createPlugin = (
+  dispatch: Dispatch,
+  eventDispatcher: EventDispatcher,
+  initialState = () => [],
+  getEditorFeatureFlags: GetEditorFeatureFlags,
+) => {
+  return new SafePlugin({
+    state: createPluginState(dispatch, initialState),
+    key: pluginKey,
+    props: {
+      nodeViews: {
+        tableRow: (node, view, getPos) => {
+          return new TableRowNodeView(
+            node,
+            view,
+            getPos,
+            eventDispatcher,
+            getEditorFeatureFlags,
+          );
+        },
+      },
+    },
+  });
+};

package/src/plugins/table/pm-plugins/sticky-headers/types.ts

@@ -0,0 +1,20 @@
+export type RowStickyState = {
+  pos: number;
+  top: number;
+  padding: number;
+  sticky: boolean;
+};
+
+export type StickyPluginState = RowStickyState[];
+
+export type UpdateSticky = {
+  name: 'UPDATE';
+  state: RowStickyState;
+};
+
+export type RemoveSticky = {
+  name: 'REMOVE';
+  pos: number;
+};
+
+export type StickyPluginAction = UpdateSticky | RemoveSticky;

package/src/plugins/table/pm-plugins/sticky-headers/util.ts

@@ -0,0 +1,18 @@
+import { StickyPluginState } from './types';
+
+// only worry about the first row for now
+export const findStickyHeaderForTable = (
+  state: StickyPluginState,
+  tablePos: number | undefined,
+) => {
+  if (!state || tablePos === undefined) {
+    return undefined;
+  }
+
+  const rowInfo = state.find((rowInfo) => rowInfo.pos === tablePos + 1);
+  if (!rowInfo) {
+    return undefined;
+  }
+
+  return rowInfo.sticky ? rowInfo : undefined;
+};

package/src/plugins/table/pm-plugins/table-local-id.ts

@@ -0,0 +1,203 @@
+/**
+ * A plugin for ensuring tables always have unique local IDs, and to
+ * preserve/not regenerate them when they are being cut and paste around the
+ * document.
+ *
+ * More broadly, this plugin should be generalised so it can solve this ‘unique
+ * id’ problem across the codebase for any node, but for now this will live on
+ * its own solving only for tables.
+ *
+ * TODO: https://product-fabric.atlassian.net/browse/ED-12714
+ *
+ */
+// import { Dispatch } from '../../../event-dispatcher';
+import { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { EditorState, PluginKey, Transaction } from 'prosemirror-state';
+import { NodeType } from 'prosemirror-model';
+import rafSchedule from 'raf-schd';
+
+import { uuid } from '@atlaskit/adf-schema';
+
+// import { stepAddsOneOf } from '../../../utils/step';
+import { stepAddsOneOf } from '@atlaskit/editor-common/utils';
+
+interface TableLocalIdPluginState {
+  // One time parse for initial load with existing tables without localIds
+  parsedForLocalIds: boolean;
+}
+
+const pluginKey = new PluginKey<TableLocalIdPluginState>('tableLocalIdPlugin');
+const getPluginState = (
+  state: EditorState,
+): TableLocalIdPluginState | undefined | null =>
+  state && pluginKey.getState(state);
+
+/**
+ * Traverses a transaction's steps to see if we're inserting any tables
+ */
+const checkIsAddingTable = (transaction: Transaction, nodeType: NodeType) => {
+  return transaction.steps.some((step) =>
+    stepAddsOneOf(step, new Set([nodeType])),
+  );
+};
+
+/**
+ * Ensures uniqueness of `localId`s on tables being created or edited
+ */
+const createPlugin = (dispatch: Dispatch) =>
+  new SafePlugin<TableLocalIdPluginState>({
+    key: pluginKey,
+    state: {
+      init() {
+        return {
+          parsedForLocalIds: false,
+        };
+      },
+      apply(tr, pluginState) {
+        const meta = tr.getMeta(pluginKey);
+        if (meta) {
+          const keys = Object.keys(meta) as Array<
+            keyof TableLocalIdPluginState
+          >;
+          const changed = keys.some((key) => {
+            return pluginState[key] !== meta[key];
+          });
+
+          if (changed) {
+            const newState = { ...pluginState, ...meta };
+
+            dispatch(pluginKey, newState);
+            return newState;
+          }
+        }
+
+        return pluginState;
+      },
+    },
+    view: () => {
+      return {
+        /**
+         * Utilise the update cycle for _one_ scan through an initial doc
+         * to ensure existing tables without IDs get them when this plugin is
+         * enabled.
+         *
+         * This entire block can be skipped if we simply remove the `checkIsAddingTable`
+         * check in appendTransaction, but that comes with 2 cons:
+         *
+         * 1. require a transaction before we actually add the local IDs
+         * 2. ever slightly more unncessary checks
+         *
+         * Finally, this never happens in practice when utilising this in
+         * confluence, as the collab/synchrony initialisation process will
+         * trigger a transaction which adds tables, and thus this plugin will
+         * add/dedupe the necessary IDs. But general usage of the editor
+         * without collab should still solve for IDs.
+         */
+        update(editorView) {
+          const { state } = editorView;
+          const pluginState = getPluginState(state);
+          if (!pluginState) {
+            return;
+          }
+          const parsed = pluginState.parsedForLocalIds;
+          if (parsed) {
+            return;
+          }
+
+          const { table } = state.schema.nodes;
+          rafSchedule(() => {
+            const tr = state.tr;
+            let tableIdWasAdded = false;
+            editorView.state.doc.descendants((node, pos) => {
+              const isTable = node.type === table;
+              const localId = node.attrs.localId;
+              if (isTable && !localId) {
+                tableIdWasAdded = true;
+                tr.setNodeMarkup(pos, undefined, {
+                  ...node.attrs,
+                  localId: uuid.generate(),
+                });
+                return false;
+              }
+              /**
+               * Otherwise continue traversing, we can encounter tables nested in
+               * expands/bodiedExtensions
+               */
+              return true;
+            });
+            if (tableIdWasAdded) {
+              tr.setMeta('addToHistory', false);
+              editorView.dispatch(tr);
+            }
+          })();
+
+          editorView.dispatch(
+            state.tr.setMeta(pluginKey, {
+              parsedForLocalIds: true,
+            }),
+          );
+        },
+      };
+    },
+    appendTransaction: (transactions, _oldState, newState) => {
+      let modified = false;
+      const tr = newState.tr;
+      const { table } = newState.schema.nodes;
+
+      const idsObserved = new Set<string>();
+
+      transactions.forEach((transaction) => {
+        if (!transaction.docChanged) {
+          return;
+        }
+
+        // Don't interfere with cut as it clashes with fixTables & we don't need
+        // to handle any extra cut cases in this plugin
+        const uiEvent = transaction.getMeta('uiEvent');
+        if (uiEvent === 'cut') {
+          return;
+        }
+
+        /** Check if we're actually inserting a table, otherwise we can ignore this tr */
+        const isAddingTable = checkIsAddingTable(transaction, table);
+        if (!isAddingTable) {
+          return;
+        }
+
+        // Can't simply look at changed nodes, as we could be adding a table
+        newState.doc.descendants((node, pos) => {
+          const isTable = node.type === table;
+          const localId = node.attrs.localId;
+
+          // Dealing with a table - make sure it's a unique ID
+          if (isTable) {
+            if (localId && !idsObserved.has(localId)) {
+              idsObserved.add(localId);
+              // Also add a localId if it happens to not have one,
+            } else if (!localId || idsObserved.has(localId)) {
+              modified = true;
+              tr.setNodeMarkup(pos, undefined, {
+                ...node.attrs,
+                localId: uuid.generate(),
+              });
+            }
+            return false;
+          }
+
+          /**
+           * Otherwise continue traversing, we can encounter tables nested in
+           * expands/bodiedExtensions
+           */
+          return true;
+        });
+      });
+
+      if (modified) {
+        return tr;
+      }
+      return;
+    },
+  });
+
+export { createPlugin };

package/src/plugins/table/pm-plugins/table-resizing/commands.ts

@@ -0,0 +1,168 @@
+import { Node as PMNode } from 'prosemirror-model';
+import { Transaction } from 'prosemirror-state';
+
+import { isTableSelected } from '@atlaskit/editor-tables/utils';
+
+import type { Command } from '@atlaskit/editor-common/types';
+import type { DomAtPos } from 'prosemirror-utils';
+import { updateColumnWidths } from '../../transforms';
+
+import { createCommand, getPluginState } from './plugin-factory';
+import {
+  evenAllColumnsWidths,
+  hasTableBeenResized,
+  isClickNear,
+  insertColgroupFromNode as recreateResizeColsByNode,
+  ResizeState,
+  scale,
+  ScaleOptions,
+  scaleWithParent,
+} from './utils';
+
+import { ContentNodeWithPos } from 'prosemirror-utils';
+
+// Scale the table to meet new requirements (col, layout change etc)
+export const scaleTable = (
+  tableRef: HTMLTableElement | null | undefined,
+  options: ScaleOptions,
+  domAtPos: DomAtPos,
+): Command => (state, dispatch) => {
+  if (!tableRef) {
+    return false;
+  }
+
+  const { node, start, parentWidth } = options;
+
+  // If a table has not been resized yet, columns should be auto.
+  if (hasTableBeenResized(node) === false) {
+    // If its not a re-sized table, we still want to re-create cols
+    // To force reflow of columns upon delete.
+    recreateResizeColsByNode(tableRef, node);
+    return false;
+  }
+
+  let resizeState;
+  if (parentWidth) {
+    resizeState = scaleWithParent(tableRef, parentWidth, node, start, domAtPos);
+  } else {
+    resizeState = scale(tableRef, options, domAtPos);
+  }
+
+  if (resizeState) {
+    let { tr } = state;
+    tr = updateColumnWidths(resizeState, node, start)(tr);
+
+    if (tr.docChanged && dispatch) {
+      tr.setMeta('scrollIntoView', false);
+      // TODO: ED-8995
+      // We need to do this check to reduce the number of race conditions when working with tables.
+      // This metadata is been used in the sendTransaction function in the Collab plugin
+      tr.setMeta('scaleTable', true);
+      dispatch(tr);
+      return true;
+    }
+  }
+
+  return false;
+};
+
+export const evenColumns = ({
+  resizeState,
+  table,
+  start,
+  event,
+}: {
+  resizeState: ResizeState;
+  table: PMNode;
+  start: number;
+  event: MouseEvent;
+}): Command => (state, dispatch) => {
+  if (!isTableSelected(state.selection)) {
+    return false;
+  }
+
+  // double click detection logic
+  // Note: ProseMirror's handleDoubleClick doesn't quite work with DOM mousedown event handler
+  const { lastClick } = getPluginState(state);
+  const now = Date.now();
+  if (
+    lastClick &&
+    now - lastClick.time < 500 &&
+    isClickNear(event, lastClick)
+  ) {
+    const newState = evenAllColumnsWidths(resizeState);
+    setLastClick(null, (tr) => updateColumnWidths(newState, table, start)(tr))(
+      state,
+      dispatch,
+    );
+
+    return true;
+  }
+
+  setLastClick({ x: event.clientX, y: event.clientY, time: now })(
+    state,
+    dispatch,
+  );
+
+  return false;
+};
+
+export const distributeColumnsWidths = (
+  newResizeState: ResizeState,
+  table: ContentNodeWithPos,
+): Command => (state, dispatch) => {
+  if (dispatch) {
+    const tr = updateColumnWidths(
+      newResizeState,
+      table.node,
+      table.start,
+    )(state.tr);
+    stopResizing(tr)(state, dispatch);
+  }
+
+  return true;
+};
+
+export const setResizeHandlePos = (resizeHandlePos: number | null) =>
+  createCommand({
+    type: 'SET_RESIZE_HANDLE_POSITION',
+    data: {
+      resizeHandlePos,
+    },
+  });
+
+export const stopResizing = (tr?: Transaction) =>
+  createCommand(
+    {
+      type: 'STOP_RESIZING',
+    },
+    (originalTr) => (tr || originalTr).setMeta('scrollIntoView', false),
+  );
+
+export const setDragging = (
+  dragging: { startX: number; startWidth: number } | null,
+  tr?: Transaction,
+) =>
+  createCommand(
+    {
+      type: 'SET_DRAGGING',
+      data: {
+        dragging,
+      },
+    },
+    (originalTr) => tr || originalTr,
+  );
+
+export const setLastClick = (
+  lastClick: { x: number; y: number; time: number } | null,
+  transform?: (tr: Transaction) => Transaction,
+) =>
+  createCommand(
+    {
+      type: 'SET_LAST_CLICK',
+      data: {
+        lastClick,
+      },
+    },
+    transform,
+  );

package/src/plugins/table/pm-plugins/table-resizing/event-handlers.ts

@@ -0,0 +1,218 @@
+import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { getSelectionRect } from '@atlaskit/editor-tables/utils';
+import { EditorView } from 'prosemirror-view';
+
+import { CellAttributes, TableLayout } from '@atlaskit/adf-schema';
+import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
+import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
+
+import { getParentNodeWidth } from '@atlaskit/editor-common/node-width';
+import { updateColumnWidths } from '../../transforms';
+import { getSelectedColumnIndexes, updateResizeHandles } from '../../utils';
+
+import { evenColumns, setDragging, stopResizing } from './commands';
+import { getPluginState } from './plugin-factory';
+import {
+  currentColWidth,
+  getLayoutSize,
+  getResizeState,
+  pointsAtCell,
+  resizeColumn,
+  updateControls,
+} from './utils';
+
+import {
+  ACTION_SUBJECT,
+  EVENT_TYPE,
+  TABLE_ACTION,
+} from '@atlaskit/editor-common/analytics';
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import type {
+  GetEditorContainerWidth,
+  GetEditorFeatureFlags,
+} from '@atlaskit/editor-common/types';
+
+export const handleMouseDown = (
+  view: EditorView,
+  event: MouseEvent,
+  localResizeHandlePos: number,
+  getEditorContainerWidth: GetEditorContainerWidth,
+  getEditorFeatureFlags: GetEditorFeatureFlags,
+  editorAnalyticsAPI?: EditorAnalyticsAPI,
+): boolean => {
+  const { state, dispatch } = view;
+  const editorDisabled = !view.editable;
+  const domAtPos = view.domAtPos.bind(view);
+
+  if (
+    editorDisabled ||
+    localResizeHandlePos === null ||
+    !pointsAtCell(state.doc.resolve(localResizeHandlePos))
+  ) {
+    return false;
+  }
+  event.preventDefault();
+
+  const mouseDownTime = event.timeStamp;
+  const cell = state.doc.nodeAt(localResizeHandlePos);
+  const $cell = state.doc.resolve(localResizeHandlePos);
+  const originalTable = $cell.node(-1);
+  const start = $cell.start(-1);
+
+  let dom: HTMLTableElement = domAtPos(start).node as HTMLTableElement;
+  if (dom && dom.nodeName !== 'TABLE') {
+    dom = dom.closest('table') as HTMLTableElement;
+  }
+
+  const containerWidth = getEditorContainerWidth();
+  const parentWidth = getParentNodeWidth(start, state, containerWidth);
+
+  let maxSize =
+    parentWidth ||
+    getLayoutSize(
+      dom.getAttribute('data-layout') as TableLayout,
+      containerWidth.width,
+      {},
+    );
+
+  if (originalTable.attrs.isNumberColumnEnabled) {
+    maxSize -= akEditorTableNumberColumnWidth;
+  }
+
+  const resizeState = getResizeState({
+    minWidth: tableCellMinWidth,
+    maxSize,
+    table: originalTable,
+    tableRef: dom,
+    start,
+    domAtPos,
+  });
+
+  if (
+    evenColumns({
+      resizeState,
+      table: originalTable,
+      start,
+      event,
+    })(state, dispatch)
+  ) {
+    finish(event);
+    return true;
+  }
+
+  const width = currentColWidth(
+    view,
+    localResizeHandlePos,
+    cell!.attrs as CellAttributes,
+  );
+
+  setDragging({ startX: event.clientX, startWidth: width })(state, dispatch);
+
+  function finish(event: MouseEvent) {
+    window.removeEventListener('mouseup', finish);
+    window.removeEventListener('mousemove', move);
+
+    const { clientX } = event;
+    const { state, dispatch } = view;
+    const { dragging, resizeHandlePos } = getPluginState(state);
+    if (resizeHandlePos === null) {
+      return stopResizing()(state, dispatch);
+    }
+
+    if (!pointsAtCell(state.doc.resolve(resizeHandlePos))) {
+      return;
+    }
+    // resizeHandlePos could be remapped via a collab change.
+    // Fetch a fresh reference of the table.
+    const $cell = state.doc.resolve(resizeHandlePos);
+    const start = $cell.start(-1);
+    const table = $cell.node(-1);
+
+    // If we let go in the same place we started, dont need to do anything.
+    if (dragging && clientX === dragging.startX) {
+      return stopResizing()(state, dispatch);
+    }
+
+    let { tr } = state;
+    if (dragging) {
+      const { startX } = dragging;
+
+      // If the table has changed (via collab for example) don't apply column widths
+      // For example, if a table col is deleted we won't be able to reliably remap the new widths
+      // There may be a more elegant solution to this, to avoid a jarring experience.
+      if (table.eq(originalTable)) {
+        const map = TableMap.get(table);
+        const colIndex =
+          map.colCount($cell.pos - start) +
+          ($cell.nodeAfter ? $cell.nodeAfter.attrs.colspan : 1) -
+          1;
+        const selectionRect = getSelectionRect(state.selection);
+        const selectedColumns = selectionRect
+          ? getSelectedColumnIndexes(selectionRect)
+          : [];
+        // only selected (or selected - 1) columns should be distributed
+        const resizingSelectedColumns =
+          selectedColumns.indexOf(colIndex) > -1 ||
+          selectedColumns.indexOf(colIndex + 1) > -1;
+        const newResizeState = resizeColumn(
+          resizeState,
+          colIndex,
+          clientX - startX,
+          dom,
+          resizingSelectedColumns ? selectedColumns : undefined,
+        );
+        tr = updateColumnWidths(newResizeState, table, start)(tr);
+        if (colIndex === map.width - 1) {
+          const mouseUpTime = event.timeStamp;
+
+          editorAnalyticsAPI?.attachAnalyticsEvent({
+            action: TABLE_ACTION.ATTEMPTED_TABLE_WIDTH_CHANGE,
+            actionSubject: ACTION_SUBJECT.TABLE,
+            actionSubjectId: null,
+            attributes: {
+              type: 'table-border',
+              position: 'right',
+              duration: mouseUpTime - mouseDownTime,
+              delta: Math.abs(clientX - dragging.startX),
+            },
+            eventType: EVENT_TYPE.UI,
+          })(tr);
+        }
+      }
+
+      return stopResizing(tr)(state, dispatch);
+    }
+  }
+
+  function move(event: MouseEvent) {
+    const { clientX, which } = event;
+    const { state } = view;
+    const { dragging, resizeHandlePos } = getPluginState(state);
+    if (
+      !which ||
+      !dragging ||
+      resizeHandlePos === null ||
+      !pointsAtCell(state.doc.resolve(resizeHandlePos))
+    ) {
+      return finish(event);
+    }
+
+    const $cell = state.doc.resolve(resizeHandlePos);
+    const table = $cell.node(-1);
+    const map = TableMap.get(table);
+    const colIndex =
+      map.colCount($cell.pos - $cell.start(-1)) +
+      $cell.nodeAfter!.attrs.colspan -
+      1;
+
+    resizeColumn(resizeState, colIndex, clientX - dragging.startX, dom);
+
+    updateControls(getEditorFeatureFlags)(state);
+    updateResizeHandles(dom);
+  }
+
+  window.addEventListener('mouseup', finish);
+  window.addEventListener('mousemove', move);
+
+  return true;
+};

package/src/plugins/table/pm-plugins/table-resizing/index.ts

@@ -0,0 +1,3 @@
+export { createPlugin } from './plugin';
+export { scaleTable } from './commands';
+export { pluginKey } from './plugin-key';

package/src/plugins/table/pm-plugins/table-resizing/plugin-factory.ts

@@ -0,0 +1,28 @@
+import { ReadonlyTransaction } from 'prosemirror-state';
+
+import { pluginFactory } from '@atlaskit/editor-common/utils';
+import { ColumnResizingPluginState } from '../../types';
+
+import { pluginKey } from './plugin-key';
+import reducer from './reducer';
+
+function mapping(
+  tr: ReadonlyTransaction,
+  pluginState: ColumnResizingPluginState,
+): ColumnResizingPluginState {
+  if (pluginState && pluginState.resizeHandlePos !== null) {
+    return {
+      ...pluginState,
+      resizeHandlePos: tr.mapping.map(pluginState.resizeHandlePos),
+    };
+  }
+  return pluginState;
+}
+
+const factory = pluginFactory(pluginKey, reducer, {
+  mapping,
+});
+
+export const createCommand = factory.createCommand;
+export const createPluginState = factory.createPluginState;
+export const getPluginState = factory.getPluginState;

package/src/plugins/table/pm-plugins/table-resizing/plugin-key.ts

@@ -0,0 +1,6 @@
+import { PluginKey } from 'prosemirror-state';
+import { ColumnResizingPluginState } from '../../types';
+
+export const pluginKey = new PluginKey<ColumnResizingPluginState>(
+  'tableFlexiColumnResizing',
+);