@atlaskit/editor-plugin-table 2.8.6 → 2.9.1

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

@@ -1,4 +1,4 @@
-import { CellAttributes, TableLayout } from '@atlaskit/adf-schema';
+import type { CellAttributes, TableLayout } from '@atlaskit/adf-schema';
 import {
   getParentNodeWidth,
   layoutToWidth,
@@ -10,13 +10,13 @@ import {
   mapBreakpointToLayoutMaxWidth,
 } from '@atlaskit/editor-common/ui';
 import { containsClassName } from '@atlaskit/editor-common/utils';
-import {
+import type {
   NodeSpec,
   Node as PMNode,
   ResolvedPos,
 } from '@atlaskit/editor-prosemirror/model';
-import { EditorState } from '@atlaskit/editor-prosemirror/state';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import {
   akEditorFullWidthLayoutWidth,
   akEditorGutterPadding,
@@ -24,7 +24,7 @@ import {
 } from '@atlaskit/editor-shared-styles';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
-import { TableOptions } from '../../../nodeviews/types';
+import type { TableOptions } from '../../../nodeviews/types';
 
 // Translates named layouts in number values.
 export function getLayoutSize(
@@ -120,15 +120,11 @@ export const getTableMaxWidth = ({
   const containerWidth = getEditorContainerWidth();
   const parentWidth = getParentNodeWidth(tableStart, state, containerWidth);
 
-  let maxWidth;
-  if (getBooleanFF('platform.editor.custom-table-width')) {
-    maxWidth =
-      parentWidth ||
+  let maxWidth = getBooleanFF('platform.editor.custom-table-width')
+    ? parentWidth ||
       table.attrs.width ||
-      getLayoutSize(layout, containerWidth.width, {});
-  } else {
-    maxWidth = parentWidth || getLayoutSize(layout, containerWidth.width, {});
-  }
+      getLayoutSize(layout, containerWidth.width, {})
+    : parentWidth || getLayoutSize(layout, containerWidth.width, {});
 
   if (table.attrs.isNumberColumnEnabled) {
     maxWidth -= akEditorTableNumberColumnWidth;

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

@@ -1,25 +1,27 @@
-import { TableLayout } from '@atlaskit/adf-schema';
+import type { TableLayout } from '@atlaskit/adf-schema';
 import {
   tableCellMinWidth,
   tableNewColumnMinWidth,
 } from '@atlaskit/editor-common/styles';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import { calcTableColumnWidths } from '@atlaskit/editor-common/utils';
-import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import { EditorState } from '@atlaskit/editor-prosemirror/state';
-import { Rect } from '@atlaskit/editor-tables/table-map';
+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';
 
-import { hasTableBeenResized, insertColgroupFromNode } from './colgroup';
 import {
-  ColumnState,
-  getCellsRefsInColumn,
-  getColumnStateFromDOM,
-} from './column-state';
+  getColWidthFix,
+  hasTableBeenResized,
+  insertColgroupFromNode,
+} from './colgroup';
+import type { ColumnState } from './column-state';
+import { getCellsRefsInColumn, getColumnStateFromDOM } from './column-state';
 import { syncStickyRowToTable } from './dom';
 import { getTableMaxWidth } from './misc';
-import { ResizeState, ResizeStateWithAnalytics } from './types';
+import type { ResizeState, ResizeStateWithAnalytics } from './types';
 
 export const getResizeState = ({
   minWidth,
@@ -83,13 +85,28 @@ export const updateColgroup = (
   tableRef: HTMLElement,
 ): void => {
   const cols = tableRef.querySelectorAll('col');
-  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`;
-      }
-    });
+
+  if (getBooleanFF('platform.editor.custom-table-width')) {
+    const columnsCount = cols.length;
+    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`;
+        }
+      });
+  } 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`;
+        }
+      });
+  }
 
   // colgroup has updated, reflect new widths in sticky header
   syncStickyRowToTable(tableRef);

package/src/plugins/table/types.ts

@@ -1,19 +1,19 @@
-import { IntlShape } from 'react-intl-next';
+import type { IntlShape } from 'react-intl-next';
 
+import type { TableLayout } from '@atlaskit/adf-schema';
 import {
   tableCellSelector,
   tableHeaderSelector,
-  TableLayout,
   tablePrefixSelector,
 } from '@atlaskit/adf-schema';
-import { TableColumnOrdering } from '@atlaskit/adf-schema/steps';
-import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import type { TableColumnOrdering } from '@atlaskit/adf-schema/steps';
+import type { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { TableSharedCssClassName } from '@atlaskit/editor-common/styles';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
-import { Transaction } from '@atlaskit/editor-prosemirror/state';
-import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
-import { Rect } from '@atlaskit/editor-tables/table-map';
+import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
+import type { Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import type { Rect } from '@atlaskit/editor-tables/table-map';
 
 import type tablePlugin from './index';
 

package/src/plugins/table/ui/common-styles.ts

@@ -18,6 +18,7 @@ import {
   SelectionStyle,
 } 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 { fontSize } from '@atlaskit/theme/constants';
 import { ThemeProps } from '@atlaskit/theme/types';
@@ -155,6 +156,32 @@ const breakoutWidthStyling = () => {
   `;
 };
 
+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;
+      }
+    `;
+  } 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;
+      }
+    `;
+  }
+};
+
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4139
 export const tableStyles = (
   props: ThemeProps & { featureFlags?: FeatureFlags },
@@ -733,15 +760,7 @@ export const tableStyles = (
     .${ClassName.ROW_CONTROLS_WRAPPER} {
       left: -${tableToolbarSize}px;
     }
-    .${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;
-    }
+    ${tableWrapperStyles()}
   }
 
   .ProseMirror.${ClassName.IS_RESIZING} {

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

@@ -130,6 +130,7 @@ export const contextualMenuDropdownWidth = 180;
 export const stickyRowZIndex = resizeHandlerZIndex + 2;
 export const stickyRowOffsetTop = 8;
 export const stickyHeaderBorderBottomWidth = 1;
+export const tableOverflowShadowWidth = 8;
 
 export const TABLE_SNAP_GAP = 9;
 export const TABLE_HIGHLIGHT_GAP = 10;

package/src/plugins/table/ui/ui-styles.ts

@@ -10,9 +10,10 @@ import {
   akEditorTableNumberColumnWidth,
   akEditorUnitZIndex,
 } from '@atlaskit/editor-shared-styles';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { B300, N0, N300, N40A, N60A, Y200, Y50 } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
-import { ThemeProps } from '@atlaskit/theme/types';
+import type { ThemeProps } from '@atlaskit/theme/types';
 import { token } from '@atlaskit/tokens';
 
 import { TableCssClassName as ClassName } from '../types';
@@ -36,6 +37,7 @@ import {
   tableDeleteButtonSize,
   tableHeaderCellBackgroundColor,
   tableInsertColumnButtonSize,
+  tableOverflowShadowWidth,
   tableToolbarDeleteColor,
   tableToolbarSelectedColor,
   tableToolbarSize,
@@ -244,7 +246,7 @@ export const OverflowShadow = (props: ThemeProps) => css`
     pointer-events: none;
     top: ${tableMarginTop}px;
     z-index: ${akEditorShadowZIndex};
-    width: 8px;
+    width: ${tableOverflowShadowWidth}px;
   }
   .${ClassName.TABLE_LEFT_SHADOW} {
     background: linear-gradient(
@@ -273,9 +275,10 @@ export const OverflowShadow = (props: ThemeProps) => css`
         ${token('elevation.shadow.overflow.perimeter', 'transparent')} 0px,
         transparent 1px
       );
-    left: calc(100% + 2px);
+    left: ${getBooleanFF('platform.editor.custom-table-width')
+      ? `calc(100% - ${tableOverflowShadowWidth}px)`
+      : 'calc(100% + 2px)'};
   }
-
   .${ClassName.WITH_CONTROLS} {
     .${ClassName.TABLE_RIGHT_SHADOW}, .${ClassName.TABLE_LEFT_SHADOW} {
       height: calc(100% - ${tableMarginTopWithControl}px);
@@ -308,6 +311,29 @@ const columnHeaderButtonSelected = (props: ThemeProps) => css`
   z-index: ${columnControlsSelectedZIndex};
 `;
 
+const getFloatingDotOverrides = (props: ThemeProps) => {
+  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(props)};
+          position: absolute;
+          height: ${lineMarkerSize}px;
+          width: ${lineMarkerSize}px;
+          border-radius: 50%;
+          pointer-events: none;
+          top: ${token('space.025', '2px')};
+          right: 0px;
+        }
+      `
+    : '';
+};
+
 export const columnControlsDecoration = (props: ThemeProps) => css`
   .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
     display: none;
@@ -317,6 +343,7 @@ export const columnControlsDecoration = (props: ThemeProps) => css`
     left: -1px;
     top: -${columnControlsDecorationHeight + tableCellBorderWidth}px;
     height: ${columnControlsDecorationHeight}px;
+    // floating dot for adding column button
     &::before {
       content: ' ';
       background-color: ${tableBorderColor(props)};
@@ -350,6 +377,9 @@ export const columnControlsDecoration = (props: ThemeProps) => css`
     }
   }
 
+  // floating dot for adding column button - overriding style on last column to avoid scroll
+  ${getFloatingDotOverrides(props)}
+
   div.${ClassName.WITH_CONTROLS}>.${ClassName.ROW_CONTROLS_WRAPPER}::after {
     content: ' ';
     background-color: ${tableBorderColor(props)};
@@ -439,6 +469,29 @@ 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}px;
+          height: 100%;
+          top: 0;
+          right: 0;
+          cursor: col-resize;
+          z-index: ${resizeHandlerZIndex};
+        }
+      `
+    : '';
+};
+
 export const resizeHandle = (props: ThemeProps) => css`
   .${ClassName.TABLE_CONTAINER} {
     .${ClassName.RESIZE_HANDLE_DECORATION} {
@@ -452,6 +505,8 @@ export const resizeHandle = (props: ThemeProps) => css`
       z-index: ${resizeHandlerZIndex};
     }
 
+    ${getLastColumnResizerOverrides()}
+
     td.${ClassName.WITH_RESIZE_LINE}::before {
       content: ' ';
       position: absolute;

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

@@ -1,14 +1,15 @@
-import { CellAttributes } from '@atlaskit/adf-schema';
+import type { CellAttributes } from '@atlaskit/adf-schema';
 import { nonNullable } from '@atlaskit/editor-common/utils';
-import { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
+import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 // @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
-import {
+import type {
   ReadonlyTransaction,
   Selection,
   Transaction,
 } from '@atlaskit/editor-prosemirror/state';
-import { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
-import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
+import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { Rect, TableMap } from '@atlaskit/editor-tables/table-map';
 import {
   findTable,
@@ -16,12 +17,8 @@ import {
   getSelectionRect,
 } from '@atlaskit/editor-tables/utils';
 
-import {
-  Cell,
-  CellColumnPositioning,
-  TableCssClassName as ClassName,
-  TableDecorations,
-} from '../types';
+import type { Cell, CellColumnPositioning } from '../types';
+import { TableCssClassName as ClassName, TableDecorations } from '../types';
 
 const filterDecorationByKey = (
   key: TableDecorations,

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

@@ -12,7 +12,7 @@ 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 { TableLayout } from '@atlaskit/adf-schema';
+import type { TableLayout } from '@atlaskit/adf-schema';
 import type { widthPlugin } from '@atlaskit/editor-plugin-width';
 
 // @public (undocumented)

package/dist/cjs/version.json

@@ -1,5 +0,0 @@
-{
-	"name": "@atlaskit/editor-plugin-table",
-	"version": "2.8.6",
-	"sideEffects": false
-}

package/dist/es2019/version.json

@@ -1,5 +0,0 @@
-{
-	"name": "@atlaskit/editor-plugin-table",
-	"version": "2.8.6",
-	"sideEffects": false
-}

package/dist/esm/version.json

@@ -1,5 +0,0 @@
-{
-	"name": "@atlaskit/editor-plugin-table",
-	"version": "2.8.6",
-	"sideEffects": false
-}