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

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

@@ -6,6 +6,14 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 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';
+
+/**
+ * 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
@@ -26,62 +34,90 @@ 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) {
+    var type = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'editorRoot';
     _classCallCheck(this, ExperienceCheckPopupMutation);
     _defineProperty(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 _createClass(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;
@@ -104,23 +140,24 @@ export var ExperienceCheckPopupMutation = /*#__PURE__*/function () {
       }
       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 (popupWithNestedElement(node, query) || node.matches(query) || !!node.querySelector(query)) {
+                var found = popupWithNestedElement(node, query) || node.matches(query) || !!node.querySelector(query);
+                if (found) {
                   _this.stop();
                   callback({
                     status: 'success'
@@ -129,15 +166,15 @@ export var ExperienceCheckPopupMutation = /*#__PURE__*/function () {
                 }
               }
             } 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) {
@@ -147,126 +184,36 @@ export var ExperienceCheckPopupMutation = /*#__PURE__*/function () {
         });
         _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();
+        _iterator4.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;
+      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 = [];
     }
@@ -343,23 +290,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 _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'
@@ -370,29 +317,29 @@ export var handleEditorNodeInsertDomMutation = function handleEditorNodeInsertDo
           }
         }
       } 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/types/pm-plugins/experiences/toolbar-experience-utils.d.ts

@@ -1,5 +1,12 @@
 import type { ExperienceCheck, ExperienceCheckCallback, ExperienceCheckResult } from '@atlaskit/editor-common/experiences';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+/**
+ * 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)
+ */
+export type PopupCheckType = 'inline' | 'editorRoot' | 'editorContent';
 /**
  * DOM marker selectors for node types inserted via toolbar actions.
  * Matches outermost wrapper elements set synchronously by ReactNodeView
@@ -13,24 +20,30 @@ 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 type;
     private observers;
-    constructor(nestedElementQuery: string, getTarget: () => HTMLElement | undefined | null, getEditorDom: () => HTMLElement | undefined | null);
+    constructor(nestedElementQuery: string, getTarget: () => HTMLElement | undefined | null, getEditorDom: () => HTMLElement | undefined | null, type?: PopupCheckType);
+    /**
+     * Returns the list of DOM elements to observe based on popup type.
+     */
+    private getObserveTargets;
+    /**
+     * 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.
+     */
+    private getInlineTargets;
+    /**
+     * 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.
+     */
+    private getEditorRootTargets;
     start(callback: ExperienceCheckCallback): void;
     stop(): void;
 }

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

@@ -1,5 +1,12 @@
 import type { ExperienceCheck, ExperienceCheckCallback, ExperienceCheckResult } from '@atlaskit/editor-common/experiences';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+/**
+ * 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)
+ */
+export type PopupCheckType = 'inline' | 'editorRoot' | 'editorContent';
 /**
  * DOM marker selectors for node types inserted via toolbar actions.
  * Matches outermost wrapper elements set synchronously by ReactNodeView
@@ -13,24 +20,30 @@ 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 type;
     private observers;
-    constructor(nestedElementQuery: string, getTarget: () => HTMLElement | undefined | null, getEditorDom: () => HTMLElement | undefined | null);
+    constructor(nestedElementQuery: string, getTarget: () => HTMLElement | undefined | null, getEditorDom: () => HTMLElement | undefined | null, type?: PopupCheckType);
+    /**
+     * Returns the list of DOM elements to observe based on popup type.
+     */
+    private getObserveTargets;
+    /**
+     * 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.
+     */
+    private getInlineTargets;
+    /**
+     * 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.
+     */
+    private getEditorRootTargets;
     start(callback: ExperienceCheckCallback): void;
     stop(): void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-insert-block",
-	"version": "8.7.2",
+	"version": "8.7.3",
 	"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",
@@ -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.5.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"