@atlaskit/editor-plugin-table 2.10.7 → 2.11.0

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',
+  },
 });

package/src/plugins/table/utils/decoration.ts

@@ -1,3 +1,9 @@
+import { createElement } from 'react';
+
+import ReactDOM from 'react-dom';
+import { RawIntlProvider } from 'react-intl-next';
+import type { IntlShape } from 'react-intl-next';
+
 import type { CellAttributes } from '@atlaskit/adf-schema';
 import { nonNullable } from '@atlaskit/editor-common/utils';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
@@ -19,6 +25,7 @@ import {
 
 import type { Cell, CellColumnPositioning } from '../types';
 import { TableCssClassName as ClassName, TableDecorations } from '../types';
+import { ColumnResizeWidget } from '../ui/ColumnResizeWidget';
 
 const filterDecorationByKey = (
   key: TableDecorations,
@@ -238,7 +245,6 @@ export const updateDecorations = (
 ): DecorationSet => {
   const filteredDecorations = filterDecorationByKey(key, decorationSet);
   const decorationSetFiltered = decorationSet.remove(filteredDecorations);
-
   return decorationSetFiltered.add(node, decorations);
 };
 
@@ -327,6 +333,8 @@ export const createResizeHandleDecoration = (
   tr: Transaction | ReadonlyTransaction,
   rowIndexTarget: number,
   columnEndIndexTarget: Omit<CellColumnPositioning, 'left'>,
+  includeTooltip: boolean = false,
+  getIntl: () => IntlShape,
 ): [Decoration[], Decoration[]] => {
   const emptyResult: [Decoration[], Decoration[]] = [[], []];
   const table = findTable(tr.selection);
@@ -351,13 +359,27 @@ export const createResizeHandleDecoration = (
       position,
       () => {
         const element = document.createElement('div');
-        element.classList.add(ClassName.RESIZE_HANDLE_DECORATION);
-        element.dataset.startIndex = `${cellColumnPositioning.left}`;
-        element.dataset.endIndex = `${cellColumnPositioning.right}`;
+        ReactDOM.render(
+          createElement(
+            RawIntlProvider,
+            { value: getIntl() },
+            createElement(ColumnResizeWidget, {
+              startIndex: cellColumnPositioning.left,
+              endIndex: cellColumnPositioning.right,
+              includeTooltip,
+            }),
+          ),
+          element,
+        );
         return element;
       },
       {
-        key: `${TableDecorations.COLUMN_RESIZING_HANDLE}_${rowIndex}_${columnIndex}`,
+        key: `${
+          TableDecorations.COLUMN_RESIZING_HANDLE_WIDGET
+        }_${rowIndex}_${columnIndex}_${includeTooltip ? 'with' : 'no'}-tooltip`,
+        destroy: (node) => {
+          ReactDOM.unmountComponentAtNode(node as HTMLDivElement);
+        },
       },
     );
   };

package/tmp/api-report-tmp.d.ts

@@ -0,0 +1,111 @@
+## API Report File for "@atlaskit/editor-plugin-table"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import type { AnalyticsEventPayload } from '@atlaskit/editor-common/analytics';
+import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
+import type { Command } from '@atlaskit/editor-common/types';
+import type { ContentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
+import type { EditorSelectionAPI } from '@atlaskit/editor-common/selection';
+import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
+import type { GuidelinePlugin } from '@atlaskit/editor-plugin-guideline';
+import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
+import type { TableLayout } from '@atlaskit/adf-schema';
+import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
+
+// @public (undocumented)
+type InsertTableAction = (analyticsPayload: AnalyticsEventPayload) => Command;
+
+// @public (undocumented)
+type PermittedLayoutsDescriptor = 'all' | TableLayout[];
+
+// @public (undocumented)
+interface PluginConfig {
+    // (undocumented)
+    advanced?: boolean;
+    // (undocumented)
+    allowAddColumnWithCustomStep?: boolean;
+    // (undocumented)
+    allowBackgroundColor?: boolean;
+    // (undocumented)
+    allowCellOptionsInFloatingToolbar?: boolean;
+    // (undocumented)
+    allowCollapse?: boolean;
+    // (undocumented)
+    allowColumnResizing?: boolean;
+    // (undocumented)
+    allowColumnSorting?: boolean;
+    // (undocumented)
+    allowControls?: boolean;
+    // (undocumented)
+    allowDistributeColumns?: boolean;
+    // (undocumented)
+    allowHeaderColumn?: boolean;
+    // (undocumented)
+    allowHeaderRow?: boolean;
+    // (undocumented)
+    allowMergeCells?: boolean;
+    // (undocumented)
+    allowNumberColumn?: boolean;
+    // (undocumented)
+    initialRenderOptimization?: boolean;
+    // (undocumented)
+    isHeaderRowRequired?: boolean;
+    // (undocumented)
+    mouseMoveOptimization?: boolean;
+    // (undocumented)
+    permittedLayouts?: PermittedLayoutsDescriptor;
+    // (undocumented)
+    stickyHeaders?: boolean;
+    // (undocumented)
+    stickyHeadersOptimization?: boolean;
+    // (undocumented)
+    tableCellOptimization?: boolean;
+    // (undocumented)
+    tableOverflowShadowsOptimization?: boolean;
+    // (undocumented)
+    tableRenderOptimization?: boolean;
+}
+
+// @public (undocumented)
+export type TablePlugin = NextEditorPlugin<'table', {
+    pluginConfiguration: TablePluginOptions | undefined;
+    actions: {
+        insertTable: InsertTableAction;
+    };
+    dependencies: [
+    AnalyticsPlugin,
+    ContentInsertionPlugin,
+    WidthPlugin,
+    GuidelinePlugin
+    ];
+}>;
+
+// @public (undocumented)
+interface TablePluginOptions {
+    // (undocumented)
+    allowContextualMenu?: boolean;
+    // (undocumented)
+    breakoutEnabled?: boolean;
+    // (undocumented)
+    editorSelectionAPI?: EditorSelectionAPI;
+    // (undocumented)
+    fullWidthEnabled?: boolean;
+    // (undocumented)
+    getEditorFeatureFlags?: GetEditorFeatureFlags;
+    // (undocumented)
+    tableOptions: PluginConfig;
+    // (undocumented)
+    tableResizingEnabled?: boolean;
+    // (undocumented)
+    wasFullWidthEnabled?: boolean;
+}
+
+// @public (undocumented)
+export const tablesPlugin: TablePlugin;
+
+// (No @packageDocumentation comment for this package)
+
+```