@atlaskit/editor-plugin-table 40.0.1 → 40.0.3

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/editor-plugin-table
 
+## 40.0.3
+
+### Patch Changes
+
+- [`c011dee405917`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c011dee405917) -
+  Fix the table cell options button being hidden behind native sticky header rows after scrolling,
+  behind the `platform_editor_table_cell_menu_btn_zindex` experiment. The anchored button now uses
+  the sticky header button z-index so it stays above the header with
+  `platform_editor_sticky_headers_zindex` enabled or disabled.
+- Updated dependencies
+
+## 40.0.2
+
+### Patch Changes
+
+- [`72696d778e3ae`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/72696d778e3ae) -
+  Reduce renderer table cell cloning and map active cell highlights through document changes behind
+  platform_editor_table_q4_perf_patch.
+
+  Only evaluate the performance patch when platform_editor_table_q4_loveability is enabled.
+
+- Updated dependencies
+
 ## 40.0.1
 
 ### Patch Changes

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

@@ -11,6 +11,8 @@ 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 _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
+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; }
@@ -57,6 +59,23 @@ var buildState = function buildState(cellPos, state) {
     return EMPTY_STATE;
   }
 };
+
+/** Keep the highlight on the whole active cell after document edits. */
+var mapOrRebuildActiveCellHighlight = function mapOrRebuildActiveCellHighlight(tr, prev, newState, nextCellPos) {
+  var decorationSet = prev.decorationSet.map(tr.mapping, newState.doc);
+  var decorations = decorationSet.find();
+  var cell = nextCellPos === -1 ? null : newState.doc.nodeAt(nextCellPos);
+  if (cell && decorations.length === 1 && decorations[0].from === nextCellPos && decorations[0].to === nextCellPos + cell.nodeSize) {
+    return {
+      cellPos: nextCellPos,
+      decorationSet: decorationSet,
+      hasHadInteraction: true
+    };
+  }
+  return _objectSpread(_objectSpread({}, buildState(nextCellPos, newState)), {}, {
+    hasHadInteraction: true
+  });
+};
 var hasHadInteraction = function hasHadInteraction(api) {
   var _api$interaction$shar;
   // The interaction plugin is optional - when absent, default to treating the editor as
@@ -92,6 +111,9 @@ var createStateField = function createStateField(api) {
         return prev;
       }
       var nextCellPos = getActiveCellPos(newState);
+      if (tr.docChanged && (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_table_q4_perf_patch')) {
+        return mapOrRebuildActiveCellHighlight(tr, prev, newState, nextCellPos);
+      }
       if (nextCellPos === prev.cellPos && !isFirstInteraction) {
         return prev;
       }

package/dist/cjs/ui/FloatingContextualButton/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = _default;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _reactIntl = require("react-intl");
@@ -19,24 +20,23 @@ var _useSharedPluginStateWithSelector = require("@atlaskit/editor-common/useShar
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _constants = require("@atlaskit/editor-shared-styles/constants");
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-down"));
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _commands = require("../../pm-plugins/commands");
 var _pluginFactory = require("../../pm-plugins/plugin-factory");
 var _stickyHeader = require("../../pm-plugins/utils/sticky-header");
 var _types = require("../../types");
+var _stickyHeaderZIndex = require("../sticky-header-z-index");
 var _FixedButton = _interopRequireDefault(require("./FixedButton"));
 var _styles = require("./styles");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-/**
+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; } /**
  * @jsxRuntime classic
  * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
+ */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 // Ignored via go/ees005
 // eslint-disable-next-line import/no-named-as-default
-
 var BUTTON_OFFSET = 3;
 var CONTEXTUAL_MENU_BUTTON_Z_INDEX = 2;
 var anchorStyles = (0, _react2.css)({
@@ -171,13 +171,16 @@ var FloatingContextualButtonInner = /*#__PURE__*/_react.default.memo(function (p
     if (rowAnchorName && colAnchorName) {
       return (0, _react2.jsx)("div", {
         css: anchorStyles,
-        style: {
+        style: _objectSpread({
           // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
           top: "calc(".concat(BUTTON_OFFSET, "px + anchor(").concat(rowAnchorName, " top))"),
           right: "calc(".concat(BUTTON_OFFSET, "px + anchor(").concat(colAnchorName, " right))"),
           // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
           positionAnchor: colAnchorName
-        } // need to do this because CSSProperties doesn't have positionAnchor property even though it's a valid CSS property
+        }, (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_table_cell_menu_btn_zindex') && {
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+          zIndex: (0, _stickyHeaderZIndex.getTableZIndexes)().headerButton
+        }) // need to do this because CSSProperties doesn't have positionAnchor property even though it's a valid CSS property
         ,
         "data-testid": "table-cell-options-anchor-wrapper"
       }, button);

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

@@ -3,6 +3,8 @@ 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 { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { TableCssClassName as ClassName } from '../../types';
 const EMPTY_STATE = {
   cellPos: -1,
@@ -47,6 +49,24 @@ const buildState = (cellPos, state) => {
     return EMPTY_STATE;
   }
 };
+
+/** Keep the highlight on the whole active cell after document edits. */
+const mapOrRebuildActiveCellHighlight = (tr, prev, newState, nextCellPos) => {
+  const decorationSet = prev.decorationSet.map(tr.mapping, newState.doc);
+  const decorations = decorationSet.find();
+  const cell = nextCellPos === -1 ? null : newState.doc.nodeAt(nextCellPos);
+  if (cell && decorations.length === 1 && decorations[0].from === nextCellPos && decorations[0].to === nextCellPos + cell.nodeSize) {
+    return {
+      cellPos: nextCellPos,
+      decorationSet,
+      hasHadInteraction: true
+    };
+  }
+  return {
+    ...buildState(nextCellPos, newState),
+    hasHadInteraction: true
+  };
+};
 const hasHadInteraction = api => {
   var _api$interaction$shar;
   // The interaction plugin is optional - when absent, default to treating the editor as
@@ -82,6 +102,9 @@ const createStateField = api => ({
       return prev;
     }
     const nextCellPos = getActiveCellPos(newState);
+    if (tr.docChanged && expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && isExperimentEnabled('platform_editor_table_q4_perf_patch')) {
+      return mapOrRebuildActiveCellHighlight(tr, prev, newState, nextCellPos);
+    }
     if (nextCellPos === prev.cellPos && !isFirstInteraction) {
       return prev;
     }

package/dist/es2019/ui/FloatingContextualButton/index.js

@@ -16,11 +16,13 @@ import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/useSha
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorSmallZIndex } from '@atlaskit/editor-shared-styles/constants';
 import ExpandIcon from '@atlaskit/icon/core/chevron-down';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { toggleActiveTableMenu, toggleContextualMenu } from '../../pm-plugins/commands';
 import { getPluginState } from '../../pm-plugins/plugin-factory';
 import { isNativeStickySupported } from '../../pm-plugins/utils/sticky-header';
 import { TableCssClassName as ClassName } from '../../types';
+import { getTableZIndexes } from '../sticky-header-z-index';
 // Ignored via go/ees005
 // eslint-disable-next-line import/no-named-as-default
 import FixedButton from './FixedButton';
@@ -177,7 +179,13 @@ const FloatingContextualButtonInner = /*#__PURE__*/React.memo(props => {
           top: `calc(${BUTTON_OFFSET}px + anchor(${rowAnchorName} top))`,
           right: `calc(${BUTTON_OFFSET}px + anchor(${colAnchorName} right))`,
           // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-          positionAnchor: colAnchorName
+          positionAnchor: colAnchorName,
+          // The native sticky header row paints above the default z-index, hiding the button.
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- z-index depends on runtime experiments
+          ...(isExperimentEnabled('platform_editor_table_cell_menu_btn_zindex') && {
+            // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+            zIndex: getTableZIndexes().headerButton
+          })
         } // need to do this because CSSProperties doesn't have positionAnchor property even though it's a valid CSS property
         ,
         "data-testid": "table-cell-options-anchor-wrapper"

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

@@ -6,6 +6,8 @@ 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 { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { TableCssClassName as ClassName } from '../../types';
 var EMPTY_STATE = {
   cellPos: -1,
@@ -50,6 +52,23 @@ var buildState = function buildState(cellPos, state) {
     return EMPTY_STATE;
   }
 };
+
+/** Keep the highlight on the whole active cell after document edits. */
+var mapOrRebuildActiveCellHighlight = function mapOrRebuildActiveCellHighlight(tr, prev, newState, nextCellPos) {
+  var decorationSet = prev.decorationSet.map(tr.mapping, newState.doc);
+  var decorations = decorationSet.find();
+  var cell = nextCellPos === -1 ? null : newState.doc.nodeAt(nextCellPos);
+  if (cell && decorations.length === 1 && decorations[0].from === nextCellPos && decorations[0].to === nextCellPos + cell.nodeSize) {
+    return {
+      cellPos: nextCellPos,
+      decorationSet: decorationSet,
+      hasHadInteraction: true
+    };
+  }
+  return _objectSpread(_objectSpread({}, buildState(nextCellPos, newState)), {}, {
+    hasHadInteraction: true
+  });
+};
 var hasHadInteraction = function hasHadInteraction(api) {
   var _api$interaction$shar;
   // The interaction plugin is optional - when absent, default to treating the editor as
@@ -85,6 +104,9 @@ var createStateField = function createStateField(api) {
         return prev;
       }
       var nextCellPos = getActiveCellPos(newState);
+      if (tr.docChanged && expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && isExperimentEnabled('platform_editor_table_q4_perf_patch')) {
+        return mapOrRebuildActiveCellHighlight(tr, prev, newState, nextCellPos);
+      }
       if (nextCellPos === prev.cellPos && !isFirstInteraction) {
         return prev;
       }

package/dist/esm/ui/FloatingContextualButton/index.js

@@ -1,3 +1,6 @@
+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; }
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -16,11 +19,13 @@ import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/useSha
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorSmallZIndex } from '@atlaskit/editor-shared-styles/constants';
 import ExpandIcon from '@atlaskit/icon/core/chevron-down';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { toggleActiveTableMenu, toggleContextualMenu } from '../../pm-plugins/commands';
 import { getPluginState } from '../../pm-plugins/plugin-factory';
 import { isNativeStickySupported } from '../../pm-plugins/utils/sticky-header';
 import { TableCssClassName as ClassName } from '../../types';
+import { getTableZIndexes } from '../sticky-header-z-index';
 // Ignored via go/ees005
 // eslint-disable-next-line import/no-named-as-default
 import FixedButton from './FixedButton';
@@ -159,13 +164,16 @@ var FloatingContextualButtonInner = /*#__PURE__*/React.memo(function (props) {
     if (rowAnchorName && colAnchorName) {
       return jsx("div", {
         css: anchorStyles,
-        style: {
+        style: _objectSpread({
           // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
           top: "calc(".concat(BUTTON_OFFSET, "px + anchor(").concat(rowAnchorName, " top))"),
           right: "calc(".concat(BUTTON_OFFSET, "px + anchor(").concat(colAnchorName, " right))"),
           // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
           positionAnchor: colAnchorName
-        } // need to do this because CSSProperties doesn't have positionAnchor property even though it's a valid CSS property
+        }, isExperimentEnabled('platform_editor_table_cell_menu_btn_zindex') && {
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+          zIndex: getTableZIndexes().headerButton
+        }) // need to do this because CSSProperties doesn't have positionAnchor property even though it's a valid CSS property
         ,
         "data-testid": "table-cell-options-anchor-wrapper"
       }, button);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "40.0.1",
+	"version": "40.0.3",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -29,7 +29,7 @@
 		"@atlaskit/editor-plugin-batch-attribute-updates": "^28.0.0",
 		"@atlaskit/editor-plugin-content-insertion": "^28.0.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^30.0.0",
-		"@atlaskit/editor-plugin-extension": "31.0.0",
+		"@atlaskit/editor-plugin-extension": "31.0.2",
 		"@atlaskit/editor-plugin-guideline": "^28.0.0",
 		"@atlaskit/editor-plugin-interaction": "^42.0.0",
 		"@atlaskit/editor-plugin-limited-mode": "^25.0.0",
@@ -53,7 +53,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.2.0",
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^3.0.0",
 		"@atlaskit/primitives": "^22.6.0",
-		"@atlaskit/tmp-editor-statsig": "^240.0.0",
+		"@atlaskit/tmp-editor-statsig": "^242.0.0",
 		"@atlaskit/toggle": "^17.3.0",
 		"@atlaskit/tokens": "^20.6.0",
 		"@atlaskit/tooltip": "^24.4.0",