@atlaskit/editor-plugin-table 2.8.6 → 2.9.0

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)