@atlaskit/editor-plugin-insert-block 7.0.6 → 7.0.8

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

@@ -1,9 +1,11 @@
 import React from 'react';
 import { useIntl } from 'react-intl-next';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { ToolTipContent, insertTaskList } from '@atlaskit/editor-common/keymaps';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
 import { ToolbarButton, ToolbarTooltip, TaskIcon } from '@atlaskit/editor-toolbar';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 export const TaskListButton = ({
   api
 }) => {
@@ -27,7 +29,10 @@ export const TaskListButton = ({
     }
   };
   return /*#__PURE__*/React.createElement(ToolbarTooltip, {
-    content: formatMessage(messages.action)
+    content: expValEquals('platform_editor_toolbar_aifc_patch_6', 'isEnabled', true) ? /*#__PURE__*/React.createElement(ToolTipContent, {
+      description: formatMessage(messages.action),
+      keymap: insertTaskList
+    }) : formatMessage(messages.action)
   }, /*#__PURE__*/React.createElement(ToolbarButton, {
     iconBefore: /*#__PURE__*/React.createElement(TaskIcon, {
       label: formatMessage(messages.action),

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

@@ -13,236 +13,11 @@ import { MentionButton } from './toolbar-components/MentionButton';
 import { TableButton } from './toolbar-components/TableButton';
 import { TableSizePicker } from './toolbar-components/TableSizePicker';
 import { TaskListButton } from './toolbar-components/TaskListButton';
-export const getToolbarComponents = ({
-  api,
-  tableSelectorSupported,
-  toolbarShowPlusInsertOnly,
-  showElementBrowserLink,
-  onInsertBlockType,
-  nativeStatusSupported,
-  horizontalRuleEnabled,
-  expandEnabled,
-  insertMenuItems
-}) => {
-  return [...(toolbarShowPlusInsertOnly ? [{
-    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]
-    }]
-  }, {
-    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: showElementBrowserLink,
-      tableSelectorSupported: tableSelectorSupported,
-      onInsertBlockType: onInsertBlockType,
-      nativeStatusSupported: nativeStatusSupported,
-      horizontalRuleEnabled: horizontalRuleEnabled,
-      expandEnabled: expandEnabled,
-      insertMenuItems: insertMenuItems
-    })
-  }] : [{
-    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: expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? ({
-      children
-    }) => /*#__PURE__*/React.createElement(Show, {
-      above: "lg"
-    }, /*#__PURE__*/React.createElement(ToolbarButtonGroup, null, children)) : undefined
-  }, {
-    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
-    })
-  }, {
-    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: expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? ({
-      children
-    }) => /*#__PURE__*/React.createElement(Show, {
-      above: "lg"
-    }, /*#__PURE__*/React.createElement(ToolbarButtonGroup, null, children)) : undefined
-  }, {
-    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
-    })
-  }, {
-    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: expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? ({
-      children
-    }) => /*#__PURE__*/React.createElement(Show, {
-      above: "lg"
-    }, /*#__PURE__*/React.createElement(ToolbarButtonGroup, null, children)) : undefined
-  }, {
-    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
-    })
-  }, {
-    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: expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? ({
-      children
-    }) => /*#__PURE__*/React.createElement(Show, {
-      above: "lg"
-    }, /*#__PURE__*/React.createElement(ToolbarButtonGroup, null, children)) : undefined
-  }, {
-    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
-    })
-  }, {
-    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: expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? ({
-      children
-    }) => /*#__PURE__*/React.createElement(Show, {
-      above: "lg"
-    }, /*#__PURE__*/React.createElement(ToolbarButtonGroup, null, children)) : undefined
-  }, {
-    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
-    })
-  }, {
-    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: expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? ({
-      children
-    }) => /*#__PURE__*/React.createElement(Show, {
-      above: "md"
-    }, /*#__PURE__*/React.createElement(ToolbarButtonGroup, null, children)) : undefined
-  }, {
-    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
-    })
-  }, {
-    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: tableSelectorSupported
-    })
-  }, {
-    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]
-    }]
-  }, {
-    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: showElementBrowserLink,
-      tableSelectorSupported: tableSelectorSupported,
-      onInsertBlockType: onInsertBlockType,
-      nativeStatusSupported: nativeStatusSupported,
-      horizontalRuleEnabled: horizontalRuleEnabled,
-      expandEnabled: expandEnabled,
-      insertMenuItems: insertMenuItems,
-      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 = ({
+export const getToolbarComponents = ({
   api,
   options,
   onInsertBlockType
@@ -492,19 +267,4 @@ export const getToolbarComponentsUpdated = ({
     });
   }
   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 { getToolbarComponentsWithConfig } from './ui/toolbar-components';
+import { getToolbarComponents } from './ui/toolbar-components';
 // Ignored via go/ees005
 // eslint-disable-next-line import/no-named-as-default
 import ToolbarInsertBlock from './ui/ToolbarInsertBlock';
@@ -161,16 +161,9 @@ 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(getToolbarComponentsWithConfig({
+    api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 || _api$toolbar.actions.registerComponents(getToolbarComponents({
       api: api,
-      tableSelectorSupported: options.tableSelectorSupported,
-      toolbarShowPlusInsertOnly: options.toolbarShowPlusInsertOnly,
-      showElementBrowserLink: options.showElementBrowserLink,
       onInsertBlockType: handleInsertBlockType(api === null || api === void 0 || (_api$codeBlock = api.codeBlock) === null || _api$codeBlock === void 0 ? void 0 : _api$codeBlock.actions.insertCodeBlock, api === null || api === void 0 || (_api$panel = api.panel) === null || _api$panel === void 0 ? void 0 : _api$panel.actions.insertPanel, api === null || api === void 0 || (_api$blockType = api.blockType) === null || _api$blockType === void 0 ? void 0 : _api$blockType.actions.insertBlockQuote),
-      nativeStatusSupported: options.nativeStatusSupported,
-      horizontalRuleEnabled: options.horizontalRuleEnabled,
-      expandEnabled: options.allowExpand,
-      insertMenuItems: options.insertMenuItems,
       options: options
     }));
   } else {

package/dist/esm/ui/ElementBrowser/InsertMenu.js

@@ -209,7 +209,7 @@ var InsertMenu = function InsertMenu(_ref) {
       ,
       key: quickInsertDropdownItems.length,
       viewMoreItem: viewMoreItem,
-      onViewMore: showElementBrowserLink || !fg('platform_editor_refactor_view_more_fix') ? onViewMore : undefined,
+      onViewMore: showElementBrowserLink ? onViewMore : undefined,
       cache: cache
     })))
   );

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

@@ -1,6 +1,7 @@
 import React, { useRef } from 'react';
 import { useIntl } from 'react-intl-next';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { ToolTipContent, insertEmoji } from '@atlaskit/editor-common/keymaps';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { ToolbarButton, ToolbarTooltip, EmojiIcon } from '@atlaskit/editor-toolbar';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
@@ -50,7 +51,10 @@ export var EmojiButton = function EmojiButton(_ref) {
     popupsBoundariesElement: popupsBoundariesElement,
     popupsScrollableElement: popupsScrollableElement
   }), /*#__PURE__*/React.createElement(ToolbarTooltip, {
-    content: formatMessage(messages.emoji)
+    content: expValEquals('platform_editor_toolbar_aifc_patch_6', 'isEnabled', true) ? /*#__PURE__*/React.createElement(ToolTipContent, {
+      description: formatMessage(messages.emoji),
+      keymap: insertEmoji
+    }) : formatMessage(messages.emoji)
   }, /*#__PURE__*/React.createElement(ToolbarButton, {
     iconBefore: /*#__PURE__*/React.createElement(EmojiIcon, {
       label: formatMessage(messages.emoji),

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

@@ -2,6 +2,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useRef, useState } from 'react';
 import { useIntl } from 'react-intl-next';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { getAriaKeyshortcuts, insertElements, ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
 import { Popup } from '@atlaskit/editor-common/ui';
@@ -9,6 +10,7 @@ import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared
 import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
 import { ToolbarButton, ToolbarTooltip, AddIcon, useToolbarUI } from '@atlaskit/editor-toolbar';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import InsertMenu, { DEFAULT_HEIGHT } from '../ElementBrowser/InsertMenu';
 import { useEmojiPickerPopup } from './hooks/useEmojiPickerPopup';
 import { useInsertButtonState } from './hooks/useInsertButtonState';
@@ -227,13 +229,16 @@ export var InsertButton = function InsertButton(_ref) {
     popupsBoundariesElement: popupsBoundariesElement,
     popupsScrollableElement: popupsScrollableElement
   }), /*#__PURE__*/React.createElement(ToolbarTooltip, {
-    content: formatMessage(messages.insertMenu)
+    content: expValEquals('platform_editor_toolbar_aifc_patch_6', 'isEnabled', true) ? /*#__PURE__*/React.createElement(ToolTipContent, {
+      description: formatMessage(messages.insertMenu),
+      keymap: insertElements
+    }) : formatMessage(messages.insertMenu)
   }, /*#__PURE__*/React.createElement(ToolbarButton, {
     iconBefore: /*#__PURE__*/React.createElement(AddIcon, {
       size: "small",
       label: formatMessage(messages.insertMenu)
     }),
-    ariaKeyshortcuts: "/",
+    ariaKeyshortcuts: getAriaKeyshortcuts(insertElements),
     ref: insertButtonRef,
     onClick: onClick,
     isSelected: insertMenuOpen,

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

@@ -2,8 +2,10 @@ import React from 'react';
 import { useIntl } from 'react-intl-next';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { ToolTipContent, insertMention } from '@atlaskit/editor-common/keymaps';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { ToolbarButton, ToolbarTooltip, MentionIcon } from '@atlaskit/editor-toolbar';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 export var MentionButton = function MentionButton(_ref) {
   var api = _ref.api;
   var _useIntl = useIntl(),
@@ -27,7 +29,10 @@ export var MentionButton = function MentionButton(_ref) {
     api === null || api === void 0 || (_api$mention = api.mention) === null || _api$mention === void 0 || (_api$mention = _api$mention.actions) === null || _api$mention === void 0 || _api$mention.openTypeAhead(INPUT_METHOD.TOOLBAR);
   };
   return /*#__PURE__*/React.createElement(ToolbarTooltip, {
-    content: formatMessage(messages.mention)
+    content: expValEquals('platform_editor_toolbar_aifc_patch_6', 'isEnabled', true) ? /*#__PURE__*/React.createElement(ToolTipContent, {
+      description: formatMessage(messages.mention),
+      keymap: insertMention
+    }) : formatMessage(messages.mention)
   }, /*#__PURE__*/React.createElement(ToolbarButton, {
     iconBefore: /*#__PURE__*/React.createElement(MentionIcon, {
       label: formatMessage(messages.mention),

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

@@ -1,10 +1,11 @@
 import React from 'react';
 import { useIntl } from 'react-intl-next';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import { formatShortcut, toggleTable } from '@atlaskit/editor-common/keymaps';
+import { ToolTipContent, getAriaKeyshortcuts, toggleTable } from '@atlaskit/editor-common/keymaps';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
 import { ToolbarButton, ToolbarTooltip, TableIcon } from '@atlaskit/editor-toolbar';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 export var TableButton = function TableButton(_ref) {
   var api = _ref.api;
   var _useIntl = useIntl(),
@@ -34,13 +35,16 @@ export var TableButton = function TableButton(_ref) {
     }
   };
   return /*#__PURE__*/React.createElement(ToolbarTooltip, {
-    content: formatMessage(messages.table)
+    content: expValEquals('platform_editor_toolbar_aifc_patch_6', 'isEnabled', true) ? /*#__PURE__*/React.createElement(ToolTipContent, {
+      description: formatMessage(messages.table),
+      keymap: toggleTable
+    }) : formatMessage(messages.table)
   }, /*#__PURE__*/React.createElement(ToolbarButton, {
     iconBefore: /*#__PURE__*/React.createElement(TableIcon, {
       label: formatMessage(messages.table),
       size: "small"
     }),
     onClick: onClick,
-    ariaKeyshortcuts: formatShortcut(toggleTable)
+    ariaKeyshortcuts: getAriaKeyshortcuts(toggleTable)
   }));
 };

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

@@ -1,9 +1,11 @@
 import React from 'react';
 import { useIntl } from 'react-intl-next';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { ToolTipContent, insertTaskList } from '@atlaskit/editor-common/keymaps';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
 import { ToolbarButton, ToolbarTooltip, TaskIcon } from '@atlaskit/editor-toolbar';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 export var TaskListButton = function TaskListButton(_ref) {
   var api = _ref.api;
   var _useIntl = useIntl(),
@@ -22,7 +24,10 @@ export var TaskListButton = function TaskListButton(_ref) {
     }
   };
   return /*#__PURE__*/React.createElement(ToolbarTooltip, {
-    content: formatMessage(messages.action)
+    content: expValEquals('platform_editor_toolbar_aifc_patch_6', 'isEnabled', true) ? /*#__PURE__*/React.createElement(ToolTipContent, {
+      description: formatMessage(messages.action),
+      keymap: insertTaskList
+    }) : formatMessage(messages.action)
   }, /*#__PURE__*/React.createElement(ToolbarButton, {
     iconBefore: /*#__PURE__*/React.createElement(TaskIcon, {
       label: formatMessage(messages.action),