@atlaskit/editor-plugin-table 3.0.2 → 3.0.4

package/src/__tests__/visual-regression/__image_snapshots__/cell-options-menu-ts-table-cell-options-menu-delete-column-menu-item-should-remove-the-table-column-on-click-1-snap.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e09a662deaa9b014c1e12fd8fb2f9d459e6d111d5678837ad029e099d1ca8520
-size 15379
+oid sha256:62f21c718cb5c25d43706c9c34275db8ed11bd33b6fe8e6ed1068c2ccc9f0e93
+size 15405

package/src/__tests__/visual-regression/__image_snapshots__/cell-options-menu-ts-table-cell-options-menu-delete-column-menu-item-visual-hints-should-be-added-to-the-table-column-on-hover-1-snap.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:7e8a49dcb4d8cc54649f09578e9918425d1eb17e7d7783ad8e1e083ca096c185
-size 33219
+oid sha256:a477e5c2e5c14b2eb39aaf5d33020f4183de81f3a4cbead7efb5d8a13f1d5b08
+size 33229

package/src/__tests__/visual-regression/__image_snapshots__/cell-options-menu-ts-table-cell-options-menu-delete-row-menu-item-should-remove-the-table-row-on-click-1-snap.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:7050307cfa80b31c43ec57d695a37a7812f4037fd5b07b8d771c335b7bda005f
-size 15307
+oid sha256:ea02c0da089226d50b728af2b06dfda143df89c42f02acbb637a973d303c3850
+size 15326

package/src/__tests__/visual-regression/__image_snapshots__/cell-options-menu-ts-table-cell-options-menu-delete-row-menu-item-visual-hints-should-be-added-to-the-table-row-on-hover-1-snap.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:65193ee6064523ad095458c47dfb4377fe145ab71886eb4b5088e6cd2914bfb1
-size 33260
+oid sha256:9b38819ea18d4c8ab4aa5118d3e81c8875b95cdd7e9fbcc61e6d3bc414dc85d4
+size 33268

package/src/__tests__/visual-regression/cell-options-menu.ts

@@ -1,9 +1,11 @@
+// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
 import { insertTable } from '@atlaskit/editor-test-helpers/page-objects/table';
+// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
 import {
   initFullPageEditorWithAdf,
   snapshot,
 } from '@atlaskit/editor-test-helpers/vr-utils/base-utils';
-import { PuppeteerPage } from '@atlaskit/visual-regression/helper';
+import type { PuppeteerPage } from '@atlaskit/visual-regression/helper';
 
 const firstCellSelector = 'table tbody th p';
 const cellOptionsSelector = '[aria-label="Cell options"]';

package/src/__tests__/visual-regression/index.ts

@@ -1,13 +1,16 @@
+// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
 import {
   scrollToBottom,
   scrollToElement,
 } from '@atlaskit/editor-test-helpers/page-objects/editor';
+// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
 import {
   initFullPageEditorWithAdf,
   snapshot,
 } from '@atlaskit/editor-test-helpers/vr-utils/base-utils';
+// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
 import { Device } from '@atlaskit/editor-test-helpers/vr-utils/device-viewport';
-import { PuppeteerPage } from '@atlaskit/visual-regression/helper';
+import type { PuppeteerPage } from '@atlaskit/visual-regression/helper';
 
 import tableWith100ListItemsADF from './__fixtures__/table-with-100-numbered-list-items.json';
 

package/src/__tests__/visual-regression/sticky-header.ts

@@ -1,11 +1,14 @@
+// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
 import { scrollToElement } from '@atlaskit/editor-test-helpers/page-objects/editor';
+// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
 import { clickFirstCell } from '@atlaskit/editor-test-helpers/page-objects/table';
+// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
 import {
   Appearance,
   initEditorWithAdf,
   snapshot,
 } from '@atlaskit/editor-test-helpers/vr-utils/base-utils';
-import { PuppeteerPage } from '@atlaskit/visual-regression/helper';
+import type { PuppeteerPage } from '@atlaskit/visual-regression/helper';
 
 import stickyHeaderWithHorizontalScroll from './__fixtures__/sticky-header-with-horizontal-scroll.json';
 

package/src/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.ts

@@ -1,18 +1,19 @@
 import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
 
-import { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
+import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
-import { mapChildren } from '@atlaskit/editor-common/utils';
-import { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
-import { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
+import { browser, mapChildren } from '@atlaskit/editor-common/utils';
+import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
 
+import type { TablePluginState } from '../../../types';
 import {
   TableCssClassName as ClassName,
   TableCssClassName,
-  TablePluginState,
 } from '../../../types';
 import {
+  STICKY_HEADER_TOGGLE_TOLERANCE_MS,
   stickyHeaderBorderBottomWidth,
   stickyRowOffsetTop,
   tableControlsSpacing,
@@ -25,7 +26,8 @@ import {
 } from '../../table-resizing/utils/dom';
 import { updateStickyState } from '../commands';
 
-import { getTop, getTree, TableDOMElements } from './dom';
+import type { TableDOMElements } from './dom';
+import { getTop, getTree } from './dom';
 
 // limit scroll event calls
 const HEADER_ROW_SCROLL_THROTTLE_TIMEOUT = 200;
@@ -73,6 +75,7 @@ export class TableRowNodeView implements NodeView {
   focused = false;
   topPosEditorElement = 0;
   isSticky: boolean;
+  lastStickyTimestamp: number | undefined;
   lastTimePainted: number;
 
   private intersectionObserver?: IntersectionObserver;
@@ -104,6 +107,7 @@ export class TableRowNodeView implements NodeView {
     this.lastTimePainted = 0;
     this.isHeaderRow = supportedHeaderRow(node);
     this.isSticky = false;
+    this.lastStickyTimestamp = undefined;
 
     if (this.isHeaderRow) {
       this.dom.setAttribute('data-header-row', 'true');
@@ -257,6 +261,7 @@ export class TableRowNodeView implements NodeView {
             this.sentinels.bottom.style.bottom = `${
               tableScrollbarOffset + stickyRowOffsetTop + newHeight
             }px`;
+
             updateTableMargin(table);
           }
         }
@@ -293,6 +298,7 @@ export class TableRowNodeView implements NodeView {
             if (!entry.isIntersecting && !sentinelIsBelowScrollArea) {
               this.tree &&
                 this.makeHeaderRowSticky(this.tree, entry.rootBounds?.top);
+              this.lastStickyTimestamp = Date.now();
             } else {
               table && this.makeRowHeaderNotSticky(table);
             }
@@ -306,12 +312,25 @@ export class TableRowNodeView implements NodeView {
               (entry.rootBounds?.top || 0);
 
             if (table && !entry.isIntersecting && sentinelIsAboveScrollArea) {
-              this.makeRowHeaderNotSticky(table);
+              // Not a perfect solution, but need to this code specific for FireFox ED-19177
+              if (browser.gecko) {
+                if (
+                  this.lastStickyTimestamp &&
+                  Date.now() - this.lastStickyTimestamp >
+                    STICKY_HEADER_TOGGLE_TOLERANCE_MS
+                ) {
+                  this.makeRowHeaderNotSticky(table);
+                }
+              } else {
+                this.makeRowHeaderNotSticky(table);
+              }
             } else if (entry.isIntersecting && sentinelIsAboveScrollArea) {
               this.tree &&
                 this.makeHeaderRowSticky(this.tree, entry?.rootBounds?.top);
+              this.lastStickyTimestamp = Date.now();
             }
           }
+          return;
         });
       },
       { root: this.editorScrollableElement as Element },

package/src/plugins/table/pm-plugins/sticky-headers/util.ts

@@ -1,4 +1,4 @@
-import { StickyPluginState } from './types';
+import type { StickyPluginState } from './types';
 
 // only worry about the first row for now
 export const findStickyHeaderForTable = (

package/src/plugins/table/pm-plugins/table-local-id.ts

@@ -13,11 +13,12 @@
 import rafSchedule from 'raf-schd';
 
 import { uuid } from '@atlaskit/adf-schema';
-import { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
+import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { stepHasSlice } from '@atlaskit/editor-common/utils';
-import { Node as ProsemirrorNode } from '@atlaskit/editor-prosemirror/model';
-import { EditorState, PluginKey } from '@atlaskit/editor-prosemirror/state';
+import type { Node as ProsemirrorNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 
 interface TableLocalIdPluginState {
   // One time parse for initial load with existing tables without localIds
@@ -95,7 +96,7 @@ const createPlugin = (dispatch: Dispatch) =>
 
           const { table } = state.schema.nodes;
           rafSchedule(() => {
-            const tr = state.tr;
+            const tr = editorView.state.tr;
             let tableIdWasAdded = false;
             editorView.state.doc.descendants((node, pos) => {
               const isTable = node.type === table;

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

@@ -8,6 +8,8 @@ import {
   akEditorTableBorderSelected,
   akEditorTableCellBlanketDeleted,
   akEditorTableCellBlanketSelected,
+  akEditorTableHeaderCellBackground,
+  akEditorTableHeaderCellBackgroundDark,
   akEditorTableToolbar,
   akEditorTableToolbarDark,
   akEditorTableToolbarSize,
@@ -42,10 +44,18 @@ export const tableCellBackgroundColor = themed({
   light: token('elevation.surface', N0),
   dark: token('elevation.surface', DN30),
 });
+
 export const tableHeaderCellBackgroundColor = themed({
-  light: token('color.background.neutral', akEditorTableToolbar),
-  dark: token('color.background.neutral', akEditorTableToolbarDark),
+  light: token(
+    'color.background.accent.gray.subtlest',
+    akEditorTableHeaderCellBackground,
+  ),
+  dark: token(
+    'color.background.accent.gray.subtlest',
+    akEditorTableHeaderCellBackgroundDark,
+  ),
 });
+
 export const tableToolbarColor = themed({
   light: token('color.background.neutral.subtle', akEditorTableToolbar),
   dark: token('color.background.neutral.subtle', akEditorTableToolbarDark),
@@ -135,3 +145,4 @@ export const tableOverflowShadowWidth = 8;
 export const TABLE_SNAP_GAP = 9;
 export const TABLE_HIGHLIGHT_GAP = 10;
 export const TABLE_HIGHLIGHT_TOLERANCE = 2;
+export const STICKY_HEADER_TOGGLE_TOLERANCE_MS = 5;

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

@@ -510,7 +510,7 @@ export const resizeHandle = (props: ThemeProps) => css`
     td.${ClassName.WITH_RESIZE_LINE}::before {
       content: ' ';
       position: absolute;
-      left: -2px;
+      left: ${token('space.negative.025', '-2px')};
       top: -1px;
       width: ${resizeLineWidth}px;
       height: calc(100% + 2px);
@@ -520,7 +520,7 @@ export const resizeHandle = (props: ThemeProps) => css`
 
     th.${ClassName.WITH_RESIZE_LINE}::before {
       content: ' ';
-      left: -2px;
+      left: ${token('space.negative.025', '-2px')};
       position: absolute;
       width: ${resizeLineWidth}px;
       height: calc(100% + ${tableToolbarSize + tableCellBorderWidth}px);