@atlaskit/editor-plugin-layout 16.0.15 → 16.0.16

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-plugin-layout
 
+## 16.0.16
+
+### Patch Changes
+
+- [`288e340380dbb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/288e340380dbb) -
+  Behind experiment platform_editor_reduce_event_listener_count: cut the number of native DOM event
+  listeners the editor registers per node. React 18 registers a bubble and a capture listener for
+  every supported event type on each portal container (~130 listeners) and never removes them, so
+  (1) node views whose render() returns null no longer mount a portal at all, and (2) the breakout
+  resize handle tooltip portal is deferred until the pointer enters the node instead of being
+  mounted for every resizable node up front.
+
+  Also reduces the work the layout column divider decorations do on every `decorations(state)` read:
+  the mousedown listener is unbound when the widget decoration is destroyed, the widget DOM is built
+  lazily rather than once per call, the document walk no longer descends into node types that cannot
+  contain a layout, and the decoration key is derived from the layout's ordinal rather than its
+  position so an edit above a layout no longer invalidates and rebuilds every divider below it. The
+  widget now resolves its own layout section and column index from its live position at mousedown.
+
+- Updated dependencies
+
 ## 16.0.15
 
 ### Patch Changes

package/dist/cjs/pm-plugins/column-resize-divider.js

@@ -11,6 +11,7 @@ var _analytics = require("@atlaskit/editor-common/analytics");
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _view = require("@atlaskit/editor-prosemirror/view");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _consts = require("./consts");
 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; }
@@ -253,13 +254,51 @@ var onDragCancel = function onDragCancel() {
   onDragEnd(dragState.lastClientX);
 };
 
+/**
+ * Resolves the layout section a divider sits in and which pair of columns it separates.
+ *
+ * When `getPos` is supplied (under `platform_editor_reduce_event_listener_count`) this is derived
+ * from the widget's own live position, which ProseMirror keeps up to date. That is what lets the
+ * decoration key omit the section position: the key previously embedded it, so inserting a single
+ * character above a layout changed the key of every divider below and forced ProseMirror to destroy
+ * and rebuild all of them. Without `getPos` it falls back to the values captured when the widget
+ * was created.
+ */
+var resolveDividerTarget = function resolveDividerTarget(view, sectionPos, columnIndex, getPos) {
+  if (!getPos) {
+    var sectionNode = view.state.doc.nodeAt(sectionPos);
+    return sectionNode ? {
+      sectionNode: sectionNode,
+      sectionPos: sectionPos,
+      leftColIndex: columnIndex - 1
+    } : null;
+  }
+  var pos = getPos();
+  if (pos === undefined) {
+    return null;
+  }
+
+  // The widget is anchored at the position of the column it precedes, which resolves to a
+  // position directly inside the layout section.
+  var $pos = view.state.doc.resolve(pos);
+  var colIndex = $pos.index();
+  if ($pos.parent.type !== view.state.schema.nodes.layoutSection || colIndex < 1) {
+    return null;
+  }
+  return {
+    sectionNode: $pos.parent,
+    sectionPos: $pos.before(),
+    leftColIndex: colIndex - 1
+  };
+};
+
 /**
  * Creates a column divider widget DOM element with drag-to-resize interaction for
  * the adjacent layout columns. During drag, flex-basis is mutated directly on the
  * column DOM elements for zero-overhead visual feedback (no PM transactions).
  * A single undoable PM transaction is dispatched on mouseup to commit the final widths.
  */
-var createColumnDividerWidget = function createColumnDividerWidget(view, sectionPos, columnIndex, editorAnalyticsAPI) {
+var createColumnDividerWidget = function createColumnDividerWidget(view, sectionPos, columnIndex, editorAnalyticsAPI, getPos) {
   var ownerDoc = view.dom.ownerDocument;
 
   // Outer container: wide transparent hit area for easy grabbing, zero flex footprint
@@ -276,17 +315,19 @@ var createColumnDividerWidget = function createColumnDividerWidget(view, section
   var thumb = ownerDoc.createElement('div');
   thumb.classList.add(layoutColumnDividerThumbClassName);
   rail.appendChild(thumb);
-  var leftColIndex = columnIndex - 1;
-  (0, _bindEventListener.bind)(divider, {
+  var unbindMouseDown = (0, _bindEventListener.bind)(divider, {
     type: 'mousedown',
     listener: function listener(e) {
       var _ownerDoc$defaultView;
       e.preventDefault();
       e.stopPropagation();
-      var sectionNode = view.state.doc.nodeAt(sectionPos);
-      if (!sectionNode) {
+      var resolved = resolveDividerTarget(view, sectionPos, columnIndex, getPos);
+      if (!resolved) {
         return;
       }
+      var sectionNode = resolved.sectionNode,
+        leftColIndex = resolved.leftColIndex,
+        resolvedSectionPos = resolved.sectionPos;
 
       // Get the initial widths of the two adjacent columns
       var leftCol = null;
@@ -359,7 +400,7 @@ var createColumnDividerWidget = function createColumnDividerWidget(view, section
         lastClientX: e.clientX,
         rafId: null,
         view: view,
-        sectionPos: sectionPos,
+        sectionPos: resolvedSectionPos,
         leftColIndex: leftColIndex,
         leftColEl: leftColEl,
         rightColEl: rightColEl,
@@ -379,7 +420,10 @@ var createColumnDividerWidget = function createColumnDividerWidget(view, section
       ownerDoc.body.style.cursor = 'col-resize';
     }
   });
-  return divider;
+  return {
+    target: divider,
+    destroy: unbindMouseDown
+  };
 };
 
 /**
@@ -391,29 +435,74 @@ var getColumnDividerDecorations = exports.getColumnDividerDecorations = function
   if (!view) {
     return decorations;
   }
-  var layoutSection = state.schema.nodes.layoutSection;
+  var _state$schema$nodes = state.schema.nodes,
+    layoutSection = _state$schema$nodes.layoutSection,
+    bodiedSyncBlock = _state$schema$nodes.bodiedSyncBlock;
+
+  // Read once per call: `isExperimentEnabled` fires an exposure event, so checking it per divider
+  // would emit one per divider per `decorations(state)` read.
+  var isScopedWalkEnabled = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_reduce_event_listener_count');
+  var sectionIndex = 0;
   state.doc.descendants(function (node, pos) {
     if (node.type === layoutSection) {
+      // This layout's ordinal in the document, used below as a position-independent key.
+      var sectionOrdinal = sectionIndex++;
       // Walk through layout column children and add dividers between them
-      node.forEach(function (child, offset, index) {
+      node.forEach(function (_, offset, index) {
         // Add a divider widget BEFORE every column except the first
         if (index > 0) {
           var sectionPos = pos;
           var colIndex = index;
           var widgetPos = pos + offset + 1; // position at the start of this column
-          decorations.push(_view.Decoration.widget(widgetPos, function () {
-            return createColumnDividerWidget(view, sectionPos, colIndex, editorAnalyticsAPI);
-          }, {
-            side: -1,
-            // place before the position
-            key: "layout-col-divider-".concat(pos, "-").concat(index),
-            ignoreSelection: true
-          }));
+
+          if (!isScopedWalkEnabled) {
+            decorations.push(_view.Decoration.widget(widgetPos, function () {
+              return createColumnDividerWidget(view, sectionPos, colIndex, editorAnalyticsAPI).target;
+            }, {
+              side: -1,
+              // place before the position
+              key: "layout-col-divider-".concat(pos, "-").concat(index),
+              ignoreSelection: true
+            }));
+          } else {
+            // Keyed by the layout's ordinal rather than its position, so an edit elsewhere in
+            // the document doesn't invalidate it. A position-derived key changed on every
+            // keystroke above a layout, making the regenerated DecorationSet compare unequal
+            // and forcing ProseMirror to destroy and rebuild every divider below the edit. The
+            // widget resolves its own section from `getPos` (see `resolveDividerTarget`), so it
+            // stays correct wherever it ends up.
+            //
+            // `toDOM` must also stay lazy: most of the `Decoration`s returned here are matched
+            // by key against the previous set and discarded without ever being rendered.
+            // Building the widget eagerly would create three elements and bind a `mousedown`
+            // listener per divider per call, and the discarded ones never receive `destroy`.
+            var unbindMouseDown;
+            decorations.push(_view.Decoration.widget(widgetPos, function (widgetView, getPos) {
+              var _createColumnDividerW = createColumnDividerWidget(widgetView, sectionPos, colIndex, editorAnalyticsAPI, getPos),
+                target = _createColumnDividerW.target,
+                destroy = _createColumnDividerW.destroy;
+              unbindMouseDown = destroy;
+              return target;
+            }, {
+              side: -1,
+              // place before the position
+              key: "layout-col-divider-".concat(sectionOrdinal, "-").concat(index),
+              ignoreSelection: true,
+              destroy: function destroy() {
+                var _unbindMouseDown;
+                (_unbindMouseDown = unbindMouseDown) === null || _unbindMouseDown === void 0 || _unbindMouseDown();
+                unbindMouseDown = undefined;
+              }
+            }));
+          }
         }
       });
       return false; // don't descend into children
     }
-    return true; // continue descending
+    // A `layoutSection` is only valid as a direct child of `doc` or `bodiedSyncBlock`, so there
+    // is nothing to find anywhere else. The unrestricted walk visited every node in the
+    // document — every table cell, list item and text node — on every `decorations(state)` read.
+    return isScopedWalkEnabled ? node.type === bodiedSyncBlock : true;
   });
   return decorations;
 };

package/dist/es2019/pm-plugins/column-resize-divider.js

@@ -3,6 +3,7 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } f
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { MIN_LAYOUT_COLUMN_WIDTH_PERCENT } from './consts';
 
@@ -249,13 +250,51 @@ const onDragCancel = () => {
   onDragEnd(dragState.lastClientX);
 };
 
+/**
+ * Resolves the layout section a divider sits in and which pair of columns it separates.
+ *
+ * When `getPos` is supplied (under `platform_editor_reduce_event_listener_count`) this is derived
+ * from the widget's own live position, which ProseMirror keeps up to date. That is what lets the
+ * decoration key omit the section position: the key previously embedded it, so inserting a single
+ * character above a layout changed the key of every divider below and forced ProseMirror to destroy
+ * and rebuild all of them. Without `getPos` it falls back to the values captured when the widget
+ * was created.
+ */
+const resolveDividerTarget = (view, sectionPos, columnIndex, getPos) => {
+  if (!getPos) {
+    const sectionNode = view.state.doc.nodeAt(sectionPos);
+    return sectionNode ? {
+      sectionNode,
+      sectionPos,
+      leftColIndex: columnIndex - 1
+    } : null;
+  }
+  const pos = getPos();
+  if (pos === undefined) {
+    return null;
+  }
+
+  // The widget is anchored at the position of the column it precedes, which resolves to a
+  // position directly inside the layout section.
+  const $pos = view.state.doc.resolve(pos);
+  const colIndex = $pos.index();
+  if ($pos.parent.type !== view.state.schema.nodes.layoutSection || colIndex < 1) {
+    return null;
+  }
+  return {
+    sectionNode: $pos.parent,
+    sectionPos: $pos.before(),
+    leftColIndex: colIndex - 1
+  };
+};
+
 /**
  * Creates a column divider widget DOM element with drag-to-resize interaction for
  * the adjacent layout columns. During drag, flex-basis is mutated directly on the
  * column DOM elements for zero-overhead visual feedback (no PM transactions).
  * A single undoable PM transaction is dispatched on mouseup to commit the final widths.
  */
-const createColumnDividerWidget = (view, sectionPos, columnIndex, editorAnalyticsAPI) => {
+const createColumnDividerWidget = (view, sectionPos, columnIndex, editorAnalyticsAPI, getPos) => {
   const ownerDoc = view.dom.ownerDocument;
 
   // Outer container: wide transparent hit area for easy grabbing, zero flex footprint
@@ -272,17 +311,21 @@ const createColumnDividerWidget = (view, sectionPos, columnIndex, editorAnalytic
   const thumb = ownerDoc.createElement('div');
   thumb.classList.add(layoutColumnDividerThumbClassName);
   rail.appendChild(thumb);
-  const leftColIndex = columnIndex - 1;
-  bind(divider, {
+  const unbindMouseDown = bind(divider, {
     type: 'mousedown',
     listener: e => {
       var _ownerDoc$defaultView;
       e.preventDefault();
       e.stopPropagation();
-      const sectionNode = view.state.doc.nodeAt(sectionPos);
-      if (!sectionNode) {
+      const resolved = resolveDividerTarget(view, sectionPos, columnIndex, getPos);
+      if (!resolved) {
         return;
       }
+      const {
+        sectionNode,
+        leftColIndex,
+        sectionPos: resolvedSectionPos
+      } = resolved;
 
       // Get the initial widths of the two adjacent columns
       let leftCol = null;
@@ -355,7 +398,7 @@ const createColumnDividerWidget = (view, sectionPos, columnIndex, editorAnalytic
         lastClientX: e.clientX,
         rafId: null,
         view,
-        sectionPos,
+        sectionPos: resolvedSectionPos,
         leftColIndex,
         leftColEl,
         rightColEl,
@@ -375,7 +418,10 @@ const createColumnDividerWidget = (view, sectionPos, columnIndex, editorAnalytic
       ownerDoc.body.style.cursor = 'col-resize';
     }
   });
-  return divider;
+  return {
+    target: divider,
+    destroy: unbindMouseDown
+  };
 };
 
 /**
@@ -388,28 +434,73 @@ export const getColumnDividerDecorations = (state, view, editorAnalyticsAPI) =>
     return decorations;
   }
   const {
-    layoutSection
+    layoutSection,
+    bodiedSyncBlock
   } = state.schema.nodes;
+
+  // Read once per call: `isExperimentEnabled` fires an exposure event, so checking it per divider
+  // would emit one per divider per `decorations(state)` read.
+  const isScopedWalkEnabled = isExperimentEnabled('platform_editor_reduce_event_listener_count');
+  let sectionIndex = 0;
   state.doc.descendants((node, pos) => {
     if (node.type === layoutSection) {
+      // This layout's ordinal in the document, used below as a position-independent key.
+      const sectionOrdinal = sectionIndex++;
       // Walk through layout column children and add dividers between them
-      node.forEach((child, offset, index) => {
+      node.forEach((_, offset, index) => {
         // Add a divider widget BEFORE every column except the first
         if (index > 0) {
           const sectionPos = pos;
           const colIndex = index;
           const widgetPos = pos + offset + 1; // position at the start of this column
-          decorations.push(Decoration.widget(widgetPos, () => createColumnDividerWidget(view, sectionPos, colIndex, editorAnalyticsAPI), {
-            side: -1,
-            // place before the position
-            key: `layout-col-divider-${pos}-${index}`,
-            ignoreSelection: true
-          }));
+
+          if (!isScopedWalkEnabled) {
+            decorations.push(Decoration.widget(widgetPos, () => createColumnDividerWidget(view, sectionPos, colIndex, editorAnalyticsAPI).target, {
+              side: -1,
+              // place before the position
+              key: `layout-col-divider-${pos}-${index}`,
+              ignoreSelection: true
+            }));
+          } else {
+            // Keyed by the layout's ordinal rather than its position, so an edit elsewhere in
+            // the document doesn't invalidate it. A position-derived key changed on every
+            // keystroke above a layout, making the regenerated DecorationSet compare unequal
+            // and forcing ProseMirror to destroy and rebuild every divider below the edit. The
+            // widget resolves its own section from `getPos` (see `resolveDividerTarget`), so it
+            // stays correct wherever it ends up.
+            //
+            // `toDOM` must also stay lazy: most of the `Decoration`s returned here are matched
+            // by key against the previous set and discarded without ever being rendered.
+            // Building the widget eagerly would create three elements and bind a `mousedown`
+            // listener per divider per call, and the discarded ones never receive `destroy`.
+            let unbindMouseDown;
+            decorations.push(Decoration.widget(widgetPos, (widgetView, getPos) => {
+              const {
+                target,
+                destroy
+              } = createColumnDividerWidget(widgetView, sectionPos, colIndex, editorAnalyticsAPI, getPos);
+              unbindMouseDown = destroy;
+              return target;
+            }, {
+              side: -1,
+              // place before the position
+              key: `layout-col-divider-${sectionOrdinal}-${index}`,
+              ignoreSelection: true,
+              destroy: () => {
+                var _unbindMouseDown;
+                (_unbindMouseDown = unbindMouseDown) === null || _unbindMouseDown === void 0 ? void 0 : _unbindMouseDown();
+                unbindMouseDown = undefined;
+              }
+            }));
+          }
         }
       });
       return false; // don't descend into children
     }
-    return true; // continue descending
+    // A `layoutSection` is only valid as a direct child of `doc` or `bodiedSyncBlock`, so there
+    // is nothing to find anywhere else. The unrestricted walk visited every node in the
+    // document — every table cell, list item and text node — on every `decorations(state)` read.
+    return isScopedWalkEnabled ? node.type === bodiedSyncBlock : true;
   });
   return decorations;
 };

package/dist/esm/pm-plugins/column-resize-divider.js

@@ -6,6 +6,7 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } f
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { MIN_LAYOUT_COLUMN_WIDTH_PERCENT } from './consts';
 
@@ -247,13 +248,51 @@ var onDragCancel = function onDragCancel() {
   onDragEnd(dragState.lastClientX);
 };
 
+/**
+ * Resolves the layout section a divider sits in and which pair of columns it separates.
+ *
+ * When `getPos` is supplied (under `platform_editor_reduce_event_listener_count`) this is derived
+ * from the widget's own live position, which ProseMirror keeps up to date. That is what lets the
+ * decoration key omit the section position: the key previously embedded it, so inserting a single
+ * character above a layout changed the key of every divider below and forced ProseMirror to destroy
+ * and rebuild all of them. Without `getPos` it falls back to the values captured when the widget
+ * was created.
+ */
+var resolveDividerTarget = function resolveDividerTarget(view, sectionPos, columnIndex, getPos) {
+  if (!getPos) {
+    var sectionNode = view.state.doc.nodeAt(sectionPos);
+    return sectionNode ? {
+      sectionNode: sectionNode,
+      sectionPos: sectionPos,
+      leftColIndex: columnIndex - 1
+    } : null;
+  }
+  var pos = getPos();
+  if (pos === undefined) {
+    return null;
+  }
+
+  // The widget is anchored at the position of the column it precedes, which resolves to a
+  // position directly inside the layout section.
+  var $pos = view.state.doc.resolve(pos);
+  var colIndex = $pos.index();
+  if ($pos.parent.type !== view.state.schema.nodes.layoutSection || colIndex < 1) {
+    return null;
+  }
+  return {
+    sectionNode: $pos.parent,
+    sectionPos: $pos.before(),
+    leftColIndex: colIndex - 1
+  };
+};
+
 /**
  * Creates a column divider widget DOM element with drag-to-resize interaction for
  * the adjacent layout columns. During drag, flex-basis is mutated directly on the
  * column DOM elements for zero-overhead visual feedback (no PM transactions).
  * A single undoable PM transaction is dispatched on mouseup to commit the final widths.
  */
-var createColumnDividerWidget = function createColumnDividerWidget(view, sectionPos, columnIndex, editorAnalyticsAPI) {
+var createColumnDividerWidget = function createColumnDividerWidget(view, sectionPos, columnIndex, editorAnalyticsAPI, getPos) {
   var ownerDoc = view.dom.ownerDocument;
 
   // Outer container: wide transparent hit area for easy grabbing, zero flex footprint
@@ -270,17 +309,19 @@ var createColumnDividerWidget = function createColumnDividerWidget(view, section
   var thumb = ownerDoc.createElement('div');
   thumb.classList.add(layoutColumnDividerThumbClassName);
   rail.appendChild(thumb);
-  var leftColIndex = columnIndex - 1;
-  bind(divider, {
+  var unbindMouseDown = bind(divider, {
     type: 'mousedown',
     listener: function listener(e) {
       var _ownerDoc$defaultView;
       e.preventDefault();
       e.stopPropagation();
-      var sectionNode = view.state.doc.nodeAt(sectionPos);
-      if (!sectionNode) {
+      var resolved = resolveDividerTarget(view, sectionPos, columnIndex, getPos);
+      if (!resolved) {
         return;
       }
+      var sectionNode = resolved.sectionNode,
+        leftColIndex = resolved.leftColIndex,
+        resolvedSectionPos = resolved.sectionPos;
 
       // Get the initial widths of the two adjacent columns
       var leftCol = null;
@@ -353,7 +394,7 @@ var createColumnDividerWidget = function createColumnDividerWidget(view, section
         lastClientX: e.clientX,
         rafId: null,
         view: view,
-        sectionPos: sectionPos,
+        sectionPos: resolvedSectionPos,
         leftColIndex: leftColIndex,
         leftColEl: leftColEl,
         rightColEl: rightColEl,
@@ -373,7 +414,10 @@ var createColumnDividerWidget = function createColumnDividerWidget(view, section
       ownerDoc.body.style.cursor = 'col-resize';
     }
   });
-  return divider;
+  return {
+    target: divider,
+    destroy: unbindMouseDown
+  };
 };
 
 /**
@@ -385,29 +429,74 @@ export var getColumnDividerDecorations = function getColumnDividerDecorations(st
   if (!view) {
     return decorations;
   }
-  var layoutSection = state.schema.nodes.layoutSection;
+  var _state$schema$nodes = state.schema.nodes,
+    layoutSection = _state$schema$nodes.layoutSection,
+    bodiedSyncBlock = _state$schema$nodes.bodiedSyncBlock;
+
+  // Read once per call: `isExperimentEnabled` fires an exposure event, so checking it per divider
+  // would emit one per divider per `decorations(state)` read.
+  var isScopedWalkEnabled = isExperimentEnabled('platform_editor_reduce_event_listener_count');
+  var sectionIndex = 0;
   state.doc.descendants(function (node, pos) {
     if (node.type === layoutSection) {
+      // This layout's ordinal in the document, used below as a position-independent key.
+      var sectionOrdinal = sectionIndex++;
       // Walk through layout column children and add dividers between them
-      node.forEach(function (child, offset, index) {
+      node.forEach(function (_, offset, index) {
         // Add a divider widget BEFORE every column except the first
         if (index > 0) {
           var sectionPos = pos;
           var colIndex = index;
           var widgetPos = pos + offset + 1; // position at the start of this column
-          decorations.push(Decoration.widget(widgetPos, function () {
-            return createColumnDividerWidget(view, sectionPos, colIndex, editorAnalyticsAPI);
-          }, {
-            side: -1,
-            // place before the position
-            key: "layout-col-divider-".concat(pos, "-").concat(index),
-            ignoreSelection: true
-          }));
+
+          if (!isScopedWalkEnabled) {
+            decorations.push(Decoration.widget(widgetPos, function () {
+              return createColumnDividerWidget(view, sectionPos, colIndex, editorAnalyticsAPI).target;
+            }, {
+              side: -1,
+              // place before the position
+              key: "layout-col-divider-".concat(pos, "-").concat(index),
+              ignoreSelection: true
+            }));
+          } else {
+            // Keyed by the layout's ordinal rather than its position, so an edit elsewhere in
+            // the document doesn't invalidate it. A position-derived key changed on every
+            // keystroke above a layout, making the regenerated DecorationSet compare unequal
+            // and forcing ProseMirror to destroy and rebuild every divider below the edit. The
+            // widget resolves its own section from `getPos` (see `resolveDividerTarget`), so it
+            // stays correct wherever it ends up.
+            //
+            // `toDOM` must also stay lazy: most of the `Decoration`s returned here are matched
+            // by key against the previous set and discarded without ever being rendered.
+            // Building the widget eagerly would create three elements and bind a `mousedown`
+            // listener per divider per call, and the discarded ones never receive `destroy`.
+            var unbindMouseDown;
+            decorations.push(Decoration.widget(widgetPos, function (widgetView, getPos) {
+              var _createColumnDividerW = createColumnDividerWidget(widgetView, sectionPos, colIndex, editorAnalyticsAPI, getPos),
+                target = _createColumnDividerW.target,
+                destroy = _createColumnDividerW.destroy;
+              unbindMouseDown = destroy;
+              return target;
+            }, {
+              side: -1,
+              // place before the position
+              key: "layout-col-divider-".concat(sectionOrdinal, "-").concat(index),
+              ignoreSelection: true,
+              destroy: function destroy() {
+                var _unbindMouseDown;
+                (_unbindMouseDown = unbindMouseDown) === null || _unbindMouseDown === void 0 || _unbindMouseDown();
+                unbindMouseDown = undefined;
+              }
+            }));
+          }
         }
       });
       return false; // don't descend into children
     }
-    return true; // continue descending
+    // A `layoutSection` is only valid as a direct child of `doc` or `bodiedSyncBlock`, so there
+    // is nothing to find anywhere else. The unrestricted walk visited every node in the
+    // document — every table cell, list item and text node — on every `decorations(state)` read.
+    return isScopedWalkEnabled ? node.type === bodiedSyncBlock : true;
   });
   return decorations;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-layout",
-	"version": "16.0.15",
+	"version": "16.0.16",
 	"description": "Layout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",