@atlaskit/editor-plugin-table 7.6.14 → 7.7.1

package/src/pm-plugins/table-resizing/utils/resize-state.ts

@@ -9,7 +9,6 @@ import { calcTableColumnWidths } from '@atlaskit/editor-common/utils';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { Rect } from '@atlaskit/editor-tables/table-map';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import { getSelectedTableInfo } from '../../../utils';
 
@@ -115,39 +114,29 @@ export const updateColgroup = (
 ): void => {
   const cols = tableRef.querySelectorAll('col');
 
-  if (getBooleanFF('platform.editor.custom-table-width')) {
-    const columnsCount = cols.length;
-    if (isTableScalingEnabled && tableNode) {
-      const scalePercent = getTableScalingPercent(tableNode, tableRef);
-      state.cols
-        .filter((column) => column && !!column.width) // if width is 0, we dont want to apply that.
-        .forEach((column, i) => {
-          const fixedColWidth = getColWidthFix(column.width, columnsCount);
-          const scaledWidth = fixedColWidth * scalePercent;
-          const finalWidth = Math.max(scaledWidth, tableCellMinWidth);
-          // we aren't handling the remaining pixels here when the 48px min width is reached
-          if (cols[i]) {
-            cols[i].style.width = `${finalWidth}px`;
-          }
-        });
-    } else {
-      state.cols
-        .filter((column) => column && !!column.width) // if width is 0, we dont want to apply that.
-        .forEach((column, i) => {
-          if (cols[i]) {
-            cols[i].style.width = `${getColWidthFix(
-              column.width,
-              columnsCount,
-            )}px`;
-          }
-        });
-    }
+  const columnsCount = cols.length;
+  if (isTableScalingEnabled && tableNode) {
+    const scalePercent = getTableScalingPercent(tableNode, tableRef);
+    state.cols
+      .filter((column) => column && !!column.width) // if width is 0, we dont want to apply that.
+      .forEach((column, i) => {
+        const fixedColWidth = getColWidthFix(column.width, columnsCount);
+        const scaledWidth = fixedColWidth * scalePercent;
+        const finalWidth = Math.max(scaledWidth, tableCellMinWidth);
+        // we aren't handling the remaining pixels here when the 48px min width is reached
+        if (cols[i]) {
+          cols[i].style.width = `${finalWidth}px`;
+        }
+      });
   } else {
     state.cols
       .filter((column) => column && !!column.width) // if width is 0, we dont want to apply that.
       .forEach((column, i) => {
         if (cols[i]) {
-          cols[i].style.width = `${column.width}px`;
+          cols[i].style.width = `${getColWidthFix(
+            column.width,
+            columnsCount,
+          )}px`;
         }
       });
   }

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

@@ -28,7 +28,6 @@ export interface ScaleOptions {
   previousContainerWidth?: number;
   parentWidth?: number;
   layoutChanged?: boolean;
-  isBreakoutEnabled?: boolean;
   isFullWidthModeEnabled?: boolean;
   isTableResizingEnabled?: boolean;
 }
@@ -41,34 +40,24 @@ export const scale = (
   domAtPos: DomAtPos,
   isTableScalingEnabled = false,
 ): ResizeState | undefined => {
-  /**
-   * isBreakoutEnabled === true -> default center aligned
-   * isBreakoutEnabled === false -> full width mode
-   */
-
   const {
     node,
     containerWidth,
     previousContainerWidth,
     prevNode,
     start,
-    isBreakoutEnabled,
     layoutChanged,
     isTableResizingEnabled,
   } = options;
 
   const maxSize = isTableResizingEnabled
     ? getTableContainerWidth(node)
-    : getLayoutSize(node.attrs.layout, containerWidth, {
-        isBreakoutEnabled,
-      });
+    : getLayoutSize(node.attrs.layout, containerWidth, {});
 
   const prevTableWidth = getTableWidth(prevNode);
   const previousMaxSize = isTableResizingEnabled
     ? getTableContainerWidth(node)
-    : getLayoutSize(prevNode.attrs.layout, previousContainerWidth, {
-        isBreakoutEnabled,
-      });
+    : getLayoutSize(prevNode.attrs.layout, previousContainerWidth, {});
 
   let newWidth = maxSize;
 

package/src/reducer.ts

@@ -27,9 +27,6 @@ export default (
     case 'SET_TARGET_CELL_POSITION':
       return { ...pluginState, ...action.data, isContextualMenuOpen: false };
 
-    case 'SET_TABLE_LAYOUT':
-      return { ...pluginState, ...action.data };
-
     case 'TOGGLE_CONTEXTUAL_MENU':
       return {
         ...pluginState,

package/src/transforms/column-width.ts

@@ -6,7 +6,6 @@ import { AttrStep } from '@atlaskit/editor-prosemirror/transform';
 import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import type { ResizeState } from '../pm-plugins/table-resizing/utils';
 import {
@@ -17,7 +16,6 @@ import {
 import { isMinCellWidthTable } from '../pm-plugins/table-resizing/utils/colgroup';
 import { getResizeState } from '../pm-plugins/table-resizing/utils/resize-state';
 import { scaleTableTo } from '../pm-plugins/table-resizing/utils/scale-table';
-import { insertColumnButtonOffset } from '../ui/common-styles';
 
 /**
  * Given a new ResizeState object, create a transaction that replaces and updates the table node based on new state.
@@ -141,10 +139,7 @@ export const rescaleColumns =
     if (shouldScale) {
       previousTableInfo = {
         width: getTableElementWidth(table.node),
-        possibleMaxWidth: getBooleanFF('platform.editor.custom-table-width')
-          ? getTableContainerElementWidth(table.node)
-          : getTableContainerElementWidth(table.node) -
-            insertColumnButtonOffset,
+        possibleMaxWidth: getTableContainerElementWidth(table.node),
         isResized,
       };
     } else {
@@ -152,10 +147,7 @@ export const rescaleColumns =
         // when table is resized the tableRef client width will be 1px larger than colGroup, which is used in calculations
         width: isResized ? tableRef.clientWidth - 1 : tableRef.clientWidth,
         /** the is the width the table can reach before overflowing */
-        possibleMaxWidth: getBooleanFF('platform.editor.custom-table-width')
-          ? tableRef?.parentElement?.clientWidth || 0
-          : (tableRef?.parentElement?.clientWidth || 0) -
-            insertColumnButtonOffset,
+        possibleMaxWidth: tableRef?.parentElement?.clientWidth || 0,
         isResized,
       };
     }

package/src/types.ts

@@ -157,7 +157,6 @@ export interface TablePluginState {
   insertColumnButtonIndex?: number;
   insertRowButtonIndex?: number;
   isFullWidthModeEnabled?: boolean;
-  layout?: TableLayout;
   ordering?: TableColumnOrdering;
   isResizeHandleWidgetAdded?: boolean;
   resizeHandleRowIndex?: number;
@@ -171,7 +170,6 @@ export interface TablePluginState {
 
   getIntl: () => IntlShape;
 
-  isBreakoutEnabled?: boolean;
   wasFullWidthModeEnabled?: boolean;
   isTableResizingEnabled?: boolean;
   isDragAndDropEnabled?: boolean;
@@ -190,7 +188,6 @@ export type TablePluginAction =
         tableRef?: HTMLTableElement;
         tableNode?: PmNode;
         tableWrapperTarget?: HTMLElement;
-        layout: TableLayout;
         isHeaderRowEnabled: boolean;
         isHeaderColumnEnabled: boolean;
       };
@@ -289,10 +286,6 @@ export type TablePluginAction =
       type: 'SELECT_COLUMN';
       data: { targetCellPosition: number; decorationSet: DecorationSet };
     }
-  | {
-      type: 'SET_TABLE_LAYOUT';
-      data: { layout: TableLayout };
-    }
   | { type: 'SHOW_INSERT_ROW_BUTTON'; data: { insertRowButtonIndex: number } }
   | {
       type: 'SHOW_INSERT_COLUMN_BUTTON';
@@ -361,7 +354,6 @@ export const TableCssClassName = {
   CONTROLS_INSERT_BUTTON_WRAP: `${tablePrefixSelector}-controls__insert-button-wrap`,
   CONTROLS_INSERT_LINE: `${tablePrefixSelector}-controls__insert-line`,
   CONTROLS_BUTTON_OVERLAY: `${tablePrefixSelector}-controls__button-overlay`,
-  LAYOUT_BUTTON: `${tablePrefixSelector}-layout-button`,
 
   DRAG_CONTROLS_INSERT_BUTTON: `${tablePrefixSelector}-controls__drag-insert-button`,
   DRAG_CONTROLS_INSERT_BUTTON_INNER: `${tablePrefixSelector}-controls__drag-insert-button-inner`,

package/src/ui/ColumnResizeWidget/index.tsx

@@ -2,6 +2,10 @@
 import { jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
 
+import {
+  startColumnResizing,
+  ToolTipContent,
+} from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import Tooltip from '@atlaskit/tooltip';
 
@@ -32,7 +36,12 @@ export const ColumnResizeWidget = ({
 
   return (
     <Tooltip
-      content={formatMessage(messages.adjustColumns)}
+      content={
+        <ToolTipContent
+          description={formatMessage(messages.adjustColumns)}
+          keymap={startColumnResizing}
+        />
+      }
       hideTooltipOnClick
       hideTooltipOnMouseDown
       position="mouse"

package/src/ui/FloatingContextualButton/index.tsx

@@ -5,7 +5,6 @@ import { jsx } from '@emotion/react';
 import type { WrappedComponentProps } from 'react-intl-next';
 import { injectIntl } from 'react-intl-next';
 
-import type { TableLayout } from '@atlaskit/adf-schema';
 import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import { ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
@@ -37,7 +36,6 @@ export interface Props {
   mountPoint?: HTMLElement;
   boundariesElement?: HTMLElement;
   scrollableElement?: HTMLElement;
-  layout?: TableLayout;
   isNumberColumnEnabled?: boolean;
   stickyHeader?: RowStickyState;
   dispatchAnalyticsEvent?: DispatchAnalyticsEvent;

package/src/ui/common-styles.ts

@@ -23,7 +23,7 @@ import {
 } from '@atlaskit/editor-shared-styles';
 import { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { B300, N0, N20A, N300, N40A, R500 } from '@atlaskit/theme/colors';
+import { N0, N40A, R500 } from '@atlaskit/theme/colors';
 import { fontSize } from '@atlaskit/theme/constants';
 import { token } from '@atlaskit/tokens';
 
@@ -259,36 +259,6 @@ const tableStickyHeaderFirefoxFixStyle = () => {
   }
 };
 
-const tableWrapperStyles = () => {
-  if (getBooleanFF('platform.editor.custom-table-width')) {
-    return css`
-      .${ClassName.TABLE_NODE_WRAPPER} {
-        padding-bottom: 0px;
-        /* fixes gap cursor height */
-        overflow: auto;
-        overflow-y: hidden;
-        position: relative;
-
-        > table[data-number-column='true'] {
-          width: calc(100% - 1px);
-        }
-      }
-    `;
-  } else {
-    return css`
-      .${ClassName.TABLE_NODE_WRAPPER} {
-        padding-right: ${insertColumnButtonOffset}px;
-        margin-right: -${insertColumnButtonOffset}px;
-        padding-bottom: 0px;
-        /* fixes gap cursor height */
-        overflow: auto;
-        overflow-y: hidden;
-        position: relative;
-      }
-    `;
-  }
-};
-
 // re-exporting these styles to use in Gemini test when table node view is rendered outside of PM
 export const baseTableStyles = (props: { featureFlags?: FeatureFlags }) => css`
   ${tableSharedStyle()};
@@ -608,9 +578,7 @@ export const baseTableStyles = (props: { featureFlags?: FeatureFlags }) => css`
 
   .${ClassName.TABLE_CONTAINER}[data-number-column='true'] {
     .${ClassName.CORNER_CONTROLS}, .${ClassName.CONTROLS_CORNER_BUTTON} {
-      width: ${getBooleanFF('platform.editor.custom-table-width')
-        ? akEditorTableToolbarSize + akEditorTableNumberColumnWidth + 1
-        : akEditorTableToolbarSize + akEditorTableNumberColumnWidth}px;
+      width: ${akEditorTableToolbarSize + akEditorTableNumberColumnWidth + 1}px;
     }
     .${ClassName.ROW_CONTROLS} .${ClassName.CONTROLS_BUTTON} {
       border-right-width: 0;
@@ -861,9 +829,7 @@ export const baseTableStyles = (props: { featureFlags?: FeatureFlags }) => css`
   .${ClassName.NUMBERED_COLUMN} {
     position: relative;
     float: right;
-    margin-left: ${getBooleanFF('platform.editor.custom-table-width')
-      ? akEditorTableToolbarSize
-      : akEditorTableToolbarSize - 1}px;
+    margin-left: ${akEditorTableToolbarSize}px;
     top: ${props.featureFlags?.tableDragAndDrop
       ? 0
       : akEditorTableToolbarSize}px;
@@ -914,9 +880,7 @@ export const baseTableStyles = (props: { featureFlags?: FeatureFlags }) => css`
       display: block;
     }
     .${ClassName.NUMBERED_COLUMN} {
-      padding-left: ${getBooleanFF('platform.editor.custom-table-width')
-        ? 0
-        : 1}px;
+      padding-left: 0px;
 
       .${ClassName.NUMBERED_COLUMN_BUTTON} {
         border-left: 0 none;
@@ -1082,23 +1046,21 @@ export const baseTableStyles = (props: { featureFlags?: FeatureFlags }) => css`
     z-index: ${akEditorTableCellOnStickyHeaderZIndex - 4};
   }
 
-  ${tableWrapperStyles()}
+  .${ClassName.TABLE_NODE_WRAPPER} {
+    padding-bottom: 0px;
+    /* fixes gap cursor height */
+    overflow: auto;
+    overflow-y: hidden;
+    position: relative;
+
+    > table[data-number-column='true'] {
+      width: calc(100% - 1px);
+    }
+  }
 `;
 
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4139
 export const tableStyles = (props: { featureFlags?: FeatureFlags }) => css`
-  .${ClassName.LAYOUT_BUTTON} button {
-    background: ${token('color.background.neutral', N20A)};
-    color: ${token('color.icon', N300)};
-    cursor: none;
-  }
-
-  .${ClassName.LAYOUT_BUTTON}:not(.${ClassName.IS_RESIZING}) button:hover {
-    background: ${token('color.background.neutral.hovered', B300)};
-    color: ${token('color.icon', 'white')} !important;
-    cursor: pointer;
-  }
-
   .ProseMirror {
     ${baseTableStyles(props)}
   }

package/src/ui/ui-styles.ts

@@ -374,9 +374,7 @@ export const OverflowShadow = (
         ${token('elevation.shadow.overflow.perimeter', 'transparent')} 0px,
         transparent 1px
       );
-    left: ${getBooleanFF('platform.editor.custom-table-width')
-      ? `calc(100% - ${tableOverflowShadowWidthWide}px)`
-      : `calc(100% - ${tableOverflowShadowWidthWide - 10}px)`};
+    left: calc(100% - ${tableOverflowShadowWidthWide}px);
   }
   .${ClassName.WITH_CONTROLS} {
     ${overflowShadowWidhoutDnD(isDragAndDropEnabled)}
@@ -439,26 +437,24 @@ const columnHeaderButtonSelected = () =>
   });
 
 const getFloatingDotOverrides = () => {
-  return getBooleanFF('platform.editor.custom-table-width')
-    ? css`
-        tr
-          th:last-child
-          .${ClassName.COLUMN_CONTROLS_DECORATIONS}::before,
-          tr
-          td:last-child
-          .${ClassName.COLUMN_CONTROLS_DECORATIONS}::before {
-          content: '';
-          background-color: ${tableBorderColor};
-          position: absolute;
-          height: ${lineMarkerSize}px;
-          width: ${lineMarkerSize}px;
-          border-radius: 50%;
-          pointer-events: none;
-          top: ${token('space.025', '2px')};
-          right: 0px;
-        }
-      `
-    : '';
+  return css`
+    tr
+      th:last-child
+      .${ClassName.COLUMN_CONTROLS_DECORATIONS}::before,
+      tr
+      td:last-child
+      .${ClassName.COLUMN_CONTROLS_DECORATIONS}::before {
+      content: '';
+      background-color: ${tableBorderColor};
+      position: absolute;
+      height: ${lineMarkerSize}px;
+      width: ${lineMarkerSize}px;
+      border-radius: 50%;
+      pointer-events: none;
+      top: ${token('space.025', '2px')};
+      right: 0px;
+    }
+  `;
 };
 
 export const floatingColumnControls = () => {
@@ -755,29 +751,6 @@ export const hoveredWarningCell = css`
   }
 `;
 
-// move the resize handle zone completely inside the table cell to avoid overflow
-const getLastColumnResizerOverrides = () => {
-  return getBooleanFF('platform.editor.custom-table-width')
-    ? css`
-        tr
-          th:last-child
-          .${ClassName.RESIZE_HANDLE_DECORATION},
-          tr
-          td:last-child
-          .${ClassName.RESIZE_HANDLE_DECORATION} {
-          background-color: transparent;
-          position: absolute;
-          width: ${resizeHandlerAreaWidth / 2}px;
-          height: 100%;
-          top: 0;
-          right: 0;
-          cursor: col-resize;
-          z-index: ${resizeHandlerZIndex};
-        }
-      `
-    : '';
-};
-
 // Explicit pixel values required here to ensure correct positioning and sizes of column resize handle
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
 const resizeHandleOverrides = (isDragAndDropEnabled: boolean | undefined) => {
@@ -868,7 +841,21 @@ export const resizeHandle = (isDragAndDropEnabled: boolean | undefined) => css`
       z-index: ${resizeHandlerZIndex};
     }
 
-    ${getLastColumnResizerOverrides()}
+    tr
+      th:last-child
+      .${ClassName.RESIZE_HANDLE_DECORATION},
+      tr
+      td:last-child
+      .${ClassName.RESIZE_HANDLE_DECORATION} {
+      background-color: transparent;
+      position: absolute;
+      width: ${resizeHandlerAreaWidth / 2}px;
+      height: 100%;
+      top: 0;
+      right: 0;
+      cursor: col-resize;
+      z-index: ${resizeHandlerZIndex};
+    }
 
     ${resizeHandleOverrides(isDragAndDropEnabled)}
 

package/src/utils/index.ts

@@ -23,7 +23,6 @@ export {
   checkIfHeaderColumnEnabled,
   checkIfHeaderRowEnabled,
   checkIfNumberColumnEnabled,
-  isLayoutSupported,
   getTableWidth,
   tablesHaveDifferentColumnWidths,
   tablesHaveDifferentNoOfColumns,

package/src/utils/nodes.ts

@@ -4,12 +4,9 @@ import type {
   EditorState,
   Selection,
 } from '@atlaskit/editor-prosemirror/state';
-import { hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable } from '@atlaskit/editor-tables/utils';
 
-import { pluginKey } from '../pm-plugins/plugin-key';
-
 export const isIsolating = (node: PmNode): boolean => {
   return !!node.type.spec.isolating;
 };
@@ -63,26 +60,6 @@ export const checkIfNumberColumnEnabled = (selection: Selection): boolean =>
     false,
   );
 
-export const isLayoutSupported = (state: EditorState): boolean => {
-  const { permittedLayouts } = pluginKey.getState(state)?.pluginConfig || {};
-  const { bodiedExtension, layoutSection, expand, extensionFrame } =
-    state.schema.nodes;
-
-  return (
-    !hasParentNodeOfType([
-      expand,
-      layoutSection,
-      bodiedExtension,
-      extensionFrame,
-    ])(state.selection) &&
-    !!permittedLayouts &&
-    (permittedLayouts === 'all' ||
-      (permittedLayouts.indexOf('default') > -1 &&
-        permittedLayouts.indexOf('wide') > -1 &&
-        permittedLayouts.indexOf('full-width') > -1))
-  );
-};
-
 export const getTableWidth = (node: PmNode) => {
   return getTableWidths(node).reduce((acc, current) => acc + current, 0);
 };