@atlaskit/editor-plugin-layout 16.0.0 → 16.0.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-layout
 
+## 16.0.1
+
+### Patch Changes
+
+- [`4273da2e1a648`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4273da2e1a648) -
+  Register native Quick Insert items behind `platform_editor_slash_command`.
+- Updated dependencies
+
 ## 16.0.0
 
 ### Patch Changes

package/dist/cjs/layoutPlugin.js

@@ -14,7 +14,8 @@ var _messages = require("@atlaskit/editor-common/messages");
 var _quickInsert = require("@atlaskit/editor-common/quick-insert");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _actions = require("./pm-plugins/actions");
@@ -26,6 +27,7 @@ var _globalStyles = require("./ui/global-styles");
 var _LayoutBlockMenuItem = require("./ui/LayoutBlockMenuItem");
 var _LayoutColumnMenu = require("./ui/LayoutColumnMenu");
 var _components = require("./ui/LayoutColumnMenu/components");
+var _getLayoutQuickInsertComponents = require("./ui/quick-insert/getLayoutQuickInsertComponents");
 var _toolbar = require("./ui/toolbar");
 var LAYOUT_SECTION_NODE_NAME = 'layoutSection';
 
@@ -61,9 +63,11 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
   var _ref$config = _ref.config,
     options = _ref$config === void 0 ? {} : _ref$config,
     api = _ref.api;
-  var allowAdvancedSingleColumnLayout = (0, _experiments.editorExperiment)('advanced_layouts', true) && (0, _experiments.editorExperiment)('single_column_layouts', true, {
+  var isAdvancedLayoutEnabled = (0, _experiments.editorExperiment)('advanced_layouts', true);
+  var allowAdvancedSingleColumnLayout = isAdvancedLayoutEnabled && (0, _experiments.editorExperiment)('single_column_layouts', true, {
     exposure: true
   });
+  var isRegisteredSlashCommandEnabled = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_slash_command') && isAdvancedLayoutEnabled;
   if ((0, _experiments.editorExperiment)('platform_editor_block_menu', true)) {
     var _api$blockMenu;
     api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 || _api$blockMenu.actions.registerBlockMenuComponents([{
@@ -87,15 +91,21 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
       api: api
     }));
   }
+  if (isRegisteredSlashCommandEnabled) {
+    var _api$uiControlRegistr2;
+    api === null || api === void 0 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 || _api$uiControlRegistr2.actions.register((0, _getLayoutQuickInsertComponents.getLayoutQuickInsertComponents)({
+      api: api
+    }));
+  }
   return {
     name: 'layout',
     nodes: function nodes() {
       return [{
         name: 'layoutSection',
-        node: (0, _experiments.editorExperiment)('advanced_layouts', true) ? (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') ? _schema.layoutSectionWithSingleColumnLocalId : _schema.layoutSectionWithSingleColumn : (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') ? _adfSchema.layoutSectionWithLocalId : _adfSchema.layoutSection
+        node: (0, _experiments.editorExperiment)('advanced_layouts', true) ? (0, _fg.fg)('platform_editor_adf_with_localid') ? _schema.layoutSectionWithSingleColumnLocalId : _schema.layoutSectionWithSingleColumn : (0, _fg.fg)('platform_editor_adf_with_localid') ? _adfSchema.layoutSectionWithLocalId : _adfSchema.layoutSection
       }, {
         name: 'layoutColumn',
-        node: (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') ? _adfSchema.layoutColumnWithLocalId : _adfSchema.layoutColumn
+        node: (0, _fg.fg)('platform_editor_adf_with_localid') ? _adfSchema.layoutColumnWithLocalId : _adfSchema.layoutColumn
       }];
     },
     pmPlugins: function pmPlugins() {
@@ -149,7 +159,7 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
         }
         return undefined;
       },
-      quickInsert: function quickInsert(_ref3) {
+      quickInsert: isRegisteredSlashCommandEnabled ? undefined : function (_ref3) {
         var formatMessage = _ref3.formatMessage;
         var withInsertLayoutAnalytics = function withInsertLayoutAnalytics(tr, columnCount) {
           var _api$analytics3;
@@ -177,7 +187,7 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
             },
             action: function action(insert, state) {
               var tr = insert((0, _actions.createMultiColumnLayoutSection)(state, 1));
-              if ((0, _platformFeatureFlags.fg)('platform_editor_column_count_analytics')) {
+              if ((0, _fg.fg)('platform_editor_column_count_analytics')) {
                 withInsertLayoutAnalytics(tr, 1);
               } else {
                 withInsertLayoutAnalytics(tr);
@@ -205,7 +215,7 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
                 icon: Icon,
                 action: function action(insert, state) {
                   var tr = insert((0, _actions.createMultiColumnLayoutSection)(state, columnCount));
-                  if ((0, _platformFeatureFlags.fg)('platform_editor_column_count_analytics')) {
+                  if ((0, _fg.fg)('platform_editor_column_count_analytics')) {
                     withInsertLayoutAnalytics(tr, columnCount);
                   } else {
                     withInsertLayoutAnalytics(tr);
@@ -266,7 +276,7 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
             },
             action: function action(insert, state) {
               var tr = insert((0, _actions.createMultiColumnLayoutSection)(state, 2));
-              if ((0, _platformFeatureFlags.fg)('platform_editor_column_count_analytics')) {
+              if ((0, _fg.fg)('platform_editor_column_count_analytics')) {
                 withInsertLayoutAnalytics(tr, 2);
               } else {
                 withInsertLayoutAnalytics(tr);
@@ -287,7 +297,7 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
             },
             action: function action(insert, state) {
               var tr = insert((0, _actions.createMultiColumnLayoutSection)(state, 3));
-              if ((0, _platformFeatureFlags.fg)('platform_editor_column_count_analytics')) {
+              if ((0, _fg.fg)('platform_editor_column_count_analytics')) {
                 withInsertLayoutAnalytics(tr, 3);
               } else {
                 withInsertLayoutAnalytics(tr);
@@ -308,7 +318,7 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
             },
             action: function action(insert, state) {
               var tr = insert((0, _actions.createMultiColumnLayoutSection)(state, 4));
-              if ((0, _platformFeatureFlags.fg)('platform_editor_column_count_analytics')) {
+              if ((0, _fg.fg)('platform_editor_column_count_analytics')) {
                 withInsertLayoutAnalytics(tr, 4);
               } else {
                 withInsertLayoutAnalytics(tr);
@@ -329,7 +339,7 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
             },
             action: function action(insert, state) {
               var tr = insert((0, _actions.createMultiColumnLayoutSection)(state, 5));
-              if ((0, _platformFeatureFlags.fg)('platform_editor_column_count_analytics')) {
+              if ((0, _fg.fg)('platform_editor_column_count_analytics')) {
                 withInsertLayoutAnalytics(tr, 5);
               } else {
                 withInsertLayoutAnalytics(tr);

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

@@ -0,0 +1,53 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LayoutQuickInsertMenuItem = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntl = require("react-intl");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _assets = require("@atlaskit/editor-common/assets");
+var _menuItem = require("@atlaskit/editor-common/quick-insert/menu-item");
+var _layoutPlugin = require("../../layoutPlugin");
+var _actions = require("../../pm-plugins/actions");
+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 icons = {
+  2: _assets.IconTwoColumnLayout,
+  3: _assets.IconThreeColumnLayout,
+  4: _assets.IconFourColumnLayout,
+  5: _assets.IconFiveColumnLayout
+};
+var LayoutQuickInsertMenuItem = exports.LayoutQuickInsertMenuItem = function LayoutQuickInsertMenuItem(_ref) {
+  var api = _ref.api,
+    columnCount = _ref.columnCount,
+    title = _ref.title;
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var Icon = icons[columnCount];
+  var onSelect = (0, _react.useCallback)(function (_ref2) {
+    var _api$analytics;
+    var editorView = _ref2.editorView,
+      insert = _ref2.insert,
+      source = _ref2.source;
+    var tr = insert((0, _actions.createMultiColumnLayoutSection)(editorView.state, columnCount));
+    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.LAYOUT,
+      attributes: {
+        columnCount: columnCount,
+        inputMethod: source
+      },
+      eventType: _analytics.EVENT_TYPE.TRACK
+    })(tr);
+    (0, _layoutPlugin.selectIntoLayoutSection)(tr);
+    return tr;
+  }, [api, columnCount]);
+  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/getLayoutQuickInsertComponents.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getLayoutQuickInsertComponents = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _messages = require("@atlaskit/editor-common/messages");
+var _createQuickInsertMatcher = require("@atlaskit/editor-common/quick-insert/create-quick-insert-matcher");
+var _keys = require("@atlaskit/editor-common/quick-insert/keys");
+var _rank = require("@atlaskit/editor-common/quick-insert/rank");
+var _LayoutQuickInsertMenuItem = require("./LayoutQuickInsertMenuItem");
+var layoutItems = [{
+  columnCount: 2,
+  description: _messages.toolbarInsertBlockMessages.columnsDescriptionAdvancedLayout,
+  item: _keys.TWO_COLUMNS_LAYOUT_MENU_ITEM,
+  keyword: 'two column',
+  title: _messages.layoutMessages.twoColumnsAdvancedLayout
+}, {
+  columnCount: 3,
+  description: _messages.toolbarInsertBlockMessages.columnsDescriptionAdvancedLayout,
+  item: _keys.THREE_COLUMNS_LAYOUT_MENU_ITEM,
+  keyword: 'three column',
+  title: _messages.layoutMessages.threeColumnsAdvancedLayout
+}, {
+  columnCount: 4,
+  description: _messages.toolbarInsertBlockMessages.columnsDescriptionAdvancedLayout,
+  item: _keys.FOUR_COLUMNS_LAYOUT_MENU_ITEM,
+  keyword: 'four column',
+  title: _messages.layoutMessages.fourColumns
+}, {
+  columnCount: 5,
+  description: _messages.toolbarInsertBlockMessages.columnsDescriptionAdvancedLayout,
+  item: _keys.FIVE_COLUMNS_LAYOUT_MENU_ITEM,
+  keyword: 'five column',
+  title: _messages.layoutMessages.fiveColumns
+}];
+var getLayoutQuickInsertComponents = exports.getLayoutQuickInsertComponents = function getLayoutQuickInsertComponents(_ref) {
+  var api = _ref.api;
+  return layoutItems.map(function (_ref2) {
+    var columnCount = _ref2.columnCount,
+      description = _ref2.description,
+      item = _ref2.item,
+      keyword = _ref2.keyword,
+      title = _ref2.title;
+    return {
+      key: item.key,
+      type: item.type,
+      parents: [{
+        key: _keys.STRUCTURE_SECTION.key,
+        type: _keys.STRUCTURE_SECTION.type,
+        rank: _rank.STRUCTURE_SECTION_RANK[item.key]
+      }],
+      match: (0, _createQuickInsertMatcher.createQuickInsertMatcher)(function (_ref3) {
+        var formatMessage = _ref3.formatMessage;
+        return {
+          description: formatMessage(description, {
+            numberOfColumns: ['one', 'two', 'three', 'four', 'five'][columnCount - 1]
+          }),
+          keywords: ['layout', 'column', 'section', 'col', keyword],
+          title: formatMessage(title)
+        };
+      }),
+      component: function component() {
+        return /*#__PURE__*/_react.default.createElement(_LayoutQuickInsertMenuItem.LayoutQuickInsertMenuItem, {
+          api: api,
+          columnCount: columnCount,
+          title: title
+        });
+      }
+    };
+  });
+};

package/dist/es2019/layoutPlugin.js

@@ -7,7 +7,8 @@ import { layoutMessages, toolbarInsertBlockMessages as messages } from '@atlaski
 import { IconFiveColumnLayout, IconFourColumnLayout, IconLayout, IconOneColumnLayout, IconThreeColumnLayout, IconTwoColumnLayout } from '@atlaskit/editor-common/quick-insert';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNode } from '@atlaskit/editor-prosemirror/utils';
-import { fg } from '@atlaskit/platform-feature-flags';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { createDefaultLayoutSection, createMultiColumnLayoutSection, deleteLayoutColumn, distributeLayoutColumns, insertLayoutColumn, insertLayoutColumnsWithAnalytics, setLayoutColumnDangerPreview, setLayoutColumnValign, toggleLayoutColumnMenu } from './pm-plugins/actions';
@@ -19,6 +20,7 @@ import { GlobalStylesWrapper } from './ui/global-styles';
 import { createLayoutBlockMenuItem } from './ui/LayoutBlockMenuItem';
 import { LayoutColumnMenu } from './ui/LayoutColumnMenu';
 import { getLayoutColumnMenuComponents } from './ui/LayoutColumnMenu/components';
+import { getLayoutQuickInsertComponents } from './ui/quick-insert/getLayoutQuickInsertComponents';
 import { buildToolbar } from './ui/toolbar';
 const LAYOUT_SECTION_NODE_NAME = 'layoutSection';
 
@@ -53,9 +55,11 @@ export const layoutPlugin = ({
   api
 }) => {
   var _api$analytics2;
-  const allowAdvancedSingleColumnLayout = editorExperiment('advanced_layouts', true) && editorExperiment('single_column_layouts', true, {
+  const isAdvancedLayoutEnabled = editorExperiment('advanced_layouts', true);
+  const allowAdvancedSingleColumnLayout = isAdvancedLayoutEnabled && editorExperiment('single_column_layouts', true, {
     exposure: true
   });
+  const isRegisteredSlashCommandEnabled = isExperimentEnabled('platform_editor_slash_command') && isAdvancedLayoutEnabled;
   if (editorExperiment('platform_editor_block_menu', true)) {
     var _api$blockMenu;
     api === null || api === void 0 ? void 0 : (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.actions.registerBlockMenuComponents([{
@@ -79,6 +83,12 @@ export const layoutPlugin = ({
       api
     }));
   }
+  if (isRegisteredSlashCommandEnabled) {
+    var _api$uiControlRegistr2;
+    api === null || api === void 0 ? void 0 : (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.register(getLayoutQuickInsertComponents({
+      api
+    }));
+  }
   return {
     name: 'layout',
     nodes() {
@@ -140,7 +150,7 @@ export const layoutPlugin = ({
         }
         return undefined;
       },
-      quickInsert: ({
+      quickInsert: isRegisteredSlashCommandEnabled ? undefined : ({
         formatMessage
       }) => {
         const withInsertLayoutAnalytics = (tr, columnCount) => {

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

@@ -0,0 +1,48 @@
+import React, { useCallback } from 'react';
+import { useIntl } from 'react-intl';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { IconFiveColumnLayout, IconFourColumnLayout, IconThreeColumnLayout, IconTwoColumnLayout } from '@atlaskit/editor-common/assets';
+import { QuickInsertMenuItem } from '@atlaskit/editor-common/quick-insert/menu-item';
+import { selectIntoLayoutSection } from '../../layoutPlugin';
+import { createMultiColumnLayoutSection } from '../../pm-plugins/actions';
+const icons = {
+  2: IconTwoColumnLayout,
+  3: IconThreeColumnLayout,
+  4: IconFourColumnLayout,
+  5: IconFiveColumnLayout
+};
+export const LayoutQuickInsertMenuItem = ({
+  api,
+  columnCount,
+  title
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const Icon = icons[columnCount];
+  const onSelect = useCallback(({
+    editorView,
+    insert,
+    source
+  }) => {
+    var _api$analytics;
+    const tr = insert(createMultiColumnLayoutSection(editorView.state, columnCount));
+    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.LAYOUT,
+      attributes: {
+        columnCount,
+        inputMethod: source
+      },
+      eventType: EVENT_TYPE.TRACK
+    })(tr);
+    selectIntoLayoutSection(tr);
+    return tr;
+  }, [api, columnCount]);
+  return /*#__PURE__*/React.createElement(QuickInsertMenuItem, {
+    iconBefore: /*#__PURE__*/React.createElement(Icon, null),
+    onSelect: onSelect,
+    title: formatMessage(title)
+  });
+};

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

@@ -0,0 +1,62 @@
+import React from 'react';
+import { layoutMessages, toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { createQuickInsertMatcher } from '@atlaskit/editor-common/quick-insert/create-quick-insert-matcher';
+import { FIVE_COLUMNS_LAYOUT_MENU_ITEM, FOUR_COLUMNS_LAYOUT_MENU_ITEM, STRUCTURE_SECTION, THREE_COLUMNS_LAYOUT_MENU_ITEM, TWO_COLUMNS_LAYOUT_MENU_ITEM } from '@atlaskit/editor-common/quick-insert/keys';
+import { STRUCTURE_SECTION_RANK } from '@atlaskit/editor-common/quick-insert/rank';
+import { LayoutQuickInsertMenuItem } from './LayoutQuickInsertMenuItem';
+const layoutItems = [{
+  columnCount: 2,
+  description: messages.columnsDescriptionAdvancedLayout,
+  item: TWO_COLUMNS_LAYOUT_MENU_ITEM,
+  keyword: 'two column',
+  title: layoutMessages.twoColumnsAdvancedLayout
+}, {
+  columnCount: 3,
+  description: messages.columnsDescriptionAdvancedLayout,
+  item: THREE_COLUMNS_LAYOUT_MENU_ITEM,
+  keyword: 'three column',
+  title: layoutMessages.threeColumnsAdvancedLayout
+}, {
+  columnCount: 4,
+  description: messages.columnsDescriptionAdvancedLayout,
+  item: FOUR_COLUMNS_LAYOUT_MENU_ITEM,
+  keyword: 'four column',
+  title: layoutMessages.fourColumns
+}, {
+  columnCount: 5,
+  description: messages.columnsDescriptionAdvancedLayout,
+  item: FIVE_COLUMNS_LAYOUT_MENU_ITEM,
+  keyword: 'five column',
+  title: layoutMessages.fiveColumns
+}];
+export const getLayoutQuickInsertComponents = ({
+  api
+}) => layoutItems.map(({
+  columnCount,
+  description,
+  item,
+  keyword,
+  title
+}) => ({
+  key: item.key,
+  type: item.type,
+  parents: [{
+    key: STRUCTURE_SECTION.key,
+    type: STRUCTURE_SECTION.type,
+    rank: STRUCTURE_SECTION_RANK[item.key]
+  }],
+  match: createQuickInsertMatcher(({
+    formatMessage
+  }) => ({
+    description: formatMessage(description, {
+      numberOfColumns: ['one', 'two', 'three', 'four', 'five'][columnCount - 1]
+    }),
+    keywords: ['layout', 'column', 'section', 'col', keyword],
+    title: formatMessage(title)
+  })),
+  component: () => /*#__PURE__*/React.createElement(LayoutQuickInsertMenuItem, {
+    api: api,
+    columnCount: columnCount,
+    title: title
+  })
+}));

package/dist/esm/layoutPlugin.js

@@ -7,7 +7,8 @@ import { layoutMessages, toolbarInsertBlockMessages as messages } from '@atlaski
 import { IconFiveColumnLayout, IconFourColumnLayout, IconLayout, IconOneColumnLayout, IconThreeColumnLayout, IconTwoColumnLayout } from '@atlaskit/editor-common/quick-insert';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNode } from '@atlaskit/editor-prosemirror/utils';
-import { fg } from '@atlaskit/platform-feature-flags';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { createDefaultLayoutSection, createMultiColumnLayoutSection, deleteLayoutColumn as _deleteLayoutColumn, distributeLayoutColumns as _distributeLayoutColumns, insertLayoutColumn as _insertLayoutColumn, insertLayoutColumnsWithAnalytics, setLayoutColumnDangerPreview, setLayoutColumnValign as _setLayoutColumnValign, toggleLayoutColumnMenu } from './pm-plugins/actions';
@@ -19,6 +20,7 @@ import { GlobalStylesWrapper } from './ui/global-styles';
 import { createLayoutBlockMenuItem } from './ui/LayoutBlockMenuItem';
 import { LayoutColumnMenu } from './ui/LayoutColumnMenu';
 import { getLayoutColumnMenuComponents } from './ui/LayoutColumnMenu/components';
+import { getLayoutQuickInsertComponents } from './ui/quick-insert/getLayoutQuickInsertComponents';
 import { buildToolbar } from './ui/toolbar';
 var LAYOUT_SECTION_NODE_NAME = 'layoutSection';
 
@@ -54,9 +56,11 @@ export var layoutPlugin = function layoutPlugin(_ref) {
   var _ref$config = _ref.config,
     options = _ref$config === void 0 ? {} : _ref$config,
     api = _ref.api;
-  var allowAdvancedSingleColumnLayout = editorExperiment('advanced_layouts', true) && editorExperiment('single_column_layouts', true, {
+  var isAdvancedLayoutEnabled = editorExperiment('advanced_layouts', true);
+  var allowAdvancedSingleColumnLayout = isAdvancedLayoutEnabled && editorExperiment('single_column_layouts', true, {
     exposure: true
   });
+  var isRegisteredSlashCommandEnabled = isExperimentEnabled('platform_editor_slash_command') && isAdvancedLayoutEnabled;
   if (editorExperiment('platform_editor_block_menu', true)) {
     var _api$blockMenu;
     api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 || _api$blockMenu.actions.registerBlockMenuComponents([{
@@ -80,6 +84,12 @@ export var layoutPlugin = function layoutPlugin(_ref) {
       api: api
     }));
   }
+  if (isRegisteredSlashCommandEnabled) {
+    var _api$uiControlRegistr2;
+    api === null || api === void 0 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 || _api$uiControlRegistr2.actions.register(getLayoutQuickInsertComponents({
+      api: api
+    }));
+  }
   return {
     name: 'layout',
     nodes: function nodes() {
@@ -142,7 +152,7 @@ export var layoutPlugin = function layoutPlugin(_ref) {
         }
         return undefined;
       },
-      quickInsert: function quickInsert(_ref3) {
+      quickInsert: isRegisteredSlashCommandEnabled ? undefined : function (_ref3) {
         var formatMessage = _ref3.formatMessage;
         var withInsertLayoutAnalytics = function withInsertLayoutAnalytics(tr, columnCount) {
           var _api$analytics3;

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

@@ -0,0 +1,45 @@
+import React, { useCallback } from 'react';
+import { useIntl } from 'react-intl';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { IconFiveColumnLayout, IconFourColumnLayout, IconThreeColumnLayout, IconTwoColumnLayout } from '@atlaskit/editor-common/assets';
+import { QuickInsertMenuItem } from '@atlaskit/editor-common/quick-insert/menu-item';
+import { selectIntoLayoutSection } from '../../layoutPlugin';
+import { createMultiColumnLayoutSection } from '../../pm-plugins/actions';
+var icons = {
+  2: IconTwoColumnLayout,
+  3: IconThreeColumnLayout,
+  4: IconFourColumnLayout,
+  5: IconFiveColumnLayout
+};
+export var LayoutQuickInsertMenuItem = function LayoutQuickInsertMenuItem(_ref) {
+  var api = _ref.api,
+    columnCount = _ref.columnCount,
+    title = _ref.title;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var Icon = icons[columnCount];
+  var onSelect = useCallback(function (_ref2) {
+    var _api$analytics;
+    var editorView = _ref2.editorView,
+      insert = _ref2.insert,
+      source = _ref2.source;
+    var tr = insert(createMultiColumnLayoutSection(editorView.state, columnCount));
+    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.LAYOUT,
+      attributes: {
+        columnCount: columnCount,
+        inputMethod: source
+      },
+      eventType: EVENT_TYPE.TRACK
+    })(tr);
+    selectIntoLayoutSection(tr);
+    return tr;
+  }, [api, columnCount]);
+  return /*#__PURE__*/React.createElement(QuickInsertMenuItem, {
+    iconBefore: /*#__PURE__*/React.createElement(Icon, null),
+    onSelect: onSelect,
+    title: formatMessage(title)
+  });
+};

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

@@ -0,0 +1,67 @@
+import React from 'react';
+import { layoutMessages, toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { createQuickInsertMatcher } from '@atlaskit/editor-common/quick-insert/create-quick-insert-matcher';
+import { FIVE_COLUMNS_LAYOUT_MENU_ITEM, FOUR_COLUMNS_LAYOUT_MENU_ITEM, STRUCTURE_SECTION, THREE_COLUMNS_LAYOUT_MENU_ITEM, TWO_COLUMNS_LAYOUT_MENU_ITEM } from '@atlaskit/editor-common/quick-insert/keys';
+import { STRUCTURE_SECTION_RANK } from '@atlaskit/editor-common/quick-insert/rank';
+import { LayoutQuickInsertMenuItem } from './LayoutQuickInsertMenuItem';
+var layoutItems = [{
+  columnCount: 2,
+  description: messages.columnsDescriptionAdvancedLayout,
+  item: TWO_COLUMNS_LAYOUT_MENU_ITEM,
+  keyword: 'two column',
+  title: layoutMessages.twoColumnsAdvancedLayout
+}, {
+  columnCount: 3,
+  description: messages.columnsDescriptionAdvancedLayout,
+  item: THREE_COLUMNS_LAYOUT_MENU_ITEM,
+  keyword: 'three column',
+  title: layoutMessages.threeColumnsAdvancedLayout
+}, {
+  columnCount: 4,
+  description: messages.columnsDescriptionAdvancedLayout,
+  item: FOUR_COLUMNS_LAYOUT_MENU_ITEM,
+  keyword: 'four column',
+  title: layoutMessages.fourColumns
+}, {
+  columnCount: 5,
+  description: messages.columnsDescriptionAdvancedLayout,
+  item: FIVE_COLUMNS_LAYOUT_MENU_ITEM,
+  keyword: 'five column',
+  title: layoutMessages.fiveColumns
+}];
+export var getLayoutQuickInsertComponents = function getLayoutQuickInsertComponents(_ref) {
+  var api = _ref.api;
+  return layoutItems.map(function (_ref2) {
+    var columnCount = _ref2.columnCount,
+      description = _ref2.description,
+      item = _ref2.item,
+      keyword = _ref2.keyword,
+      title = _ref2.title;
+    return {
+      key: item.key,
+      type: item.type,
+      parents: [{
+        key: STRUCTURE_SECTION.key,
+        type: STRUCTURE_SECTION.type,
+        rank: STRUCTURE_SECTION_RANK[item.key]
+      }],
+      match: createQuickInsertMatcher(function (_ref3) {
+        var formatMessage = _ref3.formatMessage;
+        return {
+          description: formatMessage(description, {
+            numberOfColumns: ['one', 'two', 'three', 'four', 'five'][columnCount - 1]
+          }),
+          keywords: ['layout', 'column', 'section', 'col', keyword],
+          title: formatMessage(title)
+        };
+      }),
+      component: function component() {
+        return /*#__PURE__*/React.createElement(LayoutQuickInsertMenuItem, {
+          api: api,
+          columnCount: columnCount,
+          title: title
+        });
+      }
+    };
+  });
+};

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { MessageDescriptor } from 'react-intl';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { LayoutPlugin } from '../../layoutPluginType';
+type Props = {
+    api: ExtractInjectionAPI<LayoutPlugin> | undefined;
+    columnCount: 2 | 3 | 4 | 5;
+    title: MessageDescriptor;
+};
+export declare const LayoutQuickInsertMenuItem: ({ api, columnCount, title, }: Props) => React.JSX.Element;
+export {};

package/dist/types/ui/quick-insert/getLayoutQuickInsertComponents.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 { LayoutPlugin } from '../../layoutPluginType';
+type Params = {
+    api: ExtractInjectionAPI<LayoutPlugin> | undefined;
+};
+export declare const getLayoutQuickInsertComponents: ({ api }: Params) => RegisterMenuItem[];
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-layout",
-	"version": "16.0.0",
+	"version": "16.0.1",
 	"description": "Layout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -41,6 +41,7 @@
 		"@atlaskit/editor-ui-control-model": "^2.6.0",
 		"@atlaskit/icon": "^37.3.0",
 		"@atlaskit/icon-lab": "^7.5.0",
+		"@atlaskit/platform-feature-experiments": "^0.3.0",
 		"@atlaskit/platform-feature-flags": "^2.1.0",
 		"@atlaskit/tmp-editor-statsig": "^147.1.0",
 		"@atlaskit/tokens": "^16.7.0",
@@ -49,7 +50,7 @@
 		"bind-event-listener": "^3.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^119.0.0",
+		"@atlaskit/editor-common": "^119.1.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
 	},