@atlaskit/editor-core 174.0.0 → 175.0.0

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

@@ -1,330 +0,0 @@
-import React from 'react';
-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 '../../keymaps';
-import WithPluginState from '../../ui/WithPluginState';
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
-import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
-import { IconTable } from '@atlaskit/editor-common/icons';
-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 '../../ui/ErrorBoundary';
-
-var defaultGetEditorContainerWidth = function defaultGetEditorContainerWidth() {
-  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
-  };
-};
-
-var defaultGetEditorFeatureFlags = function defaultGetEditorFeatureFlags() {
-  return {};
-};
-
-var tablesPlugin = function tablesPlugin(options) {
-  return {
-    name: 'table',
-    nodes: function nodes() {
-      return [{
-        name: 'table',
-        node: table
-      }, {
-        name: 'tableHeader',
-        node: tableHeader
-      }, {
-        name: 'tableRow',
-        node: tableRow
-      }, {
-        name: 'tableCell',
-        node: tableCell
-      }];
-    },
-    pmPlugins: function pmPlugins() {
-      var plugins = [{
-        name: 'table',
-        plugin: function plugin(_ref) {
-          var dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
-              dispatch = _ref.dispatch,
-              portalProviderAPI = _ref.portalProviderAPI,
-              eventDispatcher = _ref.eventDispatcher;
-
-          var _ref2 = options || {},
-              fullWidthEnabled = _ref2.fullWidthEnabled,
-              wasFullWidthEnabled = _ref2.wasFullWidthEnabled,
-              breakoutEnabled = _ref2.breakoutEnabled,
-              tableOptions = _ref2.tableOptions,
-              editorAnalyticsAPI = _ref2.editorAnalyticsAPI,
-              getEditorFeatureFlags = _ref2.getEditorFeatureFlags;
-
-          return createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig(tableOptions), (options === null || options === void 0 ? void 0 : options.getEditorContainerWidth) || defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, breakoutEnabled, fullWidthEnabled, wasFullWidthEnabled, editorAnalyticsAPI);
-        }
-      }, {
-        name: 'tablePMColResizing',
-        plugin: function plugin(_ref3) {
-          var dispatch = _ref3.dispatch;
-
-          var _ref4 = options || {},
-              fullWidthEnabled = _ref4.fullWidthEnabled,
-              tableOptions = _ref4.tableOptions,
-              editorAnalyticsAPI = _ref4.editorAnalyticsAPI,
-              getEditorFeatureFlags = _ref4.getEditorFeatureFlags,
-              getEditorContainerWidth = _ref4.getEditorContainerWidth;
-
-          var _pluginConfig = pluginConfig(tableOptions),
-              allowColumnResizing = _pluginConfig.allowColumnResizing;
-
-          return allowColumnResizing ? createFlexiResizingPlugin(dispatch, {
-            lastColumnResizable: !fullWidthEnabled
-          }, getEditorContainerWidth || defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, editorAnalyticsAPI) : undefined;
-        }
-      }, {
-        name: 'tableEditing',
-        plugin: function plugin() {
-          return createDecorationsPlugin();
-        }
-      }, // Needs to be lower priority than editor-tables.tableEditing
-      // plugin as it is currently swallowing backspace events inside tables
-      {
-        name: 'tableKeymap',
-        plugin: function plugin() {
-          return keymapPlugin((options === null || options === void 0 ? void 0 : options.getEditorContainerWidth) || defaultGetEditorContainerWidth, options === null || options === void 0 ? void 0 : options.editorAnalyticsAPI);
-        }
-      }, {
-        name: 'tableSelectionKeymap',
-        plugin: function plugin() {
-          return tableSelectionKeymapPlugin(options === null || options === void 0 ? void 0 : options.editorSelectionAPI);
-        }
-      }, {
-        name: 'tableEditing',
-        plugin: function plugin() {
-          return tableEditing({
-            reportFixedTable: function reportFixedTable(_ref5) {
-              var _options$editorAnalyt;
-
-              var state = _ref5.state,
-                  tr = _ref5.tr,
-                  reason = _ref5.reason;
-              options === null || options === void 0 ? void 0 : (_options$editorAnalyt = options.editorAnalyticsAPI) === null || _options$editorAnalyt === void 0 ? void 0 : _options$editorAnalyt.attachAnalyticsEvent({
-                action: TABLE_ACTION.FIXED,
-                actionSubject: ACTION_SUBJECT.TABLE,
-                actionSubjectId: null,
-                attributes: {
-                  reason: reason
-                },
-                eventType: EVENT_TYPE.TRACK
-              })(tr);
-            }
-          });
-        }
-      }, {
-        name: 'tableStickyHeaders',
-        plugin: function plugin(_ref6) {
-          var dispatch = _ref6.dispatch,
-              eventDispatcher = _ref6.eventDispatcher;
-          return options && options.tableOptions.stickyHeaders ? createStickyHeadersPlugin(dispatch, eventDispatcher, function () {
-            return [];
-          }, (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags) : undefined;
-        }
-      }, {
-        name: 'tableLocalId',
-        plugin: function plugin(_ref7) {
-          var dispatch = _ref7.dispatch;
-          return createTableLocalIdPlugin(dispatch);
-        }
-      }]; // 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: function 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: function plugin() {
-            return createTableSafariDeleteCompositionTextIssueWorkaroundPlugin();
-          }
-        });
-      }
-
-      return plugins;
-    },
-    contentComponent: function contentComponent(_ref8) {
-      var editorView = _ref8.editorView,
-          popupsMountPoint = _ref8.popupsMountPoint,
-          popupsBoundariesElement = _ref8.popupsBoundariesElement,
-          popupsScrollableElement = _ref8.popupsScrollableElement,
-          dispatchAnalyticsEvent = _ref8.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: function render(_ref9) {
-          var resizingPluginState = _ref9.tableResizingPluginState,
-              stickyHeadersState = _ref9.stickyHeadersState,
-              tablePluginState = _ref9.tablePluginState;
-          var state = editorView.state;
-          var isDragging = resizingPluginState === null || resizingPluginState === void 0 ? void 0 : resizingPluginState.dragging;
-          var _ref10 = tablePluginState,
-              tableNode = _ref10.tableNode,
-              tablePos = _ref10.tablePos,
-              targetCellPosition = _ref10.targetCellPosition,
-              isContextualMenuOpen = _ref10.isContextualMenuOpen,
-              layout = _ref10.layout,
-              tableRef = _ref10.tableRef,
-              pluginConfig = _ref10.pluginConfig,
-              insertColumnButtonIndex = _ref10.insertColumnButtonIndex,
-              insertRowButtonIndex = _ref10.insertRowButtonIndex,
-              isHeaderColumnEnabled = _ref10.isHeaderColumnEnabled,
-              isHeaderRowEnabled = _ref10.isHeaderRowEnabled,
-              tableWrapperTarget = _ref10.tableWrapperTarget;
-          var allowControls = pluginConfig.allowControls;
-          var 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: (options === null || options === void 0 ? void 0 : options.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: (options === null || options === void 0 ? void 0 : options.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: function createNodeHandler(_ref11) {
-        var nodeName = _ref11.nodeName,
-            schema = _ref11.schema;
-
-        // An EditorPlugin may manage more than one node.
-        if (nodeName !== 'table') {
-          return null;
-        }
-
-        var table = createTable({
-          schema: schema
-        });
-        return table;
-      },
-      quickInsert: function quickInsert(_ref12) {
-        var formatMessage = _ref12.formatMessage;
-        return [{
-          id: 'table',
-          title: formatMessage(messages.table),
-          description: formatMessage(messages.tableDescription),
-          keywords: ['cell', 'table'],
-          priority: 600,
-          keyshortcut: tooltip(toggleTable),
-          icon: function icon() {
-            return /*#__PURE__*/React.createElement(IconTable, null);
-          },
-          action: function action(insert, state) {
-            var _options$editorAnalyt2;
-
-            var tr = insert(createTable({
-              schema: state.schema
-            }));
-            options === null || options === void 0 ? void 0 : (_options$editorAnalyt2 = options.editorAnalyticsAPI) === null || _options$editorAnalyt2 === void 0 ? void 0 : _options$editorAnalyt2.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((options === null || options === void 0 ? void 0 : options.getEditorContainerWidth) || 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/esm/plugins/table/nodeviews/OverflowShadowsObserver.js

@@ -1,177 +0,0 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-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 var OverflowShadowsObserver = /*#__PURE__*/function () {
-  // updateShadowState is a method to update shadow key
-  function OverflowShadowsObserver(updateShadowState, _table, wrapper) {
-    var _this = this;
-
-    _classCallCheck(this, OverflowShadowsObserver);
-
-    _defineProperty(this, "firstCell", null);
-
-    _defineProperty(this, "lastCell", null);
-
-    _defineProperty(this, "getFirstCell", function (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", function (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", function () {
-      var table = _this.table;
-
-      if (!_this.wrapper || !table) {
-        return;
-      }
-
-      if (!_this.tableIntersectionObserver) {
-        var intersectonOnbserverCallback = function 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(function (entries, _) {
-          entries.forEach(function (entry) {
-            return intersectonOnbserverCallback(entry);
-          });
-        }, {
-          threshold: [0, 1],
-          root: _this.wrapper,
-          rootMargin: "0px ".concat(tableInsertColumnButtonSize / 2, "px 0px 0px")
-        });
-        return;
-      }
-    });
-
-    _defineProperty(this, "checkIntersectionEvent", function (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", function (isSticky, hasHeaderRow) {
-      var stickyChanged = !!isSticky !== _this.isSticky;
-      _this.isSticky = !!isSticky; // update sticky shadows
-
-      _this.updateStickyShadowsHeightIfChanged();
-
-      if (!stickyChanged) {
-        var firstCell = _this.getFirstCell(isSticky, hasHeaderRow);
-
-        var 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", function (stickyRowHeight) {
-      var _this$wrapper, _this$wrapper2, _this$wrapper2$parent, _this$wrapper3, _this$wrapper3$parent;
-
-      if (!_this.isSticky) {
-        return;
-      }
-
-      var stickyCell = _this.getStickyCell();
-
-      if (!stickyCell || !((_this$wrapper = _this.wrapper) !== null && _this$wrapper !== void 0 && _this$wrapper.parentElement)) {
-        return;
-      }
-
-      var heightStyleOrCompute = "".concat(stickyRowHeight || stickyCell.clientHeight + 1, "px"); // Use getElementsByClassName here for a live node list to capture
-      // sticky shadows
-
-      var 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("".concat(ClassName.TABLE_RIGHT_SHADOW));
-      var 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("".concat(ClassName.TABLE_LEFT_SHADOW));
-      updateShadowListForStickyStyles(heightStyleOrCompute, liveLeftShadows);
-      updateShadowListForStickyStyles(heightStyleOrCompute, liveRightShadows);
-    });
-
-    this.updateShadowState = updateShadowState;
-    this.table = _table;
-    this.wrapper = wrapper;
-    this.init();
-  }
-
-  _createClass(OverflowShadowsObserver, [{
-    key: "updateStickyShadowsHeightIfChanged",
-    value: function updateStickyShadowsHeightIfChanged() {
-      if (!this.isSticky) {
-        return;
-      }
-
-      var stickyCell = this.getStickyCell();
-
-      if (!stickyCell) {
-        return;
-      }
-
-      var newStickyRowHeight = stickyCell.clientHeight + 1;
-
-      if (newStickyRowHeight === this.stickyRowHeight) {
-        this.stickyRowHeight = newStickyRowHeight;
-        this.updateStickyShadows(this.stickyRowHeight);
-      }
-    }
-  }, {
-    key: "getStickyCell",
-    value: function getStickyCell() {
-      var _this$wrapper4;
-
-      var stickyRow = (_this$wrapper4 = this.wrapper) === null || _this$wrapper4 === void 0 ? void 0 : _this$wrapper4.querySelector('tr.sticky');
-      var stickyCell = stickyRow && stickyRow.firstElementChild;
-      return stickyCell;
-    }
-  }, {
-    key: "dispose",
-    value: function dispose() {
-      if (this.tableIntersectionObserver) {
-        this.tableIntersectionObserver.disconnect();
-        this.tableIntersectionObserver = undefined;
-      }
-    }
-  }]);
-
-  return OverflowShadowsObserver;
-}();