@atlaskit/editor-plugin-list 19.0.1 → 19.0.4

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/editor-plugin-list
 
+## 19.0.4
+
+### Patch Changes
+
+- [`352bac5c0a9ed`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/352bac5c0a9ed) -
+  Reduce the per-transaction cost of recomputing list indentation decorations, behind the
+  `platform_editor_list_performance_improv` experiment. The decoration set is now maintained
+  incrementally: it is mapped through each transaction and only the top-level blocks that the
+  transaction touched are recomputed, instead of rebuilding the whole set from a full document scan.
+  The remaining scan also skips textblock subtrees, which can never contain a list, and each list
+  emits a single decoration carrying both the indentation level and the ordered-list item counter
+  padding instead of two decorations over the same range. Rendered output is unchanged.
+
+## 19.0.3
+
+### Patch Changes
+
+- Updated dependencies
+
+## 19.0.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 19.0.1
 
 ### Patch Changes

package/dist/cjs/pm-plugins/main.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.pluginKey = exports.getDecorations = exports.createPlugin = void 0;
+exports.updateDecorations = exports.pluginKey = exports.getDecorationsForDocument = exports.getDecorations = exports.createPlugin = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _selection = require("@atlaskit/editor-common/selection");
@@ -13,9 +13,13 @@ var _utils = require("@atlaskit/editor-common/utils");
 var _state2 = require("@atlaskit/editor-prosemirror/state");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _view = require("@atlaskit/editor-prosemirror/view");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _transforms = require("./transforms");
 var _selection2 = require("./utils/selection");
+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; }
 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 listPluginKey = new _state2.PluginKey('listPlugin');
@@ -27,6 +31,75 @@ var initialState = {
   orderedListDisabled: false,
   decorationSet: _view.DecorationSet.empty
 };
+
+/**
+ * Numbered lists whose item counters reach 2+ digits need extra gutter spacing so the counter
+ * does not collide with the item content.
+ */
+var getItemCounterPaddingStyle = function getItemCounterPaddingStyle(node) {
+  var _node$attrs;
+  if (node.type.name !== 'orderedList') {
+    return undefined;
+  }
+  var digitsSize = (0, _utils.getItemCounterDigitsSize)({
+    itemsCount: node === null || node === void 0 ? void 0 : node.childCount,
+    order: node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.order
+  });
+  return digitsSize && digitsSize > 1 ? (0, _styles.getOrderedListInlineStyles)(digitsSize, 'string') : undefined;
+};
+
+/**
+ * Builds the decorations for a range aligned to top-level block boundaries — or for the whole
+ * document, which is the same thing. Because a top-level block has no list ancestors, the
+ * indentation depth always restarts at zero here.
+ *
+ * Textblocks only hold inline content, so they can never contain a list. Skipping their subtrees
+ * avoids visiting every text node in the range. Each list gets a single decoration carrying both
+ * attributes, which renders identically to two decorations over the same range at half the
+ * allocation and comparison cost.
+ */
+var getDecorationsForRange = function getDecorationsForRange(doc, from, to) {
+  var decorations = [];
+  // this stack keeps track of each (nested) list to calculate the indentation level
+  var processedListsStack = [];
+  doc.nodesBetween(from, to, function (node, currentNodeStartPos) {
+    if (node.isTextblock) {
+      return false;
+    }
+    while (processedListsStack.length > 0) {
+      var lastList = processedListsStack[processedListsStack.length - 1];
+      // once we finish iterating over each innermost list, pop the stack to
+      // decrease the indent level attribute accordingly
+      if (currentNodeStartPos >= lastList.startPos + lastList.node.nodeSize) {
+        processedListsStack.pop();
+      } else {
+        break;
+      }
+    }
+    if ((0, _utils.isListNode)(node)) {
+      processedListsStack.push({
+        node: node,
+        startPos: currentNodeStartPos
+      });
+      var style = getItemCounterPaddingStyle(node);
+      decorations.push(_view.Decoration.node(currentNodeStartPos, currentNodeStartPos + node.nodeSize, _objectSpread({
+        'data-indent-level': "".concat(processedListsStack.length)
+      }, style ? {
+        style: style
+      } : {})));
+    }
+    return true;
+  });
+  return decorations;
+};
+
+/**
+ * Full-document rebuild on the improved path, used when the decoration set has no previous value
+ * to update. The whole document is just one aligned range.
+ */
+var getDecorationsForDocument = exports.getDecorationsForDocument = function getDecorationsForDocument(doc) {
+  return _view.DecorationSet.empty.add(doc, getDecorationsForRange(doc, 0, doc.content.size));
+};
 var getDecorations = exports.getDecorations = function getDecorations(doc, _state, _featureFlags) {
   var decorations = [];
 
@@ -58,12 +131,12 @@ var getDecorations = exports.getDecorations = function getDecorations(doc, _stat
         'data-indent-level': "".concat(depth)
       }));
       if (node.type.name === 'orderedList') {
-        var _node$attrs;
+        var _node$attrs2;
         // If a numbered list has item counters numbering >= 100, we'll need to add special
         // spacing to account for the extra digit chars
         var digitsSize = (0, _utils.getItemCounterDigitsSize)({
           itemsCount: node === null || node === void 0 ? void 0 : node.childCount,
-          order: node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.order
+          order: node === null || node === void 0 || (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.order
         });
         if (digitsSize && digitsSize > 1) {
           decorations.push(_view.Decoration.node(from, to, {
@@ -75,6 +148,121 @@ var getDecorations = exports.getDecorations = function getDecorations(doc, _stat
   });
   return _view.DecorationSet.empty.add(doc, decorations);
 };
+
+/**
+ * The parts of a transaction the decoration update needs, so that both `Transaction` and
+ * `ReadonlyTransaction` can be passed in.
+ */
+
+/**
+ * Expands the ranges touched by a transaction out to whole top-level blocks. A list decoration
+ * depends only on the subtree of the top-level block containing it, so recomputing whole blocks is
+ * enough — and it keeps the depth calculation free of any ancestor accounting.
+ */
+var getDirtyTopLevelRanges = function getDirtyTopLevelRanges(tr, doc) {
+  var docSize = doc.content.size;
+  var wholeDoc = [{
+    from: 0,
+    to: docSize
+  }];
+  var boundsAt = function boundsAt(pos) {
+    // resolving a position strictly inside a block gives us its boundaries in O(depth)
+    var inside = Math.max(1, Math.min(pos, Math.max(1, docSize - 1)));
+    var $inside = doc.resolve(inside);
+    if ($inside.depth > 0) {
+      return {
+        from: $inside.before(1),
+        to: $inside.after(1)
+      };
+    }
+    // exactly between two top-level blocks — cover both neighbours
+    var $before = doc.resolve(Math.max(1, inside - 1));
+    var $after = doc.resolve(Math.min(Math.max(1, docSize - 1), inside + 1));
+    return {
+      from: $before.depth > 0 ? $before.before(1) : 0,
+      to: $after.depth > 0 ? $after.after(1) : docSize
+    };
+  };
+  var ranges = [];
+  for (var index = 0; index < tr.steps.length; index++) {
+    var step = tr.steps[index];
+    // Duck-typed rather than matched on step class so that unknown step types fall back to a
+    // full recompute instead of being silently skipped.
+    // Ignored via go/ees005
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    var _ref = step,
+      from = _ref.from,
+      to = _ref.to,
+      pos = _ref.pos;
+    var positions = typeof from === 'number' && typeof to === 'number' ? [from, to] : typeof pos === 'number' ? [pos] : [];
+    if (positions.length === 0) {
+      return wholeDoc;
+    }
+
+    // Step positions are in the document before this step, so map through the later steps. The
+    // range start is biased left and the end biased right, so that neither slides across a
+    // block boundary and leaves a dirty block out of the recompute.
+    var remainder = tr.mapping.slice(index);
+    var start = boundsAt(remainder.map(Math.min.apply(Math, positions), -1));
+    var end = boundsAt(remainder.map(Math.max.apply(Math, positions), 1));
+    ranges.push({
+      from: Math.min(start.from, end.from),
+      to: Math.max(start.to, end.to)
+    });
+  }
+  ranges.sort(function (a, b) {
+    return a.from - b.from;
+  });
+  var merged = [];
+  for (var _i = 0, _ranges = ranges; _i < _ranges.length; _i++) {
+    var range = _ranges[_i];
+    var last = merged[merged.length - 1];
+    if (last && range.from <= last.to) {
+      last.to = Math.max(last.to, range.to);
+    } else {
+      merged.push(_objectSpread({}, range));
+    }
+  }
+  return merged;
+};
+
+/**
+ * Maps the previous decoration set through the transaction and recomputes only the top-level blocks
+ * it touched, instead of rebuilding the whole set from a full document scan.
+ */
+var updateDecorations = exports.updateDecorations = function updateDecorations(previousDecorationSet, tr, doc) {
+  var decorationSet = previousDecorationSet.map(tr.mapping, doc);
+  var _iterator = _createForOfIteratorHelper(getDirtyTopLevelRanges(tr, doc)),
+    _step;
+  try {
+    var _loop = function _loop() {
+      var _step$value = _step.value,
+        from = _step$value.from,
+        to = _step$value.to;
+      // find() also returns decorations that merely touch the range, so removal is restricted to
+      // the ones fully inside it — those are exactly the decorations recomputed below. Removing a
+      // decoration that only touches the boundary would drop it permanently.
+      var stale = decorationSet.find(from, to).filter(function (decoration) {
+        return decoration.from >= from && decoration.to <= to;
+      });
+      if (stale.length > 0) {
+        decorationSet = decorationSet.remove(stale);
+      }
+      var fresh = getDecorationsForRange(doc, from, to);
+      if (fresh.length > 0) {
+        decorationSet = decorationSet.add(doc, fresh);
+      }
+    };
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      _loop();
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return decorationSet;
+};
 var getListState = function getListState(doc, selection) {
   var _doc$type$schema$node = doc.type.schema.nodes,
     bulletList = _doc$type$schema$node.bulletList,
@@ -92,12 +280,19 @@ var getListState = function getListState(doc, selection) {
     orderedListDisabled: orderedListDisabled
   };
 };
-var handleDocChanged = function handleDocChanged(featureFlags) {
+var handleDocChangedOld = function handleDocChangedOld(featureFlags) {
+  return function (tr, pluginState, editorState) {
+    var nextPluginState = handleSelectionChanged(tr, pluginState);
+    return _objectSpread(_objectSpread({}, nextPluginState), {}, {
+      decorationSet: getDecorations(tr.doc, editorState, featureFlags)
+    });
+  };
+};
+var handleDocChangedNew = function handleDocChangedNew() {
   return function (tr, pluginState, editorState) {
     var nextPluginState = handleSelectionChanged(tr, pluginState);
-    var decorationSet = getDecorations(tr.doc, editorState, featureFlags);
     return _objectSpread(_objectSpread({}, nextPluginState), {}, {
-      decorationSet: decorationSet
+      decorationSet: updateDecorations(pluginState.decorationSet, tr, tr.doc)
     });
   };
 };
@@ -123,7 +318,7 @@ var reducer = function reducer() {
     return state;
   };
 };
-var createInitialState = function createInitialState(featureFlags, api) {
+var createInitialStateOld = function createInitialStateOld(featureFlags, api) {
   return function (state) {
     var isToolbarAIFCEnabled = Boolean(api === null || api === void 0 ? void 0 : api.toolbar);
     return _objectSpread(_objectSpread({}, isToolbarAIFCEnabled ? getListState(state.doc, state.selection) : initialState), {}, {
@@ -131,15 +326,25 @@ var createInitialState = function createInitialState(featureFlags, api) {
     });
   };
 };
+var createInitialStateNew = function createInitialStateNew(featureFlags, api) {
+  return function (state) {
+    var isToolbarAIFCEnabled = Boolean(api === null || api === void 0 ? void 0 : api.toolbar);
+    return _objectSpread(_objectSpread({}, isToolbarAIFCEnabled ? getListState(state.doc, state.selection) : initialState), {}, {
+      decorationSet: getDecorationsForDocument(state.doc)
+    });
+  };
+};
 var createPlugin = exports.createPlugin = function createPlugin(eventDispatch, featureFlags, api) {
   var _pluginFactory = (0, _utils.pluginFactory)(listPluginKey, reducer(), {
-      onDocChanged: handleDocChanged(featureFlags),
+      // Resolved once per editor instance rather than per transaction, so the exposure event fires
+      // once and the decoration hot path stays free of experiment lookups.
+      onDocChanged: (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_list_performance_improv') ? handleDocChangedNew() : handleDocChangedOld(featureFlags),
       onSelectionChanged: handleSelectionChanged
     }),
     getPluginState = _pluginFactory.getPluginState,
     createPluginState = _pluginFactory.createPluginState;
   return new _safePlugin.SafePlugin({
-    state: createPluginState(eventDispatch, createInitialState(featureFlags, api)),
+    state: createPluginState(eventDispatch, (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_list_performance_improv') ? createInitialStateNew(featureFlags, api) : createInitialStateOld(featureFlags, api)),
     key: listPluginKey,
     appendTransaction: function appendTransaction(transactions, _oldState, newState) {
       if (!(0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_flexible_list_schema', 'isEnabled', true)) {

package/dist/es2019/pm-plugins/main.js

@@ -5,6 +5,7 @@ import { getItemCounterDigitsSize, isListNode, pluginFactory } from '@atlaskit/e
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { applyListNormalisationFixes } from './transforms';
 import { isWrappingPossible } from './utils/selection';
@@ -17,6 +18,74 @@ const initialState = {
   orderedListDisabled: false,
   decorationSet: DecorationSet.empty
 };
+
+/**
+ * Numbered lists whose item counters reach 2+ digits need extra gutter spacing so the counter
+ * does not collide with the item content.
+ */
+const getItemCounterPaddingStyle = node => {
+  var _node$attrs;
+  if (node.type.name !== 'orderedList') {
+    return undefined;
+  }
+  const digitsSize = getItemCounterDigitsSize({
+    itemsCount: node === null || node === void 0 ? void 0 : node.childCount,
+    order: node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.order
+  });
+  return digitsSize && digitsSize > 1 ? getOrderedListInlineStyles(digitsSize, 'string') : undefined;
+};
+
+/**
+ * Builds the decorations for a range aligned to top-level block boundaries — or for the whole
+ * document, which is the same thing. Because a top-level block has no list ancestors, the
+ * indentation depth always restarts at zero here.
+ *
+ * Textblocks only hold inline content, so they can never contain a list. Skipping their subtrees
+ * avoids visiting every text node in the range. Each list gets a single decoration carrying both
+ * attributes, which renders identically to two decorations over the same range at half the
+ * allocation and comparison cost.
+ */
+const getDecorationsForRange = (doc, from, to) => {
+  const decorations = [];
+  // this stack keeps track of each (nested) list to calculate the indentation level
+  const processedListsStack = [];
+  doc.nodesBetween(from, to, (node, currentNodeStartPos) => {
+    if (node.isTextblock) {
+      return false;
+    }
+    while (processedListsStack.length > 0) {
+      const lastList = processedListsStack[processedListsStack.length - 1];
+      // once we finish iterating over each innermost list, pop the stack to
+      // decrease the indent level attribute accordingly
+      if (currentNodeStartPos >= lastList.startPos + lastList.node.nodeSize) {
+        processedListsStack.pop();
+      } else {
+        break;
+      }
+    }
+    if (isListNode(node)) {
+      processedListsStack.push({
+        node,
+        startPos: currentNodeStartPos
+      });
+      const style = getItemCounterPaddingStyle(node);
+      decorations.push(Decoration.node(currentNodeStartPos, currentNodeStartPos + node.nodeSize, {
+        'data-indent-level': `${processedListsStack.length}`,
+        ...(style ? {
+          style
+        } : {})
+      }));
+    }
+    return true;
+  });
+  return decorations;
+};
+
+/**
+ * Full-document rebuild on the improved path, used when the decoration set has no previous value
+ * to update. The whole document is just one aligned range.
+ */
+export const getDecorationsForDocument = doc => DecorationSet.empty.add(doc, getDecorationsForRange(doc, 0, doc.content.size));
 export const getDecorations = (doc, _state, _featureFlags) => {
   const decorations = [];
 
@@ -48,12 +117,12 @@ export const getDecorations = (doc, _state, _featureFlags) => {
         'data-indent-level': `${depth}`
       }));
       if (node.type.name === 'orderedList') {
-        var _node$attrs;
+        var _node$attrs2;
         // If a numbered list has item counters numbering >= 100, we'll need to add special
         // spacing to account for the extra digit chars
         const digitsSize = getItemCounterDigitsSize({
           itemsCount: node === null || node === void 0 ? void 0 : node.childCount,
-          order: node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.order
+          order: node === null || node === void 0 ? void 0 : (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.order
         });
         if (digitsSize && digitsSize > 1) {
           decorations.push(Decoration.node(from, to, {
@@ -65,6 +134,108 @@ export const getDecorations = (doc, _state, _featureFlags) => {
   });
   return DecorationSet.empty.add(doc, decorations);
 };
+
+/**
+ * The parts of a transaction the decoration update needs, so that both `Transaction` and
+ * `ReadonlyTransaction` can be passed in.
+ */
+
+/**
+ * Expands the ranges touched by a transaction out to whole top-level blocks. A list decoration
+ * depends only on the subtree of the top-level block containing it, so recomputing whole blocks is
+ * enough — and it keeps the depth calculation free of any ancestor accounting.
+ */
+const getDirtyTopLevelRanges = (tr, doc) => {
+  const docSize = doc.content.size;
+  const wholeDoc = [{
+    from: 0,
+    to: docSize
+  }];
+  const boundsAt = pos => {
+    // resolving a position strictly inside a block gives us its boundaries in O(depth)
+    const inside = Math.max(1, Math.min(pos, Math.max(1, docSize - 1)));
+    const $inside = doc.resolve(inside);
+    if ($inside.depth > 0) {
+      return {
+        from: $inside.before(1),
+        to: $inside.after(1)
+      };
+    }
+    // exactly between two top-level blocks — cover both neighbours
+    const $before = doc.resolve(Math.max(1, inside - 1));
+    const $after = doc.resolve(Math.min(Math.max(1, docSize - 1), inside + 1));
+    return {
+      from: $before.depth > 0 ? $before.before(1) : 0,
+      to: $after.depth > 0 ? $after.after(1) : docSize
+    };
+  };
+  const ranges = [];
+  for (let index = 0; index < tr.steps.length; index++) {
+    const step = tr.steps[index];
+    // Duck-typed rather than matched on step class so that unknown step types fall back to a
+    // full recompute instead of being silently skipped.
+    // Ignored via go/ees005
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const {
+      from,
+      to,
+      pos
+    } = step;
+    const positions = typeof from === 'number' && typeof to === 'number' ? [from, to] : typeof pos === 'number' ? [pos] : [];
+    if (positions.length === 0) {
+      return wholeDoc;
+    }
+
+    // Step positions are in the document before this step, so map through the later steps. The
+    // range start is biased left and the end biased right, so that neither slides across a
+    // block boundary and leaves a dirty block out of the recompute.
+    const remainder = tr.mapping.slice(index);
+    const start = boundsAt(remainder.map(Math.min(...positions), -1));
+    const end = boundsAt(remainder.map(Math.max(...positions), 1));
+    ranges.push({
+      from: Math.min(start.from, end.from),
+      to: Math.max(start.to, end.to)
+    });
+  }
+  ranges.sort((a, b) => a.from - b.from);
+  const merged = [];
+  for (const range of ranges) {
+    const last = merged[merged.length - 1];
+    if (last && range.from <= last.to) {
+      last.to = Math.max(last.to, range.to);
+    } else {
+      merged.push({
+        ...range
+      });
+    }
+  }
+  return merged;
+};
+
+/**
+ * Maps the previous decoration set through the transaction and recomputes only the top-level blocks
+ * it touched, instead of rebuilding the whole set from a full document scan.
+ */
+export const updateDecorations = (previousDecorationSet, tr, doc) => {
+  let decorationSet = previousDecorationSet.map(tr.mapping, doc);
+  for (const {
+    from,
+    to
+  } of getDirtyTopLevelRanges(tr, doc)) {
+    // find() also returns decorations that merely touch the range, so removal is restricted to
+    // the ones fully inside it — those are exactly the decorations recomputed below. Removing a
+    // decoration that only touches the boundary would drop it permanently.
+    const stale = decorationSet.find(from, to).filter(decoration => decoration.from >= from && decoration.to <= to);
+    if (stale.length > 0) {
+      decorationSet = decorationSet.remove(stale);
+    }
+    const fresh = getDecorationsForRange(doc, from, to);
+    if (fresh.length > 0) {
+      decorationSet = decorationSet.add(doc, fresh);
+    }
+  }
+  return decorationSet;
+};
 const getListState = (doc, selection) => {
   const {
     bulletList,
@@ -83,12 +254,18 @@ const getListState = (doc, selection) => {
     orderedListDisabled
   };
 };
-const handleDocChanged = featureFlags => (tr, pluginState, editorState) => {
+const handleDocChangedOld = featureFlags => (tr, pluginState, editorState) => {
   const nextPluginState = handleSelectionChanged(tr, pluginState);
-  const decorationSet = getDecorations(tr.doc, editorState, featureFlags);
   return {
     ...nextPluginState,
-    decorationSet
+    decorationSet: getDecorations(tr.doc, editorState, featureFlags)
+  };
+};
+const handleDocChangedNew = () => (tr, pluginState, editorState) => {
+  const nextPluginState = handleSelectionChanged(tr, pluginState);
+  return {
+    ...nextPluginState,
+    decorationSet: updateDecorations(pluginState.decorationSet, tr, tr.doc)
   };
 };
 const handleSelectionChanged = (tr, pluginState) => {
@@ -113,7 +290,7 @@ const handleSelectionChanged = (tr, pluginState) => {
 const reducer = () => state => {
   return state;
 };
-const createInitialState = (featureFlags, api) => state => {
+const createInitialStateOld = (featureFlags, api) => state => {
   const isToolbarAIFCEnabled = Boolean(api === null || api === void 0 ? void 0 : api.toolbar);
   return {
     // When plugin is initialised, editor state is defined with selection
@@ -122,16 +299,27 @@ const createInitialState = (featureFlags, api) => state => {
     decorationSet: getDecorations(state.doc, state, featureFlags)
   };
 };
+const createInitialStateNew = (featureFlags, api) => state => {
+  const isToolbarAIFCEnabled = Boolean(api === null || api === void 0 ? void 0 : api.toolbar);
+  return {
+    // When plugin is initialised, editor state is defined with selection
+    // hence returning the list state based on the selection to avoid list button in primary toolbar flickering during initial load
+    ...(isToolbarAIFCEnabled ? getListState(state.doc, state.selection) : initialState),
+    decorationSet: getDecorationsForDocument(state.doc)
+  };
+};
 export const createPlugin = (eventDispatch, featureFlags, api) => {
   const {
     getPluginState,
     createPluginState
   } = pluginFactory(listPluginKey, reducer(), {
-    onDocChanged: handleDocChanged(featureFlags),
+    // Resolved once per editor instance rather than per transaction, so the exposure event fires
+    // once and the decoration hot path stays free of experiment lookups.
+    onDocChanged: isExperimentEnabled('platform_editor_list_performance_improv') ? handleDocChangedNew() : handleDocChangedOld(featureFlags),
     onSelectionChanged: handleSelectionChanged
   });
   return new SafePlugin({
-    state: createPluginState(eventDispatch, createInitialState(featureFlags, api)),
+    state: createPluginState(eventDispatch, isExperimentEnabled('platform_editor_list_performance_improv') ? createInitialStateNew(featureFlags, api) : createInitialStateOld(featureFlags, api)),
     key: listPluginKey,
     appendTransaction(transactions, _oldState, newState) {
       if (!expValEqualsNoExposure('platform_editor_flexible_list_schema', 'isEnabled', true)) {

package/dist/esm/pm-plugins/main.js

@@ -1,4 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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; }
 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';
@@ -8,6 +11,7 @@ import { getItemCounterDigitsSize, isListNode, pluginFactory } from '@atlaskit/e
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { applyListNormalisationFixes } from './transforms';
 import { isWrappingPossible } from './utils/selection';
@@ -20,6 +24,75 @@ var initialState = {
   orderedListDisabled: false,
   decorationSet: DecorationSet.empty
 };
+
+/**
+ * Numbered lists whose item counters reach 2+ digits need extra gutter spacing so the counter
+ * does not collide with the item content.
+ */
+var getItemCounterPaddingStyle = function getItemCounterPaddingStyle(node) {
+  var _node$attrs;
+  if (node.type.name !== 'orderedList') {
+    return undefined;
+  }
+  var digitsSize = getItemCounterDigitsSize({
+    itemsCount: node === null || node === void 0 ? void 0 : node.childCount,
+    order: node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.order
+  });
+  return digitsSize && digitsSize > 1 ? getOrderedListInlineStyles(digitsSize, 'string') : undefined;
+};
+
+/**
+ * Builds the decorations for a range aligned to top-level block boundaries — or for the whole
+ * document, which is the same thing. Because a top-level block has no list ancestors, the
+ * indentation depth always restarts at zero here.
+ *
+ * Textblocks only hold inline content, so they can never contain a list. Skipping their subtrees
+ * avoids visiting every text node in the range. Each list gets a single decoration carrying both
+ * attributes, which renders identically to two decorations over the same range at half the
+ * allocation and comparison cost.
+ */
+var getDecorationsForRange = function getDecorationsForRange(doc, from, to) {
+  var decorations = [];
+  // this stack keeps track of each (nested) list to calculate the indentation level
+  var processedListsStack = [];
+  doc.nodesBetween(from, to, function (node, currentNodeStartPos) {
+    if (node.isTextblock) {
+      return false;
+    }
+    while (processedListsStack.length > 0) {
+      var lastList = processedListsStack[processedListsStack.length - 1];
+      // once we finish iterating over each innermost list, pop the stack to
+      // decrease the indent level attribute accordingly
+      if (currentNodeStartPos >= lastList.startPos + lastList.node.nodeSize) {
+        processedListsStack.pop();
+      } else {
+        break;
+      }
+    }
+    if (isListNode(node)) {
+      processedListsStack.push({
+        node: node,
+        startPos: currentNodeStartPos
+      });
+      var style = getItemCounterPaddingStyle(node);
+      decorations.push(Decoration.node(currentNodeStartPos, currentNodeStartPos + node.nodeSize, _objectSpread({
+        'data-indent-level': "".concat(processedListsStack.length)
+      }, style ? {
+        style: style
+      } : {})));
+    }
+    return true;
+  });
+  return decorations;
+};
+
+/**
+ * Full-document rebuild on the improved path, used when the decoration set has no previous value
+ * to update. The whole document is just one aligned range.
+ */
+export var getDecorationsForDocument = function getDecorationsForDocument(doc) {
+  return DecorationSet.empty.add(doc, getDecorationsForRange(doc, 0, doc.content.size));
+};
 export var getDecorations = function getDecorations(doc, _state, _featureFlags) {
   var decorations = [];
 
@@ -51,12 +124,12 @@ export var getDecorations = function getDecorations(doc, _state, _featureFlags)
         'data-indent-level': "".concat(depth)
       }));
       if (node.type.name === 'orderedList') {
-        var _node$attrs;
+        var _node$attrs2;
         // If a numbered list has item counters numbering >= 100, we'll need to add special
         // spacing to account for the extra digit chars
         var digitsSize = getItemCounterDigitsSize({
           itemsCount: node === null || node === void 0 ? void 0 : node.childCount,
-          order: node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.order
+          order: node === null || node === void 0 || (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.order
         });
         if (digitsSize && digitsSize > 1) {
           decorations.push(Decoration.node(from, to, {
@@ -68,6 +141,121 @@ export var getDecorations = function getDecorations(doc, _state, _featureFlags)
   });
   return DecorationSet.empty.add(doc, decorations);
 };
+
+/**
+ * The parts of a transaction the decoration update needs, so that both `Transaction` and
+ * `ReadonlyTransaction` can be passed in.
+ */
+
+/**
+ * Expands the ranges touched by a transaction out to whole top-level blocks. A list decoration
+ * depends only on the subtree of the top-level block containing it, so recomputing whole blocks is
+ * enough — and it keeps the depth calculation free of any ancestor accounting.
+ */
+var getDirtyTopLevelRanges = function getDirtyTopLevelRanges(tr, doc) {
+  var docSize = doc.content.size;
+  var wholeDoc = [{
+    from: 0,
+    to: docSize
+  }];
+  var boundsAt = function boundsAt(pos) {
+    // resolving a position strictly inside a block gives us its boundaries in O(depth)
+    var inside = Math.max(1, Math.min(pos, Math.max(1, docSize - 1)));
+    var $inside = doc.resolve(inside);
+    if ($inside.depth > 0) {
+      return {
+        from: $inside.before(1),
+        to: $inside.after(1)
+      };
+    }
+    // exactly between two top-level blocks — cover both neighbours
+    var $before = doc.resolve(Math.max(1, inside - 1));
+    var $after = doc.resolve(Math.min(Math.max(1, docSize - 1), inside + 1));
+    return {
+      from: $before.depth > 0 ? $before.before(1) : 0,
+      to: $after.depth > 0 ? $after.after(1) : docSize
+    };
+  };
+  var ranges = [];
+  for (var index = 0; index < tr.steps.length; index++) {
+    var step = tr.steps[index];
+    // Duck-typed rather than matched on step class so that unknown step types fall back to a
+    // full recompute instead of being silently skipped.
+    // Ignored via go/ees005
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    var _ref = step,
+      from = _ref.from,
+      to = _ref.to,
+      pos = _ref.pos;
+    var positions = typeof from === 'number' && typeof to === 'number' ? [from, to] : typeof pos === 'number' ? [pos] : [];
+    if (positions.length === 0) {
+      return wholeDoc;
+    }
+
+    // Step positions are in the document before this step, so map through the later steps. The
+    // range start is biased left and the end biased right, so that neither slides across a
+    // block boundary and leaves a dirty block out of the recompute.
+    var remainder = tr.mapping.slice(index);
+    var start = boundsAt(remainder.map(Math.min.apply(Math, positions), -1));
+    var end = boundsAt(remainder.map(Math.max.apply(Math, positions), 1));
+    ranges.push({
+      from: Math.min(start.from, end.from),
+      to: Math.max(start.to, end.to)
+    });
+  }
+  ranges.sort(function (a, b) {
+    return a.from - b.from;
+  });
+  var merged = [];
+  for (var _i = 0, _ranges = ranges; _i < _ranges.length; _i++) {
+    var range = _ranges[_i];
+    var last = merged[merged.length - 1];
+    if (last && range.from <= last.to) {
+      last.to = Math.max(last.to, range.to);
+    } else {
+      merged.push(_objectSpread({}, range));
+    }
+  }
+  return merged;
+};
+
+/**
+ * Maps the previous decoration set through the transaction and recomputes only the top-level blocks
+ * it touched, instead of rebuilding the whole set from a full document scan.
+ */
+export var updateDecorations = function updateDecorations(previousDecorationSet, tr, doc) {
+  var decorationSet = previousDecorationSet.map(tr.mapping, doc);
+  var _iterator = _createForOfIteratorHelper(getDirtyTopLevelRanges(tr, doc)),
+    _step;
+  try {
+    var _loop = function _loop() {
+      var _step$value = _step.value,
+        from = _step$value.from,
+        to = _step$value.to;
+      // find() also returns decorations that merely touch the range, so removal is restricted to
+      // the ones fully inside it — those are exactly the decorations recomputed below. Removing a
+      // decoration that only touches the boundary would drop it permanently.
+      var stale = decorationSet.find(from, to).filter(function (decoration) {
+        return decoration.from >= from && decoration.to <= to;
+      });
+      if (stale.length > 0) {
+        decorationSet = decorationSet.remove(stale);
+      }
+      var fresh = getDecorationsForRange(doc, from, to);
+      if (fresh.length > 0) {
+        decorationSet = decorationSet.add(doc, fresh);
+      }
+    };
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      _loop();
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return decorationSet;
+};
 var getListState = function getListState(doc, selection) {
   var _doc$type$schema$node = doc.type.schema.nodes,
     bulletList = _doc$type$schema$node.bulletList,
@@ -85,12 +273,19 @@ var getListState = function getListState(doc, selection) {
     orderedListDisabled: orderedListDisabled
   };
 };
-var handleDocChanged = function handleDocChanged(featureFlags) {
+var handleDocChangedOld = function handleDocChangedOld(featureFlags) {
+  return function (tr, pluginState, editorState) {
+    var nextPluginState = handleSelectionChanged(tr, pluginState);
+    return _objectSpread(_objectSpread({}, nextPluginState), {}, {
+      decorationSet: getDecorations(tr.doc, editorState, featureFlags)
+    });
+  };
+};
+var handleDocChangedNew = function handleDocChangedNew() {
   return function (tr, pluginState, editorState) {
     var nextPluginState = handleSelectionChanged(tr, pluginState);
-    var decorationSet = getDecorations(tr.doc, editorState, featureFlags);
     return _objectSpread(_objectSpread({}, nextPluginState), {}, {
-      decorationSet: decorationSet
+      decorationSet: updateDecorations(pluginState.decorationSet, tr, tr.doc)
     });
   };
 };
@@ -116,7 +311,7 @@ var reducer = function reducer() {
     return state;
   };
 };
-var createInitialState = function createInitialState(featureFlags, api) {
+var createInitialStateOld = function createInitialStateOld(featureFlags, api) {
   return function (state) {
     var isToolbarAIFCEnabled = Boolean(api === null || api === void 0 ? void 0 : api.toolbar);
     return _objectSpread(_objectSpread({}, isToolbarAIFCEnabled ? getListState(state.doc, state.selection) : initialState), {}, {
@@ -124,15 +319,25 @@ var createInitialState = function createInitialState(featureFlags, api) {
     });
   };
 };
+var createInitialStateNew = function createInitialStateNew(featureFlags, api) {
+  return function (state) {
+    var isToolbarAIFCEnabled = Boolean(api === null || api === void 0 ? void 0 : api.toolbar);
+    return _objectSpread(_objectSpread({}, isToolbarAIFCEnabled ? getListState(state.doc, state.selection) : initialState), {}, {
+      decorationSet: getDecorationsForDocument(state.doc)
+    });
+  };
+};
 export var createPlugin = function createPlugin(eventDispatch, featureFlags, api) {
   var _pluginFactory = pluginFactory(listPluginKey, reducer(), {
-      onDocChanged: handleDocChanged(featureFlags),
+      // Resolved once per editor instance rather than per transaction, so the exposure event fires
+      // once and the decoration hot path stays free of experiment lookups.
+      onDocChanged: isExperimentEnabled('platform_editor_list_performance_improv') ? handleDocChangedNew() : handleDocChangedOld(featureFlags),
       onSelectionChanged: handleSelectionChanged
     }),
     getPluginState = _pluginFactory.getPluginState,
     createPluginState = _pluginFactory.createPluginState;
   return new SafePlugin({
-    state: createPluginState(eventDispatch, createInitialState(featureFlags, api)),
+    state: createPluginState(eventDispatch, isExperimentEnabled('platform_editor_list_performance_improv') ? createInitialStateNew(featureFlags, api) : createInitialStateOld(featureFlags, api)),
     key: listPluginKey,
     appendTransaction: function appendTransaction(transactions, _oldState, newState) {
       if (!expValEqualsNoExposure('platform_editor_flexible_list_schema', 'isEnabled', true)) {

package/dist/types/pm-plugins/main.d.ts

@@ -2,11 +2,27 @@ import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { ExtractInjectionAPI, FeatureFlags } from '@atlaskit/editor-common/types';
 import type { Node } from '@atlaskit/editor-prosemirror/model';
-import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import type { EditorState, ReadonlyTransaction } from '@atlaskit/editor-prosemirror/state';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { ListPlugin } from '../listPluginType';
 import type { ListState } from '../types';
 export declare const pluginKey: PluginKey<ListState>;
+/**
+ * Full-document rebuild on the improved path, used when the decoration set has no previous value
+ * to update. The whole document is just one aligned range.
+ */
+export declare const getDecorationsForDocument: (doc: Node) => DecorationSet;
 export declare const getDecorations: (doc: Node, _state: EditorState, _featureFlags: FeatureFlags) => DecorationSet;
+/**
+ * The parts of a transaction the decoration update needs, so that both `Transaction` and
+ * `ReadonlyTransaction` can be passed in.
+ */
+type TransactionSteps = Pick<ReadonlyTransaction, 'mapping' | 'steps'>;
+/**
+ * Maps the previous decoration set through the transaction and recomputes only the top-level blocks
+ * it touched, instead of rebuilding the whole set from a full document scan.
+ */
+export declare const updateDecorations: (previousDecorationSet: DecorationSet, tr: TransactionSteps, doc: Node) => DecorationSet;
 export declare const createPlugin: (eventDispatch: Dispatch, featureFlags: FeatureFlags, api?: ExtractInjectionAPI<ListPlugin>) => SafePlugin;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-list",
-	"version": "19.0.1",
+	"version": "19.0.4",
 	"description": "List plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -33,7 +33,7 @@
 		"@atlaskit/platform-feature-flags": "^2.2.0",
 		"@atlaskit/prosemirror-history": "^1.2.0",
 		"@atlaskit/prosemirror-input-rules": "^4.1.0",
-		"@atlaskit/tmp-editor-statsig": "^180.0.0",
+		"@atlaskit/tmp-editor-statsig": "^182.0.0",
 		"@babel/runtime": "^7.0.0"
 	},
 	"peerDependencies": {