@atlaskit/renderer 151.0.2 → 151.0.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/renderer
 
+## 151.0.3
+
+### 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
+
 ## 151.0.2
 
 ### Patch Changes

package/dist/cjs/react/nodes/table/cached-cell-edges.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.withTableCellEdgeProps = exports.getCachedTableEdges = exports.cacheTableEdges = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireDefault(require("react"));
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+// The table node includes the number-column setting. Cache only its edge data.
+var edgeCache = new WeakMap();
+var noEdges = {
+  reachesTop: false,
+  reachesBottom: false,
+  reachesLeft: false,
+  reachesRight: false
+};
+var getCachedTableEdges = exports.getCachedTableEdges = function getCachedTableEdges(node) {
+  return edgeCache.get(node);
+};
+var cacheTableEdges = exports.cacheTableEdges = function cacheTableEdges(node, edges) {
+  // The existing geometry builder provides every cell; retain only the perimeter.
+  var _iterator = _createForOfIteratorHelper(edges),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var _step$value = (0, _slicedToArray2.default)(_step.value, 2),
+        offset = _step$value[0],
+        props = _step$value[1];
+      if (!props.reachesTop && !props.reachesBottom && !props.reachesLeft && !props.reachesRight) {
+        edges.delete(offset);
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  edgeCache.set(node, edges);
+};
+var withTableCellEdgeProps = exports.withTableCellEdgeProps = function withTableCellEdgeProps(element) {
+  var edges = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : noEdges;
+  var current = element.props;
+  if (Boolean(current.reachesTop) === edges.reachesTop && Boolean(current.reachesBottom) === edges.reachesBottom && Boolean(current.reachesLeft) === edges.reachesLeft && Boolean(current.reachesRight) === edges.reachesRight) {
+    return element;
+  }
+  // Also clears stale edges when a previously decorated element becomes an interior cell.
+  return /*#__PURE__*/_react.default.cloneElement(element, edges);
+};

package/dist/cjs/react/nodes/table.js

@@ -24,6 +24,7 @@ var _utils = require("@atlaskit/editor-common/utils");
 var _compareNodes = require("@atlaskit/editor-common/utils/compareNodes");
 var _compose = require("@atlaskit/editor-common/utils/compose");
 var _constants = require("@atlaskit/editor-shared-styles/constants");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _editorExperiment = require("@atlaskit/tmp-editor-statsig/editor-experiment");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
@@ -32,6 +33,7 @@ var _rendererContext = require("../../renderer-context");
 var _style = require("../../ui/Renderer/style");
 var _SmartCardStorage = require("../../ui/SmartCardStorage");
 var _appearance = require("../utils/appearance");
+var _cachedCellEdges = require("./table/cached-cell-edges");
 var _contentMode2 = require("./table/content-mode");
 var _sticky = require("./table/sticky");
 var _table2 = require("./table/table");
@@ -796,6 +798,12 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
   }]);
 }(_react.default.Component);
 var getCellEdgePropsByCellOffset = function getCellEdgePropsByCellOffset(tableNode, isNumberColumnEnabled) {
+  // The serializer uses the node attribute. Other callers can supply a different render prop.
+  var useCachedEdges = (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_table_q4_perf_patch') && Boolean(isNumberColumnEnabled) === Boolean(tableNode.attrs.isNumberColumnEnabled);
+  var cached = useCachedEdges ? (0, _cachedCellEdges.getCachedTableEdges)(tableNode) : undefined;
+  if (cached) {
+    return cached;
+  }
   var cellEdgePropsByCellOffset = new Map();
   var cellRightByCellOffset = new Map();
   var occupiedGrid = [];
@@ -843,6 +851,9 @@ var getCellEdgePropsByCellOffset = function getCellEdgePropsByCellOffset(tableNo
       edgeProps.reachesRight = cellRight >= tableWidth;
     }
   });
+  if (useCachedEdges) {
+    (0, _cachedCellEdges.cacheTableEdges)(tableNode, cellEdgePropsByCellOffset);
+  }
   return cellEdgePropsByCellOffset;
 };
 var isRenderedTableCell = function isRenderedTableCell(element) {
@@ -851,6 +862,7 @@ var isRenderedTableCell = function isRenderedTableCell(element) {
   return nodeType === 'tableCell' || nodeType === 'tableHeader' || element.type === _tableCell.TableCell || element.type === _tableCell.TableHeader;
 };
 var addTableCellEdgePropsThroughWrappers = function addTableCellEdgePropsThroughWrappers(rows, tableNode, isNumberColumnEnabled) {
+  var useCachedEdges = (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_table_q4_perf_patch');
   try {
     if (!tableNode) {
       return rows;
@@ -867,6 +879,9 @@ var addTableCellEdgePropsThroughWrappers = function addTableCellEdgePropsThrough
           var edgeProps = cellEdgePropsByCellOffset.get(cellOffset);
           cellIndex += 1;
           cellOffset += cellNode.nodeSize;
+          if (useCachedEdges) {
+            return (0, _cachedCellEdges.withTableCellEdgeProps)(element, edgeProps);
+          }
           return edgeProps ? /*#__PURE__*/_react.default.cloneElement(element, edgeProps) : element;
         }
         var _ref5 = element.props,

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

@@ -79,7 +79,7 @@ var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var TABLE_INFO_TIMEOUT = 10000;
 var RENDER_EVENT_SAMPLE_RATE = 0.1;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "151.0.1";
+var packageVersion = "151.0.2";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/es2019/react/nodes/table/cached-cell-edges.js

@@ -0,0 +1,27 @@
+import React from 'react';
+// The table node includes the number-column setting. Cache only its edge data.
+const edgeCache = new WeakMap();
+const noEdges = {
+  reachesTop: false,
+  reachesBottom: false,
+  reachesLeft: false,
+  reachesRight: false
+};
+export const getCachedTableEdges = node => edgeCache.get(node);
+export const cacheTableEdges = (node, edges) => {
+  // The existing geometry builder provides every cell; retain only the perimeter.
+  for (const [offset, props] of edges) {
+    if (!props.reachesTop && !props.reachesBottom && !props.reachesLeft && !props.reachesRight) {
+      edges.delete(offset);
+    }
+  }
+  edgeCache.set(node, edges);
+};
+export const withTableCellEdgeProps = (element, edges = noEdges) => {
+  const current = element.props;
+  if (Boolean(current.reachesTop) === edges.reachesTop && Boolean(current.reachesBottom) === edges.reachesBottom && Boolean(current.reachesLeft) === edges.reachesLeft && Boolean(current.reachesRight) === edges.reachesRight) {
+    return element;
+  }
+  // Also clears stale edges when a previously decorated element becomes an interior cell.
+  return /*#__PURE__*/React.cloneElement(element, edges);
+};

package/dist/es2019/react/nodes/table.js

@@ -13,6 +13,7 @@ import { convertProsemirrorTableNodeToArrayOfRows, hasMergedCell } from '@atlask
 import { createCompareNodes } from '@atlaskit/editor-common/utils/compareNodes';
 import { compose } from '@atlaskit/editor-common/utils/compose';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorMaxWidthLayoutWidth } from '@atlaskit/editor-shared-styles/constants';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
@@ -21,6 +22,7 @@ import { useRendererContext } from '../../renderer-context';
 import { FullPagePadding } from '../../ui/Renderer/style';
 import { withSmartCardStorage } from '../../ui/SmartCardStorage';
 import { isCommentAppearance, isFullWidthOrFullPageAppearance, isFullWidthAppearance, isMaxWidthAppearance, isFullPageAppearance } from '../utils/appearance';
+import { cacheTableEdges, getCachedTableEdges, withTableCellEdgeProps } from './table/cached-cell-edges';
 import { isContentModeSupported } from './table/content-mode';
 import { StickyTable, tableStickyPadding, OverflowParent } from './table/sticky';
 import { Table } from './table/table';
@@ -735,6 +737,12 @@ export class TableContainer extends React.Component {
   }
 }
 const getCellEdgePropsByCellOffset = (tableNode, isNumberColumnEnabled) => {
+  // The serializer uses the node attribute. Other callers can supply a different render prop.
+  const useCachedEdges = expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && isExperimentEnabled('platform_editor_table_q4_perf_patch') && Boolean(isNumberColumnEnabled) === Boolean(tableNode.attrs.isNumberColumnEnabled);
+  const cached = useCachedEdges ? getCachedTableEdges(tableNode) : undefined;
+  if (cached) {
+    return cached;
+  }
   const cellEdgePropsByCellOffset = new Map();
   const cellRightByCellOffset = new Map();
   const occupiedGrid = [];
@@ -782,6 +790,9 @@ const getCellEdgePropsByCellOffset = (tableNode, isNumberColumnEnabled) => {
       edgeProps.reachesRight = cellRight >= tableWidth;
     }
   });
+  if (useCachedEdges) {
+    cacheTableEdges(tableNode, cellEdgePropsByCellOffset);
+  }
   return cellEdgePropsByCellOffset;
 };
 const isRenderedTableCell = element => {
@@ -791,6 +802,7 @@ const isRenderedTableCell = element => {
   return nodeType === 'tableCell' || nodeType === 'tableHeader' || element.type === TableCell || element.type === TableHeader;
 };
 const addTableCellEdgePropsThroughWrappers = (rows, tableNode, isNumberColumnEnabled) => {
+  const useCachedEdges = expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && isExperimentEnabled('platform_editor_table_q4_perf_patch');
   try {
     if (!tableNode) {
       return rows;
@@ -807,6 +819,9 @@ const addTableCellEdgePropsThroughWrappers = (rows, tableNode, isNumberColumnEna
           const edgeProps = cellEdgePropsByCellOffset.get(cellOffset);
           cellIndex += 1;
           cellOffset += cellNode.nodeSize;
+          if (useCachedEdges) {
+            return withTableCellEdgeProps(element, edgeProps);
+          }
           return edgeProps ? /*#__PURE__*/React.cloneElement(element, edgeProps) : element;
         }
         const {

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

@@ -64,7 +64,7 @@ export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const TABLE_INFO_TIMEOUT = 10000;
 const RENDER_EVENT_SAMPLE_RATE = 0.1;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "151.0.1";
+const packageVersion = "151.0.2";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/esm/react/nodes/table/cached-cell-edges.js

@@ -0,0 +1,45 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+import React from 'react';
+// The table node includes the number-column setting. Cache only its edge data.
+var edgeCache = new WeakMap();
+var noEdges = {
+  reachesTop: false,
+  reachesBottom: false,
+  reachesLeft: false,
+  reachesRight: false
+};
+export var getCachedTableEdges = function getCachedTableEdges(node) {
+  return edgeCache.get(node);
+};
+export var cacheTableEdges = function cacheTableEdges(node, edges) {
+  // The existing geometry builder provides every cell; retain only the perimeter.
+  var _iterator = _createForOfIteratorHelper(edges),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var _step$value = _slicedToArray(_step.value, 2),
+        offset = _step$value[0],
+        props = _step$value[1];
+      if (!props.reachesTop && !props.reachesBottom && !props.reachesLeft && !props.reachesRight) {
+        edges.delete(offset);
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  edgeCache.set(node, edges);
+};
+export var withTableCellEdgeProps = function withTableCellEdgeProps(element) {
+  var edges = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : noEdges;
+  var current = element.props;
+  if (Boolean(current.reachesTop) === edges.reachesTop && Boolean(current.reachesBottom) === edges.reachesBottom && Boolean(current.reachesLeft) === edges.reachesLeft && Boolean(current.reachesRight) === edges.reachesRight) {
+    return element;
+  }
+  // Also clears stale edges when a previously decorated element becomes an interior cell.
+  return /*#__PURE__*/React.cloneElement(element, edges);
+};

package/dist/esm/react/nodes/table.js

@@ -26,6 +26,7 @@ import { convertProsemirrorTableNodeToArrayOfRows, hasMergedCell } from '@atlask
 import { createCompareNodes } from '@atlaskit/editor-common/utils/compareNodes';
 import { compose } from '@atlaskit/editor-common/utils/compose';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorMaxWidthLayoutWidth } from '@atlaskit/editor-shared-styles/constants';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
@@ -34,6 +35,7 @@ import { useRendererContext } from '../../renderer-context';
 import { FullPagePadding } from '../../ui/Renderer/style';
 import { withSmartCardStorage } from '../../ui/SmartCardStorage';
 import { isCommentAppearance, isFullWidthOrFullPageAppearance, isFullWidthAppearance, isMaxWidthAppearance, isFullPageAppearance } from '../utils/appearance';
+import { cacheTableEdges, getCachedTableEdges, withTableCellEdgeProps } from './table/cached-cell-edges';
 import { isContentModeSupported } from './table/content-mode';
 import { StickyTable, tableStickyPadding, OverflowParent } from './table/sticky';
 import { Table } from './table/table';
@@ -791,6 +793,12 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
   }]);
 }(React.Component);
 var getCellEdgePropsByCellOffset = function getCellEdgePropsByCellOffset(tableNode, isNumberColumnEnabled) {
+  // The serializer uses the node attribute. Other callers can supply a different render prop.
+  var useCachedEdges = expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && isExperimentEnabled('platform_editor_table_q4_perf_patch') && Boolean(isNumberColumnEnabled) === Boolean(tableNode.attrs.isNumberColumnEnabled);
+  var cached = useCachedEdges ? getCachedTableEdges(tableNode) : undefined;
+  if (cached) {
+    return cached;
+  }
   var cellEdgePropsByCellOffset = new Map();
   var cellRightByCellOffset = new Map();
   var occupiedGrid = [];
@@ -838,6 +846,9 @@ var getCellEdgePropsByCellOffset = function getCellEdgePropsByCellOffset(tableNo
       edgeProps.reachesRight = cellRight >= tableWidth;
     }
   });
+  if (useCachedEdges) {
+    cacheTableEdges(tableNode, cellEdgePropsByCellOffset);
+  }
   return cellEdgePropsByCellOffset;
 };
 var isRenderedTableCell = function isRenderedTableCell(element) {
@@ -846,6 +857,7 @@ var isRenderedTableCell = function isRenderedTableCell(element) {
   return nodeType === 'tableCell' || nodeType === 'tableHeader' || element.type === TableCell || element.type === TableHeader;
 };
 var addTableCellEdgePropsThroughWrappers = function addTableCellEdgePropsThroughWrappers(rows, tableNode, isNumberColumnEnabled) {
+  var useCachedEdges = expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && isExperimentEnabled('platform_editor_table_q4_perf_patch');
   try {
     if (!tableNode) {
       return rows;
@@ -862,6 +874,9 @@ var addTableCellEdgePropsThroughWrappers = function addTableCellEdgePropsThrough
           var edgeProps = cellEdgePropsByCellOffset.get(cellOffset);
           cellIndex += 1;
           cellOffset += cellNode.nodeSize;
+          if (useCachedEdges) {
+            return withTableCellEdgeProps(element, edgeProps);
+          }
           return edgeProps ? /*#__PURE__*/React.cloneElement(element, edgeProps) : element;
         }
         var _ref5 = element.props,

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

@@ -69,7 +69,7 @@ export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var TABLE_INFO_TIMEOUT = 10000;
 var RENDER_EVENT_SAMPLE_RATE = 0.1;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "151.0.1";
+var packageVersion = "151.0.2";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/types/react/nodes/table/cached-cell-edges.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { TableCellEdgeProps } from '../tableCell';
+type EdgeMap = Map<number, TableCellEdgeProps>;
+export declare const getCachedTableEdges: (node: PMNode) => EdgeMap | undefined;
+export declare const cacheTableEdges: (node: PMNode, edges: EdgeMap) => void;
+export declare const withTableCellEdgeProps: (element: React.ReactElement, edges?: TableCellEdgeProps) => React.ReactElement;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "151.0.2",
+	"version": "151.0.3",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -73,7 +73,7 @@
 		"@atlaskit/status": "^5.13.0",
 		"@atlaskit/task-decision": "^21.12.0",
 		"@atlaskit/theme": "^28.2.0",
-		"@atlaskit/tmp-editor-statsig": "^240.0.0",
+		"@atlaskit/tmp-editor-statsig": "^241.0.0",
 		"@atlaskit/tokens": "^20.6.0",
 		"@atlaskit/tooltip": "^24.4.0",
 		"@atlaskit/visually-hidden": "^4.4.0",
@@ -115,7 +115,7 @@
 		"@atlaskit/modal-dialog": "^17.1.0",
 		"@atlaskit/navigation-system": "^11.3.0",
 		"@atlaskit/primitives": "^22.6.0",
-		"@atlaskit/profilecard": "^27.1.0",
+		"@atlaskit/profilecard": "^27.2.0",
 		"@atlaskit/radio": "^10.2.0",
 		"@atlaskit/range": "^12.2.0",
 		"@atlaskit/section-message": "^10.2.0",