@atlaskit/editor-plugin-table 7.7.2 → 7.7.4

package/src/toolbar.tsx

@@ -13,6 +13,7 @@ import {
 import commonMessages, {
   tableMessages as messages,
 } from '@atlaskit/editor-common/messages';
+import { editorCommandToPMCommand } from '@atlaskit/editor-common/preset';
 import type { typeOption } from '@atlaskit/editor-common/src/types/floating-toolbar';
 import type {
   Command,
@@ -61,6 +62,7 @@ import {
   hoverRows,
   hoverTable,
   removeDescendantNodes,
+  setTableDisplayMode,
 } from './commands';
 import {
   deleteColumnsWithAnalytics,
@@ -79,6 +81,7 @@ import {
   toggleNumberColumnWithAnalytics,
   wrapTableInExpandWithAnalytics,
 } from './commands-with-analytics';
+import type { TablePluginOptions } from './plugin';
 import { getPluginState } from './pm-plugins/plugin-factory';
 import { pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing';
 import { getNewResizeStateFromSelectedColumns } from './pm-plugins/table-resizing/utils/resize-state';
@@ -91,6 +94,7 @@ import type {
   ToolbarMenuState,
 } from './types';
 import { TableCssClassName } from './types';
+import { DisplayModeIcon } from './ui/icons';
 import { FullWidthDisplay } from './ui/TableFullWidthLabel';
 import {
   getMergedCellsPositions,
@@ -450,6 +454,7 @@ export const getToolbarConfig =
     editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
     getEditorFeatureFlags: GetEditorFeatureFlags,
     getEditorView: () => EditorView | null,
+    options?: TablePluginOptions,
   ) =>
   (config: PluginConfig): FloatingToolbarHandler =>
   (state, intl) => {
@@ -465,7 +470,7 @@ export const getToolbarConfig =
     const currentTableNodeLocalId = tableObject?.node?.attrs?.localId ?? '';
 
     if (
-      isTableScalingEnabled &&
+      isTableScalingEnabled && // TODO ED-21670: check if need options.isTableScalingEnabled
       isWidthResizing &&
       widthToWidest &&
       currentTableNodeLocalId &&
@@ -526,7 +531,7 @@ export const getToolbarConfig =
         editorAnalyticsAPI,
       );
 
-      const { isTableScalingEnabled = false } = getPluginState(state);
+      const { isTableScalingEnabled = false } = getPluginState(state); // TODO ED-21670: check if we need options.isTableScalingEnabled and not an acutual state of displayNode attr on the table
 
       let cellItems: Array<FloatingToolbarItem<Command>>;
       cellItems = pluginState.isDragAndDropEnabled
@@ -548,6 +553,7 @@ export const getToolbarConfig =
             intl,
             getEditorContainerWidth,
             editorAnalyticsAPI,
+            options,
             isTableScalingEnabled,
           )
         : [];
@@ -728,6 +734,7 @@ const getColumnSettingItems = (
   { formatMessage }: ToolbarMenuContext,
   getEditorContainerWidth: GetEditorContainerWidth,
   editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
+  options: TablePluginOptions | undefined,
   isTableScalingEnabled = false,
 ): Array<FloatingToolbarItem<Command>> => {
   const pluginState = getPluginState(editorState);
@@ -742,35 +749,62 @@ const getColumnSettingItems = (
     editorState,
     editorView.domAtPos.bind(editorView),
     getEditorContainerWidth,
-    isTableScalingEnabled,
+    isTableScalingEnabled, // TODO ED-21670: Here should be actual state of tableNode's displayMode attr
   );
 
   const wouldChange = newResizeStateWithAnalytics?.changed ?? false;
 
+  const items: Array<FloatingToolbarItem<Command>> = [];
+
+  const isTableScalingLockBtnEnabled =
+    options?.isTableScalingEnabled &&
+    getBooleanFF('platform.editor.table.preserve-widths-with-lock-button');
+
+  if (isTableScalingLockBtnEnabled) {
+    const areColumnWidthsLocked =
+      pluginState?.tableNode?.attrs.displayMode === 'fixed';
+
+    const title = areColumnWidthsLocked
+      ? formatMessage(messages.unlockColumnWidths)
+      : formatMessage(messages.lockColumnWidths);
+
+    items.push({
+      id: 'editor.table.lockColumns',
+      type: 'button',
+      title,
+      icon: () => <DisplayModeIcon size="medium" label={title} />,
+      onClick: editorCommandToPMCommand(setTableDisplayMode),
+      selected: areColumnWidthsLocked,
+      testId: 'table-lock-column-widths-btn',
+    });
+  }
+
   if (
     pluginState?.pluginConfig?.allowDistributeColumns &&
     pluginState.isDragAndDropEnabled
   ) {
-    return [
-      {
-        id: 'editor.table.distributeColumns',
-        type: 'button',
-        title: formatMessage(messages.distributeColumns),
-        icon: DistributeColumnIcon,
-        onClick: (state, dispatch, view) =>
-          getDistributeConfig(
-            getEditorContainerWidth,
-            editorAnalyticsAPI,
-            isTableScalingEnabled,
-          )(state, dispatch, view),
-        disabled: !wouldChange,
-      },
-      {
-        type: 'separator',
-      },
-    ];
+    items.push({
+      id: 'editor.table.distributeColumns',
+      type: 'button',
+      title: formatMessage(messages.distributeColumns),
+      icon: DistributeColumnIcon,
+      onClick: (state, dispatch, view) =>
+        getDistributeConfig(
+          getEditorContainerWidth,
+          editorAnalyticsAPI,
+          isTableScalingEnabled, // TODO ED-21670: Maybe here too we an actual state of tableNode's displayMode attr
+        )(state, dispatch, view),
+      disabled: !wouldChange,
+    });
   }
-  return [];
+
+  if (items.length !== 0) {
+    items.push({
+      type: 'separator',
+    });
+  }
+
+  return items;
 };
 
 const getColorPicker = (

package/src/transforms/fix-tables.ts

@@ -1,4 +1,3 @@
-import type { TableLayout } from '@atlaskit/adf-schema';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
@@ -186,7 +185,7 @@ export const fixAutoSizedTable = (
     .setMeta('addToHistory', false);
 };
 
-const getLayoutBasedOnWidth = (totalWidth: number): TableLayout => {
+const getLayoutBasedOnWidth = (totalWidth: number) => {
   if (totalWidth > akEditorWideLayoutWidth) {
     return 'full-width';
   } else if (

package/src/types.ts

@@ -174,6 +174,11 @@ export interface TablePluginState {
   isTableResizingEnabled?: boolean;
   isDragAndDropEnabled?: boolean;
   isTableHovered?: boolean;
+
+  // Currently isTableScalingEnabled is the same as options.isTableScalingEnabled from TablePluginOptions.
+  // However, if you want to learn if tablePlugin is configured to enable Preserve Table Widths feature,
+  // use options.isTableScalingEnabled and avoid using pluginState.isTableScalingEnabled or
+  // const { isTableScalingEnabled } = getPluginState(state) for that purpose.
   isTableScalingEnabled?: boolean;
 }
 

package/src/ui/FloatingContextualButton/styles.ts

@@ -5,50 +5,52 @@ import { token } from '@atlaskit/tokens';
 
 import { contextualMenuTriggerSize } from '../consts';
 
-export const tableFloatingCellButtonStyles = () => css`
-  > div {
-    // Sits behind button to provide surface-color background
-    background: ${token('elevation.surface', N20)};
-    border-radius: ${token('border.radius', '3px')};
-    display: flex;
-    height: ${contextualMenuTriggerSize + 2}px;
-    flex-direction: column;
-  }
-  && button {
-    background: ${token('color.background.neutral', 'none')};
-    flex-direction: column;
-    margin: ${token('space.025', '2px')};
-    outline: 2px solid ${token('elevation.surface', N0)};
-    border-radius: 1px;
-    padding: 0;
-    height: calc(100% - 4px);
-    display: flex;
-  }
-  && button:hover {
-    background: ${token('color.background.neutral.hovered', N30A)};
-  }
-  && button:active {
-    background: ${token(
-      'color.background.neutral.pressed',
-      'rgba(179, 212, 255, 0.6)',
-    )};
-  }
-  && button > span {
-    margin: 0px ${token('space.negative.050', '-4px')};
-  }
-  && span {
-    pointer-events: none;
-  }
-`;
+export const tableFloatingCellButtonStyles = () =>
+  css({
+    '> div': {
+      // Sits behind button to provide surface-color background
+      background: token('elevation.surface', N20),
+      borderRadius: token('border.radius', '3px'),
+      display: 'flex',
+      height: `${contextualMenuTriggerSize + 2}px`,
+      flexDirection: 'column',
+    },
+    '&& button': {
+      background: token('color.background.neutral', 'none'),
+      flexDirection: 'column',
+      margin: token('space.025', '2px'),
+      outline: `2px solid ${token('elevation.surface', N0)}`,
+      borderRadius: '1px',
+      padding: 0,
+      height: 'calc(100% - 4px)',
+      display: 'flex',
+    },
+    '&& button:hover': {
+      background: token('color.background.neutral.hovered', N30A),
+    },
+    '&& button:active': {
+      background: token(
+        'color.background.neutral.pressed',
+        'rgba(179, 212, 255, 0.6)',
+      ),
+    },
+    '&& button > span': {
+      margin: `0px ${token('space.negative.050', '-4px')}`,
+    },
+    '&& span': {
+      pointerEvents: 'none',
+    },
+  });
 
-export const tableFloatingCellButtonSelectedStyles = () => css`
-  && button {
-    background: ${token('color.background.selected', N700)};
-  }
-  && button:hover {
-    background: ${token('color.background.selected.hovered', N700)};
-  }
-  && button:active {
-    background: ${token('color.background.selected.pressed', N700)};
-  }
-`;
+export const tableFloatingCellButtonSelectedStyles = () =>
+  css({
+    '&& button': {
+      background: token('color.background.selected', N700),
+    },
+    '&& button:hover': {
+      background: token('color.background.selected.hovered', N700),
+    },
+    '&& button:active': {
+      background: token('color.background.selected.pressed', N700),
+    },
+  });

package/src/ui/FloatingContextualMenu/styles.ts

@@ -10,21 +10,23 @@ import {
   contextualMenuDropdownWidthDnD,
 } from '../consts';
 
-export const cellColourPreviewStyles = (selectedColor: string) => css`
-  &::before {
-    background: ${selectedColor};
-  }
-`;
+export const cellColourPreviewStyles = (selectedColor: string) =>
+  css({
+    '&::before': {
+      background: selectedColor,
+    },
+  });
 
-export const elementBeforeIconStyles = css`
-  margin-right: ${token('space.negative.075', '-6px')};
-  display: flex;
-`;
+export const elementBeforeIconStyles = css({
+  marginRight: token('space.negative.075', '-6px'),
+  display: 'flex',
+});
 
 // TODO Delete this comment after verifying space token -> previous value `padding: 8px`
 // TODO Delete this comment after verifying space token -> previous value `margin-left: 4px`
 export const tablePopupStyles = (
   isDragAndDropEnabled: boolean | undefined,
+  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 ) => css`
   .${ClassName.CONTEXTUAL_SUBMENU} {
     border-radius: ${token('border.radius', '3px')};

package/src/ui/FloatingDragMenu/styles.ts

@@ -7,17 +7,19 @@ import { token } from '@atlaskit/tokens';
 import { TableCssClassName as ClassName } from '../../types';
 import { dragMenuDropdownWidth } from '../consts';
 
-export const cellColourPreviewStyles = (selectedColor: string) => css`
-  &::before {
-    background: ${selectedColor};
-  }
-`;
+export const cellColourPreviewStyles = (selectedColor: string) =>
+  css({
+    '&::before': {
+      background: selectedColor,
+    },
+  });
 
-export const elementBeforeIconStyles = css`
-  margin-right: ${token('space.negative.075', '-6px')};
-  display: flex;
-`;
+export const elementBeforeIconStyles = css({
+  marginRight: token('space.negative.075', '-6px'),
+  display: 'flex',
+});
 
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 export const dragMenuBackgroundColorStyles = css`
   .${ClassName.DRAG_SUBMENU} {
     border-radius: ${token('border.radius', '3px')};
@@ -58,19 +60,19 @@ export const dragMenuBackgroundColorStyles = css`
   }
 `;
 
-export const toggleStyles = css`
-  display: flex;
-  input[type='checkbox'] {
-    width: 30px;
-    height: 14px;
-    pointer-events: initial;
-    cursor: pointer;
-  }
-  > label {
-    margin: 0px;
-    pointer-events: none;
-    > span {
-      pointer-events: none;
-    }
-  }
-`;
+export const toggleStyles = css({
+  display: 'flex',
+  "input[type='checkbox']": {
+    width: '30px',
+    height: '14px',
+    pointerEvents: 'initial',
+    cursor: 'pointer',
+  },
+  '> label': {
+    margin: '0px',
+    pointerEvents: 'none',
+    '> span': {
+      pointerEvents: 'none',
+    },
+  },
+});

package/src/ui/icons/DisplayModeIcon.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import Icon from '@atlaskit/icon';
+import type { CustomGlyphProps, GlyphProps } from '@atlaskit/icon/types';
+
+export const DisplayModeGlyth = (props: CustomGlyphProps) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <rect x="4" y="5" width="4" height="14" rx="1" fill="currentColor" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11 5C10.4477 5 10 5.44772 10 6V9.10102C11.0503 8.02921 12.4424 7.29368 14 7.07089V6C14 5.44772 13.5523 5 13 5H11Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M17 5C16.4477 5 16 5.44772 16 6V7.07089C17.5576 7.29368 18.9497 8.02921 20 9.10102V6C20 5.44772 19.5523 5 19 5H17Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M21 14C21 17.3137 18.3137 20 15 20C11.6863 20 9 17.3137 9 14C9 10.6863 11.6863 8 15 8C18.3137 8 21 10.6863 21 14ZM12 15C12 14.4477 12.4477 14 13 14V12C13 10.8954 13.8954 10 15 10C16.1046 10 17 10.8954 17 12V14C17.5523 14 18 14.4477 18 15V17C18 17.5523 17.5523 18 17 18H13C12.4477 18 12 17.5523 12 17V15ZM16 14V12C16 11.4477 15.5523 11 15 11C14.4477 11 14 11.4477 14 12V14H16Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const DisplayModeIcon = (props: GlyphProps) => {
+  return <Icon glyph={DisplayModeGlyth} {...props} />;
+};

package/src/ui/icons/index.ts

@@ -1,6 +1,7 @@
 export { DragHandleIcon } from './DragHandleIcon';
 export { DragInMotionIcon } from './DragInMotionIcon';
 export { DragHandleDisabledIcon } from './DragHandleDisabledIcon';
+export { DisplayModeIcon } from './DisplayModeIcon';
 export { MinimisedHandleIcon } from './MinimisedHandle';
 export { MergeCellsIcon } from './MergeCellsIcon';
 export { SplitCellIcon } from './SplitCellIcon';

package/src/ui/ui-styles.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- needs mahual remediation */
 import { css } from '@emotion/react';
 
 import {