@atlaskit/editor-plugin-table 0.0.0 → 0.0.2

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

@@ -0,0 +1,340 @@
+import React from 'react';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { browser } from '@atlaskit/editor-common/utils';
+import { tableEditing } from '@atlaskit/editor-tables/pm-plugins';
+import { createTable } from '@atlaskit/editor-tables/utils';
+import { table, tableCell, tableHeader, tableRow } from '@atlaskit/adf-schema';
+import { toggleTable, tooltip } from '@atlaskit/editor-common/keymaps';
+import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages'; // import { IconTable } from '../quick-insert/assets';
+//
+
+import { pluginConfig } from './create-plugin-config';
+import { createPlugin as createTableLocalIdPlugin } from './pm-plugins/table-local-id';
+import { createPlugin as createTableSafariDelayedDomSelectionSyncingWorkaroundPlugin } from './pm-plugins/safari-delayed-dom-selection-syncing-workaround';
+import { createPlugin as createTableSafariDeleteCompositionTextIssueWorkaroundPlugin } from './pm-plugins/safari-delete-composition-text-issue-workaround';
+import { createPlugin as createDecorationsPlugin } from './pm-plugins/decorations/plugin';
+import { keymapPlugin } from './pm-plugins/keymap';
+import { tableSelectionKeymapPlugin } from './pm-plugins/table-selection-keymap';
+import { createPlugin } from './pm-plugins/main';
+import { pluginKey } from './pm-plugins/plugin-key';
+import { createPlugin as createStickyHeadersPlugin, findStickyHeaderForTable, pluginKey as stickyHeadersPluginKey } from './pm-plugins/sticky-headers';
+import { createPlugin as createFlexiResizingPlugin, pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing';
+import { getToolbarConfig } from './toolbar';
+import FloatingContextualButton from './ui/FloatingContextualButton';
+import FloatingContextualMenu from './ui/FloatingContextualMenu';
+import FloatingDeleteButton from './ui/FloatingDeleteButton';
+import FloatingInsertButton from './ui/FloatingInsertButton';
+import LayoutButton from './ui/LayoutButton';
+import { isLayoutSupported } from './utils';
+import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
+
+const defaultGetEditorFeatureFlags = () => ({});
+
+const tablesPlugin = options => {
+  const editorViewRef = {
+    current: null
+  };
+
+  const defaultGetEditorContainerWidth = () => {
+    if (!editorViewRef.current) {
+      var _document, _document$body;
+
+      return {
+        width: ((_document = document) === null || _document === void 0 ? void 0 : (_document$body = _document.body) === null || _document$body === void 0 ? void 0 : _document$body.offsetWidth) || 500
+      };
+    }
+
+    const {
+      current: {
+        state
+      }
+    } = editorViewRef; // TODO: ED-15663
+    // Please, do not copy or use this kind of code below
+    // @ts-ignore
+
+    return state['widthPlugin$'];
+  };
+
+  return {
+    name: 'table',
+
+    nodes() {
+      return [{
+        name: 'table',
+        node: table
+      }, {
+        name: 'tableHeader',
+        node: tableHeader
+      }, {
+        name: 'tableRow',
+        node: tableRow
+      }, {
+        name: 'tableCell',
+        node: tableCell
+      }];
+    },
+
+    pmPlugins() {
+      const plugins = [{
+        name: 'table',
+        plugin: ({
+          dispatchAnalyticsEvent,
+          dispatch,
+          portalProviderAPI,
+          eventDispatcher
+        }) => {
+          const {
+            fullWidthEnabled,
+            wasFullWidthEnabled,
+            breakoutEnabled,
+            tableOptions,
+            editorAnalyticsAPI,
+            getEditorFeatureFlags
+          } = options || {};
+          return createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, breakoutEnabled, fullWidthEnabled, wasFullWidthEnabled, editorAnalyticsAPI);
+        }
+      }, {
+        name: 'tablePMColResizing',
+        plugin: ({
+          dispatch
+        }) => {
+          const {
+            fullWidthEnabled,
+            tableOptions,
+            editorAnalyticsAPI,
+            getEditorFeatureFlags
+          } = options || {};
+          const {
+            allowColumnResizing
+          } = pluginConfig(tableOptions);
+          return allowColumnResizing ? createFlexiResizingPlugin(dispatch, {
+            lastColumnResizable: !fullWidthEnabled
+          }, defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, editorAnalyticsAPI) : undefined;
+        }
+      }, {
+        name: 'tableEditing',
+        plugin: () => createDecorationsPlugin()
+      }, // Needs to be lower priority than editor-tables.tableEditing
+      // plugin as it is currently swallowing backspace events inside tables
+      {
+        name: 'tableKeymap',
+        plugin: () => keymapPlugin(defaultGetEditorContainerWidth, options === null || options === void 0 ? void 0 : options.editorAnalyticsAPI)
+      }, {
+        name: 'tableSelectionKeymap',
+        plugin: () => tableSelectionKeymapPlugin(options === null || options === void 0 ? void 0 : options.editorSelectionAPI)
+      }, {
+        name: 'tableEditing',
+        plugin: () => tableEditing()
+      }, {
+        name: 'tableStickyHeaders',
+        plugin: ({
+          dispatch,
+          eventDispatcher
+        }) => options && options.tableOptions.stickyHeaders ? createStickyHeadersPlugin(dispatch, eventDispatcher, () => [], (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags) : undefined
+      }, {
+        name: 'tableLocalId',
+        plugin: ({
+          dispatch
+        }) => createTableLocalIdPlugin(dispatch)
+      }, {
+        name: 'tableGetEditorViewReferencePlugin',
+        plugin: () => {
+          return new SafePlugin({
+            view: editorView => {
+              editorViewRef.current = editorView;
+              return {
+                destroy: () => {
+                  editorViewRef.current = null;
+                }
+              };
+            }
+          });
+        }
+      }]; // workaround for prosemirrors delayed dom selection syncing during pointer drag
+      // causing issues with table selections in Safari
+      // https://github.com/ProseMirror/prosemirror-view/commit/885258b80551ac87b81601d3ed25f552aeb22293
+      // NOTE: this workaround can be removed when next upgrading prosemirror as the issue will be fixed
+      // https://github.com/ProseMirror/prosemirror-view/pull/116
+
+      if (browser.safari) {
+        plugins.push({
+          name: 'tableSafariDelayedDomSelectionSyncingWorkaround',
+          plugin: () => {
+            return createTableSafariDelayedDomSelectionSyncingWorkaroundPlugin();
+          }
+        });
+      } // Workaround for table element breaking issue caused by composition event with an inputType of deleteCompositionText.
+      // https://github.com/ProseMirror/prosemirror/issues/934
+
+
+      if (browser.safari) {
+        plugins.push({
+          name: 'tableSafariDeleteCompositionTextIssueWorkaround',
+          plugin: () => {
+            return createTableSafariDeleteCompositionTextIssueWorkaroundPlugin();
+          }
+        });
+      }
+
+      return plugins;
+    },
+
+    contentComponent({
+      editorView,
+      popupsMountPoint,
+      popupsBoundariesElement,
+      popupsScrollableElement,
+      dispatchAnalyticsEvent
+    }) {
+      return /*#__PURE__*/React.createElement(ErrorBoundary, {
+        component: ACTION_SUBJECT.TABLES_PLUGIN,
+        dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+        fallbackComponent: null
+      }, /*#__PURE__*/React.createElement(WithPluginState, {
+        plugins: {
+          tablePluginState: pluginKey,
+          tableResizingPluginState: tableResizingPluginKey,
+          stickyHeadersState: stickyHeadersPluginKey
+        },
+        render: ({
+          tableResizingPluginState: resizingPluginState,
+          stickyHeadersState,
+          tablePluginState
+        }) => {
+          const {
+            state
+          } = editorView;
+          const isDragging = resizingPluginState === null || resizingPluginState === void 0 ? void 0 : resizingPluginState.dragging;
+          const {
+            tableNode,
+            tablePos,
+            targetCellPosition,
+            isContextualMenuOpen,
+            layout,
+            tableRef,
+            pluginConfig,
+            insertColumnButtonIndex,
+            insertRowButtonIndex,
+            isHeaderColumnEnabled,
+            isHeaderRowEnabled,
+            tableWrapperTarget
+          } = tablePluginState;
+          const {
+            allowControls
+          } = pluginConfig;
+          const stickyHeader = stickyHeadersState ? findStickyHeaderForTable(stickyHeadersState, tablePos) : undefined;
+          return /*#__PURE__*/React.createElement(React.Fragment, null, targetCellPosition && tableRef && !isDragging && options && options.allowContextualMenu && /*#__PURE__*/React.createElement(FloatingContextualButton, {
+            isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
+            editorView: editorView,
+            tableNode: tableNode,
+            mountPoint: popupsMountPoint,
+            targetCellPosition: targetCellPosition,
+            scrollableElement: popupsScrollableElement,
+            dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+            isContextualMenuOpen: isContextualMenuOpen,
+            layout: layout,
+            stickyHeader: stickyHeader
+          }), allowControls && /*#__PURE__*/React.createElement(FloatingInsertButton, {
+            tableNode: tableNode,
+            tableRef: tableRef,
+            insertColumnButtonIndex: insertColumnButtonIndex,
+            insertRowButtonIndex: insertRowButtonIndex,
+            isHeaderColumnEnabled: isHeaderColumnEnabled,
+            isHeaderRowEnabled: isHeaderRowEnabled,
+            editorView: editorView,
+            mountPoint: popupsMountPoint,
+            boundariesElement: popupsBoundariesElement,
+            scrollableElement: popupsScrollableElement,
+            hasStickyHeaders: stickyHeader && stickyHeader.sticky,
+            dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+            editorAnalyticsAPI: options === null || options === void 0 ? void 0 : options.editorAnalyticsAPI,
+            getEditorContainerWidth: defaultGetEditorContainerWidth
+          }), /*#__PURE__*/React.createElement(FloatingContextualMenu, {
+            editorView: editorView,
+            mountPoint: popupsMountPoint,
+            boundariesElement: popupsBoundariesElement,
+            targetCellPosition: targetCellPosition,
+            isOpen: Boolean(isContextualMenuOpen),
+            pluginConfig: pluginConfig,
+            editorAnalyticsAPI: options === null || options === void 0 ? void 0 : options.editorAnalyticsAPI,
+            getEditorContainerWidth: defaultGetEditorContainerWidth
+          }), allowControls && /*#__PURE__*/React.createElement(FloatingDeleteButton, {
+            editorView: editorView,
+            selection: editorView.state.selection,
+            tableRef: tableRef,
+            mountPoint: popupsMountPoint,
+            boundariesElement: popupsBoundariesElement,
+            scrollableElement: popupsScrollableElement,
+            stickyHeaders: stickyHeader,
+            isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
+            editorAnalyticsAPI: options === null || options === void 0 ? void 0 : options.editorAnalyticsAPI
+          }), isLayoutSupported(state) && options && options.breakoutEnabled && /*#__PURE__*/React.createElement(LayoutButton, {
+            editorView: editorView,
+            mountPoint: popupsMountPoint,
+            boundariesElement: popupsBoundariesElement,
+            scrollableElement: popupsScrollableElement,
+            targetRef: tableWrapperTarget,
+            layout: layout,
+            isResizing: !!resizingPluginState && !!resizingPluginState.dragging,
+            stickyHeader: stickyHeader,
+            editorAnalyticsAPI: options === null || options === void 0 ? void 0 : options.editorAnalyticsAPI
+          }));
+        }
+      }));
+    },
+
+    pluginsOptions: {
+      // TODO: ED-14676 This is not the final API design
+      // For now, we are using this on (insert-api/api.ts) but we may create a proper place for it
+      createNodeHandler: ({
+        nodeName,
+        schema
+      }) => {
+        // An EditorPlugin may manage more than one node.
+        if (nodeName !== 'table') {
+          return null;
+        }
+
+        const table = createTable({
+          schema
+        });
+        return table;
+      },
+      quickInsert: ({
+        formatMessage
+      }) => [{
+        id: 'table',
+        title: formatMessage(messages.table),
+        description: formatMessage(messages.tableDescription),
+        keywords: ['cell', 'table'],
+        priority: 600,
+        keyshortcut: tooltip(toggleTable),
+
+        // icon: () => <IconTable />,
+        action(insert, state) {
+          var _options$editorAnalyt;
+
+          const tr = insert(createTable({
+            schema: state.schema
+          }));
+          options === null || options === void 0 ? void 0 : (_options$editorAnalyt = options.editorAnalyticsAPI) === null || _options$editorAnalyt === void 0 ? void 0 : _options$editorAnalyt.attachAnalyticsEvent({
+            action: ACTION.INSERTED,
+            actionSubject: ACTION_SUBJECT.DOCUMENT,
+            actionSubjectId: ACTION_SUBJECT_ID.TABLE,
+            attributes: {
+              inputMethod: INPUT_METHOD.QUICK_INSERT
+            },
+            eventType: EVENT_TYPE.TRACK
+          })(tr);
+          return tr;
+        }
+
+      }],
+      floatingToolbar: getToolbarConfig(defaultGetEditorContainerWidth, options === null || options === void 0 ? void 0 : options.editorAnalyticsAPI)(pluginConfig(options === null || options === void 0 ? void 0 : options.tableOptions))
+    }
+  };
+};
+
+export default tablesPlugin;

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

@@ -0,0 +1,159 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { ShadowEvent, TableCssClassName as ClassName } from '../types';
+import { tableInsertColumnButtonSize } from '../ui/consts';
+import { updateShadowListForStickyStyles } from './update-overflow-shadows';
+export class OverflowShadowsObserver {
+  // updateShadowState is a method to update shadow key
+  constructor(updateShadowState, _table, wrapper) {
+    _defineProperty(this, "firstCell", null);
+
+    _defineProperty(this, "lastCell", null);
+
+    _defineProperty(this, "getFirstCell", (isSticky, hasHeaderRow) => {
+      var _this$table;
+
+      return (_this$table = this.table) === null || _this$table === void 0 ? void 0 : _this$table.querySelector(isSticky || !hasHeaderRow ? 'table tbody tr td' : 'table tbody tr th');
+    });
+
+    _defineProperty(this, "getLastCell", (isSticky, hasHeaderRow) => {
+      var _this$table2;
+
+      return (_this$table2 = this.table) === null || _this$table2 === void 0 ? void 0 : _this$table2.querySelector(isSticky || !hasHeaderRow ? 'table tbody tr td:last-child' : 'table tbody tr th:last-child');
+    });
+
+    _defineProperty(this, "isSticky", false);
+
+    _defineProperty(this, "stickyRowHeight", 0);
+
+    _defineProperty(this, "init", () => {
+      const table = this.table;
+
+      if (!this.wrapper || !table) {
+        return;
+      }
+
+      if (!this.tableIntersectionObserver) {
+        const intersectonOnbserverCallback = entry => {
+          var _entry$rootBounds, _entry$rootBounds2;
+
+          if (!((_entry$rootBounds = entry.rootBounds) !== null && _entry$rootBounds !== void 0 && _entry$rootBounds.height) && !((_entry$rootBounds2 = entry.rootBounds) !== null && _entry$rootBounds2 !== void 0 && _entry$rootBounds2.width)) {
+            return;
+          }
+
+          if (entry.target !== this.firstCell && entry.target !== this.lastCell) {
+            return;
+          }
+
+          this.updateStickyShadowsHeightIfChanged();
+          this.checkIntersectionEvent(entry, this.firstCell === entry.target ? ShadowEvent.SHOW_BEFORE_SHADOW : ShadowEvent.SHOW_AFTER_SHADOW);
+        };
+
+        this.tableIntersectionObserver = new IntersectionObserver((entries, _) => {
+          entries.forEach(entry => intersectonOnbserverCallback(entry));
+        }, {
+          threshold: [0, 1],
+          root: this.wrapper,
+          rootMargin: `0px ${tableInsertColumnButtonSize / 2}px 0px 0px`
+        });
+        return;
+      }
+    });
+
+    _defineProperty(this, "checkIntersectionEvent", (entry, shadowKey) => {
+      if ( // If it's in full view, don't show shadow.
+      entry.isIntersecting && entry.intersectionRatio === 1) {
+        this.updateShadowState(shadowKey, false);
+      } else if ( // If it's in partial view, show a shadow
+      entry.intersectionRatio < 1) {
+        this.updateShadowState(shadowKey, true);
+      }
+    });
+
+    _defineProperty(this, "observeCells", (isSticky, hasHeaderRow) => {
+      const stickyChanged = !!isSticky !== this.isSticky;
+      this.isSticky = !!isSticky; // update sticky shadows
+
+      this.updateStickyShadowsHeightIfChanged();
+
+      if (!stickyChanged) {
+        const firstCell = this.getFirstCell(isSticky, hasHeaderRow);
+        const lastCell = this.getLastCell(isSticky, hasHeaderRow);
+
+        if (!firstCell || !lastCell || firstCell === this.firstCell && lastCell === this.lastCell) {
+          return;
+        }
+      }
+
+      this.firstCell = this.getFirstCell(isSticky, hasHeaderRow);
+      this.lastCell = this.getLastCell(isSticky, hasHeaderRow);
+
+      if (this.tableIntersectionObserver && this.firstCell && this.lastCell) {
+        this.tableIntersectionObserver.disconnect();
+        this.tableIntersectionObserver.observe(this.firstCell);
+        this.tableIntersectionObserver.observe(this.lastCell);
+      }
+    });
+
+    _defineProperty(this, "updateStickyShadows", stickyRowHeight => {
+      var _this$wrapper, _this$wrapper2, _this$wrapper2$parent, _this$wrapper3, _this$wrapper3$parent;
+
+      if (!this.isSticky) {
+        return;
+      }
+
+      const stickyCell = this.getStickyCell();
+
+      if (!stickyCell || !((_this$wrapper = this.wrapper) !== null && _this$wrapper !== void 0 && _this$wrapper.parentElement)) {
+        return;
+      }
+
+      const heightStyleOrCompute = `${stickyRowHeight || stickyCell.clientHeight + 1}px`; // Use getElementsByClassName here for a live node list to capture
+      // sticky shadows
+
+      const liveRightShadows = (_this$wrapper2 = this.wrapper) === null || _this$wrapper2 === void 0 ? void 0 : (_this$wrapper2$parent = _this$wrapper2.parentElement) === null || _this$wrapper2$parent === void 0 ? void 0 : _this$wrapper2$parent.getElementsByClassName(`${ClassName.TABLE_RIGHT_SHADOW}`);
+      const liveLeftShadows = (_this$wrapper3 = this.wrapper) === null || _this$wrapper3 === void 0 ? void 0 : (_this$wrapper3$parent = _this$wrapper3.parentElement) === null || _this$wrapper3$parent === void 0 ? void 0 : _this$wrapper3$parent.getElementsByClassName(`${ClassName.TABLE_LEFT_SHADOW}`);
+      updateShadowListForStickyStyles(heightStyleOrCompute, liveLeftShadows);
+      updateShadowListForStickyStyles(heightStyleOrCompute, liveRightShadows);
+    });
+
+    this.updateShadowState = updateShadowState;
+    this.table = _table;
+    this.wrapper = wrapper;
+    this.init();
+  }
+
+  updateStickyShadowsHeightIfChanged() {
+    if (!this.isSticky) {
+      return;
+    }
+
+    const stickyCell = this.getStickyCell();
+
+    if (!stickyCell) {
+      return;
+    }
+
+    const newStickyRowHeight = stickyCell.clientHeight + 1;
+
+    if (newStickyRowHeight === this.stickyRowHeight) {
+      this.stickyRowHeight = newStickyRowHeight;
+      this.updateStickyShadows(this.stickyRowHeight);
+    }
+  }
+
+  getStickyCell() {
+    var _this$wrapper4;
+
+    const stickyRow = (_this$wrapper4 = this.wrapper) === null || _this$wrapper4 === void 0 ? void 0 : _this$wrapper4.querySelector('tr.sticky');
+    const stickyCell = stickyRow && stickyRow.firstElementChild;
+    return stickyCell;
+  }
+
+  dispose() {
+    if (this.tableIntersectionObserver) {
+      this.tableIntersectionObserver.disconnect();
+      this.tableIntersectionObserver = undefined;
+    }
+  }
+
+}