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

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

@@ -35,6 +35,7 @@ var LayoutButton = exports.LayoutButton = function LayoutButton(_ref) {
       label: formatMessage(_messages.toolbarInsertBlockMessages.columns),
       size: "small"
     }),
-    onClick: onClick
+    onClick: onClick,
+    testId: _toolbar.TOOLBAR_BUTTON_TEST_ID.LAYOUT
   }));
 };

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

@@ -10,6 +10,7 @@ var _reactIntlNext = require("react-intl-next");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _messages = require("@atlaskit/editor-common/messages");
+var _toolbar = require("@atlaskit/editor-common/toolbar");
 var _editorPluginConnectivity = require("@atlaskit/editor-plugin-connectivity");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -67,6 +68,7 @@ var MediaButton = exports.MediaButton = function MediaButton(_ref) {
     }),
     onClick: onClick,
     ref: mediaButtonRef,
-    isDisabled: isOffline || !allowsUploads
+    isDisabled: isOffline || !allowsUploads,
+    testId: _toolbar.TOOLBAR_BUTTON_TEST_ID.MEDIA
   }));
 };

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

@@ -11,6 +11,7 @@ var _analytics = require("@atlaskit/editor-common/analytics");
 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 MentionButton = exports.MentionButton = function MentionButton(_ref) {
   var api = _ref.api;
@@ -46,6 +47,7 @@ var MentionButton = exports.MentionButton = function MentionButton(_ref) {
     }),
     onClick: onClick,
     ariaKeyshortcuts: "Shift+2 Space",
-    isDisabled: !canInsertMention || !mentionProvider || !isTypeAheadAllowed
+    isDisabled: !canInsertMention || !mentionProvider || !isTypeAheadAllowed,
+    testId: _toolbar.TOOLBAR_BUTTON_TEST_ID.MENTION
   }));
 };

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

@@ -52,6 +52,6 @@ var TableButton = exports.TableButton = function TableButton(_ref) {
     }),
     onClick: onClick,
     ariaKeyshortcuts: (0, _keymaps.getAriaKeyshortcuts)(_keymaps.toggleTable),
-    testId: "Table"
+    testId: _toolbar.TOOLBAR_BUTTON_TEST_ID.TABLE
   }));
 };

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

@@ -8,6 +8,7 @@ exports.TableSizePicker = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _messages = require("@atlaskit/editor-common/messages");
+var _toolbar = require("@atlaskit/editor-common/toolbar");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _useTableSelectorPopup = require("./hooks/useTableSelectorPopup");
 var _TableSelectorPopupWrapper = require("./popups/TableSelectorPopupWrapper");
@@ -54,6 +55,7 @@ var TableSizePicker = exports.TableSizePicker = function TableSizePicker(_ref) {
     }),
     onClick: onClick,
     isSelected: tableSelectorPopup.isOpen,
-    ref: tableSizePickerRef
+    ref: tableSizePickerRef,
+    testId: _toolbar.TOOLBAR_BUTTON_TEST_ID.TABLE_SELECTOR
   })));
 };

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

@@ -40,6 +40,7 @@ var TaskListButton = exports.TaskListButton = function TaskListButton(_ref) {
       size: "small"
     }),
     onClick: onClick,
-    ariaKeyshortcuts: "[ ] Space"
+    ariaKeyshortcuts: "[ ] Space",
+    testId: _toolbar.TOOLBAR_BUTTON_TEST_ID.TASK_LIST
   }));
 };

package/dist/es2019/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
@@ -92,6 +93,7 @@ export const insertBlockPlugin = ({
   api
 }) => {
   const isToolbarAIFCEnabled = Boolean(api === null || api === void 0 ? void 0 : api.toolbar);
+  const refs = {};
   const primaryToolbarComponent = ({
     editorView,
     editorActions,
@@ -105,6 +107,7 @@ export const insertBlockPlugin = ({
     isToolbarReducedSpacing,
     isLastItem
   }) => {
+    refs.popupsMountPoint = popupsMountPoint || undefined;
     const renderNode = providers => {
       if (!editorView) {
         return null;
@@ -210,6 +213,18 @@ export const insertBlockPlugin = ({
         name: 'toggleInsertBlockPmPlugin',
         plugin: () => toggleInsertBlockPmPlugin()
       });
+      if (fg('platform_editor_experience_tracking_toolbar_button')) {
+        plugins.push({
+          name: 'toolbarActionExperiences',
+          plugin: () => getToolbarActionExperiencesPlugin({
+            refs,
+            dispatchAnalyticsEvent: payload => {
+              var _api$analytics, _api$analytics$action;
+              return api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : (_api$analytics$action = _api$analytics.actions) === null || _api$analytics$action === void 0 ? void 0 : _api$analytics$action.fireAnalyticsEvent(payload);
+            }
+          })
+        });
+      }
       return plugins;
     },
     pluginsOptions: {},

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

@@ -0,0 +1,173 @@
+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';
+const pluginKey = new PluginKey('toolbarActionExperiences');
+const TIMEOUT_DURATION = 1000;
+const PRIMARY_TOOLBAR = 'primaryToolbar';
+const ABORT_REASON = {
+  USER_CANCELED: 'userCanceled',
+  EDITOR_DESTROYED: 'editorDestroyed'
+};
+export const getToolbarActionExperiencesPlugin = ({
+  refs,
+  dispatchAnalyticsEvent
+}) => {
+  let editorView;
+  let popupTargetEl;
+  const getPopupsTarget = () => {
+    if (!popupTargetEl) {
+      var _editorView;
+      popupTargetEl = refs.popupsMountPoint || getPopupContainerFromEditorView((_editorView = editorView) === null || _editorView === void 0 ? void 0 : _editorView.dom);
+    }
+    return popupTargetEl;
+  };
+  const getEditorDom = () => {
+    var _editorView2;
+    if (((_editorView2 = editorView) === null || _editorView2 === void 0 ? void 0 : _editorView2.dom) instanceof HTMLElement) {
+      return editorView.dom;
+    }
+    return null;
+  };
+  const narrowParentObserveConfig = () => {
+    var _getParentDOMAtSelect;
+    return {
+      target: (_getParentDOMAtSelect = getParentDOMAtSelection(editorView)) !== null && _getParentDOMAtSelect !== void 0 ? _getParentDOMAtSelect : getEditorDom(),
+      options: {
+        childList: true
+      }
+    };
+  };
+  const rootObserveConfig = () => ({
+    target: getEditorDom(),
+    options: {
+      childList: true
+    }
+  });
+  const createNodeInsertExperience = action => new Experience(EXPERIENCE_ID.TOOLBAR_ACTION, {
+    action,
+    actionSubjectId: PRIMARY_TOOLBAR,
+    dispatchAnalyticsEvent,
+    checks: [new ExperienceCheckTimeout({
+      durationMs: TIMEOUT_DURATION
+    }), new ExperienceCheckDomMutation({
+      onDomMutation: handleEditorNodeInsertDomMutation,
+      observeConfig: narrowParentObserveConfig
+    }), new ExperienceCheckDomMutation({
+      onDomMutation: handleEditorNodeInsertDomMutation,
+      observeConfig: rootObserveConfig
+    })]
+  });
+  const createPopupExperience = (action, popupSelector) => new Experience(EXPERIENCE_ID.TOOLBAR_ACTION, {
+    action,
+    actionSubjectId: PRIMARY_TOOLBAR,
+    dispatchAnalyticsEvent,
+    checks: [new ExperienceCheckTimeout({
+      durationMs: TIMEOUT_DURATION
+    }), new ExperienceCheckPopupMutation(popupSelector, getPopupsTarget, getEditorDom)]
+  });
+  const 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,
+      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
+  }];
+  const handleToolbarButtonClick = target => {
+    for (const {
+      experience,
+      buttonTestId
+    } of experienceButtonMappings) {
+      if (isToolbarButtonClick(target, buttonTestId)) {
+        experience.start({
+          forceRestart: true
+        });
+        return;
+      }
+    }
+  };
+  const abortAllExperiences = reason => {
+    for (const {
+      experience
+    } of experienceButtonMappings) {
+      experience.abort({
+        reason
+      });
+    }
+  };
+  const doc = getDocument();
+  if (!doc) {
+    return new SafePlugin({
+      key: pluginKey
+    });
+  }
+  const unbindClickListener = bind(doc, {
+    type: 'click',
+    listener: event => {
+      const target = event.target;
+      if (target instanceof HTMLElement) {
+        handleToolbarButtonClick(target);
+      }
+    },
+    options: {
+      capture: true
+    }
+  });
+  const unbindKeydownListener = bind(doc, {
+    type: 'keydown',
+    listener: event => {
+      if (event.key === 'Escape') {
+        abortAllExperiences(ABORT_REASON.USER_CANCELED);
+      }
+    },
+    options: {
+      capture: true
+    }
+  });
+  return new SafePlugin({
+    key: pluginKey,
+    view: view => {
+      editorView = view;
+      return {
+        destroy: () => {
+          abortAllExperiences(ABORT_REASON.EDITOR_DESTROYED);
+          editorView = undefined;
+          popupTargetEl = undefined;
+          unbindClickListener();
+          unbindKeydownListener();
+        }
+      };
+    }
+  });
+};

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

@@ -0,0 +1,279 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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 const 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'
+};
+const 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 const isToolbarButtonClick = (target, testId) => {
+  const button = target.closest(`button[data-testid="${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 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) {
+    _defineProperty(this, "observers", []);
+    this.nestedElementQuery = nestedElementQuery;
+    this.getTarget = getTarget;
+    this.getEditorDom = getEditorDom;
+  }
+  start(callback) {
+    this.stop();
+    const target = this.getTarget();
+    if (!target) {
+      callback({
+        status: 'failure',
+        reason: EXPERIENCE_FAILURE_REASON.DOM_MUTATION_TARGET_NOT_FOUND
+      });
+      return;
+    }
+    const doc = getDocument();
+    if (!doc) {
+      callback({
+        status: 'failure',
+        reason: EXPERIENCE_FAILURE_REASON.DOM_MUTATION_TARGET_NOT_FOUND
+      });
+      return;
+    }
+    const query = this.nestedElementQuery;
+    const onMutation = mutations => {
+      for (const mutation of mutations) {
+        if (mutation.type !== 'childList') {
+          continue;
+        }
+        for (const node of mutation.addedNodes) {
+          if (!(node instanceof HTMLElement)) {
+            continue;
+          }
+          if (popupWithNestedElement(node, query) || node.matches(query) || !!node.querySelector(query)) {
+            this.stop();
+            callback({
+              status: 'success'
+            });
+            return;
+          }
+        }
+      }
+    };
+    const observe = el => {
+      const observer = new MutationObserver(onMutation);
+      observer.observe(el, {
+        childList: true
+      });
+      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);
+  }
+  stop() {
+    for (const observer of this.observers) {
+      observer.disconnect();
+    }
+    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 const getParentDOMAtSelection = editorView => {
+  if (!editorView) {
+    return null;
+  }
+  try {
+    const {
+      selection
+    } = editorView.state;
+    const $from = selection.$from;
+    const parentDepth = Math.max(1, $from.depth);
+    const parentPos = $from.before(parentDepth);
+    const parentDom = editorView.nodeDOM(parentPos);
+    if (parentDom instanceof HTMLElement && parentDom.parentElement) {
+      return parentDom.parentElement;
+    }
+
+    // Fallback: use domAtPos
+    const {
+      node
+    } = editorView.domAtPos(selection.from);
+    let element = null;
+    if (node instanceof HTMLElement) {
+      element = node;
+    } else if (node instanceof Text) {
+      element = node.parentElement;
+    }
+    if (!element) {
+      return null;
+    }
+    const 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 {
+    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).
+ */
+const 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 const handleEditorNodeInsertDomMutation = ({
+  mutations
+}) => {
+  let hasAddedElement = false;
+  let hasRemovedElement = false;
+  for (const mutation of mutations) {
+    if (mutation.type !== 'childList') {
+      continue;
+    }
+    for (const node of mutation.addedNodes) {
+      if (matchesNodeInsertMarker(node)) {
+        return {
+          status: 'success'
+        };
+      }
+      if (node instanceof HTMLElement) {
+        hasAddedElement = true;
+      }
+    }
+    for (const node of mutation.removedNodes) {
+      if (node instanceof HTMLElement) {
+        hasRemovedElement = true;
+      }
+    }
+  }
+  if (hasAddedElement && hasRemovedElement) {
+    return {
+      status: 'success'
+    };
+  }
+  return undefined;
+};

package/dist/es2019/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';
@@ -69,6 +70,7 @@ export const EmojiButton = ({
     ref: emojiButtonRef,
     onClick: () => emojiPickerPopup.toggle(),
     isSelected: emojiPickerPopup.isOpen,
-    isDisabled: !isTypeAheadAllowed || !emojiProvider
+    isDisabled: !isTypeAheadAllowed || !emojiProvider,
+    testId: TOOLBAR_BUTTON_TEST_ID.EMOJI
   })));
 };

package/dist/es2019/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 const ImageButton = ({
@@ -43,6 +43,7 @@ export const ImageButton = ({
       size: "small"
     }),
     onClick: onClick,
-    isDisabled: !imageUploadEnabled || isOffline
+    isDisabled: !imageUploadEnabled || isOffline,
+    testId: TOOLBAR_BUTTON_TEST_ID.IMAGE
   }));
 };

package/dist/es2019/ui/toolbar-components/InsertButton.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 { 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';
@@ -242,6 +242,7 @@ export const InsertButton = ({
     ref: insertButtonRef,
     onClick: onClick,
     isSelected: insertMenuOpen,
-    isDisabled: !isTypeAheadAllowed || isDisabled
+    isDisabled: !isTypeAheadAllowed || isDisabled,
+    testId: TOOLBAR_BUTTON_TEST_ID.INSERT
   })));
 };

package/dist/es2019/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 const LayoutButton = ({
   api
@@ -33,6 +33,7 @@ export const LayoutButton = ({
       label: formatMessage(messages.columns),
       size: "small"
     }),
-    onClick: onClick
+    onClick: onClick,
+    testId: TOOLBAR_BUTTON_TEST_ID.LAYOUT
   }));
 };

package/dist/es2019/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 const MediaButton = ({
@@ -62,6 +63,7 @@ export const MediaButton = ({
     }),
     onClick: onClick,
     ref: mediaButtonRef,
-    isDisabled: isOffline || !allowsUploads
+    isDisabled: isOffline || !allowsUploads,
+    testId: TOOLBAR_BUTTON_TEST_ID.MEDIA
   }));
 };

package/dist/es2019/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 const MentionButton = ({
   api
@@ -42,6 +43,7 @@ export const MentionButton = ({
     }),
     onClick: onClick,
     ariaKeyshortcuts: "Shift+2 Space",
-    isDisabled: !canInsertMention || !mentionProvider || !isTypeAheadAllowed
+    isDisabled: !canInsertMention || !mentionProvider || !isTypeAheadAllowed,
+    testId: TOOLBAR_BUTTON_TEST_ID.MENTION
   }));
 };