@atlaskit/editor-plugin-list 8.1.1 → 8.1.3

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-list
 
+## 8.1.3
+
+### Patch Changes
+
+- [`8abe663d8d5db`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8abe663d8d5db) -
+  Add new list decorations logic
+- Updated dependencies
+
+## 8.1.2
+
+### Patch Changes
+
+- [`ef001bf65d48f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ef001bf65d48f) -
+  Remove usage of `platform_editor_toolbar_aifc` inside editor packages - instead rely on checking
+  for new toolbar plugin option, make `enableNewToolbarExperience` mandatory for consumers to opt in
+  to new toolbar experience
+- Updated dependencies
+
 ## 8.1.1
 
 ### Patch Changes
@@ -320,7 +338,6 @@
   shared context or singletons.
 
   **HOW TO ADJUST:**
-
   - Consumers must now explicitly install `@atlaskit/editor-common` in their own project if they use
     any of these editor plugins.
   - Ensure the version you install matches the version required by the plugins.
@@ -998,7 +1015,6 @@
 
   These are no longer available via `@atlaskit/prosemirror-input-rules` but are available from
   `@atlaskit/editor-common/types`:
-
   - InputRuleWrapper
   - InputRuleHandler
   - OnHandlerApply
@@ -1008,7 +1024,6 @@
   need to instantiate a `SafePlugin` (ie. `new SafePlugin(createPlugin( ... ))`).
 
   `SafePlugin` exists in `@atlaskit/editor-common/safe-plugin`.
-
   - createPlugin
   - createInputRulePlugin
 
@@ -1219,19 +1234,13 @@
   auto-join lists together if the order numbers match up.
 
   Eg.
-
   1. A list item
-
   -
-
   50. Another list item
 
   Should NOT auto join to be 1 & 2 in a single list however...
-
   49. A list item
-
   -
-
   50. Another list item
 
   Should join to be 49 & 50 in a single list.
@@ -1253,7 +1262,6 @@
 - [#43646](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/43646)
   [`d43f8e9402f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d43f8e9402f) - Make
   feature flags plugin optional in all plugins including:
-
   - analytics
   - base
   - card

package/dist/cjs/listPlugin.js

@@ -83,7 +83,7 @@ var listPlugin = exports.listPlugin = function listPlugin(_ref) {
         name: 'list',
         plugin: function plugin(_ref2) {
           var dispatch = _ref2.dispatch;
-          return (0, _main.createPlugin)(dispatch, featureFlags);
+          return (0, _main.createPlugin)(dispatch, featureFlags, api);
         }
       }, {
         name: 'listInputRule',

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.updateListDecorations = exports.pluginKey = exports.getDecorations = exports.createPlugin = exports.computeListDecorations = 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,8 +13,8 @@ var _utils = require("@atlaskit/editor-common/utils");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _view = require("@atlaskit/editor-prosemirror/view");
+var _insm = require("@atlaskit/insm");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
-var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _selection2 = require("./utils/selection");
 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; }
@@ -27,6 +27,79 @@ var initialState = {
   orderedListDisabled: false,
   decorationSet: _view.DecorationSet.empty
 };
+var computeListDecorations = exports.computeListDecorations = function computeListDecorations(doc) {
+  var from = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  var to = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : doc.content.size;
+  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 (processedListsStack.length > 0) {
+      var isOutsideLastList = true;
+      while (isOutsideLastList && processedListsStack.length > 0) {
+        var lastList = processedListsStack[processedListsStack.length - 1];
+        var lastListEndPos = lastList.startPos + lastList.node.nodeSize;
+        isOutsideLastList = currentNodeStartPos >= lastListEndPos;
+        // once we finish iterating over each innermost list, pop the stack to
+        // decrease the indent level attribute accordingly
+        if (isOutsideLastList) {
+          processedListsStack.pop();
+        }
+      }
+    }
+    if ((0, _utils.isListNode)(node)) {
+      processedListsStack.push({
+        node: node,
+        startPos: currentNodeStartPos
+      });
+      var _from = currentNodeStartPos;
+      var _to = currentNodeStartPos + node.nodeSize;
+      var depth = processedListsStack.length;
+      decorations.push(_view.Decoration.node(_from, _to, {
+        'data-indent-level': "".concat(depth)
+      }));
+      if (node.type.name === 'orderedList') {
+        var _node$attrs;
+        // 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
+        });
+        if (digitsSize && digitsSize > 1) {
+          decorations.push(_view.Decoration.node(_from, _to, {
+            style: (0, _styles.getOrderedListInlineStyles)(digitsSize, 'string')
+          }));
+        }
+      }
+    }
+  });
+  return decorations;
+};
+var updateListDecorations = exports.updateListDecorations = function updateListDecorations(decorationSet, tr) {
+  var nextDecorationSet = decorationSet.map(tr.mapping, tr.doc);
+  tr.mapping.maps.forEach(function (stepMap, index) {
+    stepMap.forEach(function (oldStart, oldEnd) {
+      var start = tr.mapping.slice(index).map(oldStart, -1);
+      var end = tr.mapping.slice(index).map(oldEnd);
+
+      // Remove decorations in this range
+      var decorationsToRemove = nextDecorationSet.find(start, end);
+      nextDecorationSet = nextDecorationSet.remove(decorationsToRemove);
+
+      // Recompute decorations for this range
+      // Expand the range by 1 on each side to catch adjacent list nodes
+      var from = Math.max(0, start - 1);
+      var to = Math.min(tr.doc.content.size, end + 1);
+      var decorationsToAdd = computeListDecorations(tr.doc, from, to);
+      nextDecorationSet = nextDecorationSet.add(tr.doc, decorationsToAdd);
+    });
+  });
+  return nextDecorationSet;
+};
+
+// delete getDecorations during platform_editor_new_list_decorations_logic experiment clean up
 var getDecorations = exports.getDecorations = function getDecorations(doc, state, featureFlags) {
   var decorations = [];
 
@@ -58,12 +131,12 @@ var getDecorations = exports.getDecorations = function getDecorations(doc, state
         '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, {
@@ -123,27 +196,61 @@ var reducer = function reducer() {
     return state;
   };
 };
-var createInitialState = function createInitialState(featureFlags) {
+var createInitialState = function createInitialState(featureFlags, api) {
   return function (state) {
-    return _objectSpread(_objectSpread({}, (0, _experiments.editorExperiment)('platform_editor_toolbar_aifc', true) && (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_patch_3', 'isEnabled', true) ? getListState(state.doc, state.selection) : initialState), {}, {
-      decorationSet: getDecorations(state.doc, state, featureFlags)
+    var isToolbarAIFCEnabled = Boolean(api === null || api === void 0 ? void 0 : api.toolbar);
+    var getInitialDecorations = function getInitialDecorations() {
+      var _insm$session, _insm$session2;
+      (_insm$session = _insm.insm.session) === null || _insm$session === void 0 || _insm$session.startFeature('listDecorationsInit');
+      var decorations = computeListDecorations(state.doc);
+      (_insm$session2 = _insm.insm.session) === null || _insm$session2 === void 0 || _insm$session2.endFeature('listDecorationsInit');
+      return decorations;
+    };
+    return _objectSpread(_objectSpread({}, isToolbarAIFCEnabled && (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_patch_3', 'isEnabled', true) ? getListState(state.doc, state.selection) : initialState), {}, {
+      decorationSet: (0, _expValEquals.expValEquals)('platform_editor_new_list_decorations_logic', 'isEnabled', true) ? _view.DecorationSet.empty.add(state.doc, getInitialDecorations()) : getDecorations(state.doc, state, featureFlags)
     });
   };
 };
-var createPlugin = exports.createPlugin = function createPlugin(eventDispatch, featureFlags) {
+var createPlugin = exports.createPlugin = function createPlugin(eventDispatch, featureFlags, api) {
   var _pluginFactory = (0, _utils.pluginFactory)(listPluginKey, reducer(), {
       onDocChanged: handleDocChanged(featureFlags),
       onSelectionChanged: handleSelectionChanged
     }),
     getPluginState = _pluginFactory.getPluginState,
     createPluginState = _pluginFactory.createPluginState;
+  var pluginState = createPluginState(eventDispatch, createInitialState(featureFlags, api));
+  var pluginStateInit = function pluginStateInit(_, state) {
+    return createInitialState(featureFlags)(state);
+  };
+  var pluginStateApply = function pluginStateApply(tr, oldPluginState, _oldEditorState, _newEditorState) {
+    var nextPluginState = oldPluginState;
+    if (tr.docChanged) {
+      var _insm$session3, _insm$session4;
+      nextPluginState = handleSelectionChanged(tr, nextPluginState);
+      (_insm$session3 = _insm.insm.session) === null || _insm$session3 === void 0 || _insm$session3.startFeature('listDecorationUpdate');
+      var nextDecorationSet = updateListDecorations(nextPluginState.decorationSet, tr);
+      (_insm$session4 = _insm.insm.session) === null || _insm$session4 === void 0 || _insm$session4.endFeature('listDecorationUpdate');
+      nextPluginState = _objectSpread(_objectSpread({}, nextPluginState), {}, {
+        decorationSet: nextDecorationSet
+      });
+    } else if (tr.selectionSet) {
+      nextPluginState = handleSelectionChanged(tr, nextPluginState);
+    }
+    if (nextPluginState !== oldPluginState) {
+      eventDispatch(listPluginKey, nextPluginState);
+    }
+    return nextPluginState;
+  };
   return new _safePlugin.SafePlugin({
-    state: createPluginState(eventDispatch, createInitialState(featureFlags)),
+    state: {
+      init: (0, _expValEquals.expValEquals)('platform_editor_new_list_decorations_logic', 'isEnabled', true) ? pluginStateInit : pluginState.init,
+      apply: (0, _expValEquals.expValEquals)('platform_editor_new_list_decorations_logic', 'isEnabled', true) ? pluginStateApply : pluginState.apply
+    },
     key: listPluginKey,
     props: {
       decorations: function decorations(state) {
-        var _getPluginState = getPluginState(state),
-          decorationSet = _getPluginState.decorationSet;
+        var _ref = (0, _expValEquals.expValEquals)('platform_editor_new_list_decorations_logic', 'isEnabled', true) ? listPluginKey.getState(state) : getPluginState(state),
+          decorationSet = _ref.decorationSet;
         return decorationSet;
       },
       handleClick: function handleClick(view, pos, event) {

package/dist/es2019/listPlugin.js

@@ -74,7 +74,7 @@ export const listPlugin = ({
         name: 'list',
         plugin: ({
           dispatch
-        }) => createPlugin(dispatch, featureFlags)
+        }) => createPlugin(dispatch, featureFlags, api)
       }, {
         name: 'listInputRule',
         plugin: ({

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

@@ -5,8 +5,8 @@ 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 { insm } from '@atlaskit/insm';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { isWrappingPossible } from './utils/selection';
 const listPluginKey = new PluginKey('listPlugin');
 export const pluginKey = listPluginKey;
@@ -17,12 +17,12 @@ const initialState = {
   orderedListDisabled: false,
   decorationSet: DecorationSet.empty
 };
-export const getDecorations = (doc, state, featureFlags) => {
+export const computeListDecorations = (doc, from = 0, to = doc.content.size) => {
   const decorations = [];
 
   // this stack keeps track of each (nested) list to calculate the indentation level
   const processedListsStack = [];
-  doc.nodesBetween(0, doc.content.size, (node, currentNodeStartPos) => {
+  doc.nodesBetween(from, to, (node, currentNodeStartPos) => {
     if (processedListsStack.length > 0) {
       let isOutsideLastList = true;
       while (isOutsideLastList && processedListsStack.length > 0) {
@@ -63,6 +63,77 @@ export const getDecorations = (doc, state, featureFlags) => {
       }
     }
   });
+  return decorations;
+};
+export const updateListDecorations = (decorationSet, tr) => {
+  let nextDecorationSet = decorationSet.map(tr.mapping, tr.doc);
+  tr.mapping.maps.forEach((stepMap, index) => {
+    stepMap.forEach((oldStart, oldEnd) => {
+      const start = tr.mapping.slice(index).map(oldStart, -1);
+      const end = tr.mapping.slice(index).map(oldEnd);
+
+      // Remove decorations in this range
+      const decorationsToRemove = nextDecorationSet.find(start, end);
+      nextDecorationSet = nextDecorationSet.remove(decorationsToRemove);
+
+      // Recompute decorations for this range
+      // Expand the range by 1 on each side to catch adjacent list nodes
+      const from = Math.max(0, start - 1);
+      const to = Math.min(tr.doc.content.size, end + 1);
+      const decorationsToAdd = computeListDecorations(tr.doc, from, to);
+      nextDecorationSet = nextDecorationSet.add(tr.doc, decorationsToAdd);
+    });
+  });
+  return nextDecorationSet;
+};
+
+// delete getDecorations during platform_editor_new_list_decorations_logic experiment clean up
+export const getDecorations = (doc, state, featureFlags) => {
+  const decorations = [];
+
+  // this stack keeps track of each (nested) list to calculate the indentation level
+  const processedListsStack = [];
+  doc.nodesBetween(0, doc.content.size, (node, currentNodeStartPos) => {
+    if (processedListsStack.length > 0) {
+      let isOutsideLastList = true;
+      while (isOutsideLastList && processedListsStack.length > 0) {
+        const lastList = processedListsStack[processedListsStack.length - 1];
+        const lastListEndPos = lastList.startPos + lastList.node.nodeSize;
+        isOutsideLastList = currentNodeStartPos >= lastListEndPos;
+        // once we finish iterating over each innermost list, pop the stack to
+        // decrease the indent level attribute accordingly
+        if (isOutsideLastList) {
+          processedListsStack.pop();
+        }
+      }
+    }
+    if (isListNode(node)) {
+      processedListsStack.push({
+        node,
+        startPos: currentNodeStartPos
+      });
+      const from = currentNodeStartPos;
+      const to = currentNodeStartPos + node.nodeSize;
+      const depth = processedListsStack.length;
+      decorations.push(Decoration.node(from, to, {
+        'data-indent-level': `${depth}`
+      }));
+      if (node.type.name === 'orderedList') {
+        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$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.order
+        });
+        if (digitsSize && digitsSize > 1) {
+          decorations.push(Decoration.node(from, to, {
+            style: getOrderedListInlineStyles(digitsSize, 'string')
+          }));
+        }
+      }
+    }
+  });
   return DecorationSet.empty.add(doc, decorations);
 };
 const getListState = (doc, selection) => {
@@ -113,15 +184,23 @@ const handleSelectionChanged = (tr, pluginState) => {
 const reducer = () => state => {
   return state;
 };
-const createInitialState = featureFlags => state => {
+const createInitialState = (featureFlags, api) => state => {
+  const isToolbarAIFCEnabled = Boolean(api === null || api === void 0 ? void 0 : api.toolbar);
+  const getInitialDecorations = () => {
+    var _insm$session, _insm$session2;
+    (_insm$session = insm.session) === null || _insm$session === void 0 ? void 0 : _insm$session.startFeature('listDecorationsInit');
+    const decorations = computeListDecorations(state.doc);
+    (_insm$session2 = insm.session) === null || _insm$session2 === void 0 ? void 0 : _insm$session2.endFeature('listDecorationsInit');
+    return decorations;
+  };
   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
-    ...(editorExperiment('platform_editor_toolbar_aifc', true) && expValEquals('platform_editor_toolbar_aifc_patch_3', 'isEnabled', true) ? getListState(state.doc, state.selection) : initialState),
-    decorationSet: getDecorations(state.doc, state, featureFlags)
+    ...(isToolbarAIFCEnabled && expValEquals('platform_editor_toolbar_aifc_patch_3', 'isEnabled', true) ? getListState(state.doc, state.selection) : initialState),
+    decorationSet: expValEquals('platform_editor_new_list_decorations_logic', 'isEnabled', true) ? DecorationSet.empty.add(state.doc, getInitialDecorations()) : getDecorations(state.doc, state, featureFlags)
   };
 };
-export const createPlugin = (eventDispatch, featureFlags) => {
+export const createPlugin = (eventDispatch, featureFlags, api) => {
   const {
     getPluginState,
     createPluginState
@@ -129,14 +208,41 @@ export const createPlugin = (eventDispatch, featureFlags) => {
     onDocChanged: handleDocChanged(featureFlags),
     onSelectionChanged: handleSelectionChanged
   });
+  const pluginState = createPluginState(eventDispatch, createInitialState(featureFlags, api));
+  const pluginStateInit = (_, state) => {
+    return createInitialState(featureFlags)(state);
+  };
+  const pluginStateApply = (tr, oldPluginState, _oldEditorState, _newEditorState) => {
+    let nextPluginState = oldPluginState;
+    if (tr.docChanged) {
+      var _insm$session3, _insm$session4;
+      nextPluginState = handleSelectionChanged(tr, nextPluginState);
+      (_insm$session3 = insm.session) === null || _insm$session3 === void 0 ? void 0 : _insm$session3.startFeature('listDecorationUpdate');
+      const nextDecorationSet = updateListDecorations(nextPluginState.decorationSet, tr);
+      (_insm$session4 = insm.session) === null || _insm$session4 === void 0 ? void 0 : _insm$session4.endFeature('listDecorationUpdate');
+      nextPluginState = {
+        ...nextPluginState,
+        decorationSet: nextDecorationSet
+      };
+    } else if (tr.selectionSet) {
+      nextPluginState = handleSelectionChanged(tr, nextPluginState);
+    }
+    if (nextPluginState !== oldPluginState) {
+      eventDispatch(listPluginKey, nextPluginState);
+    }
+    return nextPluginState;
+  };
   return new SafePlugin({
-    state: createPluginState(eventDispatch, createInitialState(featureFlags)),
+    state: {
+      init: expValEquals('platform_editor_new_list_decorations_logic', 'isEnabled', true) ? pluginStateInit : pluginState.init,
+      apply: expValEquals('platform_editor_new_list_decorations_logic', 'isEnabled', true) ? pluginStateApply : pluginState.apply
+    },
     key: listPluginKey,
     props: {
       decorations(state) {
         const {
           decorationSet
-        } = getPluginState(state);
+        } = expValEquals('platform_editor_new_list_decorations_logic', 'isEnabled', true) ? listPluginKey.getState(state) : getPluginState(state);
         return decorationSet;
       },
       handleClick: (view, pos, event) => {

package/dist/esm/listPlugin.js

@@ -78,7 +78,7 @@ export var listPlugin = function listPlugin(_ref) {
         name: 'list',
         plugin: function plugin(_ref2) {
           var dispatch = _ref2.dispatch;
-          return createPlugin(dispatch, featureFlags);
+          return createPlugin(dispatch, featureFlags, api);
         }
       }, {
         name: 'listInputRule',

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

@@ -8,8 +8,8 @@ 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 { insm } from '@atlaskit/insm';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { isWrappingPossible } from './utils/selection';
 var listPluginKey = new PluginKey('listPlugin');
 export var pluginKey = listPluginKey;
@@ -20,6 +20,79 @@ var initialState = {
   orderedListDisabled: false,
   decorationSet: DecorationSet.empty
 };
+export var computeListDecorations = function computeListDecorations(doc) {
+  var from = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  var to = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : doc.content.size;
+  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 (processedListsStack.length > 0) {
+      var isOutsideLastList = true;
+      while (isOutsideLastList && processedListsStack.length > 0) {
+        var lastList = processedListsStack[processedListsStack.length - 1];
+        var lastListEndPos = lastList.startPos + lastList.node.nodeSize;
+        isOutsideLastList = currentNodeStartPos >= lastListEndPos;
+        // once we finish iterating over each innermost list, pop the stack to
+        // decrease the indent level attribute accordingly
+        if (isOutsideLastList) {
+          processedListsStack.pop();
+        }
+      }
+    }
+    if (isListNode(node)) {
+      processedListsStack.push({
+        node: node,
+        startPos: currentNodeStartPos
+      });
+      var _from = currentNodeStartPos;
+      var _to = currentNodeStartPos + node.nodeSize;
+      var depth = processedListsStack.length;
+      decorations.push(Decoration.node(_from, _to, {
+        'data-indent-level': "".concat(depth)
+      }));
+      if (node.type.name === 'orderedList') {
+        var _node$attrs;
+        // 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
+        });
+        if (digitsSize && digitsSize > 1) {
+          decorations.push(Decoration.node(_from, _to, {
+            style: getOrderedListInlineStyles(digitsSize, 'string')
+          }));
+        }
+      }
+    }
+  });
+  return decorations;
+};
+export var updateListDecorations = function updateListDecorations(decorationSet, tr) {
+  var nextDecorationSet = decorationSet.map(tr.mapping, tr.doc);
+  tr.mapping.maps.forEach(function (stepMap, index) {
+    stepMap.forEach(function (oldStart, oldEnd) {
+      var start = tr.mapping.slice(index).map(oldStart, -1);
+      var end = tr.mapping.slice(index).map(oldEnd);
+
+      // Remove decorations in this range
+      var decorationsToRemove = nextDecorationSet.find(start, end);
+      nextDecorationSet = nextDecorationSet.remove(decorationsToRemove);
+
+      // Recompute decorations for this range
+      // Expand the range by 1 on each side to catch adjacent list nodes
+      var from = Math.max(0, start - 1);
+      var to = Math.min(tr.doc.content.size, end + 1);
+      var decorationsToAdd = computeListDecorations(tr.doc, from, to);
+      nextDecorationSet = nextDecorationSet.add(tr.doc, decorationsToAdd);
+    });
+  });
+  return nextDecorationSet;
+};
+
+// delete getDecorations during platform_editor_new_list_decorations_logic experiment clean up
 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, {
@@ -116,27 +189,61 @@ var reducer = function reducer() {
     return state;
   };
 };
-var createInitialState = function createInitialState(featureFlags) {
+var createInitialState = function createInitialState(featureFlags, api) {
   return function (state) {
-    return _objectSpread(_objectSpread({}, editorExperiment('platform_editor_toolbar_aifc', true) && expValEquals('platform_editor_toolbar_aifc_patch_3', 'isEnabled', true) ? getListState(state.doc, state.selection) : initialState), {}, {
-      decorationSet: getDecorations(state.doc, state, featureFlags)
+    var isToolbarAIFCEnabled = Boolean(api === null || api === void 0 ? void 0 : api.toolbar);
+    var getInitialDecorations = function getInitialDecorations() {
+      var _insm$session, _insm$session2;
+      (_insm$session = insm.session) === null || _insm$session === void 0 || _insm$session.startFeature('listDecorationsInit');
+      var decorations = computeListDecorations(state.doc);
+      (_insm$session2 = insm.session) === null || _insm$session2 === void 0 || _insm$session2.endFeature('listDecorationsInit');
+      return decorations;
+    };
+    return _objectSpread(_objectSpread({}, isToolbarAIFCEnabled && expValEquals('platform_editor_toolbar_aifc_patch_3', 'isEnabled', true) ? getListState(state.doc, state.selection) : initialState), {}, {
+      decorationSet: expValEquals('platform_editor_new_list_decorations_logic', 'isEnabled', true) ? DecorationSet.empty.add(state.doc, getInitialDecorations()) : getDecorations(state.doc, state, featureFlags)
     });
   };
 };
-export var createPlugin = function createPlugin(eventDispatch, featureFlags) {
+export var createPlugin = function createPlugin(eventDispatch, featureFlags, api) {
   var _pluginFactory = pluginFactory(listPluginKey, reducer(), {
       onDocChanged: handleDocChanged(featureFlags),
       onSelectionChanged: handleSelectionChanged
     }),
     getPluginState = _pluginFactory.getPluginState,
     createPluginState = _pluginFactory.createPluginState;
+  var pluginState = createPluginState(eventDispatch, createInitialState(featureFlags, api));
+  var pluginStateInit = function pluginStateInit(_, state) {
+    return createInitialState(featureFlags)(state);
+  };
+  var pluginStateApply = function pluginStateApply(tr, oldPluginState, _oldEditorState, _newEditorState) {
+    var nextPluginState = oldPluginState;
+    if (tr.docChanged) {
+      var _insm$session3, _insm$session4;
+      nextPluginState = handleSelectionChanged(tr, nextPluginState);
+      (_insm$session3 = insm.session) === null || _insm$session3 === void 0 || _insm$session3.startFeature('listDecorationUpdate');
+      var nextDecorationSet = updateListDecorations(nextPluginState.decorationSet, tr);
+      (_insm$session4 = insm.session) === null || _insm$session4 === void 0 || _insm$session4.endFeature('listDecorationUpdate');
+      nextPluginState = _objectSpread(_objectSpread({}, nextPluginState), {}, {
+        decorationSet: nextDecorationSet
+      });
+    } else if (tr.selectionSet) {
+      nextPluginState = handleSelectionChanged(tr, nextPluginState);
+    }
+    if (nextPluginState !== oldPluginState) {
+      eventDispatch(listPluginKey, nextPluginState);
+    }
+    return nextPluginState;
+  };
   return new SafePlugin({
-    state: createPluginState(eventDispatch, createInitialState(featureFlags)),
+    state: {
+      init: expValEquals('platform_editor_new_list_decorations_logic', 'isEnabled', true) ? pluginStateInit : pluginState.init,
+      apply: expValEquals('platform_editor_new_list_decorations_logic', 'isEnabled', true) ? pluginStateApply : pluginState.apply
+    },
     key: listPluginKey,
     props: {
       decorations: function decorations(state) {
-        var _getPluginState = getPluginState(state),
-          decorationSet = _getPluginState.decorationSet;
+        var _ref = expValEquals('platform_editor_new_list_decorations_logic', 'isEnabled', true) ? listPluginKey.getState(state) : getPluginState(state),
+          decorationSet = _ref.decorationSet;
         return decorationSet;
       },
       handleClick: function handleClick(view, pos, event) {

package/dist/types/listPluginType.d.ts

@@ -2,11 +2,13 @@ import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/t
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { BlockMenuPlugin } from '@atlaskit/editor-plugin-block-menu';
 import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
+import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
 import type { FindRootParentListNode, IndentList, IsInsideListItem, ListState, OutdentList, ToggleBulletList, ToggleOrderedList } from './types';
 export type ListPluginDependencies = [
     OptionalPlugin<FeatureFlagsPlugin>,
     OptionalPlugin<AnalyticsPlugin>,
-    OptionalPlugin<BlockMenuPlugin>
+    OptionalPlugin<BlockMenuPlugin>,
+    OptionalPlugin<ToolbarPlugin>
 ];
 export type ListPluginActions = {
     findRootParentListNode: FindRootParentListNode;

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

@@ -1,11 +1,14 @@
 import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import type { FeatureFlags } from '@atlaskit/editor-common/types';
+import type { ExtractInjectionAPI, FeatureFlags } from '@atlaskit/editor-common/types';
 import type { Node } from '@atlaskit/editor-prosemirror/model';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-import type { EditorState } from '@atlaskit/editor-prosemirror/state';
-import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import type { EditorState, ReadonlyTransaction } from '@atlaskit/editor-prosemirror/state';
+import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import type { ListPlugin } from '../listPluginType';
 import type { ListState } from '../types';
 export declare const pluginKey: PluginKey<ListState>;
+export declare const computeListDecorations: (doc: Node, from?: number, to?: number) => Decoration[];
+export declare const updateListDecorations: (decorationSet: DecorationSet, tr: ReadonlyTransaction) => DecorationSet;
 export declare const getDecorations: (doc: Node, state: EditorState, featureFlags: FeatureFlags) => DecorationSet;
-export declare const createPlugin: (eventDispatch: Dispatch, featureFlags: FeatureFlags) => SafePlugin;
+export declare const createPlugin: (eventDispatch: Dispatch, featureFlags: FeatureFlags, api?: ExtractInjectionAPI<ListPlugin>) => SafePlugin;

package/dist/types-ts4.5/listPluginType.d.ts

@@ -2,11 +2,13 @@ import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/t
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { BlockMenuPlugin } from '@atlaskit/editor-plugin-block-menu';
 import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
+import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
 import type { FindRootParentListNode, IndentList, IsInsideListItem, ListState, OutdentList, ToggleBulletList, ToggleOrderedList } from './types';
 export type ListPluginDependencies = [
     OptionalPlugin<FeatureFlagsPlugin>,
     OptionalPlugin<AnalyticsPlugin>,
-    OptionalPlugin<BlockMenuPlugin>
+    OptionalPlugin<BlockMenuPlugin>,
+    OptionalPlugin<ToolbarPlugin>
 ];
 export type ListPluginActions = {
     findRootParentListNode: FindRootParentListNode;

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

@@ -1,11 +1,14 @@
 import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import type { FeatureFlags } from '@atlaskit/editor-common/types';
+import type { ExtractInjectionAPI, FeatureFlags } from '@atlaskit/editor-common/types';
 import type { Node } from '@atlaskit/editor-prosemirror/model';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-import type { EditorState } from '@atlaskit/editor-prosemirror/state';
-import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import type { EditorState, ReadonlyTransaction } from '@atlaskit/editor-prosemirror/state';
+import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import type { ListPlugin } from '../listPluginType';
 import type { ListState } from '../types';
 export declare const pluginKey: PluginKey<ListState>;
+export declare const computeListDecorations: (doc: Node, from?: number, to?: number) => Decoration[];
+export declare const updateListDecorations: (decorationSet: DecorationSet, tr: ReadonlyTransaction) => DecorationSet;
 export declare const getDecorations: (doc: Node, state: EditorState, featureFlags: FeatureFlags) => DecorationSet;
-export declare const createPlugin: (eventDispatch: Dispatch, featureFlags: FeatureFlags) => SafePlugin;
+export declare const createPlugin: (eventDispatch: Dispatch, featureFlags: FeatureFlags, api?: ExtractInjectionAPI<ListPlugin>) => SafePlugin;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-list",
-	"version": "8.1.1",
+	"version": "8.1.3",
 	"description": "List plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -31,17 +31,19 @@
 		"@atlaskit/editor-plugin-analytics": "^6.1.0",
 		"@atlaskit/editor-plugin-block-menu": "^4.0.0",
 		"@atlaskit/editor-plugin-feature-flags": "^5.0.0",
+		"@atlaskit/editor-plugin-toolbar": "^3.3.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-toolbar": "^0.15.0",
 		"@atlaskit/icon": "^28.5.0",
+		"@atlaskit/insm": "^0.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/prosemirror-history": "^0.2.0",
 		"@atlaskit/prosemirror-input-rules": "^3.5.0",
-		"@atlaskit/tmp-editor-statsig": "^13.8.0",
+		"@atlaskit/tmp-editor-statsig": "^13.12.0",
 		"@babel/runtime": "^7.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.10.0",
+		"@atlaskit/editor-common": "^110.13.0",
 		"react": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},