@atlaskit/editor-plugin-table 2.10.7 → 2.11.0

package/dist/es2019/plugins/table/utils/decoration.js

@@ -1,3 +1,6 @@
+import { createElement } from 'react';
+import ReactDOM from 'react-dom';
+import { RawIntlProvider } from 'react-intl-next';
 import { nonNullable } from '@atlaskit/editor-common/utils';
 
 // @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
@@ -6,6 +9,7 @@ import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { Rect, TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable, getCellsInRow, getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { TableCssClassName as ClassName, TableDecorations } from '../types';
+import { ColumnResizeWidget } from '../ui/ColumnResizeWidget';
 const filterDecorationByKey = (key, decorationSet) => decorationSet.find(undefined, undefined, spec => spec.key.indexOf(key) > -1);
 export const findColumnControlSelectedDecoration = decorationSet => filterDecorationByKey(TableDecorations.COLUMN_SELECTED, decorationSet);
 export const findControlsHoverDecoration = decorationSet => filterDecorationByKey(TableDecorations.ALL_CONTROLS_HOVER, decorationSet);
@@ -235,7 +239,7 @@ const makeArray = n => Array.from(Array(n).keys());
  *   we will add a new class on the last item for each cell,
  *   hence the second media will receive this class `ClassName.LAST_ITEM_IN_CELL`
  */
-export const createResizeHandleDecoration = (tr, rowIndexTarget, columnEndIndexTarget) => {
+export const createResizeHandleDecoration = (tr, rowIndexTarget, columnEndIndexTarget, includeTooltip = false, getIntl) => {
   const emptyResult = [[], []];
   const table = findTable(tr.selection);
   if (!table || !table.node) {
@@ -249,12 +253,19 @@ export const createResizeHandleDecoration = (tr, rowIndexTarget, columnEndIndexT
     const position = cellPos + cellNode.nodeSize - 1;
     return Decoration.widget(position, () => {
       const element = document.createElement('div');
-      element.classList.add(ClassName.RESIZE_HANDLE_DECORATION);
-      element.dataset.startIndex = `${cellColumnPositioning.left}`;
-      element.dataset.endIndex = `${cellColumnPositioning.right}`;
+      ReactDOM.render( /*#__PURE__*/createElement(RawIntlProvider, {
+        value: getIntl()
+      }, /*#__PURE__*/createElement(ColumnResizeWidget, {
+        startIndex: cellColumnPositioning.left,
+        endIndex: cellColumnPositioning.right,
+        includeTooltip
+      })), element);
       return element;
     }, {
-      key: `${TableDecorations.COLUMN_RESIZING_HANDLE}_${rowIndex}_${columnIndex}`
+      key: `${TableDecorations.COLUMN_RESIZING_HANDLE_WIDGET}_${rowIndex}_${columnIndex}_${includeTooltip ? 'with' : 'no'}-tooltip`,
+      destroy: node => {
+        ReactDOM.unmountComponentAtNode(node);
+      }
     });
   };
   const createLastCellElementDecoration = (cellColumnPositioning, cellPos, cellNode) => {

package/dist/esm/plugins/table/commands/misc.js

@@ -9,7 +9,7 @@ import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findCellClosestToPos, findTable, getCellsInColumn, getCellsInRow, getSelectionRect, isSelectionType, isTableSelected, removeTable, selectColumn as selectColumnTransform, selectionCell, selectRow as selectRowTransform, setCellAttrs } from '@atlaskit/editor-tables/utils';
 import { getDecorations } from '../pm-plugins/decorations/plugin';
-import { buildColumnResizingDecorations } from '../pm-plugins/decorations/utils';
+import { buildColumnResizingDecorations, clearColumnResizingDecorations } from '../pm-plugins/decorations/utils';
 import { createCommand, getPluginState } from '../pm-plugins/plugin-factory';
 import { fixAutoSizedTable } from '../transforms';
 import { TableCssClassName as ClassName, TableDecorations } from '../types';
@@ -335,23 +335,74 @@ export var hideInsertColumnOrRowButton = function hideInsertColumnOrRowButton()
     return tr.setMeta('addToHistory', false);
   });
 };
-export var addResizeHandleDecorations = function addResizeHandleDecorations(rowIndex, columnIndex) {
+export var addResizeHandleDecorations = function addResizeHandleDecorations(rowIndex, columnIndex, includeTooltip) {
   return createCommand(function (state) {
     var tableNode = findTable(state.selection);
     var _getPluginState = getPluginState(state),
-      allowColumnResizing = _getPluginState.pluginConfig.allowColumnResizing;
+      allowColumnResizing = _getPluginState.pluginConfig.allowColumnResizing,
+      getIntl = _getPluginState.getIntl;
     if (!tableNode || !allowColumnResizing) {
       return false;
     }
     return {
       type: 'ADD_RESIZE_HANDLE_DECORATIONS',
       data: {
-        decorationSet: buildColumnResizingDecorations(rowIndex, columnIndex)({
+        decorationSet: buildColumnResizingDecorations(rowIndex, columnIndex, includeTooltip, getIntl)({
           tr: state.tr,
           decorationSet: getDecorations(state)
         }),
         resizeHandleRowIndex: rowIndex,
-        resizeHandleColumnIndex: columnIndex
+        resizeHandleColumnIndex: columnIndex,
+        resizeHandleIncludeTooltip: includeTooltip
+      }
+    };
+  }, function (tr) {
+    return tr.setMeta('addToHistory', false);
+  });
+};
+export var updateResizeHandleDecorations = function updateResizeHandleDecorations(rowIndex, columnIndex, includeTooltip) {
+  return createCommand(function (state) {
+    var tableNode = findTable(state.selection);
+    var _getPluginState2 = getPluginState(state),
+      resizeHandleRowIndex = _getPluginState2.resizeHandleRowIndex,
+      resizeHandleColumnIndex = _getPluginState2.resizeHandleColumnIndex,
+      resizeHandleIncludeTooltip = _getPluginState2.resizeHandleIncludeTooltip,
+      allowColumnResizing = _getPluginState2.pluginConfig.allowColumnResizing,
+      getIntl = _getPluginState2.getIntl;
+    if (!tableNode || !allowColumnResizing) {
+      return false;
+    }
+    var resolvedRowIndex = rowIndex !== null && rowIndex !== void 0 ? rowIndex : resizeHandleRowIndex;
+    var resolvedColumnIndex = columnIndex !== null && columnIndex !== void 0 ? columnIndex : resizeHandleColumnIndex;
+    var resolvedIncludeTooltip = includeTooltip !== null && includeTooltip !== void 0 ? includeTooltip : resizeHandleIncludeTooltip;
+    if (resolvedRowIndex === undefined || resolvedColumnIndex === undefined || resolvedIncludeTooltip === undefined) {
+      return false;
+    }
+    return {
+      type: 'UPDATE_RESIZE_HANDLE_DECORATIONS',
+      data: {
+        decorationSet: buildColumnResizingDecorations(resolvedRowIndex, resolvedColumnIndex, resolvedIncludeTooltip, getIntl)({
+          tr: state.tr,
+          decorationSet: getDecorations(state)
+        }),
+        resizeHandleRowIndex: rowIndex,
+        resizeHandleColumnIndex: columnIndex,
+        resizeHandleIncludeTooltip: includeTooltip
+      }
+    };
+  }, function (tr) {
+    return tr.setMeta('addToHistory', false);
+  });
+};
+export var removeResizeHandleDecorations = function removeResizeHandleDecorations() {
+  return createCommand(function (state) {
+    return {
+      type: 'REMOVE_RESIZE_HANDLE_DECORATIONS',
+      data: {
+        decorationSet: clearColumnResizingDecorations()({
+          tr: state.tr,
+          decorationSet: getDecorations(state)
+        })
       }
     };
   }, function (tr) {

package/dist/esm/plugins/table/event-handlers.js

@@ -225,7 +225,7 @@ export var handleMouseMove = function handleMouseMove(view, event, elementConten
           target: element,
           columnEndIndexTarget: columnEndIndexTarget
         })) {
-          return addResizeHandleDecorations(rowIndexTarget, columnEndIndexTarget)(_state4, _dispatch5);
+          return addResizeHandleDecorations(rowIndexTarget, columnEndIndexTarget, true)(_state4, _dispatch5);
         }
       }
     }
@@ -303,11 +303,8 @@ export var handleCut = function handleCut(oldTr, oldState, newState, editorAnaly
 };
 export var whenTableInFocus = function whenTableInFocus(eventHandler, elementContentRects) {
   return function (view, mouseEvent) {
-    var tableResizePluginState = getResizePluginState(view.state);
-    var tablePluginState = getPluginState(view.state);
-    var isDragging = tableResizePluginState && !!tableResizePluginState.dragging;
-    var hasTableNode = tablePluginState && tablePluginState.tableNode;
-    if (!hasTableNode || isDragging) {
+    var _getPluginState7, _getResizePluginState;
+    if (!((_getPluginState7 = getPluginState(view.state)) !== null && _getPluginState7 !== void 0 && _getPluginState7.tableNode) || !!((_getResizePluginState = getResizePluginState(view.state)) !== null && _getResizePluginState !== void 0 && _getResizePluginState.dragging)) {
       return false;
     }
     return eventHandler(view, mouseEvent, elementContentRects);

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

@@ -31,29 +31,31 @@ import { isLayoutSupported } from './utils';
 var defaultGetEditorFeatureFlags = function defaultGetEditorFeatureFlags() {
   return {};
 };
-var tablesPlugin = function tablesPlugin(options, api) {
-  var _api$dependencies$ana;
+var tablesPlugin = function tablesPlugin(_ref) {
+  var _api$analytics;
+  var options = _ref.config,
+    api = _ref.api;
   var editorViewRef = {
     current: null
   };
   var defaultGetEditorContainerWidth = function defaultGetEditorContainerWidth() {
-    var _document$body$offset, _document, _document$body, _api$dependencies$wid;
+    var _document$body$offset, _document, _document$body, _api$width$sharedStat;
     var defaultState = {
       width: (_document$body$offset = (_document = document) === null || _document === void 0 ? void 0 : (_document$body = _document.body) === null || _document$body === void 0 ? void 0 : _document$body.offsetWidth) !== null && _document$body$offset !== void 0 ? _document$body$offset : 500
     };
-    return (_api$dependencies$wid = api === null || api === void 0 ? void 0 : api.dependencies.width.sharedState.currentState()) !== null && _api$dependencies$wid !== void 0 ? _api$dependencies$wid : defaultState;
+    return (_api$width$sharedStat = api === null || api === void 0 ? void 0 : api.width.sharedState.currentState()) !== null && _api$width$sharedStat !== void 0 ? _api$width$sharedStat : defaultState;
   };
-  var editorAnalyticsAPI = api === null || api === void 0 ? void 0 : (_api$dependencies$ana = api.dependencies.analytics) === null || _api$dependencies$ana === void 0 ? void 0 : _api$dependencies$ana.actions;
+  var editorAnalyticsAPI = api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
   return {
     name: 'table',
     actions: {
       insertTable: function insertTable(analyticsPayload) {
         return function (state, dispatch) {
-          var _api$dependencies$con, _api$dependencies, _api$dependencies$con2, _api$dependencies$con3;
+          var _api$contentInsertion, _api$contentInsertion2, _api$contentInsertion3;
           var node = createTable({
             schema: state.schema
           });
-          return (_api$dependencies$con = api === null || api === void 0 ? void 0 : (_api$dependencies = api.dependencies) === null || _api$dependencies === void 0 ? void 0 : (_api$dependencies$con2 = _api$dependencies.contentInsertion) === null || _api$dependencies$con2 === void 0 ? void 0 : (_api$dependencies$con3 = _api$dependencies$con2.actions) === null || _api$dependencies$con3 === void 0 ? void 0 : _api$dependencies$con3.insert({
+          return (_api$contentInsertion = api === null || api === void 0 ? void 0 : (_api$contentInsertion2 = api.contentInsertion) === null || _api$contentInsertion2 === void 0 ? void 0 : (_api$contentInsertion3 = _api$contentInsertion2.actions) === null || _api$contentInsertion3 === void 0 ? void 0 : _api$contentInsertion3.insert({
             state: state,
             dispatch: dispatch,
             node: node,
@@ -61,7 +63,7 @@ var tablesPlugin = function tablesPlugin(options, api) {
               selectNodeInserted: false,
               analyticsPayload: analyticsPayload
             }
-          })) !== null && _api$dependencies$con !== void 0 ? _api$dependencies$con : false;
+          })) !== null && _api$contentInsertion !== void 0 ? _api$contentInsertion : false;
         };
       }
     },
@@ -84,28 +86,29 @@ var tablesPlugin = function tablesPlugin(options, api) {
     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,
-            tableResizingEnabled = _ref2.tableResizingEnabled,
-            breakoutEnabled = _ref2.breakoutEnabled,
-            tableOptions = _ref2.tableOptions,
-            getEditorFeatureFlags = _ref2.getEditorFeatureFlags;
-          return createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, breakoutEnabled, fullWidthEnabled, tableResizingEnabled, wasFullWidthEnabled, editorAnalyticsAPI, api);
+        plugin: function plugin(_ref2) {
+          var dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent,
+            dispatch = _ref2.dispatch,
+            portalProviderAPI = _ref2.portalProviderAPI,
+            eventDispatcher = _ref2.eventDispatcher,
+            getIntl = _ref2.getIntl;
+          var _ref3 = options || {},
+            fullWidthEnabled = _ref3.fullWidthEnabled,
+            wasFullWidthEnabled = _ref3.wasFullWidthEnabled,
+            tableResizingEnabled = _ref3.tableResizingEnabled,
+            breakoutEnabled = _ref3.breakoutEnabled,
+            tableOptions = _ref3.tableOptions,
+            getEditorFeatureFlags = _ref3.getEditorFeatureFlags;
+          return createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, getIntl, breakoutEnabled, fullWidthEnabled, tableResizingEnabled, wasFullWidthEnabled, editorAnalyticsAPI, api);
         }
       }, {
         name: 'tablePMColResizing',
-        plugin: function plugin(_ref3) {
-          var dispatch = _ref3.dispatch;
-          var _ref4 = options || {},
-            fullWidthEnabled = _ref4.fullWidthEnabled,
-            tableOptions = _ref4.tableOptions,
-            getEditorFeatureFlags = _ref4.getEditorFeatureFlags;
+        plugin: function plugin(_ref4) {
+          var dispatch = _ref4.dispatch;
+          var _ref5 = options || {},
+            fullWidthEnabled = _ref5.fullWidthEnabled,
+            tableOptions = _ref5.tableOptions,
+            getEditorFeatureFlags = _ref5.getEditorFeatureFlags;
           var _pluginConfig = pluginConfig(tableOptions),
             allowColumnResizing = _pluginConfig.allowColumnResizing;
           return allowColumnResizing ? createFlexiResizingPlugin(dispatch, {
@@ -134,9 +137,9 @@ var tablesPlugin = function tablesPlugin(options, api) {
         name: 'tableEditing',
         plugin: function plugin() {
           return tableEditing({
-            reportFixedTable: function reportFixedTable(_ref5) {
-              var tr = _ref5.tr,
-                reason = _ref5.reason;
+            reportFixedTable: function reportFixedTable(_ref6) {
+              var tr = _ref6.tr,
+                reason = _ref6.reason;
               editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
                 action: TABLE_ACTION.FIXED,
                 actionSubject: ACTION_SUBJECT.TABLE,
@@ -151,24 +154,24 @@ var tablesPlugin = function tablesPlugin(options, api) {
         }
       }, {
         name: 'tableStickyHeaders',
-        plugin: function plugin(_ref6) {
-          var dispatch = _ref6.dispatch,
-            eventDispatcher = _ref6.eventDispatcher;
+        plugin: function plugin(_ref7) {
+          var dispatch = _ref7.dispatch,
+            eventDispatcher = _ref7.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;
+        plugin: function plugin(_ref8) {
+          var dispatch = _ref8.dispatch;
           return createTableLocalIdPlugin(dispatch);
         }
       }, {
         name: 'tableWidth',
-        plugin: function plugin(_ref8) {
+        plugin: function plugin(_ref9) {
           var _options$fullWidthEna;
-          var dispatch = _ref8.dispatch;
+          var dispatch = _ref9.dispatch;
           return options !== null && options !== void 0 && options.tableResizingEnabled ? createTableWidthPlugin(dispatch, (_options$fullWidthEna = options === null || options === void 0 ? void 0 : options.fullWidthEnabled) !== null && _options$fullWidthEna !== void 0 ? _options$fullWidthEna : false) : undefined;
         }
       }, {
@@ -199,12 +202,12 @@ var tablesPlugin = function tablesPlugin(options, api) {
       }
       return plugins;
     },
-    contentComponent: function contentComponent(_ref9) {
-      var editorView = _ref9.editorView,
-        popupsMountPoint = _ref9.popupsMountPoint,
-        popupsBoundariesElement = _ref9.popupsBoundariesElement,
-        popupsScrollableElement = _ref9.popupsScrollableElement,
-        dispatchAnalyticsEvent = _ref9.dispatchAnalyticsEvent;
+    contentComponent: function contentComponent(_ref10) {
+      var editorView = _ref10.editorView,
+        popupsMountPoint = _ref10.popupsMountPoint,
+        popupsBoundariesElement = _ref10.popupsBoundariesElement,
+        popupsScrollableElement = _ref10.popupsScrollableElement,
+        dispatchAnalyticsEvent = _ref10.dispatchAnalyticsEvent;
       return /*#__PURE__*/React.createElement(ErrorBoundary, {
         component: ACTION_SUBJECT.TABLES_PLUGIN,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
@@ -216,28 +219,28 @@ var tablesPlugin = function tablesPlugin(options, api) {
           tableResizingPluginState: tableResizingPluginKey,
           stickyHeadersState: stickyHeadersPluginKey
         },
-        render: function render(_ref10) {
-          var resizingPluginState = _ref10.tableResizingPluginState,
-            stickyHeadersState = _ref10.stickyHeadersState,
-            tablePluginState = _ref10.tablePluginState,
-            tableWidthPluginState = _ref10.tableWidthPluginState;
+        render: function render(_ref11) {
+          var resizingPluginState = _ref11.tableResizingPluginState,
+            stickyHeadersState = _ref11.stickyHeadersState,
+            tablePluginState = _ref11.tablePluginState,
+            tableWidthPluginState = _ref11.tableWidthPluginState;
           var state = editorView.state;
           var isColumnResizing = resizingPluginState === null || resizingPluginState === void 0 ? void 0 : resizingPluginState.dragging;
           var isTableResizing = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.resizing;
           var isResizing = isColumnResizing || isTableResizing;
-          var _ref11 = tablePluginState,
-            tableNode = _ref11.tableNode,
-            tablePos = _ref11.tablePos,
-            targetCellPosition = _ref11.targetCellPosition,
-            isContextualMenuOpen = _ref11.isContextualMenuOpen,
-            layout = _ref11.layout,
-            tableRef = _ref11.tableRef,
-            pluginConfig = _ref11.pluginConfig,
-            insertColumnButtonIndex = _ref11.insertColumnButtonIndex,
-            insertRowButtonIndex = _ref11.insertRowButtonIndex,
-            isHeaderColumnEnabled = _ref11.isHeaderColumnEnabled,
-            isHeaderRowEnabled = _ref11.isHeaderRowEnabled,
-            tableWrapperTarget = _ref11.tableWrapperTarget;
+          var _ref12 = tablePluginState,
+            tableNode = _ref12.tableNode,
+            tablePos = _ref12.tablePos,
+            targetCellPosition = _ref12.targetCellPosition,
+            isContextualMenuOpen = _ref12.isContextualMenuOpen,
+            layout = _ref12.layout,
+            tableRef = _ref12.tableRef,
+            pluginConfig = _ref12.pluginConfig,
+            insertColumnButtonIndex = _ref12.insertColumnButtonIndex,
+            insertRowButtonIndex = _ref12.insertRowButtonIndex,
+            isHeaderColumnEnabled = _ref12.isHeaderColumnEnabled,
+            isHeaderRowEnabled = _ref12.isHeaderRowEnabled,
+            tableWrapperTarget = _ref12.tableWrapperTarget;
           var allowControls = pluginConfig.allowControls;
           var stickyHeader = stickyHeadersState ? findStickyHeaderForTable(stickyHeadersState, tablePos) : undefined;
           var LayoutContent = options && !options.tableResizingEnabled && isLayoutSupported(state) && options.breakoutEnabled ? /*#__PURE__*/React.createElement(LayoutButton, {
@@ -303,8 +306,8 @@ var tablesPlugin = function tablesPlugin(options, api) {
       }));
     },
     pluginsOptions: {
-      quickInsert: function quickInsert(_ref12) {
-        var formatMessage = _ref12.formatMessage;
+      quickInsert: function quickInsert(_ref13) {
+        var formatMessage = _ref13.formatMessage;
         return [{
           id: 'table',
           title: formatMessage(messages.table),

package/dist/esm/plugins/table/nodeviews/TableContainer.js

@@ -65,14 +65,14 @@ export var ResizableTableContainer = function ResizableTableContainer(_ref2) {
     }
   }, [lineLength]);
   var displayGuideline = useCallback(function (guidelines) {
-    var _pluginInjectionApi$d, _pluginInjectionApi$d2, _pluginInjectionApi$d3, _pluginInjectionApi$d4;
-    return (_pluginInjectionApi$d = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d2 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : (_pluginInjectionApi$d3 = _pluginInjectionApi$d2.guideline) === null || _pluginInjectionApi$d3 === void 0 ? void 0 : (_pluginInjectionApi$d4 = _pluginInjectionApi$d3.actions) === null || _pluginInjectionApi$d4 === void 0 ? void 0 : _pluginInjectionApi$d4.displayGuideline(editorView)({
+    var _pluginInjectionApi$g, _pluginInjectionApi$g2, _pluginInjectionApi$g3;
+    return (_pluginInjectionApi$g = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$g2 = pluginInjectionApi.guideline) === null || _pluginInjectionApi$g2 === void 0 ? void 0 : (_pluginInjectionApi$g3 = _pluginInjectionApi$g2.actions) === null || _pluginInjectionApi$g3 === void 0 ? void 0 : _pluginInjectionApi$g3.displayGuideline(editorView)({
       guidelines: guidelines
-    })) !== null && _pluginInjectionApi$d !== void 0 ? _pluginInjectionApi$d : false;
+    })) !== null && _pluginInjectionApi$g !== void 0 ? _pluginInjectionApi$g : false;
   }, [pluginInjectionApi, editorView]);
   var attachAnalyticsEvent = useCallback(function (payload) {
-    var _pluginInjectionApi$d5, _pluginInjectionApi$d6;
-    return pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d5 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d5 === void 0 ? void 0 : (_pluginInjectionApi$d6 = _pluginInjectionApi$d5.analytics) === null || _pluginInjectionApi$d6 === void 0 ? void 0 : _pluginInjectionApi$d6.actions.attachAnalyticsEvent(payload);
+    var _pluginInjectionApi$a;
+    return pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions.attachAnalyticsEvent(payload);
   }, [pluginInjectionApi]);
   var tableWidth = getTableContainerWidth(node);
   // 76 is currently an accepted padding value considering the spacing for resizer handle

package/dist/esm/plugins/table/nodeviews/TableResizer.js

@@ -4,9 +4,9 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 import rafSchd from 'raf-schd';
+import { defineMessages, useIntl } from 'react-intl-next';
 import { getGuidelinesWithHighlights } from '@atlaskit/editor-common/guideline';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
-import { resizerHandleShadowClassName } from '@atlaskit/editor-common/styles';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { COLUMN_MIN_WIDTH, getColgroupChildrenLength, previewScaleTable, scaleTable } from '../pm-plugins/table-resizing/utils';
@@ -15,6 +15,13 @@ import { TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE, TABLE_SNAP_GAP } from '
 import { generateResizedPayload, generateResizeFrameRatePayloads, useMeasureFramerate } from '../utils/analytics';
 import { defaultGuidelines } from '../utils/guidelines';
 import { defaultSnappingWidths, findClosestSnap } from '../utils/snapping';
+var messages = defineMessages({
+  resizeTable: {
+    id: 'fabric.editor.tables.resizeTable',
+    defaultMessage: 'Resize table',
+    description: 'Tooltip displayed on custom table width resize hande'
+  }
+});
 var handles = {
   right: true
 };
@@ -79,6 +86,8 @@ export var TableResizer = function TableResizer(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     snappingEnabled = _useState2[0],
     setSnappingEnabled = _useState2[1];
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
   var resizerMinWidth = getResizerMinWidth(node);
   var handleHeightSize = getResizerHandleHeight(tableRef);
   var _getPluginState = getPluginState(editorView.state),
@@ -177,22 +186,6 @@ export var TableResizer = function TableResizer(_ref) {
     scheduleResize.cancel();
     return newWidth;
   }, [updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure]);
-  var handleComponent = useMemo(function () {
-    return {
-      left: /*#__PURE__*/React.createElement("div", {
-        className: resizerHandleShadowClassName,
-        style: {
-          height: 'calc(100% - 24px)'
-        }
-      }),
-      right: /*#__PURE__*/React.createElement("div", {
-        className: resizerHandleShadowClassName,
-        style: {
-          height: 'calc(100% - 24px)'
-        }
-      })
-    };
-  }, []);
   return /*#__PURE__*/React.createElement(ResizerNext, {
     enable: handles,
     width: width,
@@ -210,7 +203,8 @@ export var TableResizer = function TableResizer(_ref) {
     handlePositioning: "adjacent",
     innerPadding: tableHandlePosition,
     isHandleVisible: ((_findTable = findTable((_editorView$state = editorView.state) === null || _editorView$state === void 0 ? void 0 : _editorView$state.selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos) === getPos(),
-    handleComponent: handleComponent,
-    appearance: isInDanger ? 'danger' : undefined
+    appearance: isInDanger ? 'danger' : undefined,
+    handleHighlight: "shadow",
+    handleTooltipContent: formatMessage(messages.resizeTable)
   }, children);
 };

package/dist/esm/plugins/table/pm-plugins/decorations/utils/column-resizing.js

@@ -7,7 +7,7 @@ var updateColumnResizeHandle = function updateColumnResizeHandle(columnResizesDe
   return function (_ref) {
     var decorationSet = _ref.decorationSet,
       tr = _ref.tr;
-    return updateDecorations(tr.doc, decorationSet, columnResizesDecorations, TableDecorations.COLUMN_RESIZING_HANDLE);
+    return updateDecorations(tr.doc, decorationSet, columnResizesDecorations, TableDecorations.COLUMN_RESIZING_HANDLE_WIDGET);
   };
 };
 var updateLastCellElement = function updateLastCellElement(lastCellElementsDecorations) {
@@ -17,13 +17,13 @@ var updateLastCellElement = function updateLastCellElement(lastCellElementsDecor
     return updateDecorations(tr.doc, decorationSet, lastCellElementsDecorations, TableDecorations.LAST_CELL_ELEMENT);
   };
 };
-export var buildColumnResizingDecorations = function buildColumnResizingDecorations(rowEndIndex, columnEndIndex) {
+export var buildColumnResizingDecorations = function buildColumnResizingDecorations(rowEndIndex, columnEndIndex, includeTooltip, getIntl) {
   return function (_ref3) {
     var tr = _ref3.tr,
       decorationSet = _ref3.decorationSet;
     var _ref4 = columnEndIndex < 0 ? emptyDecorations : createResizeHandleDecoration(tr, rowEndIndex, {
         right: columnEndIndex
-      }),
+      }, includeTooltip, getIntl),
       _ref5 = _slicedToArray(_ref4, 2),
       columnResizesDecorations = _ref5[0],
       lastCellElementsDecorations = _ref5[1];
@@ -32,4 +32,16 @@ export var buildColumnResizingDecorations = function buildColumnResizingDecorati
       tr: tr
     });
   };
+};
+export var clearColumnResizingDecorations = function clearColumnResizingDecorations() {
+  return function (_ref6) {
+    var tr = _ref6.tr,
+      decorationSet = _ref6.decorationSet;
+    var columnResizesDecorations = emptyDecorations[0],
+      lastCellElementsDecorations = emptyDecorations[1];
+    return composeDecorations([updateColumnResizeHandle(columnResizesDecorations), updateLastCellElement(lastCellElementsDecorations)])({
+      decorationSet: decorationSet,
+      tr: tr
+    });
+  };
 };

package/dist/esm/plugins/table/pm-plugins/decorations/utils/index.js

@@ -1,3 +1,3 @@
 export { buildColumnControlsDecorations, maybeUpdateColumnControlsSelectedDecoration } from './column-controls';
-export { buildColumnResizingDecorations } from './column-resizing';
+export { buildColumnResizingDecorations, clearColumnResizingDecorations } from './column-resizing';
 export { composeDecorations } from './compose-decorations';

package/dist/esm/plugins/table/pm-plugins/main.js

@@ -10,7 +10,7 @@ import { findParentDomRefOfType, findParentNodeOfType } from '@atlaskit/editor-p
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { addBoldInEmptyHeaderCells, clearHoverSelection, setTableRef } from '../commands';
-import { transformSliceRemoveCellBackgroundColor, transformSliceToAddTableHeaders, transformSliceToRemoveColumnsWidths } from '../commands/misc';
+import { removeResizeHandleDecorations, transformSliceRemoveCellBackgroundColor, transformSliceToAddTableHeaders, transformSliceToRemoveColumnsWidths } from '../commands/misc';
 import { handleBlur, handleClick, handleCut, handleFocus, handleMouseDown, handleMouseLeave, handleMouseMove, handleMouseOut, handleMouseOver, handleTripleClick, whenTableInFocus } from '../event-handlers';
 import { createTableView } from '../nodeviews/table';
 import TableCellNodeView from '../nodeviews/tableCell';
@@ -26,20 +26,22 @@ var isBreakoutEnabled;
 var isFullWidthModeEnabled;
 var wasFullWidthModeEnabled;
 var isTableResizingEnabled;
-export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, breakoutEnabled, fullWidthModeEnabled, tableResizingEnabled, previousFullWidthModeEnabled, editorAnalyticsAPI, pluginInjectionApi) {
+export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, breakoutEnabled, fullWidthModeEnabled, tableResizingEnabled, previousFullWidthModeEnabled, editorAnalyticsAPI, pluginInjectionApi) {
   var _window;
   isBreakoutEnabled = breakoutEnabled;
   isFullWidthModeEnabled = fullWidthModeEnabled;
   wasFullWidthModeEnabled = previousFullWidthModeEnabled;
   isTableResizingEnabled = tableResizingEnabled;
-  var state = createPluginState(dispatch, _objectSpread({
+  var state = createPluginState(dispatch, _objectSpread(_objectSpread({
     pluginConfig: pluginConfig,
     insertColumnButtonIndex: undefined,
     insertRowButtonIndex: undefined,
     isFullWidthModeEnabled: isFullWidthModeEnabled,
     isHeaderRowEnabled: !!pluginConfig.allowHeaderRow,
     isHeaderColumnEnabled: false
-  }, defaultTableSelection));
+  }, defaultTableSelection), {}, {
+    getIntl: getIntl
+  }));
   var elementContentRects = {};
   var observer = (_window = window) !== null && _window !== void 0 && _window.ResizeObserver ? new ResizeObserver(function (entries) {
     entries.forEach(function (entry) {
@@ -143,6 +145,8 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
                 addBoldInEmptyHeaderCells(tableCellHeader)(state, dispatch);
               }
             }
+          } else if (pluginState.isResizeHandleWidgetAdded) {
+            removeResizeHandleDecorations()(state, dispatch);
           }
         },
         destroy: function destroy() {

package/dist/esm/plugins/table/pm-plugins/table-resizing/event-handlers.js

@@ -5,6 +5,7 @@ import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { updateResizeHandleDecorations } from '../../commands/misc';
 import { updateColumnWidths } from '../../transforms';
 import { getSelectedColumnIndexes, updateResizeHandles } from '../../utils';
 import { evenColumns, setDragging, stopResizing } from './commands';
@@ -58,6 +59,10 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
     startX: event.clientX,
     startWidth: width
   })(state, dispatch);
+
+  // When we start resizing a column we need to ensure the underlying tooltip is removed from the decoration to avoid
+  // unnecessary tooltips being displayed during drag.
+  updateResizeHandleDecorations(undefined, undefined, false)(state, dispatch);
   function finish(event) {
     window.removeEventListener('mouseup', finish);
     window.removeEventListener('mousemove', move);

package/dist/esm/plugins/table/pm-plugins/table-resizing/utils/scale-table.js

@@ -10,6 +10,7 @@ import { getLayoutSize } from '../utils/misc';
 import { reduceSpace } from '../utils/resize-logic';
 import { adjustColumnsWidths, getResizeState, getTotalWidth, updateColgroup } from '../utils/resize-state';
 import { hasTableBeenResized, insertColgroupFromNode } from './colgroup';
+import { syncStickyRowToTable } from './dom';
 // Base function to trigger the actual scale on a table node.
 // Will only resize/scale if a table has been previously resized.
 export var scale = function scale(tableRef, options, domAtPos) {
@@ -112,6 +113,7 @@ export var previewScaleTable = function previewScaleTable(tableRef, options, dom
     tableRef.style.width = "".concat(width, "px");
   }
   if (!hasTableBeenResized(node)) {
+    syncStickyRowToTable(tableRef);
     return;
   }
   var resizeState = parentWidth ? scaleWithParent(tableRef, parentWidth, node, start, domAtPos) : scale(tableRef, options, domAtPos);

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

@@ -58,10 +58,34 @@ export default (function (pluginState, action) {
         resizeHandleRowIndex: undefined
       });
     case 'ADD_RESIZE_HANDLE_DECORATIONS':
-      if (action.data.resizeHandleColumnIndex === pluginState.resizeHandleColumnIndex && action.data.resizeHandleRowIndex === pluginState.resizeHandleRowIndex) {
+      if (action.data.resizeHandleColumnIndex === pluginState.resizeHandleColumnIndex && action.data.resizeHandleRowIndex === pluginState.resizeHandleRowIndex && action.data.resizeHandleIncludeTooltip === pluginState.resizeHandleIncludeTooltip) {
         return pluginState;
       }
-      return _objectSpread(_objectSpread({}, pluginState), action.data);
+      return _objectSpread(_objectSpread(_objectSpread({}, pluginState), action.data), {}, {
+        isResizeHandleWidgetAdded: true
+      });
+    case 'UPDATE_RESIZE_HANDLE_DECORATIONS':
+      var _action$data = action.data,
+        resizeHandleColumnIndex = _action$data.resizeHandleColumnIndex,
+        resizeHandleRowIndex = _action$data.resizeHandleRowIndex,
+        resizeHandleIncludeTooltip = _action$data.resizeHandleIncludeTooltip;
+      if ((resizeHandleColumnIndex === pluginState.resizeHandleColumnIndex || !Number.isFinite(resizeHandleColumnIndex)) && (resizeHandleRowIndex === pluginState.resizeHandleRowIndex || !Number.isFinite(resizeHandleRowIndex)) && (resizeHandleIncludeTooltip === pluginState.resizeHandleIncludeTooltip || resizeHandleIncludeTooltip === undefined)) {
+        return pluginState;
+      }
+      return _objectSpread(_objectSpread({}, pluginState), {}, {
+        resizeHandleColumnIndex: resizeHandleColumnIndex !== null && resizeHandleColumnIndex !== void 0 ? resizeHandleColumnIndex : pluginState.resizeHandleColumnIndex,
+        resizeHandleRowIndex: resizeHandleRowIndex !== null && resizeHandleRowIndex !== void 0 ? resizeHandleRowIndex : pluginState.resizeHandleRowIndex,
+        resizeHandleIncludeTooltip: resizeHandleIncludeTooltip !== null && resizeHandleIncludeTooltip !== void 0 ? resizeHandleIncludeTooltip : pluginState.resizeHandleIncludeTooltip
+      });
+    case 'REMOVE_RESIZE_HANDLE_DECORATIONS':
+      if (!pluginState.isResizeHandleWidgetAdded) {
+        return pluginState;
+      }
+      return _objectSpread(_objectSpread(_objectSpread({}, pluginState), action.data), {}, {
+        resizeHandleColumnIndex: undefined,
+        resizeHandleRowIndex: undefined,
+        isResizeHandleWidgetAdded: false
+      });
     case 'SET_TABLE_REF':
     case 'HOVER_ROWS':
     case 'HOVER_COLUMNS':