@atlaskit/editor-plugin-insert-block 8.7.2 → 8.7.4

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-insert-block
 
+## 8.7.4
+
+### Patch Changes
+
+- [`57f499d6937db`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/57f499d6937db) -
+  Extract ExperienceCheckPopupMutation logic to be reusable for block menu experience tracking
+- Updated dependencies
+
+## 8.7.3
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 8.7.2
 
 ### 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,18 @@ 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() {
+    var _lastClickedToolbarBu;
+    if (!lastClickedToolbarButton) {
+      return undefined;
+    }
+    return (_lastClickedToolbarBu = lastClickedToolbarButton.closest('[data-toolbar-component="button-group"]')) !== null && _lastClickedToolbarBu !== void 0 ? _lastClickedToolbarBu : lastClickedToolbarButton;
+  };
   var narrowParentObserveConfig = function narrowParentObserveConfig() {
     var _getParentDOMAtSelect;
     return {
@@ -71,45 +84,44 @@ 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({
+        nestedElementQuery: popupSelector,
+        getTarget: type === 'inline' ? getInlinePopupTarget : getPopupsTarget,
+        getEditorDom: getEditorDom,
+        type: 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 +133,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

@@ -1,18 +1,19 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 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;
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _browserApis = require("@atlaskit/browser-apis");
+Object.defineProperty(exports, "ExperienceCheckPopupMutation", {
+  enumerable: true,
+  get: function get() {
+    return _experiences.ExperienceCheckPopupMutation;
+  }
+});
+exports.isToolbarButtonClick = exports.handleEditorNodeInsertDomMutation = exports.getParentDOMAtSelection = exports.NODE_INSERT_MARKERS = void 0;
 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; }
+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; } // eslint-disable-next-line @atlaskit/editor/no-re-export
 /**
  * DOM marker selectors for node types inserted via toolbar actions.
  * Matches outermost wrapper elements set synchronously by ReactNodeView
@@ -34,251 +35,6 @@ 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) {
-    (0, _classCallCheck2.default)(this, ExperienceCheckPopupMutation);
-    (0, _defineProperty2.default)(this, "observers", []);
-    this.nestedElementQuery = nestedElementQuery;
-    this.getTarget = getTarget;
-    this.getEditorDom = getEditorDom;
-  }
-  return (0, _createClass2.default)(ExperienceCheckPopupMutation, [{
-    key: "start",
-    value: function start(callback) {
-      var _this = this;
-      this.stop();
-      var target = this.getTarget();
-      if (!target) {
-        callback({
-          status: 'failure',
-          reason: _experiences.EXPERIENCE_FAILURE_REASON.DOM_MUTATION_TARGET_NOT_FOUND
-        });
-        return;
-      }
-      var doc = (0, _browserApis.getDocument)();
-      if (!doc) {
-        callback({
-          status: 'failure',
-          reason: _experiences.EXPERIENCE_FAILURE_REASON.DOM_MUTATION_TARGET_NOT_FOUND
-        });
-        return;
-      }
-      var query = this.nestedElementQuery;
-      var onMutation = function onMutation(mutations) {
-        var _iterator3 = _createForOfIteratorHelper(mutations),
-          _step3;
-        try {
-          for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
-            var mutation = _step3.value;
-            if (mutation.type !== 'childList') {
-              continue;
-            }
-            var _iterator4 = _createForOfIteratorHelper(mutation.addedNodes),
-              _step4;
-            try {
-              for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
-                var node = _step4.value;
-                if (!(node instanceof HTMLElement)) {
-                  continue;
-                }
-                if ((0, _experiences.popupWithNestedElement)(node, query) || node.matches(query) || !!node.querySelector(query)) {
-                  _this.stop();
-                  callback({
-                    status: 'success'
-                  });
-                  return;
-                }
-              }
-            } catch (err) {
-              _iterator4.e(err);
-            } finally {
-              _iterator4.f();
-            }
-          }
-        } catch (err) {
-          _iterator3.e(err);
-        } finally {
-          _iterator3.f();
-        }
-      };
-      var observe = function observe(el) {
-        var observer = new MutationObserver(onMutation);
-        observer.observe(el, {
-          childList: true
-        });
-        _this.observers.push(observer);
-      };
-      observe(target);
-      var _iterator5 = _createForOfIteratorHelper(target.querySelectorAll('[data-editor-popup]')),
-        _step5;
-      try {
-        for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
-          var wrapper = _step5.value;
-          observe(wrapper);
-        }
-      } catch (err) {
-        _iterator5.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);
-      }
-
-      // 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;
-      try {
-        for (_iterator0.s(); !(_step0 = _iterator0.n()).done;) {
-          var observer = _step0.value;
-          observer.disconnect();
-        }
-      } catch (err) {
-        _iterator0.e(err);
-      } finally {
-        _iterator0.f();
-      }
-      this.observers = [];
-    }
-  }]);
-}();
 /**
  * Returns the narrow parent DOM element at the current selection, suitable
  * for observing with `{ childList: true }` (no subtree).
@@ -349,23 +105,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 _iterator = _createForOfIteratorHelper(mutations),
+    _step;
   try {
-    for (_iterator1.s(); !(_step1 = _iterator1.n()).done;) {
-      var mutation = _step1.value;
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var mutation = _step.value;
       if (mutation.type !== 'childList') {
         continue;
       }
-      var _iterator10 = _createForOfIteratorHelper(mutation.addedNodes),
-        _step10;
+      var _iterator2 = _createForOfIteratorHelper(mutation.addedNodes),
+        _step2;
       try {
-        for (_iterator10.s(); !(_step10 = _iterator10.n()).done;) {
-          var node = _step10.value;
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var node = _step2.value;
           if (matchesNodeInsertMarker(node)) {
             return {
               status: 'success'
@@ -376,29 +132,29 @@ var handleEditorNodeInsertDomMutation = exports.handleEditorNodeInsertDomMutatio
           }
         }
       } catch (err) {
-        _iterator10.e(err);
+        _iterator2.e(err);
       } finally {
-        _iterator10.f();
+        _iterator2.f();
       }
-      var _iterator11 = _createForOfIteratorHelper(mutation.removedNodes),
-        _step11;
+      var _iterator3 = _createForOfIteratorHelper(mutation.removedNodes),
+        _step3;
       try {
-        for (_iterator11.s(); !(_step11 = _iterator11.n()).done;) {
-          var _node = _step11.value;
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+          var _node = _step3.value;
           if (_node instanceof HTMLElement) {
             hasRemovedElement = true;
           }
         }
       } catch (err) {
-        _iterator11.e(err);
+        _iterator3.e(err);
       } finally {
-        _iterator11.f();
+        _iterator3.f();
       }
     }
   } catch (err) {
-    _iterator1.e(err);
+    _iterator.e(err);
   } finally {
-    _iterator1.f();
+    _iterator.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,18 @@ 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 = () => {
+    var _lastClickedToolbarBu;
+    if (!lastClickedToolbarButton) {
+      return undefined;
+    }
+    return (_lastClickedToolbarBu = lastClickedToolbarButton.closest('[data-toolbar-component="button-group"]')) !== null && _lastClickedToolbarBu !== void 0 ? _lastClickedToolbarBu : lastClickedToolbarButton;
+  };
   const narrowParentObserveConfig = () => {
     var _getParentDOMAtSelect;
     return {
@@ -61,44 +74,42 @@ 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({
+      nestedElementQuery: popupSelector,
+      getTarget: 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 +121,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
         });

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

@@ -1,6 +1,6 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import { getDocument } from '@atlaskit/browser-apis';
-import { EXPERIENCE_FAILURE_REASON, popupWithNestedElement } from '@atlaskit/editor-common/experiences';
+// eslint-disable-next-line @atlaskit/editor/no-re-export
+export { ExperienceCheckPopupMutation } from '@atlaskit/editor-common/experiences';
+
 /**
  * DOM marker selectors for node types inserted via toolbar actions.
  * Matches outermost wrapper elements set synchronously by ReactNodeView
@@ -22,156 +22,6 @@ export const isToolbarButtonClick = (target, testId) => {
   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.
- */
-export const TYPEAHEAD_DECORATION_SELECTOR = '[data-type-ahead="typeaheadDecoration"]';
-export const handleTypeAheadOpenDomMutation = ({
-  mutations
-}) => {
-  for (const mutation of mutations) {
-    if (mutation.type !== 'childList') {
-      continue;
-    }
-    for (const node of mutation.addedNodes) {
-      if (!(node instanceof HTMLElement)) {
-        continue;
-      }
-      if (node.matches(TYPEAHEAD_DECORATION_SELECTOR) || node.querySelector(TYPEAHEAD_DECORATION_SELECTOR)) {
-        return {
-          status: 'success'
-        };
-      }
-    }
-  }
-  return undefined;
-};
-export class ExperienceCheckPopupMutation {
-  constructor(nestedElementQuery, getTarget, getEditorDom) {
-    _defineProperty(this, "observers", []);
-    this.nestedElementQuery = nestedElementQuery;
-    this.getTarget = getTarget;
-    this.getEditorDom = getEditorDom;
-  }
-  start(callback) {
-    this.stop();
-    const target = this.getTarget();
-    if (!target) {
-      callback({
-        status: 'failure',
-        reason: EXPERIENCE_FAILURE_REASON.DOM_MUTATION_TARGET_NOT_FOUND
-      });
-      return;
-    }
-    const doc = getDocument();
-    if (!doc) {
-      callback({
-        status: 'failure',
-        reason: EXPERIENCE_FAILURE_REASON.DOM_MUTATION_TARGET_NOT_FOUND
-      });
-      return;
-    }
-    const query = this.nestedElementQuery;
-    const onMutation = mutations => {
-      for (const mutation of mutations) {
-        if (mutation.type !== 'childList') {
-          continue;
-        }
-        for (const node of mutation.addedNodes) {
-          if (!(node instanceof HTMLElement)) {
-            continue;
-          }
-          if (popupWithNestedElement(node, query) || node.matches(query) || !!node.querySelector(query)) {
-            this.stop();
-            callback({
-              status: 'success'
-            });
-            return;
-          }
-        }
-      }
-    };
-    const observe = el => {
-      const observer = new MutationObserver(onMutation);
-      observer.observe(el, {
-        childList: true
-      });
-      this.observers.push(observer);
-    };
-    observe(target);
-    for (const wrapper of target.querySelectorAll('[data-editor-popup]')) {
-      observe(wrapper);
-    }
-    const portalContainer = doc.querySelector('.atlaskit-portal-container');
-    if (portalContainer instanceof HTMLElement) {
-      const observePortal = portal => {
-        observe(portal);
-        for (const child of portal.children) {
-          if (child instanceof HTMLElement) {
-            observe(child);
-          }
-        }
-      };
-      const containerObserver = new MutationObserver(mutations => {
-        for (const mutation of mutations) {
-          if (mutation.type !== 'childList') {
-            continue;
-          }
-          for (const node of mutation.addedNodes) {
-            if (node instanceof HTMLElement) {
-              observePortal(node);
-            }
-          }
-        }
-        onMutation(mutations);
-      });
-      containerObserver.observe(portalContainer, {
-        childList: true
-      });
-      this.observers.push(containerObserver);
-      for (const portal of portalContainer.querySelectorAll('.atlaskit-portal')) {
-        observePortal(portal);
-      }
-    }
-    const editorDom = this.getEditorDom();
-    if (editorDom !== null && editorDom !== void 0 && editorDom.parentElement) {
-      observe(editorDom.parentElement);
-    }
-
-    // Two-frame DOM check to handle cases where rendering happens before
-    // observers are attached.
-    const checkDom = () => {
-      if (doc.querySelector(query)) {
-        this.stop();
-        callback({
-          status: 'success'
-        });
-        return;
-      }
-      requestAnimationFrame(() => {
-        if (doc.querySelector(query)) {
-          this.stop();
-          callback({
-            status: 'success'
-          });
-        }
-      });
-    };
-    requestAnimationFrame(checkDom);
-  }
-  stop() {
-    for (const observer of this.observers) {
-      observer.disconnect();
-    }
-    this.observers = [];
-  }
-}
-
 /**
  * Returns the narrow parent DOM element at the current selection, suitable
  * for observing with `{ childList: true }` (no subtree).

package/dist/esm/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';
 var pluginKey = new PluginKey('toolbarActionExperiences');
 var TIMEOUT_DURATION = 1000;
 var PRIMARY_TOOLBAR = 'primaryToolbar';
@@ -17,6 +17,7 @@ export var getToolbarActionExperiencesPlugin = function getToolbarActionExperien
     dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent;
   var editorView;
   var popupTargetEl;
+  var lastClickedToolbarButton;
   var getPopupsTarget = function getPopupsTarget() {
     if (!popupTargetEl) {
       var _editorView;
@@ -31,6 +32,18 @@ export var getToolbarActionExperiencesPlugin = function getToolbarActionExperien
     }
     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() {
+    var _lastClickedToolbarBu;
+    if (!lastClickedToolbarButton) {
+      return undefined;
+    }
+    return (_lastClickedToolbarBu = lastClickedToolbarButton.closest('[data-toolbar-component="button-group"]')) !== null && _lastClickedToolbarBu !== void 0 ? _lastClickedToolbarBu : lastClickedToolbarButton;
+  };
   var narrowParentObserveConfig = function narrowParentObserveConfig() {
     var _getParentDOMAtSelect;
     return {
@@ -65,45 +78,44 @@ export var getToolbarActionExperiencesPlugin = function getToolbarActionExperien
     });
   };
   var createPopupExperience = function createPopupExperience(action, popupSelector) {
+    var type = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'editorRoot';
     return new Experience(EXPERIENCE_ID.TOOLBAR_ACTION, {
       action: action,
       actionSubjectId: PRIMARY_TOOLBAR,
       dispatchAnalyticsEvent: dispatchAnalyticsEvent,
       checks: [new ExperienceCheckTimeout({
         durationMs: TIMEOUT_DURATION
-      }), new ExperienceCheckPopupMutation(popupSelector, getPopupsTarget, getEditorDom)]
+      }), new ExperienceCheckPopupMutation({
+        nestedElementQuery: popupSelector,
+        getTarget: type === 'inline' ? getInlinePopupTarget : getPopupsTarget,
+        getEditorDom: getEditorDom,
+        type: type
+      })]
     });
   };
   var 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: 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'),
@@ -115,6 +127,8 @@ export var getToolbarActionExperiencesPlugin = function getToolbarActionExperien
         experience = _experienceButtonMapp2.experience,
         buttonTestId = _experienceButtonMapp2.buttonTestId;
       if (isToolbarButtonClick(target, buttonTestId)) {
+        // Store the clicked button so inline popup checks can find its button-group
+        lastClickedToolbarButton = target;
         experience.start({
           forceRestart: true
         });

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

@@ -1,11 +1,9 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-import { getDocument } from '@atlaskit/browser-apis';
-import { EXPERIENCE_FAILURE_REASON, popupWithNestedElement } from '@atlaskit/editor-common/experiences';
+// eslint-disable-next-line @atlaskit/editor/no-re-export
+export { ExperienceCheckPopupMutation } from '@atlaskit/editor-common/experiences';
+
 /**
  * DOM marker selectors for node types inserted via toolbar actions.
  * Matches outermost wrapper elements set synchronously by ReactNodeView
@@ -27,252 +25,6 @@ export var isToolbarButtonClick = function isToolbarButtonClick(target, testId)
   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.
- */
-export var TYPEAHEAD_DECORATION_SELECTOR = '[data-type-ahead="typeaheadDecoration"]';
-export var 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;
-};
-export var ExperienceCheckPopupMutation = /*#__PURE__*/function () {
-  function ExperienceCheckPopupMutation(nestedElementQuery, getTarget, getEditorDom) {
-    _classCallCheck(this, ExperienceCheckPopupMutation);
-    _defineProperty(this, "observers", []);
-    this.nestedElementQuery = nestedElementQuery;
-    this.getTarget = getTarget;
-    this.getEditorDom = getEditorDom;
-  }
-  return _createClass(ExperienceCheckPopupMutation, [{
-    key: "start",
-    value: function start(callback) {
-      var _this = this;
-      this.stop();
-      var target = this.getTarget();
-      if (!target) {
-        callback({
-          status: 'failure',
-          reason: EXPERIENCE_FAILURE_REASON.DOM_MUTATION_TARGET_NOT_FOUND
-        });
-        return;
-      }
-      var doc = getDocument();
-      if (!doc) {
-        callback({
-          status: 'failure',
-          reason: EXPERIENCE_FAILURE_REASON.DOM_MUTATION_TARGET_NOT_FOUND
-        });
-        return;
-      }
-      var query = this.nestedElementQuery;
-      var onMutation = function onMutation(mutations) {
-        var _iterator3 = _createForOfIteratorHelper(mutations),
-          _step3;
-        try {
-          for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
-            var mutation = _step3.value;
-            if (mutation.type !== 'childList') {
-              continue;
-            }
-            var _iterator4 = _createForOfIteratorHelper(mutation.addedNodes),
-              _step4;
-            try {
-              for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
-                var node = _step4.value;
-                if (!(node instanceof HTMLElement)) {
-                  continue;
-                }
-                if (popupWithNestedElement(node, query) || node.matches(query) || !!node.querySelector(query)) {
-                  _this.stop();
-                  callback({
-                    status: 'success'
-                  });
-                  return;
-                }
-              }
-            } catch (err) {
-              _iterator4.e(err);
-            } finally {
-              _iterator4.f();
-            }
-          }
-        } catch (err) {
-          _iterator3.e(err);
-        } finally {
-          _iterator3.f();
-        }
-      };
-      var observe = function observe(el) {
-        var observer = new MutationObserver(onMutation);
-        observer.observe(el, {
-          childList: true
-        });
-        _this.observers.push(observer);
-      };
-      observe(target);
-      var _iterator5 = _createForOfIteratorHelper(target.querySelectorAll('[data-editor-popup]')),
-        _step5;
-      try {
-        for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
-          var wrapper = _step5.value;
-          observe(wrapper);
-        }
-      } catch (err) {
-        _iterator5.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);
-      }
-
-      // 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;
-      try {
-        for (_iterator0.s(); !(_step0 = _iterator0.n()).done;) {
-          var observer = _step0.value;
-          observer.disconnect();
-        }
-      } catch (err) {
-        _iterator0.e(err);
-      } finally {
-        _iterator0.f();
-      }
-      this.observers = [];
-    }
-  }]);
-}();
-
 /**
  * Returns the narrow parent DOM element at the current selection, suitable
  * for observing with `{ childList: true }` (no subtree).
@@ -343,23 +95,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).
  */
-export var handleEditorNodeInsertDomMutation = function handleEditorNodeInsertDomMutation(_ref2) {
-  var mutations = _ref2.mutations;
+export var handleEditorNodeInsertDomMutation = function handleEditorNodeInsertDomMutation(_ref) {
+  var mutations = _ref.mutations;
   var hasAddedElement = false;
   var hasRemovedElement = false;
-  var _iterator1 = _createForOfIteratorHelper(mutations),
-    _step1;
+  var _iterator = _createForOfIteratorHelper(mutations),
+    _step;
   try {
-    for (_iterator1.s(); !(_step1 = _iterator1.n()).done;) {
-      var mutation = _step1.value;
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var mutation = _step.value;
       if (mutation.type !== 'childList') {
         continue;
       }
-      var _iterator10 = _createForOfIteratorHelper(mutation.addedNodes),
-        _step10;
+      var _iterator2 = _createForOfIteratorHelper(mutation.addedNodes),
+        _step2;
       try {
-        for (_iterator10.s(); !(_step10 = _iterator10.n()).done;) {
-          var node = _step10.value;
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var node = _step2.value;
           if (matchesNodeInsertMarker(node)) {
             return {
               status: 'success'
@@ -370,29 +122,29 @@ export var handleEditorNodeInsertDomMutation = function handleEditorNodeInsertDo
           }
         }
       } catch (err) {
-        _iterator10.e(err);
+        _iterator2.e(err);
       } finally {
-        _iterator10.f();
+        _iterator2.f();
       }
-      var _iterator11 = _createForOfIteratorHelper(mutation.removedNodes),
-        _step11;
+      var _iterator3 = _createForOfIteratorHelper(mutation.removedNodes),
+        _step3;
       try {
-        for (_iterator11.s(); !(_step11 = _iterator11.n()).done;) {
-          var _node = _step11.value;
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+          var _node = _step3.value;
           if (_node instanceof HTMLElement) {
             hasRemovedElement = true;
           }
         }
       } catch (err) {
-        _iterator11.e(err);
+        _iterator3.e(err);
       } finally {
-        _iterator11.f();
+        _iterator3.f();
       }
     }
   } catch (err) {
-    _iterator1.e(err);
+    _iterator.e(err);
   } finally {
-    _iterator1.f();
+    _iterator.f();
   }
   if (hasAddedElement && hasRemovedElement) {
     return {

package/dist/types/pm-plugins/experiences/toolbar-experience-utils.d.ts

@@ -1,5 +1,6 @@
-import type { ExperienceCheck, ExperienceCheckCallback, ExperienceCheckResult } from '@atlaskit/editor-common/experiences';
+import type { ExperienceCheckResult } from '@atlaskit/editor-common/experiences';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+export { ExperienceCheckPopupMutation } from '@atlaskit/editor-common/experiences';
 /**
  * DOM marker selectors for node types inserted via toolbar actions.
  * Matches outermost wrapper elements set synchronously by ReactNodeView
@@ -13,27 +14,6 @@ export declare const NODE_INSERT_MARKERS: {
     readonly TASK_ITEM: ".taskItemView-content-wrap";
 };
 export declare const isToolbarButtonClick: (target: HTMLElement, testId: string) => boolean;
-/**
- * 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.
- */
-export declare const TYPEAHEAD_DECORATION_SELECTOR = "[data-type-ahead=\"typeaheadDecoration\"]";
-export declare const handleTypeAheadOpenDomMutation: ({ mutations, }: {
-    mutations: MutationRecord[];
-}) => ExperienceCheckResult | undefined;
-export declare class ExperienceCheckPopupMutation implements ExperienceCheck {
-    private nestedElementQuery;
-    private getTarget;
-    private getEditorDom;
-    private observers;
-    constructor(nestedElementQuery: string, getTarget: () => HTMLElement | undefined | null, getEditorDom: () => HTMLElement | undefined | null);
-    start(callback: ExperienceCheckCallback): void;
-    stop(): void;
-}
 /**
  * Returns the narrow parent DOM element at the current selection, suitable
  * for observing with `{ childList: true }` (no subtree).

package/dist/types-ts4.5/pm-plugins/experiences/toolbar-experience-utils.d.ts

@@ -1,5 +1,6 @@
-import type { ExperienceCheck, ExperienceCheckCallback, ExperienceCheckResult } from '@atlaskit/editor-common/experiences';
+import type { ExperienceCheckResult } from '@atlaskit/editor-common/experiences';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+export { ExperienceCheckPopupMutation } from '@atlaskit/editor-common/experiences';
 /**
  * DOM marker selectors for node types inserted via toolbar actions.
  * Matches outermost wrapper elements set synchronously by ReactNodeView
@@ -13,27 +14,6 @@ export declare const NODE_INSERT_MARKERS: {
     readonly TASK_ITEM: ".taskItemView-content-wrap";
 };
 export declare const isToolbarButtonClick: (target: HTMLElement, testId: string) => boolean;
-/**
- * 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.
- */
-export declare const TYPEAHEAD_DECORATION_SELECTOR = "[data-type-ahead=\"typeaheadDecoration\"]";
-export declare const handleTypeAheadOpenDomMutation: ({ mutations, }: {
-    mutations: MutationRecord[];
-}) => ExperienceCheckResult | undefined;
-export declare class ExperienceCheckPopupMutation implements ExperienceCheck {
-    private nestedElementQuery;
-    private getTarget;
-    private getEditorDom;
-    private observers;
-    constructor(nestedElementQuery: string, getTarget: () => HTMLElement | undefined | null, getEditorDom: () => HTMLElement | undefined | null);
-    start(callback: ExperienceCheckCallback): void;
-    stop(): void;
-}
 /**
  * Returns the narrow parent DOM element at the current selection, suitable
  * for observing with `{ childList: true }` (no subtree).

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-insert-block",
-	"version": "8.7.2",
+	"version": "8.7.4",
 	"description": "Insert block plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -36,7 +36,7 @@
 		"@atlaskit/editor-plugin-connectivity": "^7.0.0",
 		"@atlaskit/editor-plugin-date": "^9.1.0",
 		"@atlaskit/editor-plugin-emoji": "^8.1.0",
-		"@atlaskit/editor-plugin-expand": "^8.2.0",
+		"@atlaskit/editor-plugin-expand": "^8.3.0",
 		"@atlaskit/editor-plugin-extension": "^10.1.0",
 		"@atlaskit/editor-plugin-feature-flags": "^6.0.0",
 		"@atlaskit/editor-plugin-hyperlink": "^9.0.0",
@@ -44,7 +44,7 @@
 		"@atlaskit/editor-plugin-layout": "^7.0.0",
 		"@atlaskit/editor-plugin-media": "^9.5.0",
 		"@atlaskit/editor-plugin-media-insert": "^18.0.0",
-		"@atlaskit/editor-plugin-mentions": "^9.2.0",
+		"@atlaskit/editor-plugin-mentions": "^9.3.0",
 		"@atlaskit/editor-plugin-metrics": "^8.0.0",
 		"@atlaskit/editor-plugin-panel": "^9.0.0",
 		"@atlaskit/editor-plugin-placeholder-text": "^8.0.0",
@@ -59,13 +59,13 @@
 		"@atlaskit/editor-prosemirror": "^7.3.0",
 		"@atlaskit/editor-shared-styles": "^3.10.0",
 		"@atlaskit/editor-toolbar": "^0.19.0",
-		"@atlaskit/editor-toolbar-model": "^0.3.0",
+		"@atlaskit/editor-toolbar-model": "^0.4.0",
 		"@atlaskit/emoji": "^69.10.0",
 		"@atlaskit/icon": "^31.0.0",
 		"@atlaskit/icon-lab": "^5.16.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^29.0.0",
+		"@atlaskit/tmp-editor-statsig": "^29.6.0",
 		"@atlaskit/tokens": "^11.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -75,7 +75,7 @@
 		"react-virtualized": "^9.22.6"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^111.16.0",
+		"@atlaskit/editor-common": "^111.19.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"