@atlaskit/editor-plugin-table 2.10.8 → 2.12.0

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

@@ -103,7 +103,7 @@ interface TablePluginOptions {
     wasFullWidthEnabled?: boolean;
 }
 
-// @public (undocumented)
+// @public
 export const tablesPlugin: TablePlugin;
 
 // (No @packageDocumentation comment for this package)

package/tsconfig.app.json

@@ -0,0 +1,82 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "include": ["./src/**/*.ts", "./src/**/*.tsx"],
+  "exclude": [
+    "**/docs/**/*",
+    "**/__tests__/**/*",
+    "**/vr-tests/**/*",
+    "**/__perf__/**/*",
+    "**/*.test.*",
+    "**/test.*",
+    "**/test-*",
+    "**/examples.ts",
+    "**/examples.tsx",
+    "**/examples/*.ts",
+    "**/examples/*.tsx",
+    "**/examples/**/*.ts",
+    "**/examples/**/*.tsx",
+    "**/storybook/**/*",
+    "**/constellation/**/*",
+    ".storybook/*",
+    "./__fixtures__/**/*",
+    "./__generated__/**/*",
+    "./mocks/**/*",
+    "./__mocks__/**/*",
+    "**/mock.*",
+    "**/codemods/**/*.ts",
+    "**/codemods/**/*.tsx",
+    "./src/plugins/table/nodeviews/__mocks__/**/*"
+  ],
+  "compilerOptions": {
+    "baseUrl": "./",
+    "composite": true,
+    "outDir": "../../../tsDist/@atlaskit__editor-plugin-table/app"
+  },
+  "references": [
+    {
+      "path": "../adf-schema/tsconfig.app.json"
+    },
+    {
+      "path": "../editor-common/tsconfig.app.json"
+    },
+    {
+      "path": "../editor-palette/tsconfig.app.json"
+    },
+    {
+      "path": "../editor-plugin-analytics/tsconfig.app.json"
+    },
+    {
+      "path": "../editor-plugin-content-insertion/tsconfig.app.json"
+    },
+    {
+      "path": "../editor-plugin-guideline/tsconfig.app.json"
+    },
+    {
+      "path": "../editor-plugin-width/tsconfig.app.json"
+    },
+    {
+      "path": "../editor-prosemirror/tsconfig.app.json"
+    },
+    {
+      "path": "../editor-shared-styles/tsconfig.app.json"
+    },
+    {
+      "path": "../editor-tables/tsconfig.app.json"
+    },
+    {
+      "path": "../../design-system/icon/tsconfig.app.json"
+    },
+    {
+      "path": "../../platform/feature-flags/tsconfig.app.json"
+    },
+    {
+      "path": "../../design-system/theme/tsconfig.app.json"
+    },
+    {
+      "path": "../../design-system/tokens/tsconfig.app.json"
+    },
+    {
+      "path": "../../design-system/tooltip/tsconfig.app.json"
+    }
+  ]
+}

package/tsconfig.dev.json

@@ -0,0 +1,112 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "include": [
+    "**/docs/**/*",
+    "**/__tests__/**/*",
+    "**/vr-tests/**/*",
+    "**/__perf__/**/*",
+    "**/*.test.*",
+    "**/test.*",
+    "**/test-*",
+    "**/examples.ts",
+    "**/examples.tsx",
+    "**/examples/*.ts",
+    "**/examples/*.tsx",
+    "**/examples/**/*.ts",
+    "**/examples/**/*.tsx",
+    "**/storybook/**/*",
+    "**/constellation/**/*",
+    ".storybook/*",
+    "./__fixtures__/**/*",
+    "./__generated__/**/*",
+    "./mocks/**/*",
+    "./__mocks__/**/*",
+    "**/mock.*",
+    "**/codemods/**/*.ts",
+    "**/codemods/**/*.tsx",
+    "./src/plugins/table/nodeviews/__mocks__/**/*"
+  ],
+  "exclude": ["./dist/**/*", "./build/**/*", "./node_modules/**/*"],
+  "compilerOptions": {
+    "baseUrl": "./",
+    "composite": true,
+    "outDir": "../../../tsDist/@atlaskit__editor-plugin-table/dev"
+  },
+  "references": [
+    {
+      "path": "tsconfig.app.json"
+    },
+    {
+      "path": "../adf-schema/tsconfig.app.json"
+    },
+    {
+      "path": "../../analytics/analytics-next/tsconfig.app.json"
+    },
+    {
+      "path": "../../design-system/button/tsconfig.app.json"
+    },
+    {
+      "path": "../editor-common/tsconfig.app.json"
+    },
+    {
+      "path": "../editor-core/tsconfig.app.json"
+    },
+    {
+      "path": "../editor-plugin-analytics/tsconfig.app.json"
+    },
+    {
+      "path": "../editor-plugin-content-insertion/tsconfig.app.json"
+    },
+    {
+      "path": "../editor-plugin-decorations/tsconfig.app.json"
+    },
+    {
+      "path": "../editor-plugin-feature-flags/tsconfig.app.json"
+    },
+    {
+      "path": "../editor-plugin-grid/tsconfig.app.json"
+    },
+    {
+      "path": "../editor-plugin-guideline/tsconfig.app.json"
+    },
+    {
+      "path": "../editor-plugin-width/tsconfig.app.json"
+    },
+    {
+      "path": "../editor-prosemirror/tsconfig.app.json"
+    },
+    {
+      "path": "../editor-shared-styles/tsconfig.app.json"
+    },
+    {
+      "path": "../editor-tables/tsconfig.app.json"
+    },
+    {
+      "path": "../editor-test-helpers/tsconfig.app.json"
+    },
+    {
+      "path": "../../linking-platform/link-provider/tsconfig.app.json"
+    },
+    {
+      "path": "../../design-system/logo/tsconfig.app.json"
+    },
+    {
+      "path": "../../media/media-integration-test-helpers/tsconfig.app.json"
+    },
+    {
+      "path": "../synchrony-test-helpers/tsconfig.app.json"
+    },
+    {
+      "path": "../../design-system/theme/tsconfig.app.json"
+    },
+    {
+      "path": "../../../build/test-tooling/visual-regression/tsconfig.app.json"
+    },
+    {
+      "path": "../../../build/test-tooling/webdriver-runner/tsconfig.app.json"
+    },
+    {
+      "path": "../../platform/feature-flags-test-utils/tsconfig.app.json"
+    }
+  ]
+}