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

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;

package/dist/types-ts4.5/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-ts4.5/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;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-insert-block",
-	"version": "8.4.4",
+	"version": "8.4.5",
 	"description": "Insert block plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -29,6 +29,7 @@
 	],
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
+		"@atlaskit/browser-apis": "^0.0.1",
 		"@atlaskit/editor-plugin-analytics": "^7.0.0",
 		"@atlaskit/editor-plugin-block-type": "^11.2.0",
 		"@atlaskit/editor-plugin-code-block": "^9.0.0",
@@ -131,6 +132,9 @@
 		},
 		"platform_editor_media_insert_check": {
 			"type": "boolean"
+		},
+		"platform_editor_experience_tracking_toolbar_button": {
+			"type": "boolean"
 		}
 	}
 }