@atlaskit/editor-plugin-table 2.10.8 → 2.11.0

package/src/plugins/table/commands/misc.ts

@@ -1,20 +1,21 @@
 // #region Imports
-import { CellAttributes } from '@atlaskit/adf-schema';
-import { Command } from '@atlaskit/editor-common/types';
+import type { CellAttributes } from '@atlaskit/adf-schema';
+import type { Command } from '@atlaskit/editor-common/types';
 import {
   closestElement,
   isParagraph,
   isTextSelection,
   mapSlice,
 } from '@atlaskit/editor-common/utils';
-import {
+import type {
   Node as PMNode,
   Schema,
   Slice,
 } from '@atlaskit/editor-prosemirror/model';
-import { TextSelection, Transaction } from '@atlaskit/editor-prosemirror/state';
-import { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+import type { Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import {
@@ -33,7 +34,10 @@ import {
 } 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';
@@ -436,12 +440,14 @@ export const hideInsertColumnOrRowButton = () =>
 export const addResizeHandleDecorations = (
   rowIndex: number,
   columnIndex: number,
+  includeTooltip: boolean,
 ) =>
   createCommand(
     (state) => {
       const tableNode = findTable(state.selection);
       const {
         pluginConfig: { allowColumnResizing },
+        getIntl,
       } = getPluginState(state);
 
       if (!tableNode || !allowColumnResizing) {
@@ -454,18 +460,89 @@ export const addResizeHandleDecorations = (
           decorationSet: buildColumnResizingDecorations(
             rowIndex,
             columnIndex,
+            includeTooltip,
+            getIntl,
+          )({
+            tr: state.tr,
+            decorationSet: getDecorations(state),
+          }),
+          resizeHandleRowIndex: rowIndex,
+          resizeHandleColumnIndex: columnIndex,
+          resizeHandleIncludeTooltip: includeTooltip,
+        },
+      };
+    },
+    (tr: Transaction) => tr.setMeta('addToHistory', false),
+  );
+
+export const updateResizeHandleDecorations = (
+  rowIndex?: number,
+  columnIndex?: number,
+  includeTooltip?: boolean,
+) =>
+  createCommand(
+    (state) => {
+      const tableNode = findTable(state.selection);
+      const {
+        resizeHandleRowIndex,
+        resizeHandleColumnIndex,
+        resizeHandleIncludeTooltip,
+        pluginConfig: { allowColumnResizing },
+        getIntl,
+      } = getPluginState(state);
+
+      if (!tableNode || !allowColumnResizing) {
+        return false;
+      }
+
+      const resolvedRowIndex = rowIndex ?? resizeHandleRowIndex;
+      const resolvedColumnIndex = columnIndex ?? resizeHandleColumnIndex;
+      const resolvedIncludeTooltip =
+        includeTooltip ?? resizeHandleIncludeTooltip;
+
+      if (
+        resolvedRowIndex === undefined ||
+        resolvedColumnIndex === undefined ||
+        resolvedIncludeTooltip === undefined
+      ) {
+        return false;
+      }
+
+      return {
+        type: 'UPDATE_RESIZE_HANDLE_DECORATIONS',
+        data: {
+          decorationSet: buildColumnResizingDecorations(
+            resolvedRowIndex,
+            resolvedColumnIndex,
+            resolvedIncludeTooltip,
+            getIntl,
           )({
             tr: state.tr,
             decorationSet: getDecorations(state),
           }),
           resizeHandleRowIndex: rowIndex,
           resizeHandleColumnIndex: columnIndex,
+          resizeHandleIncludeTooltip: includeTooltip,
         },
       };
     },
     (tr: Transaction) => 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: EditorView,
   node: PMNode,

package/src/plugins/table/event-handlers.ts

@@ -11,14 +11,13 @@ import {
   isLastItemMediaGroup,
   setNodeSelection,
 } from '@atlaskit/editor-common/utils';
-import { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
-import {
+import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
+import type {
   EditorState,
-  Selection,
-  TextSelection,
   Transaction,
 } from '@atlaskit/editor-prosemirror/state';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import {
@@ -44,10 +43,8 @@ import {
 import { getPluginState } from './pm-plugins/plugin-factory';
 import { getPluginState as getResizePluginState } from './pm-plugins/table-resizing/plugin-factory';
 import { deleteColumns, deleteRows } from './transforms';
-import {
-  ElementContentRects,
-  RESIZE_HANDLE_AREA_DECORATION_GAP,
-} from './types';
+import type { ElementContentRects } from './types';
+import { RESIZE_HANDLE_AREA_DECORATION_GAP } from './types';
 import {
   getColumnOrRowIndex,
   getMousePositionHorizontalRelativeByElement,
@@ -375,6 +372,7 @@ export const handleMouseMove = (
           return addResizeHandleDecorations(
             rowIndexTarget,
             columnEndIndexTarget,
+            true,
           )(state, dispatch);
         }
       }
@@ -486,13 +484,10 @@ export const whenTableInFocus =
     elementContentRects?: ElementContentRects,
   ) =>
   (view: EditorView, mouseEvent: Event): boolean => {
-    const tableResizePluginState = getResizePluginState(view.state);
-    const tablePluginState = getPluginState(view.state);
-    const isDragging =
-      tableResizePluginState && !!tableResizePluginState.dragging;
-    const hasTableNode = tablePluginState && tablePluginState.tableNode;
-
-    if (!hasTableNode || isDragging) {
+    if (
+      !getPluginState(view.state)?.tableNode ||
+      !!getResizePluginState(view.state)?.dragging
+    ) {
       return false;
     }
 

package/src/plugins/table/index.tsx

@@ -162,6 +162,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
             dispatch,
             portalProviderAPI,
             eventDispatcher,
+            getIntl,
           }) => {
             const {
               fullWidthEnabled,
@@ -179,6 +180,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
               pluginConfig(tableOptions),
               defaultGetEditorContainerWidth,
               getEditorFeatureFlags || defaultGetEditorFeatureFlags,
+              getIntl,
               breakoutEnabled,
               fullWidthEnabled,
               tableResizingEnabled,

package/src/plugins/table/nodeviews/TableResizer.tsx

@@ -2,6 +2,7 @@ import type { PropsWithChildren } from 'react';
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 
 import rafSchd from 'raf-schd';
+import { defineMessages, useIntl } from 'react-intl-next';
 
 import type { TableEventPayload } from '@atlaskit/editor-common/analytics';
 import { getGuidelinesWithHighlights } from '@atlaskit/editor-common/guideline';
@@ -11,7 +12,6 @@ import type {
   HandleResize,
 } from '@atlaskit/editor-common/resizer';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
-import { resizerHandleShadowClassName } from '@atlaskit/editor-common/styles';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
@@ -53,6 +53,14 @@ interface TableResizerProps {
   ) => ((tr: Transaction) => boolean) | undefined;
 }
 
+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 };
 const tableHandleMarginTop = 12;
 const tableHandlePosition = 14;
@@ -129,6 +137,7 @@ export const TableResizer = ({
 }: PropsWithChildren<TableResizerProps>) => {
   const currentGap = useRef(0);
   const [snappingEnabled, setSnappingEnabled] = useState(false);
+  const { formatMessage } = useIntl();
 
   const resizerMinWidth = getResizerMinWidth(node);
   const handleHeightSize = getResizerHandleHeight(tableRef);
@@ -301,24 +310,6 @@ export const TableResizer = ({
     ],
   );
 
-  const handleComponent = useMemo(
-    () => ({
-      left: (
-        <div
-          className={resizerHandleShadowClassName}
-          style={{ height: 'calc(100% - 24px)' }}
-        />
-      ),
-      right: (
-        <div
-          className={resizerHandleShadowClassName}
-          style={{ height: 'calc(100% - 24px)' }}
-        />
-      ),
-    }),
-    [],
-  );
-
   return (
     <ResizerNext
       enable={handles}
@@ -337,8 +328,9 @@ export const TableResizer = ({
       handlePositioning="adjacent"
       innerPadding={tableHandlePosition}
       isHandleVisible={findTable(editorView.state?.selection)?.pos === getPos()}
-      handleComponent={handleComponent}
       appearance={isInDanger ? 'danger' : undefined}
+      handleHighlight="shadow"
+      handleTooltipContent={formatMessage(messages.resizeTable)}
     >
       {children}
     </ResizerNext>

package/src/plugins/table/pm-plugins/decorations/utils/column-resizing.ts

@@ -1,4 +1,9 @@
-import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import type { IntlShape } from 'react-intl-next';
+
+import type {
+  Decoration,
+  DecorationSet,
+} from '@atlaskit/editor-prosemirror/view';
 
 import { TableDecorations } from '../../../types';
 import {
@@ -7,7 +12,7 @@ import {
 } from '../../../utils/decoration';
 
 import { composeDecorations } from './compose-decorations';
-import { DecorationTransformer } from './types';
+import type { DecorationTransformer } from './types';
 
 const emptyDecorations = [[], []];
 
@@ -18,7 +23,7 @@ const updateColumnResizeHandle =
       tr.doc,
       decorationSet,
       columnResizesDecorations,
-      TableDecorations.COLUMN_RESIZING_HANDLE,
+      TableDecorations.COLUMN_RESIZING_HANDLE_WIDGET,
     );
 
 const updateLastCellElement =
@@ -32,17 +37,39 @@ const updateLastCellElement =
     );
 
 export const buildColumnResizingDecorations =
-  (rowEndIndex: number, columnEndIndex: number): DecorationTransformer =>
+  (
+    rowEndIndex: number,
+    columnEndIndex: number,
+    includeTooltip: boolean,
+    getIntl: () => IntlShape,
+  ): DecorationTransformer =>
   ({ tr, decorationSet }): DecorationSet => {
     const [columnResizesDecorations, lastCellElementsDecorations] =
       columnEndIndex < 0
         ? emptyDecorations
-        : createResizeHandleDecoration(tr, rowEndIndex, {
-            right: columnEndIndex,
-          });
+        : createResizeHandleDecoration(
+            tr,
+            rowEndIndex,
+            {
+              right: columnEndIndex,
+            },
+            includeTooltip,
+            getIntl,
+          );
 
     return composeDecorations([
       updateColumnResizeHandle(columnResizesDecorations),
       updateLastCellElement(lastCellElementsDecorations),
     ])({ decorationSet, tr });
   };
+
+export const clearColumnResizingDecorations =
+  (): DecorationTransformer =>
+  ({ tr, decorationSet }): DecorationSet => {
+    const [columnResizesDecorations, lastCellElementsDecorations] =
+      emptyDecorations;
+    return composeDecorations([
+      updateColumnResizeHandle(columnResizesDecorations),
+      updateLastCellElement(lastCellElementsDecorations),
+    ])({ decorationSet, tr });
+  };

package/src/plugins/table/pm-plugins/decorations/utils/index.ts

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

package/src/plugins/table/pm-plugins/main.ts

@@ -1,3 +1,5 @@
+import type { IntlShape } from 'react-intl-next';
+
 import {
   ACTION,
   ACTION_SUBJECT,
@@ -46,6 +48,7 @@ import {
   setTableRef,
 } from '../commands';
 import {
+  removeResizeHandleDecorations,
   transformSliceRemoveCellBackgroundColor,
   transformSliceToAddTableHeaders,
   transformSliceToRemoveColumnsWidths,
@@ -100,6 +103,7 @@ export const createPlugin = (
   pluginConfig: PluginConfig,
   getEditorContainerWidth: GetEditorContainerWidth,
   getEditorFeatureFlags: GetEditorFeatureFlags,
+  getIntl: () => IntlShape,
   breakoutEnabled?: boolean,
   fullWidthModeEnabled?: boolean,
   tableResizingEnabled?: boolean,
@@ -120,6 +124,7 @@ export const createPlugin = (
     isHeaderRowEnabled: !!pluginConfig.allowHeaderRow,
     isHeaderColumnEnabled: false,
     ...defaultTableSelection,
+    getIntl,
   });
 
   let elementContentRects: ElementContentRects = {};
@@ -211,7 +216,6 @@ export const createPlugin = (
           const pluginState = getPluginState(state);
           let tableRef: HTMLTableElement | undefined;
           let tableNode;
-
           if (pluginState.editorHasFocus) {
             const parent = findParentDomRefOfType(
               state.schema.nodes.table,
@@ -255,6 +259,8 @@ export const createPlugin = (
                 addBoldInEmptyHeaderCells(tableCellHeader)(state, dispatch);
               }
             }
+          } else if (pluginState.isResizeHandleWidgetAdded) {
+            removeResizeHandleDecorations()(state, dispatch);
           }
         },
         destroy: () => {

package/src/plugins/table/pm-plugins/table-resizing/event-handlers.ts

@@ -17,6 +17,7 @@ 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';
 
@@ -115,6 +116,10 @@ export const handleMouseDown = (
 
   setDragging({ 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: MouseEvent) {
     window.removeEventListener('mouseup', finish);
     window.removeEventListener('mousemove', move);

package/src/plugins/table/pm-plugins/table-resizing/plugin.ts

@@ -1,17 +1,15 @@
 import classnames from 'classnames';
 
 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 {
-  TableCssClassName as ClassName,
-  ColumnResizingPluginState,
-} from '../../types';
+import { TableCssClassName as ClassName } from '../../types';
+import type { ColumnResizingPluginState } from '../../types';
 
 import { setResizeHandlePos } from './commands';
 import { handleMouseDown } from './event-handlers';

package/src/plugins/table/pm-plugins/table-resizing/utils/scale-table.ts

@@ -1,7 +1,7 @@
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
-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 { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 
@@ -15,9 +15,10 @@ import {
   getTotalWidth,
   updateColgroup,
 } from '../utils/resize-state';
-import { ResizeState } from '../utils/types';
+import type { ResizeState } from '../utils/types';
 
 import { hasTableBeenResized, insertColgroupFromNode } from './colgroup';
+import { syncStickyRowToTable } from './dom';
 
 export interface ScaleOptions {
   node: PMNode;
@@ -169,6 +170,7 @@ export const previewScaleTable = (
   }
 
   if (!hasTableBeenResized(node)) {
+    syncStickyRowToTable(tableRef);
     return;
   }
 

package/src/plugins/table/reducer.ts

@@ -1,5 +1,5 @@
 import { defaultTableSelection } from './pm-plugins/default-table-selection';
-import { TablePluginAction, TablePluginState } from './types';
+import type { TablePluginAction, TablePluginState } from './types';
 
 export default (
   pluginState: TablePluginState,
@@ -87,11 +87,59 @@ export default (
       if (
         action.data.resizeHandleColumnIndex ===
           pluginState.resizeHandleColumnIndex &&
-        action.data.resizeHandleRowIndex === pluginState.resizeHandleRowIndex
+        action.data.resizeHandleRowIndex === pluginState.resizeHandleRowIndex &&
+        action.data.resizeHandleIncludeTooltip ===
+          pluginState.resizeHandleIncludeTooltip
       ) {
         return pluginState;
       }
-      return { ...pluginState, ...action.data };
+      return {
+        ...pluginState,
+        ...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 ?? pluginState.resizeHandleColumnIndex,
+        resizeHandleRowIndex:
+          resizeHandleRowIndex ?? pluginState.resizeHandleRowIndex,
+        resizeHandleIncludeTooltip:
+          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/src/plugins/table/types.ts

@@ -115,11 +115,15 @@ export interface TablePluginState {
   isFullWidthModeEnabled?: boolean;
   layout?: TableLayout;
   ordering?: TableColumnOrdering;
+  isResizeHandleWidgetAdded?: boolean;
   resizeHandleRowIndex?: number;
   resizeHandleColumnIndex?: number;
+  resizeHandleIncludeTooltip?: boolean;
   // for table wrap/collapse
   isTableCollapsed?: boolean; // is the current table already in an expand?
   canCollapseTable?: boolean; // enabled/disabled state of collapse option
+
+  getIntl: () => IntlShape;
 }
 
 export type TablePluginAction =
@@ -175,8 +179,22 @@ 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'; data: { decorationSet: DecorationSet } }
   | { type: 'SHOW_RESIZE_HANDLE_LINE'; data: { decorationSet: DecorationSet } }
   | { type: 'HIDE_RESIZE_HANDLE_LINE'; data: { decorationSet: DecorationSet } }
@@ -224,6 +242,7 @@ export 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/src/plugins/table/ui/ColumnResizeWidget/index.tsx

@@ -0,0 +1,53 @@
+/** @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';
+
+type Props = {
+  startIndex: number;
+  endIndex: number;
+  includeTooltip?: boolean;
+};
+
+export const ColumnResizeWidget: React.FC<Props> = ({
+  startIndex,
+  endIndex,
+  includeTooltip,
+}) => {
+  const { formatMessage } = useIntl();
+
+  if (!includeTooltip) {
+    return (
+      <div
+        className={TableCssClassName.RESIZE_HANDLE_DECORATION}
+        data-start-index={startIndex}
+        data-end-index={endIndex}
+      />
+    );
+  }
+
+  return (
+    <Tooltip
+      content={formatMessage(messages.adjustColumns)}
+      hideTooltipOnClick
+      hideTooltipOnMouseDown
+      position="mouse"
+      mousePosition="auto-start"
+    >
+      {(tooltipProps) => (
+        <div
+          className={TableCssClassName.RESIZE_HANDLE_DECORATION}
+          data-start-index={startIndex}
+          data-end-index={endIndex}
+          {...tooltipProps}
+        />
+      )}
+    </Tooltip>
+  );
+};

package/src/plugins/table/ui/messages.ts

@@ -60,4 +60,9 @@ export default defineMessages({
     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',
+  },
 });