@atlaskit/editor-plugin-panel 15.0.2 → 15.0.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-panel
 
+## 15.0.3
+
+### Patch Changes
+
+- [`7087f393ec725`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7087f393ec725) -
+  Add the categorized registered Quick Insert browse experience with representative native elements
+- Updated dependencies
+
 ## 15.0.2
 
 ### Patch Changes

package/dist/cjs/panelPlugin.js

@@ -9,19 +9,18 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireDefault(require("react"));
 var _adfSchema = require("@atlaskit/adf-schema");
-var _analytics = require("@atlaskit/editor-common/analytics");
 var _blockMenu = require("@atlaskit/editor-common/block-menu");
-var _insert = require("@atlaskit/editor-common/insert");
 var _messages = require("@atlaskit/editor-common/messages");
 var _quickInsert = require("@atlaskit/editor-common/quick-insert");
-var _utils = require("@atlaskit/editor-common/utils");
-var _nodeTypeUtils = require("@atlaskit/editor-common/utils/node-type-utils");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _createPanelAction = require("./pm-plugins/commands/create-panel-action");
 var _keymaps = _interopRequireDefault(require("./pm-plugins/keymaps"));
 var _main = require("./pm-plugins/main");
 var _panelBlockMenuItem = require("./ui/panelBlockMenuItem");
+var _getPanelQuickInsertComponents = require("./ui/quick-insert/getPanelQuickInsertComponents");
 var _toolbar = require("./ui/toolbar");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -51,6 +50,15 @@ var panelPlugin = function panelPlugin(_ref) {
       }
     }]);
   }
+  var isRegisteredSlashCommandEnabled = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_slash_command');
+  if (isRegisteredSlashCommandEnabled) {
+    var _api$uiControlRegistr;
+    api === null || api === void 0 || (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 || _api$uiControlRegistr.actions.register((0, _getPanelQuickInsertComponents.getPanelQuickInsertComponents)({
+      allowCustomPanel: allowCustomPanel,
+      allowCustomPanelEdit: allowCustomPanelEdit,
+      api: api
+    }));
+  }
   return {
     name: 'panel',
     nodes: function nodes() {
@@ -97,7 +105,7 @@ var panelPlugin = function panelPlugin(_ref) {
     actions: {
       insertPanel: function insertPanel(inputMethod) {
         return function (state, dispatch) {
-          var tr = createPanelAction({
+          var tr = (0, _createPanelAction.createPanelAction)({
             state: state,
             attributes: {
               panelType: _adfSchema.PanelType.INFO
@@ -115,7 +123,7 @@ var panelPlugin = function panelPlugin(_ref) {
         };
       }
     },
-    pluginsOptions: {
+    pluginsOptions: _objectSpread(_objectSpread({}, isRegisteredSlashCommandEnabled ? {} : {
       quickInsert: function quickInsert(_ref3) {
         var formatMessage = _ref3.formatMessage;
         var quickInsertOptions = [{
@@ -128,7 +136,7 @@ var panelPlugin = function panelPlugin(_ref) {
             return /*#__PURE__*/_react.default.createElement(_quickInsert.IconPanel, null);
           },
           action: function action(typeAheadInsert, state) {
-            return createPanelAction({
+            return (0, _createPanelAction.createPanelAction)({
               state: state,
               attributes: {
                 panelType: _adfSchema.PanelType.INFO
@@ -146,7 +154,7 @@ var panelPlugin = function panelPlugin(_ref) {
             return /*#__PURE__*/_react.default.createElement(_quickInsert.IconPanelNote, null);
           },
           action: function action(typeAheadInsert, state) {
-            return createPanelAction({
+            return (0, _createPanelAction.createPanelAction)({
               state: state,
               attributes: {
                 panelType: _adfSchema.PanelType.NOTE
@@ -165,7 +173,7 @@ var panelPlugin = function panelPlugin(_ref) {
             return /*#__PURE__*/_react.default.createElement(_quickInsert.IconPanelSuccess, null);
           },
           action: function action(typeAheadInsert, state) {
-            return createPanelAction({
+            return (0, _createPanelAction.createPanelAction)({
               state: state,
               attributes: {
                 panelType: _adfSchema.PanelType.SUCCESS
@@ -183,7 +191,7 @@ var panelPlugin = function panelPlugin(_ref) {
             return /*#__PURE__*/_react.default.createElement(_quickInsert.IconPanelWarning, null);
           },
           action: function action(typeAheadInsert, state) {
-            return createPanelAction({
+            return (0, _createPanelAction.createPanelAction)({
               state: state,
               attributes: {
                 panelType: _adfSchema.PanelType.WARNING
@@ -201,7 +209,7 @@ var panelPlugin = function panelPlugin(_ref) {
             return /*#__PURE__*/_react.default.createElement(_quickInsert.IconPanelError, null);
           },
           action: function action(typeAheadInsert, state) {
-            return createPanelAction({
+            return (0, _createPanelAction.createPanelAction)({
               state: state,
               attributes: {
                 panelType: _adfSchema.PanelType.ERROR
@@ -221,7 +229,7 @@ var panelPlugin = function panelPlugin(_ref) {
               return /*#__PURE__*/_react.default.createElement(_quickInsert.IconCustomPanel, null);
             },
             action: function action(typeAheadInsert, state) {
-              return createPanelAction({
+              return (0, _createPanelAction.createPanelAction)({
                 state: state,
                 attributes: {
                   panelType: _adfSchema.PanelType.CUSTOM,
@@ -241,72 +249,15 @@ var panelPlugin = function panelPlugin(_ref) {
           });
         }
         return quickInsertOptions;
-      },
+      }
+    }), {}, {
       floatingToolbar: function floatingToolbar(state, intl, providerFactory) {
         return (0, _toolbar.getToolbarConfig)(state, intl, {
           allowCustomPanel: allowCustomPanel,
           allowCustomPanelEdit: allowCustomPanelEdit
         }, providerFactory, api);
       }
-    }
+    })
   };
 };
-
-/**
- * Creates panel action and wrap selection transaction with analytics for the panel insertion.
- *
- * @example
- * const tr = createPanelAction({
- *   state: editorState,
- *   attributes: { panelType: 'info' },
- * });
- * if (tr) {
- *   applyTransaction(tr);
- * }
- */
-function createPanelAction(_ref4) {
-  var state = _ref4.state,
-    attributes = _ref4.attributes,
-    api = _ref4.api,
-    typeAheadInsert = _ref4.typeAheadInsert,
-    _ref4$inputMethod = _ref4.inputMethod,
-    inputMethod = _ref4$inputMethod === void 0 ? _analytics.INPUT_METHOD.QUICK_INSERT : _ref4$inputMethod;
-  var panelNodeType = (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? (0, _nodeTypeUtils.pickPanelTypeForInsertion)(state.selection.$from) : state.schema.nodes.panel;
-  var tr;
-  // If the selection is empty, we want to insert the panel on a new line
-  if (state.selection.empty) {
-    var node = panelNodeType.createAndFill(_objectSpread({}, attributes));
-    if (!node) {
-      return false;
-    }
-    if (typeAheadInsert !== undefined) {
-      // If the type-ahead insert is provided, we should use that to insert the node
-      tr = typeAheadInsert(node);
-    } else {
-      var _insertSelectedItem;
-      // Otherwise we can use insertSelectedItem to insert the node
-      tr = (_insertSelectedItem = (0, _insert.insertSelectedItem)(node)(state, state.tr, state.selection.head)) === null || _insertSelectedItem === void 0 ? void 0 : _insertSelectedItem.scrollIntoView();
-    }
-  } else {
-    tr = (0, _utils.createWrapSelectionTransaction)({
-      state: state,
-      type: panelNodeType,
-      nodeAttributes: _objectSpread({}, attributes)
-    });
-  }
-  if (tr) {
-    var _api$analytics;
-    api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
-      action: _analytics.ACTION.INSERTED,
-      actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
-      actionSubjectId: _analytics.ACTION_SUBJECT_ID.PANEL,
-      attributes: {
-        inputMethod: inputMethod,
-        panelType: attributes.panelType
-      },
-      eventType: _analytics.EVENT_TYPE.TRACK
-    })(tr);
-  }
-  return tr !== null && tr !== void 0 ? tr : false;
-}
 var _default = exports.default = panelPlugin;

package/dist/cjs/pm-plugins/commands/create-panel-action.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createPanelAction = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _insert = require("@atlaskit/editor-common/insert");
+var _utils = require("@atlaskit/editor-common/utils");
+var _nodeTypeUtils = require("@atlaskit/editor-common/utils/node-type-utils");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var createPanelAction = exports.createPanelAction = function createPanelAction(_ref) {
+  var state = _ref.state,
+    attributes = _ref.attributes,
+    api = _ref.api,
+    typeAheadInsert = _ref.typeAheadInsert,
+    _ref$inputMethod = _ref.inputMethod,
+    inputMethod = _ref$inputMethod === void 0 ? _analytics.INPUT_METHOD.QUICK_INSERT : _ref$inputMethod;
+  var panelNodeType = (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? (0, _nodeTypeUtils.pickPanelTypeForInsertion)(state.selection.$from) : state.schema.nodes.panel;
+  var tr;
+  if (state.selection.empty) {
+    var _insertSelectedItem;
+    var node = panelNodeType.createAndFill(_objectSpread({}, attributes));
+    if (!node) {
+      return false;
+    }
+    tr = typeAheadInsert ? typeAheadInsert(node) : (_insertSelectedItem = (0, _insert.insertSelectedItem)(node)(state, state.tr, state.selection.head)) === null || _insertSelectedItem === void 0 ? void 0 : _insertSelectedItem.scrollIntoView();
+  } else {
+    tr = (0, _utils.createWrapSelectionTransaction)({
+      state: state,
+      type: panelNodeType,
+      nodeAttributes: _objectSpread({}, attributes)
+    });
+  }
+  if (tr) {
+    var _api$analytics;
+    api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
+      action: _analytics.ACTION.INSERTED,
+      actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
+      actionSubjectId: _analytics.ACTION_SUBJECT_ID.PANEL,
+      attributes: {
+        inputMethod: inputMethod,
+        panelType: attributes.panelType
+      },
+      eventType: _analytics.EVENT_TYPE.TRACK
+    })(tr);
+  }
+  return tr !== null && tr !== void 0 ? tr : false;
+};

package/dist/cjs/ui/quick-insert/PanelQuickInsertMenuItem.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PanelQuickInsertMenuItem = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntl = require("react-intl");
+var _panel = require("@atlaskit/adf-schema/panel");
+var _menuItem = require("@atlaskit/editor-common/quick-insert/menu-item");
+var _createPanelAction = require("../../pm-plugins/commands/create-panel-action");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var getPanelAttributes = function getPanelAttributes(panelType) {
+  return panelType === _panel.PanelType.CUSTOM ? {
+    panelType: panelType,
+    panelIcon: ':rainbow:',
+    panelIconId: '1f308',
+    panelIconText: '🌈',
+    // Custom panel color is stored in ADF, not applied as UI styling.
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+    panelColor: '#E6FCFF'
+  } : {
+    panelType: panelType
+  };
+};
+var PanelQuickInsertMenuItem = exports.PanelQuickInsertMenuItem = function PanelQuickInsertMenuItem(_ref) {
+  var api = _ref.api,
+    Icon = _ref.icon,
+    panelType = _ref.panelType,
+    title = _ref.title;
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var onSelect = (0, _react.useCallback)(function (_ref2) {
+    var editorView = _ref2.editorView,
+      insert = _ref2.insert,
+      source = _ref2.source;
+    return (0, _createPanelAction.createPanelAction)({
+      api: api,
+      attributes: getPanelAttributes(panelType),
+      inputMethod: source,
+      state: editorView.state,
+      typeAheadInsert: insert
+    });
+  }, [api, panelType]);
+  return /*#__PURE__*/_react.default.createElement(_menuItem.QuickInsertMenuItem, {
+    iconBefore: /*#__PURE__*/_react.default.createElement(Icon, null),
+    onSelect: onSelect,
+    title: formatMessage(title)
+  });
+};

package/dist/cjs/ui/quick-insert/getPanelQuickInsertComponents.js

@@ -0,0 +1,76 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getPanelQuickInsertComponents = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _react = _interopRequireDefault(require("react"));
+var _panel = require("@atlaskit/adf-schema/panel");
+var _messages = require("@atlaskit/editor-common/messages");
+var _quickInsert = require("@atlaskit/editor-common/quick-insert");
+var _keys = require("@atlaskit/editor-common/quick-insert/keys");
+var _rank = require("@atlaskit/editor-common/quick-insert/rank");
+var _PanelQuickInsertMenuItem = require("./PanelQuickInsertMenuItem");
+var standardPanelItems = [{
+  icon: _quickInsert.IconPanel,
+  menuItem: _keys.INFO_PANEL_MENU_ITEM,
+  panelType: _panel.PanelType.INFO,
+  title: _messages.blockTypeMessages.infoPanel
+}, {
+  icon: _quickInsert.IconPanelNote,
+  menuItem: _keys.NOTE_PANEL_MENU_ITEM,
+  panelType: _panel.PanelType.NOTE,
+  title: _messages.blockTypeMessages.notePanel
+}, {
+  icon: _quickInsert.IconPanelSuccess,
+  menuItem: _keys.SUCCESS_PANEL_MENU_ITEM,
+  panelType: _panel.PanelType.SUCCESS,
+  title: _messages.blockTypeMessages.successPanel
+}, {
+  icon: _quickInsert.IconPanelWarning,
+  menuItem: _keys.WARNING_PANEL_MENU_ITEM,
+  panelType: _panel.PanelType.WARNING,
+  title: _messages.blockTypeMessages.warningPanel
+}, {
+  icon: _quickInsert.IconPanelError,
+  menuItem: _keys.ERROR_PANEL_MENU_ITEM,
+  panelType: _panel.PanelType.ERROR,
+  title: _messages.blockTypeMessages.errorPanel
+}];
+var customPanelItem = {
+  icon: _quickInsert.IconCustomPanel,
+  menuItem: _keys.CUSTOM_PANEL_MENU_ITEM,
+  panelType: _panel.PanelType.CUSTOM,
+  title: _messages.blockTypeMessages.customPanel
+};
+var getPanelQuickInsertComponents = exports.getPanelQuickInsertComponents = function getPanelQuickInsertComponents(_ref) {
+  var api = _ref.api,
+    allowCustomPanel = _ref.allowCustomPanel,
+    allowCustomPanelEdit = _ref.allowCustomPanelEdit;
+  var allPanelItems = [].concat(standardPanelItems, (0, _toConsumableArray2.default)(allowCustomPanel && allowCustomPanelEdit ? [customPanelItem] : []));
+  return allPanelItems.map(function (_ref2) {
+    var icon = _ref2.icon,
+      menuItem = _ref2.menuItem,
+      panelType = _ref2.panelType,
+      title = _ref2.title;
+    return {
+      key: menuItem.key,
+      type: menuItem.type,
+      parents: [{
+        key: _keys.STRUCTURE_SECTION.key,
+        type: _keys.STRUCTURE_SECTION.type,
+        rank: _rank.STRUCTURE_SECTION_RANK[menuItem.key]
+      }],
+      component: function component() {
+        return /*#__PURE__*/_react.default.createElement(_PanelQuickInsertMenuItem.PanelQuickInsertMenuItem, {
+          api: api,
+          icon: icon,
+          panelType: panelType,
+          title: title
+        });
+      }
+    };
+  });
+};

package/dist/es2019/panelPlugin.js

@@ -1,18 +1,17 @@
 import React from 'react';
 import { extendedPanel, extendedPanelC1, extendedPanelC1WithLocalId, extendedPanelWithLocalId, PanelType } from '@atlaskit/adf-schema';
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { TRANSFORM_STRUCTURE_PANEL_MENU_ITEM, TRANSFORM_STRUCTURE_MENU_SECTION, TRANSFORM_STRUCTURE_MENU_SECTION_RANK } from '@atlaskit/editor-common/block-menu';
-import { insertSelectedItem } from '@atlaskit/editor-common/insert';
 import { blockTypeMessages } from '@atlaskit/editor-common/messages';
 import { IconCustomPanel, IconPanel, IconPanelError, IconPanelNote, IconPanelSuccess, IconPanelWarning } from '@atlaskit/editor-common/quick-insert';
-import { createWrapSelectionTransaction } from '@atlaskit/editor-common/utils';
-import { pickPanelTypeForInsertion } from '@atlaskit/editor-common/utils/node-type-utils';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { createPanelAction } from './pm-plugins/commands/create-panel-action';
 import keymap from './pm-plugins/keymaps';
 import { createPlugin } from './pm-plugins/main';
 import { createPanelBlockMenuItem } from './ui/panelBlockMenuItem';
+import { getPanelQuickInsertComponents } from './ui/quick-insert/getPanelQuickInsertComponents';
 import { getToolbarConfig } from './ui/toolbar';
 const PANEL_NODE_NAME = 'panel';
 const panelPlugin = ({
@@ -39,6 +38,15 @@ const panelPlugin = ({
       }
     }]);
   }
+  const isRegisteredSlashCommandEnabled = isExperimentEnabled('platform_editor_slash_command');
+  if (isRegisteredSlashCommandEnabled) {
+    var _api$uiControlRegistr;
+    api === null || api === void 0 ? void 0 : (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 ? void 0 : _api$uiControlRegistr.actions.register(getPanelQuickInsertComponents({
+      allowCustomPanel,
+      allowCustomPanelEdit,
+      api
+    }));
+  }
   return {
     name: 'panel',
     nodes() {
@@ -103,121 +111,123 @@ const panelPlugin = ({
       }
     },
     pluginsOptions: {
-      quickInsert: ({
-        formatMessage
-      }) => {
-        const quickInsertOptions = [{
-          id: 'infopanel',
-          title: formatMessage(blockTypeMessages.infoPanel),
-          keywords: ['panel'],
-          description: formatMessage(blockTypeMessages.infoPanelDescription),
-          priority: 800,
-          icon: () => /*#__PURE__*/React.createElement(IconPanel, null),
-          action(typeAheadInsert, state) {
-            return createPanelAction({
-              state,
-              attributes: {
-                panelType: PanelType.INFO
-              },
-              api,
-              typeAheadInsert
-            });
-          }
-        }, {
-          id: 'notepanel',
-          title: formatMessage(blockTypeMessages.notePanel),
-          description: formatMessage(blockTypeMessages.notePanelDescription),
-          priority: 1000,
-          icon: () => /*#__PURE__*/React.createElement(IconPanelNote, null),
-          action(typeAheadInsert, state) {
-            return createPanelAction({
-              state,
-              attributes: {
-                panelType: PanelType.NOTE
-              },
-              api,
-              typeAheadInsert
-            });
-          }
-        }, {
-          id: 'successpanel',
-          title: formatMessage(blockTypeMessages.successPanel),
-          description: formatMessage(blockTypeMessages.successPanelDescription),
-          keywords: ['tip'],
-          priority: 1000,
-          icon: () => /*#__PURE__*/React.createElement(IconPanelSuccess, null),
-          action(typeAheadInsert, state) {
-            return createPanelAction({
-              state,
-              attributes: {
-                panelType: PanelType.SUCCESS
-              },
-              api,
-              typeAheadInsert
-            });
-          }
-        }, {
-          id: 'warningpanel',
-          title: formatMessage(blockTypeMessages.warningPanel),
-          description: formatMessage(blockTypeMessages.warningPanelDescription),
-          priority: 1000,
-          icon: () => /*#__PURE__*/React.createElement(IconPanelWarning, null),
-          action(typeAheadInsert, state) {
-            return createPanelAction({
-              state,
-              attributes: {
-                panelType: PanelType.WARNING
-              },
-              api,
-              typeAheadInsert
-            });
-          }
-        }, {
-          id: 'errorpanel',
-          title: formatMessage(blockTypeMessages.errorPanel),
-          description: formatMessage(blockTypeMessages.errorPanelDescription),
-          priority: 1000,
-          icon: () => /*#__PURE__*/React.createElement(IconPanelError, null),
-          action(typeAheadInsert, state) {
-            return createPanelAction({
-              state,
-              attributes: {
-                panelType: PanelType.ERROR
-              },
-              api,
-              typeAheadInsert
-            });
-          }
-        }];
-        if (allowCustomPanel && allowCustomPanelEdit) {
-          quickInsertOptions.push({
-            id: 'custompanel',
-            title: formatMessage(blockTypeMessages.customPanel),
-            description: formatMessage(blockTypeMessages.customPanelDescription),
+      ...(isRegisteredSlashCommandEnabled ? {} : {
+        quickInsert: ({
+          formatMessage
+        }) => {
+          const quickInsertOptions = [{
+            id: 'infopanel',
+            title: formatMessage(blockTypeMessages.infoPanel),
+            keywords: ['panel'],
+            description: formatMessage(blockTypeMessages.infoPanelDescription),
+            priority: 800,
+            icon: () => /*#__PURE__*/React.createElement(IconPanel, null),
+            action(typeAheadInsert, state) {
+              return createPanelAction({
+                state,
+                attributes: {
+                  panelType: PanelType.INFO
+                },
+                api,
+                typeAheadInsert
+              });
+            }
+          }, {
+            id: 'notepanel',
+            title: formatMessage(blockTypeMessages.notePanel),
+            description: formatMessage(blockTypeMessages.notePanelDescription),
             priority: 1000,
-            icon: () => /*#__PURE__*/React.createElement(IconCustomPanel, null),
+            icon: () => /*#__PURE__*/React.createElement(IconPanelNote, null),
             action(typeAheadInsert, state) {
               return createPanelAction({
                 state,
                 attributes: {
-                  panelType: PanelType.CUSTOM,
-                  panelIcon: ':rainbow:',
-                  panelIconId: '1f308',
-                  panelIconText: '🌈',
-                  // Ignored via go/ees007
-                  // eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
-                  // TODO: https://product-fabric.atlassian.net/browse/DSP-7268
-                  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-                  panelColor: '#E6FCFF'
+                  panelType: PanelType.NOTE
                 },
                 api,
                 typeAheadInsert
               });
             }
-          });
+          }, {
+            id: 'successpanel',
+            title: formatMessage(blockTypeMessages.successPanel),
+            description: formatMessage(blockTypeMessages.successPanelDescription),
+            keywords: ['tip'],
+            priority: 1000,
+            icon: () => /*#__PURE__*/React.createElement(IconPanelSuccess, null),
+            action(typeAheadInsert, state) {
+              return createPanelAction({
+                state,
+                attributes: {
+                  panelType: PanelType.SUCCESS
+                },
+                api,
+                typeAheadInsert
+              });
+            }
+          }, {
+            id: 'warningpanel',
+            title: formatMessage(blockTypeMessages.warningPanel),
+            description: formatMessage(blockTypeMessages.warningPanelDescription),
+            priority: 1000,
+            icon: () => /*#__PURE__*/React.createElement(IconPanelWarning, null),
+            action(typeAheadInsert, state) {
+              return createPanelAction({
+                state,
+                attributes: {
+                  panelType: PanelType.WARNING
+                },
+                api,
+                typeAheadInsert
+              });
+            }
+          }, {
+            id: 'errorpanel',
+            title: formatMessage(blockTypeMessages.errorPanel),
+            description: formatMessage(blockTypeMessages.errorPanelDescription),
+            priority: 1000,
+            icon: () => /*#__PURE__*/React.createElement(IconPanelError, null),
+            action(typeAheadInsert, state) {
+              return createPanelAction({
+                state,
+                attributes: {
+                  panelType: PanelType.ERROR
+                },
+                api,
+                typeAheadInsert
+              });
+            }
+          }];
+          if (allowCustomPanel && allowCustomPanelEdit) {
+            quickInsertOptions.push({
+              id: 'custompanel',
+              title: formatMessage(blockTypeMessages.customPanel),
+              description: formatMessage(blockTypeMessages.customPanelDescription),
+              priority: 1000,
+              icon: () => /*#__PURE__*/React.createElement(IconCustomPanel, null),
+              action(typeAheadInsert, state) {
+                return createPanelAction({
+                  state,
+                  attributes: {
+                    panelType: PanelType.CUSTOM,
+                    panelIcon: ':rainbow:',
+                    panelIconId: '1f308',
+                    panelIconText: '🌈',
+                    // Ignored via go/ees007
+                    // eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
+                    // TODO: https://product-fabric.atlassian.net/browse/DSP-7268
+                    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+                    panelColor: '#E6FCFF'
+                  },
+                  api,
+                  typeAheadInsert
+                });
+              }
+            });
+          }
+          return quickInsertOptions;
         }
-        return quickInsertOptions;
-      },
+      }),
       floatingToolbar: (state, intl, providerFactory) => getToolbarConfig(state, intl, {
         allowCustomPanel,
         allowCustomPanelEdit
@@ -225,67 +235,4 @@ const panelPlugin = ({
     }
   };
 };
-
-/**
- * Creates panel action and wrap selection transaction with analytics for the panel insertion.
- *
- * @example
- * const tr = createPanelAction({
- *   state: editorState,
- *   attributes: { panelType: 'info' },
- * });
- * if (tr) {
- *   applyTransaction(tr);
- * }
- */
-function createPanelAction({
-  state,
-  attributes,
-  api,
-  typeAheadInsert,
-  inputMethod = INPUT_METHOD.QUICK_INSERT
-}) {
-  var _tr;
-  const panelNodeType = expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? pickPanelTypeForInsertion(state.selection.$from) : state.schema.nodes.panel;
-  let tr;
-  // If the selection is empty, we want to insert the panel on a new line
-  if (state.selection.empty) {
-    const node = panelNodeType.createAndFill({
-      ...attributes
-    });
-    if (!node) {
-      return false;
-    }
-    if (typeAheadInsert !== undefined) {
-      // If the type-ahead insert is provided, we should use that to insert the node
-      tr = typeAheadInsert(node);
-    } else {
-      var _insertSelectedItem;
-      // Otherwise we can use insertSelectedItem to insert the node
-      tr = (_insertSelectedItem = insertSelectedItem(node)(state, state.tr, state.selection.head)) === null || _insertSelectedItem === void 0 ? void 0 : _insertSelectedItem.scrollIntoView();
-    }
-  } else {
-    tr = createWrapSelectionTransaction({
-      state,
-      type: panelNodeType,
-      nodeAttributes: {
-        ...attributes
-      }
-    });
-  }
-  if (tr) {
-    var _api$analytics;
-    api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.attachAnalyticsEvent({
-      action: ACTION.INSERTED,
-      actionSubject: ACTION_SUBJECT.DOCUMENT,
-      actionSubjectId: ACTION_SUBJECT_ID.PANEL,
-      attributes: {
-        inputMethod,
-        panelType: attributes.panelType
-      },
-      eventType: EVENT_TYPE.TRACK
-    })(tr);
-  }
-  return (_tr = tr) !== null && _tr !== void 0 ? _tr : false;
-}
 export default panelPlugin;

package/dist/es2019/pm-plugins/commands/create-panel-action.js

@@ -0,0 +1,48 @@
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { insertSelectedItem } from '@atlaskit/editor-common/insert';
+import { createWrapSelectionTransaction } from '@atlaskit/editor-common/utils';
+import { pickPanelTypeForInsertion } from '@atlaskit/editor-common/utils/node-type-utils';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+export const createPanelAction = ({
+  state,
+  attributes,
+  api,
+  typeAheadInsert,
+  inputMethod = INPUT_METHOD.QUICK_INSERT
+}) => {
+  var _tr;
+  const panelNodeType = expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? pickPanelTypeForInsertion(state.selection.$from) : state.schema.nodes.panel;
+  let tr;
+  if (state.selection.empty) {
+    var _insertSelectedItem;
+    const node = panelNodeType.createAndFill({
+      ...attributes
+    });
+    if (!node) {
+      return false;
+    }
+    tr = typeAheadInsert ? typeAheadInsert(node) : (_insertSelectedItem = insertSelectedItem(node)(state, state.tr, state.selection.head)) === null || _insertSelectedItem === void 0 ? void 0 : _insertSelectedItem.scrollIntoView();
+  } else {
+    tr = createWrapSelectionTransaction({
+      state,
+      type: panelNodeType,
+      nodeAttributes: {
+        ...attributes
+      }
+    });
+  }
+  if (tr) {
+    var _api$analytics;
+    api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.attachAnalyticsEvent({
+      action: ACTION.INSERTED,
+      actionSubject: ACTION_SUBJECT.DOCUMENT,
+      actionSubjectId: ACTION_SUBJECT_ID.PANEL,
+      attributes: {
+        inputMethod,
+        panelType: attributes.panelType
+      },
+      eventType: EVENT_TYPE.TRACK
+    })(tr);
+  }
+  return (_tr = tr) !== null && _tr !== void 0 ? _tr : false;
+};

package/dist/es2019/ui/quick-insert/PanelQuickInsertMenuItem.js

@@ -0,0 +1,42 @@
+import React, { useCallback } from 'react';
+import { useIntl } from 'react-intl';
+import { PanelType } from '@atlaskit/adf-schema/panel';
+import { QuickInsertMenuItem } from '@atlaskit/editor-common/quick-insert/menu-item';
+import { createPanelAction } from '../../pm-plugins/commands/create-panel-action';
+const getPanelAttributes = panelType => panelType === PanelType.CUSTOM ? {
+  panelType,
+  panelIcon: ':rainbow:',
+  panelIconId: '1f308',
+  panelIconText: '🌈',
+  // Custom panel color is stored in ADF, not applied as UI styling.
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  panelColor: '#E6FCFF'
+} : {
+  panelType
+};
+export const PanelQuickInsertMenuItem = ({
+  api,
+  icon: Icon,
+  panelType,
+  title
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const onSelect = useCallback(({
+    editorView,
+    insert,
+    source
+  }) => createPanelAction({
+    api,
+    attributes: getPanelAttributes(panelType),
+    inputMethod: source,
+    state: editorView.state,
+    typeAheadInsert: insert
+  }), [api, panelType]);
+  return /*#__PURE__*/React.createElement(QuickInsertMenuItem, {
+    iconBefore: /*#__PURE__*/React.createElement(Icon, null),
+    onSelect: onSelect,
+    title: formatMessage(title)
+  });
+};

package/dist/es2019/ui/quick-insert/getPanelQuickInsertComponents.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import { PanelType } from '@atlaskit/adf-schema/panel';
+import { blockTypeMessages } from '@atlaskit/editor-common/messages';
+import { IconCustomPanel, IconPanel, IconPanelError, IconPanelNote, IconPanelSuccess, IconPanelWarning } from '@atlaskit/editor-common/quick-insert';
+import { CUSTOM_PANEL_MENU_ITEM, ERROR_PANEL_MENU_ITEM, INFO_PANEL_MENU_ITEM, NOTE_PANEL_MENU_ITEM, STRUCTURE_SECTION, SUCCESS_PANEL_MENU_ITEM, WARNING_PANEL_MENU_ITEM } from '@atlaskit/editor-common/quick-insert/keys';
+import { STRUCTURE_SECTION_RANK } from '@atlaskit/editor-common/quick-insert/rank';
+import { PanelQuickInsertMenuItem } from './PanelQuickInsertMenuItem';
+const standardPanelItems = [{
+  icon: IconPanel,
+  menuItem: INFO_PANEL_MENU_ITEM,
+  panelType: PanelType.INFO,
+  title: blockTypeMessages.infoPanel
+}, {
+  icon: IconPanelNote,
+  menuItem: NOTE_PANEL_MENU_ITEM,
+  panelType: PanelType.NOTE,
+  title: blockTypeMessages.notePanel
+}, {
+  icon: IconPanelSuccess,
+  menuItem: SUCCESS_PANEL_MENU_ITEM,
+  panelType: PanelType.SUCCESS,
+  title: blockTypeMessages.successPanel
+}, {
+  icon: IconPanelWarning,
+  menuItem: WARNING_PANEL_MENU_ITEM,
+  panelType: PanelType.WARNING,
+  title: blockTypeMessages.warningPanel
+}, {
+  icon: IconPanelError,
+  menuItem: ERROR_PANEL_MENU_ITEM,
+  panelType: PanelType.ERROR,
+  title: blockTypeMessages.errorPanel
+}];
+const customPanelItem = {
+  icon: IconCustomPanel,
+  menuItem: CUSTOM_PANEL_MENU_ITEM,
+  panelType: PanelType.CUSTOM,
+  title: blockTypeMessages.customPanel
+};
+export const getPanelQuickInsertComponents = ({
+  api,
+  allowCustomPanel,
+  allowCustomPanelEdit
+}) => {
+  const allPanelItems = [...standardPanelItems, ...(allowCustomPanel && allowCustomPanelEdit ? [customPanelItem] : [])];
+  return allPanelItems.map(({
+    icon,
+    menuItem,
+    panelType,
+    title
+  }) => ({
+    key: menuItem.key,
+    type: menuItem.type,
+    parents: [{
+      key: STRUCTURE_SECTION.key,
+      type: STRUCTURE_SECTION.type,
+      rank: STRUCTURE_SECTION_RANK[menuItem.key]
+    }],
+    component: () => /*#__PURE__*/React.createElement(PanelQuickInsertMenuItem, {
+      api: api,
+      icon: icon,
+      panelType: panelType,
+      title: title
+    })
+  }));
+};

package/dist/esm/panelPlugin.js

@@ -4,19 +4,18 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
 import { extendedPanel, extendedPanelC1, extendedPanelC1WithLocalId, extendedPanelWithLocalId, PanelType } from '@atlaskit/adf-schema';
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { TRANSFORM_STRUCTURE_PANEL_MENU_ITEM, TRANSFORM_STRUCTURE_MENU_SECTION, TRANSFORM_STRUCTURE_MENU_SECTION_RANK } from '@atlaskit/editor-common/block-menu';
-import { insertSelectedItem } from '@atlaskit/editor-common/insert';
 import { blockTypeMessages } from '@atlaskit/editor-common/messages';
 import { IconCustomPanel, IconPanel, IconPanelError, IconPanelNote, IconPanelSuccess, IconPanelWarning } from '@atlaskit/editor-common/quick-insert';
-import { createWrapSelectionTransaction } from '@atlaskit/editor-common/utils';
-import { pickPanelTypeForInsertion } from '@atlaskit/editor-common/utils/node-type-utils';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { createPanelAction } from './pm-plugins/commands/create-panel-action';
 import keymap from './pm-plugins/keymaps';
 import { createPlugin } from './pm-plugins/main';
 import { createPanelBlockMenuItem } from './ui/panelBlockMenuItem';
+import { getPanelQuickInsertComponents } from './ui/quick-insert/getPanelQuickInsertComponents';
 import { getToolbarConfig } from './ui/toolbar';
 var PANEL_NODE_NAME = 'panel';
 var panelPlugin = function panelPlugin(_ref) {
@@ -44,6 +43,15 @@ var panelPlugin = function panelPlugin(_ref) {
       }
     }]);
   }
+  var isRegisteredSlashCommandEnabled = isExperimentEnabled('platform_editor_slash_command');
+  if (isRegisteredSlashCommandEnabled) {
+    var _api$uiControlRegistr;
+    api === null || api === void 0 || (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 || _api$uiControlRegistr.actions.register(getPanelQuickInsertComponents({
+      allowCustomPanel: allowCustomPanel,
+      allowCustomPanelEdit: allowCustomPanelEdit,
+      api: api
+    }));
+  }
   return {
     name: 'panel',
     nodes: function nodes() {
@@ -108,7 +116,7 @@ var panelPlugin = function panelPlugin(_ref) {
         };
       }
     },
-    pluginsOptions: {
+    pluginsOptions: _objectSpread(_objectSpread({}, isRegisteredSlashCommandEnabled ? {} : {
       quickInsert: function quickInsert(_ref3) {
         var formatMessage = _ref3.formatMessage;
         var quickInsertOptions = [{
@@ -234,72 +242,15 @@ var panelPlugin = function panelPlugin(_ref) {
           });
         }
         return quickInsertOptions;
-      },
+      }
+    }), {}, {
       floatingToolbar: function floatingToolbar(state, intl, providerFactory) {
         return getToolbarConfig(state, intl, {
           allowCustomPanel: allowCustomPanel,
           allowCustomPanelEdit: allowCustomPanelEdit
         }, providerFactory, api);
       }
-    }
+    })
   };
 };
-
-/**
- * Creates panel action and wrap selection transaction with analytics for the panel insertion.
- *
- * @example
- * const tr = createPanelAction({
- *   state: editorState,
- *   attributes: { panelType: 'info' },
- * });
- * if (tr) {
- *   applyTransaction(tr);
- * }
- */
-function createPanelAction(_ref4) {
-  var state = _ref4.state,
-    attributes = _ref4.attributes,
-    api = _ref4.api,
-    typeAheadInsert = _ref4.typeAheadInsert,
-    _ref4$inputMethod = _ref4.inputMethod,
-    inputMethod = _ref4$inputMethod === void 0 ? INPUT_METHOD.QUICK_INSERT : _ref4$inputMethod;
-  var panelNodeType = expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? pickPanelTypeForInsertion(state.selection.$from) : state.schema.nodes.panel;
-  var tr;
-  // If the selection is empty, we want to insert the panel on a new line
-  if (state.selection.empty) {
-    var node = panelNodeType.createAndFill(_objectSpread({}, attributes));
-    if (!node) {
-      return false;
-    }
-    if (typeAheadInsert !== undefined) {
-      // If the type-ahead insert is provided, we should use that to insert the node
-      tr = typeAheadInsert(node);
-    } else {
-      var _insertSelectedItem;
-      // Otherwise we can use insertSelectedItem to insert the node
-      tr = (_insertSelectedItem = insertSelectedItem(node)(state, state.tr, state.selection.head)) === null || _insertSelectedItem === void 0 ? void 0 : _insertSelectedItem.scrollIntoView();
-    }
-  } else {
-    tr = createWrapSelectionTransaction({
-      state: state,
-      type: panelNodeType,
-      nodeAttributes: _objectSpread({}, attributes)
-    });
-  }
-  if (tr) {
-    var _api$analytics;
-    api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
-      action: ACTION.INSERTED,
-      actionSubject: ACTION_SUBJECT.DOCUMENT,
-      actionSubjectId: ACTION_SUBJECT_ID.PANEL,
-      attributes: {
-        inputMethod: inputMethod,
-        panelType: attributes.panelType
-      },
-      eventType: EVENT_TYPE.TRACK
-    })(tr);
-  }
-  return tr !== null && tr !== void 0 ? tr : false;
-}
 export default panelPlugin;

package/dist/esm/pm-plugins/commands/create-panel-action.js

@@ -0,0 +1,46 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { insertSelectedItem } from '@atlaskit/editor-common/insert';
+import { createWrapSelectionTransaction } from '@atlaskit/editor-common/utils';
+import { pickPanelTypeForInsertion } from '@atlaskit/editor-common/utils/node-type-utils';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+export var createPanelAction = function createPanelAction(_ref) {
+  var state = _ref.state,
+    attributes = _ref.attributes,
+    api = _ref.api,
+    typeAheadInsert = _ref.typeAheadInsert,
+    _ref$inputMethod = _ref.inputMethod,
+    inputMethod = _ref$inputMethod === void 0 ? INPUT_METHOD.QUICK_INSERT : _ref$inputMethod;
+  var panelNodeType = expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? pickPanelTypeForInsertion(state.selection.$from) : state.schema.nodes.panel;
+  var tr;
+  if (state.selection.empty) {
+    var _insertSelectedItem;
+    var node = panelNodeType.createAndFill(_objectSpread({}, attributes));
+    if (!node) {
+      return false;
+    }
+    tr = typeAheadInsert ? typeAheadInsert(node) : (_insertSelectedItem = insertSelectedItem(node)(state, state.tr, state.selection.head)) === null || _insertSelectedItem === void 0 ? void 0 : _insertSelectedItem.scrollIntoView();
+  } else {
+    tr = createWrapSelectionTransaction({
+      state: state,
+      type: panelNodeType,
+      nodeAttributes: _objectSpread({}, attributes)
+    });
+  }
+  if (tr) {
+    var _api$analytics;
+    api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
+      action: ACTION.INSERTED,
+      actionSubject: ACTION_SUBJECT.DOCUMENT,
+      actionSubjectId: ACTION_SUBJECT_ID.PANEL,
+      attributes: {
+        inputMethod: inputMethod,
+        panelType: attributes.panelType
+      },
+      eventType: EVENT_TYPE.TRACK
+    })(tr);
+  }
+  return tr !== null && tr !== void 0 ? tr : false;
+};

package/dist/esm/ui/quick-insert/PanelQuickInsertMenuItem.js

@@ -0,0 +1,43 @@
+import React, { useCallback } from 'react';
+import { useIntl } from 'react-intl';
+import { PanelType } from '@atlaskit/adf-schema/panel';
+import { QuickInsertMenuItem } from '@atlaskit/editor-common/quick-insert/menu-item';
+import { createPanelAction } from '../../pm-plugins/commands/create-panel-action';
+var getPanelAttributes = function getPanelAttributes(panelType) {
+  return panelType === PanelType.CUSTOM ? {
+    panelType: panelType,
+    panelIcon: ':rainbow:',
+    panelIconId: '1f308',
+    panelIconText: '🌈',
+    // Custom panel color is stored in ADF, not applied as UI styling.
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+    panelColor: '#E6FCFF'
+  } : {
+    panelType: panelType
+  };
+};
+export var PanelQuickInsertMenuItem = function PanelQuickInsertMenuItem(_ref) {
+  var api = _ref.api,
+    Icon = _ref.icon,
+    panelType = _ref.panelType,
+    title = _ref.title;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var onSelect = useCallback(function (_ref2) {
+    var editorView = _ref2.editorView,
+      insert = _ref2.insert,
+      source = _ref2.source;
+    return createPanelAction({
+      api: api,
+      attributes: getPanelAttributes(panelType),
+      inputMethod: source,
+      state: editorView.state,
+      typeAheadInsert: insert
+    });
+  }, [api, panelType]);
+  return /*#__PURE__*/React.createElement(QuickInsertMenuItem, {
+    iconBefore: /*#__PURE__*/React.createElement(Icon, null),
+    onSelect: onSelect,
+    title: formatMessage(title)
+  });
+};

package/dist/esm/ui/quick-insert/getPanelQuickInsertComponents.js

@@ -0,0 +1,69 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import React from 'react';
+import { PanelType } from '@atlaskit/adf-schema/panel';
+import { blockTypeMessages } from '@atlaskit/editor-common/messages';
+import { IconCustomPanel, IconPanel, IconPanelError, IconPanelNote, IconPanelSuccess, IconPanelWarning } from '@atlaskit/editor-common/quick-insert';
+import { CUSTOM_PANEL_MENU_ITEM, ERROR_PANEL_MENU_ITEM, INFO_PANEL_MENU_ITEM, NOTE_PANEL_MENU_ITEM, STRUCTURE_SECTION, SUCCESS_PANEL_MENU_ITEM, WARNING_PANEL_MENU_ITEM } from '@atlaskit/editor-common/quick-insert/keys';
+import { STRUCTURE_SECTION_RANK } from '@atlaskit/editor-common/quick-insert/rank';
+import { PanelQuickInsertMenuItem } from './PanelQuickInsertMenuItem';
+var standardPanelItems = [{
+  icon: IconPanel,
+  menuItem: INFO_PANEL_MENU_ITEM,
+  panelType: PanelType.INFO,
+  title: blockTypeMessages.infoPanel
+}, {
+  icon: IconPanelNote,
+  menuItem: NOTE_PANEL_MENU_ITEM,
+  panelType: PanelType.NOTE,
+  title: blockTypeMessages.notePanel
+}, {
+  icon: IconPanelSuccess,
+  menuItem: SUCCESS_PANEL_MENU_ITEM,
+  panelType: PanelType.SUCCESS,
+  title: blockTypeMessages.successPanel
+}, {
+  icon: IconPanelWarning,
+  menuItem: WARNING_PANEL_MENU_ITEM,
+  panelType: PanelType.WARNING,
+  title: blockTypeMessages.warningPanel
+}, {
+  icon: IconPanelError,
+  menuItem: ERROR_PANEL_MENU_ITEM,
+  panelType: PanelType.ERROR,
+  title: blockTypeMessages.errorPanel
+}];
+var customPanelItem = {
+  icon: IconCustomPanel,
+  menuItem: CUSTOM_PANEL_MENU_ITEM,
+  panelType: PanelType.CUSTOM,
+  title: blockTypeMessages.customPanel
+};
+export var getPanelQuickInsertComponents = function getPanelQuickInsertComponents(_ref) {
+  var api = _ref.api,
+    allowCustomPanel = _ref.allowCustomPanel,
+    allowCustomPanelEdit = _ref.allowCustomPanelEdit;
+  var allPanelItems = [].concat(standardPanelItems, _toConsumableArray(allowCustomPanel && allowCustomPanelEdit ? [customPanelItem] : []));
+  return allPanelItems.map(function (_ref2) {
+    var icon = _ref2.icon,
+      menuItem = _ref2.menuItem,
+      panelType = _ref2.panelType,
+      title = _ref2.title;
+    return {
+      key: menuItem.key,
+      type: menuItem.type,
+      parents: [{
+        key: STRUCTURE_SECTION.key,
+        type: STRUCTURE_SECTION.type,
+        rank: STRUCTURE_SECTION_RANK[menuItem.key]
+      }],
+      component: function component() {
+        return /*#__PURE__*/React.createElement(PanelQuickInsertMenuItem, {
+          api: api,
+          icon: icon,
+          panelType: panelType,
+          title: title
+        });
+      }
+    };
+  });
+};

package/dist/types/panelPluginType.d.ts

@@ -6,6 +6,7 @@ import type { decorationsPlugin } from '@atlaskit/editor-plugin-decorations';
 import type { EmojiPlugin } from '@atlaskit/editor-plugin-emoji';
 import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
+import type { UiControlRegistryPlugin } from '@atlaskit/editor-plugin-ui-control-registry/ui-control-registry-plugin-type';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 export declare const pluginKey: PluginKey;
 export interface PanelPluginOptions extends LongPressSelectionPluginOptions, PanelPluginConfig {
@@ -35,7 +36,8 @@ export type PanelPluginDependencies = [
     OptionalPlugin<ToolbarPlugin>,
     EmojiPlugin,
     OptionalPlugin<BlockMenuPlugin>,
-    OptionalPlugin<SelectionPlugin>
+    OptionalPlugin<SelectionPlugin>,
+    OptionalPlugin<UiControlRegistryPlugin>
 ];
 export type PanelPlugin = NextEditorPlugin<'panel', {
     actions: {

package/dist/types/pm-plugins/commands/create-panel-action.d.ts

@@ -0,0 +1,13 @@
+import type { PanelAttributes } from '@atlaskit/adf-schema/panel';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import type { QuickInsertActionInsert } from '@atlaskit/editor-common/provider-factory';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import type { PanelPlugin } from '../../panelPluginType';
+export declare const createPanelAction: ({ state, attributes, api, typeAheadInsert, inputMethod, }: {
+    api: ExtractInjectionAPI<PanelPlugin> | undefined;
+    attributes: PanelAttributes;
+    inputMethod?: INPUT_METHOD.ELEMENT_BROWSER | INPUT_METHOD.INSERT_MENU | INPUT_METHOD.QUICK_INSERT | INPUT_METHOD.TOOLBAR;
+    state: EditorState;
+    typeAheadInsert?: QuickInsertActionInsert;
+}) => ReturnType<QuickInsertActionInsert> | false;

package/dist/types/ui/quick-insert/PanelQuickInsertMenuItem.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { MessageDescriptor } from 'react-intl';
+import { PanelType } from '@atlaskit/adf-schema/panel';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { PanelPlugin } from '../../panelPluginType';
+export type QuickInsertPanelType = Exclude<PanelType, PanelType.TIP>;
+export declare const PanelQuickInsertMenuItem: ({ api, icon: Icon, panelType, title, }: {
+    api: ExtractInjectionAPI<PanelPlugin> | undefined;
+    icon: React.ComponentType;
+    panelType: QuickInsertPanelType;
+    title: MessageDescriptor;
+}) => React.JSX.Element;

package/dist/types/ui/quick-insert/getPanelQuickInsertComponents.d.ts

@@ -0,0 +1,8 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { RegisterMenuItem } from '@atlaskit/editor-ui-control-model/types';
+import type { PanelPlugin } from '../../panelPluginType';
+export declare const getPanelQuickInsertComponents: ({ api, allowCustomPanel, allowCustomPanelEdit, }: {
+    allowCustomPanel: boolean;
+    allowCustomPanelEdit: boolean;
+    api: ExtractInjectionAPI<PanelPlugin> | undefined;
+}) => RegisterMenuItem[];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-panel",
-	"version": "15.0.2",
+	"version": "15.0.3",
 	"description": "Panel plugin for @atlaskit/editor-core.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -27,11 +27,14 @@
 		"@atlaskit/editor-plugin-emoji": "^14.0.0",
 		"@atlaskit/editor-plugin-selection": "^13.0.0",
 		"@atlaskit/editor-plugin-toolbar": "^10.0.0",
+		"@atlaskit/editor-plugin-ui-control-registry": "^7.0.0",
 		"@atlaskit/editor-prosemirror": "^8.0.0",
 		"@atlaskit/editor-shared-styles": "^4.0.0",
 		"@atlaskit/editor-toolbar": "^2.4.0",
+		"@atlaskit/editor-ui-control-model": "^2.4.0",
 		"@atlaskit/emoji": "^71.15.0",
-		"@atlaskit/icon": "^37.2.0",
+		"@atlaskit/icon": "^37.3.0",
+		"@atlaskit/platform-feature-experiments": "^0.3.0",
 		"@atlaskit/platform-feature-flags": "^2.1.0",
 		"@atlaskit/tmp-editor-statsig": "^139.0.0",
 		"@atlaskit/tokens": "^16.3.0",
@@ -39,7 +42,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^117.0.0",
+		"@atlaskit/editor-common": "^117.2.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-dom": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"