@atlaskit/editor-plugin-insert-block 8.4.3 → 8.4.5

package/dist/es2019/ui/toolbar-components/TableButton.js

@@ -3,7 +3,7 @@ import { useIntl } from 'react-intl-next';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { ToolTipContent, getAriaKeyshortcuts, toggleTable } from '@atlaskit/editor-common/keymaps';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
-import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
+import { useEditorToolbar, TOOLBAR_BUTTON_TEST_ID } from '@atlaskit/editor-common/toolbar';
 import { ToolbarButton, ToolbarTooltip, TableIcon } from '@atlaskit/editor-toolbar';
 export const TableButton = ({
   api
@@ -50,6 +50,6 @@ export const TableButton = ({
     }),
     onClick: onClick,
     ariaKeyshortcuts: getAriaKeyshortcuts(toggleTable),
-    testId: "Table"
+    testId: TOOLBAR_BUTTON_TEST_ID.TABLE
   }));
 };

package/dist/es2019/ui/toolbar-components/TableSizePicker.js

@@ -1,6 +1,7 @@
 import React, { useRef } from 'react';
 import { useIntl } from 'react-intl-next';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { TOOLBAR_BUTTON_TEST_ID } from '@atlaskit/editor-common/toolbar';
 import { MoreItemsIcon, ToolbarButton, ToolbarTooltip, useToolbarUI } from '@atlaskit/editor-toolbar';
 import { useTableSelectorPopup } from './hooks/useTableSelectorPopup';
 import { TableSelectorPopupWrapper } from './popups/TableSelectorPopupWrapper';
@@ -49,6 +50,7 @@ export const TableSizePicker = ({
     }),
     onClick: onClick,
     isSelected: tableSelectorPopup.isOpen,
-    ref: tableSizePickerRef
+    ref: tableSizePickerRef,
+    testId: TOOLBAR_BUTTON_TEST_ID.TABLE_SELECTOR
   })));
 };

package/dist/es2019/ui/toolbar-components/TaskListButton.js

@@ -3,7 +3,7 @@ import { useIntl } from 'react-intl-next';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { ToolTipContent, insertTaskList } from '@atlaskit/editor-common/keymaps';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
-import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
+import { TOOLBAR_BUTTON_TEST_ID, useEditorToolbar } from '@atlaskit/editor-common/toolbar';
 import { ToolbarButton, ToolbarTooltip, TaskIcon } from '@atlaskit/editor-toolbar';
 export const TaskListButton = ({
   api
@@ -38,6 +38,7 @@ export const TaskListButton = ({
       size: "small"
     }),
     onClick: onClick,
-    ariaKeyshortcuts: "[ ] Space"
+    ariaKeyshortcuts: "[ ] Space",
+    testId: TOOLBAR_BUTTON_TEST_ID.TASK_LIST
   }));
 };

package/dist/esm/insertBlockPlugin.js

@@ -9,6 +9,7 @@ import { BLOCK_QUOTE, CODE_BLOCK, PANEL } from '@atlaskit/editor-plugin-block-ty
 import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { getToolbarActionExperiencesPlugin } from './pm-plugins/experiences/toolbar-action-experiences';
 import { toggleInsertBlockPmKey, toggleInsertBlockPmPlugin } from './pm-plugins/toggleInsertBlock';
 import { getToolbarComponents } from './ui/toolbar-components';
 // Ignored via go/ees005
@@ -98,6 +99,7 @@ export var insertBlockPlugin = function insertBlockPlugin(_ref) {
     options = _ref$config === void 0 ? {} : _ref$config,
     api = _ref.api;
   var isToolbarAIFCEnabled = Boolean(api === null || api === void 0 ? void 0 : api.toolbar);
+  var refs = {};
   var primaryToolbarComponent = function primaryToolbarComponent(_ref2) {
     var editorView = _ref2.editorView,
       editorActions = _ref2.editorActions,
@@ -110,6 +112,7 @@ export var insertBlockPlugin = function insertBlockPlugin(_ref) {
       disabled = _ref2.disabled,
       isToolbarReducedSpacing = _ref2.isToolbarReducedSpacing,
       isLastItem = _ref2.isLastItem;
+    refs.popupsMountPoint = popupsMountPoint || undefined;
     var renderNode = function renderNode(providers) {
       if (!editorView) {
         return null;
@@ -216,6 +219,20 @@ export var insertBlockPlugin = function insertBlockPlugin(_ref) {
           return toggleInsertBlockPmPlugin();
         }
       });
+      if (fg('platform_editor_experience_tracking_toolbar_button')) {
+        plugins.push({
+          name: 'toolbarActionExperiences',
+          plugin: function plugin() {
+            return getToolbarActionExperiencesPlugin({
+              refs: refs,
+              dispatchAnalyticsEvent: function dispatchAnalyticsEvent(payload) {
+                var _api$analytics;
+                return api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || (_api$analytics = _api$analytics.actions) === null || _api$analytics === void 0 ? void 0 : _api$analytics.fireAnalyticsEvent(payload);
+              }
+            });
+          }
+        });
+      }
       return plugins;
     },
     pluginsOptions: {},

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

@@ -0,0 +1,177 @@
+import { bind } from 'bind-event-listener';
+import { getDocument } from '@atlaskit/browser-apis';
+import { Experience, EXPERIENCE_ID, ExperienceCheckDomMutation, ExperienceCheckTimeout, getPopupContainerFromEditorView } from '@atlaskit/editor-common/experiences';
+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';
+var pluginKey = new PluginKey('toolbarActionExperiences');
+var TIMEOUT_DURATION = 1000;
+var PRIMARY_TOOLBAR = 'primaryToolbar';
+var ABORT_REASON = {
+  USER_CANCELED: 'userCanceled',
+  EDITOR_DESTROYED: 'editorDestroyed'
+};
+export var getToolbarActionExperiencesPlugin = function getToolbarActionExperiencesPlugin(_ref) {
+  var refs = _ref.refs,
+    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent;
+  var editorView;
+  var popupTargetEl;
+  var getPopupsTarget = function getPopupsTarget() {
+    if (!popupTargetEl) {
+      var _editorView;
+      popupTargetEl = refs.popupsMountPoint || getPopupContainerFromEditorView((_editorView = editorView) === null || _editorView === void 0 ? void 0 : _editorView.dom);
+    }
+    return popupTargetEl;
+  };
+  var getEditorDom = function getEditorDom() {
+    var _editorView2;
+    if (((_editorView2 = editorView) === null || _editorView2 === void 0 ? void 0 : _editorView2.dom) instanceof HTMLElement) {
+      return editorView.dom;
+    }
+    return null;
+  };
+  var narrowParentObserveConfig = function narrowParentObserveConfig() {
+    var _getParentDOMAtSelect;
+    return {
+      target: (_getParentDOMAtSelect = getParentDOMAtSelection(editorView)) !== null && _getParentDOMAtSelect !== void 0 ? _getParentDOMAtSelect : getEditorDom(),
+      options: {
+        childList: true
+      }
+    };
+  };
+  var rootObserveConfig = function rootObserveConfig() {
+    return {
+      target: getEditorDom(),
+      options: {
+        childList: true
+      }
+    };
+  };
+  var createNodeInsertExperience = function createNodeInsertExperience(action) {
+    return new Experience(EXPERIENCE_ID.TOOLBAR_ACTION, {
+      action: action,
+      actionSubjectId: PRIMARY_TOOLBAR,
+      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+      checks: [new ExperienceCheckTimeout({
+        durationMs: TIMEOUT_DURATION
+      }), new ExperienceCheckDomMutation({
+        onDomMutation: handleEditorNodeInsertDomMutation,
+        observeConfig: narrowParentObserveConfig
+      }), new ExperienceCheckDomMutation({
+        onDomMutation: handleEditorNodeInsertDomMutation,
+        observeConfig: rootObserveConfig
+      })]
+    });
+  };
+  var createPopupExperience = function createPopupExperience(action, popupSelector) {
+    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)]
+    });
+  };
+  var experienceButtonMappings = [{
+    experience: createPopupExperience('emoji', '[data-emoji-picker-container]'),
+    buttonTestId: TOOLBAR_BUTTON_TEST_ID.EMOJI
+  }, {
+    experience: createPopupExperience('media', '[id="local-media-upload-button"], [data-testid="media-picker-file-input"]'),
+    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
+      })]
+    }),
+    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"]'),
+    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"]'),
+    buttonTestId: TOOLBAR_BUTTON_TEST_ID.IMAGE
+  }, {
+    experience: createNodeInsertExperience('action'),
+    buttonTestId: TOOLBAR_BUTTON_TEST_ID.TASK_LIST
+  }];
+  var handleToolbarButtonClick = function handleToolbarButtonClick(target) {
+    for (var _i = 0, _experienceButtonMapp = experienceButtonMappings; _i < _experienceButtonMapp.length; _i++) {
+      var _experienceButtonMapp2 = _experienceButtonMapp[_i],
+        experience = _experienceButtonMapp2.experience,
+        buttonTestId = _experienceButtonMapp2.buttonTestId;
+      if (isToolbarButtonClick(target, buttonTestId)) {
+        experience.start({
+          forceRestart: true
+        });
+        return;
+      }
+    }
+  };
+  var abortAllExperiences = function abortAllExperiences(reason) {
+    for (var _i2 = 0, _experienceButtonMapp3 = experienceButtonMappings; _i2 < _experienceButtonMapp3.length; _i2++) {
+      var experience = _experienceButtonMapp3[_i2].experience;
+      experience.abort({
+        reason: reason
+      });
+    }
+  };
+  var doc = getDocument();
+  if (!doc) {
+    return new SafePlugin({
+      key: pluginKey
+    });
+  }
+  var unbindClickListener = bind(doc, {
+    type: 'click',
+    listener: function listener(event) {
+      var target = event.target;
+      if (target instanceof HTMLElement) {
+        handleToolbarButtonClick(target);
+      }
+    },
+    options: {
+      capture: true
+    }
+  });
+  var unbindKeydownListener = bind(doc, {
+    type: 'keydown',
+    listener: function listener(event) {
+      if (event.key === 'Escape') {
+        abortAllExperiences(ABORT_REASON.USER_CANCELED);
+      }
+    },
+    options: {
+      capture: true
+    }
+  });
+  return new SafePlugin({
+    key: pluginKey,
+    view: function view(_view) {
+      editorView = _view;
+      return {
+        destroy: function destroy() {
+          abortAllExperiences(ABORT_REASON.EDITOR_DESTROYED);
+          editorView = undefined;
+          popupTargetEl = undefined;
+          unbindClickListener();
+          unbindKeydownListener();
+        }
+      };
+    }
+  });
+};

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

@@ -0,0 +1,403 @@
+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';
+/**
+ * DOM marker selectors for node types inserted via toolbar actions.
+ * Matches outermost wrapper elements set synchronously by ReactNodeView
+ * (`{nodeTypeName}View-content-wrap`) or schema `toDOM` attributes.
+ */
+export var NODE_INSERT_MARKERS = {
+  TABLE: '.tableView-content-wrap',
+  LAYOUT: '.layoutSectionView-content-wrap',
+  LAYOUT_COLUMN: '.layoutColumnView-content-wrap',
+  TASK_LIST: '[data-node-type="actionList"]',
+  TASK_ITEM: '.taskItemView-content-wrap'
+};
+var COMBINED_NODE_INSERT_SELECTOR = [NODE_INSERT_MARKERS.TABLE, NODE_INSERT_MARKERS.LAYOUT, NODE_INSERT_MARKERS.LAYOUT_COLUMN, NODE_INSERT_MARKERS.TASK_LIST, NODE_INSERT_MARKERS.TASK_ITEM].join(', ');
+export var isToolbarButtonClick = function isToolbarButtonClick(target, testId) {
+  var button = target.closest("button[data-testid=\"".concat(testId, "\"]"));
+  if (!button) {
+    return false;
+  }
+  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).
+ *
+ * Uses the resolved position's depth to find the block node at the cursor
+ * via `nodeDOM`, then returns its `parentElement` — the container whose
+ * direct children change when content is inserted at this position.
+ *
+ * Falls back to `domAtPos` if `nodeDOM` is unavailable.
+ */
+export var getParentDOMAtSelection = function getParentDOMAtSelection(editorView) {
+  if (!editorView) {
+    return null;
+  }
+  try {
+    var selection = editorView.state.selection;
+    var $from = selection.$from;
+    var parentDepth = Math.max(1, $from.depth);
+    var parentPos = $from.before(parentDepth);
+    var parentDom = editorView.nodeDOM(parentPos);
+    if (parentDom instanceof HTMLElement && parentDom.parentElement) {
+      return parentDom.parentElement;
+    }
+
+    // Fallback: use domAtPos
+    var _editorView$domAtPos = editorView.domAtPos(selection.from),
+      node = _editorView$domAtPos.node;
+    var element = null;
+    if (node instanceof HTMLElement) {
+      element = node;
+    } else if (node instanceof Text) {
+      element = node.parentElement;
+    }
+    if (!element) {
+      return null;
+    }
+    var proseMirrorRoot = editorView.dom;
+    if (!(proseMirrorRoot instanceof HTMLElement)) {
+      return null;
+    }
+    if (element === proseMirrorRoot) {
+      return proseMirrorRoot;
+    }
+    if (element.parentElement && proseMirrorRoot.contains(element.parentElement)) {
+      return element.parentElement;
+    }
+    return proseMirrorRoot;
+  } catch (_unused) {
+    return null;
+  }
+};
+
+/**
+ * Checks whether a DOM node matches any known node insert marker,
+ * either directly or via a nested element (e.g. breakout mark wrapper).
+ */
+var matchesNodeInsertMarker = function matchesNodeInsertMarker(node) {
+  if (!(node instanceof HTMLElement)) {
+    return false;
+  }
+  return node.matches(COMBINED_NODE_INSERT_SELECTOR) || !!node.querySelector(COMBINED_NODE_INSERT_SELECTOR);
+};
+
+/**
+ * Evaluates DOM mutations to detect a node insert action.
+ *
+ * Uses two strategies:
+ * 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;
+  var hasAddedElement = false;
+  var hasRemovedElement = false;
+  var _iterator1 = _createForOfIteratorHelper(mutations),
+    _step1;
+  try {
+    for (_iterator1.s(); !(_step1 = _iterator1.n()).done;) {
+      var mutation = _step1.value;
+      if (mutation.type !== 'childList') {
+        continue;
+      }
+      var _iterator10 = _createForOfIteratorHelper(mutation.addedNodes),
+        _step10;
+      try {
+        for (_iterator10.s(); !(_step10 = _iterator10.n()).done;) {
+          var node = _step10.value;
+          if (matchesNodeInsertMarker(node)) {
+            return {
+              status: 'success'
+            };
+          }
+          if (node instanceof HTMLElement) {
+            hasAddedElement = true;
+          }
+        }
+      } catch (err) {
+        _iterator10.e(err);
+      } finally {
+        _iterator10.f();
+      }
+      var _iterator11 = _createForOfIteratorHelper(mutation.removedNodes),
+        _step11;
+      try {
+        for (_iterator11.s(); !(_step11 = _iterator11.n()).done;) {
+          var _node = _step11.value;
+          if (_node instanceof HTMLElement) {
+            hasRemovedElement = true;
+          }
+        }
+      } catch (err) {
+        _iterator11.e(err);
+      } finally {
+        _iterator11.f();
+      }
+    }
+  } catch (err) {
+    _iterator1.e(err);
+  } finally {
+    _iterator1.f();
+  }
+  if (hasAddedElement && hasRemovedElement) {
+    return {
+      status: 'success'
+    };
+  }
+  return undefined;
+};

package/dist/esm/ui/toolbar-components/EmojiButton.js

@@ -3,6 +3,7 @@ import { useIntl } from 'react-intl-next';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { ToolTipContent, insertEmoji } from '@atlaskit/editor-common/keymaps';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { TOOLBAR_BUTTON_TEST_ID } from '@atlaskit/editor-common/toolbar';
 import { ToolbarButton, ToolbarTooltip, EmojiIcon, useToolbarUI } from '@atlaskit/editor-toolbar';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { useEmojiPickerPopup } from './hooks/useEmojiPickerPopup';
@@ -67,6 +68,7 @@ export var EmojiButton = function EmojiButton(_ref) {
       return emojiPickerPopup.toggle();
     },
     isSelected: emojiPickerPopup.isOpen,
-    isDisabled: !isTypeAheadAllowed || !emojiProvider
+    isDisabled: !isTypeAheadAllowed || !emojiProvider,
+    testId: TOOLBAR_BUTTON_TEST_ID.EMOJI
   })));
 };