@atlaskit/editor-plugin-placeholder 12.0.25 → 12.0.27

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-placeholder
 
+## 12.0.27
+
+### Patch Changes
+
+- [`6f1a8660863cb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6f1a8660863cb) -
+  Show placeholder text in empty multi bodied extension frames
+- Updated dependencies
+
+## 12.0.26
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 12.0.25
 
 ### Patch Changes

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.placeholderTestId = exports.nodeTypesWithSyncBlockPlaceholderText = exports.nodeTypesWithShortPlaceholderText = exports.nodeTypesWithLongPlaceholderText = exports.TYPEWRITER_TYPE_DELAY = exports.TYPEWRITER_TYPED_AND_DELETED_DELAY = exports.TYPEWRITER_PAUSE_BEFORE_ERASE = exports.TYPEWRITER_ERASE_DELAY = exports.TYPEWRITER_CYCLE_DELAY = void 0;
+exports.placeholderTestId = exports.nodeTypesWithSyncBlockPlaceholderText = exports.nodeTypesWithShortPlaceholderText = exports.nodeTypesWithMultiBodiedExtensionPlaceholderText = exports.nodeTypesWithLongPlaceholderText = exports.TYPEWRITER_TYPE_DELAY = exports.TYPEWRITER_TYPED_AND_DELETED_DELAY = exports.TYPEWRITER_PAUSE_BEFORE_ERASE = exports.TYPEWRITER_ERASE_DELAY = exports.TYPEWRITER_CYCLE_DELAY = void 0;
 var placeholderTestId = exports.placeholderTestId = 'placeholder-test-id';
 
 // Typewriter animation timing constants
@@ -15,4 +15,5 @@ var TYPEWRITER_TYPED_AND_DELETED_DELAY = exports.TYPEWRITER_TYPED_AND_DELETED_DE
 
 var nodeTypesWithLongPlaceholderText = exports.nodeTypesWithLongPlaceholderText = ['expand', 'panel'];
 var nodeTypesWithShortPlaceholderText = exports.nodeTypesWithShortPlaceholderText = ['tableCell', 'tableHeader'];
-var nodeTypesWithSyncBlockPlaceholderText = exports.nodeTypesWithSyncBlockPlaceholderText = ['bodiedSyncBlock'];
+var nodeTypesWithSyncBlockPlaceholderText = exports.nodeTypesWithSyncBlockPlaceholderText = ['bodiedSyncBlock'];
+var nodeTypesWithMultiBodiedExtensionPlaceholderText = exports.nodeTypesWithMultiBodiedExtensionPlaceholderText = ['extensionFrame'];

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

@@ -5,12 +5,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = createPlugin;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _view = require("@atlaskit/editor-prosemirror/view");
 var _expVal = require("@atlaskit/tmp-editor-statsig/expVal");
 var _placeholderPlugin = require("../placeholderPlugin");
 var _constants = require("./constants");
 var _decorations = require("./decorations");
+var _multiBodiedExtensionPlaceholderDecorations = require("./multi-bodied-extension-placeholder-decorations");
 var _sourceSyncBlockPlaceholderDecorations = require("./source-sync-block-placeholder-decorations");
 var _utils = require("./utils");
 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; }
@@ -48,7 +51,8 @@ function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderText, empt
           withEmptyParagraph: withEmptyParagraph,
           isPlaceholderHidden: initialIsPlaceholderHidden
         })), {}, {
-          sourceSyncBlockPlaceholderDecorations: (0, _sourceSyncBlockPlaceholderDecorations.createSourceSyncBlockPlaceholderDecorations)(state, intl)
+          sourceSyncBlockPlaceholderDecorations: (0, _sourceSyncBlockPlaceholderDecorations.createSourceSyncBlockPlaceholderDecorations)(state, intl),
+          multiBodiedExtensionPlaceholderDecorations: (0, _multiBodiedExtensionPlaceholderDecorations.createMultiBodiedExtensionPlaceholderDecorations)(state, intl)
         });
       },
       apply: function apply(tr, placeholderState, _oldEditorState, newEditorState) {
@@ -97,6 +101,12 @@ function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderText, empt
             newEditorState: newEditorState,
             oldEditorState: _oldEditorState,
             tr: tr
+          }),
+          multiBodiedExtensionPlaceholderDecorations: (0, _multiBodiedExtensionPlaceholderDecorations.updateMultiBodiedExtensionPlaceholderDecorations)({
+            currentDecorationSet: placeholderState === null || placeholderState === void 0 ? void 0 : placeholderState.multiBodiedExtensionPlaceholderDecorations,
+            intl: intl,
+            newEditorState: newEditorState,
+            tr: tr
           })
         });
 
@@ -109,7 +119,7 @@ function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderText, empt
     },
     props: {
       decorations: function decorations(editorState) {
-        var _api$composition, _api$showDiff;
+        var _api$composition, _api$showDiff, _syncBlockPlaceholder, _multiBodiedExtension;
         // @ts-ignore quick fix which needs follow up to use standard apis
         if (editorState.collabEditPlugin$ && editorState.collabEditPlugin$.isReady !== true) {
           return;
@@ -121,7 +131,8 @@ function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderText, empt
           typedAndDeleted = _getPlaceholderState.typedAndDeleted,
           contextPlaceholderADF = _getPlaceholderState.contextPlaceholderADF,
           showOnEmptyParagraph = _getPlaceholderState.showOnEmptyParagraph,
-          sourceSyncBlockPlaceholderDecorations = _getPlaceholderState.sourceSyncBlockPlaceholderDecorations;
+          sourceSyncBlockPlaceholderDecorations = _getPlaceholderState.sourceSyncBlockPlaceholderDecorations,
+          multiBodiedExtensionPlaceholderDecorations = _getPlaceholderState.multiBodiedExtensionPlaceholderDecorations;
 
         // Decorations is still called after plugin is destroyed
         // So we need to make sure decorations is not called if plugin has been destroyed to prevent the placeholder animations' setTimeouts called infinitely
@@ -131,14 +142,25 @@ function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderText, empt
         var compositionPluginState = api === null || api === void 0 || (_api$composition = api.composition) === null || _api$composition === void 0 ? void 0 : _api$composition.sharedState.currentState();
         var isShowingDiff = Boolean(api === null || api === void 0 || (_api$showDiff = api.showDiff) === null || _api$showDiff === void 0 || (_api$showDiff = _api$showDiff.sharedState.currentState()) === null || _api$showDiff === void 0 ? void 0 : _api$showDiff.isDisplayingChanges);
         var syncBlockPlaceholderDecorations = !(compositionPluginState !== null && compositionPluginState !== void 0 && compositionPluginState.isComposing) && !isShowingDiff ? sourceSyncBlockPlaceholderDecorations : undefined;
+        var multiBodiedExtensionDecorations = !(compositionPluginState !== null && compositionPluginState !== void 0 && compositionPluginState.isComposing) && !isShowingDiff ? multiBodiedExtensionPlaceholderDecorations : undefined;
+        var syncBlockDecorationItems = (_syncBlockPlaceholder = syncBlockPlaceholderDecorations === null || syncBlockPlaceholderDecorations === void 0 ? void 0 : syncBlockPlaceholderDecorations.find()) !== null && _syncBlockPlaceholder !== void 0 ? _syncBlockPlaceholder : [];
+        var multiBodiedExtensionDecorationItems = (_multiBodiedExtension = multiBodiedExtensionDecorations === null || multiBodiedExtensionDecorations === void 0 ? void 0 : multiBodiedExtensionDecorations.find()) !== null && _multiBodiedExtension !== void 0 ? _multiBodiedExtension : [];
         if (hasPlaceholder && ((placeholderText !== null && placeholderText !== void 0 ? placeholderText : '') || placeholderPrompts || placeholderADF || contextPlaceholderADF) && pos !== undefined && !(compositionPluginState !== null && compositionPluginState !== void 0 && compositionPluginState.isComposing) && !isShowingDiff) {
-          var _syncBlockPlaceholder;
           var initialDelayWhenUserTypedAndDeleted = typedAndDeleted ? _constants.TYPEWRITER_TYPED_AND_DELETED_DELAY : 0;
           // contextPlaceholderADF takes precedence over the global placeholderADF
           var placeholderAdfToUse = contextPlaceholderADF || placeholderADF;
-          return (0, _decorations.createPlaceholderDecoration)(editorState, placeholderText !== null && placeholderText !== void 0 ? placeholderText : '', placeholderPrompts, activeTypewriterTimeouts, pos, initialDelayWhenUserTypedAndDeleted, placeholderAdfToUse, showOnEmptyParagraph).add(editorState.doc, (_syncBlockPlaceholder = syncBlockPlaceholderDecorations === null || syncBlockPlaceholderDecorations === void 0 ? void 0 : syncBlockPlaceholderDecorations.find()) !== null && _syncBlockPlaceholder !== void 0 ? _syncBlockPlaceholder : []);
+          return (0, _decorations.createPlaceholderDecoration)(editorState, placeholderText !== null && placeholderText !== void 0 ? placeholderText : '', placeholderPrompts, activeTypewriterTimeouts, pos, initialDelayWhenUserTypedAndDeleted, placeholderAdfToUse, showOnEmptyParagraph).add(editorState.doc, [].concat((0, _toConsumableArray2.default)(syncBlockDecorationItems), (0, _toConsumableArray2.default)(multiBodiedExtensionDecorationItems)));
+        }
+        // These sets are already mapped in plugin state. Return a single
+        // active set directly, and only rebuild when multiple sets must be merged.
+        if (syncBlockDecorationItems.length > 0 && multiBodiedExtensionDecorationItems.length === 0) {
+          return syncBlockPlaceholderDecorations;
+        }
+        if (multiBodiedExtensionDecorationItems.length > 0 && syncBlockDecorationItems.length === 0) {
+          return multiBodiedExtensionDecorations;
         }
-        return syncBlockPlaceholderDecorations;
+        var additionalDecorations = [].concat((0, _toConsumableArray2.default)(syncBlockDecorationItems), (0, _toConsumableArray2.default)(multiBodiedExtensionDecorationItems));
+        return additionalDecorations.length > 0 ? _view.DecorationSet.create(editorState.doc, additionalDecorations) : undefined;
       }
     },
     view: function view() {

package/dist/cjs/pm-plugins/multi-bodied-extension-placeholder-decorations.js

@@ -0,0 +1,178 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createMultiBodiedExtensionPlaceholderDecorations = createMultiBodiedExtensionPlaceholderDecorations;
+exports.updateMultiBodiedExtensionPlaceholderDecorations = updateMultiBodiedExtensionPlaceholderDecorations;
+var _messages = require("@atlaskit/editor-common/messages");
+var _view = require("@atlaskit/editor-prosemirror/view");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _constants = require("./constants");
+var isMultiBodiedExtensionPlaceholderEnabled = function isMultiBodiedExtensionPlaceholderEnabled() {
+  return (0, _expValEquals.expValEquals)('confluence_native_tabs_experiment', 'isEnabled', true);
+};
+
+// Empty MBE bodies are represented as extensionFrame -> empty paragraph.
+// The paragraph gives the cursor a valid textblock, but there is no authored content yet.
+var isEmptyExtensionFrame = function isEmptyExtensionFrame(node) {
+  var _node$firstChild, _node$firstChild2;
+  return _constants.nodeTypesWithMultiBodiedExtensionPlaceholderText.includes(node.type.name) && node.childCount === 1 && ((_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.content.size) === 0 && ((_node$firstChild2 = node.firstChild) === null || _node$firstChild2 === void 0 ? void 0 : _node$firstChild2.type.name) === 'paragraph';
+};
+
+// Keep this generic for any MBE extension by checking the node shape rather
+// than a product-specific extensionKey.
+var isExtensionFrameInMultiBodiedExtension = function isExtensionFrameInMultiBodiedExtension(node, parent) {
+  return _constants.nodeTypesWithMultiBodiedExtensionPlaceholderText.includes(node.type.name) && (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'multiBodiedExtension';
+};
+var isEmptyExtensionFrameInMultiBodiedExtension = function isEmptyExtensionFrameInMultiBodiedExtension(node, parent) {
+  return isExtensionFrameInMultiBodiedExtension(node, parent) && isEmptyExtensionFrame(node);
+};
+
+// Widget decorations render UI without adding real content to the document.
+var createMultiBodiedExtensionPlaceholderElement = function createMultiBodiedExtensionPlaceholderElement(intl) {
+  var placeholderDecoration = document.createElement('span');
+  placeholderDecoration.setAttribute('data-testid', _constants.placeholderTestId);
+  placeholderDecoration.className = 'placeholder-decoration';
+  placeholderDecoration.setAttribute('aria-hidden', 'true');
+  placeholderDecoration.textContent = intl.formatMessage(_messages.placeholderTextMessages.multiBodiedExtensionPlaceholderText);
+  return placeholderDecoration;
+};
+
+// `pos` is before extensionFrame; `pos + 2` is inside its paragraph, where
+// typing starts and where the placeholder should render.
+var createMultiBodiedExtensionPlaceholderDecoration = function createMultiBodiedExtensionPlaceholderDecoration(pos, intl) {
+  return _view.Decoration.widget(pos + 2, function () {
+    return createMultiBodiedExtensionPlaceholderElement(intl);
+  }, {
+    side: 0,
+    key: "multi-bodied-extension-placeholder-".concat(pos)
+  });
+};
+// Convert changed step ranges into final-document positions. A transaction can
+// contain multiple steps, and each step can shift positions for later steps.
+var getChangedRanges = function getChangedRanges(tr) {
+  var ranges = [];
+  tr.mapping.maps.forEach(function (stepMap, index) {
+    stepMap.forEach(function (_oldStart, _oldEnd, newStart, newEnd) {
+      var mappingAfterStep = tr.mapping.slice(index + 1);
+      ranges.push({
+        from: mappingAfterStep.map(newStart, -1),
+        to: mappingAfterStep.map(newEnd, 1)
+      });
+    });
+  });
+  return ranges;
+};
+
+// Walk from a changed position up to its containing MBE frame. The frame may no
+// longer be empty after the change, but we still need its range to remove stale decorations.
+var getMultiBodiedExtensionFrameRange = function getMultiBodiedExtensionFrameRange(doc, pos) {
+  var resolvedPos = doc.resolve(Math.max(0, Math.min(pos, doc.content.size)));
+  for (var depth = resolvedPos.depth; depth > 0; depth--) {
+    var node = resolvedPos.node(depth);
+    var parent = depth > 0 ? resolvedPos.node(depth - 1) : undefined;
+    if (isExtensionFrameInMultiBodiedExtension(node, parent)) {
+      return {
+        from: resolvedPos.before(depth),
+        to: resolvedPos.after(depth)
+      };
+    }
+  }
+  return;
+};
+
+// Resolve just inside a frame to recover its parent; `doc.nodeAt(framePos)` only
+// gives the frame node itself.
+var getMultiBodiedExtensionFrameParent = function getMultiBodiedExtensionFrameParent(doc, framePos) {
+  var resolvedPos = doc.resolve(Math.max(0, Math.min(framePos + 1, doc.content.size)));
+  for (var depth = resolvedPos.depth; depth > 0; depth--) {
+    if (resolvedPos.before(depth) === framePos) {
+      return resolvedPos.node(depth - 1);
+    }
+  }
+  return;
+};
+
+// Only update MBE frames touched by this transaction: either the change happened
+// inside a frame, or the transaction inserted/replaced an empty frame.
+var getAffectedMultiBodiedExtensionFrameRanges = function getAffectedMultiBodiedExtensionFrameRanges(doc, ranges) {
+  var affectedRanges = new Map();
+  ranges.forEach(function (_ref) {
+    var from = _ref.from,
+      to = _ref.to;
+    [from, to].forEach(function (pos) {
+      var multiBodiedExtensionFrameRange = getMultiBodiedExtensionFrameRange(doc, pos);
+      if (multiBodiedExtensionFrameRange) {
+        affectedRanges.set("".concat(multiBodiedExtensionFrameRange.from, "-").concat(multiBodiedExtensionFrameRange.to), multiBodiedExtensionFrameRange);
+      }
+    });
+    doc.nodesBetween(from, to, function (node, pos, parent) {
+      if (isEmptyExtensionFrameInMultiBodiedExtension(node, parent)) {
+        var multiBodiedExtensionFrameRange = {
+          from: pos,
+          to: pos + node.nodeSize
+        };
+        affectedRanges.set("".concat(multiBodiedExtensionFrameRange.from, "-").concat(multiBodiedExtensionFrameRange.to), multiBodiedExtensionFrameRange);
+        return false;
+      }
+      return true;
+    });
+  });
+  return Array.from(affectedRanges.values());
+};
+
+// Initial creation scans the full document once. Later updates use affected
+// ranges, and inactive tab frames stay hidden by the MBE renderer.
+function createMultiBodiedExtensionPlaceholderDecorations(editorState, intl) {
+  if (!isMultiBodiedExtensionPlaceholderEnabled()) {
+    return;
+  }
+  var decorations = [];
+  editorState.doc.descendants(function (node, pos, parent) {
+    if (isEmptyExtensionFrameInMultiBodiedExtension(node, parent)) {
+      decorations.push(createMultiBodiedExtensionPlaceholderDecoration(pos, intl));
+      return false;
+    }
+    return true;
+  });
+  return decorations.length > 0 ? _view.DecorationSet.create(editorState.doc, decorations) : _view.DecorationSet.empty;
+}
+function updateMultiBodiedExtensionPlaceholderDecorations(_ref2) {
+  var currentDecorationSet = _ref2.currentDecorationSet,
+    intl = _ref2.intl,
+    newEditorState = _ref2.newEditorState,
+    tr = _ref2.tr;
+  if (!isMultiBodiedExtensionPlaceholderEnabled()) {
+    return;
+  }
+  if (!currentDecorationSet) {
+    return createMultiBodiedExtensionPlaceholderDecorations(newEditorState, intl);
+  }
+
+  // No document change means no empty/non-empty frame state change; remap
+  // existing decorations only if ProseMirror reports positional mapping.
+  if (!tr.docChanged) {
+    return tr.mapping.maps.length > 0 ? currentDecorationSet.map(tr.mapping, newEditorState.doc) : currentDecorationSet;
+  }
+  var mappedDecorationSet = currentDecorationSet.map(tr.mapping, newEditorState.doc);
+  var affectedRanges = getAffectedMultiBodiedExtensionFrameRanges(newEditorState.doc, getChangedRanges(tr));
+  if (affectedRanges.length === 0) {
+    return mappedDecorationSet;
+  }
+
+  // Remove placeholders in affected frames, then re-add only for frames that
+  // still have the empty extensionFrame -> paragraph shape.
+  var decorationsToRemove = affectedRanges.flatMap(function (_ref3) {
+    var from = _ref3.from,
+      to = _ref3.to;
+    return mappedDecorationSet.find(from, to);
+  });
+  var decorationsToAdd = affectedRanges.flatMap(function (_ref4) {
+    var from = _ref4.from;
+    var node = newEditorState.doc.nodeAt(from);
+    var parent = getMultiBodiedExtensionFrameParent(newEditorState.doc, from);
+    return node && isEmptyExtensionFrameInMultiBodiedExtension(node, parent) ? [createMultiBodiedExtensionPlaceholderDecoration(from, intl)] : [];
+  });
+  return mappedDecorationSet.remove(decorationsToRemove).add(newEditorState.doc, decorationsToAdd);
+}

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

@@ -9,4 +9,5 @@ export const TYPEWRITER_TYPED_AND_DELETED_DELAY = 1500; // Delay before starting
 
 export const nodeTypesWithLongPlaceholderText = ['expand', 'panel'];
 export const nodeTypesWithShortPlaceholderText = ['tableCell', 'tableHeader'];
-export const nodeTypesWithSyncBlockPlaceholderText = ['bodiedSyncBlock'];
+export const nodeTypesWithSyncBlockPlaceholderText = ['bodiedSyncBlock'];
+export const nodeTypesWithMultiBodiedExtensionPlaceholderText = ['extensionFrame'];

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

@@ -1,8 +1,10 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { expVal } from '@atlaskit/tmp-editor-statsig/expVal';
 import { EMPTY_PARAGRAPH_TIMEOUT_DELAY, pluginKey } from '../placeholderPlugin';
 import { TYPEWRITER_TYPED_AND_DELETED_DELAY } from './constants';
 import { createPlaceholderDecoration } from './decorations';
+import { createMultiBodiedExtensionPlaceholderDecorations, updateMultiBodiedExtensionPlaceholderDecorations } from './multi-bodied-extension-placeholder-decorations';
 import { createSourceSyncBlockPlaceholderDecorations, updateSourceSyncBlockPlaceholderDecorations } from './source-sync-block-placeholder-decorations';
 import { calculateUserInteractionState, createPlaceHolderStateFrom, getPlaceholderState } from './utils';
 export default function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderText, emptyLinePlaceholder, placeholderPrompts, withEmptyParagraph, initialIsPlaceholderHidden, placeholderADF, isRovoLLMEnabled, api) {
@@ -37,7 +39,8 @@ export default function createPlugin(intl, defaultPlaceholderText, bracketPlaceh
             withEmptyParagraph,
             isPlaceholderHidden: initialIsPlaceholderHidden
           }),
-          sourceSyncBlockPlaceholderDecorations: createSourceSyncBlockPlaceholderDecorations(state, intl)
+          sourceSyncBlockPlaceholderDecorations: createSourceSyncBlockPlaceholderDecorations(state, intl),
+          multiBodiedExtensionPlaceholderDecorations: createMultiBodiedExtensionPlaceholderDecorations(state, intl)
         };
       },
       apply: (tr, placeholderState, _oldEditorState, newEditorState) => {
@@ -88,6 +91,12 @@ export default function createPlugin(intl, defaultPlaceholderText, bracketPlaceh
             newEditorState,
             oldEditorState: _oldEditorState,
             tr
+          }),
+          multiBodiedExtensionPlaceholderDecorations: updateMultiBodiedExtensionPlaceholderDecorations({
+            currentDecorationSet: placeholderState === null || placeholderState === void 0 ? void 0 : placeholderState.multiBodiedExtensionPlaceholderDecorations,
+            intl,
+            newEditorState,
+            tr
           })
         };
 
@@ -100,7 +109,7 @@ export default function createPlugin(intl, defaultPlaceholderText, bracketPlaceh
     },
     props: {
       decorations(editorState) {
-        var _api$composition, _api$showDiff, _api$showDiff$sharedS;
+        var _api$composition, _api$showDiff, _api$showDiff$sharedS, _syncBlockPlaceholder, _multiBodiedExtension;
         // @ts-ignore quick fix which needs follow up to use standard apis
         if (editorState.collabEditPlugin$ && editorState.collabEditPlugin$.isReady !== true) {
           return;
@@ -112,7 +121,8 @@ export default function createPlugin(intl, defaultPlaceholderText, bracketPlaceh
           typedAndDeleted,
           contextPlaceholderADF,
           showOnEmptyParagraph,
-          sourceSyncBlockPlaceholderDecorations
+          sourceSyncBlockPlaceholderDecorations,
+          multiBodiedExtensionPlaceholderDecorations
         } = getPlaceholderState(editorState);
 
         // Decorations is still called after plugin is destroyed
@@ -123,14 +133,25 @@ export default function createPlugin(intl, defaultPlaceholderText, bracketPlaceh
         const compositionPluginState = api === null || api === void 0 ? void 0 : (_api$composition = api.composition) === null || _api$composition === void 0 ? void 0 : _api$composition.sharedState.currentState();
         const isShowingDiff = Boolean(api === null || api === void 0 ? void 0 : (_api$showDiff = api.showDiff) === null || _api$showDiff === void 0 ? void 0 : (_api$showDiff$sharedS = _api$showDiff.sharedState.currentState()) === null || _api$showDiff$sharedS === void 0 ? void 0 : _api$showDiff$sharedS.isDisplayingChanges);
         const syncBlockPlaceholderDecorations = !(compositionPluginState !== null && compositionPluginState !== void 0 && compositionPluginState.isComposing) && !isShowingDiff ? sourceSyncBlockPlaceholderDecorations : undefined;
+        const multiBodiedExtensionDecorations = !(compositionPluginState !== null && compositionPluginState !== void 0 && compositionPluginState.isComposing) && !isShowingDiff ? multiBodiedExtensionPlaceholderDecorations : undefined;
+        const syncBlockDecorationItems = (_syncBlockPlaceholder = syncBlockPlaceholderDecorations === null || syncBlockPlaceholderDecorations === void 0 ? void 0 : syncBlockPlaceholderDecorations.find()) !== null && _syncBlockPlaceholder !== void 0 ? _syncBlockPlaceholder : [];
+        const multiBodiedExtensionDecorationItems = (_multiBodiedExtension = multiBodiedExtensionDecorations === null || multiBodiedExtensionDecorations === void 0 ? void 0 : multiBodiedExtensionDecorations.find()) !== null && _multiBodiedExtension !== void 0 ? _multiBodiedExtension : [];
         if (hasPlaceholder && ((placeholderText !== null && placeholderText !== void 0 ? placeholderText : '') || placeholderPrompts || placeholderADF || contextPlaceholderADF) && pos !== undefined && !(compositionPluginState !== null && compositionPluginState !== void 0 && compositionPluginState.isComposing) && !isShowingDiff) {
-          var _syncBlockPlaceholder;
           const initialDelayWhenUserTypedAndDeleted = typedAndDeleted ? TYPEWRITER_TYPED_AND_DELETED_DELAY : 0;
           // contextPlaceholderADF takes precedence over the global placeholderADF
           const placeholderAdfToUse = contextPlaceholderADF || placeholderADF;
-          return createPlaceholderDecoration(editorState, placeholderText !== null && placeholderText !== void 0 ? placeholderText : '', placeholderPrompts, activeTypewriterTimeouts, pos, initialDelayWhenUserTypedAndDeleted, placeholderAdfToUse, showOnEmptyParagraph).add(editorState.doc, (_syncBlockPlaceholder = syncBlockPlaceholderDecorations === null || syncBlockPlaceholderDecorations === void 0 ? void 0 : syncBlockPlaceholderDecorations.find()) !== null && _syncBlockPlaceholder !== void 0 ? _syncBlockPlaceholder : []);
+          return createPlaceholderDecoration(editorState, placeholderText !== null && placeholderText !== void 0 ? placeholderText : '', placeholderPrompts, activeTypewriterTimeouts, pos, initialDelayWhenUserTypedAndDeleted, placeholderAdfToUse, showOnEmptyParagraph).add(editorState.doc, [...syncBlockDecorationItems, ...multiBodiedExtensionDecorationItems]);
+        }
+        // These sets are already mapped in plugin state. Return a single
+        // active set directly, and only rebuild when multiple sets must be merged.
+        if (syncBlockDecorationItems.length > 0 && multiBodiedExtensionDecorationItems.length === 0) {
+          return syncBlockPlaceholderDecorations;
+        }
+        if (multiBodiedExtensionDecorationItems.length > 0 && syncBlockDecorationItems.length === 0) {
+          return multiBodiedExtensionDecorations;
         }
-        return syncBlockPlaceholderDecorations;
+        const additionalDecorations = [...syncBlockDecorationItems, ...multiBodiedExtensionDecorationItems];
+        return additionalDecorations.length > 0 ? DecorationSet.create(editorState.doc, additionalDecorations) : undefined;
       }
     },
     view() {

package/dist/es2019/pm-plugins/multi-bodied-extension-placeholder-decorations.js

@@ -0,0 +1,163 @@
+import { placeholderTextMessages as messages } from '@atlaskit/editor-common/messages';
+import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { nodeTypesWithMultiBodiedExtensionPlaceholderText, placeholderTestId } from './constants';
+const isMultiBodiedExtensionPlaceholderEnabled = () => expValEquals('confluence_native_tabs_experiment', 'isEnabled', true);
+
+// Empty MBE bodies are represented as extensionFrame -> empty paragraph.
+// The paragraph gives the cursor a valid textblock, but there is no authored content yet.
+const isEmptyExtensionFrame = node => {
+  var _node$firstChild, _node$firstChild2;
+  return nodeTypesWithMultiBodiedExtensionPlaceholderText.includes(node.type.name) && node.childCount === 1 && ((_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.content.size) === 0 && ((_node$firstChild2 = node.firstChild) === null || _node$firstChild2 === void 0 ? void 0 : _node$firstChild2.type.name) === 'paragraph';
+};
+
+// Keep this generic for any MBE extension by checking the node shape rather
+// than a product-specific extensionKey.
+const isExtensionFrameInMultiBodiedExtension = (node, parent) => nodeTypesWithMultiBodiedExtensionPlaceholderText.includes(node.type.name) && (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'multiBodiedExtension';
+const isEmptyExtensionFrameInMultiBodiedExtension = (node, parent) => isExtensionFrameInMultiBodiedExtension(node, parent) && isEmptyExtensionFrame(node);
+
+// Widget decorations render UI without adding real content to the document.
+const createMultiBodiedExtensionPlaceholderElement = intl => {
+  const placeholderDecoration = document.createElement('span');
+  placeholderDecoration.setAttribute('data-testid', placeholderTestId);
+  placeholderDecoration.className = 'placeholder-decoration';
+  placeholderDecoration.setAttribute('aria-hidden', 'true');
+  placeholderDecoration.textContent = intl.formatMessage(messages.multiBodiedExtensionPlaceholderText);
+  return placeholderDecoration;
+};
+
+// `pos` is before extensionFrame; `pos + 2` is inside its paragraph, where
+// typing starts and where the placeholder should render.
+const createMultiBodiedExtensionPlaceholderDecoration = (pos, intl) => Decoration.widget(pos + 2, () => createMultiBodiedExtensionPlaceholderElement(intl), {
+  side: 0,
+  key: `multi-bodied-extension-placeholder-${pos}`
+});
+// Convert changed step ranges into final-document positions. A transaction can
+// contain multiple steps, and each step can shift positions for later steps.
+const getChangedRanges = tr => {
+  const ranges = [];
+  tr.mapping.maps.forEach((stepMap, index) => {
+    stepMap.forEach((_oldStart, _oldEnd, newStart, newEnd) => {
+      const mappingAfterStep = tr.mapping.slice(index + 1);
+      ranges.push({
+        from: mappingAfterStep.map(newStart, -1),
+        to: mappingAfterStep.map(newEnd, 1)
+      });
+    });
+  });
+  return ranges;
+};
+
+// Walk from a changed position up to its containing MBE frame. The frame may no
+// longer be empty after the change, but we still need its range to remove stale decorations.
+const getMultiBodiedExtensionFrameRange = (doc, pos) => {
+  const resolvedPos = doc.resolve(Math.max(0, Math.min(pos, doc.content.size)));
+  for (let depth = resolvedPos.depth; depth > 0; depth--) {
+    const node = resolvedPos.node(depth);
+    const parent = depth > 0 ? resolvedPos.node(depth - 1) : undefined;
+    if (isExtensionFrameInMultiBodiedExtension(node, parent)) {
+      return {
+        from: resolvedPos.before(depth),
+        to: resolvedPos.after(depth)
+      };
+    }
+  }
+  return;
+};
+
+// Resolve just inside a frame to recover its parent; `doc.nodeAt(framePos)` only
+// gives the frame node itself.
+const getMultiBodiedExtensionFrameParent = (doc, framePos) => {
+  const resolvedPos = doc.resolve(Math.max(0, Math.min(framePos + 1, doc.content.size)));
+  for (let depth = resolvedPos.depth; depth > 0; depth--) {
+    if (resolvedPos.before(depth) === framePos) {
+      return resolvedPos.node(depth - 1);
+    }
+  }
+  return;
+};
+
+// Only update MBE frames touched by this transaction: either the change happened
+// inside a frame, or the transaction inserted/replaced an empty frame.
+const getAffectedMultiBodiedExtensionFrameRanges = (doc, ranges) => {
+  const affectedRanges = new Map();
+  ranges.forEach(({
+    from,
+    to
+  }) => {
+    [from, to].forEach(pos => {
+      const multiBodiedExtensionFrameRange = getMultiBodiedExtensionFrameRange(doc, pos);
+      if (multiBodiedExtensionFrameRange) {
+        affectedRanges.set(`${multiBodiedExtensionFrameRange.from}-${multiBodiedExtensionFrameRange.to}`, multiBodiedExtensionFrameRange);
+      }
+    });
+    doc.nodesBetween(from, to, (node, pos, parent) => {
+      if (isEmptyExtensionFrameInMultiBodiedExtension(node, parent)) {
+        const multiBodiedExtensionFrameRange = {
+          from: pos,
+          to: pos + node.nodeSize
+        };
+        affectedRanges.set(`${multiBodiedExtensionFrameRange.from}-${multiBodiedExtensionFrameRange.to}`, multiBodiedExtensionFrameRange);
+        return false;
+      }
+      return true;
+    });
+  });
+  return Array.from(affectedRanges.values());
+};
+
+// Initial creation scans the full document once. Later updates use affected
+// ranges, and inactive tab frames stay hidden by the MBE renderer.
+export function createMultiBodiedExtensionPlaceholderDecorations(editorState, intl) {
+  if (!isMultiBodiedExtensionPlaceholderEnabled()) {
+    return;
+  }
+  const decorations = [];
+  editorState.doc.descendants((node, pos, parent) => {
+    if (isEmptyExtensionFrameInMultiBodiedExtension(node, parent)) {
+      decorations.push(createMultiBodiedExtensionPlaceholderDecoration(pos, intl));
+      return false;
+    }
+    return true;
+  });
+  return decorations.length > 0 ? DecorationSet.create(editorState.doc, decorations) : DecorationSet.empty;
+}
+export function updateMultiBodiedExtensionPlaceholderDecorations({
+  currentDecorationSet,
+  intl,
+  newEditorState,
+  tr
+}) {
+  if (!isMultiBodiedExtensionPlaceholderEnabled()) {
+    return;
+  }
+  if (!currentDecorationSet) {
+    return createMultiBodiedExtensionPlaceholderDecorations(newEditorState, intl);
+  }
+
+  // No document change means no empty/non-empty frame state change; remap
+  // existing decorations only if ProseMirror reports positional mapping.
+  if (!tr.docChanged) {
+    return tr.mapping.maps.length > 0 ? currentDecorationSet.map(tr.mapping, newEditorState.doc) : currentDecorationSet;
+  }
+  const mappedDecorationSet = currentDecorationSet.map(tr.mapping, newEditorState.doc);
+  const affectedRanges = getAffectedMultiBodiedExtensionFrameRanges(newEditorState.doc, getChangedRanges(tr));
+  if (affectedRanges.length === 0) {
+    return mappedDecorationSet;
+  }
+
+  // Remove placeholders in affected frames, then re-add only for frames that
+  // still have the empty extensionFrame -> paragraph shape.
+  const decorationsToRemove = affectedRanges.flatMap(({
+    from,
+    to
+  }) => mappedDecorationSet.find(from, to));
+  const decorationsToAdd = affectedRanges.flatMap(({
+    from
+  }) => {
+    const node = newEditorState.doc.nodeAt(from);
+    const parent = getMultiBodiedExtensionFrameParent(newEditorState.doc, from);
+    return node && isEmptyExtensionFrameInMultiBodiedExtension(node, parent) ? [createMultiBodiedExtensionPlaceholderDecoration(from, intl)] : [];
+  });
+  return mappedDecorationSet.remove(decorationsToRemove).add(newEditorState.doc, decorationsToAdd);
+}

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

@@ -9,4 +9,5 @@ export var TYPEWRITER_TYPED_AND_DELETED_DELAY = 1500; // Delay before starting a
 
 export var nodeTypesWithLongPlaceholderText = ['expand', 'panel'];
 export var nodeTypesWithShortPlaceholderText = ['tableCell', 'tableHeader'];
-export var nodeTypesWithSyncBlockPlaceholderText = ['bodiedSyncBlock'];
+export var nodeTypesWithSyncBlockPlaceholderText = ['bodiedSyncBlock'];
+export var nodeTypesWithMultiBodiedExtensionPlaceholderText = ['extensionFrame'];

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

@@ -1,11 +1,14 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { expVal } from '@atlaskit/tmp-editor-statsig/expVal';
 import { EMPTY_PARAGRAPH_TIMEOUT_DELAY, pluginKey } from '../placeholderPlugin';
 import { TYPEWRITER_TYPED_AND_DELETED_DELAY } from './constants';
 import { createPlaceholderDecoration } from './decorations';
+import { createMultiBodiedExtensionPlaceholderDecorations, updateMultiBodiedExtensionPlaceholderDecorations } from './multi-bodied-extension-placeholder-decorations';
 import { createSourceSyncBlockPlaceholderDecorations, updateSourceSyncBlockPlaceholderDecorations } from './source-sync-block-placeholder-decorations';
 import { calculateUserInteractionState, createPlaceHolderStateFrom, getPlaceholderState } from './utils';
 export default function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderText, emptyLinePlaceholder, placeholderPrompts, withEmptyParagraph, initialIsPlaceholderHidden, placeholderADF, isRovoLLMEnabled, api) {
@@ -41,7 +44,8 @@ export default function createPlugin(intl, defaultPlaceholderText, bracketPlaceh
           withEmptyParagraph: withEmptyParagraph,
           isPlaceholderHidden: initialIsPlaceholderHidden
         })), {}, {
-          sourceSyncBlockPlaceholderDecorations: createSourceSyncBlockPlaceholderDecorations(state, intl)
+          sourceSyncBlockPlaceholderDecorations: createSourceSyncBlockPlaceholderDecorations(state, intl),
+          multiBodiedExtensionPlaceholderDecorations: createMultiBodiedExtensionPlaceholderDecorations(state, intl)
         });
       },
       apply: function apply(tr, placeholderState, _oldEditorState, newEditorState) {
@@ -90,6 +94,12 @@ export default function createPlugin(intl, defaultPlaceholderText, bracketPlaceh
             newEditorState: newEditorState,
             oldEditorState: _oldEditorState,
             tr: tr
+          }),
+          multiBodiedExtensionPlaceholderDecorations: updateMultiBodiedExtensionPlaceholderDecorations({
+            currentDecorationSet: placeholderState === null || placeholderState === void 0 ? void 0 : placeholderState.multiBodiedExtensionPlaceholderDecorations,
+            intl: intl,
+            newEditorState: newEditorState,
+            tr: tr
           })
         });
 
@@ -102,7 +112,7 @@ export default function createPlugin(intl, defaultPlaceholderText, bracketPlaceh
     },
     props: {
       decorations: function decorations(editorState) {
-        var _api$composition, _api$showDiff;
+        var _api$composition, _api$showDiff, _syncBlockPlaceholder, _multiBodiedExtension;
         // @ts-ignore quick fix which needs follow up to use standard apis
         if (editorState.collabEditPlugin$ && editorState.collabEditPlugin$.isReady !== true) {
           return;
@@ -114,7 +124,8 @@ export default function createPlugin(intl, defaultPlaceholderText, bracketPlaceh
           typedAndDeleted = _getPlaceholderState.typedAndDeleted,
           contextPlaceholderADF = _getPlaceholderState.contextPlaceholderADF,
           showOnEmptyParagraph = _getPlaceholderState.showOnEmptyParagraph,
-          sourceSyncBlockPlaceholderDecorations = _getPlaceholderState.sourceSyncBlockPlaceholderDecorations;
+          sourceSyncBlockPlaceholderDecorations = _getPlaceholderState.sourceSyncBlockPlaceholderDecorations,
+          multiBodiedExtensionPlaceholderDecorations = _getPlaceholderState.multiBodiedExtensionPlaceholderDecorations;
 
         // Decorations is still called after plugin is destroyed
         // So we need to make sure decorations is not called if plugin has been destroyed to prevent the placeholder animations' setTimeouts called infinitely
@@ -124,14 +135,25 @@ export default function createPlugin(intl, defaultPlaceholderText, bracketPlaceh
         var compositionPluginState = api === null || api === void 0 || (_api$composition = api.composition) === null || _api$composition === void 0 ? void 0 : _api$composition.sharedState.currentState();
         var isShowingDiff = Boolean(api === null || api === void 0 || (_api$showDiff = api.showDiff) === null || _api$showDiff === void 0 || (_api$showDiff = _api$showDiff.sharedState.currentState()) === null || _api$showDiff === void 0 ? void 0 : _api$showDiff.isDisplayingChanges);
         var syncBlockPlaceholderDecorations = !(compositionPluginState !== null && compositionPluginState !== void 0 && compositionPluginState.isComposing) && !isShowingDiff ? sourceSyncBlockPlaceholderDecorations : undefined;
+        var multiBodiedExtensionDecorations = !(compositionPluginState !== null && compositionPluginState !== void 0 && compositionPluginState.isComposing) && !isShowingDiff ? multiBodiedExtensionPlaceholderDecorations : undefined;
+        var syncBlockDecorationItems = (_syncBlockPlaceholder = syncBlockPlaceholderDecorations === null || syncBlockPlaceholderDecorations === void 0 ? void 0 : syncBlockPlaceholderDecorations.find()) !== null && _syncBlockPlaceholder !== void 0 ? _syncBlockPlaceholder : [];
+        var multiBodiedExtensionDecorationItems = (_multiBodiedExtension = multiBodiedExtensionDecorations === null || multiBodiedExtensionDecorations === void 0 ? void 0 : multiBodiedExtensionDecorations.find()) !== null && _multiBodiedExtension !== void 0 ? _multiBodiedExtension : [];
         if (hasPlaceholder && ((placeholderText !== null && placeholderText !== void 0 ? placeholderText : '') || placeholderPrompts || placeholderADF || contextPlaceholderADF) && pos !== undefined && !(compositionPluginState !== null && compositionPluginState !== void 0 && compositionPluginState.isComposing) && !isShowingDiff) {
-          var _syncBlockPlaceholder;
           var initialDelayWhenUserTypedAndDeleted = typedAndDeleted ? TYPEWRITER_TYPED_AND_DELETED_DELAY : 0;
           // contextPlaceholderADF takes precedence over the global placeholderADF
           var placeholderAdfToUse = contextPlaceholderADF || placeholderADF;
-          return createPlaceholderDecoration(editorState, placeholderText !== null && placeholderText !== void 0 ? placeholderText : '', placeholderPrompts, activeTypewriterTimeouts, pos, initialDelayWhenUserTypedAndDeleted, placeholderAdfToUse, showOnEmptyParagraph).add(editorState.doc, (_syncBlockPlaceholder = syncBlockPlaceholderDecorations === null || syncBlockPlaceholderDecorations === void 0 ? void 0 : syncBlockPlaceholderDecorations.find()) !== null && _syncBlockPlaceholder !== void 0 ? _syncBlockPlaceholder : []);
+          return createPlaceholderDecoration(editorState, placeholderText !== null && placeholderText !== void 0 ? placeholderText : '', placeholderPrompts, activeTypewriterTimeouts, pos, initialDelayWhenUserTypedAndDeleted, placeholderAdfToUse, showOnEmptyParagraph).add(editorState.doc, [].concat(_toConsumableArray(syncBlockDecorationItems), _toConsumableArray(multiBodiedExtensionDecorationItems)));
+        }
+        // These sets are already mapped in plugin state. Return a single
+        // active set directly, and only rebuild when multiple sets must be merged.
+        if (syncBlockDecorationItems.length > 0 && multiBodiedExtensionDecorationItems.length === 0) {
+          return syncBlockPlaceholderDecorations;
+        }
+        if (multiBodiedExtensionDecorationItems.length > 0 && syncBlockDecorationItems.length === 0) {
+          return multiBodiedExtensionDecorations;
         }
-        return syncBlockPlaceholderDecorations;
+        var additionalDecorations = [].concat(_toConsumableArray(syncBlockDecorationItems), _toConsumableArray(multiBodiedExtensionDecorationItems));
+        return additionalDecorations.length > 0 ? DecorationSet.create(editorState.doc, additionalDecorations) : undefined;
       }
     },
     view: function view() {

package/dist/esm/pm-plugins/multi-bodied-extension-placeholder-decorations.js

@@ -0,0 +1,171 @@
+import { placeholderTextMessages as messages } from '@atlaskit/editor-common/messages';
+import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { nodeTypesWithMultiBodiedExtensionPlaceholderText, placeholderTestId } from './constants';
+var isMultiBodiedExtensionPlaceholderEnabled = function isMultiBodiedExtensionPlaceholderEnabled() {
+  return expValEquals('confluence_native_tabs_experiment', 'isEnabled', true);
+};
+
+// Empty MBE bodies are represented as extensionFrame -> empty paragraph.
+// The paragraph gives the cursor a valid textblock, but there is no authored content yet.
+var isEmptyExtensionFrame = function isEmptyExtensionFrame(node) {
+  var _node$firstChild, _node$firstChild2;
+  return nodeTypesWithMultiBodiedExtensionPlaceholderText.includes(node.type.name) && node.childCount === 1 && ((_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.content.size) === 0 && ((_node$firstChild2 = node.firstChild) === null || _node$firstChild2 === void 0 ? void 0 : _node$firstChild2.type.name) === 'paragraph';
+};
+
+// Keep this generic for any MBE extension by checking the node shape rather
+// than a product-specific extensionKey.
+var isExtensionFrameInMultiBodiedExtension = function isExtensionFrameInMultiBodiedExtension(node, parent) {
+  return nodeTypesWithMultiBodiedExtensionPlaceholderText.includes(node.type.name) && (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'multiBodiedExtension';
+};
+var isEmptyExtensionFrameInMultiBodiedExtension = function isEmptyExtensionFrameInMultiBodiedExtension(node, parent) {
+  return isExtensionFrameInMultiBodiedExtension(node, parent) && isEmptyExtensionFrame(node);
+};
+
+// Widget decorations render UI without adding real content to the document.
+var createMultiBodiedExtensionPlaceholderElement = function createMultiBodiedExtensionPlaceholderElement(intl) {
+  var placeholderDecoration = document.createElement('span');
+  placeholderDecoration.setAttribute('data-testid', placeholderTestId);
+  placeholderDecoration.className = 'placeholder-decoration';
+  placeholderDecoration.setAttribute('aria-hidden', 'true');
+  placeholderDecoration.textContent = intl.formatMessage(messages.multiBodiedExtensionPlaceholderText);
+  return placeholderDecoration;
+};
+
+// `pos` is before extensionFrame; `pos + 2` is inside its paragraph, where
+// typing starts and where the placeholder should render.
+var createMultiBodiedExtensionPlaceholderDecoration = function createMultiBodiedExtensionPlaceholderDecoration(pos, intl) {
+  return Decoration.widget(pos + 2, function () {
+    return createMultiBodiedExtensionPlaceholderElement(intl);
+  }, {
+    side: 0,
+    key: "multi-bodied-extension-placeholder-".concat(pos)
+  });
+};
+// Convert changed step ranges into final-document positions. A transaction can
+// contain multiple steps, and each step can shift positions for later steps.
+var getChangedRanges = function getChangedRanges(tr) {
+  var ranges = [];
+  tr.mapping.maps.forEach(function (stepMap, index) {
+    stepMap.forEach(function (_oldStart, _oldEnd, newStart, newEnd) {
+      var mappingAfterStep = tr.mapping.slice(index + 1);
+      ranges.push({
+        from: mappingAfterStep.map(newStart, -1),
+        to: mappingAfterStep.map(newEnd, 1)
+      });
+    });
+  });
+  return ranges;
+};
+
+// Walk from a changed position up to its containing MBE frame. The frame may no
+// longer be empty after the change, but we still need its range to remove stale decorations.
+var getMultiBodiedExtensionFrameRange = function getMultiBodiedExtensionFrameRange(doc, pos) {
+  var resolvedPos = doc.resolve(Math.max(0, Math.min(pos, doc.content.size)));
+  for (var depth = resolvedPos.depth; depth > 0; depth--) {
+    var node = resolvedPos.node(depth);
+    var parent = depth > 0 ? resolvedPos.node(depth - 1) : undefined;
+    if (isExtensionFrameInMultiBodiedExtension(node, parent)) {
+      return {
+        from: resolvedPos.before(depth),
+        to: resolvedPos.after(depth)
+      };
+    }
+  }
+  return;
+};
+
+// Resolve just inside a frame to recover its parent; `doc.nodeAt(framePos)` only
+// gives the frame node itself.
+var getMultiBodiedExtensionFrameParent = function getMultiBodiedExtensionFrameParent(doc, framePos) {
+  var resolvedPos = doc.resolve(Math.max(0, Math.min(framePos + 1, doc.content.size)));
+  for (var depth = resolvedPos.depth; depth > 0; depth--) {
+    if (resolvedPos.before(depth) === framePos) {
+      return resolvedPos.node(depth - 1);
+    }
+  }
+  return;
+};
+
+// Only update MBE frames touched by this transaction: either the change happened
+// inside a frame, or the transaction inserted/replaced an empty frame.
+var getAffectedMultiBodiedExtensionFrameRanges = function getAffectedMultiBodiedExtensionFrameRanges(doc, ranges) {
+  var affectedRanges = new Map();
+  ranges.forEach(function (_ref) {
+    var from = _ref.from,
+      to = _ref.to;
+    [from, to].forEach(function (pos) {
+      var multiBodiedExtensionFrameRange = getMultiBodiedExtensionFrameRange(doc, pos);
+      if (multiBodiedExtensionFrameRange) {
+        affectedRanges.set("".concat(multiBodiedExtensionFrameRange.from, "-").concat(multiBodiedExtensionFrameRange.to), multiBodiedExtensionFrameRange);
+      }
+    });
+    doc.nodesBetween(from, to, function (node, pos, parent) {
+      if (isEmptyExtensionFrameInMultiBodiedExtension(node, parent)) {
+        var multiBodiedExtensionFrameRange = {
+          from: pos,
+          to: pos + node.nodeSize
+        };
+        affectedRanges.set("".concat(multiBodiedExtensionFrameRange.from, "-").concat(multiBodiedExtensionFrameRange.to), multiBodiedExtensionFrameRange);
+        return false;
+      }
+      return true;
+    });
+  });
+  return Array.from(affectedRanges.values());
+};
+
+// Initial creation scans the full document once. Later updates use affected
+// ranges, and inactive tab frames stay hidden by the MBE renderer.
+export function createMultiBodiedExtensionPlaceholderDecorations(editorState, intl) {
+  if (!isMultiBodiedExtensionPlaceholderEnabled()) {
+    return;
+  }
+  var decorations = [];
+  editorState.doc.descendants(function (node, pos, parent) {
+    if (isEmptyExtensionFrameInMultiBodiedExtension(node, parent)) {
+      decorations.push(createMultiBodiedExtensionPlaceholderDecoration(pos, intl));
+      return false;
+    }
+    return true;
+  });
+  return decorations.length > 0 ? DecorationSet.create(editorState.doc, decorations) : DecorationSet.empty;
+}
+export function updateMultiBodiedExtensionPlaceholderDecorations(_ref2) {
+  var currentDecorationSet = _ref2.currentDecorationSet,
+    intl = _ref2.intl,
+    newEditorState = _ref2.newEditorState,
+    tr = _ref2.tr;
+  if (!isMultiBodiedExtensionPlaceholderEnabled()) {
+    return;
+  }
+  if (!currentDecorationSet) {
+    return createMultiBodiedExtensionPlaceholderDecorations(newEditorState, intl);
+  }
+
+  // No document change means no empty/non-empty frame state change; remap
+  // existing decorations only if ProseMirror reports positional mapping.
+  if (!tr.docChanged) {
+    return tr.mapping.maps.length > 0 ? currentDecorationSet.map(tr.mapping, newEditorState.doc) : currentDecorationSet;
+  }
+  var mappedDecorationSet = currentDecorationSet.map(tr.mapping, newEditorState.doc);
+  var affectedRanges = getAffectedMultiBodiedExtensionFrameRanges(newEditorState.doc, getChangedRanges(tr));
+  if (affectedRanges.length === 0) {
+    return mappedDecorationSet;
+  }
+
+  // Remove placeholders in affected frames, then re-add only for frames that
+  // still have the empty extensionFrame -> paragraph shape.
+  var decorationsToRemove = affectedRanges.flatMap(function (_ref3) {
+    var from = _ref3.from,
+      to = _ref3.to;
+    return mappedDecorationSet.find(from, to);
+  });
+  var decorationsToAdd = affectedRanges.flatMap(function (_ref4) {
+    var from = _ref4.from;
+    var node = newEditorState.doc.nodeAt(from);
+    var parent = getMultiBodiedExtensionFrameParent(newEditorState.doc, from);
+    return node && isEmptyExtensionFrameInMultiBodiedExtension(node, parent) ? [createMultiBodiedExtensionPlaceholderDecoration(from, intl)] : [];
+  });
+  return mappedDecorationSet.remove(decorationsToRemove).add(newEditorState.doc, decorationsToAdd);
+}

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

@@ -7,3 +7,4 @@ export declare const TYPEWRITER_TYPED_AND_DELETED_DELAY = 1500;
 export declare const nodeTypesWithLongPlaceholderText: string[];
 export declare const nodeTypesWithShortPlaceholderText: string[];
 export declare const nodeTypesWithSyncBlockPlaceholderText: string[];
+export declare const nodeTypesWithMultiBodiedExtensionPlaceholderText: string[];

package/dist/types/pm-plugins/multi-bodied-extension-placeholder-decorations.d.ts

@@ -0,0 +1,16 @@
+import type { IntlShape } from 'react-intl';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import type { Mapping } from '@atlaskit/editor-prosemirror/transform';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+type MultiBodiedExtensionPlaceholderTransaction = {
+    docChanged: boolean;
+    mapping: Mapping;
+};
+export declare function createMultiBodiedExtensionPlaceholderDecorations(editorState: EditorState, intl: IntlShape): DecorationSet | undefined;
+export declare function updateMultiBodiedExtensionPlaceholderDecorations({ currentDecorationSet, intl, newEditorState, tr, }: {
+    currentDecorationSet?: DecorationSet;
+    intl: IntlShape;
+    newEditorState: EditorState;
+    tr: MultiBodiedExtensionPlaceholderTransaction;
+}): DecorationSet | undefined;
+export {};

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

@@ -7,6 +7,7 @@ export interface PlaceHolderState {
     contextPlaceholderADF?: DocNode;
     hasPlaceholder: boolean;
     isPlaceholderHidden?: boolean;
+    multiBodiedExtensionPlaceholderDecorations?: DecorationSet;
     placeholderPrompts?: string[];
     placeholderText?: string;
     pos?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-placeholder",
-	"version": "12.0.25",
+	"version": "12.0.27",
 	"description": "Placeholder plugin for @atlaskit/editor-core.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -27,9 +27,9 @@
 		"@atlaskit/editor-plugin-type-ahead": "^13.0.0",
 		"@atlaskit/editor-prosemirror": "^8.0.0",
 		"@atlaskit/platform-feature-flags": "^2.0.0",
-		"@atlaskit/primitives": "^21.0.0",
+		"@atlaskit/primitives": "^22.0.0",
 		"@atlaskit/spinner": "^20.1.0",
-		"@atlaskit/tmp-editor-statsig": "^126.1.0",
+		"@atlaskit/tmp-editor-statsig": "^126.3.0",
 		"@atlaskit/tokens": "^16.0.0",
 		"@babel/runtime": "^7.0.0"
 	},