@atlaskit/editor-plugin-table 24.4.10 → 24.4.11

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/editor-plugin-table
 
+## 24.4.11
+
+### Patch Changes
+
+- [`8bdbc5ba79617`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8bdbc5ba79617) -
+  [ux] Gate the table active cell decoration behind `platform_editor_table_q4_patch_3` so it is not
+  calculated or rendered until the editor has had its first interaction. Fix row control
+  mis-alignment issues.
+- Updated dependencies
+
 ## 24.4.10
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableCell.js

@@ -110,6 +110,18 @@ var TableCell = exports.default = /*#__PURE__*/function (_TableNodeView) {
       }
       return didUpdate;
     }
+  }, {
+    key: "ignoreMutation",
+    value: function ignoreMutation(mutation) {
+      var _mutation$attributeNa;
+      // `data-reaches-*` are presentation-only attrs written imperatively for the rounded-corner
+      // masks. Ignore them so ProseMirror doesn't rebuild the table (and drop the header row's
+      // sticky class) on every column insert.
+      if (mutation.type === 'attributes' && (_mutation$attributeNa = mutation.attributeName) !== null && _mutation$attributeNa !== void 0 && _mutation$attributeNa.startsWith('data-reaches-') && (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) && (0, _expValEquals.expValEquals)('platform_editor_table_q4_patch_3', 'isEnabled', true)) {
+        return true;
+      }
+      return false;
+    }
 
     /**
      * Detects whether this cell visually reaches the bottom or right edge of the table

package/dist/cjs/pm-plugins/active-cell-highlight/plugin.js

@@ -1,15 +1,20 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.createPlugin = exports.activeCellHighlightPluginKey = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
 var _utils = require("@atlaskit/editor-tables/utils");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _types = require("../../types");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var EMPTY_STATE = {
   cellPos: -1,
   decorationSet: _view.DecorationSet.empty
@@ -31,6 +36,8 @@ var getActiveCellPos = function getActiveCellPos(state) {
     return -1;
   }
 };
+
+/** Builds the decoration state highlighting the cell at `cellPos`. */
 var buildState = function buildState(cellPos, state) {
   if (cellPos === -1) {
     return EMPTY_STATE;
@@ -51,31 +58,77 @@ var buildState = function buildState(cellPos, state) {
     return EMPTY_STATE;
   }
 };
-var createPlugin = exports.createPlugin = function createPlugin() {
-  return new _safePlugin.SafePlugin({
-    key: activeCellHighlightPluginKey,
-    state: {
-      init: function init(_, state) {
-        return buildState(getActiveCellPos(state), state);
-      },
-      apply: function apply(tr, prev, _oldState, newState) {
-        if (tr.docChanged) {
-          // Doc changed — always rebuild since positions may have shifted
-          return buildState(getActiveCellPos(newState), newState);
-        }
-        if (!tr.selectionSet) {
-          // Neither doc nor selection changed — nothing to do
-          return prev;
-        }
-
-        // Selection changed — only rebuild if cursor moved to a different cell
-        var nextCellPos = getActiveCellPos(newState);
-        if (nextCellPos === prev.cellPos) {
-          return prev;
-        }
-        return buildState(nextCellPos, newState);
+var hasHadInteraction = function hasHadInteraction(api) {
+  var _api$interaction$shar;
+  // The interaction plugin is optional - when absent, default to treating the editor as
+  // interacted.
+  if (!(api !== null && api !== void 0 && api.interaction)) {
+    return true;
+  }
+  return ((_api$interaction$shar = api.interaction.sharedState.currentState()) === null || _api$interaction$shar === void 0 ? void 0 : _api$interaction$shar.interactionState) !== 'hasNotHadInteraction';
+};
+var createLegacyStateField = function createLegacyStateField() {
+  return {
+    init: function init(_config, state) {
+      return buildState(getActiveCellPos(state), state);
+    },
+    apply: function apply(tr, prev, _oldState, newState) {
+      if (tr.docChanged) {
+        // Doc changed — always rebuild since positions may have shifted.
+        return buildState(getActiveCellPos(newState), newState);
+      }
+      if (!tr.selectionSet) {
+        // Neither doc nor selection changed — nothing to do.
+        return prev;
       }
+
+      // Selection changed — only rebuild if the cursor moved to a different cell.
+      var nextCellPos = getActiveCellPos(newState);
+      return nextCellPos === prev.cellPos ? prev : buildState(nextCellPos, newState);
+    }
+  };
+};
+
+/**
+ * Stays hidden until the first interaction
+ */
+var createGatedStateField = function createGatedStateField(api) {
+  return {
+    init: function init(_config, state) {
+      var interacted = hasHadInteraction(api);
+      return _objectSpread(_objectSpread({}, interacted ? buildState(getActiveCellPos(state), state) : EMPTY_STATE), {}, {
+        hasHadInteraction: interacted
+      });
     },
+    apply: function apply(tr, prev, _oldState, newState) {
+      var interacted = hasHadInteraction(api);
+
+      // Keep the highlight hidden until the first interaction has happened.
+      if (!interacted) {
+        return prev;
+      }
+
+      // `true` only on the single transaction that crosses from "no interaction"
+      // to "interacted" — the meta-only transaction that reveals the highlight.
+      var isFirstInteraction = !prev.hasHadInteraction;
+      if (!tr.docChanged && !tr.selectionSet && !isFirstInteraction) {
+        // Doc, selection and interaction are all unchanged — nothing to do.
+        return prev;
+      }
+      var nextCellPos = getActiveCellPos(newState);
+      if (nextCellPos === prev.cellPos && !isFirstInteraction) {
+        return prev;
+      }
+      return _objectSpread(_objectSpread({}, buildState(nextCellPos, newState)), {}, {
+        hasHadInteraction: true
+      });
+    }
+  };
+};
+var createPlugin = exports.createPlugin = function createPlugin(api) {
+  return new _safePlugin.SafePlugin({
+    key: activeCellHighlightPluginKey,
+    state: (0, _expValEquals.expValEquals)('platform_editor_table_q4_patch_3', 'isEnabled', true) ? createGatedStateField(api) : createLegacyStateField(),
     props: {
       decorations: function decorations(state) {
         var _activeCellHighlightP, _activeCellHighlightP2;

package/dist/cjs/tablePlugin.js

@@ -513,7 +513,7 @@ var tablePlugin = function tablePlugin(_ref) {
         plugins.push({
           name: 'tableActiveCellHighlight',
           plugin: function plugin() {
-            return (0, _plugin.createPlugin)();
+            return (0, _plugin.createPlugin)(api);
           }
         });
       }

package/dist/es2019/nodeviews/TableCell.js

@@ -85,6 +85,16 @@ export default class TableCell extends TableNodeView {
     }
     return didUpdate;
   }
+  ignoreMutation(mutation) {
+    var _mutation$attributeNa;
+    // `data-reaches-*` are presentation-only attrs written imperatively for the rounded-corner
+    // masks. Ignore them so ProseMirror doesn't rebuild the table (and drop the header row's
+    // sticky class) on every column insert.
+    if (mutation.type === 'attributes' && (_mutation$attributeNa = mutation.attributeName) !== null && _mutation$attributeNa !== void 0 && _mutation$attributeNa.startsWith('data-reaches-') && expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && expValEquals('platform_editor_table_q4_patch_3', 'isEnabled', true)) {
+      return true;
+    }
+    return false;
+  }
 
   /**
    * Detects whether this cell visually reaches the bottom or right edge of the table

package/dist/es2019/pm-plugins/active-cell-highlight/plugin.js

@@ -3,6 +3,7 @@ import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { findCellClosestToPos } from '@atlaskit/editor-tables/utils';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { TableCssClassName as ClassName } from '../../types';
 const EMPTY_STATE = {
   cellPos: -1,
@@ -25,6 +26,8 @@ const getActiveCellPos = state => {
     return -1;
   }
 };
+
+/** Builds the decoration state highlighting the cell at `cellPos`. */
 const buildState = (cellPos, state) => {
   if (cellPos === -1) {
     return EMPTY_STATE;
@@ -45,31 +48,73 @@ const buildState = (cellPos, state) => {
     return EMPTY_STATE;
   }
 };
-export const createPlugin = () => {
+const hasHadInteraction = api => {
+  var _api$interaction$shar;
+  // The interaction plugin is optional - when absent, default to treating the editor as
+  // interacted.
+  if (!(api !== null && api !== void 0 && api.interaction)) {
+    return true;
+  }
+  return ((_api$interaction$shar = api.interaction.sharedState.currentState()) === null || _api$interaction$shar === void 0 ? void 0 : _api$interaction$shar.interactionState) !== 'hasNotHadInteraction';
+};
+const createLegacyStateField = () => ({
+  init: (_config, state) => buildState(getActiveCellPos(state), state),
+  apply: (tr, prev, _oldState, newState) => {
+    if (tr.docChanged) {
+      // Doc changed — always rebuild since positions may have shifted.
+      return buildState(getActiveCellPos(newState), newState);
+    }
+    if (!tr.selectionSet) {
+      // Neither doc nor selection changed — nothing to do.
+      return prev;
+    }
+
+    // Selection changed — only rebuild if the cursor moved to a different cell.
+    const nextCellPos = getActiveCellPos(newState);
+    return nextCellPos === prev.cellPos ? prev : buildState(nextCellPos, newState);
+  }
+});
+
+/**
+ * Stays hidden until the first interaction
+ */
+const createGatedStateField = api => ({
+  init: (_config, state) => {
+    const interacted = hasHadInteraction(api);
+    return {
+      ...(interacted ? buildState(getActiveCellPos(state), state) : EMPTY_STATE),
+      hasHadInteraction: interacted
+    };
+  },
+  apply: (tr, prev, _oldState, newState) => {
+    const interacted = hasHadInteraction(api);
+
+    // Keep the highlight hidden until the first interaction has happened.
+    if (!interacted) {
+      return prev;
+    }
+
+    // `true` only on the single transaction that crosses from "no interaction"
+    // to "interacted" — the meta-only transaction that reveals the highlight.
+    const isFirstInteraction = !prev.hasHadInteraction;
+    if (!tr.docChanged && !tr.selectionSet && !isFirstInteraction) {
+      // Doc, selection and interaction are all unchanged — nothing to do.
+      return prev;
+    }
+    const nextCellPos = getActiveCellPos(newState);
+    if (nextCellPos === prev.cellPos && !isFirstInteraction) {
+      return prev;
+    }
+    return {
+      ...buildState(nextCellPos, newState),
+      hasHadInteraction: true
+    };
+  }
+});
+export const createPlugin = api => {
   return new SafePlugin({
     key: activeCellHighlightPluginKey,
-    state: {
-      init: (_, state) => {
-        return buildState(getActiveCellPos(state), state);
-      },
-      apply: (tr, prev, _oldState, newState) => {
-        if (tr.docChanged) {
-          // Doc changed — always rebuild since positions may have shifted
-          return buildState(getActiveCellPos(newState), newState);
-        }
-        if (!tr.selectionSet) {
-          // Neither doc nor selection changed — nothing to do
-          return prev;
-        }
-
-        // Selection changed — only rebuild if cursor moved to a different cell
-        const nextCellPos = getActiveCellPos(newState);
-        if (nextCellPos === prev.cellPos) {
-          return prev;
-        }
-        return buildState(nextCellPos, newState);
-      }
-    },
+    state: expValEquals('platform_editor_table_q4_patch_3', 'isEnabled', true) ? createGatedStateField(api) : createLegacyStateField(),
     props: {
       decorations: state => {
         var _activeCellHighlightP, _activeCellHighlightP2;

package/dist/es2019/tablePlugin.js

@@ -496,7 +496,7 @@ const tablePlugin = ({
       if (expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true)) {
         plugins.push({
           name: 'tableActiveCellHighlight',
-          plugin: () => createActiveCellHighlightPlugin()
+          plugin: () => createActiveCellHighlightPlugin(api)
         });
       }
       const browser = getBrowserInfo();

package/dist/esm/nodeviews/TableCell.js

@@ -103,6 +103,18 @@ var TableCell = /*#__PURE__*/function (_TableNodeView) {
       }
       return didUpdate;
     }
+  }, {
+    key: "ignoreMutation",
+    value: function ignoreMutation(mutation) {
+      var _mutation$attributeNa;
+      // `data-reaches-*` are presentation-only attrs written imperatively for the rounded-corner
+      // masks. Ignore them so ProseMirror doesn't rebuild the table (and drop the header row's
+      // sticky class) on every column insert.
+      if (mutation.type === 'attributes' && (_mutation$attributeNa = mutation.attributeName) !== null && _mutation$attributeNa !== void 0 && _mutation$attributeNa.startsWith('data-reaches-') && expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && expValEquals('platform_editor_table_q4_patch_3', 'isEnabled', true)) {
+        return true;
+      }
+      return false;
+    }
 
     /**
      * Detects whether this cell visually reaches the bottom or right edge of the table

package/dist/esm/pm-plugins/active-cell-highlight/plugin.js

@@ -1,8 +1,12 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { findCellClosestToPos } from '@atlaskit/editor-tables/utils';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { TableCssClassName as ClassName } from '../../types';
 var EMPTY_STATE = {
   cellPos: -1,
@@ -25,6 +29,8 @@ var getActiveCellPos = function getActiveCellPos(state) {
     return -1;
   }
 };
+
+/** Builds the decoration state highlighting the cell at `cellPos`. */
 var buildState = function buildState(cellPos, state) {
   if (cellPos === -1) {
     return EMPTY_STATE;
@@ -45,31 +51,77 @@ var buildState = function buildState(cellPos, state) {
     return EMPTY_STATE;
   }
 };
-export var createPlugin = function createPlugin() {
-  return new SafePlugin({
-    key: activeCellHighlightPluginKey,
-    state: {
-      init: function init(_, state) {
-        return buildState(getActiveCellPos(state), state);
-      },
-      apply: function apply(tr, prev, _oldState, newState) {
-        if (tr.docChanged) {
-          // Doc changed — always rebuild since positions may have shifted
-          return buildState(getActiveCellPos(newState), newState);
-        }
-        if (!tr.selectionSet) {
-          // Neither doc nor selection changed — nothing to do
-          return prev;
-        }
-
-        // Selection changed — only rebuild if cursor moved to a different cell
-        var nextCellPos = getActiveCellPos(newState);
-        if (nextCellPos === prev.cellPos) {
-          return prev;
-        }
-        return buildState(nextCellPos, newState);
+var hasHadInteraction = function hasHadInteraction(api) {
+  var _api$interaction$shar;
+  // The interaction plugin is optional - when absent, default to treating the editor as
+  // interacted.
+  if (!(api !== null && api !== void 0 && api.interaction)) {
+    return true;
+  }
+  return ((_api$interaction$shar = api.interaction.sharedState.currentState()) === null || _api$interaction$shar === void 0 ? void 0 : _api$interaction$shar.interactionState) !== 'hasNotHadInteraction';
+};
+var createLegacyStateField = function createLegacyStateField() {
+  return {
+    init: function init(_config, state) {
+      return buildState(getActiveCellPos(state), state);
+    },
+    apply: function apply(tr, prev, _oldState, newState) {
+      if (tr.docChanged) {
+        // Doc changed — always rebuild since positions may have shifted.
+        return buildState(getActiveCellPos(newState), newState);
+      }
+      if (!tr.selectionSet) {
+        // Neither doc nor selection changed — nothing to do.
+        return prev;
       }
+
+      // Selection changed — only rebuild if the cursor moved to a different cell.
+      var nextCellPos = getActiveCellPos(newState);
+      return nextCellPos === prev.cellPos ? prev : buildState(nextCellPos, newState);
+    }
+  };
+};
+
+/**
+ * Stays hidden until the first interaction
+ */
+var createGatedStateField = function createGatedStateField(api) {
+  return {
+    init: function init(_config, state) {
+      var interacted = hasHadInteraction(api);
+      return _objectSpread(_objectSpread({}, interacted ? buildState(getActiveCellPos(state), state) : EMPTY_STATE), {}, {
+        hasHadInteraction: interacted
+      });
     },
+    apply: function apply(tr, prev, _oldState, newState) {
+      var interacted = hasHadInteraction(api);
+
+      // Keep the highlight hidden until the first interaction has happened.
+      if (!interacted) {
+        return prev;
+      }
+
+      // `true` only on the single transaction that crosses from "no interaction"
+      // to "interacted" — the meta-only transaction that reveals the highlight.
+      var isFirstInteraction = !prev.hasHadInteraction;
+      if (!tr.docChanged && !tr.selectionSet && !isFirstInteraction) {
+        // Doc, selection and interaction are all unchanged — nothing to do.
+        return prev;
+      }
+      var nextCellPos = getActiveCellPos(newState);
+      if (nextCellPos === prev.cellPos && !isFirstInteraction) {
+        return prev;
+      }
+      return _objectSpread(_objectSpread({}, buildState(nextCellPos, newState)), {}, {
+        hasHadInteraction: true
+      });
+    }
+  };
+};
+export var createPlugin = function createPlugin(api) {
+  return new SafePlugin({
+    key: activeCellHighlightPluginKey,
+    state: expValEquals('platform_editor_table_q4_patch_3', 'isEnabled', true) ? createGatedStateField(api) : createLegacyStateField(),
     props: {
       decorations: function decorations(state) {
         var _activeCellHighlightP, _activeCellHighlightP2;

package/dist/esm/tablePlugin.js

@@ -504,7 +504,7 @@ var tablePlugin = function tablePlugin(_ref) {
         plugins.push({
           name: 'tableActiveCellHighlight',
           plugin: function plugin() {
-            return createActiveCellHighlightPlugin();
+            return createActiveCellHighlightPlugin(api);
           }
         });
       }

package/dist/types/nodeviews/TableCell.d.ts

@@ -8,6 +8,10 @@ export default class TableCell extends TableNodeView<HTMLElement> implements Nod
     constructor(node: PMNode, view: EditorView, getPos: () => number | undefined, eventDispatcher: EventDispatcher, editorAnalyticsAPI: EditorAnalyticsAPI | undefined);
     destroy: () => void;
     update(node: PMNode): boolean;
+    ignoreMutation(mutation: MutationRecord | {
+        target: Node;
+        type: 'selection';
+    }): boolean;
     /**
      * Detects whether this cell visually reaches the bottom or right edge of the table
      * (accounting for rowspan/colspan) and sets data attributes so CSS can apply

package/dist/types/pm-plugins/active-cell-highlight/plugin.d.ts

@@ -1,11 +1,14 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import type { PluginInjectionAPI } from '../../types';
 interface ActiveCellHighlightState {
     /** Position of the currently highlighted cell, or -1 if none */
     cellPos: number;
     decorationSet: DecorationSet;
+    /** Whether the editor has had its first interaction. */
+    hasHadInteraction?: boolean;
 }
 export declare const activeCellHighlightPluginKey: PluginKey<ActiveCellHighlightState>;
-export declare const createPlugin: () => SafePlugin<ActiveCellHighlightState>;
+export declare const createPlugin: (api?: PluginInjectionAPI) => SafePlugin<ActiveCellHighlightState>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "24.4.10",
+	"version": "24.4.11",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -52,7 +52,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.0.0",
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^2.0.0",
 		"@atlaskit/primitives": "^22.0.0",
-		"@atlaskit/tmp-editor-statsig": "^126.2.0",
+		"@atlaskit/tmp-editor-statsig": "^126.4.0",
 		"@atlaskit/toggle": "^17.1.0",
 		"@atlaskit/tokens": "^16.0.0",
 		"@atlaskit/tooltip": "^23.1.0",