@atlaskit/editor-plugin-table 2.10.7 → 2.11.0

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.7",
+  "version": "2.11.0",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -28,17 +28,17 @@
   },
   "dependencies": {
     "@atlaskit/adf-schema": "28.1.2",
-    "@atlaskit/editor-common": "^74.52.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.10",
+    "@atlaskit/editor-plugin-content-insertion": "^0.0.11",
     "@atlaskit/editor-prosemirror": "1.1.0",
     "@atlaskit/editor-shared-styles": "^2.6.0",
     "@atlaskit/editor-tables": "^2.3.0",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/platform-feature-flags": "^0.2.1",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.16.0",
+    "@atlaskit/tokens": "^1.17.0",
     "@atlaskit/tooltip": "^17.8.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",

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/TableComponent.tsx

@@ -4,9 +4,9 @@ import { render } from '@testing-library/react';
 import { replaceRaf } from 'raf-stub';
 
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
-import { Command } from '@atlaskit/editor-common/types';
+import type { Command } from '@atlaskit/editor-common/types';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { selectTableClosestToPos } from '@atlaskit/editor-tables/src/utils/select-nodes';
 import {
   findTable,
@@ -14,9 +14,9 @@ import {
   selectTable,
 } from '@atlaskit/editor-tables/utils';
 import { createEditorFactory } from '@atlaskit/editor-test-helpers/create-editor';
+import type { DocBuilder } from '@atlaskit/editor-test-helpers/doc-builder';
 import {
   doc,
-  DocBuilder,
   p,
   table,
   td,
@@ -34,10 +34,8 @@ import {
 } from '../../../plugins/table/commands';
 import TableComponent from '../../../plugins/table/nodeviews/TableComponent';
 import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
-import {
-  TableCssClassName as ClassName,
-  TablePluginState,
-} from '../../../plugins/table/types';
+import type { TablePluginState } from '../../../plugins/table/types';
+import { TableCssClassName as ClassName } from '../../../plugins/table/types';
 
 jest.mock('../../../plugins/table/utils/nodes', () =>
   Object.assign({}, jest.requireActual('../../../plugins/table/utils/nodes'), {
@@ -67,7 +65,7 @@ describe('table -> nodeviews -> TableComponent.tsx', () => {
       editorProps: {
         allowTables: false,
         dangerouslyAppendPlugins: {
-          __plugins: [tablePlugin()],
+          __plugins: [tablePlugin({ config: undefined })],
         },
         featureFlags,
       },