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

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-insert-block
 
+## 8.4.5
+
+### Patch Changes
+
+- [`017f1e5b9810c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/017f1e5b9810c) -
+  EDITOR-4663 Add experience tracking for primary toolbar button actions
+- Updated dependencies
+
 ## 8.4.4
 
 ### Patch Changes

package/dist/cjs/insertBlockPlugin.js

@@ -17,6 +17,7 @@ var _consts = require("@atlaskit/editor-plugin-block-type/consts");
 var _editorPluginConnectivity = require("@atlaskit/editor-plugin-connectivity");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _toolbarActionExperiences = require("./pm-plugins/experiences/toolbar-action-experiences");
 var _toggleInsertBlock = require("./pm-plugins/toggleInsertBlock");
 var _toolbarComponents = require("./ui/toolbar-components");
 var _ToolbarInsertBlock = _interopRequireDefault(require("./ui/ToolbarInsertBlock"));
@@ -108,6 +109,7 @@ var insertBlockPlugin = exports.insertBlockPlugin = function insertBlockPlugin(_
     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,
@@ -120,6 +122,7 @@ var insertBlockPlugin = exports.insertBlockPlugin = function insertBlockPlugin(_
       disabled = _ref2.disabled,
       isToolbarReducedSpacing = _ref2.isToolbarReducedSpacing,
       isLastItem = _ref2.isLastItem;
+    refs.popupsMountPoint = popupsMountPoint || undefined;
     var renderNode = function renderNode(providers) {
       if (!editorView) {
         return null;
@@ -226,6 +229,20 @@ var insertBlockPlugin = exports.insertBlockPlugin = function insertBlockPlugin(_
           return (0, _toggleInsertBlock.toggleInsertBlockPmPlugin)();
         }
       });
+      if ((0, _platformFeatureFlags.fg)('platform_editor_experience_tracking_toolbar_button')) {
+        plugins.push({
+          name: 'toolbarActionExperiences',
+          plugin: function plugin() {
+            return (0, _toolbarActionExperiences.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/cjs/pm-plugins/experiences/toolbar-action-experiences.js

@@ -0,0 +1,183 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getToolbarActionExperiencesPlugin = void 0;
+var _bindEventListener = require("bind-event-listener");
+var _browserApis = require("@atlaskit/browser-apis");
+var _experiences = require("@atlaskit/editor-common/experiences");
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _toolbarExperienceUtils = require("./toolbar-experience-utils");
+var pluginKey = new _state.PluginKey('toolbarActionExperiences');
+var TIMEOUT_DURATION = 1000;
+var PRIMARY_TOOLBAR = 'primaryToolbar';
+var ABORT_REASON = {
+  USER_CANCELED: 'userCanceled',
+  EDITOR_DESTROYED: 'editorDestroyed'
+};
+var getToolbarActionExperiencesPlugin = exports.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 || (0, _experiences.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 = (0, _toolbarExperienceUtils.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 _experiences.Experience(_experiences.EXPERIENCE_ID.TOOLBAR_ACTION, {
+      action: action,
+      actionSubjectId: PRIMARY_TOOLBAR,
+      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+      checks: [new _experiences.ExperienceCheckTimeout({
+        durationMs: TIMEOUT_DURATION
+      }), new _experiences.ExperienceCheckDomMutation({
+        onDomMutation: _toolbarExperienceUtils.handleEditorNodeInsertDomMutation,
+        observeConfig: narrowParentObserveConfig
+      }), new _experiences.ExperienceCheckDomMutation({
+        onDomMutation: _toolbarExperienceUtils.handleEditorNodeInsertDomMutation,
+        observeConfig: rootObserveConfig
+      })]
+    });
+  };
+  var createPopupExperience = function createPopupExperience(action, popupSelector) {
+    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)]
+    });
+  };
+  var experienceButtonMappings = [{
+    experience: createPopupExperience('emoji', '[data-emoji-picker-container]'),
+    buttonTestId: _toolbar.TOOLBAR_BUTTON_TEST_ID.EMOJI
+  }, {
+    experience: createPopupExperience('media', '[id="local-media-upload-button"], [data-testid="media-picker-file-input"]'),
+    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
+      })]
+    }),
+    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"]'),
+    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"]'),
+    buttonTestId: _toolbar.TOOLBAR_BUTTON_TEST_ID.IMAGE
+  }, {
+    experience: createNodeInsertExperience('action'),
+    buttonTestId: _toolbar.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 ((0, _toolbarExperienceUtils.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 = (0, _browserApis.getDocument)();
+  if (!doc) {
+    return new _safePlugin.SafePlugin({
+      key: pluginKey
+    });
+  }
+  var unbindClickListener = (0, _bindEventListener.bind)(doc, {
+    type: 'click',
+    listener: function listener(event) {
+      var target = event.target;
+      if (target instanceof HTMLElement) {
+        handleToolbarButtonClick(target);
+      }
+    },
+    options: {
+      capture: true
+    }
+  });
+  var unbindKeydownListener = (0, _bindEventListener.bind)(doc, {
+    type: 'keydown',
+    listener: function listener(event) {
+      if (event.key === 'Escape') {
+        abortAllExperiences(ABORT_REASON.USER_CANCELED);
+      }
+    },
+    options: {
+      capture: true
+    }
+  });
+  return new _safePlugin.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/cjs/pm-plugins/experiences/toolbar-experience-utils.js

@@ -0,0 +1,409 @@
+"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");
+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; }
+/**
+ * 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.
+ */
+var NODE_INSERT_MARKERS = exports.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(', ');
+var isToolbarButtonClick = exports.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.
+ */
+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).
+ *
+ * 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.
+ */
+var getParentDOMAtSelection = exports.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).
+ */
+var handleEditorNodeInsertDomMutation = exports.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/cjs/ui/toolbar-components/EmojiButton.js

@@ -10,6 +10,7 @@ var _reactIntlNext = require("react-intl-next");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
+var _toolbar = require("@atlaskit/editor-common/toolbar");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _useEmojiPickerPopup = require("./hooks/useEmojiPickerPopup");
@@ -75,6 +76,7 @@ var EmojiButton = exports.EmojiButton = function EmojiButton(_ref) {
       return emojiPickerPopup.toggle();
     },
     isSelected: emojiPickerPopup.isOpen,
-    isDisabled: !isTypeAheadAllowed || !emojiProvider
+    isDisabled: !isTypeAheadAllowed || !emojiProvider,
+    testId: _toolbar.TOOLBAR_BUTTON_TEST_ID.EMOJI
   })));
 };

package/dist/cjs/ui/toolbar-components/ImageButton.js

@@ -44,6 +44,7 @@ var ImageButton = exports.ImageButton = function ImageButton(_ref) {
       size: "small"
     }),
     onClick: onClick,
-    isDisabled: !imageUploadEnabled || isOffline
+    isDisabled: !imageUploadEnabled || isOffline,
+    testId: _toolbar.TOOLBAR_BUTTON_TEST_ID.IMAGE
   }));
 };

package/dist/cjs/ui/toolbar-components/InsertButton.js

@@ -249,6 +249,7 @@ var InsertButton = exports.InsertButton = function InsertButton(_ref) {
     ref: insertButtonRef,
     onClick: onClick,
     isSelected: insertMenuOpen,
-    isDisabled: !isTypeAheadAllowed || isDisabled
+    isDisabled: !isTypeAheadAllowed || isDisabled,
+    testId: _toolbar.TOOLBAR_BUTTON_TEST_ID.INSERT
   })));
 };