@atlaskit/editor-core 189.4.1 → 189.4.2

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

@@ -1,168 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ToolbarDropdown = ToolbarDropdown;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = require("@emotion/react");
-var _react2 = _interopRequireDefault(require("react"));
-var _reactIntlNext = require("react-intl-next");
-var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
-var _bulletList = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/bullet-list"));
-var _keymaps = require("../../../keymaps");
-var _uiMenu = require("@atlaskit/editor-common/ui-menu");
-var _ToolbarButton = _interopRequireDefault(require("../../../ui/ToolbarButton"));
-var _styles = require("../../../ui/styles");
-var _styles2 = require("@atlaskit/editor-common/styles");
-var _messages = require("@atlaskit/editor-common/messages");
-/** @jsx jsx */
-
-function ToolbarDropdown(props) {
-  var _useIntl = (0, _reactIntlNext.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 = _react2.default.useState(false),
-    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-    isDropdownOpen = _React$useState2[0],
-    setIsDropdownOpen = _React$useState2[1];
-  var _React$useState3 = _react2.default.useState(false),
-    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
-    isOpenedByKeyboard = _React$useState4[0],
-    setOpenedByKeyboard = _React$useState4[1];
-  var labelLists = formatMessage(_messages.listMessages.lists);
-  var onOpenChange = function onOpenChange(attrs) {
-    setIsDropdownOpen(attrs.isDropdownOpen);
-  };
-  var handleTriggerClick = function handleTriggerClick() {
-    onOpenChange({
-      isDropdownOpen: !isDropdownOpen
-    });
-  };
-  var handleOnKeyDown = function handleOnKeyDown(event) {
-    if (event.key === 'Enter' || event.key === ' ') {
-      event.preventDefault();
-      setIsDropdownOpen(!isDropdownOpen);
-      setOpenedByKeyboard(true);
-    }
-  };
-  var items = useItems(props);
-  var handleOnItemActivated = function handleOnItemActivated(_ref) {
-    var item = _ref.item,
-      _ref$shouldCloseMenu = _ref.shouldCloseMenu,
-      shouldCloseMenu = _ref$shouldCloseMenu === void 0 ? true : _ref$shouldCloseMenu;
-    setIsDropdownOpen(!shouldCloseMenu);
-    return onItemActivated({
-      editorView: props.editorView,
-      buttonName: item.value.name
-    });
-  };
-  return (0, _react.jsx)("span", {
-    css: _styles2.wrapperStyle
-  }, (0, _react.jsx)(_uiMenu.DropdownMenuWithKeyboardNavigation, {
-    items: items,
-    onItemActivated: handleOnItemActivated,
-    mountTo: popupsMountPoint,
-    boundariesElement: popupsBoundariesElement,
-    scrollableElement: popupsScrollableElement,
-    isOpen: isDropdownOpen,
-    onOpenChange: onOpenChange,
-    fitHeight: 188,
-    fitWidth: 175,
-    shouldUseDefaultRole: true,
-    shouldFocusFirstItem: function shouldFocusFirstItem() {
-      if (isOpenedByKeyboard) {
-        setOpenedByKeyboard(false);
-      }
-      return isOpenedByKeyboard;
-    }
-  }, (0, _react.jsx)(_ToolbarButton.default, {
-    spacing: isReducedSpacing ? 'none' : 'default',
-    selected: bulletListActive || orderedListActive,
-    "aria-expanded": isDropdownOpen,
-    "aria-haspopup": true,
-    "aria-label": labelLists,
-    disabled: disabled,
-    onClick: handleTriggerClick,
-    onKeyDown: handleOnKeyDown,
-    title: labelLists,
-    iconBefore: (0, _react.jsx)("span", {
-      css: _styles2.wrapperStyle
-    }, (0, _react.jsx)(_bulletList.default, {
-      label: labelLists
-    }), (0, _react.jsx)("span", {
-      css: _styles2.expandIconWrapperStyle
-    }, (0, _react.jsx)(_chevronDown.default, {
-      label: ""
-    })))
-  })), (0, _react.jsx)("span", {
-    css: _styles2.separatorStyles
-  }));
-}
-function useItems(props) {
-  var _useIntl2 = (0, _reactIntlNext.useIntl)(),
-    formatMessage = _useIntl2.formatMessage;
-  var labelUnorderedList = formatMessage(_messages.listMessages.unorderedList);
-  var labelOrderedList = formatMessage(_messages.listMessages.orderedList);
-  var items = [{
-    key: 'unorderedList',
-    content: labelUnorderedList,
-    value: {
-      name: 'bullet_list'
-    },
-    isDisabled: props.bulletListDisabled,
-    isActive: Boolean(props.bulletListActive),
-    elemAfter: (0, _react.jsx)("div", {
-      css: _styles.shortcutStyle
-    }, (0, _keymaps.tooltip)(_keymaps.toggleBulletList))
-  }, {
-    key: 'orderedList',
-    content: labelOrderedList,
-    value: {
-      name: 'ordered_list'
-    },
-    isDisabled: props.orderedListDisabled,
-    isActive: Boolean(props.orderedListActive),
-    elemAfter: (0, _react.jsx)("div", {
-      css: _styles.shortcutStyle
-    }, (0, _keymaps.tooltip)(_keymaps.toggleOrderedList))
-  }];
-  if (props.showIndentationButtons) {
-    var labelIndent = formatMessage(_messages.indentationMessages.indent);
-    var labelOutdent = formatMessage(_messages.indentationMessages.outdent);
-    items.push({
-      key: 'outdent',
-      content: labelOutdent,
-      value: {
-        name: 'outdent'
-      },
-      isDisabled: props.outdentDisabled,
-      isActive: false,
-      elemAfter: (0, _react.jsx)("div", {
-        css: _styles.shortcutStyle
-      }, (0, _keymaps.tooltip)(_keymaps.outdent))
-    }, {
-      key: 'indent',
-      content: labelIndent,
-      value: {
-        name: 'indent'
-      },
-      isDisabled: props.indentDisabled,
-      isActive: false,
-      elemAfter: (0, _react.jsx)("div", {
-        css: _styles.shortcutStyle
-      }, (0, _keymaps.tooltip)(_keymaps.indent))
-    });
-  }
-  return [{
-    items: items
-  }];
-}

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

@@ -1,63 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = ToolbarListsIndentation;
-var _react = require("@emotion/react");
-var _onItemActivated = require("./onItemActivated");
-var _ToolbarDropdown = require("./ToolbarDropdown");
-var _Toolbar = require("./Toolbar");
-/** @jsx jsx */
-
-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,
-    indentDisabled = props.indentDisabled,
-    outdentDisabled = props.outdentDisabled,
-    indentationStateNode = props.indentationStateNode,
-    featureFlags = props.featureFlags,
-    pluginInjectionApi = props.pluginInjectionApi;
-  if (isSmall) {
-    return (0, _react.jsx)(_ToolbarDropdown.ToolbarDropdown, {
-      editorView: props.editorView,
-      isReducedSpacing: isReducedSpacing,
-      popupsMountPoint: popupsMountPoint,
-      popupsBoundariesElement: popupsBoundariesElement,
-      popupsScrollableElement: popupsScrollableElement,
-      bulletListActive: bulletListActive,
-      bulletListDisabled: bulletListDisabled,
-      showIndentationButtons: showIndentationButtons,
-      orderedListActive: orderedListActive,
-      orderedListDisabled: orderedListDisabled,
-      indentDisabled: indentDisabled,
-      outdentDisabled: outdentDisabled,
-      disabled: disabled,
-      onItemActivated: (0, _onItemActivated.onItemActivated)(pluginInjectionApi, indentationStateNode),
-      featureFlags: featureFlags
-    });
-  }
-  return (0, _react.jsx)(_Toolbar.Toolbar, {
-    editorView: props.editorView,
-    isReducedSpacing: isReducedSpacing,
-    bulletListActive: bulletListActive,
-    bulletListDisabled: bulletListDisabled,
-    showIndentationButtons: showIndentationButtons,
-    orderedListActive: orderedListActive,
-    orderedListDisabled: orderedListDisabled,
-    indentDisabled: indentDisabled,
-    outdentDisabled: outdentDisabled,
-    disabled: disabled,
-    onItemActivated: (0, _onItemActivated.onItemActivated)(pluginInjectionApi, indentationStateNode),
-    featureFlags: featureFlags
-  });
-}

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

@@ -1,53 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.onItemActivated = void 0;
-var _analytics = require("@atlaskit/editor-common/analytics");
-var onItemActivated = exports.onItemActivated = function onItemActivated(pluginInjectionApi, indentationStateNode) {
-  return function (_ref) {
-    var buttonName = _ref.buttonName,
-      editorView = _ref.editorView;
-    switch (buttonName) {
-      case 'bullet_list':
-        pluginInjectionApi === null || pluginInjectionApi === void 0 || pluginInjectionApi.core.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.list.commands.toggleBulletList(_analytics.INPUT_METHOD.TOOLBAR));
-        break;
-      case 'ordered_list':
-        pluginInjectionApi === null || pluginInjectionApi === void 0 || pluginInjectionApi.core.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.list.commands.toggleOrderedList(_analytics.INPUT_METHOD.TOOLBAR));
-        break;
-      case 'indent':
-        {
-          var node = indentationStateNode;
-          if (node === 'paragraph_heading') {
-            var _pluginInjectionApi$i;
-            pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$i = pluginInjectionApi.indentation) === null || _pluginInjectionApi$i === void 0 || _pluginInjectionApi$i.actions.indentParagraphOrHeading(_analytics.INPUT_METHOD.TOOLBAR)(editorView.state, editorView.dispatch);
-          }
-          if (node === 'list') {
-            pluginInjectionApi === null || pluginInjectionApi === void 0 || pluginInjectionApi.core.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.list.commands.indentList(_analytics.INPUT_METHOD.TOOLBAR));
-          }
-          if (node === 'taskList') {
-            var _pluginInjectionApi$t;
-            pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$t = pluginInjectionApi.taskDecision) === null || _pluginInjectionApi$t === void 0 || _pluginInjectionApi$t.actions.indentTaskList(_analytics.INPUT_METHOD.TOOLBAR)(editorView.state, editorView.dispatch);
-          }
-          break;
-        }
-      case 'outdent':
-        {
-          var _node = indentationStateNode;
-          if (_node === 'paragraph_heading') {
-            var _pluginInjectionApi$i2;
-            pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$i2 = pluginInjectionApi.indentation) === null || _pluginInjectionApi$i2 === void 0 || _pluginInjectionApi$i2.actions.outdentParagraphOrHeading(_analytics.INPUT_METHOD.TOOLBAR)(editorView.state, editorView.dispatch);
-          }
-          if (_node === 'list') {
-            pluginInjectionApi === null || pluginInjectionApi === void 0 || pluginInjectionApi.core.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.list.commands.outdentList(_analytics.INPUT_METHOD.TOOLBAR));
-          }
-          if (_node === 'taskList') {
-            var _pluginInjectionApi$t2;
-            pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$t2 = pluginInjectionApi.taskDecision) === null || _pluginInjectionApi$t2 === void 0 || _pluginInjectionApi$t2.actions.outdentTaskList(_analytics.INPUT_METHOD.TOOLBAR)(editorView.state, editorView.dispatch);
-          }
-          break;
-        }
-    }
-  };
-};

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

@@ -1,86 +0,0 @@
-import React from 'react';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
-import ToolbarListsIndentation from './ui';
-import { ToolbarSize } from '../../ui/Toolbar/types';
-import { getIndentationButtonsState } from './pm-plugins/indentation-buttons';
-const toolbarListsIndentationPlugin = ({
-  config,
-  api
-}) => {
-  var _api$featureFlags;
-  const {
-    showIndentationButtons = false,
-    allowHeadingAndParagraphIndentation = false
-  } = config !== null && config !== void 0 ? config : {};
-  const featureFlags = (api === null || api === void 0 ? void 0 : (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState()) || {};
-  return {
-    name: 'toolbarListsIndentation',
-    primaryToolbarComponent({
-      editorView,
-      popupsMountPoint,
-      popupsBoundariesElement,
-      popupsScrollableElement,
-      toolbarSize,
-      disabled,
-      isToolbarReducedSpacing
-    }) {
-      const isSmall = toolbarSize < ToolbarSize.L;
-      return /*#__PURE__*/React.createElement(PrimaryToolbarComponent, {
-        featureFlags: featureFlags,
-        popupsMountPoint: popupsMountPoint,
-        popupsBoundariesElement: popupsBoundariesElement,
-        popupsScrollableElement: popupsScrollableElement,
-        isSmall: isSmall,
-        isToolbarReducedSpacing: isToolbarReducedSpacing,
-        disabled: disabled,
-        editorView: editorView,
-        showIndentationButtons: showIndentationButtons,
-        pluginInjectionApi: api,
-        allowHeadingAndParagraphIndentation: allowHeadingAndParagraphIndentation
-      });
-    }
-  };
-};
-export function PrimaryToolbarComponent({
-  featureFlags,
-  popupsMountPoint,
-  popupsBoundariesElement,
-  popupsScrollableElement,
-  isSmall,
-  isToolbarReducedSpacing,
-  disabled,
-  editorView,
-  showIndentationButtons,
-  pluginInjectionApi,
-  allowHeadingAndParagraphIndentation
-}) {
-  const {
-    listState,
-    indentationState,
-    taskDecisionState
-  } = useSharedPluginState(pluginInjectionApi, ['list', 'indentation', 'taskDecision']);
-  const toolbarListsIndentationState = getIndentationButtonsState(editorView.state, allowHeadingAndParagraphIndentation, taskDecisionState, indentationState, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.list.actions.isInsideListItem);
-  if (!listState) {
-    return null;
-  }
-  return /*#__PURE__*/React.createElement(ToolbarListsIndentation, {
-    featureFlags: featureFlags,
-    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,
-    indentDisabled: toolbarListsIndentationState.indentDisabled,
-    outdentDisabled: toolbarListsIndentationState.outdentDisabled,
-    indentationStateNode: toolbarListsIndentationState === null || toolbarListsIndentationState === void 0 ? void 0 : toolbarListsIndentationState.node,
-    pluginInjectionApi: pluginInjectionApi
-  });
-}
-export default toolbarListsIndentationPlugin;

package/dist/es2019/plugins/toolbar-lists-indentation/pm-plugins/indentation-buttons.js

@@ -1,53 +0,0 @@
-import { hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
-import { getListItemAttributes } from '@atlaskit/editor-common/lists';
-import { MAX_INDENTATION_LEVEL } from '@atlaskit/editor-common/indentation';
-export function getIndentationButtonsState(editorState, allowHeadingAndParagraphIndentation, taskDecisionState, indentationState, isInsideListItem) {
-  var _indentationState$isI;
-  const state = {
-    indentDisabled: true,
-    outdentDisabled: true,
-    node: null
-  };
-  const {
-    selection
-  } = editorState;
-
-  // Handle bullet and numbered lists seperately as they do
-  // not use the indentation mark.
-  // Check for lists before paragraphs and headings in case
-  // the selection is in a list nested in a layout column.
-  if (isInsideListItem !== null && isInsideListItem !== void 0 && isInsideListItem(editorState.tr)) {
-    const {
-      indentLevel,
-      itemIndex
-    } = getListItemAttributes(selection.$head);
-    return {
-      // List indent levels are zero indexed so we need to subtract 1
-      indentDisabled: itemIndex === 0 || indentLevel >= MAX_INDENTATION_LEVEL - 1,
-      outdentDisabled: false,
-      node: 'list'
-    };
-  }
-
-  // Handle tasks seperately as they do not use the indentation mark
-  // and have different behaviour for outdent compared to lists
-  if (taskDecisionState !== null && taskDecisionState !== void 0 && taskDecisionState.isInsideTask) {
-    return {
-      indentDisabled: taskDecisionState.indentDisabled,
-      outdentDisabled: taskDecisionState.outdentDisabled,
-      node: 'taskList'
-    };
-  }
-  const isTopLevelParagraphOrHeading = selection.$from.depth === 1;
-  const isInLayoutNode = hasParentNodeOfType(editorState.schema.nodes.layoutColumn)(selection) &&
-  // depth of non-nested paragraphs and headings in layouts will always be 3
-  selection.$from.depth === 3;
-  if (allowHeadingAndParagraphIndentation && ((_indentationState$isI = indentationState === null || indentationState === void 0 ? void 0 : indentationState.isIndentationAllowed) !== null && _indentationState$isI !== void 0 ? _indentationState$isI : false) && (isTopLevelParagraphOrHeading || isInLayoutNode) && indentationState) {
-    return {
-      indentDisabled: indentationState.indentDisabled,
-      outdentDisabled: indentationState.outdentDisabled,
-      node: 'paragraph_heading'
-    };
-  }
-  return state;
-}

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

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

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

@@ -1,123 +0,0 @@
-/** @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, tooltip } from '../../../keymaps';
-import ToolbarButton, { TOOLBAR_BUTTON } from '../../../ui/ToolbarButton';
-import { listMessages as messages, indentationMessages } from '@atlaskit/editor-common/messages';
-import { separatorStyles, buttonGroupStyle } from '@atlaskit/editor-common/styles';
-import { getAriaKeyshortcuts } from '@atlaskit/editor-common/keymaps';
-import { useEffect, useRef } from 'react';
-export function Toolbar(props) {
-  const {
-    formatMessage
-  } = useIntl();
-  const indentButtonRef = useRef(null);
-  const outdentButtonRef = useRef(null);
-  const {
-    disabled,
-    isReducedSpacing,
-    bulletListActive,
-    bulletListDisabled,
-    orderedListActive,
-    orderedListDisabled,
-    showIndentationButtons,
-    indentDisabled,
-    outdentDisabled,
-    onItemActivated
-  } = props;
-  const labelUnorderedList = formatMessage(messages.unorderedList);
-  const labelOrderedList = formatMessage(messages.orderedList);
-  const indentMessage = formatMessage(indentationMessages.indent);
-  const outdentMessage = formatMessage(indentationMessages.outdent);
-  const isIndentButtonFocused = document.activeElement === indentButtonRef.current;
-  const isOutdentButtonFocused = document.activeElement === outdentButtonRef.current;
-  const handleOnItemActivated = buttonName => event => onItemActivated({
-    editorView: props.editorView,
-    buttonName
-  });
-  useEffect(() => {
-    if (isIndentButtonFocused && indentDisabled && outdentButtonRef.current) {
-      outdentButtonRef.current.focus();
-    }
-  }, [indentButtonRef, indentDisabled, isIndentButtonFocused]);
-  useEffect(() => {
-    if (isOutdentButtonFocused && outdentDisabled && indentButtonRef.current) {
-      indentButtonRef.current.focus();
-    }
-  }, [outdentButtonRef, outdentDisabled, isOutdentButtonFocused]);
-  return jsx("span", {
-    css: buttonGroupStyle
-  }, jsx(ToolbarButton, {
-    buttonId: TOOLBAR_BUTTON.BULLET_LIST,
-    testId: labelUnorderedList,
-    spacing: isReducedSpacing ? 'none' : 'default',
-    onClick: handleOnItemActivated('bullet_list'),
-    selected: bulletListActive,
-    "aria-pressed": bulletListActive,
-    "aria-label": tooltip(toggleBulletListKeymap, labelUnorderedList),
-    "aria-keyshortcuts": getAriaKeyshortcuts(toggleBulletListKeymap),
-    disabled: bulletListDisabled || disabled,
-    title: jsx(ToolTipContent, {
-      description: labelUnorderedList,
-      keymap: toggleBulletListKeymap
-    }),
-    iconBefore: jsx(BulletListIcon, {
-      label: ""
-    })
-  }), jsx(ToolbarButton, {
-    buttonId: TOOLBAR_BUTTON.ORDERED_LIST,
-    testId: labelOrderedList,
-    spacing: isReducedSpacing ? 'none' : 'default',
-    onClick: handleOnItemActivated('ordered_list'),
-    selected: orderedListActive,
-    "aria-pressed": orderedListActive,
-    "aria-label": tooltip(toggleOrderedListKeymap, labelOrderedList),
-    "aria-keyshortcuts": getAriaKeyshortcuts(toggleOrderedListKeymap),
-    disabled: orderedListDisabled || disabled,
-    title: jsx(ToolTipContent, {
-      description: labelOrderedList,
-      keymap: toggleOrderedListKeymap
-    }),
-    iconBefore: jsx(NumberListIcon, {
-      label: ""
-    })
-  }), showIndentationButtons && jsx(ToolbarButton, {
-    buttonId: TOOLBAR_BUTTON.OUTDENT,
-    testId: TOOLBAR_BUTTON.OUTDENT,
-    ref: outdentButtonRef,
-    spacing: isReducedSpacing ? 'none' : 'default',
-    onClick: handleOnItemActivated('outdent'),
-    iconBefore: jsx(OutdentIcon, {
-      label: ""
-    }),
-    disabled: outdentDisabled || disabled,
-    "aria-label": tooltip(toggleOutdentKeymap, outdentMessage),
-    "aria-keyshortcuts": getAriaKeyshortcuts(toggleOutdentKeymap),
-    title: jsx(ToolTipContent, {
-      description: outdentMessage,
-      keymap: toggleOutdentKeymap
-    })
-  }), showIndentationButtons && jsx(ToolbarButton, {
-    buttonId: TOOLBAR_BUTTON.INDENT,
-    testId: TOOLBAR_BUTTON.INDENT,
-    ref: indentButtonRef,
-    spacing: isReducedSpacing ? 'none' : 'default',
-    onClick: handleOnItemActivated('indent'),
-    iconBefore: jsx(IndentIcon, {
-      label: ""
-    }),
-    disabled: indentDisabled || disabled,
-    "aria-label": tooltip(toggleIndentKeymap, indentMessage),
-    "aria-keyshortcuts": getAriaKeyshortcuts(toggleIndentKeymap),
-    title: jsx(ToolTipContent, {
-      description: indentMessage,
-      keymap: toggleIndentKeymap
-    })
-  }), jsx("span", {
-    css: separatorStyles
-  }));
-}