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

package/dist/es2019/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';
@@ -53,6 +55,9 @@ export const insertBlockPlugin = ({
   const toggleDropdownMenuOptionsRef = {
     current: null
   };
+  const editorViewRef = {
+    current: null
+  };
   const registerToggleDropdownMenuOptions = cb => {
     toggleDropdownMenuOptionsRef.current = cb;
     return () => {
@@ -119,6 +124,17 @@ export const insertBlockPlugin = ({
       return [{
         name: 'elementBrowserPmPlugin',
         plugin: () => elementBrowserPmPlugin()
+      }, {
+        name: 'elementBrowserEditorViewRef',
+        plugin: () => {
+          return new SafePlugin({
+            view: editorView => {
+              // Workaround - need reference to editorView for contextPanel component
+              editorViewRef.current = editorView;
+              return {};
+            }
+          });
+        }
       }];
     },
     pluginsOptions: {
@@ -188,10 +204,13 @@ export const insertBlockPlugin = ({
       // 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: () => {
-        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 [];
       }
@@ -210,8 +229,10 @@ export const insertBlockPlugin = ({
       // 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
       const 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
         });
       }
@@ -249,6 +270,16 @@ function ToolbarInsertBlockWithInjectionApi({
     typeAheadState,
     placeholderTextState
   } = useSharedPluginState(pluginInjectionApi, ['hyperlink', 'date', 'imageUpload', 'mention', 'emoji', 'blockType', 'media', 'typeAhead', 'placeholderText']);
+  const 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;
+    }
+  };
+  const emojiProvider = getEmojiProvider();
   return /*#__PURE__*/React.createElement(ToolbarInsertBlock, {
     pluginInjectionApi: pluginInjectionApi,
     buttons: buttons,
@@ -275,8 +306,8 @@ function ToolbarInsertBlockWithInjectionApi({
     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 ? void 0 : (_pluginInjectionApi$c = pluginInjectionApi.codeBlock) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.actions.insertCodeBlock, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$p = pluginInjectionApi.panel) === null || _pluginInjectionApi$p === void 0 ? void 0 : _pluginInjectionApi$p.actions.insertPanel, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$b = pluginInjectionApi.blockType) === null || _pluginInjectionApi$b === void 0 ? void 0 : _pluginInjectionApi$b.actions.insertBlockQuote),

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

@@ -16,6 +16,7 @@ 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';
 const InsertMenu = ({
   editorView,
   dropdownItems,
@@ -24,7 +25,7 @@ const InsertMenu = ({
   toggleVisiblity,
   pluginInjectionApi
 }) => {
-  var _pluginInjectionApi$q6, _pluginInjectionApi$q7, _pluginInjectionApi$q8;
+  var _pluginInjectionApi$q7, _pluginInjectionApi$q8, _pluginInjectionApi$q9;
   const [itemCount, setItemCount] = useState(0);
   const transform = useCallback(item => ({
     title: item.content,
@@ -47,12 +48,19 @@ const InsertMenu = ({
   const quickInsertDropdownItems = dropdownItems.map(transform);
   const viewMoreItem = showElementBrowserLink ? quickInsertDropdownItems.pop() : undefined;
   const onInsertItem = useCallback(item => {
-    var _pluginInjectionApi$q;
     toggleVisiblity();
     if (!editorView.hasFocus()) {
       editorView.focus();
     }
-    pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$q = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q === void 0 ? 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 ? void 0 : (_pluginInjectionApi$q = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q === void 0 ? 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 ? void 0 : (_pluginInjectionApi$q2 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q2 === void 0 ? void 0 : _pluginInjectionApi$q2.actions.insertItem(item, INPUT_METHOD.TOOLBAR)(editorView.state, editorView.dispatch);
+    }
   }, [editorView, toggleVisiblity, pluginInjectionApi]);
   const getItems = useCallback((query, category) => {
     let result;
@@ -63,23 +71,35 @@ const InsertMenu = ({
      * @see above transform function for more details.
      */
     if (query) {
-      var _pluginInjectionApi$q2, _pluginInjectionApi$q3;
-      result = (_pluginInjectionApi$q2 = pluginInjectionApi === null || pluginInjectionApi === void 0 ? 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 ? void 0 : (_pluginInjectionApi$q4 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q4 === void 0 ? void 0 : _pluginInjectionApi$q4.actions.getSuggestions({
         query,
         category
-      })) !== null && _pluginInjectionApi$q2 !== void 0 ? _pluginInjectionApi$q2 : [];
+      })) !== null && _pluginInjectionApi$q3 !== void 0 ? _pluginInjectionApi$q3 : [];
     } else {
-      var _pluginInjectionApi$q4, _pluginInjectionApi$q5;
-      const featuredQuickInsertSuggestions = (_pluginInjectionApi$q4 = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$q5 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q5 === void 0 ? void 0 : _pluginInjectionApi$q5.actions.getSuggestions({
+      var _pluginInjectionApi$q5, _pluginInjectionApi$q6;
+      const featuredQuickInsertSuggestions = (_pluginInjectionApi$q5 = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$q6 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q6 === void 0 ? void 0 : _pluginInjectionApi$q6.actions.getSuggestions({
         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((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);
+        });
+        const templateItems = featuredQuickInsertSuggestions.splice(0, 5);
+        result = [...templateItems, ...quickInsertDropdownItems, ...featuredQuickInsertSuggestions];
+      } else {
+        result = quickInsertDropdownItems.concat(featuredQuickInsertSuggestions);
+      }
     }
     setItemCount(result.length);
     return result;
-  }, [pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$q6 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q6 === void 0 ? void 0 : _pluginInjectionApi$q6.actions, quickInsertDropdownItems]);
-  const emptyStateHandler = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$q7 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q7 === void 0 ? void 0 : (_pluginInjectionApi$q8 = _pluginInjectionApi$q7.sharedState.currentState()) === null || _pluginInjectionApi$q8 === void 0 ? void 0 : _pluginInjectionApi$q8.emptyStateHandler;
+  }, [pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$q7 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q7 === void 0 ? void 0 : _pluginInjectionApi$q7.actions, quickInsertDropdownItems]);
+  const emptyStateHandler = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$q8 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q8 === void 0 ? void 0 : (_pluginInjectionApi$q9 = _pluginInjectionApi$q8.sharedState.currentState()) === null || _pluginInjectionApi$q9 === void 0 ? void 0 : _pluginInjectionApi$q9.emptyStateHandler;
   return (
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     jsx("div", {
@@ -129,21 +149,36 @@ const getInsertMenuHeight = ({
   }
   return 560; // For showing 6 Elements.
 };
-const insertMenuWrapper = itemCount => css({
-  display: 'flex',
-  flexDirection: 'column',
-  width: '320px',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  height: `${getInsertMenuHeight({
-    itemCount
-  })}px`,
-  backgroundColor: `${`var(--ds-surface-overlay, ${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: `${borderRadius()}px`,
-  boxShadow: `${`var(--ds-shadow-overlay, ${`0 0 0 1px ${N30A},
+const 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: `${`var(--ds-surface-overlay, ${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: `${borderRadius()}px`
+    });
+  }
+  return css({
+    display: 'flex',
+    flexDirection: 'column',
+    width: '320px',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    height: `${getInsertMenuHeight({
+      itemCount
+    })}px`,
+    backgroundColor: `${`var(--ds-surface-overlay, ${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: `${borderRadius()}px`,
+    boxShadow: `${`var(--ds-shadow-overlay, ${`0 0 0 1px ${N30A},
     0 2px 1px ${N30A},
     0 0 20px -6px ${N60A}`})`}`
-});
+  });
+};
 const flexWrapperStyles = css({
   display: 'flex',
   flex: 1,

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

@@ -1,10 +1,198 @@
+// 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';
+const panelWrapper = xcss({
+  height: '100%'
+});
+const panelContentHeader = xcss({
+  height: '32px',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center'
+});
+
 /**
  * For insert menu in right rail experiment
  * - Clean up ticket ED-24801
  */
 export const InsertMenuRail = ({
+  editorView,
+  options,
   api
 }) => {
-  return /*#__PURE__*/React.createElement("div", null);
+  const dropdownItems = useInsertMenuRailItems(editorView, options, api);
+  const {
+    formatMessage
+  } = useIntl();
+  const onInsert = ({
+    item
+  }) => {
+    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$date$commands, _api$placeholderText, _api$layout, _api$core4, _api$status, _api$status$commands;
+    const {
+      state,
+      dispatch
+    } = editorView;
+    let 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 ? void 0 : _api$core.actions.execute(api === null || api === void 0 ? 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(() => {
+          var _api$table, _api$table$actions$in, _api$table$actions;
+          // @ts-expect-error
+          (_api$table = api.table) === null || _api$table === void 0 ? void 0 : (_api$table$actions$in = (_api$table$actions = _api$table.actions).insertTable) === null || _api$table$actions$in === void 0 ? void 0 : _api$table$actions$in.call(_api$table$actions, {
+            action: ACTION.INSERTED,
+            actionSubject: ACTION_SUBJECT.DOCUMENT,
+            actionSubjectId: ACTION_SUBJECT_ID.TABLE,
+            attributes: {
+              inputMethod
+            },
+            eventType: EVENT_TYPE.TRACK
+          })(state, dispatch);
+        });
+        break;
+      case 'image upload':
+        (_api$imageUpload = api.imageUpload) === null || _api$imageUpload === void 0 ? void 0 : _api$imageUpload.actions.startUpload()(state, dispatch);
+        break;
+      case 'media':
+        const 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 ? void 0 : _api$analytics.actions.attachAnalyticsEvent({
+            action: ACTION.OPENED,
+            actionSubject: ACTION_SUBJECT.PICKER,
+            actionSubjectId: ACTION_SUBJECT_ID.PICKER_CLOUD,
+            attributes: {
+              inputMethod
+            },
+            eventType: EVENT_TYPE.UI
+          });
+        }
+        break;
+      case 'mention':
+        const pluginState = (_api$mention = api.mention) === null || _api$mention === void 0 ? void 0 : _api$mention.sharedState.currentState();
+        if (pluginState && pluginState.canInsertMention) {
+          var _api$mention2, _api$mention2$actions;
+          // @ts-expect-error
+          (_api$mention2 = api.mention) === null || _api$mention2 === void 0 ? void 0 : (_api$mention2$actions = _api$mention2.actions) === null || _api$mention2$actions === void 0 ? void 0 : _api$mention2$actions.openTypeAhead(inputMethod);
+        }
+        break;
+      case 'emoji':
+        // @ts-expect-error
+        (_api$emoji = api.emoji) === null || _api$emoji === void 0 ? void 0 : _api$emoji.actions.openTypeAhead(inputMethod);
+        break;
+      case 'codeblock':
+        (_api$codeBlock = api.codeBlock) === null || _api$codeBlock === void 0 ? void 0 : _api$codeBlock.actions.insertCodeBlock(inputMethod);
+        break;
+      case 'blockquote':
+        // @ts-expect-error
+        (_api$blockType = api.blockType) === null || _api$blockType === void 0 ? void 0 : _api$blockType.actions.insertBlockQuote(inputMethod);
+        break;
+      case 'panel':
+        (_api$panel = api.panel) === null || _api$panel === void 0 ? void 0 : _api$panel.actions.insertPanel(inputMethod);
+        break;
+      case 'action':
+        // @ts-expect-error
+        (_api$taskDecision = api.taskDecision) === null || _api$taskDecision === void 0 ? 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 ? 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 ? void 0 : _api$rule.actions.insertHorizontalRule(inputMethod)(state, dispatch);
+        break;
+      case 'macro':
+        (_api$core2 = api.core) === null || _api$core2 === void 0 ? 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 ? void 0 : _api$core3.actions.execute((_api$date = api.date) === null || _api$date === void 0 ? void 0 : (_api$date$commands = _api$date.commands) === null || _api$date$commands === void 0 ? void 0 : _api$date$commands.insertDate({
+          // @ts-expect-error
+          inputMethod
+        }));
+        break;
+      case 'placeholder text':
+        (_api$placeholderText = api.placeholderText) === null || _api$placeholderText === void 0 ? 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 ? 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 ? void 0 : _api$core4.actions.execute((_api$status = api.status) === null || _api$status === void 0 ? void 0 : (_api$status$commands = _api$status.commands) === null || _api$status$commands === void 0 ? void 0 : _api$status$commands.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 ? 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: () => {
+      if (!api) {
+        return;
+      }
+      api.core.actions.execute(({
+        tr
+      }) => {
+        var _api$contextPanel;
+        toggleInsertMenuRightRail(tr);
+        (_api$contextPanel = api.contextPanel) === null || _api$contextPanel === void 0 ? void 0 : _api$contextPanel.actions.applyChange(tr);
+        return tr;
+      });
+    }
+  })), /*#__PURE__*/React.createElement(InsertMenu, {
+    editorView: editorView,
+    dropdownItems: dropdownItems,
+    onInsert: onInsert,
+    toggleVisiblity: () => {},
+    showElementBrowserLink: true,
+    pluginInjectionApi: api
+  }));
 };

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

@@ -0,0 +1,54 @@
+import { useMemo } from 'react';
+import { useIntl } from 'react-intl-next';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { createItems } from '../ToolbarInsertBlock/create-items';
+export const useInsertMenuRailItems = (editorView, options, api) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const {
+    dateState,
+    hyperlinkState,
+    imageUploadState,
+    mentionState,
+    emojiState,
+    blockTypeState,
+    mediaState,
+    typeAheadState,
+    placeholderTextState
+  } = useSharedPluginState(api, ['hyperlink', 'date', 'imageUpload', 'mention', 'emoji', 'blockType', 'media', 'typeAhead', 'placeholderText']);
+  const [_, dropdownItems] = useMemo(() => {
+    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,
+      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]);
+  return dropdownItems;
+};

package/dist/es2019/ui/templateOptions.js

@@ -1,53 +1,120 @@
 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 const templateOptions = [{
+import { actionList, approvalsTracker, decisionMatrix, discussionNotes, instructionsOutline } from './templates';
+const getTemplateInsertionPayload = (templateType, source) => ({
+  action: ACTION.INSERTED,
+  actionSubject: ACTION_SUBJECT.DOCUMENT,
+  actionSubjectId: 'elementTemplate',
+  attributes: {
+    inputMethod: source !== null && source !== void 0 ? source : INPUT_METHOD.QUICK_INSERT,
+    templateType
+  },
+  eventType: EVENT_TYPE.TRACK
+});
+const getTableWidth = api => {
+  var _api$table, _api$table$sharedStat;
+  return api !== null && api !== void 0 && (_api$table = api.table) !== null && _api$table !== void 0 && (_api$table$sharedStat = _api$table.sharedState.currentState()) !== null && _api$table$sharedStat !== void 0 && _api$table$sharedStat.isFullWidthModeEnabled ? 1800 : 760;
+};
+export const templateOptions = api => [{
   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: () => /*#__PURE__*/React.createElement(DiscussionNotesIcon, null),
-  action: () => {
-    return false;
+  action: (insert, state, source) => {
+    var _api$analytics;
+    const tr = insert(Fragment.fromJSON(state.schema, discussionNotes(getTableWidth(api))), {
+      // @ts-ignore
+      isTemplate: true
+    });
+    api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? 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: () => /*#__PURE__*/React.createElement(ApprovalsTrackerIcon, null),
-  action: () => {
-    return false;
+  action: (insert, state, source) => {
+    var _api$analytics2;
+    const tr = insert(Fragment.fromJSON(state.schema, approvalsTracker(getTableWidth(api))), {
+      // @ts-ignore
+      isTemplate: true
+    });
+    api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? 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: () => /*#__PURE__*/React.createElement(DecisionMatrixIcon, null),
-  action: () => {
-    return false;
+  action: (insert, state, source) => {
+    var _api$analytics3;
+    const tr = insert(Fragment.fromJSON(state.schema, decisionMatrix(getTableWidth(api))), {
+      // @ts-ignore
+      isTemplate: true
+    });
+    api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? 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: () => /*#__PURE__*/React.createElement(ActionListIcon, null),
-  action: () => {
-    return false;
+  action: (insert, state, source) => {
+    var _api$analytics4;
+    // @ts-ignore
+    const tr = insert(Fragment.fromJSON(state.schema, actionList), {
+      isTemplate: true
+    });
+    api === null || api === void 0 ? void 0 : (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? 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: () => /*#__PURE__*/React.createElement(InstructionsOutlineIcon, null),
-  action: () => {
-    return false;
+  action: (insert, state, source) => {
+    var _api$analytics5;
+    // @ts-ignore
+    const tr = insert(Fragment.fromJSON(state.schema, instructionsOutline), {
+      isTemplate: true
+    });
+    api === null || api === void 0 ? void 0 : (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions.attachAnalyticsEvent(
+    // @ts-ignore
+    getTemplateInsertionPayload('instructionsOutline', source))(tr);
+    return tr;
   }
 }];