@atlaskit/editor-plugin-code-block 17.0.0 → 17.0.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-code-block
 
+## 17.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
+
 ## 17.0.0
 
 ### Patch Changes

package/dist/cjs/codeBlockPlugin.js

@@ -12,8 +12,9 @@ var _adfSchema = require("@atlaskit/adf-schema");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _blockMenu = require("@atlaskit/editor-common/block-menu");
 var _messages = require("@atlaskit/editor-common/messages");
-var _quickInsert = require("@atlaskit/editor-common/quick-insert");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _assets = require("@atlaskit/editor-common/assets");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _editorCommands = require("./editor-commands");
@@ -29,12 +30,14 @@ var _refreshBrowserSelection = _interopRequireDefault(require("./pm-plugins/refr
 var _toolbar = require("./pm-plugins/toolbar");
 var _CodeBlockMenuItem = require("./ui/CodeBlockMenuItem");
 var _FormatCodeErrorFlag = require("./ui/FormatCodeErrorFlag");
+var _getCodeBlockQuickInsertComponents = require("./ui/quick-insert/getCodeBlockQuickInsertComponents");
 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 CODE_BLOCK_NODE_NAME = 'codeBlock';
 var codeBlockPlugin = function codeBlockPlugin(_ref) {
   var options = _ref.config,
     api = _ref.api;
+  var isRegisteredSlashCommandEnabled = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_slash_command');
   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([{
@@ -52,12 +55,18 @@ var codeBlockPlugin = function codeBlockPlugin(_ref) {
       }
     }]);
   }
-  return {
+  if (isRegisteredSlashCommandEnabled) {
+    var _api$uiControlRegistr;
+    api === null || api === void 0 || (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 || _api$uiControlRegistr.actions.register((0, _getCodeBlockQuickInsertComponents.getCodeBlockQuickInsertComponents)({
+      api: api
+    }));
+  }
+  var plugin = {
     name: 'codeBlock',
     nodes: function nodes() {
       return [{
         name: 'codeBlock',
-        node: (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_code_block_q4_lovability', 'isEnabled', true) ? _adfSchema.codeBlock : (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') ? _adfSchema.codeBlockWithLocalId : _adfSchema.codeBlock
+        node: (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_code_block_q4_lovability', 'isEnabled', true) ? _adfSchema.codeBlock : (0, _fg.fg)('platform_editor_adf_with_localid') ? _adfSchema.codeBlockWithLocalId : _adfSchema.codeBlock
       }];
     },
     getSharedState: function getSharedState(state) {
@@ -89,7 +98,7 @@ var codeBlockPlugin = function codeBlockPlugin(_ref) {
           var schema = _ref3.schema;
           return (0, _inputRule.createCodeBlockInputRule)(schema, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
         }
-      }].concat((0, _toConsumableArray2.default)((0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_code_block_q4_lovability', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_code_block_language_detection_flow') ? [{
+      }].concat((0, _toConsumableArray2.default)((0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_code_block_q4_lovability', 'isEnabled', true) && (0, _fg.fg)('platform_editor_code_block_language_detection_flow') ? [{
         name: 'codeBlockAutoDetect',
         plugin: function plugin() {
           return (0, _autoDetect.createAutoDetectPlugin)(api);
@@ -131,7 +140,7 @@ var codeBlockPlugin = function codeBlockPlugin(_ref) {
         return (0, _editorCommands.insertCodeBlockWithAnalytics)(inputMethod, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions);
       }
     },
-    pluginsOptions: {
+    pluginsOptions: _objectSpread(_objectSpread({}, !isRegisteredSlashCommandEnabled && {
       quickInsert: function quickInsert(_ref5) {
         var formatMessage = _ref5.formatMessage;
         return [{
@@ -142,7 +151,7 @@ var codeBlockPlugin = function codeBlockPlugin(_ref) {
           priority: 700,
           keyshortcut: '```',
           icon: function icon() {
-            return /*#__PURE__*/_react.default.createElement(_quickInsert.IconCode, null);
+            return /*#__PURE__*/_react.default.createElement(_assets.IconCode, null);
           },
           action: function action(_insert, state, source) {
             var _api$analytics3;
@@ -161,14 +170,16 @@ var codeBlockPlugin = function codeBlockPlugin(_ref) {
             return tr;
           }
         }];
-      },
+      }
+    }), {}, {
       floatingToolbar: (0, _toolbar.getToolbarConfig)(options === null || options === void 0 ? void 0 : options.allowCopyToClipboard, api, options === null || options === void 0 ? void 0 : options.overrideLanguageName, options === null || options === void 0 ? void 0 : options.formatCodeProvider)
-    },
+    }),
     contentComponent: function contentComponent() {
       return (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_code_block_q4_lovability', 'isEnabled', true) ? /*#__PURE__*/_react.default.createElement(_FormatCodeErrorFlag.FormatCodeErrorFlag, {
         api: api
       }) : null;
     }
   };
+  return plugin;
 };
 var _default = exports.default = codeBlockPlugin;

package/dist/cjs/editor-commands/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createFormatCodeOnClick = exports.copyContentToClipboardWithAnalytics = exports.copyContentToClipboard = exports.changeLanguage = void 0;
 exports.createInsertCodeBlockTransaction = createInsertCodeBlockTransaction;
+exports.createInsertCodeBlockTransactionWithAnalytics = createInsertCodeBlockTransactionWithAnalytics;
 exports.ignoreFollowingMutations = exports.detectLanguage = void 0;
 exports.insertCodeBlockWithAnalytics = insertCodeBlockWithAnalytics;
 exports.toggleWordWrapStateForCodeBlockNode = exports.toggleLineNumbersForCodeBlockNodeEditorCommand = exports.toggleLineNumbersForCodeBlockNode = exports.resetShouldIgnoreFollowingMutations = exports.resetCopiedState = exports.removeCodeBlockWithAnalytics = exports.removeCodeBlock = void 0;
@@ -448,6 +449,24 @@ function createInsertCodeBlockTransaction(_ref8) {
   }
   return tr;
 }
+function createInsertCodeBlockTransactionWithAnalytics(_ref9) {
+  var analyticsAPI = _ref9.analyticsAPI,
+    inputMethod = _ref9.inputMethod,
+    state = _ref9.state;
+  var tr = createInsertCodeBlockTransaction({
+    state: state
+  });
+  analyticsAPI === null || analyticsAPI === void 0 || analyticsAPI.attachAnalyticsEvent({
+    action: _analytics.ACTION.INSERTED,
+    actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
+    actionSubjectId: _analytics.ACTION_SUBJECT_ID.CODE_BLOCK,
+    attributes: {
+      inputMethod: inputMethod
+    },
+    eventType: _analytics.EVENT_TYPE.TRACK
+  })(tr);
+  return tr;
+}
 function insertCodeBlockWithAnalytics(inputMethod, analyticsAPI) {
   return (0, _editorAnalytics.withAnalytics)(analyticsAPI, {
     action: _analytics.ACTION.INSERTED,
@@ -509,8 +528,8 @@ var toggleWordWrapStateForCodeBlockNode = exports.toggleWordWrapStateForCodeBloc
   };
 };
 var toggleLineNumbersForCodeBlockNodeEditorCommand = exports.toggleLineNumbersForCodeBlockNodeEditorCommand = function toggleLineNumbersForCodeBlockNodeEditorCommand(editorAnalyticsAPI) {
-  return function (_ref9) {
-    var tr = _ref9.tr;
+  return function (_ref0) {
+    var tr = _ref0.tr;
     var codeBlockType = tr.doc.type.schema.nodes.codeBlock;
     var codeBlock = (0, _utils.findSelectedNodeOfType)(codeBlockType)(tr.selection) || (0, _utils.findParentNodeOfType)(codeBlockType)(tr.selection);
     if (!codeBlock) {

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

@@ -0,0 +1,44 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CodeBlockQuickInsertMenuItem = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntl = require("react-intl");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _messages = require("@atlaskit/editor-common/messages");
+var _assets = require("@atlaskit/editor-common/assets");
+var _menuItem = require("@atlaskit/editor-common/quick-insert/menu-item");
+var _editorCommands = require("../../editor-commands");
+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 CodeBlockQuickInsertMenuItem = exports.CodeBlockQuickInsertMenuItem = function CodeBlockQuickInsertMenuItem(_ref) {
+  var api = _ref.api;
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['editorDisabled'], function (states) {
+      var _states$editorDisable;
+      return {
+        editorDisabled: (_states$editorDisable = states.editorDisabledState) === null || _states$editorDisable === void 0 ? void 0 : _states$editorDisable.editorDisabled
+      };
+    }),
+    editorDisabled = _useSharedPluginState.editorDisabled;
+  var onSelect = (0, _react.useCallback)(function (_ref2) {
+    var _api$analytics;
+    var editorView = _ref2.editorView,
+      source = _ref2.source;
+    return (0, _editorCommands.createInsertCodeBlockTransactionWithAnalytics)({
+      analyticsAPI: api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions,
+      inputMethod: source,
+      state: editorView.state
+    });
+  }, [api]);
+  return /*#__PURE__*/_react.default.createElement(_menuItem.QuickInsertMenuItem, {
+    iconBefore: /*#__PURE__*/_react.default.createElement(_assets.IconCode, null),
+    isDisabled: editorDisabled,
+    onSelect: onSelect,
+    shortcut: "```",
+    title: formatMessage(_messages.blockTypeMessages.codeblock)
+  });
+};

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

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getCodeBlockQuickInsertComponents = 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 _CodeBlockQuickInsertMenuItem = require("./CodeBlockQuickInsertMenuItem");
+var getCodeBlockQuickInsertComponents = exports.getCodeBlockQuickInsertComponents = function getCodeBlockQuickInsertComponents(_ref) {
+  var api = _ref.api;
+  return [{
+    key: _keys.CODE_BLOCK_MENU_ITEM.key,
+    type: _keys.CODE_BLOCK_MENU_ITEM.type,
+    parents: [{
+      key: _keys.STRUCTURE_SECTION.key,
+      type: _keys.STRUCTURE_SECTION.type,
+      rank: _rank.STRUCTURE_SECTION_RANK[_keys.CODE_BLOCK_MENU_ITEM.key]
+    }],
+    match: (0, _createQuickInsertMatcher.createQuickInsertMatcher)(function (_ref2) {
+      var formatMessage = _ref2.formatMessage;
+      return {
+        description: formatMessage(_messages.blockTypeMessages.codeblockDescription),
+        keywords: ['code block'],
+        shortcut: '```',
+        title: formatMessage(_messages.blockTypeMessages.codeblock)
+      };
+    }),
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_CodeBlockQuickInsertMenuItem.CodeBlockQuickInsertMenuItem, {
+        api: api
+      });
+    }
+  }];
+};

package/dist/es2019/codeBlockPlugin.js

@@ -3,8 +3,9 @@ import { codeBlock, codeBlockWithLocalId } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { TRANSFORM_STRUCTURE_MENU_SECTION, TRANSFORM_STRUCTURE_CODE_BLOCK_MENU_ITEM, TRANSFORM_STRUCTURE_MENU_SECTION_RANK } from '@atlaskit/editor-common/block-menu';
 import { blockTypeMessages } from '@atlaskit/editor-common/messages';
-import { IconCode } from '@atlaskit/editor-common/quick-insert';
-import { fg } from '@atlaskit/platform-feature-flags';
+import { IconCode } from '@atlaskit/editor-common/assets';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { createInsertCodeBlockTransaction, insertCodeBlockWithAnalytics } from './editor-commands';
@@ -20,11 +21,13 @@ import refreshBrowserSelectionOnChange from './pm-plugins/refresh-browser-select
 import { getToolbarConfig } from './pm-plugins/toolbar';
 import { createCodeBlockMenuItem } from './ui/CodeBlockMenuItem';
 import { FormatCodeErrorFlag } from './ui/FormatCodeErrorFlag';
+import { getCodeBlockQuickInsertComponents } from './ui/quick-insert/getCodeBlockQuickInsertComponents';
 const CODE_BLOCK_NODE_NAME = 'codeBlock';
 const codeBlockPlugin = ({
   config: options,
   api
 }) => {
+  const isRegisteredSlashCommandEnabled = isExperimentEnabled('platform_editor_slash_command');
   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([{
@@ -42,7 +45,13 @@ const codeBlockPlugin = ({
       }
     }]);
   }
-  return {
+  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(getCodeBlockQuickInsertComponents({
+      api
+    }));
+  }
+  const plugin = {
     name: 'codeBlock',
     nodes() {
       return [{
@@ -114,38 +123,41 @@ const codeBlockPlugin = ({
       }
     },
     pluginsOptions: {
-      quickInsert: ({
-        formatMessage
-      }) => [{
-        id: 'codeblock',
-        title: formatMessage(blockTypeMessages.codeblock),
-        description: formatMessage(blockTypeMessages.codeblockDescription),
-        keywords: ['code block'],
-        priority: 700,
-        keyshortcut: '```',
-        icon: () => /*#__PURE__*/React.createElement(IconCode, null),
-        action(_insert, state, source) {
-          var _api$analytics3;
-          const tr = createInsertCodeBlockTransaction({
-            state
-          });
-          api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions.attachAnalyticsEvent({
-            action: ACTION.INSERTED,
-            actionSubject: ACTION_SUBJECT.DOCUMENT,
-            actionSubjectId: ACTION_SUBJECT_ID.CODE_BLOCK,
-            attributes: {
-              inputMethod: source || INPUT_METHOD.QUICK_INSERT
-            },
-            eventType: EVENT_TYPE.TRACK
-          })(tr);
-          return tr;
-        }
-      }],
+      ...(!isRegisteredSlashCommandEnabled && {
+        quickInsert: ({
+          formatMessage
+        }) => [{
+          id: 'codeblock',
+          title: formatMessage(blockTypeMessages.codeblock),
+          description: formatMessage(blockTypeMessages.codeblockDescription),
+          keywords: ['code block'],
+          priority: 700,
+          keyshortcut: '```',
+          icon: () => /*#__PURE__*/React.createElement(IconCode, null),
+          action(_insert, state, source) {
+            var _api$analytics3;
+            const tr = createInsertCodeBlockTransaction({
+              state
+            });
+            api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions.attachAnalyticsEvent({
+              action: ACTION.INSERTED,
+              actionSubject: ACTION_SUBJECT.DOCUMENT,
+              actionSubjectId: ACTION_SUBJECT_ID.CODE_BLOCK,
+              attributes: {
+                inputMethod: source || INPUT_METHOD.QUICK_INSERT
+              },
+              eventType: EVENT_TYPE.TRACK
+            })(tr);
+            return tr;
+          }
+        }]
+      }),
       floatingToolbar: getToolbarConfig(options === null || options === void 0 ? void 0 : options.allowCopyToClipboard, api, options === null || options === void 0 ? void 0 : options.overrideLanguageName, options === null || options === void 0 ? void 0 : options.formatCodeProvider)
     },
     contentComponent: () => expValEqualsNoExposure('platform_editor_code_block_q4_lovability', 'isEnabled', true) ? /*#__PURE__*/React.createElement(FormatCodeErrorFlag, {
       api: api
     }) : null
   };
+  return plugin;
 };
 export default codeBlockPlugin;

package/dist/es2019/editor-commands/index.js

@@ -457,6 +457,25 @@ export function createInsertCodeBlockTransaction({
   }
   return tr;
 }
+export function createInsertCodeBlockTransactionWithAnalytics({
+  analyticsAPI,
+  inputMethod,
+  state
+}) {
+  const tr = createInsertCodeBlockTransaction({
+    state
+  });
+  analyticsAPI === null || analyticsAPI === void 0 ? void 0 : analyticsAPI.attachAnalyticsEvent({
+    action: ACTION.INSERTED,
+    actionSubject: ACTION_SUBJECT.DOCUMENT,
+    actionSubjectId: ACTION_SUBJECT_ID.CODE_BLOCK,
+    attributes: {
+      inputMethod
+    },
+    eventType: EVENT_TYPE.TRACK
+  })(tr);
+  return tr;
+}
 export function insertCodeBlockWithAnalytics(inputMethod, analyticsAPI) {
   return withAnalytics(analyticsAPI, {
     action: ACTION.INSERTED,

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

@@ -0,0 +1,40 @@
+import React, { useCallback } from 'react';
+import { useIntl } from 'react-intl';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { blockTypeMessages } from '@atlaskit/editor-common/messages';
+import { IconCode } from '@atlaskit/editor-common/assets';
+import { QuickInsertMenuItem } from '@atlaskit/editor-common/quick-insert/menu-item';
+import { createInsertCodeBlockTransactionWithAnalytics } from '../../editor-commands';
+export const CodeBlockQuickInsertMenuItem = ({
+  api
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const {
+    editorDisabled
+  } = useSharedPluginStateWithSelector(api, ['editorDisabled'], states => {
+    var _states$editorDisable;
+    return {
+      editorDisabled: (_states$editorDisable = states.editorDisabledState) === null || _states$editorDisable === void 0 ? void 0 : _states$editorDisable.editorDisabled
+    };
+  });
+  const onSelect = useCallback(({
+    editorView,
+    source
+  }) => {
+    var _api$analytics;
+    return createInsertCodeBlockTransactionWithAnalytics({
+      analyticsAPI: api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions,
+      inputMethod: source,
+      state: editorView.state
+    });
+  }, [api]);
+  return /*#__PURE__*/React.createElement(QuickInsertMenuItem, {
+    iconBefore: /*#__PURE__*/React.createElement(IconCode, null),
+    isDisabled: editorDisabled,
+    onSelect: onSelect,
+    shortcut: "```",
+    title: formatMessage(blockTypeMessages.codeblock)
+  });
+};

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { blockTypeMessages } from '@atlaskit/editor-common/messages';
+import { createQuickInsertMatcher } from '@atlaskit/editor-common/quick-insert/create-quick-insert-matcher';
+import { CODE_BLOCK_MENU_ITEM, STRUCTURE_SECTION } from '@atlaskit/editor-common/quick-insert/keys';
+import { STRUCTURE_SECTION_RANK } from '@atlaskit/editor-common/quick-insert/rank';
+import { CodeBlockQuickInsertMenuItem } from './CodeBlockQuickInsertMenuItem';
+export const getCodeBlockQuickInsertComponents = ({
+  api
+}) => [{
+  key: CODE_BLOCK_MENU_ITEM.key,
+  type: CODE_BLOCK_MENU_ITEM.type,
+  parents: [{
+    key: STRUCTURE_SECTION.key,
+    type: STRUCTURE_SECTION.type,
+    rank: STRUCTURE_SECTION_RANK[CODE_BLOCK_MENU_ITEM.key]
+  }],
+  match: createQuickInsertMatcher(({
+    formatMessage
+  }) => ({
+    description: formatMessage(blockTypeMessages.codeblockDescription),
+    keywords: ['code block'],
+    shortcut: '```',
+    title: formatMessage(blockTypeMessages.codeblock)
+  })),
+  component: () => /*#__PURE__*/React.createElement(CodeBlockQuickInsertMenuItem, {
+    api: api
+  })
+}];

package/dist/esm/codeBlockPlugin.js

@@ -7,8 +7,9 @@ import { codeBlock, codeBlockWithLocalId } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { TRANSFORM_STRUCTURE_MENU_SECTION, TRANSFORM_STRUCTURE_CODE_BLOCK_MENU_ITEM, TRANSFORM_STRUCTURE_MENU_SECTION_RANK } from '@atlaskit/editor-common/block-menu';
 import { blockTypeMessages } from '@atlaskit/editor-common/messages';
-import { IconCode } from '@atlaskit/editor-common/quick-insert';
-import { fg } from '@atlaskit/platform-feature-flags';
+import { IconCode } from '@atlaskit/editor-common/assets';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { createInsertCodeBlockTransaction, insertCodeBlockWithAnalytics } from './editor-commands';
@@ -24,10 +25,12 @@ import refreshBrowserSelectionOnChange from './pm-plugins/refresh-browser-select
 import { getToolbarConfig } from './pm-plugins/toolbar';
 import { createCodeBlockMenuItem } from './ui/CodeBlockMenuItem';
 import { FormatCodeErrorFlag } from './ui/FormatCodeErrorFlag';
+import { getCodeBlockQuickInsertComponents } from './ui/quick-insert/getCodeBlockQuickInsertComponents';
 var CODE_BLOCK_NODE_NAME = 'codeBlock';
 var codeBlockPlugin = function codeBlockPlugin(_ref) {
   var options = _ref.config,
     api = _ref.api;
+  var isRegisteredSlashCommandEnabled = isExperimentEnabled('platform_editor_slash_command');
   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([{
@@ -45,7 +48,13 @@ var codeBlockPlugin = function codeBlockPlugin(_ref) {
       }
     }]);
   }
-  return {
+  if (isRegisteredSlashCommandEnabled) {
+    var _api$uiControlRegistr;
+    api === null || api === void 0 || (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 || _api$uiControlRegistr.actions.register(getCodeBlockQuickInsertComponents({
+      api: api
+    }));
+  }
+  var plugin = {
     name: 'codeBlock',
     nodes: function nodes() {
       return [{
@@ -124,7 +133,7 @@ var codeBlockPlugin = function codeBlockPlugin(_ref) {
         return insertCodeBlockWithAnalytics(inputMethod, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions);
       }
     },
-    pluginsOptions: {
+    pluginsOptions: _objectSpread(_objectSpread({}, !isRegisteredSlashCommandEnabled && {
       quickInsert: function quickInsert(_ref5) {
         var formatMessage = _ref5.formatMessage;
         return [{
@@ -154,14 +163,16 @@ var codeBlockPlugin = function codeBlockPlugin(_ref) {
             return tr;
           }
         }];
-      },
+      }
+    }), {}, {
       floatingToolbar: getToolbarConfig(options === null || options === void 0 ? void 0 : options.allowCopyToClipboard, api, options === null || options === void 0 ? void 0 : options.overrideLanguageName, options === null || options === void 0 ? void 0 : options.formatCodeProvider)
-    },
+    }),
     contentComponent: function contentComponent() {
       return expValEqualsNoExposure('platform_editor_code_block_q4_lovability', 'isEnabled', true) ? /*#__PURE__*/React.createElement(FormatCodeErrorFlag, {
         api: api
       }) : null;
     }
   };
+  return plugin;
 };
 export default codeBlockPlugin;

package/dist/esm/editor-commands/index.js

@@ -437,6 +437,24 @@ export function createInsertCodeBlockTransaction(_ref8) {
   }
   return tr;
 }
+export function createInsertCodeBlockTransactionWithAnalytics(_ref9) {
+  var analyticsAPI = _ref9.analyticsAPI,
+    inputMethod = _ref9.inputMethod,
+    state = _ref9.state;
+  var tr = createInsertCodeBlockTransaction({
+    state: state
+  });
+  analyticsAPI === null || analyticsAPI === void 0 || analyticsAPI.attachAnalyticsEvent({
+    action: ACTION.INSERTED,
+    actionSubject: ACTION_SUBJECT.DOCUMENT,
+    actionSubjectId: ACTION_SUBJECT_ID.CODE_BLOCK,
+    attributes: {
+      inputMethod: inputMethod
+    },
+    eventType: EVENT_TYPE.TRACK
+  })(tr);
+  return tr;
+}
 export function insertCodeBlockWithAnalytics(inputMethod, analyticsAPI) {
   return withAnalytics(analyticsAPI, {
     action: ACTION.INSERTED,
@@ -498,8 +516,8 @@ export var toggleWordWrapStateForCodeBlockNode = function toggleWordWrapStateFor
   };
 };
 export var toggleLineNumbersForCodeBlockNodeEditorCommand = function toggleLineNumbersForCodeBlockNodeEditorCommand(editorAnalyticsAPI) {
-  return function (_ref9) {
-    var tr = _ref9.tr;
+  return function (_ref0) {
+    var tr = _ref0.tr;
     var codeBlockType = tr.doc.type.schema.nodes.codeBlock;
     var codeBlock = findSelectedNodeOfType(codeBlockType)(tr.selection) || findParentNodeOfType(codeBlockType)(tr.selection);
     if (!codeBlock) {

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

@@ -0,0 +1,36 @@
+import React, { useCallback } from 'react';
+import { useIntl } from 'react-intl';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { blockTypeMessages } from '@atlaskit/editor-common/messages';
+import { IconCode } from '@atlaskit/editor-common/assets';
+import { QuickInsertMenuItem } from '@atlaskit/editor-common/quick-insert/menu-item';
+import { createInsertCodeBlockTransactionWithAnalytics } from '../../editor-commands';
+export var CodeBlockQuickInsertMenuItem = function CodeBlockQuickInsertMenuItem(_ref) {
+  var api = _ref.api;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['editorDisabled'], function (states) {
+      var _states$editorDisable;
+      return {
+        editorDisabled: (_states$editorDisable = states.editorDisabledState) === null || _states$editorDisable === void 0 ? void 0 : _states$editorDisable.editorDisabled
+      };
+    }),
+    editorDisabled = _useSharedPluginState.editorDisabled;
+  var onSelect = useCallback(function (_ref2) {
+    var _api$analytics;
+    var editorView = _ref2.editorView,
+      source = _ref2.source;
+    return createInsertCodeBlockTransactionWithAnalytics({
+      analyticsAPI: api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions,
+      inputMethod: source,
+      state: editorView.state
+    });
+  }, [api]);
+  return /*#__PURE__*/React.createElement(QuickInsertMenuItem, {
+    iconBefore: /*#__PURE__*/React.createElement(IconCode, null),
+    isDisabled: editorDisabled,
+    onSelect: onSelect,
+    shortcut: "```",
+    title: formatMessage(blockTypeMessages.codeblock)
+  });
+};

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { blockTypeMessages } from '@atlaskit/editor-common/messages';
+import { createQuickInsertMatcher } from '@atlaskit/editor-common/quick-insert/create-quick-insert-matcher';
+import { CODE_BLOCK_MENU_ITEM, STRUCTURE_SECTION } from '@atlaskit/editor-common/quick-insert/keys';
+import { STRUCTURE_SECTION_RANK } from '@atlaskit/editor-common/quick-insert/rank';
+import { CodeBlockQuickInsertMenuItem } from './CodeBlockQuickInsertMenuItem';
+export var getCodeBlockQuickInsertComponents = function getCodeBlockQuickInsertComponents(_ref) {
+  var api = _ref.api;
+  return [{
+    key: CODE_BLOCK_MENU_ITEM.key,
+    type: CODE_BLOCK_MENU_ITEM.type,
+    parents: [{
+      key: STRUCTURE_SECTION.key,
+      type: STRUCTURE_SECTION.type,
+      rank: STRUCTURE_SECTION_RANK[CODE_BLOCK_MENU_ITEM.key]
+    }],
+    match: createQuickInsertMatcher(function (_ref2) {
+      var formatMessage = _ref2.formatMessage;
+      return {
+        description: formatMessage(blockTypeMessages.codeblockDescription),
+        keywords: ['code block'],
+        shortcut: '```',
+        title: formatMessage(blockTypeMessages.codeblock)
+      };
+    }),
+    component: function component() {
+      return /*#__PURE__*/React.createElement(CodeBlockQuickInsertMenuItem, {
+        api: api
+      });
+    }
+  }];
+};

package/dist/types/codeBlockPluginType.d.ts

@@ -10,6 +10,7 @@ import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import type { InteractionPlugin } from '@atlaskit/editor-plugin-interaction';
 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';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { CodeBlockState } from './pm-plugins/main-state';
 import type { CodeBlockPluginOptions } from './types';
@@ -23,7 +24,8 @@ type CodeBlockDependencies = [
     OptionalPlugin<EditorViewModePlugin>,
     OptionalPlugin<BlockMenuPlugin>,
     OptionalPlugin<SelectionPlugin>,
-    OptionalPlugin<ToolbarPlugin>
+    OptionalPlugin<ToolbarPlugin>,
+    OptionalPlugin<UiControlRegistryPlugin>
 ];
 export type CodeBlockPlugin = NextEditorPlugin<'codeBlock', {
     actions: {

package/dist/types/editor-commands/index.d.ts

@@ -28,6 +28,11 @@ export declare const resetShouldIgnoreFollowingMutations: Command;
 export declare function createInsertCodeBlockTransaction({ state }: {
     state: EditorState;
 }): Transaction;
+export declare function createInsertCodeBlockTransactionWithAnalytics({ analyticsAPI, inputMethod, state, }: {
+    analyticsAPI?: EditorAnalyticsAPI;
+    inputMethod: INPUT_METHOD.FORMATTING | INPUT_METHOD.INSERT_MENU | INPUT_METHOD.QUICK_INSERT | INPUT_METHOD.TOOLBAR | INPUT_METHOD.ELEMENT_BROWSER;
+    state: EditorState;
+}): Transaction;
 export declare function insertCodeBlockWithAnalytics(inputMethod: INPUT_METHOD, analyticsAPI?: EditorAnalyticsAPI): Command;
 /**
  * Add the given node to the codeBlockWrappedStates WeakMap with the toggle boolean value.

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { CodeBlockPlugin } from '../../codeBlockPluginType';
+export declare const CodeBlockQuickInsertMenuItem: ({ api, }: {
+    api: ExtractInjectionAPI<CodeBlockPlugin> | undefined;
+}) => React.JSX.Element;

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

@@ -0,0 +1,6 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { RegisterMenuItem } from '@atlaskit/editor-ui-control-model/types';
+import type { CodeBlockPlugin } from '../../codeBlockPluginType';
+export declare const getCodeBlockQuickInsertComponents: ({ api, }: {
+    api: ExtractInjectionAPI<CodeBlockPlugin> | undefined;
+}) => RegisterMenuItem[];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-code-block",
-	"version": "17.0.0",
+	"version": "17.0.1",
 	"description": "Code block plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -35,9 +35,11 @@
 		"@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.6.0",
 		"@atlaskit/flag": "^18.2.0",
 		"@atlaskit/frontend-utilities": "^4.1.0",
 		"@atlaskit/icon": "^37.3.0",
+		"@atlaskit/platform-feature-experiments": "^0.3.0",
 		"@atlaskit/platform-feature-flags": "^2.1.0",
 		"@atlaskit/primitives": "^22.2.0",
 		"@atlaskit/prosemirror-input-rules": "^4.0.0",
@@ -48,7 +50,7 @@
 		"@compiled/react": "^1.0.2"
 	},
 	"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"
 	},