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

package/dist/es2019/ui/ElementBrowser/InsertMenu.js

@@ -17,15 +17,26 @@ 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 const 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 const filterForPinWhiteboards = (featuredItems, formatMessage) => {
+export const 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((a, b) => (a.priority || Number.POSITIVE_INFINITY) - (b.priority || Number.POSITIVE_INFINITY));
+  }
+
+  // old logic sort whiteboards to top
   const DIAGRAM_KEY = 'whiteboard-extension:create-diagram';
   const isDiagram = item => item.key === DIAGRAM_KEY;
   const featuredWhiteboardsPresent = featuredItems.some(isDiagram);
@@ -142,8 +153,8 @@ const InsertMenu = ({
         isDisabled: true
       } : item)) !== null && _pluginInjectionApi$q5 !== void 0 ? _pluginInjectionApi$q5 : [];
       const 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/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
   }));
 };

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

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

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

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

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

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

package/dist/esm/insertBlockPlugin.js

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

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

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