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

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

@@ -1,7 +1,9 @@
 import React from 'react';
-import { INSERT_BLOCK_SECTION, TASK_LIST_GROUP, MEDIA_GROUP, INSERT_BLOCK_SECTION_RANK, TASK_LIST_BUTTON, TASK_LIST_GROUP_RANK, MEDIA_BUTTON, MENTION_GROUP, MEDIA_GROUP_RANK, MENTION_BUTTON, MENTION_GROUP_RANK, EMOJI_GROUP, EMOJI_BUTTON, EMOJI_GROUP_RANK, LAYOUT_GROUP, LAYOUT_BUTTON, LAYOUT_GROUP_RANK, TABLE_GROUP_RANK, TABLE_BUTTON, TABLE_GROUP, TABLE_SIZE_PICKER, INSERT_GROUP, INSERT_BUTTON, INSERT_GROUP_RANK } from '@atlaskit/editor-common/toolbar';
+import { INSERT_BLOCK_SECTION, TASK_LIST_GROUP, MEDIA_GROUP, INSERT_BLOCK_SECTION_RANK, TASK_LIST_BUTTON, TASK_LIST_GROUP_RANK, MEDIA_BUTTON, MENTION_GROUP, MEDIA_GROUP_RANK, MENTION_BUTTON, MENTION_GROUP_RANK, EMOJI_GROUP, EMOJI_BUTTON, EMOJI_GROUP_RANK, LAYOUT_GROUP, LAYOUT_BUTTON, LAYOUT_GROUP_RANK, TABLE_GROUP_RANK, TABLE_BUTTON, TABLE_GROUP, TABLE_SIZE_PICKER, INSERT_GROUP, INSERT_BUTTON, INSERT_GROUP_RANK, CODE_BLOCK_GROUP, CODE_BLOCK_BUTTON, CODE_BLOCK_GROUP_RANK } from '@atlaskit/editor-common/toolbar';
 import { Show, ToolbarButtonGroup } from '@atlaskit/editor-toolbar';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { CodeBlockButton } from './toolbar-components/CodeBlockButton';
+import { resolveToolbarConfig } from './toolbar-components/config-resolver';
 import { EmojiButton } from './toolbar-components/EmojiButton';
 import { ImageButton } from './toolbar-components/ImageButton';
 import { InsertButton } from './toolbar-components/InsertButton';
@@ -234,4 +236,275 @@ export const getToolbarComponents = ({
       numberOfButtons: 7 // TODO: ED-28759 - Default to 7 buttons - Remove this once we have a proper way to do toolbar responsiveness
     })
   }])];
+};
+
+/**
+ * Updated toolbar components function that uses the new configuration resolver.
+ * This function replaces the hardcoded approach with a config-driven one.
+ */
+export const getToolbarComponentsUpdated = ({
+  api,
+  options,
+  onInsertBlockType
+}) => {
+  var _config$taskList, _config$media, _config$codeBlock, _config$mention, _config$emoji, _config$layout, _config$table, _config$insert;
+  const config = resolveToolbarConfig(options);
+  const components = [];
+
+  // Helper function to create responsive wrapper component
+  const createResponsiveComponent = () => {
+    return expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? ({
+      children
+    }) => /*#__PURE__*/React.createElement(Show, {
+      above: "lg"
+    }, /*#__PURE__*/React.createElement(ToolbarButtonGroup, null, children)) : undefined;
+  };
+
+  // TaskList Group
+  if ((_config$taskList = config.taskList) !== null && _config$taskList !== void 0 && _config$taskList.enabled) {
+    components.push({
+      type: TASK_LIST_GROUP.type,
+      key: TASK_LIST_GROUP.key,
+      parents: [{
+        type: INSERT_BLOCK_SECTION.type,
+        key: INSERT_BLOCK_SECTION.key,
+        rank: INSERT_BLOCK_SECTION_RANK[TASK_LIST_GROUP.key]
+      }],
+      component: createResponsiveComponent()
+    });
+    components.push({
+      type: TASK_LIST_BUTTON.type,
+      key: TASK_LIST_BUTTON.key,
+      parents: [{
+        type: TASK_LIST_GROUP.type,
+        key: TASK_LIST_GROUP.key,
+        rank: TASK_LIST_GROUP_RANK[TASK_LIST_BUTTON.key]
+      }],
+      component: () => /*#__PURE__*/React.createElement(TaskListButton, {
+        api: api
+      })
+    });
+  }
+
+  // Media Group
+  if ((_config$media = config.media) !== null && _config$media !== void 0 && _config$media.enabled) {
+    components.push({
+      type: MEDIA_GROUP.type,
+      key: MEDIA_GROUP.key,
+      parents: [{
+        type: INSERT_BLOCK_SECTION.type,
+        key: INSERT_BLOCK_SECTION.key,
+        rank: INSERT_BLOCK_SECTION_RANK[MEDIA_GROUP.key]
+      }],
+      component: createResponsiveComponent()
+    });
+    components.push({
+      type: MEDIA_BUTTON.type,
+      key: MEDIA_BUTTON.key,
+      parents: [{
+        type: MEDIA_GROUP.type,
+        key: MEDIA_GROUP.key,
+        rank: MEDIA_GROUP_RANK[MEDIA_BUTTON.key]
+      }],
+      component: () => !!(api !== null && api !== void 0 && api.imageUpload) ? /*#__PURE__*/React.createElement(ImageButton, {
+        api: api
+      }) : /*#__PURE__*/React.createElement(MediaButton, {
+        api: api
+      })
+    });
+  }
+
+  // CodeBlock Group
+  if ((_config$codeBlock = config.codeBlock) !== null && _config$codeBlock !== void 0 && _config$codeBlock.enabled) {
+    components.push({
+      type: CODE_BLOCK_GROUP.type,
+      key: CODE_BLOCK_GROUP.key,
+      parents: [{
+        type: INSERT_BLOCK_SECTION.type,
+        key: INSERT_BLOCK_SECTION.key,
+        rank: INSERT_BLOCK_SECTION_RANK[CODE_BLOCK_GROUP.key]
+      }],
+      component: createResponsiveComponent()
+    });
+    components.push({
+      type: CODE_BLOCK_BUTTON.type,
+      key: CODE_BLOCK_BUTTON.key,
+      parents: [{
+        type: CODE_BLOCK_GROUP.type,
+        key: CODE_BLOCK_GROUP.key,
+        rank: CODE_BLOCK_GROUP_RANK[CODE_BLOCK_BUTTON.key]
+      }],
+      component: () => /*#__PURE__*/React.createElement(CodeBlockButton, {
+        api: api
+      })
+    });
+  }
+
+  // Mention Group
+  if ((_config$mention = config.mention) !== null && _config$mention !== void 0 && _config$mention.enabled) {
+    components.push({
+      type: MENTION_GROUP.type,
+      key: MENTION_GROUP.key,
+      parents: [{
+        type: INSERT_BLOCK_SECTION.type,
+        key: INSERT_BLOCK_SECTION.key,
+        rank: INSERT_BLOCK_SECTION_RANK[MENTION_GROUP.key]
+      }],
+      component: createResponsiveComponent()
+    });
+    components.push({
+      type: MENTION_BUTTON.type,
+      key: MENTION_BUTTON.key,
+      parents: [{
+        type: MENTION_GROUP.type,
+        key: MENTION_GROUP.key,
+        rank: MENTION_GROUP_RANK[MENTION_BUTTON.key]
+      }],
+      component: () => /*#__PURE__*/React.createElement(MentionButton, {
+        api: api
+      })
+    });
+  }
+
+  // Emoji Group
+  if ((_config$emoji = config.emoji) !== null && _config$emoji !== void 0 && _config$emoji.enabled) {
+    components.push({
+      type: EMOJI_GROUP.type,
+      key: EMOJI_GROUP.key,
+      parents: [{
+        type: INSERT_BLOCK_SECTION.type,
+        key: INSERT_BLOCK_SECTION.key,
+        rank: INSERT_BLOCK_SECTION_RANK[EMOJI_GROUP.key]
+      }],
+      component: createResponsiveComponent()
+    });
+    components.push({
+      type: EMOJI_BUTTON.type,
+      key: EMOJI_BUTTON.key,
+      parents: [{
+        type: EMOJI_GROUP.type,
+        key: EMOJI_GROUP.key,
+        rank: EMOJI_GROUP_RANK[EMOJI_BUTTON.key]
+      }],
+      component: () => /*#__PURE__*/React.createElement(EmojiButton, {
+        api: api
+      })
+    });
+  }
+
+  // Layout Group
+  if ((_config$layout = config.layout) !== null && _config$layout !== void 0 && _config$layout.enabled) {
+    components.push({
+      type: LAYOUT_GROUP.type,
+      key: LAYOUT_GROUP.key,
+      parents: [{
+        type: INSERT_BLOCK_SECTION.type,
+        key: INSERT_BLOCK_SECTION.key,
+        rank: INSERT_BLOCK_SECTION_RANK[LAYOUT_GROUP.key]
+      }],
+      component: createResponsiveComponent()
+    });
+    components.push({
+      type: LAYOUT_BUTTON.type,
+      key: LAYOUT_BUTTON.key,
+      parents: [{
+        type: LAYOUT_GROUP.type,
+        key: LAYOUT_GROUP.key,
+        rank: LAYOUT_GROUP_RANK[LAYOUT_BUTTON.key]
+      }],
+      component: () => /*#__PURE__*/React.createElement(LayoutButton, {
+        api: api
+      })
+    });
+  }
+
+  // Table Group
+  if ((_config$table = config.table) !== null && _config$table !== void 0 && _config$table.enabled) {
+    components.push({
+      type: TABLE_GROUP.type,
+      key: TABLE_GROUP.key,
+      parents: [{
+        type: INSERT_BLOCK_SECTION.type,
+        key: INSERT_BLOCK_SECTION.key,
+        rank: INSERT_BLOCK_SECTION_RANK[TABLE_GROUP.key]
+      }],
+      component: createResponsiveComponent()
+    });
+    components.push({
+      type: TABLE_BUTTON.type,
+      key: TABLE_BUTTON.key,
+      parents: [{
+        type: TABLE_GROUP.type,
+        key: TABLE_GROUP.key,
+        rank: TABLE_GROUP_RANK[TABLE_BUTTON.key]
+      }],
+      component: () => /*#__PURE__*/React.createElement(TableButton, {
+        api: api
+      })
+    });
+    if (options.tableSelectorSupported) {
+      components.push({
+        type: TABLE_SIZE_PICKER.type,
+        key: TABLE_SIZE_PICKER.key,
+        parents: [{
+          type: TABLE_GROUP.type,
+          key: TABLE_GROUP.key,
+          rank: TABLE_GROUP_RANK[TABLE_SIZE_PICKER.key]
+        }],
+        component: () => /*#__PURE__*/React.createElement(TableSizePicker, {
+          api: api,
+          tableSelectorSupported: options.tableSelectorSupported
+        })
+      });
+    }
+  }
+
+  // Insert Group
+  if ((_config$insert = config.insert) !== null && _config$insert !== void 0 && _config$insert.enabled) {
+    components.push({
+      type: INSERT_GROUP.type,
+      key: INSERT_GROUP.key,
+      parents: [{
+        type: INSERT_BLOCK_SECTION.type,
+        key: INSERT_BLOCK_SECTION.key,
+        rank: INSERT_BLOCK_SECTION_RANK[INSERT_GROUP.key]
+      }]
+    });
+    components.push({
+      type: INSERT_BUTTON.type,
+      key: INSERT_BUTTON.key,
+      parents: [{
+        type: INSERT_GROUP.type,
+        key: INSERT_GROUP.key,
+        rank: INSERT_GROUP_RANK[INSERT_BUTTON.key]
+      }],
+      component: () => /*#__PURE__*/React.createElement(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.
+ */
+export const getToolbarComponentsWithConfig = props => {
+  if (expValEquals('platform_editor_toolbar_aifc_responsiveness_update', 'isEnabled', true) && 'options' in props) {
+    // Use new config-driven approach
+    return getToolbarComponentsUpdated(props);
+  }
+
+  // Use legacy approach
+  const legacyProps = props;
+  return getToolbarComponents(legacyProps);
 };

package/dist/esm/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';
@@ -161,7 +161,7 @@ export var insertBlockPlugin = function insertBlockPlugin(_ref) {
     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(getToolbarComponents({
+    api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 || _api$toolbar.actions.registerComponents(getToolbarComponentsWithConfig({
       api: api,
       tableSelectorSupported: options.tableSelectorSupported,
       toolbarShowPlusInsertOnly: options.toolbarShowPlusInsertOnly,
@@ -170,7 +170,8 @@ export var insertBlockPlugin = function insertBlockPlugin(_ref) {
       nativeStatusSupported: options.nativeStatusSupported,
       horizontalRuleEnabled: options.horizontalRuleEnabled,
       expandEnabled: options.allowExpand,
-      insertMenuItems: options.insertMenuItems
+      insertMenuItems: options.insertMenuItems,
+      options: options
     }));
   } else {
     var _api$primaryToolbar;

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

@@ -0,0 +1,36 @@
+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 var CodeBlockButton = function CodeBlockButton(_ref) {
+  var api = _ref.api;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var _useEditorToolbar = 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(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/esm/ui/toolbar-components/config-resolver.js

@@ -0,0 +1,84 @@
+/**
+ * Resolves toolbar configuration from plugin options, handling backward compatibility
+ * and providing sensible defaults.
+ */
+export var 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)
+  };
+};