@atlaskit/editor-plugin-table 0.0.0 → 0.0.2

package/dist/es2019/plugins/table/nodeviews/table.js

@@ -0,0 +1,200 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import { DOMSerializer } from 'prosemirror-model';
+import ReactNodeView from '@atlaskit/editor-common/react-node-view';
+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';
+
+const tableAttributes = node => {
+  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, props) => {
+  let colgroup = '';
+
+  if (props.allowColumnResizing) {
+    colgroup = ['colgroup', {}, ...generateColgroup(node)];
+  }
+
+  return ['table', tableAttributes(node), colgroup, ['tbody', 0]];
+};
+
+export default class TableView extends ReactNodeView {
+  constructor(props) {
+    super(props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props);
+
+    _defineProperty(this, "getNode", () => {
+      return this.node;
+    });
+
+    _defineProperty(this, "hasHoveredRows", false);
+
+    this.getPos = props.getPos;
+    this.tableRenderOptimization = props.tableRenderOptimization;
+    this.eventDispatcher = props.eventDispatcher;
+  }
+
+  getContentDOM() {
+    const rendered = DOMSerializer.renderSpec(document, toDOM(this.node, this.reactComponentProps));
+
+    if (rendered.dom) {
+      this.table = rendered.dom;
+    }
+
+    return rendered;
+  }
+
+  setDomAttrs(node) {
+    if (!this.table) {
+      return;
+    }
+
+    const attrs = tableAttributes(node);
+    Object.keys(attrs).forEach(attr => {
+      this.table.setAttribute(attr, attrs[attr]);
+    });
+  }
+
+  render(props, forwardRef) {
+    // TODO: ED-15663
+    // Please, do not copy or use this kind of code below
+    // @ts-ignore
+    const fakePluginKey = {
+      key: 'widthPlugin$',
+      getState: state => {
+        return state['widthPlugin$'];
+      }
+    };
+    return /*#__PURE__*/React.createElement(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 /*#__PURE__*/React.createElement(TableComponent, {
+          view: props.view,
+          allowColumnResizing: props.allowColumnResizing,
+          eventDispatcher: props.eventDispatcher,
+          getPos: props.getPos,
+          isMediaFullscreen: mediaState === null || mediaState === void 0 ? void 0 : mediaState.isFullscreen,
+          options: props.options,
+          allowControls: pluginState.pluginConfig.allowControls,
+          isHeaderRowEnabled: pluginState.isHeaderRowEnabled,
+          isHeaderColumnEnabled: pluginState.isHeaderColumnEnabled,
+          tableActive: tableActive,
+          ordering: pluginState.ordering,
+          tableResizingPluginState: tableResizingPluginState,
+          getNode: this.getNode,
+          containerWidth: containerWidth,
+          contentDOM: forwardRef,
+          getEditorFeatureFlags: props.getEditorFeatureFlags
+        });
+      }
+    });
+  }
+
+  viewShouldUpdate(nextNode) {
+    if (this.tableRenderOptimization) {
+      const {
+        hoveredRows
+      } = getPluginState(this.view.state);
+      const hoveredRowsChanged = !!(hoveredRows !== null && hoveredRows !== void 0 && hoveredRows.length) !== this.hasHoveredRows;
+
+      if (nextNode.attrs.isNumberColumnEnabled && hoveredRowsChanged) {
+        this.hasHoveredRows = !!(hoveredRows !== null && hoveredRows !== void 0 && 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() {
+    var _this$eventDispatcher;
+
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
+
+    (_this$eventDispatcher = this.eventDispatcher) === null || _this$eventDispatcher === void 0 ? void 0 : _this$eventDispatcher.emit('TABLE_DELETED', this.node);
+    super.destroy();
+  }
+
+}
+export const createTableView = (node, view, getPos, portalProviderAPI, eventDispatcher, options, getEditorContainerWidth, getEditorFeatureFlags) => {
+  const {
+    pluginConfig
+  } = getPluginState(view.state);
+  const {
+    allowColumnResizing
+  } = getPluginConfig(pluginConfig);
+  const {
+    tableRenderOptimization
+  } = getEditorFeatureFlags();
+  return new TableView({
+    node,
+    view,
+    allowColumnResizing,
+    portalProviderAPI,
+    eventDispatcher,
+    getPos: getPos,
+    options,
+    tableRenderOptimization,
+    getEditorContainerWidth,
+    getEditorFeatureFlags
+  }).init();
+};

package/dist/es2019/plugins/table/nodeviews/tableCell.js

@@ -0,0 +1,77 @@
+import uuid from 'uuid';
+import { DOMSerializer } from 'prosemirror-model';
+import { getCellDomAttrs, getCellAttrs } from '@atlaskit/adf-schema';
+export default class TableCellNodeView {
+  constructor(node, view, getPos, getEditorFeatureFlags, observer) {
+    this.view = view;
+    this.node = node;
+    const {
+      dom,
+      contentDOM
+    } = DOMSerializer.renderSpec(document, node.type.spec.toDOM(node));
+    this.getPos = getPos;
+    this.dom = dom;
+    this.contentDOM = contentDOM;
+    const {
+      mouseMoveOptimization
+    } = getEditorFeatureFlags();
+
+    if (mouseMoveOptimization && observer) {
+      this.contentDOM.id = uuid();
+      this.mouseMoveOptimization = mouseMoveOptimization;
+      this.observer = observer;
+      observer.observe(this.contentDOM);
+    }
+  }
+
+  updateNodeView(node) {
+    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] !== 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) {
+    const didUpdate = this.updateNodeView(node);
+    this.node = node;
+    return didUpdate;
+  }
+
+  destroy() {
+    if (this.mouseMoveOptimization && this.observer) {
+      this.observer.unobserve(this.contentDOM);
+    }
+  }
+
+}

package/dist/es2019/plugins/table/nodeviews/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/plugins/table/nodeviews/update-overflow-shadows.js

@@ -0,0 +1,52 @@
+import { TableCssClassName as ClassName } from '../types';
+export const updateShadowListForStickyStyles = (heightStyle, shadows) => {
+  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 => (editorState, wrapper, table, rightShadows, leftShadows) => {
+  var _getEditorFeatureFlag;
+
+  if (((_getEditorFeatureFlag = getEditorFeatureFlags()) === null || _getEditorFeatureFlag === void 0 ? void 0 : _getEditorFeatureFlag.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/dist/es2019/plugins/table/pm-plugins/decorations/plugin.js

@@ -0,0 +1,52 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } 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 => pluginKey.getState(state);
+export const handleDocOrSelectionChanged = (tr, decorationSet, oldState) => {
+  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/dist/es2019/plugins/table/pm-plugins/decorations/utils/column-controls.js

@@ -0,0 +1,67 @@
+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';
+
+const isColumnSelected = tr => tr.selection instanceof CellSelection && tr.selection.isColSelection(); // @see: https://product-fabric.atlassian.net/browse/ED-3796
+
+
+const removeControlsHoverDecoration = ({
+  decorationSet
+}) => decorationSet.remove(findControlsHoverDecoration(decorationSet));
+
+const maybeUpdateColumnSelectedDecoration = ({
+  decorationSet,
+  tr
+}) => {
+  if (!isColumnSelected(tr)) {
+    return decorationSet;
+  }
+
+  return updateDecorations(tr.doc, decorationSet, createColumnSelectedDecoration(tr), TableDecorations.COLUMN_SELECTED);
+};
+
+const maybeUpdateColumnControlsDecoration = ({
+  decorationSet,
+  tr
+}) => {
+  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 = ({
+  decorationSet
+}) => decorationSet.remove(findColumnControlSelectedDecoration(decorationSet));
+
+const hasColumnSelectedDecorations = decorationSet => !!findColumnControlSelectedDecoration(decorationSet).length;
+
+export const maybeUpdateColumnControlsSelectedDecoration = ({
+  decorationSet,
+  tr
+}) => {
+  if (!hasColumnSelectedDecorations(decorationSet)) {
+    return decorationSet;
+  }
+
+  return removeColumnControlsSelectedDecoration({
+    decorationSet,
+    tr
+  });
+};
+export const buildColumnControlsDecorations = ({
+  decorationSet,
+  tr
+}) => {
+  return composeDecorations([removeColumnControlsSelectedDecoration, removeControlsHoverDecoration, maybeUpdateColumnSelectedDecoration, maybeUpdateColumnControlsDecoration])({
+    decorationSet: DecorationSet.empty,
+    tr
+  });
+};

package/dist/es2019/plugins/table/pm-plugins/decorations/utils/column-resizing.js

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

package/dist/es2019/plugins/table/pm-plugins/decorations/utils/compose-decorations.js

@@ -0,0 +1,7 @@
+export const composeDecorations = transformers => ({
+  decorationSet,
+  tr
+}) => transformers.reduce((decorationSet, transform) => transform({
+  decorationSet,
+  tr
+}), decorationSet);

package/dist/es2019/plugins/table/pm-plugins/decorations/utils/index.js

@@ -0,0 +1,3 @@
+export { buildColumnControlsDecorations, maybeUpdateColumnControlsSelectedDecoration } from './column-controls';
+export { buildColumnResizingDecorations } from './column-resizing';
+export { composeDecorations } from './compose-decorations';

package/dist/es2019/plugins/table/pm-plugins/decorations/utils/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/plugins/table/pm-plugins/default-table-selection.js

@@ -0,0 +1,5 @@
+export const defaultTableSelection = {
+  hoveredColumns: [],
+  hoveredRows: [],
+  isInDanger: false
+};

package/dist/es2019/plugins/table/pm-plugins/keymap.js

@@ -0,0 +1,34 @@
+import { keymap } from 'prosemirror-keymap';
+import { chainCommands } from 'prosemirror-commands';
+import * as keymaps from '@atlaskit/editor-common/keymaps';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { createTable, goToNextCell, moveCursorBackward, triggerUnlessTableHeader } from '../commands';
+import { addRowAroundSelection, emptyMultipleCellsWithAnalytics, deleteTableIfSelectedWithAnalytics } from '../commands-with-analytics';
+import { addColumnAfter, addColumnBefore } from '../commands/insert';
+import { withEditorAnalyticsAPI } from '../utils/analytics';
+
+const createTableWithAnalytics = editorAnalyticsAPI => withEditorAnalyticsAPI({
+  action: ACTION.INSERTED,
+  actionSubject: ACTION_SUBJECT.DOCUMENT,
+  actionSubjectId: ACTION_SUBJECT_ID.TABLE,
+  attributes: {
+    inputMethod: INPUT_METHOD.SHORTCUT
+  },
+  eventType: EVENT_TYPE.TRACK
+})(editorAnalyticsAPI)(createTable());
+
+export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI) {
+  const list = {};
+  keymaps.bindKeymapWithCommand(keymaps.nextCell.common, goToNextCell(editorAnalyticsAPI)(1), list);
+  keymaps.bindKeymapWithCommand(keymaps.previousCell.common, goToNextCell(editorAnalyticsAPI)(-1), list);
+  keymaps.bindKeymapWithCommand(keymaps.toggleTable.common, createTableWithAnalytics(editorAnalyticsAPI), list);
+  keymaps.bindKeymapWithCommand(keymaps.backspace.common, chainCommands(deleteTableIfSelectedWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.KEYBOARD), emptyMultipleCellsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.KEYBOARD)), list);
+  keymaps.bindKeymapWithCommand(keymaps.backspace.common, moveCursorBackward, list); // Add row/column shortcuts
+
+  keymaps.bindKeymapWithCommand(keymaps.addRowBefore.common, addRowAroundSelection(editorAnalyticsAPI)('TOP'), list);
+  keymaps.bindKeymapWithCommand(keymaps.addRowAfter.common, addRowAroundSelection(editorAnalyticsAPI)('BOTTOM'), list);
+  keymaps.bindKeymapWithCommand(keymaps.addColumnBefore.common, triggerUnlessTableHeader(addColumnBefore(getEditorContainerWidth)), list);
+  keymaps.bindKeymapWithCommand(keymaps.addColumnAfter.common, addColumnAfter(getEditorContainerWidth), list);
+  return keymap(list);
+}
+export default keymapPlugin;