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

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @atlaskit/editor-plugin-insert-block
 
+## 1.14.0
+
+### Minor Changes
+
+- [#138136](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/138136)
+  [`35938ecf46ba7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/35938ecf46ba7) -
+  [ED-24755] Implement insert functionality of element templates and fire document inserted event
+  with template IDs
+
+### Patch Changes
+
+- [#138270](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/138270)
+  [`0acb3673d32d9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0acb3673d32d9) -
+  Add insert menu to right rail for experiment
+- Updated dependencies
+
+## 1.13.0
+
+### Minor Changes
+
+- [#136891](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/136891)
+  [`388780c6348e9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/388780c6348e9) -
+  Pass emoji provider via preset
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.12.0
 
 ### Minor Changes

package/dist/cjs/plugin.js

@@ -12,9 +12,11 @@ var _hooks = require("@atlaskit/editor-common/hooks");
 var _insert = require("@atlaskit/editor-common/insert");
 var _messages = require("@atlaskit/editor-common/messages");
 var _providerFactory = require("@atlaskit/editor-common/provider-factory");
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _types = require("@atlaskit/editor-common/types");
 var _utils = require("@atlaskit/editor-common/utils");
 var _consts = require("@atlaskit/editor-plugin-block-type/consts");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _switch = _interopRequireDefault(require("./assets/switch"));
 var _elementBrowser = require("./pm-plugins/elementBrowser");
@@ -65,6 +67,9 @@ var insertBlockPlugin = exports.insertBlockPlugin = function insertBlockPlugin(_
   var toggleDropdownMenuOptionsRef = {
     current: null
   };
+  var editorViewRef = {
+    current: null
+  };
   var registerToggleDropdownMenuOptions = function registerToggleDropdownMenuOptions(cb) {
     toggleDropdownMenuOptionsRef.current = cb;
     return function () {
@@ -132,6 +137,17 @@ var insertBlockPlugin = exports.insertBlockPlugin = function insertBlockPlugin(_
         plugin: function plugin() {
           return (0, _elementBrowser.elementBrowserPmPlugin)();
         }
+      }, {
+        name: 'elementBrowserEditorViewRef',
+        plugin: function plugin() {
+          return new _safePlugin.SafePlugin({
+            view: function view(editorView) {
+              // Workaround - need reference to editorView for contextPanel component
+              editorViewRef.current = editorView;
+              return {};
+            }
+          });
+        }
       }];
     },
     pluginsOptions: {
@@ -197,10 +213,13 @@ var insertBlockPlugin = exports.insertBlockPlugin = function 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: function quickInsert() {
-        if ((0, _experiments.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 : '') && (0, _experiments.editorExperiment)('element-level-templates', true, {
           exposure: true
         })) {
-          return _templateOptions.templateOptions;
+          return (0, _templateOptions.templateOptions)(api);
         }
         return [];
       }
@@ -219,8 +238,10 @@ var insertBlockPlugin = exports.insertBlockPlugin = function 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
       var pluginState = _elementBrowser.elementBrowserPmKey.getState(state);
-      if (pluginState !== null && pluginState !== void 0 && pluginState.menuBrowserOpen) {
+      if (pluginState !== null && pluginState !== void 0 && pluginState.menuBrowserOpen && editorViewRef.current) {
         return /*#__PURE__*/_react.default.createElement(_ElementRail.InsertMenuRail, {
+          editorView: editorViewRef.current,
+          options: options,
           api: api
         });
       }
@@ -256,6 +277,16 @@ function ToolbarInsertBlockWithInjectionApi(_ref3) {
     mediaState = _useSharedPluginState.mediaState,
     typeAheadState = _useSharedPluginState.typeAheadState,
     placeholderTextState = _useSharedPluginState.placeholderTextState;
+  var getEmojiProvider = function getEmojiProvider() {
+    if ((0, _platformFeatureFlags.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.default.createElement(_ToolbarInsertBlock.default, {
     pluginInjectionApi: pluginInjectionApi,
     buttons: buttons,
@@ -282,8 +313,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/cjs/ui/ElementBrowser/InsertMenu.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
@@ -16,6 +17,7 @@ var _quickInsert = require("@atlaskit/editor-common/quick-insert");
 var _uiReact = require("@atlaskit/editor-common/ui-react");
 var _theme = require("@atlaskit/theme");
 var _colors = require("@atlaskit/theme/colors");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _excluded = ["children"];
 /**
  * @jsxRuntime classic
@@ -25,7 +27,7 @@ var _excluded = ["children"];
 // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 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,
@@ -63,12 +65,19 @@ var InsertMenu = function InsertMenu(_ref) {
   var quickInsertDropdownItems = dropdownItems.map(transform);
   var viewMoreItem = showElementBrowserLink ? quickInsertDropdownItems.pop() : undefined;
   var onInsertItem = (0, _react.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, _analytics.INPUT_METHOD.TOOLBAR)(editorView.state, editorView.dispatch);
+    if ((0, _experiments.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
+      _analytics.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, _analytics.INPUT_METHOD.TOOLBAR)(editorView.state, editorView.dispatch);
+    }
   }, [editorView, toggleVisiblity, pluginInjectionApi]);
   var getItems = (0, _react.useCallback)(function (query, category) {
     var result;
@@ -79,23 +88,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: (0, _experiments.editorExperiment)('element-level-templates', true)
+      })) !== null && _pluginInjectionApi$q5 !== void 0 ? _pluginInjectionApi$q5 : [];
+      if ((0, _experiments.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((0, _toConsumableArray2.default)(templateItems), (0, _toConsumableArray2.default)(quickInsertDropdownItems), (0, _toConsumableArray2.default)(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
     (0, _react2.jsx)("div", {
@@ -144,6 +165,19 @@ var getInsertMenuHeight = function getInsertMenuHeight(_ref3) {
   return 560; // For showing 6 Elements.
 };
 var insertMenuWrapper = function insertMenuWrapper(itemCount) {
+  if ((0, _experiments.editorExperiment)('insert-menu-in-right-rail', true)) {
+    return (0, _react2.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(_colors.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((0, _theme.borderRadius)(), "px")
+    });
+  }
   return (0, _react2.css)({
     display: 'flex',
     flexDirection: 'column',

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

@@ -6,11 +6,195 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.InsertMenuRail = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _new = require("@atlaskit/button/new");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _messages = require("@atlaskit/editor-common/messages");
+var _heading = _interopRequireDefault(require("@atlaskit/heading"));
+var _cross = _interopRequireDefault(require("@atlaskit/icon/glyph/cross"));
+var _primitives = require("@atlaskit/primitives");
+var _commands = require("../../pm-plugins/commands");
+var _InsertMenu = _interopRequireDefault(require("../ElementBrowser/InsertMenu"));
+var _useInsertMenuRailItems = require("./useInsertMenuRailItems");
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var panelWrapper = (0, _primitives.xcss)({
+  height: '100%'
+});
+var panelContentHeader = (0, _primitives.xcss)({
+  height: '32px',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center'
+});
+
 /**
  * For insert menu in right rail experiment
  * - Clean up ticket ED-24801
  */
 var InsertMenuRail = exports.InsertMenuRail = function InsertMenuRail(_ref) {
-  var api = _ref.api;
-  return /*#__PURE__*/_react.default.createElement("div", null);
+  var editorView = _ref.editorView,
+    options = _ref.options,
+    api = _ref.api;
+  var dropdownItems = (0, _useInsertMenuRailItems.useInsertMenuRailItems)(editorView, options, api);
+  var _useIntl = (0, _reactIntlNext.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 = _analytics.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: _analytics.ACTION.INSERTED,
+            actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
+            actionSubjectId: _analytics.ACTION_SUBJECT_ID.TABLE,
+            attributes: {
+              inputMethod: inputMethod
+            },
+            eventType: _analytics.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: _analytics.ACTION.OPENED,
+            actionSubject: _analytics.ACTION_SUBJECT.PICKER,
+            actionSubjectId: _analytics.ACTION_SUBJECT_ID.PICKER_CLOUD,
+            attributes: {
+              inputMethod: inputMethod
+            },
+            eventType: _analytics.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.default.createElement(_primitives.Box, {
+    xcss: panelWrapper
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    xcss: panelContentHeader
+  }, /*#__PURE__*/_react.default.createElement(_heading.default, {
+    size: "small",
+    as: "h2"
+  }, formatMessage(_messages.toolbarInsertBlockMessages.insertRightRailTitle)), /*#__PURE__*/_react.default.createElement(_new.IconButton, {
+    appearance: "subtle",
+    testId: "right-rail-insert-menu-close-button",
+    label: formatMessage(_messages.toolbarInsertBlockMessages.closeInsertRightRail),
+    icon: _cross.default,
+    onClick: function onClick() {
+      if (!api) {
+        return;
+      }
+      api.core.actions.execute(function (_ref3) {
+        var _api$contextPanel;
+        var tr = _ref3.tr;
+        (0, _commands.toggleInsertMenuRightRail)(tr);
+        (_api$contextPanel = api.contextPanel) === null || _api$contextPanel === void 0 || _api$contextPanel.actions.applyChange(tr);
+        return tr;
+      });
+    }
+  })), /*#__PURE__*/_react.default.createElement(_InsertMenu.default, {
+    editorView: editorView,
+    dropdownItems: dropdownItems,
+    onInsert: onInsert,
+    toggleVisiblity: function toggleVisiblity() {},
+    showElementBrowserLink: true,
+    pluginInjectionApi: api
+  }));
 };

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

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useInsertMenuRailItems = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _reactIntlNext = require("react-intl-next");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _createItems = require("../ToolbarInsertBlock/create-items");
+var useInsertMenuRailItems = exports.useInsertMenuRailItems = function useInsertMenuRailItems(editorView, options, api) {
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var _useSharedPluginState = (0, _hooks.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 = (0, _react.useMemo)(function () {
+      var _ref;
+      return (0, _createItems.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 = (0, _slicedToArray2.default)(_useMemo, 2),
+    _ = _useMemo2[0],
+    dropdownItems = _useMemo2[1];
+  return dropdownItems;
+};