@atlaskit/editor-plugin-table 0.0.1 → 0.0.2

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

@@ -1,4 +1,5 @@
 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';
@@ -29,280 +30,311 @@ import LayoutButton from './ui/LayoutButton';
 import { isLayoutSupported } from './utils';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
 
-const defaultGetEditorContainerWidth = () => {
-  var _document, _document$body;
+const defaultGetEditorFeatureFlags = () => ({});
 
-  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 tablesPlugin = options => {
+  const editorViewRef = {
+    current: null
   };
-};
-
-const defaultGetEditorFeatureFlags = () => ({});
 
-const tablesPlugin = options => ({
-  name: 'table',
+  const defaultGetEditorContainerWidth = () => {
+    if (!editorViewRef.current) {
+      var _document, _document$body;
 
-  nodes() {
-    return [{
-      name: 'table',
-      node: table
-    }, {
-      name: 'tableHeader',
-      node: tableHeader
-    }, {
-      name: 'tableRow',
-      node: tableRow
-    }, {
-      name: 'tableCell',
-      node: tableCell
-    }];
-  },
+      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
+      };
+    }
 
-  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), (options === null || options === void 0 ? void 0 : options.getEditorContainerWidth) || defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, breakoutEnabled, fullWidthEnabled, wasFullWidthEnabled, editorAnalyticsAPI);
-      }
-    }, {
-      name: 'tablePMColResizing',
-      plugin: ({
-        dispatch
-      }) => {
-        const {
-          fullWidthEnabled,
-          tableOptions,
-          editorAnalyticsAPI,
-          getEditorContainerWidth,
-          getEditorFeatureFlags
-        } = options || {};
-        const {
-          allowColumnResizing
-        } = pluginConfig(tableOptions);
-        return allowColumnResizing ? createFlexiResizingPlugin(dispatch, {
-          lastColumnResizable: !fullWidthEnabled
-        }, getEditorContainerWidth || defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, editorAnalyticsAPI) : undefined;
+    const {
+      current: {
+        state
       }
-    }, {
-      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((options === null || options === void 0 ? void 0 : options.getEditorContainerWidth) || 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)
-    }]; // 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
+    } = editorViewRef; // TODO: ED-15663
+    // Please, do not copy or use this kind of code below
+    // @ts-ignore
 
-    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
+    return state['widthPlugin$'];
+  };
 
+  return {
+    name: 'table',
 
-    if (browser.safari) {
-      plugins.push({
-        name: 'tableSafariDeleteCompositionTextIssueWorkaround',
+    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 createTableSafariDeleteCompositionTextIssueWorkaroundPlugin();
+          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
 
-    return plugins;
-  },
+      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
 
-  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: (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: ({
-      nodeName,
-      schema
-    }) => {
-      // An EditorPlugin may manage more than one node.
-      if (nodeName !== 'table') {
-        return null;
+      if (browser.safari) {
+        plugins.push({
+          name: 'tableSafariDeleteCompositionTextIssueWorkaround',
+          plugin: () => {
+            return createTableSafariDeleteCompositionTextIssueWorkaroundPlugin();
+          }
+        });
       }
 
-      const table = createTable({
-        schema
-      });
-      return table;
+      return plugins;
     },
-    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;
+    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
+          }));
+        }
+      }));
+    },
 
-        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;
-      }
+    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),
 
-    }],
-    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))
-  }
-});
+        // 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/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "0.0.1"
+	"version": "0.0.2"
 }