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

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

@@ -1,6 +1,14 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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
@@ -21,42 +29,71 @@ 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) {
+  constructor(nestedElementQuery, getTarget, getEditorDom, type = 'editorRoot') {
     _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.
+   */
+  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.
+   */
+  getInlineTargets() {
+    const target = this.getTarget();
+    if (!target) {
+      return [];
+    }
+
+    // Walk up to find the button-group container
+    const 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.
+   */
+  getEditorRootTargets() {
+    const targets = [];
+    const editorDom = this.getEditorDom();
+    if (editorDom) {
+      // Find the actual editor root (.akEditor) by walking up the DOM
+      const editorRoot = editorDom.closest('.akEditor') || editorDom.parentElement;
+      if (editorRoot instanceof HTMLElement) {
+        targets.push(editorRoot);
+
+        // Observe existing [data-editor-popup] wrappers
+        const wrappers = editorRoot.querySelectorAll('[data-editor-popup]');
+        for (const wrapper of wrappers) {
+          targets.push(wrapper);
+        }
+      }
+    }
+    return targets;
   }
   start(callback) {
     this.stop();
@@ -86,7 +123,8 @@ export class ExperienceCheckPopupMutation {
           if (!(node instanceof HTMLElement)) {
             continue;
           }
-          if (popupWithNestedElement(node, query) || node.matches(query) || !!node.querySelector(query)) {
+          const found = popupWithNestedElement(node, query) || node.matches(query) || !!node.querySelector(query);
+          if (found) {
             this.stop();
             callback({
               status: 'success'
@@ -103,66 +141,12 @@ export class ExperienceCheckPopupMutation {
       });
       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);
+    // Get type-specific targets and observe them
+    const observeTargets = this.getObserveTargets();
+    for (const observeTarget of observeTargets) {
+      observe(observeTarget);
+    }
   }
   stop() {
     for (const observer of this.observers) {

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,17 @@ 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() {
+    if (!lastClickedToolbarButton) {
+      return undefined;
+    }
+    return lastClickedToolbarButton;
+  };
   var narrowParentObserveConfig = function narrowParentObserveConfig() {
     var _getParentDOMAtSelect;
     return {
@@ -65,45 +77,39 @@ 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(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_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 +121,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
         });