@atlaskit/editor-plugin-insert-block 1.12.0 → 1.14.0

package/dist/esm/plugin.js

@@ -4,9 +4,11 @@ import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { contentAllowedInCodeBlock, shouldSplitSelectedNodeOnNodeInsertion } from '@atlaskit/editor-common/insert';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { ToolbarSize } from '@atlaskit/editor-common/types';
 import { getWrappingOptions } from '@atlaskit/editor-common/utils';
 import { BLOCK_QUOTE, CODE_BLOCK, PANEL } from '@atlaskit/editor-plugin-block-type/consts';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import SwitchIcon from './assets/switch';
 import { elementBrowserPmKey, elementBrowserPmPlugin } from './pm-plugins/elementBrowser';
@@ -55,6 +57,9 @@ export var insertBlockPlugin = function insertBlockPlugin(_ref) {
   var toggleDropdownMenuOptionsRef = {
     current: null
   };
+  var editorViewRef = {
+    current: null
+  };
   var registerToggleDropdownMenuOptions = function registerToggleDropdownMenuOptions(cb) {
     toggleDropdownMenuOptionsRef.current = cb;
     return function () {
@@ -122,6 +127,17 @@ export var insertBlockPlugin = function insertBlockPlugin(_ref) {
         plugin: function plugin() {
           return elementBrowserPmPlugin();
         }
+      }, {
+        name: 'elementBrowserEditorViewRef',
+        plugin: function plugin() {
+          return new SafePlugin({
+            view: function view(editorView) {
+              // Workaround - need reference to editorView for contextPanel component
+              editorViewRef.current = editorView;
+              return {};
+            }
+          });
+        }
       }];
     },
     pluginsOptions: {
@@ -187,10 +203,13 @@ export var insertBlockPlugin = function insertBlockPlugin(_ref) {
       // If we decide to ship the feature, we will consider a separate plugin if needed.
       // Experiment one-pager: https://hello.atlassian.net/wiki/spaces/ETM/pages/3983684902/Experiment+Drive+element+usage+via+element+templates
       quickInsert: function quickInsert() {
-        if (editorExperiment('element-level-templates', true, {
+        var _options$UNSAFE_edito;
+        if (
+        // @ts-ignore
+        ['full-page', 'full-width'].includes((_options$UNSAFE_edito = options.UNSAFE_editorAppearance) !== null && _options$UNSAFE_edito !== void 0 ? _options$UNSAFE_edito : '') && editorExperiment('element-level-templates', true, {
           exposure: true
         })) {
-          return templateOptions;
+          return templateOptions(api);
         }
         return [];
       }
@@ -209,8 +228,10 @@ export var insertBlockPlugin = function insertBlockPlugin(_ref) {
       // api.getSharedState() will have an outdated reference to editorState on first mount of this component
       // so instead just rely on plugin key as we don't need to be reactive to changes here
       var pluginState = elementBrowserPmKey.getState(state);
-      if (pluginState !== null && pluginState !== void 0 && pluginState.menuBrowserOpen) {
+      if (pluginState !== null && pluginState !== void 0 && pluginState.menuBrowserOpen && editorViewRef.current) {
         return /*#__PURE__*/React.createElement(InsertMenuRail, {
+          editorView: editorViewRef.current,
+          options: options,
           api: api
         });
       }
@@ -246,6 +267,16 @@ function ToolbarInsertBlockWithInjectionApi(_ref3) {
     mediaState = _useSharedPluginState.mediaState,
     typeAheadState = _useSharedPluginState.typeAheadState,
     placeholderTextState = _useSharedPluginState.placeholderTextState;
+  var getEmojiProvider = function getEmojiProvider() {
+    if (fg('platform_editor_get_emoji_provider_from_config')) {
+      if (emojiState !== null && emojiState !== void 0 && emojiState.emojiProvider) {
+        return Promise.resolve(emojiState === null || emojiState === void 0 ? void 0 : emojiState.emojiProvider);
+      }
+    } else {
+      return providers.emojiProvider;
+    }
+  };
+  var emojiProvider = getEmojiProvider();
   return /*#__PURE__*/React.createElement(ToolbarInsertBlock, {
     pluginInjectionApi: pluginInjectionApi,
     buttons: buttons,
@@ -272,8 +303,8 @@ function ToolbarInsertBlockWithInjectionApi(_ref3) {
     availableWrapperBlockTypes: blockTypeState && blockTypeState.availableWrapperBlockTypes,
     linkSupported: !!hyperlinkState,
     linkDisabled: !hyperlinkState || !hyperlinkState.canInsertLink || !!hyperlinkState.activeLinkMark,
-    emojiDisabled: !emojiState || !providers.emojiProvider,
-    emojiProvider: providers.emojiProvider,
+    emojiDisabled: !emojiState || !emojiProvider,
+    emojiProvider: emojiProvider,
     nativeStatusSupported: options.nativeStatusSupported,
     horizontalRuleEnabled: options.horizontalRuleEnabled,
     onInsertBlockType: handleInsertBlockType(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.codeBlock) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.actions.insertCodeBlock, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$p = pluginInjectionApi.panel) === null || _pluginInjectionApi$p === void 0 ? void 0 : _pluginInjectionApi$p.actions.insertPanel, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$b = pluginInjectionApi.blockType) === null || _pluginInjectionApi$b === void 0 ? void 0 : _pluginInjectionApi$b.actions.insertBlockQuote),

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["children"];
 /**
@@ -19,8 +20,9 @@ import { withReactEditorViewOuterListeners as withOuterListeners } from '@atlask
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 import { borderRadius } from '@atlaskit/theme';
 import { N0, N30A, N60A } from '@atlaskit/theme/colors';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 var InsertMenu = function InsertMenu(_ref) {
-  var _pluginInjectionApi$q6, _pluginInjectionApi$q7;
+  var _pluginInjectionApi$q7, _pluginInjectionApi$q8;
   var editorView = _ref.editorView,
     dropdownItems = _ref.dropdownItems,
     showElementBrowserLink = _ref.showElementBrowserLink,
@@ -58,12 +60,19 @@ var InsertMenu = function InsertMenu(_ref) {
   var quickInsertDropdownItems = dropdownItems.map(transform);
   var viewMoreItem = showElementBrowserLink ? quickInsertDropdownItems.pop() : undefined;
   var onInsertItem = useCallback(function (item) {
-    var _pluginInjectionApi$q;
     toggleVisiblity();
     if (!editorView.hasFocus()) {
       editorView.focus();
     }
-    pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q === void 0 || _pluginInjectionApi$q.actions.insertItem(item, INPUT_METHOD.TOOLBAR)(editorView.state, editorView.dispatch);
+    if (editorExperiment('insert-menu-in-right-rail', true)) {
+      var _pluginInjectionApi$q;
+      pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q === void 0 || _pluginInjectionApi$q.actions.insertItem(item,
+      // @ts-expect-error
+      INPUT_METHOD.INSERT_MENU_RIGHT_RAIL)(editorView.state, editorView.dispatch);
+    } else {
+      var _pluginInjectionApi$q2;
+      pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q2 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q2 === void 0 || _pluginInjectionApi$q2.actions.insertItem(item, INPUT_METHOD.TOOLBAR)(editorView.state, editorView.dispatch);
+    }
   }, [editorView, toggleVisiblity, pluginInjectionApi]);
   var getItems = useCallback(function (query, category) {
     var result;
@@ -74,23 +83,35 @@ var InsertMenu = function InsertMenu(_ref) {
      * @see above transform function for more details.
      */
     if (query) {
-      var _pluginInjectionApi$q2, _pluginInjectionApi$q3;
-      result = (_pluginInjectionApi$q2 = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q3 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q3 === void 0 ? void 0 : _pluginInjectionApi$q3.actions.getSuggestions({
+      var _pluginInjectionApi$q3, _pluginInjectionApi$q4;
+      result = (_pluginInjectionApi$q3 = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q4 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q4 === void 0 ? void 0 : _pluginInjectionApi$q4.actions.getSuggestions({
         query: query,
         category: category
-      })) !== null && _pluginInjectionApi$q2 !== void 0 ? _pluginInjectionApi$q2 : [];
+      })) !== null && _pluginInjectionApi$q3 !== void 0 ? _pluginInjectionApi$q3 : [];
     } else {
-      var _pluginInjectionApi$q4, _pluginInjectionApi$q5;
-      var featuredQuickInsertSuggestions = (_pluginInjectionApi$q4 = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q5 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q5 === void 0 ? void 0 : _pluginInjectionApi$q5.actions.getSuggestions({
+      var _pluginInjectionApi$q5, _pluginInjectionApi$q6;
+      var featuredQuickInsertSuggestions = (_pluginInjectionApi$q5 = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q6 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q6 === void 0 ? void 0 : _pluginInjectionApi$q6.actions.getSuggestions({
         category: category,
-        featuredItems: true
-      })) !== null && _pluginInjectionApi$q4 !== void 0 ? _pluginInjectionApi$q4 : [];
-      result = quickInsertDropdownItems.concat(featuredQuickInsertSuggestions);
+        featuredItems: true,
+        // @ts-ignore
+        templateItems: editorExperiment('element-level-templates', true)
+      })) !== null && _pluginInjectionApi$q5 !== void 0 ? _pluginInjectionApi$q5 : [];
+      if (editorExperiment('element-level-templates', true)) {
+        // Make sure template options appear as top 5 items
+        featuredQuickInsertSuggestions.sort(function (a, b) {
+          var _b$priority, _a$priority;
+          return ((_b$priority = b.priority) !== null && _b$priority !== void 0 ? _b$priority : 0) - ((_a$priority = a.priority) !== null && _a$priority !== void 0 ? _a$priority : 0);
+        });
+        var templateItems = featuredQuickInsertSuggestions.splice(0, 5);
+        result = [].concat(_toConsumableArray(templateItems), _toConsumableArray(quickInsertDropdownItems), _toConsumableArray(featuredQuickInsertSuggestions));
+      } else {
+        result = quickInsertDropdownItems.concat(featuredQuickInsertSuggestions);
+      }
     }
     setItemCount(result.length);
     return result;
-  }, [pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q6 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q6 === void 0 ? void 0 : _pluginInjectionApi$q6.actions, quickInsertDropdownItems]);
-  var emptyStateHandler = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q7 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q7 === void 0 || (_pluginInjectionApi$q7 = _pluginInjectionApi$q7.sharedState.currentState()) === null || _pluginInjectionApi$q7 === void 0 ? void 0 : _pluginInjectionApi$q7.emptyStateHandler;
+  }, [pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q7 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q7 === void 0 ? void 0 : _pluginInjectionApi$q7.actions, quickInsertDropdownItems]);
+  var emptyStateHandler = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q8 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q8 === void 0 || (_pluginInjectionApi$q8 = _pluginInjectionApi$q8.sharedState.currentState()) === null || _pluginInjectionApi$q8 === void 0 ? void 0 : _pluginInjectionApi$q8.emptyStateHandler;
   return (
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     jsx("div", {
@@ -139,6 +160,19 @@ var getInsertMenuHeight = function getInsertMenuHeight(_ref3) {
   return 560; // For showing 6 Elements.
 };
 var insertMenuWrapper = function insertMenuWrapper(itemCount) {
+  if (editorExperiment('insert-menu-in-right-rail', true)) {
+    return css({
+      display: 'flex',
+      flexDirection: 'column',
+      width: '310px',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+      height: 'calc(100% - 32px)',
+      margin: "0 -10px",
+      backgroundColor: "".concat("var(--ds-surface-overlay, ".concat(N0, ")")),
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+      borderRadius: "".concat(borderRadius(), "px")
+    });
+  }
   return css({
     display: 'flex',
     flexDirection: 'column',

package/dist/esm/ui/ElementRail/index.js

@@ -1,9 +1,192 @@
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { IconButton } from '@atlaskit/button/new';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { toolbarInsertBlockMessages } from '@atlaskit/editor-common/messages';
+import Heading from '@atlaskit/heading';
+import CrossIcon from '@atlaskit/icon/glyph/cross';
+import { Box, xcss } from '@atlaskit/primitives';
+import { toggleInsertMenuRightRail } from '../../pm-plugins/commands';
+import InsertMenu from '../ElementBrowser/InsertMenu';
+import { useInsertMenuRailItems } from './useInsertMenuRailItems';
+var panelWrapper = xcss({
+  height: '100%'
+});
+var panelContentHeader = xcss({
+  height: '32px',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center'
+});
+
 /**
  * For insert menu in right rail experiment
  * - Clean up ticket ED-24801
  */
 export var InsertMenuRail = function InsertMenuRail(_ref) {
-  var api = _ref.api;
-  return /*#__PURE__*/React.createElement("div", null);
+  var editorView = _ref.editorView,
+    options = _ref.options,
+    api = _ref.api;
+  var dropdownItems = useInsertMenuRailItems(editorView, options, api);
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var onInsert = function onInsert(_ref2) {
+    var _api$core, _api$hyperlink, _api$imageUpload, _api$media, _api$mention, _api$emoji, _api$codeBlock, _api$blockType, _api$panel, _api$taskDecision, _api$taskDecision2, _api$rule, _api$core2, _api$quickInsert, _api$core3, _api$date, _api$placeholderText, _api$layout, _api$core4, _api$status;
+    var item = _ref2.item;
+    var state = editorView.state,
+      dispatch = editorView.dispatch;
+    var inputMethod = INPUT_METHOD.INSERT_MENU_RIGHT_RAIL;
+    if (!api) {
+      return;
+    }
+    if (!editorView.hasFocus()) {
+      editorView.focus();
+    }
+
+    // Below is duplicated from ToolbarInsertBlock/index.tsx - this function is only called
+    // for BlockMenuItem items, which are rendered in the insert menu when no search has been performed.
+    // When a search is performed, the list will be filled by QuickInsertItems, which handle their own insertion.
+    switch (item.value.name) {
+      case 'link':
+        // @ts-expect-error
+        (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$hyperlink = api.hyperlink) === null || _api$hyperlink === void 0 ? void 0 : _api$hyperlink.commands.showLinkToolbar(inputMethod));
+        break;
+      case 'table':
+        // workaround to solve race condition where cursor is not placed correctly inside table
+        queueMicrotask(function () {
+          var _api$table, _api$table$actions$in, _api$table$actions;
+          // @ts-expect-error
+          (_api$table = api.table) === null || _api$table === void 0 || (_api$table$actions$in = (_api$table$actions = _api$table.actions).insertTable) === null || _api$table$actions$in === void 0 || _api$table$actions$in.call(_api$table$actions, {
+            action: ACTION.INSERTED,
+            actionSubject: ACTION_SUBJECT.DOCUMENT,
+            actionSubjectId: ACTION_SUBJECT_ID.TABLE,
+            attributes: {
+              inputMethod: inputMethod
+            },
+            eventType: EVENT_TYPE.TRACK
+          })(state, dispatch);
+        });
+        break;
+      case 'image upload':
+        (_api$imageUpload = api.imageUpload) === null || _api$imageUpload === void 0 || _api$imageUpload.actions.startUpload()(state, dispatch);
+        break;
+      case 'media':
+        var mediaState = (_api$media = api.media) === null || _api$media === void 0 ? void 0 : _api$media.sharedState.currentState();
+        if (mediaState) {
+          var _api$analytics;
+          mediaState.showMediaPicker();
+          // @ts-expect-error
+          (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
+            action: ACTION.OPENED,
+            actionSubject: ACTION_SUBJECT.PICKER,
+            actionSubjectId: ACTION_SUBJECT_ID.PICKER_CLOUD,
+            attributes: {
+              inputMethod: inputMethod
+            },
+            eventType: EVENT_TYPE.UI
+          });
+        }
+        break;
+      case 'mention':
+        var pluginState = (_api$mention = api.mention) === null || _api$mention === void 0 ? void 0 : _api$mention.sharedState.currentState();
+        if (pluginState && pluginState.canInsertMention) {
+          var _api$mention2;
+          // @ts-expect-error
+          (_api$mention2 = api.mention) === null || _api$mention2 === void 0 || (_api$mention2 = _api$mention2.actions) === null || _api$mention2 === void 0 || _api$mention2.openTypeAhead(inputMethod);
+        }
+        break;
+      case 'emoji':
+        // @ts-expect-error
+        (_api$emoji = api.emoji) === null || _api$emoji === void 0 || _api$emoji.actions.openTypeAhead(inputMethod);
+        break;
+      case 'codeblock':
+        (_api$codeBlock = api.codeBlock) === null || _api$codeBlock === void 0 || _api$codeBlock.actions.insertCodeBlock(inputMethod);
+        break;
+      case 'blockquote':
+        // @ts-expect-error
+        (_api$blockType = api.blockType) === null || _api$blockType === void 0 || _api$blockType.actions.insertBlockQuote(inputMethod);
+        break;
+      case 'panel':
+        (_api$panel = api.panel) === null || _api$panel === void 0 || _api$panel.actions.insertPanel(inputMethod);
+        break;
+      case 'action':
+        // @ts-expect-error
+        (_api$taskDecision = api.taskDecision) === null || _api$taskDecision === void 0 || _api$taskDecision.actions.insertTaskDecision('taskList', inputMethod)(state, dispatch);
+        break;
+      case 'decision':
+        // @ts-expect-error
+        (_api$taskDecision2 = api.taskDecision) === null || _api$taskDecision2 === void 0 || _api$taskDecision2.actions.insertTaskDecision('decisionList', inputMethod)(state, dispatch);
+        break;
+      case 'horizontalrule':
+        // @ts-expect-error
+        (_api$rule = api.rule) === null || _api$rule === void 0 || _api$rule.actions.insertHorizontalRule(inputMethod)(state, dispatch);
+        break;
+      case 'macro':
+        (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute((_api$quickInsert = api.quickInsert) === null || _api$quickInsert === void 0 ? void 0 : _api$quickInsert.commands.openElementBrowserModal);
+        break;
+      case 'date':
+        (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute((_api$date = api.date) === null || _api$date === void 0 || (_api$date = _api$date.commands) === null || _api$date === void 0 ? void 0 : _api$date.insertDate({
+          // @ts-expect-error
+          inputMethod: inputMethod
+        }));
+        break;
+      case 'placeholder text':
+        (_api$placeholderText = api.placeholderText) === null || _api$placeholderText === void 0 || _api$placeholderText.actions.showPlaceholderFloatingToolbar(editorView.state, editorView.dispatch);
+        break;
+      case 'layout':
+        // @ts-expect-error
+        (_api$layout = api.layout) === null || _api$layout === void 0 || _api$layout.actions.insertLayoutColumns(inputMethod)(editorView.state, editorView.dispatch);
+        break;
+      case 'status':
+        // @ts-expect-error
+        (_api$core4 = api.core) === null || _api$core4 === void 0 || _api$core4.actions.execute((_api$status = api.status) === null || _api$status === void 0 || (_api$status = _api$status.commands) === null || _api$status === void 0 ? void 0 : _api$status.insertStatus(inputMethod));
+        break;
+
+      // https://product-fabric.atlassian.net/browse/ED-8053
+      // @ts-ignore: OK to fallthrough to default
+      case 'expand':
+        if (options.allowExpand) {
+          var _api$expand;
+          (_api$expand = api.expand) === null || _api$expand === void 0 || _api$expand.actions.insertExpand(state, dispatch);
+          break;
+        }
+
+      // eslint-disable-next-line no-fallthrough
+      default:
+      // leaving this blank for now
+    }
+  };
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: panelWrapper
+  }, /*#__PURE__*/React.createElement(Box, {
+    xcss: panelContentHeader
+  }, /*#__PURE__*/React.createElement(Heading, {
+    size: "small",
+    as: "h2"
+  }, formatMessage(toolbarInsertBlockMessages.insertRightRailTitle)), /*#__PURE__*/React.createElement(IconButton, {
+    appearance: "subtle",
+    testId: "right-rail-insert-menu-close-button",
+    label: formatMessage(toolbarInsertBlockMessages.closeInsertRightRail),
+    icon: CrossIcon,
+    onClick: function onClick() {
+      if (!api) {
+        return;
+      }
+      api.core.actions.execute(function (_ref3) {
+        var _api$contextPanel;
+        var tr = _ref3.tr;
+        toggleInsertMenuRightRail(tr);
+        (_api$contextPanel = api.contextPanel) === null || _api$contextPanel === void 0 || _api$contextPanel.actions.applyChange(tr);
+        return tr;
+      });
+    }
+  })), /*#__PURE__*/React.createElement(InsertMenu, {
+    editorView: editorView,
+    dropdownItems: dropdownItems,
+    onInsert: onInsert,
+    toggleVisiblity: function toggleVisiblity() {},
+    showElementBrowserLink: true,
+    pluginInjectionApi: api
+  }));
 };

package/dist/esm/ui/ElementRail/useInsertMenuRailItems.js

@@ -0,0 +1,56 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useMemo } from 'react';
+import { useIntl } from 'react-intl-next';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { createItems } from '../ToolbarInsertBlock/create-items';
+export var useInsertMenuRailItems = function useInsertMenuRailItems(editorView, options, api) {
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var _useSharedPluginState = useSharedPluginState(api, ['hyperlink', 'date', 'imageUpload', 'mention', 'emoji', 'blockType', 'media', 'typeAhead', 'placeholderText']),
+    dateState = _useSharedPluginState.dateState,
+    hyperlinkState = _useSharedPluginState.hyperlinkState,
+    imageUploadState = _useSharedPluginState.imageUploadState,
+    mentionState = _useSharedPluginState.mentionState,
+    emojiState = _useSharedPluginState.emojiState,
+    blockTypeState = _useSharedPluginState.blockTypeState,
+    mediaState = _useSharedPluginState.mediaState,
+    typeAheadState = _useSharedPluginState.typeAheadState,
+    placeholderTextState = _useSharedPluginState.placeholderTextState;
+  var _useMemo = useMemo(function () {
+      var _ref;
+      return createItems({
+        isTypeAheadAllowed: Boolean(typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.isAllowed),
+        tableSupported: !!editorView.state.schema.nodes.table,
+        tableSelectorSupported: options.tableSelectorSupported && !!editorView.state.schema.nodes.table,
+        mediaUploadsEnabled: (_ref = mediaState && mediaState.allowsUploads) !== null && _ref !== void 0 ? _ref : undefined,
+        mediaSupported: !!mediaState,
+        imageUploadSupported: !!(api !== null && api !== void 0 && api.imageUpload),
+        imageUploadEnabled: imageUploadState === null || imageUploadState === void 0 ? void 0 : imageUploadState.enabled,
+        mentionsSupported: !!(mentionState && mentionState.mentionProvider),
+        mentionsDisabled: !!(mentionState && !mentionState.canInsertMention),
+        actionSupported: !!editorView.state.schema.nodes.taskItem,
+        decisionSupported: !!editorView.state.schema.nodes.decisionItem,
+        linkSupported: !!hyperlinkState,
+        linkDisabled: !hyperlinkState || !hyperlinkState.canInsertLink || !!hyperlinkState.activeLinkMark,
+        emojiDisabled: !emojiState || !emojiState.emojiProvider,
+        nativeStatusSupported: options.nativeStatusSupported,
+        dateEnabled: !!dateState,
+        placeholderTextEnabled: placeholderTextState && placeholderTextState.allowInserting,
+        horizontalRuleEnabled: options.horizontalRuleEnabled,
+        layoutSectionEnabled: Boolean(api === null || api === void 0 ? void 0 : api.layout),
+        expandEnabled: !!options.allowExpand,
+        showElementBrowserLink: options.showElementBrowserLink,
+        emojiProvider: emojiState === null || emojiState === void 0 ? void 0 : emojiState.emojiProvider,
+        availableWrapperBlockTypes: blockTypeState && blockTypeState.availableWrapperBlockTypes,
+        insertMenuItems: options.insertMenuItems,
+        schema: editorView.state.schema,
+        numberOfButtons: 10,
+        formatMessage: formatMessage,
+        isNewMenuEnabled: true
+      });
+    }, [api === null || api === void 0 ? void 0 : api.imageUpload, api === null || api === void 0 ? void 0 : api.layout, blockTypeState, dateState, editorView.state.schema, emojiState, formatMessage, hyperlinkState, imageUploadState === null || imageUploadState === void 0 ? void 0 : imageUploadState.enabled, mediaState, mentionState, options.allowExpand, options.horizontalRuleEnabled, options.insertMenuItems, options.nativeStatusSupported, options.showElementBrowserLink, options.tableSelectorSupported, placeholderTextState, typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.isAllowed]),
+    _useMemo2 = _slicedToArray(_useMemo, 2),
+    _ = _useMemo2[0],
+    dropdownItems = _useMemo2[1];
+  return dropdownItems;
+};

package/dist/esm/ui/templateOptions.js

@@ -1,63 +1,134 @@
 import React from 'react';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import ActionListIcon from '../assets/action-list';
 import ApprovalsTrackerIcon from '../assets/approvals-tracker';
 import DecisionMatrixIcon from '../assets/decision-matrix';
 import DiscussionNotesIcon from '../assets/discussion-notes';
 import InstructionsOutlineIcon from '../assets/instructions-outline';
-export var templateOptions = [{
-  title: 'Discussion notes',
-  description: 'Record discussion points and action items',
-  keywords: ['decisions', 'summary', 'meeting', 'chat', 'debrief', 'track', 'keep track', 'tasks', 'outstanding items', 'owners'],
-  // Place templates right after AI item
-  priority: 99,
-  icon: function icon() {
-    return /*#__PURE__*/React.createElement(DiscussionNotesIcon, null);
-  },
-  action: function action() {
-    return false;
-  }
-}, {
-  title: 'Approvals tracker',
-  description: 'Track reviewer approvals and dates',
-  keywords: ['reviews', 'requests', 'rejected requests', 'review dates', 'timeline', 'checklist', 'sme timeline', 'sme requests', 'sme check', 'table'],
-  priority: 99,
-  icon: function icon() {
-    return /*#__PURE__*/React.createElement(ApprovalsTrackerIcon, null);
-  },
-  action: function action() {
-    return false;
-  }
-}, {
-  title: 'Decision matrix',
-  description: 'Compare options and make recommendations',
-  keywords: ['pros', 'cons', 'recommended', 'rationale', 'evaluation', 'options', 'choice', 'table'],
-  priority: 99,
-  icon: function icon() {
-    return /*#__PURE__*/React.createElement(DecisionMatrixIcon, null);
-  },
-  action: function action() {
-    return false;
-  }
-}, {
-  title: 'List of actions',
-  description: 'Track tasks, assignees and deadlines',
-  keywords: ['checklist', 'check', 'items', 'shopping list', 'jtbd', 'jobs to be done', 'due date', 'progress', 'task', 'tasks', 'prioritization', 'timeline', 'approvals', 'reviewers', 'review date'],
-  priority: 99,
-  icon: function icon() {
-    return /*#__PURE__*/React.createElement(ActionListIcon, null);
-  },
-  action: function action() {
-    return false;
-  }
-}, {
-  title: 'Instructions outline',
-  description: 'Detailed steps for any process',
-  keywords: ['steps', 'manual', 'tasks', 'jobs to be done', 'jtbd', 'how-to', 'guide', 'journey', 'checklist', 'tutorial', 'map', 'brochure', 'columns', 'layout', 'help'],
-  priority: 99,
-  icon: function icon() {
-    return /*#__PURE__*/React.createElement(InstructionsOutlineIcon, null);
-  },
-  action: function action() {
-    return false;
-  }
-}];
+import { actionList, approvalsTracker, decisionMatrix, discussionNotes, instructionsOutline } from './templates';
+var getTemplateInsertionPayload = function getTemplateInsertionPayload(templateType, source) {
+  return {
+    action: ACTION.INSERTED,
+    actionSubject: ACTION_SUBJECT.DOCUMENT,
+    actionSubjectId: 'elementTemplate',
+    attributes: {
+      inputMethod: source !== null && source !== void 0 ? source : INPUT_METHOD.QUICK_INSERT,
+      templateType: templateType
+    },
+    eventType: EVENT_TYPE.TRACK
+  };
+};
+var getTableWidth = function getTableWidth(api) {
+  var _api$table;
+  return api !== null && api !== void 0 && (_api$table = api.table) !== null && _api$table !== void 0 && (_api$table = _api$table.sharedState.currentState()) !== null && _api$table !== void 0 && _api$table.isFullWidthModeEnabled ? 1800 : 760;
+};
+export var templateOptions = function templateOptions(api) {
+  return [{
+    title: 'Discussion notes',
+    // @ts-ignore
+    id: 'discussionNotes',
+    description: 'Record discussion points and action items',
+    keywords: ['decisions', 'summary', 'meeting', 'chat', 'debrief', 'track', 'keep track', 'tasks', 'outstanding items', 'owners'],
+    // Place templates right after AI item
+    priority: 99,
+    icon: function icon() {
+      return /*#__PURE__*/React.createElement(DiscussionNotesIcon, null);
+    },
+    action: function action(insert, state, source) {
+      var _api$analytics;
+      var tr = insert(Fragment.fromJSON(state.schema, discussionNotes(getTableWidth(api))), {
+        // @ts-ignore
+        isTemplate: true
+      });
+      api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent(
+      // @ts-ignore
+      getTemplateInsertionPayload('discussionNotes', source))(tr);
+      return tr;
+    }
+  }, {
+    title: 'Approvals tracker',
+    // @ts-ignore
+    id: 'approvalsTracker',
+    description: 'Track reviewer approvals and dates',
+    keywords: ['reviews', 'requests', 'rejected requests', 'review dates', 'timeline', 'checklist', 'sme timeline', 'sme requests', 'sme check', 'table'],
+    priority: 99,
+    icon: function icon() {
+      return /*#__PURE__*/React.createElement(ApprovalsTrackerIcon, null);
+    },
+    action: function action(insert, state, source) {
+      var _api$analytics2;
+      var tr = insert(Fragment.fromJSON(state.schema, approvalsTracker(getTableWidth(api))), {
+        // @ts-ignore
+        isTemplate: true
+      });
+      api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || _api$analytics2.actions.attachAnalyticsEvent(
+      // @ts-ignore
+      getTemplateInsertionPayload('approvalsTracker', source))(tr);
+      return tr;
+    }
+  }, {
+    title: 'Decision matrix',
+    // @ts-ignore
+    id: 'decisionMatrix',
+    description: 'Compare options and make recommendations',
+    keywords: ['pros', 'cons', 'recommended', 'rationale', 'evaluation', 'options', 'choice', 'table'],
+    priority: 99,
+    icon: function icon() {
+      return /*#__PURE__*/React.createElement(DecisionMatrixIcon, null);
+    },
+    action: function action(insert, state, source) {
+      var _api$analytics3;
+      var tr = insert(Fragment.fromJSON(state.schema, decisionMatrix(getTableWidth(api))), {
+        // @ts-ignore
+        isTemplate: true
+      });
+      api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 || _api$analytics3.actions.attachAnalyticsEvent(
+      // @ts-ignore
+      getTemplateInsertionPayload('decisionMatrix', source))(tr);
+      return tr;
+    }
+  }, {
+    title: 'List of actions',
+    // @ts-ignore
+    id: 'actionList',
+    description: 'Track tasks, assignees and deadlines',
+    keywords: ['checklist', 'check', 'items', 'shopping list', 'jtbd', 'jobs to be done', 'due date', 'progress', 'task', 'tasks', 'prioritization', 'timeline', 'approvals', 'reviewers', 'review date'],
+    priority: 99,
+    icon: function icon() {
+      return /*#__PURE__*/React.createElement(ActionListIcon, null);
+    },
+    action: function action(insert, state, source) {
+      var _api$analytics4;
+      // @ts-ignore
+      var tr = insert(Fragment.fromJSON(state.schema, actionList), {
+        isTemplate: true
+      });
+      api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 || _api$analytics4.actions.attachAnalyticsEvent(
+      // @ts-ignore
+      getTemplateInsertionPayload('actionList', source))(tr);
+      return tr;
+    }
+  }, {
+    title: 'Instructions outline',
+    // @ts-ignore
+    id: 'instructionsOutline',
+    description: 'Detailed steps for any process',
+    keywords: ['steps', 'manual', 'tasks', 'jobs to be done', 'jtbd', 'how-to', 'guide', 'journey', 'checklist', 'tutorial', 'map', 'brochure', 'columns', 'layout', 'help'],
+    priority: 99,
+    icon: function icon() {
+      return /*#__PURE__*/React.createElement(InstructionsOutlineIcon, null);
+    },
+    action: function action(insert, state, source) {
+      var _api$analytics5;
+      // @ts-ignore
+      var tr = insert(Fragment.fromJSON(state.schema, instructionsOutline), {
+        isTemplate: true
+      });
+      api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 || _api$analytics5.actions.attachAnalyticsEvent(
+      // @ts-ignore
+      getTemplateInsertionPayload('instructionsOutline', source))(tr);
+      return tr;
+    }
+  }];
+};