@atlaskit/editor-plugin-table 2.10.8 → 2.11.0

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':

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

@@ -39,6 +39,7 @@ export 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/esm/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 var ColumnResizeWidget = function ColumnResizeWidget(_ref) {
+  var startIndex = _ref.startIndex,
+    endIndex = _ref.endIndex,
+    includeTooltip = _ref.includeTooltip;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  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"
+  }, function (tooltipProps) {
+    return jsx("div", _extends({
+      className: TableCssClassName.RESIZE_HANDLE_DECORATION,
+      "data-start-index": startIndex,
+      "data-end-index": endIndex
+    }, tooltipProps));
+  });
+};

package/dist/esm/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'
   }
 });

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

@@ -1,4 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+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
@@ -7,6 +10,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';
 var filterDecorationByKey = function filterDecorationByKey(key, decorationSet) {
   return decorationSet.find(undefined, undefined, function (spec) {
     return spec.key.indexOf(key) > -1;
@@ -257,6 +261,8 @@ var makeArray = function makeArray(n) {
  *   hence the second media will receive this class `ClassName.LAST_ITEM_IN_CELL`
  */
 export 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 = findTable(tr.selection);
   if (!table || !table.node) {
@@ -270,12 +276,19 @@ export var createResizeHandleDecoration = function createResizeHandleDecoration(
     var position = cellPos + cellNode.nodeSize - 1;
     return Decoration.widget(position, function () {
       var element = document.createElement('div');
-      element.classList.add(ClassName.RESIZE_HANDLE_DECORATION);
-      element.dataset.startIndex = "".concat(cellColumnPositioning.left);
-      element.dataset.endIndex = "".concat(cellColumnPositioning.right);
+      ReactDOM.render( /*#__PURE__*/createElement(RawIntlProvider, {
+        value: getIntl()
+      }, /*#__PURE__*/createElement(ColumnResizeWidget, {
+        startIndex: cellColumnPositioning.left,
+        endIndex: cellColumnPositioning.right,
+        includeTooltip: includeTooltip
+      })), element);
       return element;
     }, {
-      key: "".concat(TableDecorations.COLUMN_RESIZING_HANDLE, "_").concat(rowIndex, "_").concat(columnIndex)
+      key: "".concat(TableDecorations.COLUMN_RESIZING_HANDLE_WIDGET, "_").concat(rowIndex, "_").concat(columnIndex, "_").concat(includeTooltip ? 'with' : 'no', "-tooltip"),
+      destroy: function destroy(node) {
+        ReactDOM.unmountComponentAtNode(node);
+      }
     });
   };
   var createLastCellElementDecoration = function createLastCellElementDecoration(cellColumnPositioning, cellPos, cellNode) {

package/dist/types/plugins/table/commands/misc.d.ts

@@ -1,8 +1,8 @@
-import { Command } from '@atlaskit/editor-common/types';
-import { Node as PMNode, Schema, Slice } from '@atlaskit/editor-prosemirror/model';
-import { Transaction } from '@atlaskit/editor-prosemirror/state';
-import { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { Command } from '@atlaskit/editor-common/types';
+import type { Node as PMNode, Schema, Slice } from '@atlaskit/editor-prosemirror/model';
+import type { Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 export declare const setEditorFocus: (editorHasFocus: boolean) => Command;
 export declare const setTableRef: (ref?: HTMLTableElement) => Command;
 export declare const setCellAttr: (name: string, value: any) => Command;
@@ -20,7 +20,9 @@ export declare const selectRow: (row: number, expand?: boolean) => Command;
 export declare const showInsertColumnButton: (columnIndex: number) => Command;
 export declare const showInsertRowButton: (rowIndex: number) => Command;
 export declare const hideInsertColumnOrRowButton: () => Command;
-export declare const addResizeHandleDecorations: (rowIndex: number, columnIndex: number) => Command;
+export declare const addResizeHandleDecorations: (rowIndex: number, columnIndex: number, includeTooltip: boolean) => Command;
+export declare const updateResizeHandleDecorations: (rowIndex?: number, columnIndex?: number, includeTooltip?: boolean) => Command;
+export declare const removeResizeHandleDecorations: () => Command;
 export declare const autoSizeTable: (view: EditorView, node: PMNode, table: HTMLTableElement, basePos: number | undefined, opts: {
     containerWidth: number;
 }) => boolean;

package/dist/types/plugins/table/event-handlers.d.ts

@@ -1,7 +1,7 @@
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { ElementContentRects } from './types';
+import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { ElementContentRects } from './types';
 export declare const handleBlur: (view: EditorView, event: Event) => boolean;
 export declare const handleFocus: (view: EditorView, event: Event) => boolean;
 export declare const handleClick: (view: EditorView, event: Event) => boolean;

package/dist/types/plugins/table/pm-plugins/decorations/utils/column-resizing.d.ts

@@ -1,2 +1,4 @@
-import { DecorationTransformer } from './types';
-export declare const buildColumnResizingDecorations: (rowEndIndex: number, columnEndIndex: number) => DecorationTransformer;
+import type { IntlShape } from 'react-intl-next';
+import type { DecorationTransformer } from './types';
+export declare const buildColumnResizingDecorations: (rowEndIndex: number, columnEndIndex: number, includeTooltip: boolean, getIntl: () => IntlShape) => DecorationTransformer;
+export declare const clearColumnResizingDecorations: () => DecorationTransformer;

package/dist/types/plugins/table/pm-plugins/decorations/utils/index.d.ts

@@ -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/types/plugins/table/pm-plugins/main.d.ts

@@ -1,7 +1,8 @@
+import type { IntlShape } from 'react-intl-next';
 import type { DispatchAnalyticsEvent, EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { Dispatch, EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import type { PortalProviderAPI } from '@atlaskit/editor-common/portal-provider';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { PluginConfig, PluginInjectionAPI } from '../types';
-export declare const createPlugin: (dispatchAnalyticsEvent: DispatchAnalyticsEvent, dispatch: Dispatch, portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, pluginConfig: PluginConfig, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, breakoutEnabled?: boolean, fullWidthModeEnabled?: boolean, tableResizingEnabled?: boolean, previousFullWidthModeEnabled?: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI, pluginInjectionApi?: PluginInjectionAPI) => SafePlugin<import("../types").TablePluginState>;
+export declare const createPlugin: (dispatchAnalyticsEvent: DispatchAnalyticsEvent, dispatch: Dispatch, portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, pluginConfig: PluginConfig, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, getIntl: () => IntlShape, breakoutEnabled?: boolean, fullWidthModeEnabled?: boolean, tableResizingEnabled?: boolean, previousFullWidthModeEnabled?: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI, pluginInjectionApi?: PluginInjectionAPI) => SafePlugin<import("../types").TablePluginState>;

package/dist/types/plugins/table/pm-plugins/table-resizing/plugin.d.ts

@@ -1,6 +1,6 @@
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
+import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
-import { ColumnResizingPluginState } from '../../types';
+import type { ColumnResizingPluginState } from '../../types';
 export declare function createPlugin(dispatch: Dispatch<ColumnResizingPluginState>, { lastColumnResizable }: ColumnResizingPluginState, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, editorAnalyticsAPI?: EditorAnalyticsAPI): SafePlugin<ColumnResizingPluginState>;

package/dist/types/plugins/table/pm-plugins/table-resizing/utils/scale-table.d.ts

@@ -1,7 +1,7 @@
-import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import { Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { DomAtPos } from '@atlaskit/editor-prosemirror/utils';
-import { ResizeState } from '../utils/types';
+import type { ResizeState } from '../utils/types';
 export interface ScaleOptions {
     node: PMNode;
     prevNode: PMNode;

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

@@ -1,3 +1,3 @@
-import { TablePluginAction, TablePluginState } from './types';
+import type { TablePluginAction, TablePluginState } from './types';
 declare const _default: (pluginState: TablePluginState, action: TablePluginAction) => TablePluginState;
 export default _default;

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

@@ -69,10 +69,13 @@ export interface TablePluginState {
     isFullWidthModeEnabled?: boolean;
     layout?: TableLayout;
     ordering?: TableColumnOrdering;
+    isResizeHandleWidgetAdded?: boolean;
     resizeHandleRowIndex?: number;
     resizeHandleColumnIndex?: number;
+    resizeHandleIncludeTooltip?: boolean;
     isTableCollapsed?: boolean;
     canCollapseTable?: boolean;
+    getIntl: () => IntlShape;
 }
 export type TablePluginAction = {
     type: 'SET_EDITOR_FOCUS';
@@ -131,6 +134,20 @@ export type TablePluginAction = {
         decorationSet: DecorationSet;
         resizeHandleRowIndex: number;
         resizeHandleColumnIndex: number;
+        resizeHandleIncludeTooltip: boolean;
+    };
+} | {
+    type: 'UPDATE_RESIZE_HANDLE_DECORATIONS';
+    data: {
+        decorationSet: DecorationSet;
+        resizeHandleRowIndex: number | undefined;
+        resizeHandleColumnIndex: number | undefined;
+        resizeHandleIncludeTooltip: boolean | undefined;
+    };
+} | {
+    type: 'REMOVE_RESIZE_HANDLE_DECORATIONS';
+    data: {
+        decorationSet: DecorationSet;
     };
 } | {
     type: 'CLEAR_HOVER_SELECTION';
@@ -212,6 +229,7 @@ export declare enum TableDecorations {
     COLUMN_CONTROLS_DECORATIONS = "COLUMN_CONTROLS_DECORATIONS",
     COLUMN_SELECTED = "COLUMN_SELECTED",
     COLUMN_RESIZING_HANDLE = "COLUMN_RESIZING_HANDLE",
+    COLUMN_RESIZING_HANDLE_WIDGET = "COLUMN_RESIZING_HANDLE_WIDGET",
     COLUMN_RESIZING_HANDLE_LINE = "COLUMN_RESIZING_HANDLE_LINE",
     LAST_CELL_ELEMENT = "LAST_CELL_ELEMENT"
 }

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

@@ -0,0 +1,9 @@
+/** @jsx jsx */
+import React from 'react';
+type Props = {
+    startIndex: number;
+    endIndex: number;
+    includeTooltip?: boolean;
+};
+export declare const ColumnResizeWidget: React.FC<Props>;
+export {};

package/dist/types/plugins/table/ui/messages.d.ts

@@ -54,5 +54,10 @@ declare const _default: {
         defaultMessage: string;
         description: string;
     };
+    adjustColumns: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };
 export default _default;

package/dist/types/plugins/table/utils/decoration.d.ts

@@ -1,3 +1,4 @@
+import type { IntlShape } from 'react-intl-next';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { ReadonlyTransaction, Selection, Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
@@ -11,5 +12,5 @@ export declare const createControlsHoverDecoration: (cells: Cell[], type: 'row'
 export declare const createColumnSelectedDecoration: (tr: Transaction | ReadonlyTransaction) => Decoration[];
 export declare const createColumnControlsDecoration: (selection: Selection) => Decoration[];
 export declare const updateDecorations: (node: PmNode, decorationSet: DecorationSet, decorations: Decoration[], key: TableDecorations) => DecorationSet;
-export declare const createResizeHandleDecoration: (tr: Transaction | ReadonlyTransaction, rowIndexTarget: number, columnEndIndexTarget: Omit<CellColumnPositioning, 'left'>) => [Decoration[], Decoration[]];
+export declare const createResizeHandleDecoration: (tr: Transaction | ReadonlyTransaction, rowIndexTarget: number, columnEndIndexTarget: Omit<CellColumnPositioning, 'left'>, includeTooltip: boolean | undefined, getIntl: () => IntlShape) => [Decoration[], Decoration[]];
 export declare const createColumnLineResize: (selection: Selection, cellColumnPositioning: Omit<CellColumnPositioning, 'left'>) => Decoration[];

package/dist/types-ts4.5/plugins/table/commands/misc.d.ts

@@ -1,8 +1,8 @@
-import { Command } from '@atlaskit/editor-common/types';
-import { Node as PMNode, Schema, Slice } from '@atlaskit/editor-prosemirror/model';
-import { Transaction } from '@atlaskit/editor-prosemirror/state';
-import { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { Command } from '@atlaskit/editor-common/types';
+import type { Node as PMNode, Schema, Slice } from '@atlaskit/editor-prosemirror/model';
+import type { Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 export declare const setEditorFocus: (editorHasFocus: boolean) => Command;
 export declare const setTableRef: (ref?: HTMLTableElement) => Command;
 export declare const setCellAttr: (name: string, value: any) => Command;
@@ -20,7 +20,9 @@ export declare const selectRow: (row: number, expand?: boolean) => Command;
 export declare const showInsertColumnButton: (columnIndex: number) => Command;
 export declare const showInsertRowButton: (rowIndex: number) => Command;
 export declare const hideInsertColumnOrRowButton: () => Command;
-export declare const addResizeHandleDecorations: (rowIndex: number, columnIndex: number) => Command;
+export declare const addResizeHandleDecorations: (rowIndex: number, columnIndex: number, includeTooltip: boolean) => Command;
+export declare const updateResizeHandleDecorations: (rowIndex?: number, columnIndex?: number, includeTooltip?: boolean) => Command;
+export declare const removeResizeHandleDecorations: () => Command;
 export declare const autoSizeTable: (view: EditorView, node: PMNode, table: HTMLTableElement, basePos: number | undefined, opts: {
     containerWidth: number;
 }) => boolean;

package/dist/types-ts4.5/plugins/table/event-handlers.d.ts

@@ -1,7 +1,7 @@
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { ElementContentRects } from './types';
+import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { ElementContentRects } from './types';
 export declare const handleBlur: (view: EditorView, event: Event) => boolean;
 export declare const handleFocus: (view: EditorView, event: Event) => boolean;
 export declare const handleClick: (view: EditorView, event: Event) => boolean;

package/dist/types-ts4.5/plugins/table/pm-plugins/decorations/utils/column-resizing.d.ts

@@ -1,2 +1,4 @@
-import { DecorationTransformer } from './types';
-export declare const buildColumnResizingDecorations: (rowEndIndex: number, columnEndIndex: number) => DecorationTransformer;
+import type { IntlShape } from 'react-intl-next';
+import type { DecorationTransformer } from './types';
+export declare const buildColumnResizingDecorations: (rowEndIndex: number, columnEndIndex: number, includeTooltip: boolean, getIntl: () => IntlShape) => DecorationTransformer;
+export declare const clearColumnResizingDecorations: () => DecorationTransformer;

package/dist/types-ts4.5/plugins/table/pm-plugins/decorations/utils/index.d.ts

@@ -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/types-ts4.5/plugins/table/pm-plugins/main.d.ts

@@ -1,7 +1,8 @@
+import type { IntlShape } from 'react-intl-next';
 import type { DispatchAnalyticsEvent, EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { Dispatch, EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import type { PortalProviderAPI } from '@atlaskit/editor-common/portal-provider';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { PluginConfig, PluginInjectionAPI } from '../types';
-export declare const createPlugin: (dispatchAnalyticsEvent: DispatchAnalyticsEvent, dispatch: Dispatch, portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, pluginConfig: PluginConfig, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, breakoutEnabled?: boolean, fullWidthModeEnabled?: boolean, tableResizingEnabled?: boolean, previousFullWidthModeEnabled?: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI, pluginInjectionApi?: PluginInjectionAPI) => SafePlugin<import("../types").TablePluginState>;
+export declare const createPlugin: (dispatchAnalyticsEvent: DispatchAnalyticsEvent, dispatch: Dispatch, portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, pluginConfig: PluginConfig, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, getIntl: () => IntlShape, breakoutEnabled?: boolean, fullWidthModeEnabled?: boolean, tableResizingEnabled?: boolean, previousFullWidthModeEnabled?: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI, pluginInjectionApi?: PluginInjectionAPI) => SafePlugin<import("../types").TablePluginState>;

package/dist/types-ts4.5/plugins/table/pm-plugins/table-resizing/plugin.d.ts

@@ -1,6 +1,6 @@
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
+import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
-import { ColumnResizingPluginState } from '../../types';
+import type { ColumnResizingPluginState } from '../../types';
 export declare function createPlugin(dispatch: Dispatch<ColumnResizingPluginState>, { lastColumnResizable }: ColumnResizingPluginState, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, editorAnalyticsAPI?: EditorAnalyticsAPI): SafePlugin<ColumnResizingPluginState>;

package/dist/types-ts4.5/plugins/table/pm-plugins/table-resizing/utils/scale-table.d.ts

@@ -1,7 +1,7 @@
-import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import { Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { DomAtPos } from '@atlaskit/editor-prosemirror/utils';
-import { ResizeState } from '../utils/types';
+import type { ResizeState } from '../utils/types';
 export interface ScaleOptions {
     node: PMNode;
     prevNode: PMNode;

package/dist/types-ts4.5/plugins/table/reducer.d.ts

@@ -1,3 +1,3 @@
-import { TablePluginAction, TablePluginState } from './types';
+import type { TablePluginAction, TablePluginState } from './types';
 declare const _default: (pluginState: TablePluginState, action: TablePluginAction) => TablePluginState;
 export default _default;

package/dist/types-ts4.5/plugins/table/types.d.ts

@@ -69,10 +69,13 @@ export interface TablePluginState {
     isFullWidthModeEnabled?: boolean;
     layout?: TableLayout;
     ordering?: TableColumnOrdering;
+    isResizeHandleWidgetAdded?: boolean;
     resizeHandleRowIndex?: number;
     resizeHandleColumnIndex?: number;
+    resizeHandleIncludeTooltip?: boolean;
     isTableCollapsed?: boolean;
     canCollapseTable?: boolean;
+    getIntl: () => IntlShape;
 }
 export type TablePluginAction = {
     type: 'SET_EDITOR_FOCUS';
@@ -131,6 +134,20 @@ export type TablePluginAction = {
         decorationSet: DecorationSet;
         resizeHandleRowIndex: number;
         resizeHandleColumnIndex: number;
+        resizeHandleIncludeTooltip: boolean;
+    };
+} | {
+    type: 'UPDATE_RESIZE_HANDLE_DECORATIONS';
+    data: {
+        decorationSet: DecorationSet;
+        resizeHandleRowIndex: number | undefined;
+        resizeHandleColumnIndex: number | undefined;
+        resizeHandleIncludeTooltip: boolean | undefined;
+    };
+} | {
+    type: 'REMOVE_RESIZE_HANDLE_DECORATIONS';
+    data: {
+        decorationSet: DecorationSet;
     };
 } | {
     type: 'CLEAR_HOVER_SELECTION';
@@ -212,6 +229,7 @@ export declare enum TableDecorations {
     COLUMN_CONTROLS_DECORATIONS = "COLUMN_CONTROLS_DECORATIONS",
     COLUMN_SELECTED = "COLUMN_SELECTED",
     COLUMN_RESIZING_HANDLE = "COLUMN_RESIZING_HANDLE",
+    COLUMN_RESIZING_HANDLE_WIDGET = "COLUMN_RESIZING_HANDLE_WIDGET",
     COLUMN_RESIZING_HANDLE_LINE = "COLUMN_RESIZING_HANDLE_LINE",
     LAST_CELL_ELEMENT = "LAST_CELL_ELEMENT"
 }

package/dist/types-ts4.5/plugins/table/ui/ColumnResizeWidget/index.d.ts

@@ -0,0 +1,9 @@
+/** @jsx jsx */
+import React from 'react';
+type Props = {
+    startIndex: number;
+    endIndex: number;
+    includeTooltip?: boolean;
+};
+export declare const ColumnResizeWidget: React.FC<Props>;
+export {};

package/dist/types-ts4.5/plugins/table/ui/messages.d.ts

@@ -54,5 +54,10 @@ declare const _default: {
         defaultMessage: string;
         description: string;
     };
+    adjustColumns: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };
 export default _default;

package/dist/types-ts4.5/plugins/table/utils/decoration.d.ts

@@ -1,3 +1,4 @@
+import type { IntlShape } from 'react-intl-next';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { ReadonlyTransaction, Selection, Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
@@ -11,7 +12,7 @@ export declare const createControlsHoverDecoration: (cells: Cell[], type: 'row'
 export declare const createColumnSelectedDecoration: (tr: Transaction | ReadonlyTransaction) => Decoration[];
 export declare const createColumnControlsDecoration: (selection: Selection) => Decoration[];
 export declare const updateDecorations: (node: PmNode, decorationSet: DecorationSet, decorations: Decoration[], key: TableDecorations) => DecorationSet;
-export declare const createResizeHandleDecoration: (tr: Transaction | ReadonlyTransaction, rowIndexTarget: number, columnEndIndexTarget: Omit<CellColumnPositioning, 'left'>) => [
+export declare const createResizeHandleDecoration: (tr: Transaction | ReadonlyTransaction, rowIndexTarget: number, columnEndIndexTarget: Omit<CellColumnPositioning, 'left'>, includeTooltip: boolean | undefined, getIntl: () => IntlShape) => [
     Decoration[],
     Decoration[]
 ];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "2.10.8",
+  "version": "2.11.0",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@atlaskit/adf-schema": "28.1.2",
-    "@atlaskit/editor-common": "^74.53.0",
+    "@atlaskit/editor-common": "^74.54.0",
     "@atlaskit/editor-palette": "1.5.1",
     "@atlaskit/editor-plugin-analytics": "^0.1.0",
     "@atlaskit/editor-plugin-content-insertion": "^0.0.11",

package/src/__tests__/unit/event-handlers.ts

@@ -215,7 +215,7 @@ describe('table event handlers', () => {
         );
         const { state, dispatch } = editorView;
 
-        addResizeHandleDecorations(0, 0)(state, dispatch);
+        addResizeHandleDecorations(0, 0, false)(state, dispatch);
 
         const firstCell = editorView.domAtPos(refs['<>']);
         const event = {

package/src/__tests__/unit/nodeviews/TableContainer.tsx

@@ -46,6 +46,15 @@ jest.mock('../../../plugins/table/utils/analytics', () => ({
   },
 }));
 
+jest.mock('react-intl-next', () => {
+  return {
+    ...(jest.requireActual('react-intl-next') as any),
+    useIntl: jest.fn().mockReturnValue({
+      formatMessage: (descriptor: any) => descriptor.defaultMessage,
+    }),
+  };
+});
+
 describe('table -> nodeviews -> TableContainer.tsx', () => {
   const createEditor = createEditorFactory<TablePluginState>();
   const editor = (
@@ -211,11 +220,11 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
     test('fires when resizing is finished', async () => {
       const { container, analyticsMock } = buildContainer({ layout: 'wide' });
 
-      fireEvent.mouseDown(container.querySelector('.resizer-handle-right')!);
-      fireEvent.mouseMove(container.querySelector('.resizer-handle-right')!);
-      fireEvent.mouseMove(container.querySelector('.resizer-handle-right')!);
-      fireEvent.mouseMove(container.querySelector('.resizer-handle-right')!);
-      fireEvent.mouseUp(container.querySelector('.resizer-handle-right')!);
+      fireEvent.mouseDown(container.querySelector('.resizer-handle.right')!);
+      fireEvent.mouseMove(container.querySelector('.resizer-handle.right')!);
+      fireEvent.mouseMove(container.querySelector('.resizer-handle.right')!);
+      fireEvent.mouseMove(container.querySelector('.resizer-handle.right')!);
+      fireEvent.mouseUp(container.querySelector('.resizer-handle.right')!);
 
       expect(analyticsMock).toHaveBeenCalledWith({
         action: TABLE_ACTION.RESIZED,
@@ -261,11 +270,11 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
     test('calls useMeasureFramerate handlers', async () => {
       const { container } = buildContainer({ layout: 'wide' });
 
-      fireEvent.mouseDown(container.querySelector('.resizer-handle-right')!);
-      fireEvent.mouseMove(container.querySelector('.resizer-handle-right')!, {
+      fireEvent.mouseDown(container.querySelector('.resizer-handle.right')!);
+      fireEvent.mouseMove(container.querySelector('.resizer-handle.right')!, {
         clientX: 100,
       });
-      fireEvent.mouseUp(container.querySelector('.resizer-handle-right')!);
+      fireEvent.mouseUp(container.querySelector('.resizer-handle.right')!);
 
       expect(mockStartMeasure).toHaveBeenCalled();
       expect(mockEndMeasure).toHaveBeenCalled();

package/src/__tests__/unit/pm-plugins/decorations/column-resizing.ts

@@ -91,6 +91,8 @@ describe('tables: column resizing decorations', () => {
           const nextDecorationSet = buildColumnResizingDecorations(
             rowEndIndex,
             columnEndIndex,
+            false,
+            () => ({} as any),
           )({
             decorationSet: DecorationSet.empty,
             tr: state.tr,