@atlaskit/editor-plugin-table 0.0.1 → 0.0.2

package/dist/esm/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,19 +30,31 @@ import LayoutButton from './ui/LayoutButton';
 import { isLayoutSupported } from './utils';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
 
-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) {
+  var editorViewRef = {
+    current: null
+  };
+
+  var defaultGetEditorContainerWidth = function 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
+      };
+    }
+
+    var state = editorViewRef.current.state; // TODO: ED-15663
+    // Please, do not copy or use this kind of code below
+    // @ts-ignore
+
+    return state['widthPlugin$'];
+  };
+
   return {
     name: 'table',
     nodes: function nodes() {
@@ -76,7 +89,7 @@ var tablesPlugin = function tablesPlugin(options) {
               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);
+          return createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, breakoutEnabled, fullWidthEnabled, wasFullWidthEnabled, editorAnalyticsAPI);
         }
       }, {
         name: 'tablePMColResizing',
@@ -87,7 +100,6 @@ var tablesPlugin = function tablesPlugin(options) {
               fullWidthEnabled = _ref4.fullWidthEnabled,
               tableOptions = _ref4.tableOptions,
               editorAnalyticsAPI = _ref4.editorAnalyticsAPI,
-              getEditorContainerWidth = _ref4.getEditorContainerWidth,
               getEditorFeatureFlags = _ref4.getEditorFeatureFlags;
 
           var _pluginConfig = pluginConfig(tableOptions),
@@ -95,7 +107,7 @@ var tablesPlugin = function tablesPlugin(options) {
 
           return allowColumnResizing ? createFlexiResizingPlugin(dispatch, {
             lastColumnResizable: !fullWidthEnabled
-          }, getEditorContainerWidth || defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, editorAnalyticsAPI) : undefined;
+          }, defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, editorAnalyticsAPI) : undefined;
         }
       }, {
         name: 'tableEditing',
@@ -107,7 +119,7 @@ var tablesPlugin = function tablesPlugin(options) {
       {
         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);
+          return keymapPlugin(defaultGetEditorContainerWidth, options === null || options === void 0 ? void 0 : options.editorAnalyticsAPI);
         }
       }, {
         name: 'tableSelectionKeymap',
@@ -134,6 +146,20 @@ var tablesPlugin = function tablesPlugin(options) {
           var dispatch = _ref6.dispatch;
           return createTableLocalIdPlugin(dispatch);
         }
+      }, {
+        name: 'tableGetEditorViewReferencePlugin',
+        plugin: function plugin() {
+          return new SafePlugin({
+            view: function view(editorView) {
+              editorViewRef.current = editorView;
+              return {
+                destroy: function 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
@@ -224,7 +250,7 @@ var tablesPlugin = function tablesPlugin(options) {
             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
+            getEditorContainerWidth: defaultGetEditorContainerWidth
           }), /*#__PURE__*/React.createElement(FloatingContextualMenu, {
             editorView: editorView,
             mountPoint: popupsMountPoint,
@@ -233,7 +259,7 @@ var tablesPlugin = function tablesPlugin(options) {
             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
+            getEditorContainerWidth: defaultGetEditorContainerWidth
           }), allowControls && /*#__PURE__*/React.createElement(FloatingDeleteButton, {
             editorView: editorView,
             selection: editorView.state.selection,
@@ -304,7 +330,7 @@ var tablesPlugin = function tablesPlugin(options) {
           }
         }];
       },
-      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))
+      floatingToolbar: getToolbarConfig(defaultGetEditorContainerWidth, options === null || options === void 0 ? void 0 : options.editorAnalyticsAPI)(pluginConfig(options === null || options === void 0 ? void 0 : options.tableOptions))
     }
   };
 };

package/dist/esm/version.json

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

package/dist/types/plugins/table/index.d.ts

@@ -2,7 +2,7 @@ import type { EditorPlugin } from '@atlaskit/editor-common/types';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { EditorSelectionAPI } from '@atlaskit/editor-common/selection';
 import { PluginConfig } from './types';
-import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
+import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 interface TablePluginOptions {
     tableOptions: PluginConfig;
     breakoutEnabled?: boolean;
@@ -11,7 +11,6 @@ interface TablePluginOptions {
     wasFullWidthEnabled?: boolean;
     editorAnalyticsAPI?: EditorAnalyticsAPI;
     editorSelectionAPI?: EditorSelectionAPI;
-    getEditorContainerWidth?: GetEditorContainerWidth;
     getEditorFeatureFlags?: GetEditorFeatureFlags;
 }
 declare const tablesPlugin: (options?: TablePluginOptions | undefined) => EditorPlugin;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/report.api.md

@@ -1,6 +1,10 @@
-## API Report File for "@atlaskit/editor-plugin-table".
+## API Report File for "@atlaskit/editor-plugin-table"
 
-> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+<!--
+	Generated API Report version: 2.0
+-->
 
 [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
 
@@ -8,53 +12,86 @@
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { EditorPlugin } from '@atlaskit/editor-common/types';
 import type { EditorSelectionAPI } from '@atlaskit/editor-common/selection';
-import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import { TableLayout } from '@atlaskit/adf-schema';
 
-declare type PermittedLayoutsDescriptor = TableLayout[] | 'all';
+// @public (undocumented)
+type PermittedLayoutsDescriptor = TableLayout[] | 'all';
 
-declare interface PluginConfig {
+// @public (undocumented)
+interface PluginConfig {
+  // (undocumented)
   advanced?: boolean;
+  // (undocumented)
+  allowAddColumnWithCustomStep?: boolean;
+  // (undocumented)
   allowBackgroundColor?: boolean;
+  // (undocumented)
+  allowCellOptionsInFloatingToolbar?: boolean;
+  // (undocumented)
+  allowCollapse?: boolean;
+  // (undocumented)
   allowColumnResizing?: boolean;
+  // (undocumented)
+  allowColumnSorting?: boolean;
+  // (undocumented)
+  allowControls?: boolean;
+  // (undocumented)
+  allowDistributeColumns?: boolean;
+  // (undocumented)
   allowHeaderColumn?: boolean;
+  // (undocumented)
   allowHeaderRow?: boolean;
+  // (undocumented)
   allowMergeCells?: boolean;
+  // (undocumented)
   allowNumberColumn?: boolean;
-  allowColumnSorting?: boolean;
-  allowAddColumnWithCustomStep?: boolean;
-  allowCollapse?: boolean;
+  // (undocumented)
+  initialRenderOptimization?: boolean;
+  // (undocumented)
   isHeaderRowRequired?: boolean;
-  stickToolbarToBottom?: boolean;
+  // (undocumented)
+  mouseMoveOptimization?: boolean;
+  // (undocumented)
   permittedLayouts?: PermittedLayoutsDescriptor;
-  allowControls?: boolean;
+  // (undocumented)
+  stickToolbarToBottom?: boolean;
+  // (undocumented)
   stickyHeaders?: boolean;
-  allowCellOptionsInFloatingToolbar?: boolean;
-  tableCellOptimization?: boolean;
-  tableRenderOptimization?: boolean;
+  // (undocumented)
   stickyHeadersOptimization?: boolean;
-  initialRenderOptimization?: boolean;
-  mouseMoveOptimization?: boolean;
+  // (undocumented)
+  tableCellOptimization?: boolean;
+  // (undocumented)
   tableOverflowShadowsOptimization?: boolean;
-  allowDistributeColumns?: boolean;
+  // (undocumented)
+  tableRenderOptimization?: boolean;
 }
 
-declare interface TablePluginOptions {
-  tableOptions: PluginConfig;
-  breakoutEnabled?: boolean;
+// @public (undocumented)
+interface TablePluginOptions {
+  // (undocumented)
   allowContextualMenu?: boolean;
-  fullWidthEnabled?: boolean;
-  wasFullWidthEnabled?: boolean;
+  // (undocumented)
+  breakoutEnabled?: boolean;
+  // (undocumented)
   editorAnalyticsAPI?: EditorAnalyticsAPI;
+  // (undocumented)
   editorSelectionAPI?: EditorSelectionAPI;
-  getEditorContainerWidth?: GetEditorContainerWidth;
+  // (undocumented)
+  fullWidthEnabled?: boolean;
+  // (undocumented)
   getEditorFeatureFlags?: GetEditorFeatureFlags;
+  // (undocumented)
+  tableOptions: PluginConfig;
+  // (undocumented)
+  wasFullWidthEnabled?: boolean;
 }
 
-export declare const tablesPlugin: (
+// @public (undocumented)
+export const tablesPlugin: (
   options?: TablePluginOptions | undefined,
 ) => EditorPlugin;
 
-export {};
+// (No @packageDocumentation comment for this package)
 ```

package/src/plugins/table/__tests__/unit/commands/insert.ts

@@ -41,7 +41,6 @@ describe('table plugin: insert', () => {
     preset.add([
       tablePlugin,
       {
-        getEditorContainerWidth: () => ({ width: mockBodyOffsetWidth }),
         tableOptions: {},
       },
     ]);

package/src/plugins/table/__tests__/unit/pm-plugins/table-resizing/event-handlers.ts

@@ -23,6 +23,7 @@ import tablePlugin from '../../../../../table';
 import { pluginKey } from '../../../../pm-plugins/plugin-key';
 import { TextSelection, NodeSelection } from 'prosemirror-state';
 import panelPlugin from '@atlaskit/editor-core/src/plugins/panel';
+import widthPlugin from '@atlaskit/editor-core/src/plugins/width';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 
 describe('table-resizing/event-handlers', () => {
@@ -44,6 +45,7 @@ describe('table-resizing/event-handlers', () => {
               editorAnalyticsAPI: editorAnalyticsAPIFake,
             },
           ])
+          .add(widthPlugin)
           .add(panelPlugin),
         pluginKey,
       });