@atlaskit/editor-plugin-table 13.0.4 → 13.0.6

package/dist/es2019/ui/icons/SortingIconWrapper.js

@@ -1,30 +1,15 @@
 import React from 'react';
-import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { SortingIcon } from '@atlaskit/editor-common/table';
-const useSharedState = sharedPluginStateHookMigratorFactory(api => {
+export const SortingIconWrapper = props => {
   const {
     mode
-  } = useSharedPluginStateWithSelector(api, ['editorViewMode'], states => {
+  } = useSharedPluginStateWithSelector(props.api, ['editorViewMode'], states => {
     var _states$editorViewMod;
     return {
       mode: (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode
     };
   });
-  return {
-    mode
-  };
-}, api => {
-  const {
-    editorViewModeState
-  } = useSharedPluginState(api, ['editorViewMode']);
-  return {
-    mode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode
-  };
-});
-export const SortingIconWrapper = props => {
-  const {
-    mode
-  } = useSharedState(props.api);
   if (mode === 'edit') {
     return null;
   }

package/dist/es2019/ui/ui-styles.js

@@ -33,7 +33,7 @@ export const InsertMarker = cssString => css`
 	}
 `;
 const Button = cssString => css`
-	border-radius: ${"var(--ds-border-radius, 3px)"};
+	border-radius: ${"var(--ds-radius-small, 3px)"};
 	border-width: 0px;
 	display: inline-flex;
 	max-width: 100%;

package/dist/esm/nodeviews/TableComponentWithSharedState.js

@@ -1,14 +1,28 @@
 import React from 'react';
-import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { findTable } from '@atlaskit/editor-tables';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import TableComponent from './TableComponent';
 
 // Ignored via go/ees005
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
-var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
+/**
+ * Use useSharedPluginState to control re-renders from plugin dependencies
+ */
+export var TableComponentWithSharedState = function TableComponentWithSharedState(_ref) {
+  var view = _ref.view,
+    options = _ref.options,
+    getNode = _ref.getNode,
+    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
+    api = _ref.api,
+    getEditorFeatureFlags = _ref.getEditorFeatureFlags,
+    eventDispatcher = _ref.eventDispatcher,
+    allowColumnResizing = _ref.allowColumnResizing,
+    allowControls = _ref.allowControls,
+    getPos = _ref.getPos,
+    forwardRef = _ref.forwardRef,
+    allowTableAlignment = _ref.allowTableAlignment,
+    allowTableResizing = _ref.allowTableResizing;
   var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['table', 'width', 'media', 'selection', 'editorViewMode', 'interaction'], function (states) {
       var _states$tableState, _states$tableState2, _states$tableState3, _states$tableState4, _states$tableState5, _states$tableState6, _states$tableState7, _states$tableState8, _states$tableState9, _states$tableState0, _states$tableState1, _states$mediaState, _states$selectionStat, _states$editorViewMod, _states$widthState, _states$widthState2, _states$interactionSt;
       return {
@@ -54,97 +68,7 @@ var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
     mode = _useSharedPluginState.mode,
     selection = _useSharedPluginState.selection,
     width = _useSharedPluginState.width;
-  return {
-    tableState: undefined,
-    widthState: undefined,
-    isTableResizing: isTableResizing,
-    isHeaderColumnEnabled: isHeaderColumnEnabled,
-    isHeaderRowEnabled: isHeaderRowEnabled,
-    ordering: ordering,
-    isResizing: isResizing,
-    isInDanger: isInDanger,
-    hoveredCell: hoveredCell,
-    hoveredRows: hoveredRows,
-    isTableHovered: isTableHovered,
-    isWholeTableInDanger: isWholeTableInDanger,
-    isFullscreen: isFullscreen,
-    selection: selection,
-    mode: mode,
-    width: width,
-    lineLength: lineLength,
-    interaction: interaction
-  };
-}, function (api) {
-  var _useSharedPluginState2 = useSharedPluginState(api, ['width', 'table', 'media', 'selection', 'editorViewMode', 'interaction']),
-    widthState = _useSharedPluginState2.widthState,
-    tableState = _useSharedPluginState2.tableState,
-    mediaState = _useSharedPluginState2.mediaState,
-    selectionState = _useSharedPluginState2.selectionState,
-    editorViewModeState = _useSharedPluginState2.editorViewModeState,
-    interactionState = _useSharedPluginState2.interactionState;
-  var tableStateInternal = tableState;
-  return {
-    tableState: tableState,
-    widthState: widthState,
-    isTableResizing: tableStateInternal === null || tableStateInternal === void 0 ? void 0 : tableStateInternal.isTableResizing,
-    isHeaderColumnEnabled: tableStateInternal === null || tableStateInternal === void 0 ? void 0 : tableStateInternal.isHeaderColumnEnabled,
-    isHeaderRowEnabled: tableStateInternal === null || tableStateInternal === void 0 ? void 0 : tableStateInternal.isHeaderRowEnabled,
-    ordering: tableStateInternal === null || tableStateInternal === void 0 ? void 0 : tableStateInternal.ordering,
-    isResizing: tableStateInternal === null || tableStateInternal === void 0 ? void 0 : tableStateInternal.isResizing,
-    isInDanger: tableStateInternal === null || tableStateInternal === void 0 ? void 0 : tableStateInternal.isInDanger,
-    hoveredCell: tableStateInternal === null || tableStateInternal === void 0 ? void 0 : tableStateInternal.hoveredCell,
-    hoveredRows: tableStateInternal === null || tableStateInternal === void 0 ? void 0 : tableStateInternal.hoveredRows,
-    isTableHovered: tableStateInternal === null || tableStateInternal === void 0 ? void 0 : tableStateInternal.isTableHovered,
-    isWholeTableInDanger: tableStateInternal === null || tableStateInternal === void 0 ? void 0 : tableStateInternal.isWholeTableInDanger,
-    isFullscreen: mediaState === null || mediaState === void 0 ? void 0 : mediaState.isFullscreen,
-    selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection,
-    mode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode,
-    width: widthState === null || widthState === void 0 ? void 0 : widthState.width,
-    lineLength: widthState === null || widthState === void 0 ? void 0 : widthState.lineLength,
-    interaction: interactionState === null || interactionState === void 0 ? void 0 : interactionState.interactionState
-  };
-});
-
-/**
- * Use useSharedPluginState to control re-renders from plugin dependencies
- */
-export var TableComponentWithSharedState = function TableComponentWithSharedState(_ref) {
-  var view = _ref.view,
-    options = _ref.options,
-    getNode = _ref.getNode,
-    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
-    api = _ref.api,
-    getEditorFeatureFlags = _ref.getEditorFeatureFlags,
-    eventDispatcher = _ref.eventDispatcher,
-    allowColumnResizing = _ref.allowColumnResizing,
-    allowControls = _ref.allowControls,
-    getPos = _ref.getPos,
-    forwardRef = _ref.forwardRef,
-    allowTableAlignment = _ref.allowTableAlignment,
-    allowTableResizing = _ref.allowTableResizing;
-  var _useSharedState = useSharedState(api),
-    tableState = _useSharedState.tableState,
-    widthState = _useSharedState.widthState,
-    mode = _useSharedState.mode,
-    hoveredCell = _useSharedState.hoveredCell,
-    hoveredRows = _useSharedState.hoveredRows,
-    isFullscreen = _useSharedState.isFullscreen,
-    isHeaderColumnEnabled = _useSharedState.isHeaderColumnEnabled,
-    isHeaderRowEnabled = _useSharedState.isHeaderRowEnabled,
-    isInDanger = _useSharedState.isInDanger,
-    isResizing = _useSharedState.isResizing,
-    isTableHovered = _useSharedState.isTableHovered,
-    isTableResizing = _useSharedState.isTableResizing,
-    isWholeTableInDanger = _useSharedState.isWholeTableInDanger,
-    lineLength = _useSharedState.lineLength,
-    ordering = _useSharedState.ordering,
-    selection = _useSharedState.selection,
-    width = _useSharedState.width,
-    interaction = _useSharedState.interaction;
   var isLivePageViewMode = mode === 'view';
-  if (expValEquals('platform_editor_usesharedpluginstatewithselector', 'isEnabled', false) && !tableState) {
-    return null;
-  }
 
   /**
    *  ED-19810
@@ -178,13 +102,10 @@ export var TableComponentWithSharedState = function TableComponentWithSharedStat
     ordering: ordering,
     isResizing: isResizing,
     getNode: getNode,
-    containerWidth: editorExperiment('platform_editor_usesharedpluginstatewithselector', true) ? {
+    containerWidth: {
       width: width !== null && width !== void 0 ? width : 0,
       lineLength: lineLength
-    } :
-    // Ignored via go/ees005
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    widthState,
+    },
     contentDOM: forwardRef,
     getEditorFeatureFlags: getEditorFeatureFlags,
     dispatchAnalyticsEvent: dispatchAnalyticsEvent,

package/dist/esm/nodeviews/TableContainer.js

@@ -4,7 +4,7 @@ import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState }
 import classNames from 'classnames';
 import { CHANGE_ALIGNMENT_REASON, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { isSSR } from '@atlaskit/editor-common/core-utils';
-import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { akEditorDefaultLayoutWidth, akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout, akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -36,7 +36,13 @@ var InnerContainer = /*#__PURE__*/forwardRef(function (_ref, ref) {
     "data-testid": "table-container"
   }, children);
 });
-var useAlignmentTableContainerSharedState = sharedPluginStateHookMigratorFactory(function (pluginInjectionApi) {
+var AlignmentTableContainer = function AlignmentTableContainer(_ref2) {
+  var node = _ref2.node,
+    children = _ref2.children,
+    pluginInjectionApi = _ref2.pluginInjectionApi,
+    getPos = _ref2.getPos,
+    editorView = _ref2.editorView;
+  var alignment = node.attrs.layout !== ALIGN_START ? ALIGN_CENTER : ALIGN_START;
   var _useSharedPluginState = useSharedPluginStateWithSelector(pluginInjectionApi, ['table'], function (states) {
       var _states$tableState, _states$tableState2;
       return {
@@ -46,35 +52,7 @@ var useAlignmentTableContainerSharedState = sharedPluginStateHookMigratorFactory
     }),
     isFullWidthModeEnabled = _useSharedPluginState.isFullWidthModeEnabled,
     wasFullWidthModeEnabled = _useSharedPluginState.wasFullWidthModeEnabled;
-  return {
-    tableState: undefined,
-    isFullWidthModeEnabled: isFullWidthModeEnabled,
-    wasFullWidthModeEnabled: wasFullWidthModeEnabled
-  };
-}, function (pluginInjectionApi) {
-  var _useSharedPluginState2 = useSharedPluginState(pluginInjectionApi, ['table']),
-    tableState = _useSharedPluginState2.tableState;
-  return {
-    tableState: tableState,
-    isFullWidthModeEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled,
-    wasFullWidthModeEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.wasFullWidthModeEnabled
-  };
-});
-var AlignmentTableContainer = function AlignmentTableContainer(_ref2) {
-  var node = _ref2.node,
-    children = _ref2.children,
-    pluginInjectionApi = _ref2.pluginInjectionApi,
-    getPos = _ref2.getPos,
-    editorView = _ref2.editorView;
-  var alignment = node.attrs.layout !== ALIGN_START ? ALIGN_CENTER : ALIGN_START;
-  var _useAlignmentTableCon = useAlignmentTableContainerSharedState(pluginInjectionApi),
-    tableState = _useAlignmentTableCon.tableState,
-    isFullWidthModeEnabled = _useAlignmentTableCon.isFullWidthModeEnabled,
-    wasFullWidthModeEnabled = _useAlignmentTableCon.wasFullWidthModeEnabled;
   useEffect(function () {
-    if (!tableState && expValEquals('platform_editor_usesharedpluginstatewithselector', 'isEnabled', false)) {
-      return;
-    }
     if (editorView && getPos) {
       var state = editorView.state,
         dispatch = editorView.dispatch;
@@ -91,7 +69,7 @@ var AlignmentTableContainer = function AlignmentTableContainer(_ref2) {
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [editorView, tableState, isFullWidthModeEnabled, wasFullWidthModeEnabled, node]);
+  }, [editorView, isFullWidthModeEnabled, wasFullWidthModeEnabled, node]);
   var style = useMemo(function () {
     return getAlignmentStyle(alignment);
   }, [alignment]);
@@ -137,23 +115,6 @@ var selector = function selector(states) {
     editorViewModeState: states.editorViewModeState
   };
 };
-var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
-  var _useSharedPluginState3 = useSharedPluginStateWithSelector(api, ['table', 'editorViewMode'], selector),
-    tableState = _useSharedPluginState3.tableState,
-    editorViewModeState = _useSharedPluginState3.editorViewModeState;
-  return {
-    tableState: tableState,
-    editorViewModeState: editorViewModeState
-  };
-}, function (api) {
-  var _useSharedPluginState4 = useSharedPluginState(api, ['table', 'editorViewMode']),
-    tableState = _useSharedPluginState4.tableState,
-    editorViewModeState = _useSharedPluginState4.editorViewModeState;
-  return {
-    tableState: tableState,
-    editorViewModeState: editorViewModeState
-  };
-});
 var getPadding = function getPadding(containerWidth) {
   return containerWidth <= akEditorFullPageNarrowBreakout && expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? akEditorGutterPaddingReduced : akEditorGutterPaddingDynamic();
 };
@@ -181,9 +142,9 @@ var ResizableTableContainerLegacy = /*#__PURE__*/React.memo(function (_ref4) {
     _useState2 = _slicedToArray(_useState, 2),
     resizing = _useState2[0],
     setIsResizing = _useState2[1];
-  var _useSharedState = useSharedState(pluginInjectionApi),
-    tableState = _useSharedState.tableState,
-    editorViewModeState = _useSharedState.editorViewModeState;
+  var _useSharedPluginState2 = useSharedPluginStateWithSelector(pluginInjectionApi, ['table', 'editorViewMode'], selector),
+    tableState = _useSharedPluginState2.tableState,
+    editorViewModeState = _useSharedPluginState2.editorViewModeState;
   var isFullWidthModeEnabled = tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled;
   var mode = editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
   var updateContainerHeight = useCallback(function (height) {
@@ -382,9 +343,9 @@ var ResizableTableContainerNext = /*#__PURE__*/React.memo(function (_ref5) {
     _useState6 = _slicedToArray(_useState5, 2),
     tableMaxWidthForFullPageOnLoad = _useState6[0],
     setTableMaxWidthForFullPageOnLoad = _useState6[1];
-  var _useSharedState2 = useSharedState(pluginInjectionApi),
-    tableState = _useSharedState2.tableState,
-    editorViewModeState = _useSharedState2.editorViewModeState;
+  var _useSharedPluginState3 = useSharedPluginStateWithSelector(pluginInjectionApi, ['table', 'editorViewMode'], selector),
+    tableState = _useSharedPluginState3.tableState,
+    editorViewModeState = _useSharedPluginState3.editorViewModeState;
   var isFullWidthModeEnabled = tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled;
   var mode = editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
   var updateContainerHeight = useCallback(function (height) {

package/dist/esm/nodeviews/TableResizer.js

@@ -8,7 +8,7 @@ import { useIntl } from 'react-intl-next';
 import { CHANGE_ALIGNMENT_REASON, INPUT_METHOD, TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
 import { browser } from '@atlaskit/editor-common/browser';
 import { getGuidelinesWithHighlights } from '@atlaskit/editor-common/guideline';
-import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { focusTableResizer, ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { logException } from '@atlaskit/editor-common/monitoring';
@@ -107,19 +107,6 @@ var selector = function selector(states) {
     widthToWidest: (_states$tableState = states.tableState) === null || _states$tableState === void 0 ? void 0 : _states$tableState.widthToWidest
   };
 };
-var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
-  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['table'], selector),
-    widthToWidest = _useSharedPluginState.widthToWidest;
-  return {
-    widthToWidest: widthToWidest
-  };
-}, function (api) {
-  var _useSharedPluginState2 = useSharedPluginState(api, ['table']),
-    tableState = _useSharedPluginState2.tableState;
-  return {
-    widthToWidest: tableState === null || tableState === void 0 ? void 0 : tableState.widthToWidest
-  };
-});
 export var TableResizer = function TableResizer(_ref) {
   var _editorView$state, _pluginInjectionApi$a2;
   var children = _ref.children,
@@ -152,8 +139,8 @@ export var TableResizer = function TableResizer(_ref) {
   var areResizeMetaKeysPressed = useRef(false);
   var resizerRef = useRef(null);
   var interactionState = useSharedPluginStateSelector(pluginInjectionApi, 'interaction.interactionState');
-  var _useSharedState = useSharedState(pluginInjectionApi),
-    widthToWidest = _useSharedState.widthToWidest;
+  var _useSharedPluginState = useSharedPluginStateWithSelector(pluginInjectionApi, ['table'], selector),
+    widthToWidest = _useSharedPluginState.widthToWidest;
 
   // used to reposition tooltip when table is resizing via keyboard
   var updateTooltip = React.useRef();

package/dist/esm/nodeviews/table.js

@@ -75,7 +75,7 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
     _this.options = props.options;
     _this.getEditorFeatureFlags = props.getEditorFeatureFlags;
     _this.handleRef = function (node) {
-      return _this._handleTableRef(node, props.node);
+      return _this._handleTableRef(node);
     };
     return _this;
   }
@@ -120,7 +120,7 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
      */
   }, {
     key: "_handleTableRef",
-    value: function _handleTableRef(node, pmNode) {
+    value: function _handleTableRef(node) {
       var _this2 = this;
       var oldIgnoreMutation;
       var selectionBookmark;
@@ -148,8 +148,8 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
           selectionBookmark = this.view.state.selection.getBookmark();
         }
         if (this.dom && expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true)) {
-          this.dom.setAttribute('data-ssr-placeholder', "table-nodeview-".concat(pmNode.attrs.localId));
-          this.dom.setAttribute('data-ssr-placeholder-replace', "table-nodeview-".concat(pmNode.attrs.localId));
+          this.dom.setAttribute('data-ssr-placeholder', "table-nodeview-".concat(this.node.attrs.localId));
+          this.dom.setAttribute('data-ssr-placeholder-replace', "table-nodeview-".concat(this.node.attrs.localId));
         }
 
         // Remove the ProseMirror table DOM structure to avoid duplication, as it's replaced with the React table node.