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

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/ElementBrowser/InsertMenu.js

@@ -24,15 +24,28 @@ import { messages, IconCode, IconDate, IconDecision, IconDivider, IconExpand, Ic
 import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners as withOuterListeners } from '@atlaskit/editor-common/ui-react';
 import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
 import { N0, N30A, N60A } from '@atlaskit/theme/colors';
+import { expVal } from '@atlaskit/tmp-editor-statsig/expVal';
 export var DEFAULT_HEIGHT = 560;
 
 /**
- * Exported helper to allow testing of InsertMenu whiteboard pinning logic. NOTE: this is
+ * Exported helper to allow testing of InsertMenu pinning logic. NOTE: this is
    *not* the ideal way to approach this, quickinsert plugin provides a `getSuggestions`
    method that can be used to get suggestions -> once all experiments are cleaned up,
    they should be unified through `pluginInjectionApi?.quickInsert?.actions.getSuggestions`
+
+   `cc_fd_db_top_editor_toolbar` experiment adds new logic to sort elements by `priority`
+   this newer implementation matches how the "quick insert menu" sorts elements
  */
-export var filterForPinWhiteboards = function filterForPinWhiteboards(featuredItems, formatMessage) {
+export var sortPrioritizedElements = function sortPrioritizedElements(featuredItems, formatMessage) {
+  if (['new-description', 'orig-description'].includes(expVal('cc_fd_db_top_editor_toolbar', 'cohort', 'control'))) {
+    // Sort by priority (lower first) on the concatenated list so items
+    // with "priority" are at the top (e.g. Whiteboard before Database)
+    return featuredItems.slice(0).sort(function (a, b) {
+      return (a.priority || Number.POSITIVE_INFINITY) - (b.priority || Number.POSITIVE_INFINITY);
+    });
+  }
+
+  // old logic sort whiteboards to top
   var DIAGRAM_KEY = 'whiteboard-extension:create-diagram';
   var isDiagram = function isDiagram(item) {
     return item.key === DIAGRAM_KEY;
@@ -167,8 +180,8 @@ var InsertMenu = function InsertMenu(_ref) {
         }) : item;
       })) !== null && _pluginInjectionApi$q4 !== void 0 ? _pluginInjectionApi$q4 : [];
       var unfilteredResult = quickInsertDropdownItems.concat(featuredQuickInsertSuggestions);
-      // need to filter on the concatenated list so whiteboards are at the top
-      result = filterForPinWhiteboards(unfilteredResult, formatMessage);
+      // need to sort on the concatenated list so desired elements are at the top
+      result = sortPrioritizedElements(unfilteredResult, formatMessage);
     }
     setItemCount(result.length);
     return result;

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
   })));
 };

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { useIntl } from 'react-intl-next';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 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 { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
 import { ToolbarButton, ToolbarTooltip, ImageIcon } from '@atlaskit/editor-toolbar';
 export var ImageButton = function ImageButton(_ref) {
@@ -37,6 +37,7 @@ export var ImageButton = function ImageButton(_ref) {
       size: "small"
     }),
     onClick: onClick,
-    isDisabled: !imageUploadEnabled || isOffline
+    isDisabled: !imageUploadEnabled || isOffline,
+    testId: TOOLBAR_BUTTON_TEST_ID.IMAGE
   }));
 };

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

@@ -4,7 +4,7 @@ import { useIntl } from 'react-intl-next';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { getAriaKeyshortcuts, insertElements, ToolTipContent } 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 { Popup } from '@atlaskit/editor-common/ui';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
@@ -241,6 +241,7 @@ export var InsertButton = function InsertButton(_ref) {
     ref: insertButtonRef,
     onClick: onClick,
     isSelected: insertMenuOpen,
-    isDisabled: !isTypeAheadAllowed || isDisabled
+    isDisabled: !isTypeAheadAllowed || isDisabled,
+    testId: TOOLBAR_BUTTON_TEST_ID.INSERT
   })));
 };

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { useIntl } from 'react-intl-next';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 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, LayoutIcon } from '@atlaskit/editor-toolbar';
 export var LayoutButton = function LayoutButton(_ref) {
   var api = _ref.api;
@@ -28,6 +28,7 @@ export var LayoutButton = function LayoutButton(_ref) {
       label: formatMessage(messages.columns),
       size: "small"
     }),
-    onClick: onClick
+    onClick: onClick,
+    testId: TOOLBAR_BUTTON_TEST_ID.LAYOUT
   }));
 };

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

@@ -3,6 +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 { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { TOOLBAR_BUTTON_TEST_ID } from '@atlaskit/editor-common/toolbar';
 import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
 import { ToolbarButton, ToolbarTooltip, ImageIcon } from '@atlaskit/editor-toolbar';
 export var MediaButton = function MediaButton(_ref) {
@@ -59,6 +60,7 @@ export var MediaButton = function MediaButton(_ref) {
     }),
     onClick: onClick,
     ref: mediaButtonRef,
-    isDisabled: isOffline || !allowsUploads
+    isDisabled: isOffline || !allowsUploads,
+    testId: TOOLBAR_BUTTON_TEST_ID.MEDIA
   }));
 };

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

@@ -4,6 +4,7 @@ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { ToolTipContent, insertMention } 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, MentionIcon } from '@atlaskit/editor-toolbar';
 export var MentionButton = function MentionButton(_ref) {
   var api = _ref.api;
@@ -39,6 +40,7 @@ export var MentionButton = function MentionButton(_ref) {
     }),
     onClick: onClick,
     ariaKeyshortcuts: "Shift+2 Space",
-    isDisabled: !canInsertMention || !mentionProvider || !isTypeAheadAllowed
+    isDisabled: !canInsertMention || !mentionProvider || !isTypeAheadAllowed,
+    testId: TOOLBAR_BUTTON_TEST_ID.MENTION
   }));
 };

package/dist/esm/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 var TableButton = function TableButton(_ref) {
   var api = _ref.api;
@@ -45,6 +45,6 @@ export var TableButton = function TableButton(_ref) {
     }),
     onClick: onClick,
     ariaKeyshortcuts: getAriaKeyshortcuts(toggleTable),
-    testId: "Table"
+    testId: TOOLBAR_BUTTON_TEST_ID.TABLE
   }));
 };

package/dist/esm/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';
@@ -46,6 +47,7 @@ export var TableSizePicker = function TableSizePicker(_ref) {
     }),
     onClick: onClick,
     isSelected: tableSelectorPopup.isOpen,
-    ref: tableSizePickerRef
+    ref: tableSizePickerRef,
+    testId: TOOLBAR_BUTTON_TEST_ID.TABLE_SELECTOR
   })));
 };

package/dist/esm/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 var TaskListButton = function TaskListButton(_ref) {
   var api = _ref.api;
@@ -33,6 +33,7 @@ export var TaskListButton = function TaskListButton(_ref) {
       size: "small"
     }),
     onClick: onClick,
-    ariaKeyshortcuts: "[ ] Space"
+    ariaKeyshortcuts: "[ ] Space",
+    testId: TOOLBAR_BUTTON_TEST_ID.TASK_LIST
   }));
 };

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

@@ -0,0 +1,10 @@
+import { type DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+type ToolbarActionExperienceOptions = {
+    dispatchAnalyticsEvent: DispatchAnalyticsEvent;
+    refs: {
+        popupsMountPoint?: HTMLElement;
+    };
+};
+export declare const getToolbarActionExperiencesPlugin: ({ refs, dispatchAnalyticsEvent, }: ToolbarActionExperienceOptions) => SafePlugin<any>;
+export {};

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

@@ -0,0 +1,57 @@
+import type { ExperienceCheck, ExperienceCheckCallback, ExperienceCheckResult } from '@atlaskit/editor-common/experiences';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+/**
+ * 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 declare const NODE_INSERT_MARKERS: {
+    readonly TABLE: ".tableView-content-wrap";
+    readonly LAYOUT: ".layoutSectionView-content-wrap";
+    readonly LAYOUT_COLUMN: ".layoutColumnView-content-wrap";
+    readonly TASK_LIST: "[data-node-type=\"actionList\"]";
+    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).
+ *
+ * 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 declare const getParentDOMAtSelection: (editorView?: EditorView) => HTMLElement | null;
+/**
+ * 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 declare const handleEditorNodeInsertDomMutation: ({ mutations, }: {
+    mutations: MutationRecord[];
+}) => ExperienceCheckResult | undefined;