@atlaskit/editor-plugin-table 1.2.4 → 1.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "1.2.4",
+  "version": "1.2.6",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -19,7 +19,8 @@
   },
   "dependencies": {
     "@atlaskit/adf-schema": "^25.5.0",
-    "@atlaskit/editor-common": "^72.8.0",
+    "@atlaskit/editor-common": "^73.0.0",
+    "@atlaskit/editor-palette": "1.3.0",
     "@atlaskit/editor-shared-styles": "^2.3.0",
     "@atlaskit/editor-tables": "^2.2.0",
     "@atlaskit/icon": "^21.11.0",
@@ -51,11 +52,11 @@
   "devDependencies": {
     "@atlaskit/analytics-next": "^9.0.0",
     "@atlaskit/button": "^16.6.0",
-    "@atlaskit/editor-core": "^182.1.0",
-    "@atlaskit/editor-plugin-feature-flags": "^0.0.3",
+    "@atlaskit/editor-core": "^182.2.0",
+    "@atlaskit/editor-plugin-feature-flags": "^0.0.4",
     "@atlaskit/editor-test-helpers": "^18.2.0",
     "@atlaskit/link-provider": "^1.5.0",
-    "@atlaskit/logo": "^13.12.0",
+    "@atlaskit/logo": "^13.13.0",
     "@atlaskit/media-integration-test-helpers": "^2.6.0",
     "@atlaskit/synchrony-test-helpers": "^2.3.0",
     "@atlaskit/util-data-test": "^17.7.0",

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

@@ -347,23 +347,11 @@ describe('table local id plugin', () => {
         editorView.updateState(state3);
         dispatchPasteEvent(editorView, { html: dom.innerHTML, plain: text });
 
-        /**
-         * The end result order of IDs that we'll now observe is the following:
-         *  1. flooFirst
-         *  2. flooThird
-         *  3. flooSecond
-         *
-         * This is because we had `flooFirst` in our clipboard. We've now pasted
-         * it into the expand, so that becomes the first observed instance of
-         * the table. The "third" ID (second unique regeneration) then gets
-         * replaced in the first layout column.
-         *
-         */
         expect(editorView.state.doc).toEqualDocument(
           doc(
-            expand({ title: '' })(generateTableWithLocalId(flooFirst)),
+            expand({ title: '' })(generateTableWithLocalId(flooThird)),
             layoutSection(
-              layoutColumn({ width: 50 })(generateTableWithLocalId(flooThird)),
+              layoutColumn({ width: 50 })(generateTableWithLocalId(flooFirst)),
               layoutColumn({ width: 50 })(generateTableWithLocalId(flooSecond)),
             ),
             p(),

package/src/__tests__/visual-regression/__image_snapshots__/sticky-header-ts-snapshot-test-table-sticky-header-should-align-with-table-cell-when-active-1-snap.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4c5e3b7ade5e92b861452ef14e9774592b6252c91a89e955a33e56e3678cf54c
-size 20560
+oid sha256:7e4711c029f049a837051d496f231798f2242062e12e31917fa6ea29e6b8c642
+size 20453

package/src/__tests__/visual-regression/__image_snapshots__/sticky-header-ts-snapshot-test-table-sticky-header-should-align-with-table-cell-when-active-2-snap.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:19e5db9586d2f5b635464786308235a3da2adda2bea5ab7dcde7a50d901cd869
-size 19731
+oid sha256:a063075cc5504c85ba5809ece337a3a687f58a74fdb9e2b820e8ab6d234b8dd7
+size 19687

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

@@ -38,8 +38,7 @@ describe('Snapshot Test: Table', () => {
   });
 
   describe('sticky header', () => {
-    // FIXME: This test was automatically skipped due to failure on 14/02/2023: https://product-fabric.atlassian.net/browse/ED-16900
-    it.skip('should align with table cell when active', async () => {
+    it('should align with table cell when active', async () => {
       await initEditor(page, stickyHeaderWithHorizontalScroll);
 
       await clickFirstCell(page, true);

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

@@ -12,13 +12,13 @@
  */
 import { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { EditorState, PluginKey, Transaction } from 'prosemirror-state';
-import { NodeType } from 'prosemirror-model';
+import { EditorState, PluginKey } from 'prosemirror-state';
+import { Node as ProsemirrorNode } from 'prosemirror-model';
 import rafSchedule from 'raf-schd';
 
 import { uuid } from '@atlaskit/adf-schema';
 
-import { stepAddsOneOf } from '@atlaskit/editor-common/utils';
+import { stepHasSlice } from '@atlaskit/editor-common/utils';
 
 interface TableLocalIdPluginState {
   // One time parse for initial load with existing tables without localIds
@@ -31,15 +31,6 @@ const getPluginState = (
 ): TableLocalIdPluginState | undefined | null =>
   state && pluginKey.getState(state);
 
-/**
- * Traverses a transaction's steps to see if we're inserting any tables
- */
-const checkIsAddingTable = (transaction: Transaction, nodeType: NodeType) => {
-  return transaction.steps.some((step) =>
-    stepAddsOneOf(step, new Set([nodeType])),
-  );
-};
-
 /**
  * Ensures uniqueness of `localId`s on tables being created or edited
  */
@@ -143,7 +134,9 @@ const createPlugin = (dispatch: Dispatch) =>
       const tr = newState.tr;
       const { table } = newState.schema.nodes;
 
-      const idsObserved = new Set<string>();
+      const addedTableNodes: Set<ProsemirrorNode> = new Set();
+      const addedTableNodePos: Map<ProsemirrorNode, number> = new Map();
+      const localIds: Set<string> = new Set();
 
       transactions.forEach((transaction) => {
         if (!transaction.docChanged) {
@@ -157,43 +150,66 @@ const createPlugin = (dispatch: Dispatch) =>
           return;
         }
 
-        /** Check if we're actually inserting a table, otherwise we can ignore this tr */
-        const isAddingTable = checkIsAddingTable(transaction, table);
-        if (!isAddingTable) {
-          return;
-        }
+        /** Get the tables we are adding and their position */
+        for (const step of transaction.steps) {
+          if (!stepHasSlice(step)) {
+            continue;
+          }
 
-        // Can't simply look at changed nodes, as we could be adding a table
-        newState.doc.descendants((node, pos) => {
-          const isTable = node.type === table;
-          const localId = node.attrs.localId;
-
-          // Dealing with a table - make sure it's a unique ID
-          if (isTable) {
-            if (localId && !idsObserved.has(localId)) {
-              idsObserved.add(localId);
-              // Also add a localId if it happens to not have one,
-            } else if (!localId || idsObserved.has(localId)) {
-              modified = true;
-              tr.setNodeMarkup(pos, undefined, {
-                ...node.attrs,
-                localId: uuid.generate(),
-              });
+          step.slice.content.descendants((node, pos) => {
+            if (node.type === table) {
+              addedTableNodes.add(node);
             }
-            return false;
-          }
 
-          /**
-           * Otherwise continue traversing, we can encounter tables nested in
-           * expands/bodiedExtensions
-           */
+            return true;
+          });
+        }
+      });
+
+      if (!addedTableNodes.size) {
+        return;
+      }
+
+      // Get the existing localIds on the page
+      newState.doc.descendants((node, pos) => {
+        // Skip if this is position of added table
+        if (addedTableNodes.has(node)) {
+          addedTableNodePos.set(node, pos);
+          return false;
+        }
+
+        if (node.type !== table) {
           return true;
-        });
+        }
+
+        localIds.add(node.attrs.localId);
+
+        // can't have table within a table
+        return false;
       });
 
+      // If the added nodes have duplicate id, generate a new one
+      for (const node of addedTableNodes) {
+        if (!node.attrs.localId || localIds.has(node.attrs.localId)) {
+          const pos = addedTableNodePos.get(node);
+
+          if (pos === undefined) {
+            continue;
+          }
+
+          tr.setNodeMarkup(pos, undefined, {
+            ...node.attrs,
+            localId: uuid.generate(),
+          });
+
+          modified = true;
+        }
+      }
+
       if (modified) {
         return tr;
       }
+
       return;
     },
   });

package/src/plugins/table/ui/FloatingContextualMenu/ContextualMenu.tsx

@@ -2,6 +2,7 @@
 import { Component } from 'react';
 import { jsx } from '@emotion/react';
 import { Rect } from '@atlaskit/editor-tables/table-map';
+import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import { splitCell } from '@atlaskit/editor-tables/utils';
 import { EditorView } from 'prosemirror-view';
 import {
@@ -252,6 +253,7 @@ export class ContextualMenu extends Component<
                     palette: cellBackgroundColorPalette,
                     paletteColorTooltipMessages:
                       backgroundPaletteTooltipMessages,
+                    hexToPaletteColor: hexToEditorBackgroundPaletteColor,
                     // We did not want to create new FF or update
                     //  useSomewhatSemanticTextColorNames name
                     //  because it is temporary and require extra work.