@atlaskit/editor-core 168.0.0 → 169.1.1

package/dist/esm/plugins/feature-flags-context/feature-flags-from-props.js

@@ -19,7 +19,7 @@ var safeNumberFeatureFlag = function safeNumberFeatureFlag(value) {
 
 
 export function createFeatureFlagsFromProps(props) {
-  var _props$allowTextColor, _props$allowLayouts, _props$performanceTra, _props$performanceTra2, _props$featureFlags, _props$featureFlags2, _props$allowTables, _props$featureFlags3, _props$featureFlags4, _props$allowTables2, _props$featureFlags5, _props$featureFlags6, _props$allowTables3, _props$featureFlags7, _props$featureFlags8, _props$allowTables4, _props$featureFlags9, _props$featureFlags10, _props$allowTables5, _props$allowExtension, _props$featureFlags11, _props$featureFlags12, _props$featureFlags13, _props$featureFlags14, _props$featureFlags15, _props$featureFlags16, _props$featureFlags17, _props$featureFlags18, _props$featureFlags19, _props$featureFlags20, _props$featureFlags21, _props$featureFlags22, _props$featureFlags23, _props$featureFlags24, _props$featureFlags25, _props$featureFlags26, _props$featureFlags27, _props$featureFlags28, _props$featureFlags29, _props$featureFlags30, _props$featureFlags31, _props$featureFlags32, _props$featureFlags33, _props$collabEdit, _props$collabEdit2, _props$featureFlags34, _props$featureFlags35, _props$featureFlags36, _props$featureFlags37;
+  var _props$allowTextColor, _props$allowLayouts, _props$performanceTra, _props$performanceTra2, _props$featureFlags, _props$featureFlags2, _props$allowTables, _props$featureFlags3, _props$featureFlags4, _props$allowTables2, _props$featureFlags5, _props$featureFlags6, _props$allowTables3, _props$featureFlags7, _props$featureFlags8, _props$allowTables4, _props$featureFlags9, _props$featureFlags10, _props$allowTables5, _props$allowExtension, _props$featureFlags11, _props$featureFlags12, _props$featureFlags13, _props$featureFlags14, _props$featureFlags15, _props$featureFlags16, _props$featureFlags17, _props$featureFlags18, _props$featureFlags19, _props$featureFlags20, _props$featureFlags21, _props$featureFlags22, _props$featureFlags23, _props$featureFlags24, _props$featureFlags25, _props$featureFlags26, _props$featureFlags27, _props$featureFlags28, _props$featureFlags29, _props$featureFlags30, _props$featureFlags31, _props$featureFlags32, _props$featureFlags33, _props$collabEdit, _props$collabEdit2, _props$featureFlags34, _props$featureFlags35, _props$featureFlags36, _props$featureFlags37, _props$featureFlags38, _props$featureFlags39, _props$featureFlags40, _props$featureFlags41;
 
   var normalizedFeatureFlags = normalizeFeatureFlags(props.featureFlags);
   return _objectSpread(_objectSpread({}, normalizedFeatureFlags), {}, {
@@ -57,6 +57,8 @@ export function createFeatureFlagsFromProps(props) {
     useNativeCollabPlugin: Boolean(typeof ((_props$collabEdit = props.collabEdit) === null || _props$collabEdit === void 0 ? void 0 : _props$collabEdit.useNativePlugin) === 'boolean' ? !!((_props$collabEdit2 = props.collabEdit) !== null && _props$collabEdit2 !== void 0 && _props$collabEdit2.useNativePlugin) : false),
     chromeCursorHandlerFixedVersion: typeof ((_props$featureFlags34 = props.featureFlags) === null || _props$featureFlags34 === void 0 ? void 0 : _props$featureFlags34.chromeCursorHandlerFixedVersion) === 'string' ? Number(props.featureFlags.chromeCursorHandlerFixedVersion) || undefined : undefined,
     viewChangingExperimentToolbarStyle: typeof ((_props$featureFlags35 = props.featureFlags) === null || _props$featureFlags35 === void 0 ? void 0 : _props$featureFlags35['view-changing-experiment-toolbar-style']) === 'string' ? props.featureFlags['view-changing-experiment-toolbar-style'] || undefined : undefined,
-    showHoverPreview: Boolean(typeof ((_props$featureFlags36 = props.featureFlags) === null || _props$featureFlags36 === void 0 ? void 0 : _props$featureFlags36.showHoverPreview) === 'boolean' ? !!((_props$featureFlags37 = props.featureFlags) !== null && _props$featureFlags37 !== void 0 && _props$featureFlags37.showHoverPreview) : false)
+    showHoverPreview: Boolean(typeof ((_props$featureFlags36 = props.featureFlags) === null || _props$featureFlags36 === void 0 ? void 0 : _props$featureFlags36.showHoverPreview) === 'boolean' ? !!((_props$featureFlags37 = props.featureFlags) !== null && _props$featureFlags37 !== void 0 && _props$featureFlags37.showHoverPreview) : false),
+    indentationButtonsInTheToolbar: Boolean(typeof ((_props$featureFlags38 = props.featureFlags) === null || _props$featureFlags38 === void 0 ? void 0 : _props$featureFlags38['indentation-buttons-in-the-toolbar']) === 'boolean' ? !!((_props$featureFlags39 = props.featureFlags) !== null && _props$featureFlags39 !== void 0 && _props$featureFlags39['indentation-buttons-in-the-toolbar']) : false),
+    floatingToolbarCopyButton: Boolean(typeof ((_props$featureFlags40 = props.featureFlags) === null || _props$featureFlags40 === void 0 ? void 0 : _props$featureFlags40.floatingToolbarCopyButton) === 'boolean' ? !!((_props$featureFlags41 = props.featureFlags) !== null && _props$featureFlags41 !== void 0 && _props$featureFlags41.floatingToolbarCopyButton) : false)
   });
 }

package/dist/esm/plugins/indentation/messages.js

@@ -0,0 +1,14 @@
+// Common Translations will live here
+import { defineMessages } from 'react-intl-next';
+export var messages = defineMessages({
+  indent: {
+    id: 'fabric.editor.indent',
+    defaultMessage: 'Indent',
+    description: 'Indent a list item, paragraph or heading'
+  },
+  outdent: {
+    id: 'fabric.editor.outdent',
+    defaultMessage: 'Outdent',
+    description: 'Outdent a list item, paragraph or heading'
+  }
+});

package/dist/esm/plugins/index.js

@@ -15,6 +15,7 @@ export { default as insertBlockPlugin } from './insert-block';
 export { default as jiraIssuePlugin } from './jira-issue';
 export { default as layoutPlugin } from './layout';
 export { default as listPlugin } from './list';
+export { default as toolbarListsIndentationPlugin } from './toolbar-lists-indentation';
 export { default as macroPlugin } from './macro';
 export { default as maxContentSizePlugin } from './max-content-size';
 export { default as mediaPlugin } from './media';
@@ -63,4 +64,5 @@ export { default as undoRedoPlugin } from './undo-redo';
 export { default as avatarGroupPlugin } from './avatar-group';
 export { default as viewUpdateSubscriptionPlugin } from './view-update-subscription';
 export { default as beforePrimaryToolbarPlugin } from './before-primaryToolbar';
-export { default as codeBidiWarningPlugin } from './code-bidi-warning';
+export { default as codeBidiWarningPlugin } from './code-bidi-warning';
+export { default as copyButtonPlugin } from './copy-button';

package/dist/esm/plugins/list/index.js

@@ -1,15 +1,12 @@
 import React from 'react';
 import { orderedList, bulletList, listItem } from '@atlaskit/adf-schema';
-import ToolbarLists from './ui/ToolbarLists';
-import { createPlugin, pluginKey } from './pm-plugins/main';
+import { createPlugin } from './pm-plugins/main';
 import inputRulePlugin from './pm-plugins/input-rules';
 import keymapPlugin from './pm-plugins/keymap';
-import WithPluginState from '../../ui/WithPluginState';
 import { messages } from './messages';
 import { addAnalytics, ACTION, EVENT_TYPE, INPUT_METHOD, ACTION_SUBJECT, ACTION_SUBJECT_ID } from '../analytics';
 import { tooltip, toggleBulletList, toggleOrderedList } from '../../keymaps';
 import { IconList, IconListNumber } from '../quick-insert/assets';
-import { ToolbarSize } from '../../ui/Toolbar/types';
 
 var listPlugin = function listPlugin() {
   return {
@@ -96,43 +93,6 @@ var listPlugin = function listPlugin() {
           }
         }];
       }
-    },
-    primaryToolbarComponent: function primaryToolbarComponent(_ref4) {
-      var editorView = _ref4.editorView,
-          popupsMountPoint = _ref4.popupsMountPoint,
-          popupsBoundariesElement = _ref4.popupsBoundariesElement,
-          popupsScrollableElement = _ref4.popupsScrollableElement,
-          toolbarSize = _ref4.toolbarSize,
-          disabled = _ref4.disabled,
-          isToolbarReducedSpacing = _ref4.isToolbarReducedSpacing;
-      var isSmall = toolbarSize < ToolbarSize.L;
-      return /*#__PURE__*/React.createElement(WithPluginState, {
-        plugins: {
-          listState: pluginKey
-        },
-        render: function render(_ref5) {
-          var listState = _ref5.listState;
-
-          if (!listState) {
-            return null;
-          }
-
-          return /*#__PURE__*/React.createElement(ToolbarLists, {
-            isSmall: isSmall,
-            isSeparator: true,
-            isReducedSpacing: isToolbarReducedSpacing,
-            disabled: disabled,
-            editorView: editorView,
-            popupsMountPoint: popupsMountPoint,
-            popupsBoundariesElement: popupsBoundariesElement,
-            popupsScrollableElement: popupsScrollableElement,
-            bulletListActive: listState.bulletListActive,
-            bulletListDisabled: listState.bulletListDisabled,
-            orderedListActive: listState.orderedListActive,
-            orderedListDisabled: listState.orderedListDisabled
-          });
-        }
-      });
     }
   };
 };

package/dist/esm/plugins/panel/toolbar.js

@@ -24,6 +24,7 @@ import { DEFAULT_BORDER_COLOR } from '../../ui/ColorPalette/Palettes';
 import { PanelType } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID, withAnalytics } from '../analytics';
 import { messages } from './message';
+import { getCopyButtonConfig, showCopyButton } from '../copy-button/utils';
 export var panelIconMap = (_panelIconMap = {}, _defineProperty(_panelIconMap, PanelType.INFO, {
   shortName: ':info:',
   id: 'atlassian-info'
@@ -43,7 +44,7 @@ export var panelIconMap = (_panelIconMap = {}, _defineProperty(_panelIconMap, Pa
   shortName: ':tip:',
   id: 'atlassian-tip'
 }), _panelIconMap);
-export var getToolbarItems = function getToolbarItems(formatMessage, panelNodeType, isCustomPanelEnabled, isCustomPanelEditable, providerFactory, activePanelType, activePanelColor, activePanelIcon) {
+export var getToolbarItems = function getToolbarItems(formatMessage, panelNodeType, isCustomPanelEnabled, isCustomPanelEditable, providerFactory, activePanelType, activePanelColor, activePanelIcon, state) {
   // TODO: ED-14403 investigate why these titles are not getting translated for the tooltips
   var items = [{
     id: 'editor.panel.info',
@@ -242,6 +243,12 @@ export var getToolbarItems = function getToolbarItems(formatMessage, panelNodeTy
     }
   }
 
+  if (state && showCopyButton(state)) {
+    items.push({
+      type: 'separator'
+    }, getCopyButtonConfig(state, formatMessage, panelNodeType));
+  }
+
   items.push({
     type: 'separator'
   }, {
@@ -277,7 +284,7 @@ export var getToolbarConfig = function getToolbarConfig(state, intl) {
     }; // force toolbar to be turned on
 
 
-    var items = getToolbarItems(formatMessage, nodeType, options.allowCustomPanel || false, options.allowCustomPanel && options.allowCustomPanelEdit || false, providerFactory, panelType, options.allowCustomPanel ? panelColor : undefined, options.allowCustomPanel ? panelIcon || isStandardPanel(panelType) : undefined);
+    var items = getToolbarItems(formatMessage, nodeType, options.allowCustomPanel || false, options.allowCustomPanel && options.allowCustomPanelEdit || false, providerFactory, panelType, options.allowCustomPanel ? panelColor : undefined, options.allowCustomPanel ? panelIcon || isStandardPanel(panelType) : undefined, state);
 
     var getDomRef = function getDomRef(editorView) {
       var domAtPos = editorView.domAtPos.bind(editorView);

package/dist/esm/plugins/quick-insert/search.js

@@ -3,16 +3,15 @@ import Fuse from 'fuse.js';
 import { dedupe } from '../../utils';
 var options = {
   threshold: 0.3,
-  keys: [// Weights must sum to <= 1.0
-  {
+  keys: [{
     name: 'title',
-    weight: 0.5
+    weight: 0.57
   }, {
     name: 'priority',
     weight: 0.3
   }, {
     name: 'keywords',
-    weight: 0.15
+    weight: 0.08
   }, {
     name: 'description',
     weight: 0.04

package/dist/esm/plugins/table/commands/hover.js

@@ -86,7 +86,7 @@ export var hoverRows = function hoverRows(hoveredRows, isInDanger) {
     return tr.setMeta('addToHistory', false);
   });
 };
-export var hoverTable = function hoverTable(isInDanger) {
+export var hoverTable = function hoverTable(isInDanger, isSelected) {
   return createCommand(function (state) {
     var table = findTable(state.selection);
 
@@ -103,7 +103,7 @@ export var hoverTable = function hoverTable(isInDanger) {
       return false;
     }
 
-    var decorations = createControlsHoverDecoration(cells, 'table', isInDanger);
+    var decorations = createControlsHoverDecoration(cells, 'table', isInDanger, isSelected);
     return {
       type: 'HOVER_TABLE',
       data: {

package/dist/esm/plugins/table/toolbar.js

@@ -15,7 +15,8 @@ import { splitCell } from '@atlaskit/editor-tables/utils';
 import tableMessages from './ui/messages';
 import { messages as ContextualMenuMessages } from './ui/FloatingContextualMenu/ContextualMenu';
 import { findParentDomRefOfType } from 'prosemirror-utils';
-import { closestElement } from '../../utils/dom'; // TODO: ED-14403 investigate why these translations don't work
+import { closestElement } from '../../utils/dom';
+import { getCopyButtonConfig, showCopyButton } from '../copy-button/utils'; // TODO: ED-14403 investigate why these translations don't work
 
 export var messages = defineMessages({
   tableOptions: {
@@ -244,7 +245,9 @@ export var getToolbarConfig = function getToolbarConfig(config) {
         items: [menu, separator(menu.hidden)].concat(_toConsumableArray(cellItems), [{
           type: 'extensions-placeholder',
           separator: 'end'
-        }, {
+        }], _toConsumableArray(state && showCopyButton(state) ? [getCopyButtonConfig(state, intl.formatMessage, nodeType, hoverTable(false, true), clearHoverSelection()), {
+          type: 'separator'
+        }] : []), [{
           id: 'editor.table.delete',
           type: 'button',
           appearance: 'danger',

package/dist/esm/plugins/table/utils/decoration.js

@@ -25,7 +25,7 @@ export var createCellHoverDecoration = function createCellHoverDecoration(cells,
     });
   });
 };
-export var createControlsHoverDecoration = function createControlsHoverDecoration(cells, type, danger) {
+export var createControlsHoverDecoration = function createControlsHoverDecoration(cells, type, danger, selected) {
   return cells.map(function (cell) {
     var classes = [ClassName.HOVERED_CELL];
 
@@ -33,6 +33,10 @@ export var createControlsHoverDecoration = function createControlsHoverDecoratio
       classes.push(ClassName.HOVERED_CELL_IN_DANGER);
     }
 
+    if (selected) {
+      classes.push(ClassName.SELECTED_CELL);
+    }
+
     classes.push(type === 'column' ? ClassName.HOVERED_COLUMN : type === 'row' ? ClassName.HOVERED_ROW : ClassName.HOVERED_TABLE);
     var key;
 

package/dist/esm/plugins/toolbar-lists-indentation/index.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import ToolbarListsIndentation from './ui';
+import WithPluginState from '../../ui/WithPluginState';
+import { ToolbarSize } from '../../ui/Toolbar/types';
+import { pluginKey as listPluginKey } from '../list/pm-plugins/main';
+
+var toolbarListsIndentationPlugin = function toolbarListsIndentationPlugin(_ref) {
+  var showIndentationButtons = _ref.showIndentationButtons;
+  return {
+    name: 'toolbarListsIndentation',
+    primaryToolbarComponent: function primaryToolbarComponent(_ref2) {
+      var editorView = _ref2.editorView,
+          popupsMountPoint = _ref2.popupsMountPoint,
+          popupsBoundariesElement = _ref2.popupsBoundariesElement,
+          popupsScrollableElement = _ref2.popupsScrollableElement,
+          toolbarSize = _ref2.toolbarSize,
+          disabled = _ref2.disabled,
+          isToolbarReducedSpacing = _ref2.isToolbarReducedSpacing;
+      var isSmall = toolbarSize < ToolbarSize.L;
+      return /*#__PURE__*/React.createElement(WithPluginState, {
+        plugins: {
+          listState: listPluginKey
+        },
+        render: function render(_ref3) {
+          var listState = _ref3.listState;
+
+          if (!listState) {
+            return null;
+          }
+
+          return /*#__PURE__*/React.createElement(ToolbarListsIndentation, {
+            isSmall: isSmall,
+            isReducedSpacing: isToolbarReducedSpacing,
+            disabled: disabled,
+            editorView: editorView,
+            popupsMountPoint: popupsMountPoint,
+            popupsBoundariesElement: popupsBoundariesElement,
+            popupsScrollableElement: popupsScrollableElement,
+            bulletListActive: listState.bulletListActive,
+            bulletListDisabled: listState.bulletListDisabled,
+            orderedListActive: listState.orderedListActive,
+            orderedListDisabled: listState.orderedListDisabled,
+            showIndentationButtons: !!showIndentationButtons
+          });
+        }
+      });
+    }
+  };
+};
+
+export default toolbarListsIndentationPlugin;

package/dist/esm/plugins/toolbar-lists-indentation/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/plugins/toolbar-lists-indentation/ui/Toolbar.js

@@ -0,0 +1,96 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { useIntl } from 'react-intl-next';
+import BulletListIcon from '@atlaskit/icon/glyph/editor/bullet-list';
+import NumberListIcon from '@atlaskit/icon/glyph/editor/number-list';
+import IndentIcon from '@atlaskit/icon/glyph/editor/indent';
+import OutdentIcon from '@atlaskit/icon/glyph/editor/outdent';
+import { toggleBulletList as toggleBulletListKeymap, toggleOrderedList as toggleOrderedListKeymap, indent as toggleIndentKeymap, outdent as toggleOutdentKeymap, ToolTipContent } from '../../../keymaps';
+import ToolbarButton, { TOOLBAR_BUTTON } from '../../../ui/ToolbarButton';
+import { messages } from '../../list/messages';
+import { messages as indentationMessages } from '../../indentation/messages';
+import { buttonGroupStyle, separatorStyles } from '../../../ui/styles';
+export function Toolbar(props) {
+  var _useIntl = useIntl(),
+      formatMessage = _useIntl.formatMessage;
+
+  var disabled = props.disabled,
+      isReducedSpacing = props.isReducedSpacing,
+      bulletListActive = props.bulletListActive,
+      bulletListDisabled = props.bulletListDisabled,
+      orderedListActive = props.orderedListActive,
+      orderedListDisabled = props.orderedListDisabled,
+      showIndentationButtons = props.showIndentationButtons,
+      onItemActivated = props.onItemActivated;
+  var labelUnorderedList = formatMessage(messages.unorderedList);
+  var labelOrderedList = formatMessage(messages.orderedList);
+
+  var handleOnItemActivated = function handleOnItemActivated(buttonName) {
+    return function (event) {
+      return onItemActivated({
+        editorView: props.editorView,
+        buttonName: buttonName
+      });
+    };
+  };
+
+  return jsx("span", {
+    css: buttonGroupStyle
+  }, jsx(ToolbarButton, {
+    buttonId: TOOLBAR_BUTTON.BULLET_LIST,
+    spacing: isReducedSpacing ? 'none' : 'default',
+    onClick: handleOnItemActivated('bullet_list'),
+    selected: bulletListActive,
+    "aria-pressed": bulletListActive,
+    "aria-label": labelUnorderedList,
+    disabled: bulletListDisabled || disabled,
+    title: jsx(ToolTipContent, {
+      description: labelUnorderedList,
+      keymap: toggleBulletListKeymap
+    }),
+    iconBefore: jsx(BulletListIcon, {
+      label: ""
+    })
+  }), jsx(ToolbarButton, {
+    buttonId: TOOLBAR_BUTTON.ORDERED_LIST,
+    spacing: isReducedSpacing ? 'none' : 'default',
+    onClick: handleOnItemActivated('ordered_list'),
+    selected: orderedListActive,
+    "aria-pressed": orderedListActive,
+    "aria-label": labelOrderedList,
+    disabled: orderedListDisabled || disabled,
+    title: jsx(ToolTipContent, {
+      description: labelOrderedList,
+      keymap: toggleOrderedListKeymap
+    }),
+    iconBefore: jsx(NumberListIcon, {
+      label: ""
+    })
+  }), showIndentationButtons && jsx(ToolbarButton, {
+    buttonId: TOOLBAR_BUTTON.INDENT,
+    spacing: isReducedSpacing ? 'none' : 'default',
+    onClick: handleOnItemActivated('indent'),
+    iconBefore: jsx(IndentIcon, {
+      label: ""
+    }),
+    disabled: true,
+    title: jsx(ToolTipContent, {
+      description: formatMessage(indentationMessages.indent),
+      keymap: toggleIndentKeymap
+    })
+  }), showIndentationButtons && jsx(ToolbarButton, {
+    buttonId: TOOLBAR_BUTTON.OUTDENT,
+    spacing: isReducedSpacing ? 'none' : 'default',
+    onClick: handleOnItemActivated('outdent'),
+    iconBefore: jsx(OutdentIcon, {
+      label: ""
+    }),
+    disabled: true,
+    title: jsx(ToolTipContent, {
+      description: formatMessage(indentationMessages.outdent),
+      keymap: toggleOutdentKeymap
+    })
+  }), jsx("span", {
+    css: separatorStyles
+  }));
+}

package/dist/esm/plugins/toolbar-lists-indentation/ui/ToolbarDropdown.js

@@ -0,0 +1,153 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
+import BulletListIcon from '@atlaskit/icon/glyph/editor/bullet-list';
+import { toggleBulletList as toggleBulletListKeymap, toggleOrderedList as toggleOrderedListKeymap, indent as toggleIndentKeymap, outdent as toggleOutdentKeymap, tooltip } from '../../../keymaps';
+import DropdownMenu from '../../../ui/DropdownMenu';
+import ToolbarButton from '../../../ui/ToolbarButton';
+import { wrapperStyle, expandIconWrapperStyle, shortcutStyle, separatorStyles } from '../../../ui/styles';
+import { messages as listMessages } from '../../list/messages';
+import { messages as indentationMessages } from '../../indentation/messages';
+export function ToolbarDropdown(props) {
+  var _useIntl = useIntl(),
+      formatMessage = _useIntl.formatMessage;
+
+  var disabled = props.disabled,
+      isReducedSpacing = props.isReducedSpacing,
+      bulletListActive = props.bulletListActive,
+      orderedListActive = props.orderedListActive,
+      popupsMountPoint = props.popupsMountPoint,
+      popupsBoundariesElement = props.popupsBoundariesElement,
+      popupsScrollableElement = props.popupsScrollableElement,
+      onItemActivated = props.onItemActivated;
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isDropdownOpen = _React$useState2[0],
+      setIsDropdownOpen = _React$useState2[1];
+
+  var labelLists = formatMessage(listMessages.lists);
+
+  var onOpenChange = function onOpenChange(attrs) {
+    setIsDropdownOpen(attrs.isDropdownOpen);
+  };
+
+  var handleTriggerClick = function handleTriggerClick() {
+    onOpenChange({
+      isDropdownOpen: !isDropdownOpen
+    });
+  };
+
+  var items = useItems(props);
+
+  var handleOnItemActivated = function handleOnItemActivated(_ref) {
+    var item = _ref.item;
+    setIsDropdownOpen(false);
+    return onItemActivated({
+      editorView: props.editorView,
+      buttonName: item.value.name
+    });
+  };
+
+  return jsx("span", {
+    css: wrapperStyle
+  }, jsx(DropdownMenu, {
+    items: items,
+    onItemActivated: handleOnItemActivated,
+    mountTo: popupsMountPoint,
+    boundariesElement: popupsBoundariesElement,
+    scrollableElement: popupsScrollableElement,
+    isOpen: isDropdownOpen,
+    onOpenChange: onOpenChange,
+    fitHeight: 188,
+    fitWidth: 175,
+    shouldUseDefaultRole: true
+  }, jsx(ToolbarButton, {
+    spacing: isReducedSpacing ? 'none' : 'default',
+    selected: bulletListActive || orderedListActive,
+    "aria-expanded": isDropdownOpen,
+    "aria-haspopup": true,
+    "aria-label": labelLists,
+    disabled: disabled,
+    onClick: handleTriggerClick,
+    title: labelLists,
+    iconBefore: jsx("span", {
+      css: wrapperStyle
+    }, jsx(BulletListIcon, {
+      label: labelLists
+    }), jsx("span", {
+      css: expandIconWrapperStyle
+    }, jsx(ExpandIcon, {
+      label: ""
+    })))
+  })), jsx("span", {
+    css: separatorStyles
+  }));
+}
+
+function useItems(props) {
+  var _useIntl2 = useIntl(),
+      formatMessage = _useIntl2.formatMessage;
+
+  var labelUnorderedList = formatMessage(listMessages.unorderedList);
+  var labelOrderedList = formatMessage(listMessages.orderedList);
+  var items = [{
+    key: 'unorderedList',
+    content: labelUnorderedList,
+    value: {
+      name: 'bullet_list'
+    },
+    isDisabled: props.bulletListDisabled,
+    isActive: Boolean(props.bulletListActive),
+    elemAfter: jsx("div", {
+      css: shortcutStyle
+    }, tooltip(toggleBulletListKeymap))
+  }, {
+    key: 'orderedList',
+    content: labelOrderedList,
+    value: {
+      name: 'ordered_list'
+    },
+    isDisabled: props.orderedListDisabled,
+    isActive: Boolean(props.orderedListActive),
+    elemAfter: jsx("div", {
+      css: shortcutStyle
+    }, tooltip(toggleOrderedListKeymap))
+  }];
+
+  if (props.showIndentationButtons) {
+    var labelIndent = formatMessage(indentationMessages.indent);
+    var labelOutdent = formatMessage(indentationMessages.outdent);
+    items.push({
+      key: 'indent',
+      content: labelIndent,
+      value: {
+        name: 'indent'
+      },
+      isDisabled: true,
+      isActive: false,
+      elemAfter: jsx("div", {
+        css: shortcutStyle
+      }, tooltip(toggleIndentKeymap))
+    }, {
+      key: 'outdent',
+      content: labelOutdent,
+      value: {
+        name: 'outdent'
+      },
+      isDisabled: true,
+      isActive: false,
+      elemAfter: jsx("div", {
+        css: shortcutStyle
+      }, tooltip(toggleOutdentKeymap))
+    });
+  }
+
+  return [{
+    items: items
+  }];
+}

package/dist/esm/plugins/toolbar-lists-indentation/ui/index.js

@@ -0,0 +1,47 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { onItemActivated } from './onItemActivated';
+import { ToolbarDropdown } from './ToolbarDropdown';
+import { Toolbar } from './Toolbar';
+export default function ToolbarListsIndentation(props) {
+  var disabled = props.disabled,
+      isSmall = props.isSmall,
+      isReducedSpacing = props.isReducedSpacing,
+      bulletListActive = props.bulletListActive,
+      bulletListDisabled = props.bulletListDisabled,
+      orderedListActive = props.orderedListActive,
+      orderedListDisabled = props.orderedListDisabled,
+      showIndentationButtons = props.showIndentationButtons,
+      popupsMountPoint = props.popupsMountPoint,
+      popupsBoundariesElement = props.popupsBoundariesElement,
+      popupsScrollableElement = props.popupsScrollableElement;
+
+  if (isSmall) {
+    return jsx(ToolbarDropdown, {
+      editorView: props.editorView,
+      isReducedSpacing: isReducedSpacing,
+      popupsMountPoint: popupsMountPoint,
+      popupsBoundariesElement: popupsBoundariesElement,
+      popupsScrollableElement: popupsScrollableElement,
+      bulletListActive: bulletListActive,
+      bulletListDisabled: bulletListDisabled,
+      showIndentationButtons: showIndentationButtons,
+      orderedListActive: orderedListActive,
+      orderedListDisabled: orderedListDisabled,
+      disabled: disabled,
+      onItemActivated: onItemActivated
+    });
+  }
+
+  return jsx(Toolbar, {
+    editorView: props.editorView,
+    isReducedSpacing: isReducedSpacing,
+    bulletListActive: bulletListActive,
+    bulletListDisabled: bulletListDisabled,
+    showIndentationButtons: showIndentationButtons,
+    orderedListActive: orderedListActive,
+    orderedListDisabled: orderedListDisabled,
+    disabled: disabled,
+    onItemActivated: onItemActivated
+  });
+}

package/dist/esm/plugins/toolbar-lists-indentation/ui/onItemActivated.js

@@ -0,0 +1,39 @@
+import { toggleBulletList, toggleOrderedList } from '../../list/commands';
+import { INPUT_METHOD } from '../../analytics';
+export function onItemActivated(_ref) {
+  var buttonName = _ref.buttonName,
+      editorView = _ref.editorView;
+
+  switch (buttonName) {
+    case 'bullet_list':
+      toggleBulletList(editorView, INPUT_METHOD.TOOLBAR);
+      break;
+
+    case 'ordered_list':
+      toggleOrderedList(editorView, INPUT_METHOD.TOOLBAR);
+      break;
+
+    case 'indent':
+      editorView.someProp('handleKeyDown', function (handleKeyDown) {
+        return handleKeyDown(editorView, new KeyboardEvent('keydown', {
+          bubbles: true,
+          cancelable: true,
+          key: 'Tab',
+          code: 'Tab'
+        }));
+      });
+      break;
+
+    case 'outdent':
+      editorView.someProp('handleKeyDown', function (handleKeyDown) {
+        return handleKeyDown(editorView, new KeyboardEvent('keydown', {
+          bubbles: true,
+          cancelable: true,
+          shiftKey: true,
+          key: 'Tab',
+          code: 'Tab'
+        }));
+      });
+      break;
+  }
+}