@atlaskit/editor-plugin-table 0.0.0 → 0.0.2

package/src/plugins/table/nodeviews/__mocks__/OverridableMock.ts

@@ -0,0 +1,21 @@
+export abstract class OverridableMock {
+  static mockOverrides: { [key: string]: any } = {};
+
+  constructor(...inputs: any[]) {
+    const constructorMock =
+      OverridableMock.mockOverrides['constructor'] || jest.fn();
+    constructorMock(...inputs);
+  }
+
+  getMock(key: string) {
+    return OverridableMock.mockOverrides[key] || jest.fn();
+  }
+
+  static setMock(thisKey: string, value: any) {
+    OverridableMock.mockOverrides[thisKey] = value;
+  }
+
+  static resetMocks() {
+    OverridableMock.mockOverrides = {};
+  }
+}

package/src/plugins/table/nodeviews/table.tsx

@@ -0,0 +1,241 @@
+import React from 'react';
+import {
+  DOMOutputSpec,
+  DOMSerializer,
+  Node as PmNode,
+} from 'prosemirror-model';
+import { EditorView, NodeView } from 'prosemirror-view';
+// import { stateKey as mediaPluginKey } from '../../../plugins/media/pm-plugins/plugin-key';
+import { PluginKey, EditorState } from 'prosemirror-state';
+import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
+import type {
+  getPosHandler,
+  getPosHandlerNode,
+} from '@atlaskit/editor-common/types';
+
+import ReactNodeView from '@atlaskit/editor-common/react-node-view';
+import type { PortalProviderAPI } from '@atlaskit/editor-common/portal-provider';
+import type {
+  GetEditorContainerWidth,
+  GetEditorFeatureFlags,
+} from '@atlaskit/editor-common/types';
+import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
+
+import { pluginConfig as getPluginConfig } from '../create-plugin-config';
+import { getPluginState } from '../pm-plugins/plugin-factory';
+import { pluginKey } from '../pm-plugins/plugin-key';
+import { pluginKey as tableResizingPluginKey } from '../pm-plugins/table-resizing';
+import { generateColgroup } from '../pm-plugins/table-resizing/utils';
+import { TableMap } from '@atlaskit/editor-tables/table-map';
+import TableComponent from './TableComponent';
+import { Props, TableOptions } from './types';
+import type { TableColumnOrdering } from '@atlaskit/adf-schema/steps';
+
+type ForwardRef = (node: HTMLElement | null) => void;
+
+const tableAttributes = (node: PmNode) => {
+  return {
+    'data-number-column': node.attrs.isNumberColumnEnabled,
+    'data-layout': node.attrs.layout,
+    'data-autosize': node.attrs.__autoSize,
+    'data-table-local-id': node.attrs.localId || '',
+  };
+};
+
+const toDOM = (node: PmNode, props: Props) => {
+  let colgroup: DOMOutputSpec = '';
+
+  if (props.allowColumnResizing) {
+    colgroup = ['colgroup', {}, ...generateColgroup(node)];
+  }
+
+  return [
+    'table',
+    tableAttributes(node),
+    colgroup,
+    ['tbody', 0],
+  ] as DOMOutputSpec;
+};
+
+export default class TableView extends ReactNodeView<Props> {
+  private table: HTMLElement | undefined;
+  private resizeObserver?: ResizeObserver;
+  private tableRenderOptimization?: boolean;
+  eventDispatcher?: EventDispatcher;
+
+  getPos: getPosHandlerNode;
+
+  constructor(props: Props) {
+    super(
+      props.node,
+      props.view,
+      props.getPos,
+      props.portalProviderAPI,
+      props.eventDispatcher,
+      props,
+    );
+    this.getPos = props.getPos;
+    this.tableRenderOptimization = props.tableRenderOptimization;
+    this.eventDispatcher = props.eventDispatcher;
+  }
+
+  getContentDOM() {
+    const rendered = DOMSerializer.renderSpec(
+      document,
+      toDOM(this.node, this.reactComponentProps as Props),
+    );
+
+    if (rendered.dom) {
+      this.table = rendered.dom as HTMLElement;
+    }
+
+    return rendered;
+  }
+
+  setDomAttrs(node: PmNode) {
+    if (!this.table) {
+      return;
+    }
+
+    const attrs = tableAttributes(node);
+    (Object.keys(attrs) as Array<keyof typeof attrs>).forEach((attr) => {
+      this.table!.setAttribute(attr, attrs[attr]);
+    });
+  }
+
+  getNode = () => {
+    return this.node;
+  };
+
+  render(props: Props, forwardRef: ForwardRef) {
+    // TODO: ED-15663
+    // Please, do not copy or use this kind of code below
+    // @ts-ignore
+    const fakePluginKey = {
+      key: 'widthPlugin$',
+      getState: (state: EditorState) => {
+        return (state as any)['widthPlugin$'];
+      },
+    } as PluginKey;
+
+    return (
+      <WithPluginState
+        plugins={{
+          pluginState: pluginKey,
+          tableResizingPluginState: tableResizingPluginKey,
+          widthPlugin: fakePluginKey,
+          // mediaState: mediaPluginKey,
+        }}
+        editorView={props.view}
+        render={(pluginStates) => {
+          const {
+            tableResizingPluginState,
+            pluginState,
+            // containerWidth,
+            // mediaState,
+          } = pluginStates;
+          // const mediaState = {};
+          const mediaState = { isFullscreen: false };
+          const tableActive = props.getPos() === pluginState!.tablePos;
+          const containerWidth = props.getEditorContainerWidth();
+          return (
+            <TableComponent
+              view={props.view}
+              allowColumnResizing={props.allowColumnResizing}
+              eventDispatcher={props.eventDispatcher}
+              getPos={props.getPos}
+              isMediaFullscreen={mediaState?.isFullscreen}
+              options={props.options}
+              allowControls={pluginState!.pluginConfig.allowControls!}
+              isHeaderRowEnabled={pluginState!.isHeaderRowEnabled}
+              isHeaderColumnEnabled={pluginState!.isHeaderColumnEnabled}
+              tableActive={tableActive}
+              ordering={pluginState!.ordering as TableColumnOrdering}
+              tableResizingPluginState={tableResizingPluginState}
+              getNode={this.getNode}
+              containerWidth={containerWidth!}
+              contentDOM={forwardRef}
+              getEditorFeatureFlags={props.getEditorFeatureFlags}
+            />
+          );
+        }}
+      />
+    );
+  }
+
+  private hasHoveredRows = false;
+  viewShouldUpdate(nextNode: PmNode) {
+    if (this.tableRenderOptimization) {
+      const { hoveredRows } = getPluginState(this.view.state);
+      const hoveredRowsChanged = !!hoveredRows?.length !== this.hasHoveredRows;
+      if (nextNode.attrs.isNumberColumnEnabled && hoveredRowsChanged) {
+        this.hasHoveredRows = !!hoveredRows?.length;
+        return true;
+      }
+
+      const node = this.getNode();
+      if (typeof node.attrs !== typeof nextNode.attrs) {
+        return true;
+      }
+      const attrKeys = Object.keys(node.attrs);
+      const nextAttrKeys = Object.keys(nextNode.attrs);
+      if (attrKeys.length !== nextAttrKeys.length) {
+        return true;
+      }
+
+      const tableMap = TableMap.get(node);
+      const nextTableMap = TableMap.get(nextNode);
+
+      if (tableMap.width !== nextTableMap.width) {
+        return true;
+      }
+
+      return attrKeys.some((key) => {
+        return node.attrs[key] !== nextNode.attrs[key];
+      });
+    }
+
+    return super.viewShouldUpdate(nextNode);
+  }
+
+  ignoreMutation() {
+    return true;
+  }
+
+  destroy() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
+
+    this.eventDispatcher?.emit('TABLE_DELETED', this.node);
+
+    super.destroy();
+  }
+}
+
+export const createTableView = (
+  node: PmNode,
+  view: EditorView,
+  getPos: getPosHandler,
+  portalProviderAPI: PortalProviderAPI,
+  eventDispatcher: EventDispatcher,
+  options: TableOptions,
+  getEditorContainerWidth: GetEditorContainerWidth,
+  getEditorFeatureFlags: GetEditorFeatureFlags,
+): NodeView => {
+  const { pluginConfig } = getPluginState(view.state);
+  const { allowColumnResizing } = getPluginConfig(pluginConfig);
+  const { tableRenderOptimization } = getEditorFeatureFlags();
+  return new TableView({
+    node,
+    view,
+    allowColumnResizing,
+    portalProviderAPI,
+    eventDispatcher,
+    getPos: getPos as getPosHandlerNode,
+    options,
+    tableRenderOptimization,
+    getEditorContainerWidth,
+    getEditorFeatureFlags,
+  }).init();
+};

package/src/plugins/table/nodeviews/tableCell.tsx

@@ -0,0 +1,110 @@
+import uuid from 'uuid';
+import { Node, DOMSerializer } from 'prosemirror-model';
+import { EditorView, NodeView } from 'prosemirror-view';
+import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import type { getPosHandler } from '@atlaskit/editor-common/types';
+
+import {
+  getCellDomAttrs,
+  getCellAttrs,
+  CellDomAttrs,
+} from '@atlaskit/adf-schema';
+import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
+
+export default class TableCellNodeView implements NodeView {
+  node: Node;
+  dom: HTMLElement;
+  contentDOM: HTMLElement;
+  getPos: getPosHandler;
+  view: EditorView;
+  providerFactory?: ProviderFactory;
+  observer?: ResizeObserver;
+  mouseMoveOptimization?: boolean;
+
+  constructor(
+    node: Node,
+    view: EditorView,
+    getPos: any,
+    getEditorFeatureFlags: GetEditorFeatureFlags,
+    observer?: ResizeObserver,
+  ) {
+    this.view = view;
+    this.node = node;
+
+    const { dom, contentDOM } = DOMSerializer.renderSpec(
+      document,
+      node.type.spec.toDOM!(node),
+    );
+
+    this.getPos = getPos;
+    this.dom = dom as HTMLElement;
+    this.contentDOM = contentDOM as HTMLElement;
+
+    const { mouseMoveOptimization } = getEditorFeatureFlags();
+
+    if (mouseMoveOptimization && observer) {
+      this.contentDOM.id = uuid();
+      this.mouseMoveOptimization = mouseMoveOptimization;
+      this.observer = observer;
+      observer.observe(this.contentDOM);
+    }
+  }
+
+  private updateNodeView(node: Node): boolean {
+    if (this.node.type !== node.type) {
+      return false;
+    }
+
+    const attrs = getCellDomAttrs(this.node);
+    const nextAttrs = getCellDomAttrs(node);
+
+    const { colspan, rowspan } = getCellAttrs(this.dom);
+
+    // need to rerender when colspan/rowspan in dom are different from the node attrs
+    // this can happen when undoing merge cells
+    const defaultColspan = 1,
+      defaultRowspan = 1;
+    if (
+      colspan !== (node.attrs.colspan || defaultColspan) ||
+      rowspan !== (node.attrs.rowspan || defaultRowspan)
+    ) {
+      return false;
+    }
+
+    // added + changed attributes
+    const addedAttrs = Object.entries(nextAttrs).filter(
+      ([key, value]) => attrs[key as keyof CellDomAttrs] !== value,
+    );
+
+    const removedAttrs = Object.keys(attrs).filter(
+      (key) => !nextAttrs.hasOwnProperty(key),
+    );
+
+    if (addedAttrs.length || removedAttrs.length) {
+      addedAttrs.forEach(([key, value]) =>
+        this.dom.setAttribute(key, value || ''),
+      );
+      removedAttrs.forEach((key) => this.dom.removeAttribute(key));
+      return true;
+    }
+
+    // Return true to not re-render this node view
+    if (this.node.sameMarkup(node)) {
+      return true;
+    }
+
+    return false;
+  }
+
+  update(node: Node) {
+    const didUpdate = this.updateNodeView(node);
+    this.node = node;
+    return didUpdate;
+  }
+
+  destroy() {
+    if (this.mouseMoveOptimization && this.observer) {
+      this.observer.unobserve(this.contentDOM);
+    }
+  }
+}

package/src/plugins/table/nodeviews/types.ts

@@ -0,0 +1,29 @@
+import { Node as PmNode } from 'prosemirror-model';
+import { EditorView } from 'prosemirror-view';
+
+import type {
+  GetEditorContainerWidth,
+  GetEditorFeatureFlags,
+} from '@atlaskit/editor-common/types';
+import { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
+import type { PortalProviderAPI } from '@atlaskit/editor-common/portal-provider';
+
+export type TableOptions = {
+  isBreakoutEnabled?: boolean;
+  isFullWidthModeEnabled?: boolean;
+  wasFullWidthModeEnabled?: boolean;
+};
+
+export interface Props {
+  node: PmNode;
+  view: EditorView;
+  allowColumnResizing?: boolean;
+  cellMinWidth?: number;
+  portalProviderAPI: PortalProviderAPI;
+  eventDispatcher: EventDispatcher;
+  getPos: () => number;
+  options?: TableOptions;
+  tableRenderOptimization?: boolean;
+  getEditorContainerWidth: GetEditorContainerWidth;
+  getEditorFeatureFlags: GetEditorFeatureFlags;
+}

package/src/plugins/table/nodeviews/update-overflow-shadows.ts

@@ -0,0 +1,72 @@
+import { EditorState } from 'prosemirror-state';
+import { TableCssClassName as ClassName } from '../types';
+import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
+export const updateShadowListForStickyStyles = (
+  heightStyle: string,
+
+  shadows: HTMLCollection,
+) => {
+  Array.from(shadows).forEach((shadow) => {
+    if (shadow.classList.contains(ClassName.TABLE_STICKY_SHADOW)) {
+      if (
+        shadow instanceof HTMLElement &&
+        shadow.style.height !== heightStyle
+      ) {
+        shadow.style.height = heightStyle;
+      }
+    }
+  });
+};
+
+/**
+ * Update overflow shadows for a given wrapper & table.
+ * if `overflowShadowOptimization` is enabled, this will exit early.
+ */
+export const updateOverflowShadows = (
+  getEditorFeatureFlags: GetEditorFeatureFlags,
+) => (
+  editorState: EditorState,
+  wrapper?: HTMLElement | null,
+  table?: HTMLElement | null,
+  rightShadows?: NodeListOf<HTMLElement> | null,
+  leftShadows?: NodeListOf<HTMLElement> | null,
+) => {
+  if (getEditorFeatureFlags()?.tableOverflowShadowsOptimization === true) {
+    return false;
+  }
+  // Right shadow
+  if (table && wrapper) {
+    const stickyRow = wrapper.querySelector('tr.sticky');
+    const stickyCell = stickyRow && stickyRow.firstElementChild;
+
+    if (rightShadows) {
+      const diff = table.offsetWidth - wrapper.offsetWidth;
+
+      for (let i = 0; i < rightShadows.length; i++) {
+        const rightShadow = rightShadows[i];
+        rightShadow.style.display =
+          diff > 0 && diff > wrapper.scrollLeft ? 'block' : 'none';
+
+        if (
+          rightShadow.classList.contains(ClassName.TABLE_STICKY_SHADOW) &&
+          stickyCell
+        ) {
+          rightShadow.style.height = `${stickyCell.clientHeight + 1}px`;
+        }
+      }
+    }
+    if (leftShadows) {
+      for (let i = 0; i < leftShadows.length; i++) {
+        const leftShadow = leftShadows[i];
+        leftShadow.style.display = wrapper.scrollLeft > 0 ? 'block' : 'none';
+
+        if (
+          leftShadow.classList.contains(ClassName.TABLE_STICKY_SHADOW) &&
+          stickyCell
+        ) {
+          leftShadow.style.height = `${stickyCell.clientHeight + 1}px`;
+        }
+      }
+    }
+  }
+};

package/src/plugins/table/pm-plugins/decorations/plugin.ts

@@ -0,0 +1,74 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import {
+  EditorState,
+  PluginKey,
+  Transaction,
+  ReadonlyTransaction,
+} from 'prosemirror-state';
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
+import { DecorationSet } from 'prosemirror-view';
+
+import { pluginKey as tablePluginKey } from '../plugin-key';
+
+import {
+  buildColumnControlsDecorations,
+  maybeUpdateColumnControlsSelectedDecoration,
+} from './utils';
+
+export const pluginKey = new PluginKey('tableDecorationsPlugin');
+
+export const getDecorations = (state: EditorState): DecorationSet =>
+  pluginKey.getState(state);
+
+export const handleDocOrSelectionChanged = (
+  tr: Transaction | ReadonlyTransaction,
+  decorationSet: DecorationSet,
+  oldState: EditorState,
+): DecorationSet => {
+  if (tr.docChanged || tr.selection instanceof CellSelection) {
+    return buildColumnControlsDecorations({
+      decorationSet,
+      tr,
+    });
+  } else if (tr.selectionSet) {
+    const isTransactionFromMouseClick =
+      !tr.docChanged && tr.selectionSet && tr.getMeta('pointer');
+    if (
+      isTransactionFromMouseClick ||
+      oldState.selection instanceof CellSelection
+    ) {
+      return maybeUpdateColumnControlsSelectedDecoration({
+        decorationSet,
+        tr,
+      });
+    }
+  }
+
+  return decorationSet;
+};
+
+export const createPlugin = () => {
+  return new SafePlugin({
+    state: {
+      init: () => DecorationSet.empty,
+
+      apply: (tr, decorationSet, oldState) => {
+        let pluginState = decorationSet;
+        const meta = tr.getMeta(tablePluginKey);
+        if (meta && meta.data && meta.data.decorationSet) {
+          pluginState = meta.data.decorationSet;
+        }
+
+        if (tr.docChanged || tr.selectionSet) {
+          return handleDocOrSelectionChanged(tr, pluginState, oldState);
+        }
+
+        return pluginState;
+      },
+    },
+    key: pluginKey,
+    props: {
+      decorations: (state) => getDecorations(state),
+    },
+  });
+};

package/src/plugins/table/pm-plugins/decorations/utils/column-controls.ts

@@ -0,0 +1,89 @@
+import { ReadonlyTransaction, Transaction } from 'prosemirror-state';
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
+import { findTable } from '@atlaskit/editor-tables/utils';
+import { DecorationSet } from 'prosemirror-view';
+
+import { TableDecorations } from '../../../types';
+import {
+  createColumnControlsDecoration,
+  createColumnSelectedDecoration,
+  findColumnControlSelectedDecoration,
+  findControlsHoverDecoration,
+  updateDecorations,
+} from '../../../utils/decoration';
+
+import { composeDecorations } from './compose-decorations';
+import { DecorationTransformer } from './types';
+
+const isColumnSelected = (tr: Transaction | ReadonlyTransaction): boolean =>
+  tr.selection instanceof CellSelection && tr.selection.isColSelection();
+
+// @see: https://product-fabric.atlassian.net/browse/ED-3796
+const removeControlsHoverDecoration: DecorationTransformer = ({
+  decorationSet,
+}): DecorationSet =>
+  decorationSet.remove(findControlsHoverDecoration(decorationSet));
+
+const maybeUpdateColumnSelectedDecoration: DecorationTransformer = ({
+  decorationSet,
+  tr,
+}): DecorationSet => {
+  if (!isColumnSelected(tr)) {
+    return decorationSet;
+  }
+
+  return updateDecorations(
+    tr.doc,
+    decorationSet,
+    createColumnSelectedDecoration(tr),
+    TableDecorations.COLUMN_SELECTED,
+  );
+};
+
+const maybeUpdateColumnControlsDecoration: DecorationTransformer = ({
+  decorationSet,
+  tr,
+}): DecorationSet => {
+  const table = findTable(tr.selection);
+  if (!table) {
+    return decorationSet;
+  }
+  return updateDecorations(
+    tr.doc,
+    decorationSet,
+    createColumnControlsDecoration(tr.selection),
+    TableDecorations.COLUMN_CONTROLS_DECORATIONS,
+  );
+};
+
+// @see: https://product-fabric.atlassian.net/browse/ED-7304
+const removeColumnControlsSelectedDecoration: DecorationTransformer = ({
+  decorationSet,
+}): DecorationSet =>
+  decorationSet.remove(findColumnControlSelectedDecoration(decorationSet));
+
+const hasColumnSelectedDecorations = (decorationSet: DecorationSet): boolean =>
+  !!findColumnControlSelectedDecoration(decorationSet).length;
+
+export const maybeUpdateColumnControlsSelectedDecoration: DecorationTransformer = ({
+  decorationSet,
+  tr,
+}): DecorationSet => {
+  if (!hasColumnSelectedDecorations(decorationSet)) {
+    return decorationSet;
+  }
+
+  return removeColumnControlsSelectedDecoration({ decorationSet, tr });
+};
+
+export const buildColumnControlsDecorations: DecorationTransformer = ({
+  decorationSet,
+  tr,
+}): DecorationSet => {
+  return composeDecorations([
+    removeColumnControlsSelectedDecoration,
+    removeControlsHoverDecoration,
+    maybeUpdateColumnSelectedDecoration,
+    maybeUpdateColumnControlsDecoration,
+  ])({ decorationSet: DecorationSet.empty, tr });
+};

package/src/plugins/table/pm-plugins/decorations/utils/column-resizing.ts

@@ -0,0 +1,46 @@
+import { Decoration, DecorationSet } from 'prosemirror-view';
+
+import { TableDecorations } from '../../../types';
+import {
+  createResizeHandleDecoration,
+  updateDecorations,
+} from '../../../utils/decoration';
+
+import { composeDecorations } from './compose-decorations';
+import { DecorationTransformer } from './types';
+
+const emptyDecorations = [[], []];
+
+const updateColumnResizeHandle = (
+  columnResizesDecorations: Decoration[],
+): DecorationTransformer => ({ decorationSet, tr }) =>
+  updateDecorations(
+    tr.doc,
+    decorationSet,
+    columnResizesDecorations,
+    TableDecorations.COLUMN_RESIZING_HANDLE,
+  );
+
+const updateLastCellElement = (
+  lastCellElementsDecorations: Decoration[],
+): DecorationTransformer => ({ decorationSet, tr }) =>
+  updateDecorations(
+    tr.doc,
+    decorationSet,
+    lastCellElementsDecorations,
+    TableDecorations.LAST_CELL_ELEMENT,
+  );
+
+export const buildColumnResizingDecorations = (
+  columnEndIndex: number,
+): DecorationTransformer => ({ tr, decorationSet }): DecorationSet => {
+  const [columnResizesDecorations, lastCellElementsDecorations] =
+    columnEndIndex < 0
+      ? emptyDecorations
+      : createResizeHandleDecoration(tr, { right: columnEndIndex });
+
+  return composeDecorations([
+    updateColumnResizeHandle(columnResizesDecorations),
+    updateLastCellElement(lastCellElementsDecorations),
+  ])({ decorationSet, tr });
+};

package/src/plugins/table/pm-plugins/decorations/utils/compose-decorations.ts

@@ -0,0 +1,11 @@
+import { DecorationSet } from 'prosemirror-view';
+
+import { DecorationTransformer } from './types';
+
+export const composeDecorations = (
+  transformers: Array<DecorationTransformer>,
+): DecorationTransformer => ({ decorationSet, tr }): DecorationSet =>
+  transformers.reduce(
+    (decorationSet, transform) => transform({ decorationSet, tr }),
+    decorationSet,
+  );