@atlaskit/editor-plugin-insert-block 7.0.1 → 7.0.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-insert-block
 
+## 7.0.2
+
+### Patch Changes
+
+- [`2f81c0f3bf21d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2f81c0f3bf21d) -
+  [ux] ED-29318 [CR-6b] Add new toolbar icons to comment editor
+- Updated dependencies
+
 ## 7.0.1
 
 ### Patch Changes

package/dist/cjs/insertBlockPlugin.js

@@ -171,7 +171,7 @@ var insertBlockPlugin = exports.insertBlockPlugin = function insertBlockPlugin(_
     exposure: true
   })) {
     var _api$toolbar, _api$codeBlock, _api$panel, _api$blockType;
-    api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 || _api$toolbar.actions.registerComponents((0, _toolbarComponents.getToolbarComponents)({
+    api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 || _api$toolbar.actions.registerComponents((0, _toolbarComponents.getToolbarComponentsWithConfig)({
       api: api,
       tableSelectorSupported: options.tableSelectorSupported,
       toolbarShowPlusInsertOnly: options.toolbarShowPlusInsertOnly,
@@ -180,7 +180,8 @@ var insertBlockPlugin = exports.insertBlockPlugin = function insertBlockPlugin(_
       nativeStatusSupported: options.nativeStatusSupported,
       horizontalRuleEnabled: options.horizontalRuleEnabled,
       expandEnabled: options.allowExpand,
-      insertMenuItems: options.insertMenuItems
+      insertMenuItems: options.insertMenuItems,
+      options: options
     }));
   } else {
     var _api$primaryToolbar;

package/dist/cjs/ui/toolbar-components/CodeBlockButton.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CodeBlockButton = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _messages = require("@atlaskit/editor-common/messages");
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var CodeBlockButton = exports.CodeBlockButton = function CodeBlockButton(_ref) {
+  var api = _ref.api;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var _useEditorToolbar = (0, _toolbar.useEditorToolbar)(),
+    editorView = _useEditorToolbar.editorView;
+  if (!(api !== null && api !== void 0 && api.codeBlock)) {
+    return null;
+  }
+  var onClick = function onClick() {
+    if (editorView) {
+      var _api$codeBlock;
+      api === null || api === void 0 || (_api$codeBlock = api.codeBlock) === null || _api$codeBlock === void 0 || _api$codeBlock.actions.insertCodeBlock(_analytics.INPUT_METHOD.TOOLBAR)(editorView.state, editorView.dispatch);
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarTooltip, {
+    content: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
+      description: formatMessage(_messages.blockTypeMessages.codeblock),
+      keymap: _keymaps.toggleCodeBlock
+    })
+  }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButton, {
+    iconBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.CodeIcon, {
+      label: formatMessage(_messages.blockTypeMessages.codeblock),
+      size: "small"
+    }),
+    onClick: onClick,
+    ariaKeyshortcuts: (0, _keymaps.getAriaKeyshortcuts)(_keymaps.toggleCodeBlock)
+  }));
+};

package/dist/cjs/ui/toolbar-components/config-resolver.js

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.resolveToolbarConfig = void 0;
+/**
+ * Resolves toolbar configuration from plugin options, handling backward compatibility
+ * and providing sensible defaults.
+ */
+var resolveToolbarConfig = exports.resolveToolbarConfig = function resolveToolbarConfig(options) {
+  var _options$toolbarButto, _options$toolbarButto2, _options$toolbarButto3, _options$toolbarButto4, _options$toolbarButto5, _options$toolbarButto6, _options$toolbarButto7, _options$toolbarButto8;
+  // Handle backward compatibility: toolbarShowPlusInsertOnly
+  if (options.toolbarShowPlusInsertOnly) {
+    return {
+      codeBlock: {
+        enabled: false
+      },
+      emoji: {
+        enabled: false
+      },
+      insert: {
+        enabled: true
+      },
+      layout: {
+        enabled: false
+      },
+      media: {
+        enabled: false
+      },
+      mention: {
+        enabled: false
+      },
+      table: {
+        enabled: false
+      },
+      taskList: {
+        enabled: false
+      }
+    };
+  }
+  if (!options.toolbarButtons) {
+    // disable code block by default if there's no toolbarButtons options provided, e.g on full page editor
+    return {
+      codeBlock: {
+        enabled: false
+      },
+      emoji: {
+        enabled: true
+      },
+      insert: {
+        enabled: true
+      },
+      layout: {
+        enabled: true
+      },
+      media: {
+        enabled: true
+      },
+      mention: {
+        enabled: true
+      },
+      table: {
+        enabled: true
+      },
+      taskList: {
+        enabled: true
+      }
+    };
+  }
+  var defaults = {
+    enabled: false
+  };
+  var resolveGroupConfig = function resolveGroupConfig(groupConfig) {
+    var _groupConfig$enabled;
+    return {
+      enabled: (_groupConfig$enabled = groupConfig === null || groupConfig === void 0 ? void 0 : groupConfig.enabled) !== null && _groupConfig$enabled !== void 0 ? _groupConfig$enabled : defaults.enabled
+    };
+  };
+  return {
+    codeBlock: resolveGroupConfig((_options$toolbarButto = options.toolbarButtons) === null || _options$toolbarButto === void 0 ? void 0 : _options$toolbarButto.codeBlock),
+    emoji: resolveGroupConfig((_options$toolbarButto2 = options.toolbarButtons) === null || _options$toolbarButto2 === void 0 ? void 0 : _options$toolbarButto2.emoji),
+    insert: resolveGroupConfig((_options$toolbarButto3 = options.toolbarButtons) === null || _options$toolbarButto3 === void 0 ? void 0 : _options$toolbarButto3.insert),
+    layout: resolveGroupConfig((_options$toolbarButto4 = options.toolbarButtons) === null || _options$toolbarButto4 === void 0 ? void 0 : _options$toolbarButto4.layout),
+    media: resolveGroupConfig((_options$toolbarButto5 = options.toolbarButtons) === null || _options$toolbarButto5 === void 0 ? void 0 : _options$toolbarButto5.media),
+    mention: resolveGroupConfig((_options$toolbarButto6 = options.toolbarButtons) === null || _options$toolbarButto6 === void 0 ? void 0 : _options$toolbarButto6.mention),
+    table: resolveGroupConfig((_options$toolbarButto7 = options.toolbarButtons) === null || _options$toolbarButto7 === void 0 ? void 0 : _options$toolbarButto7.table),
+    taskList: resolveGroupConfig((_options$toolbarButto8 = options.toolbarButtons) === null || _options$toolbarButto8 === void 0 ? void 0 : _options$toolbarButto8.taskList)
+  };
+};

package/dist/cjs/ui/toolbar-components.js

@@ -4,12 +4,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getToolbarComponents = void 0;
+exports.getToolbarComponentsWithConfig = exports.getToolbarComponentsUpdated = exports.getToolbarComponents = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireDefault(require("react"));
 var _toolbar = require("@atlaskit/editor-common/toolbar");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _CodeBlockButton = require("./toolbar-components/CodeBlockButton");
+var _configResolver = require("./toolbar-components/config-resolver");
 var _EmojiButton = require("./toolbar-components/EmojiButton");
 var _ImageButton = require("./toolbar-components/ImageButton");
 var _InsertButton = require("./toolbar-components/InsertButton");
@@ -265,4 +267,293 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
       });
     }
   }]);
+};
+
+/**
+ * Updated toolbar components function that uses the new configuration resolver.
+ * This function replaces the hardcoded approach with a config-driven one.
+ */
+var getToolbarComponentsUpdated = exports.getToolbarComponentsUpdated = function getToolbarComponentsUpdated(_ref8) {
+  var _config$taskList, _config$media, _config$codeBlock, _config$mention, _config$emoji, _config$layout, _config$table, _config$insert;
+  var api = _ref8.api,
+    options = _ref8.options,
+    onInsertBlockType = _ref8.onInsertBlockType;
+  var config = (0, _configResolver.resolveToolbarConfig)(options);
+  var components = [];
+
+  // Helper function to create responsive wrapper component
+  var createResponsiveComponent = function createResponsiveComponent() {
+    return (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? function (_ref9) {
+      var children = _ref9.children;
+      return /*#__PURE__*/_react.default.createElement(_editorToolbar.Show, {
+        above: "lg"
+      }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButtonGroup, null, children));
+    } : undefined;
+  };
+
+  // TaskList Group
+  if ((_config$taskList = config.taskList) !== null && _config$taskList !== void 0 && _config$taskList.enabled) {
+    components.push({
+      type: _toolbar.TASK_LIST_GROUP.type,
+      key: _toolbar.TASK_LIST_GROUP.key,
+      parents: [{
+        type: _toolbar.INSERT_BLOCK_SECTION.type,
+        key: _toolbar.INSERT_BLOCK_SECTION.key,
+        rank: _toolbar.INSERT_BLOCK_SECTION_RANK[_toolbar.TASK_LIST_GROUP.key]
+      }],
+      component: createResponsiveComponent()
+    });
+    components.push({
+      type: _toolbar.TASK_LIST_BUTTON.type,
+      key: _toolbar.TASK_LIST_BUTTON.key,
+      parents: [{
+        type: _toolbar.TASK_LIST_GROUP.type,
+        key: _toolbar.TASK_LIST_GROUP.key,
+        rank: _toolbar.TASK_LIST_GROUP_RANK[_toolbar.TASK_LIST_BUTTON.key]
+      }],
+      component: function component() {
+        return /*#__PURE__*/_react.default.createElement(_TaskListButton.TaskListButton, {
+          api: api
+        });
+      }
+    });
+  }
+
+  // Media Group
+  if ((_config$media = config.media) !== null && _config$media !== void 0 && _config$media.enabled) {
+    components.push({
+      type: _toolbar.MEDIA_GROUP.type,
+      key: _toolbar.MEDIA_GROUP.key,
+      parents: [{
+        type: _toolbar.INSERT_BLOCK_SECTION.type,
+        key: _toolbar.INSERT_BLOCK_SECTION.key,
+        rank: _toolbar.INSERT_BLOCK_SECTION_RANK[_toolbar.MEDIA_GROUP.key]
+      }],
+      component: createResponsiveComponent()
+    });
+    components.push({
+      type: _toolbar.MEDIA_BUTTON.type,
+      key: _toolbar.MEDIA_BUTTON.key,
+      parents: [{
+        type: _toolbar.MEDIA_GROUP.type,
+        key: _toolbar.MEDIA_GROUP.key,
+        rank: _toolbar.MEDIA_GROUP_RANK[_toolbar.MEDIA_BUTTON.key]
+      }],
+      component: function component() {
+        return !!(api !== null && api !== void 0 && api.imageUpload) ? /*#__PURE__*/_react.default.createElement(_ImageButton.ImageButton, {
+          api: api
+        }) : /*#__PURE__*/_react.default.createElement(_MediaButton.MediaButton, {
+          api: api
+        });
+      }
+    });
+  }
+
+  // CodeBlock Group
+  if ((_config$codeBlock = config.codeBlock) !== null && _config$codeBlock !== void 0 && _config$codeBlock.enabled) {
+    components.push({
+      type: _toolbar.CODE_BLOCK_GROUP.type,
+      key: _toolbar.CODE_BLOCK_GROUP.key,
+      parents: [{
+        type: _toolbar.INSERT_BLOCK_SECTION.type,
+        key: _toolbar.INSERT_BLOCK_SECTION.key,
+        rank: _toolbar.INSERT_BLOCK_SECTION_RANK[_toolbar.CODE_BLOCK_GROUP.key]
+      }],
+      component: createResponsiveComponent()
+    });
+    components.push({
+      type: _toolbar.CODE_BLOCK_BUTTON.type,
+      key: _toolbar.CODE_BLOCK_BUTTON.key,
+      parents: [{
+        type: _toolbar.CODE_BLOCK_GROUP.type,
+        key: _toolbar.CODE_BLOCK_GROUP.key,
+        rank: _toolbar.CODE_BLOCK_GROUP_RANK[_toolbar.CODE_BLOCK_BUTTON.key]
+      }],
+      component: function component() {
+        return /*#__PURE__*/_react.default.createElement(_CodeBlockButton.CodeBlockButton, {
+          api: api
+        });
+      }
+    });
+  }
+
+  // Mention Group
+  if ((_config$mention = config.mention) !== null && _config$mention !== void 0 && _config$mention.enabled) {
+    components.push({
+      type: _toolbar.MENTION_GROUP.type,
+      key: _toolbar.MENTION_GROUP.key,
+      parents: [{
+        type: _toolbar.INSERT_BLOCK_SECTION.type,
+        key: _toolbar.INSERT_BLOCK_SECTION.key,
+        rank: _toolbar.INSERT_BLOCK_SECTION_RANK[_toolbar.MENTION_GROUP.key]
+      }],
+      component: createResponsiveComponent()
+    });
+    components.push({
+      type: _toolbar.MENTION_BUTTON.type,
+      key: _toolbar.MENTION_BUTTON.key,
+      parents: [{
+        type: _toolbar.MENTION_GROUP.type,
+        key: _toolbar.MENTION_GROUP.key,
+        rank: _toolbar.MENTION_GROUP_RANK[_toolbar.MENTION_BUTTON.key]
+      }],
+      component: function component() {
+        return /*#__PURE__*/_react.default.createElement(_MentionButton.MentionButton, {
+          api: api
+        });
+      }
+    });
+  }
+
+  // Emoji Group
+  if ((_config$emoji = config.emoji) !== null && _config$emoji !== void 0 && _config$emoji.enabled) {
+    components.push({
+      type: _toolbar.EMOJI_GROUP.type,
+      key: _toolbar.EMOJI_GROUP.key,
+      parents: [{
+        type: _toolbar.INSERT_BLOCK_SECTION.type,
+        key: _toolbar.INSERT_BLOCK_SECTION.key,
+        rank: _toolbar.INSERT_BLOCK_SECTION_RANK[_toolbar.EMOJI_GROUP.key]
+      }],
+      component: createResponsiveComponent()
+    });
+    components.push({
+      type: _toolbar.EMOJI_BUTTON.type,
+      key: _toolbar.EMOJI_BUTTON.key,
+      parents: [{
+        type: _toolbar.EMOJI_GROUP.type,
+        key: _toolbar.EMOJI_GROUP.key,
+        rank: _toolbar.EMOJI_GROUP_RANK[_toolbar.EMOJI_BUTTON.key]
+      }],
+      component: function component() {
+        return /*#__PURE__*/_react.default.createElement(_EmojiButton.EmojiButton, {
+          api: api
+        });
+      }
+    });
+  }
+
+  // Layout Group
+  if ((_config$layout = config.layout) !== null && _config$layout !== void 0 && _config$layout.enabled) {
+    components.push({
+      type: _toolbar.LAYOUT_GROUP.type,
+      key: _toolbar.LAYOUT_GROUP.key,
+      parents: [{
+        type: _toolbar.INSERT_BLOCK_SECTION.type,
+        key: _toolbar.INSERT_BLOCK_SECTION.key,
+        rank: _toolbar.INSERT_BLOCK_SECTION_RANK[_toolbar.LAYOUT_GROUP.key]
+      }],
+      component: createResponsiveComponent()
+    });
+    components.push({
+      type: _toolbar.LAYOUT_BUTTON.type,
+      key: _toolbar.LAYOUT_BUTTON.key,
+      parents: [{
+        type: _toolbar.LAYOUT_GROUP.type,
+        key: _toolbar.LAYOUT_GROUP.key,
+        rank: _toolbar.LAYOUT_GROUP_RANK[_toolbar.LAYOUT_BUTTON.key]
+      }],
+      component: function component() {
+        return /*#__PURE__*/_react.default.createElement(_LayoutButton.LayoutButton, {
+          api: api
+        });
+      }
+    });
+  }
+
+  // Table Group
+  if ((_config$table = config.table) !== null && _config$table !== void 0 && _config$table.enabled) {
+    components.push({
+      type: _toolbar.TABLE_GROUP.type,
+      key: _toolbar.TABLE_GROUP.key,
+      parents: [{
+        type: _toolbar.INSERT_BLOCK_SECTION.type,
+        key: _toolbar.INSERT_BLOCK_SECTION.key,
+        rank: _toolbar.INSERT_BLOCK_SECTION_RANK[_toolbar.TABLE_GROUP.key]
+      }],
+      component: createResponsiveComponent()
+    });
+    components.push({
+      type: _toolbar.TABLE_BUTTON.type,
+      key: _toolbar.TABLE_BUTTON.key,
+      parents: [{
+        type: _toolbar.TABLE_GROUP.type,
+        key: _toolbar.TABLE_GROUP.key,
+        rank: _toolbar.TABLE_GROUP_RANK[_toolbar.TABLE_BUTTON.key]
+      }],
+      component: function component() {
+        return /*#__PURE__*/_react.default.createElement(_TableButton.TableButton, {
+          api: api
+        });
+      }
+    });
+    if (options.tableSelectorSupported) {
+      components.push({
+        type: _toolbar.TABLE_SIZE_PICKER.type,
+        key: _toolbar.TABLE_SIZE_PICKER.key,
+        parents: [{
+          type: _toolbar.TABLE_GROUP.type,
+          key: _toolbar.TABLE_GROUP.key,
+          rank: _toolbar.TABLE_GROUP_RANK[_toolbar.TABLE_SIZE_PICKER.key]
+        }],
+        component: function component() {
+          return /*#__PURE__*/_react.default.createElement(_TableSizePicker.TableSizePicker, {
+            api: api,
+            tableSelectorSupported: options.tableSelectorSupported
+          });
+        }
+      });
+    }
+  }
+
+  // Insert Group
+  if ((_config$insert = config.insert) !== null && _config$insert !== void 0 && _config$insert.enabled) {
+    components.push({
+      type: _toolbar.INSERT_GROUP.type,
+      key: _toolbar.INSERT_GROUP.key,
+      parents: [{
+        type: _toolbar.INSERT_BLOCK_SECTION.type,
+        key: _toolbar.INSERT_BLOCK_SECTION.key,
+        rank: _toolbar.INSERT_BLOCK_SECTION_RANK[_toolbar.INSERT_GROUP.key]
+      }]
+    });
+    components.push({
+      type: _toolbar.INSERT_BUTTON.type,
+      key: _toolbar.INSERT_BUTTON.key,
+      parents: [{
+        type: _toolbar.INSERT_GROUP.type,
+        key: _toolbar.INSERT_GROUP.key,
+        rank: _toolbar.INSERT_GROUP_RANK[_toolbar.INSERT_BUTTON.key]
+      }],
+      component: function component() {
+        return /*#__PURE__*/_react.default.createElement(_InsertButton.InsertButton, {
+          api: api,
+          showElementBrowserLink: options.showElementBrowserLink,
+          tableSelectorSupported: options.tableSelectorSupported,
+          onInsertBlockType: onInsertBlockType,
+          nativeStatusSupported: options.nativeStatusSupported,
+          horizontalRuleEnabled: options.horizontalRuleEnabled,
+          expandEnabled: options.allowExpand,
+          insertMenuItems: options.insertMenuItems,
+          numberOfButtons: 7 // TODO: ED-28759 - Default to 7 buttons - Remove this once we have a proper way to do toolbar responsiveness
+        });
+      }
+    });
+  }
+  return components;
+};
+
+/**
+ * Main export that switches between old and new implementations based on experiment.
+ * This allows for gradual rollout of the new config-driven approach.
+ */
+var getToolbarComponentsWithConfig = exports.getToolbarComponentsWithConfig = function getToolbarComponentsWithConfig(props) {
+  if ((0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_responsiveness_update', 'isEnabled', true) && 'options' in props) {
+    // Use new config-driven approach
+    return getToolbarComponentsUpdated(props);
+  }
+
+  // Use legacy approach
+  var legacyProps = props;
+  return getToolbarComponents(legacyProps);
 };

package/dist/es2019/insertBlockPlugin.js

@@ -9,7 +9,7 @@ import { BLOCK_QUOTE, CODE_BLOCK, PANEL } from '@atlaskit/editor-plugin-block-ty
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { toggleInsertBlockPmKey, toggleInsertBlockPmPlugin } from './pm-plugins/toggleInsertBlock';
-import { getToolbarComponents } from './ui/toolbar-components';
+import { getToolbarComponentsWithConfig } from './ui/toolbar-components';
 // Ignored via go/ees005
 // eslint-disable-next-line import/no-named-as-default
 import ToolbarInsertBlock from './ui/ToolbarInsertBlock';
@@ -156,7 +156,7 @@ export const insertBlockPlugin = ({
     exposure: true
   })) {
     var _api$toolbar, _api$codeBlock, _api$panel, _api$blockType;
-    api === null || api === void 0 ? void 0 : (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 ? void 0 : _api$toolbar.actions.registerComponents(getToolbarComponents({
+    api === null || api === void 0 ? void 0 : (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 ? void 0 : _api$toolbar.actions.registerComponents(getToolbarComponentsWithConfig({
       api,
       tableSelectorSupported: options.tableSelectorSupported,
       toolbarShowPlusInsertOnly: options.toolbarShowPlusInsertOnly,
@@ -165,7 +165,8 @@ export const insertBlockPlugin = ({
       nativeStatusSupported: options.nativeStatusSupported,
       horizontalRuleEnabled: options.horizontalRuleEnabled,
       expandEnabled: options.allowExpand,
-      insertMenuItems: options.insertMenuItems
+      insertMenuItems: options.insertMenuItems,
+      options
     }));
   } else {
     var _api$primaryToolbar;

package/dist/es2019/ui/toolbar-components/CodeBlockButton.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { ToolTipContent, getAriaKeyshortcuts, toggleCodeBlock } from '@atlaskit/editor-common/keymaps';
+import { blockTypeMessages } from '@atlaskit/editor-common/messages';
+import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
+import { ToolbarButton, ToolbarTooltip, CodeIcon } from '@atlaskit/editor-toolbar';
+export const CodeBlockButton = ({
+  api
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const {
+    editorView
+  } = useEditorToolbar();
+  if (!(api !== null && api !== void 0 && api.codeBlock)) {
+    return null;
+  }
+  const onClick = () => {
+    if (editorView) {
+      var _api$codeBlock;
+      api === null || api === void 0 ? void 0 : (_api$codeBlock = api.codeBlock) === null || _api$codeBlock === void 0 ? void 0 : _api$codeBlock.actions.insertCodeBlock(INPUT_METHOD.TOOLBAR)(editorView.state, editorView.dispatch);
+    }
+  };
+  return /*#__PURE__*/React.createElement(ToolbarTooltip, {
+    content: /*#__PURE__*/React.createElement(ToolTipContent, {
+      description: formatMessage(blockTypeMessages.codeblock),
+      keymap: toggleCodeBlock
+    })
+  }, /*#__PURE__*/React.createElement(ToolbarButton, {
+    iconBefore: /*#__PURE__*/React.createElement(CodeIcon, {
+      label: formatMessage(blockTypeMessages.codeblock),
+      size: "small"
+    }),
+    onClick: onClick,
+    ariaKeyshortcuts: getAriaKeyshortcuts(toggleCodeBlock)
+  }));
+};

package/dist/es2019/ui/toolbar-components/config-resolver.js

@@ -0,0 +1,84 @@
+/**
+ * Resolves toolbar configuration from plugin options, handling backward compatibility
+ * and providing sensible defaults.
+ */
+export const resolveToolbarConfig = options => {
+  var _options$toolbarButto, _options$toolbarButto2, _options$toolbarButto3, _options$toolbarButto4, _options$toolbarButto5, _options$toolbarButto6, _options$toolbarButto7, _options$toolbarButto8;
+  // Handle backward compatibility: toolbarShowPlusInsertOnly
+  if (options.toolbarShowPlusInsertOnly) {
+    return {
+      codeBlock: {
+        enabled: false
+      },
+      emoji: {
+        enabled: false
+      },
+      insert: {
+        enabled: true
+      },
+      layout: {
+        enabled: false
+      },
+      media: {
+        enabled: false
+      },
+      mention: {
+        enabled: false
+      },
+      table: {
+        enabled: false
+      },
+      taskList: {
+        enabled: false
+      }
+    };
+  }
+  if (!options.toolbarButtons) {
+    // disable code block by default if there's no toolbarButtons options provided, e.g on full page editor
+    return {
+      codeBlock: {
+        enabled: false
+      },
+      emoji: {
+        enabled: true
+      },
+      insert: {
+        enabled: true
+      },
+      layout: {
+        enabled: true
+      },
+      media: {
+        enabled: true
+      },
+      mention: {
+        enabled: true
+      },
+      table: {
+        enabled: true
+      },
+      taskList: {
+        enabled: true
+      }
+    };
+  }
+  const defaults = {
+    enabled: false
+  };
+  const resolveGroupConfig = groupConfig => {
+    var _groupConfig$enabled;
+    return {
+      enabled: (_groupConfig$enabled = groupConfig === null || groupConfig === void 0 ? void 0 : groupConfig.enabled) !== null && _groupConfig$enabled !== void 0 ? _groupConfig$enabled : defaults.enabled
+    };
+  };
+  return {
+    codeBlock: resolveGroupConfig((_options$toolbarButto = options.toolbarButtons) === null || _options$toolbarButto === void 0 ? void 0 : _options$toolbarButto.codeBlock),
+    emoji: resolveGroupConfig((_options$toolbarButto2 = options.toolbarButtons) === null || _options$toolbarButto2 === void 0 ? void 0 : _options$toolbarButto2.emoji),
+    insert: resolveGroupConfig((_options$toolbarButto3 = options.toolbarButtons) === null || _options$toolbarButto3 === void 0 ? void 0 : _options$toolbarButto3.insert),
+    layout: resolveGroupConfig((_options$toolbarButto4 = options.toolbarButtons) === null || _options$toolbarButto4 === void 0 ? void 0 : _options$toolbarButto4.layout),
+    media: resolveGroupConfig((_options$toolbarButto5 = options.toolbarButtons) === null || _options$toolbarButto5 === void 0 ? void 0 : _options$toolbarButto5.media),
+    mention: resolveGroupConfig((_options$toolbarButto6 = options.toolbarButtons) === null || _options$toolbarButto6 === void 0 ? void 0 : _options$toolbarButto6.mention),
+    table: resolveGroupConfig((_options$toolbarButto7 = options.toolbarButtons) === null || _options$toolbarButto7 === void 0 ? void 0 : _options$toolbarButto7.table),
+    taskList: resolveGroupConfig((_options$toolbarButto8 = options.toolbarButtons) === null || _options$toolbarButto8 === void 0 ? void 0 : _options$toolbarButto8.taskList)
+  };
+};