@atlaskit/editor-plugin-insert-block 8.7.1 → 8.7.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-insert-block
 
+## 8.7.3
+
+### Patch Changes
+
+- Updated dependencies
+
+## 8.7.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 8.7.1
 
 ### Patch Changes

package/dist/cjs/pm-plugins/experiences/toolbar-action-experiences.js

@@ -23,6 +23,7 @@ var getToolbarActionExperiencesPlugin = exports.getToolbarActionExperiencesPlugi
     dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent;
   var editorView;
   var popupTargetEl;
+  var lastClickedToolbarButton;
   var getPopupsTarget = function getPopupsTarget() {
     if (!popupTargetEl) {
       var _editorView;
@@ -37,6 +38,17 @@ var getToolbarActionExperiencesPlugin = exports.getToolbarActionExperiencesPlugi
     }
     return null;
   };
+
+  /**
+   * For inline popups, returns the button-group ancestor of the clicked toolbar button.
+   * This allows inline popup checks to observe only the relevant button-group.
+   */
+  var getInlinePopupTarget = function getInlinePopupTarget() {
+    if (!lastClickedToolbarButton) {
+      return undefined;
+    }
+    return lastClickedToolbarButton;
+  };
   var narrowParentObserveConfig = function narrowParentObserveConfig() {
     var _getParentDOMAtSelect;
     return {
@@ -71,45 +83,39 @@ var getToolbarActionExperiencesPlugin = exports.getToolbarActionExperiencesPlugi
     });
   };
   var createPopupExperience = function createPopupExperience(action, popupSelector) {
+    var type = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'editorRoot';
     return new _experiences.Experience(_experiences.EXPERIENCE_ID.TOOLBAR_ACTION, {
       action: action,
       actionSubjectId: PRIMARY_TOOLBAR,
       dispatchAnalyticsEvent: dispatchAnalyticsEvent,
       checks: [new _experiences.ExperienceCheckTimeout({
         durationMs: TIMEOUT_DURATION
-      }), new _toolbarExperienceUtils.ExperienceCheckPopupMutation(popupSelector, getPopupsTarget, getEditorDom)]
+      }), new _toolbarExperienceUtils.ExperienceCheckPopupMutation(popupSelector, type === 'inline' ? getInlinePopupTarget : getPopupsTarget, getEditorDom, type)]
     });
   };
   var experienceButtonMappings = [{
-    experience: createPopupExperience('emoji', '[data-emoji-picker-container]'),
+    experience: createPopupExperience('insert', '[data-testid="popup-wrapper"]', 'inline'),
+    buttonTestId: _toolbar.TOOLBAR_BUTTON_TEST_ID.INSERT
+  }, {
+    experience: createPopupExperience('emoji', '[data-emoji-picker-container], [data-emoji-picker-container="true"], [data-testid="popup-wrapper"]', 'inline'),
     buttonTestId: _toolbar.TOOLBAR_BUTTON_TEST_ID.EMOJI
   }, {
-    experience: createPopupExperience('media', '[id="local-media-upload-button"], [data-testid="media-picker-file-input"]'),
+    experience: createPopupExperience('media', '[data-testid="popup-wrapper"]', 'inline'),
     buttonTestId: _toolbar.TOOLBAR_BUTTON_TEST_ID.MEDIA
   }, {
-    experience: new _experiences.Experience(_experiences.EXPERIENCE_ID.TOOLBAR_ACTION, {
-      action: 'mention',
-      actionSubjectId: PRIMARY_TOOLBAR,
-      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-      checks: [new _experiences.ExperienceCheckTimeout({
-        durationMs: TIMEOUT_DURATION
-      }), new _experiences.ExperienceCheckDomMutation({
-        onDomMutation: _toolbarExperienceUtils.handleTypeAheadOpenDomMutation,
-        observeConfig: narrowParentObserveConfig
-      })]
-    }),
+    experience: createPopupExperience('mention', '[data-testid="popup-wrapper"], [data-type-ahead="typeaheadDecoration"]', 'editorRoot'),
     buttonTestId: _toolbar.TOOLBAR_BUTTON_TEST_ID.MENTION
   }, {
     experience: createNodeInsertExperience('table'),
     buttonTestId: _toolbar.TOOLBAR_BUTTON_TEST_ID.TABLE
   }, {
-    experience: createPopupExperience('tableSelector', '[aria-label*="table size"], [data-testid*="table-selector"]'),
+    experience: createPopupExperience('tableSelector', '[aria-label*="table size"], [data-testid*="table-selector"]', 'inline'),
     buttonTestId: _toolbar.TOOLBAR_BUTTON_TEST_ID.TABLE_SELECTOR
   }, {
     experience: createNodeInsertExperience('layout'),
     buttonTestId: _toolbar.TOOLBAR_BUTTON_TEST_ID.LAYOUT
   }, {
-    experience: createPopupExperience('image', '[id="local-media-upload-button"], [data-testid="media-picker-file-input"]'),
+    experience: createPopupExperience('image', '[data-testid="popup-wrapper"]', 'inline'),
     buttonTestId: _toolbar.TOOLBAR_BUTTON_TEST_ID.IMAGE
   }, {
     experience: createNodeInsertExperience('action'),
@@ -121,6 +127,8 @@ var getToolbarActionExperiencesPlugin = exports.getToolbarActionExperiencesPlugi
         experience = _experienceButtonMapp2.experience,
         buttonTestId = _experienceButtonMapp2.buttonTestId;
       if ((0, _toolbarExperienceUtils.isToolbarButtonClick)(target, buttonTestId)) {
+        // Store the clicked button so inline popup checks can find its button-group
+        lastClickedToolbarButton = target;
         experience.start({
           forceRestart: true
         });

package/dist/cjs/pm-plugins/experiences/toolbar-experience-utils.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isToolbarButtonClick = exports.handleTypeAheadOpenDomMutation = exports.handleEditorNodeInsertDomMutation = exports.getParentDOMAtSelection = exports.TYPEAHEAD_DECORATION_SELECTOR = exports.NODE_INSERT_MARKERS = exports.ExperienceCheckPopupMutation = void 0;
+exports.isToolbarButtonClick = exports.handleEditorNodeInsertDomMutation = exports.getParentDOMAtSelection = exports.NODE_INSERT_MARKERS = exports.ExperienceCheckPopupMutation = void 0;
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -13,6 +13,13 @@ var _experiences = require("@atlaskit/editor-common/experiences");
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+/**
+ * Popup check type determines how popups are observed based on their DOM location:
+ * - 'inline': Popups appearing in toolbar button-groups (emoji, media, table selector, image)
+ * - 'editorRoot': Popups attached to editor root (e.g., mention popups)
+ * - 'editorContent': Content-level popups or modals in portal containers (e.g., block menu)
+ */
+
 /**
  * DOM marker selectors for node types inserted via toolbar actions.
  * Matches outermost wrapper elements set synchronously by ReactNodeView
@@ -33,62 +40,90 @@ var isToolbarButtonClick = exports.isToolbarButtonClick = function isToolbarButt
   }
   return !button.disabled && button.getAttribute('aria-disabled') !== 'true';
 };
-
-/**
- * ExperienceCheck that observes popup mount point and all its
- * `[data-editor-popup]` children with `{ childList: true }` (no subtree).
- *
- * Detects when a popup containing the given nested element is added to the
- * DOM — either as a new `[data-editor-popup]` direct child, or as content
- * rendered inside an existing `[data-editor-popup]` wrapper.
- */
-var TYPEAHEAD_DECORATION_SELECTOR = exports.TYPEAHEAD_DECORATION_SELECTOR = '[data-type-ahead="typeaheadDecoration"]';
-var handleTypeAheadOpenDomMutation = exports.handleTypeAheadOpenDomMutation = function handleTypeAheadOpenDomMutation(_ref) {
-  var mutations = _ref.mutations;
-  var _iterator = _createForOfIteratorHelper(mutations),
-    _step;
-  try {
-    for (_iterator.s(); !(_step = _iterator.n()).done;) {
-      var mutation = _step.value;
-      if (mutation.type !== 'childList') {
-        continue;
-      }
-      var _iterator2 = _createForOfIteratorHelper(mutation.addedNodes),
-        _step2;
-      try {
-        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-          var node = _step2.value;
-          if (!(node instanceof HTMLElement)) {
-            continue;
-          }
-          if (node.matches(TYPEAHEAD_DECORATION_SELECTOR) || node.querySelector(TYPEAHEAD_DECORATION_SELECTOR)) {
-            return {
-              status: 'success'
-            };
-          }
-        }
-      } catch (err) {
-        _iterator2.e(err);
-      } finally {
-        _iterator2.f();
-      }
-    }
-  } catch (err) {
-    _iterator.e(err);
-  } finally {
-    _iterator.f();
-  }
-  return undefined;
-};
 var ExperienceCheckPopupMutation = exports.ExperienceCheckPopupMutation = /*#__PURE__*/function () {
   function ExperienceCheckPopupMutation(nestedElementQuery, getTarget, getEditorDom) {
+    var type = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'editorRoot';
     (0, _classCallCheck2.default)(this, ExperienceCheckPopupMutation);
     (0, _defineProperty2.default)(this, "observers", []);
     this.nestedElementQuery = nestedElementQuery;
     this.getTarget = getTarget;
     this.getEditorDom = getEditorDom;
+    this.type = type;
   }
+
+  /**
+   * Returns the list of DOM elements to observe based on popup type.
+   */
   return (0, _createClass2.default)(ExperienceCheckPopupMutation, [{
+    key: "getObserveTargets",
+    value: function getObserveTargets() {
+      switch (this.type) {
+        case 'inline':
+          return this.getInlineTargets();
+        case 'editorRoot':
+          return this.getEditorRootTargets();
+      }
+      // Should never reach here - all types handled above
+      return [];
+    }
+
+    /**
+     * For 'inline' type: observe only the button-group container.
+     * The target passed in should be the button-group (or button within it) from getInlinePopupTarget().
+     * Inline popups appear as direct children of button-group elements.
+     */
+  }, {
+    key: "getInlineTargets",
+    value: function getInlineTargets() {
+      var target = this.getTarget();
+      if (!target) {
+        return [];
+      }
+
+      // Walk up to find the button-group container
+      var buttonGroup = target.closest('[data-toolbar-component="button-group"]');
+
+      // Target is already the button-group or button from getInlinePopupTarget()
+      // Just observe this single element
+      return buttonGroup ? [buttonGroup, target] : [target];
+    }
+
+    /**
+     * For 'editorRoot' type: observe the actual editor root container.
+     * The editorDom is the ProseMirror element, but popups appear as direct children
+     * of the parent .akEditor container. So we observe the parent of editorDom.
+     * No portal observation needed.
+     */
+  }, {
+    key: "getEditorRootTargets",
+    value: function getEditorRootTargets() {
+      var targets = [];
+      var editorDom = this.getEditorDom();
+      if (editorDom) {
+        // Find the actual editor root (.akEditor) by walking up the DOM
+        var editorRoot = editorDom.closest('.akEditor') || editorDom.parentElement;
+        if (editorRoot instanceof HTMLElement) {
+          targets.push(editorRoot);
+
+          // Observe existing [data-editor-popup] wrappers
+          var wrappers = editorRoot.querySelectorAll('[data-editor-popup]');
+          var _iterator = _createForOfIteratorHelper(wrappers),
+            _step;
+          try {
+            for (_iterator.s(); !(_step = _iterator.n()).done;) {
+              var wrapper = _step.value;
+              targets.push(wrapper);
+            }
+          } catch (err) {
+            _iterator.e(err);
+          } finally {
+            _iterator.f();
+          }
+        }
+      }
+      return targets;
+    }
+  }, {
     key: "start",
     value: function start(callback) {
       var _this = this;
@@ -111,23 +146,24 @@ var ExperienceCheckPopupMutation = exports.ExperienceCheckPopupMutation = /*#__P
       }
       var query = this.nestedElementQuery;
       var onMutation = function onMutation(mutations) {
-        var _iterator3 = _createForOfIteratorHelper(mutations),
-          _step3;
+        var _iterator2 = _createForOfIteratorHelper(mutations),
+          _step2;
         try {
-          for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
-            var mutation = _step3.value;
+          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+            var mutation = _step2.value;
             if (mutation.type !== 'childList') {
               continue;
             }
-            var _iterator4 = _createForOfIteratorHelper(mutation.addedNodes),
-              _step4;
+            var _iterator3 = _createForOfIteratorHelper(mutation.addedNodes),
+              _step3;
             try {
-              for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
-                var node = _step4.value;
+              for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+                var node = _step3.value;
                 if (!(node instanceof HTMLElement)) {
                   continue;
                 }
-                if ((0, _experiences.popupWithNestedElement)(node, query) || node.matches(query) || !!node.querySelector(query)) {
+                var found = (0, _experiences.popupWithNestedElement)(node, query) || node.matches(query) || !!node.querySelector(query);
+                if (found) {
                   _this.stop();
                   callback({
                     status: 'success'
@@ -136,15 +172,15 @@ var ExperienceCheckPopupMutation = exports.ExperienceCheckPopupMutation = /*#__P
                 }
               }
             } catch (err) {
-              _iterator4.e(err);
+              _iterator3.e(err);
             } finally {
-              _iterator4.f();
+              _iterator3.f();
             }
           }
         } catch (err) {
-          _iterator3.e(err);
+          _iterator2.e(err);
         } finally {
-          _iterator3.f();
+          _iterator2.f();
         }
       };
       var observe = function observe(el) {
@@ -154,126 +190,36 @@ var ExperienceCheckPopupMutation = exports.ExperienceCheckPopupMutation = /*#__P
         });
         _this.observers.push(observer);
       };
-      observe(target);
-      var _iterator5 = _createForOfIteratorHelper(target.querySelectorAll('[data-editor-popup]')),
-        _step5;
+
+      // Get type-specific targets and observe them
+      var observeTargets = this.getObserveTargets();
+      var _iterator4 = _createForOfIteratorHelper(observeTargets),
+        _step4;
       try {
-        for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
-          var wrapper = _step5.value;
-          observe(wrapper);
+        for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+          var observeTarget = _step4.value;
+          observe(observeTarget);
         }
       } catch (err) {
-        _iterator5.e(err);
+        _iterator4.e(err);
       } finally {
-        _iterator5.f();
-      }
-      var portalContainer = doc.querySelector('.atlaskit-portal-container');
-      if (portalContainer instanceof HTMLElement) {
-        var observePortal = function observePortal(portal) {
-          observe(portal);
-          var _iterator6 = _createForOfIteratorHelper(portal.children),
-            _step6;
-          try {
-            for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
-              var child = _step6.value;
-              if (child instanceof HTMLElement) {
-                observe(child);
-              }
-            }
-          } catch (err) {
-            _iterator6.e(err);
-          } finally {
-            _iterator6.f();
-          }
-        };
-        var containerObserver = new MutationObserver(function (mutations) {
-          var _iterator7 = _createForOfIteratorHelper(mutations),
-            _step7;
-          try {
-            for (_iterator7.s(); !(_step7 = _iterator7.n()).done;) {
-              var mutation = _step7.value;
-              if (mutation.type !== 'childList') {
-                continue;
-              }
-              var _iterator8 = _createForOfIteratorHelper(mutation.addedNodes),
-                _step8;
-              try {
-                for (_iterator8.s(); !(_step8 = _iterator8.n()).done;) {
-                  var node = _step8.value;
-                  if (node instanceof HTMLElement) {
-                    observePortal(node);
-                  }
-                }
-              } catch (err) {
-                _iterator8.e(err);
-              } finally {
-                _iterator8.f();
-              }
-            }
-          } catch (err) {
-            _iterator7.e(err);
-          } finally {
-            _iterator7.f();
-          }
-          onMutation(mutations);
-        });
-        containerObserver.observe(portalContainer, {
-          childList: true
-        });
-        this.observers.push(containerObserver);
-        var _iterator9 = _createForOfIteratorHelper(portalContainer.querySelectorAll('.atlaskit-portal')),
-          _step9;
-        try {
-          for (_iterator9.s(); !(_step9 = _iterator9.n()).done;) {
-            var portal = _step9.value;
-            observePortal(portal);
-          }
-        } catch (err) {
-          _iterator9.e(err);
-        } finally {
-          _iterator9.f();
-        }
-      }
-      var editorDom = this.getEditorDom();
-      if (editorDom !== null && editorDom !== void 0 && editorDom.parentElement) {
-        observe(editorDom.parentElement);
+        _iterator4.f();
       }
-
-      // Two-frame DOM check to handle cases where rendering happens before
-      // observers are attached.
-      var checkDom = function checkDom() {
-        if (doc.querySelector(query)) {
-          _this.stop();
-          callback({
-            status: 'success'
-          });
-          return;
-        }
-        requestAnimationFrame(function () {
-          if (doc.querySelector(query)) {
-            _this.stop();
-            callback({
-              status: 'success'
-            });
-          }
-        });
-      };
-      requestAnimationFrame(checkDom);
     }
   }, {
     key: "stop",
     value: function stop() {
-      var _iterator0 = _createForOfIteratorHelper(this.observers),
-        _step0;
+      var _iterator5 = _createForOfIteratorHelper(this.observers),
+        _step5;
       try {
-        for (_iterator0.s(); !(_step0 = _iterator0.n()).done;) {
-          var observer = _step0.value;
+        for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
+          var observer = _step5.value;
           observer.disconnect();
         }
       } catch (err) {
-        _iterator0.e(err);
+        _iterator5.e(err);
       } finally {
-        _iterator0.f();
+        _iterator5.f();
       }
       this.observers = [];
     }
@@ -349,23 +295,23 @@ var matchesNodeInsertMarker = function matchesNodeInsertMarker(node) {
  * 1. Marker-based: checks `addedNodes` against known node insert selectors.
  * 2. Structure-based: detects element add+remove (block-level replacement).
  */
-var handleEditorNodeInsertDomMutation = exports.handleEditorNodeInsertDomMutation = function handleEditorNodeInsertDomMutation(_ref2) {
-  var mutations = _ref2.mutations;
+var handleEditorNodeInsertDomMutation = exports.handleEditorNodeInsertDomMutation = function handleEditorNodeInsertDomMutation(_ref) {
+  var mutations = _ref.mutations;
   var hasAddedElement = false;
   var hasRemovedElement = false;
-  var _iterator1 = _createForOfIteratorHelper(mutations),
-    _step1;
+  var _iterator6 = _createForOfIteratorHelper(mutations),
+    _step6;
   try {
-    for (_iterator1.s(); !(_step1 = _iterator1.n()).done;) {
-      var mutation = _step1.value;
+    for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
+      var mutation = _step6.value;
       if (mutation.type !== 'childList') {
         continue;
       }
-      var _iterator10 = _createForOfIteratorHelper(mutation.addedNodes),
-        _step10;
+      var _iterator7 = _createForOfIteratorHelper(mutation.addedNodes),
+        _step7;
       try {
-        for (_iterator10.s(); !(_step10 = _iterator10.n()).done;) {
-          var node = _step10.value;
+        for (_iterator7.s(); !(_step7 = _iterator7.n()).done;) {
+          var node = _step7.value;
           if (matchesNodeInsertMarker(node)) {
             return {
               status: 'success'
@@ -376,29 +322,29 @@ var handleEditorNodeInsertDomMutation = exports.handleEditorNodeInsertDomMutatio
           }
         }
       } catch (err) {
-        _iterator10.e(err);
+        _iterator7.e(err);
       } finally {
-        _iterator10.f();
+        _iterator7.f();
       }
-      var _iterator11 = _createForOfIteratorHelper(mutation.removedNodes),
-        _step11;
+      var _iterator8 = _createForOfIteratorHelper(mutation.removedNodes),
+        _step8;
       try {
-        for (_iterator11.s(); !(_step11 = _iterator11.n()).done;) {
-          var _node = _step11.value;
+        for (_iterator8.s(); !(_step8 = _iterator8.n()).done;) {
+          var _node = _step8.value;
           if (_node instanceof HTMLElement) {
             hasRemovedElement = true;
           }
         }
       } catch (err) {
-        _iterator11.e(err);
+        _iterator8.e(err);
       } finally {
-        _iterator11.f();
+        _iterator8.f();
       }
     }
   } catch (err) {
-    _iterator1.e(err);
+    _iterator6.e(err);
   } finally {
-    _iterator1.f();
+    _iterator6.f();
   }
   if (hasAddedElement && hasRemovedElement) {
     return {

package/dist/es2019/pm-plugins/experiences/toolbar-action-experiences.js

@@ -4,7 +4,7 @@ import { Experience, EXPERIENCE_ID, ExperienceCheckDomMutation, ExperienceCheckT
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { TOOLBAR_BUTTON_TEST_ID } from '@atlaskit/editor-common/toolbar';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-import { ExperienceCheckPopupMutation, getParentDOMAtSelection, handleEditorNodeInsertDomMutation, handleTypeAheadOpenDomMutation, isToolbarButtonClick } from './toolbar-experience-utils';
+import { ExperienceCheckPopupMutation, getParentDOMAtSelection, handleEditorNodeInsertDomMutation, isToolbarButtonClick } from './toolbar-experience-utils';
 const pluginKey = new PluginKey('toolbarActionExperiences');
 const TIMEOUT_DURATION = 1000;
 const PRIMARY_TOOLBAR = 'primaryToolbar';
@@ -18,6 +18,7 @@ export const getToolbarActionExperiencesPlugin = ({
 }) => {
   let editorView;
   let popupTargetEl;
+  let lastClickedToolbarButton;
   const getPopupsTarget = () => {
     if (!popupTargetEl) {
       var _editorView;
@@ -32,6 +33,17 @@ export const getToolbarActionExperiencesPlugin = ({
     }
     return null;
   };
+
+  /**
+   * For inline popups, returns the button-group ancestor of the clicked toolbar button.
+   * This allows inline popup checks to observe only the relevant button-group.
+   */
+  const getInlinePopupTarget = () => {
+    if (!lastClickedToolbarButton) {
+      return undefined;
+    }
+    return lastClickedToolbarButton;
+  };
   const narrowParentObserveConfig = () => {
     var _getParentDOMAtSelect;
     return {
@@ -61,44 +73,37 @@ export const getToolbarActionExperiencesPlugin = ({
       observeConfig: rootObserveConfig
     })]
   });
-  const createPopupExperience = (action, popupSelector) => new Experience(EXPERIENCE_ID.TOOLBAR_ACTION, {
+  const createPopupExperience = (action, popupSelector, type = 'editorRoot') => new Experience(EXPERIENCE_ID.TOOLBAR_ACTION, {
     action,
     actionSubjectId: PRIMARY_TOOLBAR,
     dispatchAnalyticsEvent,
     checks: [new ExperienceCheckTimeout({
       durationMs: TIMEOUT_DURATION
-    }), new ExperienceCheckPopupMutation(popupSelector, getPopupsTarget, getEditorDom)]
+    }), new ExperienceCheckPopupMutation(popupSelector, type === 'inline' ? getInlinePopupTarget : getPopupsTarget, getEditorDom, type)]
   });
   const experienceButtonMappings = [{
-    experience: createPopupExperience('emoji', '[data-emoji-picker-container]'),
+    experience: createPopupExperience('insert', '[data-testid="popup-wrapper"]', 'inline'),
+    buttonTestId: TOOLBAR_BUTTON_TEST_ID.INSERT
+  }, {
+    experience: createPopupExperience('emoji', '[data-emoji-picker-container], [data-emoji-picker-container="true"], [data-testid="popup-wrapper"]', 'inline'),
     buttonTestId: TOOLBAR_BUTTON_TEST_ID.EMOJI
   }, {
-    experience: createPopupExperience('media', '[id="local-media-upload-button"], [data-testid="media-picker-file-input"]'),
+    experience: createPopupExperience('media', '[data-testid="popup-wrapper"]', 'inline'),
     buttonTestId: TOOLBAR_BUTTON_TEST_ID.MEDIA
   }, {
-    experience: new Experience(EXPERIENCE_ID.TOOLBAR_ACTION, {
-      action: 'mention',
-      actionSubjectId: PRIMARY_TOOLBAR,
-      dispatchAnalyticsEvent,
-      checks: [new ExperienceCheckTimeout({
-        durationMs: TIMEOUT_DURATION
-      }), new ExperienceCheckDomMutation({
-        onDomMutation: handleTypeAheadOpenDomMutation,
-        observeConfig: narrowParentObserveConfig
-      })]
-    }),
+    experience: createPopupExperience('mention', '[data-testid="popup-wrapper"], [data-type-ahead="typeaheadDecoration"]', 'editorRoot'),
     buttonTestId: TOOLBAR_BUTTON_TEST_ID.MENTION
   }, {
     experience: createNodeInsertExperience('table'),
     buttonTestId: TOOLBAR_BUTTON_TEST_ID.TABLE
   }, {
-    experience: createPopupExperience('tableSelector', '[aria-label*="table size"], [data-testid*="table-selector"]'),
+    experience: createPopupExperience('tableSelector', '[aria-label*="table size"], [data-testid*="table-selector"]', 'inline'),
     buttonTestId: TOOLBAR_BUTTON_TEST_ID.TABLE_SELECTOR
   }, {
     experience: createNodeInsertExperience('layout'),
     buttonTestId: TOOLBAR_BUTTON_TEST_ID.LAYOUT
   }, {
-    experience: createPopupExperience('image', '[id="local-media-upload-button"], [data-testid="media-picker-file-input"]'),
+    experience: createPopupExperience('image', '[data-testid="popup-wrapper"]', 'inline'),
     buttonTestId: TOOLBAR_BUTTON_TEST_ID.IMAGE
   }, {
     experience: createNodeInsertExperience('action'),
@@ -110,6 +115,8 @@ export const getToolbarActionExperiencesPlugin = ({
       buttonTestId
     } of experienceButtonMappings) {
       if (isToolbarButtonClick(target, buttonTestId)) {
+        // Store the clicked button so inline popup checks can find its button-group
+        lastClickedToolbarButton = target;
         experience.start({
           forceRestart: true
         });