@atlaskit/editor-plugin-table 2.10.7 → 2.11.0

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

@@ -65,10 +65,34 @@ var _default = function _default(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':

package/dist/cjs/plugins/table/types.js

@@ -46,6 +46,7 @@ var TableDecorations = /*#__PURE__*/function (TableDecorations) {
   TableDecorations["COLUMN_CONTROLS_DECORATIONS"] = "COLUMN_CONTROLS_DECORATIONS";
   TableDecorations["COLUMN_SELECTED"] = "COLUMN_SELECTED";
   TableDecorations["COLUMN_RESIZING_HANDLE"] = "COLUMN_RESIZING_HANDLE";
+  TableDecorations["COLUMN_RESIZING_HANDLE_WIDGET"] = "COLUMN_RESIZING_HANDLE_WIDGET";
   TableDecorations["COLUMN_RESIZING_HANDLE_LINE"] = "COLUMN_RESIZING_HANDLE_LINE";
   TableDecorations["LAST_CELL_ELEMENT"] = "LAST_CELL_ELEMENT";
   return TableDecorations;

package/dist/cjs/plugins/table/ui/ColumnResizeWidget/index.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ColumnResizeWidget = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _types = require("../../types");
+var _messages = _interopRequireDefault(require("../messages"));
+/** @jsx jsx */
+
+var ColumnResizeWidget = function ColumnResizeWidget(_ref) {
+  var startIndex = _ref.startIndex,
+    endIndex = _ref.endIndex,
+    includeTooltip = _ref.includeTooltip;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  if (!includeTooltip) {
+    return (0, _react2.jsx)("div", {
+      className: _types.TableCssClassName.RESIZE_HANDLE_DECORATION,
+      "data-start-index": startIndex,
+      "data-end-index": endIndex
+    });
+  }
+  return (0, _react2.jsx)(_tooltip.default, {
+    content: formatMessage(_messages.default.adjustColumns),
+    hideTooltipOnClick: true,
+    hideTooltipOnMouseDown: true,
+    position: "mouse",
+    mousePosition: "auto-start"
+  }, function (tooltipProps) {
+    return (0, _react2.jsx)("div", (0, _extends2.default)({
+      className: _types.TableCssClassName.RESIZE_HANDLE_DECORATION,
+      "data-start-index": startIndex,
+      "data-end-index": endIndex
+    }, tooltipProps));
+  });
+};
+exports.ColumnResizeWidget = ColumnResizeWidget;

package/dist/cjs/plugins/table/ui/messages.js

@@ -60,6 +60,11 @@ var _default = (0, _reactIntlNext.defineMessages)({
     id: 'fabric.editor.extension.sourceNoTitledName',
     defaultMessage: 'this element',
     description: 'The current element without preset name been selected'
+  },
+  adjustColumns: {
+    id: 'fabric.editor.tables.adjustColumn',
+    defaultMessage: 'Adjust column',
+    description: 'Tooltip displayed on table column resize handle'
   }
 });
 exports.default = _default;

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

@@ -6,11 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.updateDecorations = exports.findControlsHoverDecoration = exports.findColumnControlSelectedDecoration = exports.createResizeHandleDecoration = exports.createControlsHoverDecoration = exports.createColumnSelectedDecoration = exports.createColumnLineResize = exports.createColumnControlsDecoration = exports.createCellHoverDecoration = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _reactIntlNext = require("react-intl-next");
 var _utils = require("@atlaskit/editor-common/utils");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _utils2 = require("@atlaskit/editor-tables/utils");
 var _types = require("../types");
+var _ColumnResizeWidget = require("../ui/ColumnResizeWidget");
 // @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
 
 var filterDecorationByKey = function filterDecorationByKey(key, decorationSet) {
@@ -270,6 +274,8 @@ var makeArray = function makeArray(n) {
  *   hence the second media will receive this class `ClassName.LAST_ITEM_IN_CELL`
  */
 var createResizeHandleDecoration = function createResizeHandleDecoration(tr, rowIndexTarget, columnEndIndexTarget) {
+  var includeTooltip = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  var getIntl = arguments.length > 4 ? arguments[4] : undefined;
   var emptyResult = [[], []];
   var table = (0, _utils2.findTable)(tr.selection);
   if (!table || !table.node) {
@@ -283,12 +289,19 @@ var createResizeHandleDecoration = function createResizeHandleDecoration(tr, row
     var position = cellPos + cellNode.nodeSize - 1;
     return _view.Decoration.widget(position, function () {
       var element = document.createElement('div');
-      element.classList.add(_types.TableCssClassName.RESIZE_HANDLE_DECORATION);
-      element.dataset.startIndex = "".concat(cellColumnPositioning.left);
-      element.dataset.endIndex = "".concat(cellColumnPositioning.right);
+      _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_reactIntlNext.RawIntlProvider, {
+        value: getIntl()
+      }, /*#__PURE__*/(0, _react.createElement)(_ColumnResizeWidget.ColumnResizeWidget, {
+        startIndex: cellColumnPositioning.left,
+        endIndex: cellColumnPositioning.right,
+        includeTooltip: includeTooltip
+      })), element);
       return element;
     }, {
-      key: "".concat(_types.TableDecorations.COLUMN_RESIZING_HANDLE, "_").concat(rowIndex, "_").concat(columnIndex)
+      key: "".concat(_types.TableDecorations.COLUMN_RESIZING_HANDLE_WIDGET, "_").concat(rowIndex, "_").concat(columnIndex, "_").concat(includeTooltip ? 'with' : 'no', "-tooltip"),
+      destroy: function destroy(node) {
+        _reactDom.default.unmountComponentAtNode(node);
+      }
     });
   };
   var createLastCellElementDecoration = function createLastCellElementDecoration(cellColumnPositioning, cellPos, cellNode) {

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

@@ -6,7 +6,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';
@@ -321,12 +321,13 @@ export const showInsertRowButton = rowIndex => createCommand(_ => rowIndex > -1
 export const hideInsertColumnOrRowButton = () => createCommand({
   type: 'HIDE_INSERT_COLUMN_OR_ROW_BUTTON'
 }, tr => tr.setMeta('addToHistory', false));
-export const addResizeHandleDecorations = (rowIndex, columnIndex) => createCommand(state => {
+export const addResizeHandleDecorations = (rowIndex, columnIndex, includeTooltip) => createCommand(state => {
   const tableNode = findTable(state.selection);
   const {
     pluginConfig: {
       allowColumnResizing
-    }
+    },
+    getIntl
   } = getPluginState(state);
   if (!tableNode || !allowColumnResizing) {
     return false;
@@ -334,15 +335,58 @@ export const addResizeHandleDecorations = (rowIndex, columnIndex) => createComma
   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,
+      resizeHandleIncludeTooltip: includeTooltip
+    }
+  };
+}, tr => tr.setMeta('addToHistory', false));
+export const updateResizeHandleDecorations = (rowIndex, columnIndex, includeTooltip) => createCommand(state => {
+  const tableNode = findTable(state.selection);
+  const {
+    resizeHandleRowIndex,
+    resizeHandleColumnIndex,
+    resizeHandleIncludeTooltip,
+    pluginConfig: {
+      allowColumnResizing
+    },
+    getIntl
+  } = getPluginState(state);
+  if (!tableNode || !allowColumnResizing) {
+    return false;
+  }
+  const resolvedRowIndex = rowIndex !== null && rowIndex !== void 0 ? rowIndex : resizeHandleRowIndex;
+  const resolvedColumnIndex = columnIndex !== null && columnIndex !== void 0 ? columnIndex : resizeHandleColumnIndex;
+  const 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
+      resizeHandleColumnIndex: columnIndex,
+      resizeHandleIncludeTooltip: includeTooltip
     }
   };
 }, tr => tr.setMeta('addToHistory', false));
+export const removeResizeHandleDecorations = () => createCommand(state => ({
+  type: 'REMOVE_RESIZE_HANDLE_DECORATIONS',
+  data: {
+    decorationSet: clearColumnResizingDecorations()({
+      tr: state.tr,
+      decorationSet: getDecorations(state)
+    })
+  }
+}), tr => tr.setMeta('addToHistory', false));
 export const autoSizeTable = (view, node, table, basePos, opts) => {
   if (typeof basePos !== 'number') {
     return false;

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

@@ -236,7 +236,7 @@ export const handleMouseMove = (view, event, elementContentRects) => {
           target: element,
           columnEndIndexTarget
         })) {
-          return addResizeHandleDecorations(rowIndexTarget, columnEndIndexTarget)(state, dispatch);
+          return addResizeHandleDecorations(rowIndexTarget, columnEndIndexTarget, true)(state, dispatch);
         }
       }
     }
@@ -321,11 +321,8 @@ export const handleCut = (oldTr, oldState, newState, editorAnalyticsAPI) => {
   return tr;
 };
 export const whenTableInFocus = (eventHandler, elementContentRects) => (view, mouseEvent) => {
-  const tableResizePluginState = getResizePluginState(view.state);
-  const tablePluginState = getPluginState(view.state);
-  const isDragging = tableResizePluginState && !!tableResizePluginState.dragging;
-  const hasTableNode = tablePluginState && tablePluginState.tableNode;
-  if (!hasTableNode || isDragging) {
+  var _getPluginState, _getResizePluginState;
+  if (!((_getPluginState = getPluginState(view.state)) !== null && _getPluginState !== void 0 && _getPluginState.tableNode) || !!((_getResizePluginState = getResizePluginState(view.state)) !== null && _getResizePluginState !== void 0 && _getResizePluginState.dragging)) {
     return false;
   }
   return eventHandler(view, mouseEvent, elementContentRects);

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

@@ -29,28 +29,31 @@ import FloatingInsertButton from './ui/FloatingInsertButton';
 import LayoutButton from './ui/LayoutButton';
 import { isLayoutSupported } from './utils';
 const defaultGetEditorFeatureFlags = () => ({});
-const tablesPlugin = (options, api) => {
-  var _api$dependencies$ana;
+const tablesPlugin = ({
+  config: options,
+  api
+}) => {
+  var _api$analytics;
   const editorViewRef = {
     current: null
   };
   const defaultGetEditorContainerWidth = () => {
-    var _document$body$offset, _document, _document$body, _api$dependencies$wid;
+    var _document$body$offset, _document, _document$body, _api$width$sharedStat;
     const 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;
   };
-  const 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;
+  const 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: analyticsPayload => (state, dispatch) => {
-        var _api$dependencies$con, _api$dependencies, _api$dependencies$con2, _api$dependencies$con3;
+        var _api$contentInsertion, _api$contentInsertion2, _api$contentInsertion3;
         const 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,
           dispatch,
           node,
@@ -58,7 +61,7 @@ const tablesPlugin = (options, api) => {
             selectNodeInserted: false,
             analyticsPayload
           }
-        })) !== null && _api$dependencies$con !== void 0 ? _api$dependencies$con : false;
+        })) !== null && _api$contentInsertion !== void 0 ? _api$contentInsertion : false;
       }
     },
     nodes() {
@@ -84,7 +87,8 @@ const tablesPlugin = (options, api) => {
           dispatchAnalyticsEvent,
           dispatch,
           portalProviderAPI,
-          eventDispatcher
+          eventDispatcher,
+          getIntl
         }) => {
           const {
             fullWidthEnabled,
@@ -94,7 +98,7 @@ const tablesPlugin = (options, api) => {
             tableOptions,
             getEditorFeatureFlags
           } = options || {};
-          return createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, breakoutEnabled, fullWidthEnabled, tableResizingEnabled, wasFullWidthEnabled, editorAnalyticsAPI, api);
+          return createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, getIntl, breakoutEnabled, fullWidthEnabled, tableResizingEnabled, wasFullWidthEnabled, editorAnalyticsAPI, api);
         }
       }, {
         name: 'tablePMColResizing',

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

@@ -67,14 +67,14 @@ export const ResizableTableContainer = ({
     }
   }, [lineLength]);
   const displayGuideline = useCallback(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
-    })) !== null && _pluginInjectionApi$d !== void 0 ? _pluginInjectionApi$d : false;
+    })) !== null && _pluginInjectionApi$g !== void 0 ? _pluginInjectionApi$g : false;
   }, [pluginInjectionApi, editorView]);
   const attachAnalyticsEvent = useCallback(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]);
   const tableWidth = getTableContainerWidth(node);
   // 76 is currently an accepted padding value considering the spacing for resizer handle

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

@@ -1,8 +1,8 @@
 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';
@@ -11,6 +11,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';
+const messages = defineMessages({
+  resizeTable: {
+    id: 'fabric.editor.tables.resizeTable',
+    defaultMessage: 'Resize table',
+    description: 'Tooltip displayed on custom table width resize hande'
+  }
+});
 const handles = {
   right: true
 };
@@ -73,6 +80,9 @@ export const TableResizer = ({
   var _findTable, _editorView$state;
   const currentGap = useRef(0);
   const [snappingEnabled, setSnappingEnabled] = useState(false);
+  const {
+    formatMessage
+  } = useIntl();
   const resizerMinWidth = getResizerMinWidth(node);
   const handleHeightSize = getResizerHandleHeight(tableRef);
   const {
@@ -177,20 +187,6 @@ export const TableResizer = ({
     scheduleResize.cancel();
     return newWidth;
   }, [updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure]);
-  const handleComponent = useMemo(() => ({
-    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,
@@ -208,7 +204,8 @@ export const TableResizer = ({
     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/es2019/plugins/table/pm-plugins/decorations/utils/column-resizing.js

@@ -5,18 +5,28 @@ const emptyDecorations = [[], []];
 const updateColumnResizeHandle = columnResizesDecorations => ({
   decorationSet,
   tr
-}) => updateDecorations(tr.doc, decorationSet, columnResizesDecorations, TableDecorations.COLUMN_RESIZING_HANDLE);
+}) => updateDecorations(tr.doc, decorationSet, columnResizesDecorations, TableDecorations.COLUMN_RESIZING_HANDLE_WIDGET);
 const updateLastCellElement = lastCellElementsDecorations => ({
   decorationSet,
   tr
 }) => updateDecorations(tr.doc, decorationSet, lastCellElementsDecorations, TableDecorations.LAST_CELL_ELEMENT);
-export const buildColumnResizingDecorations = (rowEndIndex, columnEndIndex) => ({
+export const buildColumnResizingDecorations = (rowEndIndex, columnEndIndex, includeTooltip, getIntl) => ({
   tr,
   decorationSet
 }) => {
   const [columnResizesDecorations, lastCellElementsDecorations] = columnEndIndex < 0 ? emptyDecorations : createResizeHandleDecoration(tr, rowEndIndex, {
     right: columnEndIndex
+  }, includeTooltip, getIntl);
+  return composeDecorations([updateColumnResizeHandle(columnResizesDecorations), updateLastCellElement(lastCellElementsDecorations)])({
+    decorationSet,
+    tr
   });
+};
+export const clearColumnResizingDecorations = () => ({
+  tr,
+  decorationSet
+}) => {
+  const [columnResizesDecorations, lastCellElementsDecorations] = emptyDecorations;
   return composeDecorations([updateColumnResizeHandle(columnResizesDecorations), updateLastCellElement(lastCellElementsDecorations)])({
     decorationSet,
     tr

package/dist/es2019/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/es2019/plugins/table/pm-plugins/main.js

@@ -7,7 +7,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';
@@ -23,7 +23,7 @@ let isBreakoutEnabled;
 let isFullWidthModeEnabled;
 let wasFullWidthModeEnabled;
 let isTableResizingEnabled;
-export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, breakoutEnabled, fullWidthModeEnabled, tableResizingEnabled, previousFullWidthModeEnabled, editorAnalyticsAPI, pluginInjectionApi) => {
+export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, breakoutEnabled, fullWidthModeEnabled, tableResizingEnabled, previousFullWidthModeEnabled, editorAnalyticsAPI, pluginInjectionApi) => {
   var _window;
   isBreakoutEnabled = breakoutEnabled;
   isFullWidthModeEnabled = fullWidthModeEnabled;
@@ -36,7 +36,8 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
     isFullWidthModeEnabled,
     isHeaderRowEnabled: !!pluginConfig.allowHeaderRow,
     isHeaderColumnEnabled: false,
-    ...defaultTableSelection
+    ...defaultTableSelection,
+    getIntl
   });
   let elementContentRects = {};
   const observer = (_window = window) !== null && _window !== void 0 && _window.ResizeObserver ? new ResizeObserver(entries => {
@@ -136,6 +137,8 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
                 addBoldInEmptyHeaderCells(tableCellHeader)(state, dispatch);
               }
             }
+          } else if (pluginState.isResizeHandleWidgetAdded) {
+            removeResizeHandleDecorations()(state, dispatch);
           }
         },
         destroy: () => {

package/dist/es2019/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';
@@ -60,6 +61,10 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
     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/es2019/plugins/table/pm-plugins/table-resizing/utils/scale-table.js

@@ -7,6 +7,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 const scale = (tableRef, options, domAtPos) => {
@@ -117,6 +118,7 @@ export const previewScaleTable = (tableRef, options, domAtPos) => {
     tableRef.style.width = `${width}px`;
   }
   if (!hasTableBeenResized(node)) {
+    syncStickyRowToTable(tableRef);
     return;
   }
   const resizeState = parentWidth ? scaleWithParent(tableRef, parentWidth, node, start, domAtPos) : scale(tableRef, options, domAtPos);

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

@@ -76,12 +76,39 @@ export default ((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 {
         ...pluginState,
-        ...action.data
+        ...action.data,
+        isResizeHandleWidgetAdded: true
+      };
+    case 'UPDATE_RESIZE_HANDLE_DECORATIONS':
+      const {
+        resizeHandleColumnIndex,
+        resizeHandleRowIndex,
+        resizeHandleIncludeTooltip
+      } = action.data;
+      if ((resizeHandleColumnIndex === pluginState.resizeHandleColumnIndex || !Number.isFinite(resizeHandleColumnIndex)) && (resizeHandleRowIndex === pluginState.resizeHandleRowIndex || !Number.isFinite(resizeHandleRowIndex)) && (resizeHandleIncludeTooltip === pluginState.resizeHandleIncludeTooltip || resizeHandleIncludeTooltip === undefined)) {
+        return pluginState;
+      }
+      return {
+        ...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 {
+        ...pluginState,
+        ...action.data,
+        resizeHandleColumnIndex: undefined,
+        resizeHandleRowIndex: undefined,
+        isResizeHandleWidgetAdded: false
       };
     case 'SET_TABLE_REF':
     case 'HOVER_ROWS':

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

@@ -36,6 +36,7 @@ export let TableDecorations = /*#__PURE__*/function (TableDecorations) {
   TableDecorations["COLUMN_CONTROLS_DECORATIONS"] = "COLUMN_CONTROLS_DECORATIONS";
   TableDecorations["COLUMN_SELECTED"] = "COLUMN_SELECTED";
   TableDecorations["COLUMN_RESIZING_HANDLE"] = "COLUMN_RESIZING_HANDLE";
+  TableDecorations["COLUMN_RESIZING_HANDLE_WIDGET"] = "COLUMN_RESIZING_HANDLE_WIDGET";
   TableDecorations["COLUMN_RESIZING_HANDLE_LINE"] = "COLUMN_RESIZING_HANDLE_LINE";
   TableDecorations["LAST_CELL_ELEMENT"] = "LAST_CELL_ELEMENT";
   return TableDecorations;

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

@@ -0,0 +1,35 @@
+import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import { useIntl } from 'react-intl-next';
+import Tooltip from '@atlaskit/tooltip';
+import { TableCssClassName } from '../../types';
+import messages from '../messages';
+export const ColumnResizeWidget = ({
+  startIndex,
+  endIndex,
+  includeTooltip
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  if (!includeTooltip) {
+    return jsx("div", {
+      className: TableCssClassName.RESIZE_HANDLE_DECORATION,
+      "data-start-index": startIndex,
+      "data-end-index": endIndex
+    });
+  }
+  return jsx(Tooltip, {
+    content: formatMessage(messages.adjustColumns),
+    hideTooltipOnClick: true,
+    hideTooltipOnMouseDown: true,
+    position: "mouse",
+    mousePosition: "auto-start"
+  }, tooltipProps => jsx("div", _extends({
+    className: TableCssClassName.RESIZE_HANDLE_DECORATION,
+    "data-start-index": startIndex,
+    "data-end-index": endIndex
+  }, tooltipProps)));
+};

package/dist/es2019/plugins/table/ui/messages.js

@@ -54,5 +54,10 @@ export default defineMessages({
     id: 'fabric.editor.extension.sourceNoTitledName',
     defaultMessage: 'this element',
     description: 'The current element without preset name been selected'
+  },
+  adjustColumns: {
+    id: 'fabric.editor.tables.adjustColumn',
+    defaultMessage: 'Adjust column',
+    description: 'Tooltip displayed on table column resize handle'
   }
 });