@atlaskit/editor-core 167.0.3 → 169.1.0

package/dist/es2019/plugins/copy-button/commands.js

@@ -0,0 +1,64 @@
+import { findSelectedNodeOfType, findParentNodeOfType } from 'prosemirror-utils';
+import { pluginKey } from './pm-plugins/plugin-key';
+import { hoverDecoration } from '../base/pm-plugins/decoration';
+import { DOMSerializer } from 'prosemirror-model';
+import { copyHTMLToClipboard } from '../../utils/clipboard';
+export const copy = nodeType => (state, dispatch) => {
+  const {
+    tr,
+    schema
+  } = state; // This command should only be triggered by the Copy button in the floating toolbar
+  // which is only visible when selection is inside the target node
+
+  let node = findSelectedNodeOfType(nodeType)(tr.selection);
+
+  if (!node) {
+    node = findParentNodeOfType(nodeType)(tr.selection);
+  }
+
+  if (!node) {
+    return false;
+  }
+
+  const domNode = DOMSerializer.fromSchema(schema).serializeNode(node.node);
+  const div = document.createElement('div');
+  div.appendChild(domNode); // The "0 0" refers to the start and end depth of the slice
+  // since we're coping the block node only, it will always be 0 0
+  // https://github.com/ProseMirror/prosemirror-view/blob/master/src/clipboard.ts#L32
+
+  div.firstChild.setAttribute('data-pm-slice', '0 0 []');
+  copyHTMLToClipboard(div.innerHTML);
+  const copyToClipboardTr = tr;
+  copyToClipboardTr.setMeta(pluginKey, {
+    copied: true
+  });
+
+  if (dispatch) {
+    dispatch(copyToClipboardTr);
+  }
+
+  return true;
+};
+export const resetCopiedState = (nodeType, onMouseLeave) => (state, dispatch) => {
+  let customTr = state.tr; // Avoid multipe dispatch
+  // https://product-fabric.atlassian.net/wiki/spaces/E/pages/2241659456/All+about+dispatch+and+why+there+shouldn+t+be+multiple#How-do-I-avoid-them%3F
+
+  const customDispatch = tr => {
+    customTr = tr;
+  };
+
+  onMouseLeave ? onMouseLeave(state, customDispatch) : hoverDecoration(nodeType, false)(state, customDispatch);
+  const copyButtonState = pluginKey.getState(state);
+
+  if (copyButtonState !== null && copyButtonState !== void 0 && copyButtonState.copied) {
+    customTr.setMeta(pluginKey, {
+      copied: false
+    });
+  }
+
+  if (dispatch) {
+    dispatch(customTr);
+  }
+
+  return true;
+};

package/dist/es2019/plugins/copy-button/index.js

@@ -0,0 +1,15 @@
+import createPlugin from './pm-plugins/main';
+
+const copyButtonPlugin = () => ({
+  name: 'copyButton',
+
+  pmPlugins() {
+    return [{
+      name: 'copyButton',
+      plugin: () => createPlugin()
+    }];
+  }
+
+});
+
+export default copyButtonPlugin;

package/dist/es2019/plugins/copy-button/pm-plugins/main.js

@@ -0,0 +1,28 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { pluginKey } from './plugin-key';
+export function copyButtonPlugin() {
+  return new SafePlugin({
+    state: {
+      init() {
+        return {
+          copied: false
+        };
+      },
+
+      apply(tr, pluginState) {
+        const meta = tr.getMeta(pluginKey);
+
+        if ((meta === null || meta === void 0 ? void 0 : meta.copied) !== undefined) {
+          return {
+            copied: meta.copied
+          };
+        }
+
+        return pluginState;
+      }
+
+    },
+    key: pluginKey
+  });
+}
+export default copyButtonPlugin;

package/dist/es2019/plugins/copy-button/pm-plugins/plugin-key.js

@@ -0,0 +1,2 @@
+import { PluginKey } from 'prosemirror-state';
+export const pluginKey = new PluginKey('copyButtonPlugin');

package/dist/es2019/plugins/copy-button/utils.js

@@ -0,0 +1,29 @@
+import CopyIcon from '@atlaskit/icon/glyph/copy';
+import commonMessages from '../../messages';
+import { hoverDecoration } from '../base/pm-plugins/decoration';
+import { copy, resetCopiedState } from './commands';
+import { pluginKey } from './pm-plugins/plugin-key';
+export const getCopyButtonConfig = (state, formatMessage, nodeType, onMouseEnter, onMouseLeave) => {
+  const copyButtonState = pluginKey.getState(state);
+  return {
+    id: 'editor.floatingToolbar.copy',
+    type: 'button',
+    appearance: 'subtle',
+    icon: CopyIcon,
+    onClick: copy(nodeType),
+    title: formatMessage(copyButtonState !== null && copyButtonState !== void 0 && copyButtonState.copied ? commonMessages.copiedToClipboard : commonMessages.copyToClipboard),
+    onMouseEnter: onMouseEnter || hoverDecoration(nodeType, true, 'ak-editor-selected-node'),
+    onMouseLeave: resetCopiedState(nodeType, onMouseLeave),
+    onFocus: hoverDecoration(nodeType, true, 'ak-editor-selected-node'),
+    onBlur: hoverDecoration(nodeType, false),
+    hideTooltipOnClick: false,
+    tabIndex: null // TODO select and delete styling needs to be removed when keyboard cursor moves away
+    // problem already exist with delete as well
+
+  };
+};
+export const showCopyButton = state => {
+  return state && // Check if the Copy button plugin is enabled
+  // @ts-ignore pluginKey.key
+  state.plugins.find(p => p.key === pluginKey.key);
+};

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

@@ -12,7 +12,7 @@ const 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;
 
   const normalizedFeatureFlags = normalizeFeatureFlags(props.featureFlags);
   return { ...normalizedFeatureFlags,
@@ -50,6 +50,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/es2019/plugins/indentation/messages.js

@@ -0,0 +1,14 @@
+// Common Translations will live here
+import { defineMessages } from 'react-intl-next';
+export const 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/es2019/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/es2019/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';
 
 const listPlugin = () => ({
   name: 'list',
@@ -93,47 +90,7 @@ const listPlugin = () => ({
       }
 
     }]
-  },
-
-  primaryToolbarComponent({
-    editorView,
-    popupsMountPoint,
-    popupsBoundariesElement,
-    popupsScrollableElement,
-    toolbarSize,
-    disabled,
-    isToolbarReducedSpacing
-  }) {
-    const isSmall = toolbarSize < ToolbarSize.L;
-    return /*#__PURE__*/React.createElement(WithPluginState, {
-      plugins: {
-        listState: pluginKey
-      },
-      render: ({
-        listState: 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
-        });
-      }
-    });
   }
-
 });
 
 export default listPlugin;

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

@@ -16,6 +16,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 const panelIconMap = {
   [PanelType.INFO]: {
     shortName: ':info:',
@@ -42,7 +43,7 @@ export const panelIconMap = {
     id: 'atlassian-tip'
   }
 };
-export const getToolbarItems = (formatMessage, panelNodeType, isCustomPanelEnabled, isCustomPanelEditable, providerFactory, activePanelType, activePanelColor, activePanelIcon) => {
+export const getToolbarItems = (formatMessage, panelNodeType, isCustomPanelEnabled, isCustomPanelEditable, providerFactory, activePanelType, activePanelColor, activePanelIcon, state) => {
   // TODO: ED-14403 investigate why these titles are not getting translated for the tooltips
   const items = [{
     id: 'editor.panel.info',
@@ -231,6 +232,12 @@ export const getToolbarItems = (formatMessage, panelNodeType, isCustomPanelEnabl
     }
   }
 
+  if (state && showCopyButton(state)) {
+    items.push({
+      type: 'separator'
+    }, getCopyButtonConfig(state, formatMessage, panelNodeType));
+  }
+
   items.push({
     type: 'separator'
   }, {
@@ -267,7 +274,7 @@ export const getToolbarConfig = (state, intl, options = {}, providerFactory) =>
     }; // force toolbar to be turned on
 
 
-    const items = getToolbarItems(formatMessage, nodeType, options.allowCustomPanel || false, options.allowCustomPanel && options.allowCustomPanelEdit || false, providerFactory, panelType, options.allowCustomPanel ? panelColor : undefined, options.allowCustomPanel ? panelIcon || isStandardPanel(panelType) : undefined);
+    const 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);
 
     const getDomRef = editorView => {
       const domAtPos = editorView.domAtPos.bind(editorView);

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

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

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

@@ -14,7 +14,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 const messages = defineMessages({
   tableOptions: {
@@ -244,7 +245,9 @@ export const getToolbarConfig = config => (state, intl) => {
       items: [menu, separator(menu.hidden), ...cellItems, {
         type: 'extensions-placeholder',
         separator: 'end'
-      }, {
+      }, ...(state && showCopyButton(state) ? [getCopyButtonConfig(state, intl.formatMessage, nodeType, hoverTable(false, true), clearHoverSelection()), {
+        type: 'separator'
+      }] : []), {
         id: 'editor.table.delete',
         type: 'button',
         appearance: 'danger',

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

@@ -13,13 +13,17 @@ export const createCellHoverDecoration = (cells, type) => cells.map(cell => Deco
 }, {
   key: TableDecorations.CELL_CONTROLS_HOVER
 }));
-export const createControlsHoverDecoration = (cells, type, danger) => cells.map(cell => {
+export const createControlsHoverDecoration = (cells, type, danger, selected) => cells.map(cell => {
   const classes = [ClassName.HOVERED_CELL];
 
   if (danger) {
     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);
   let key;
 

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

@@ -0,0 +1,53 @@
+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';
+
+const toolbarListsIndentationPlugin = ({
+  showIndentationButtons
+}) => ({
+  name: 'toolbarListsIndentation',
+
+  primaryToolbarComponent({
+    editorView,
+    popupsMountPoint,
+    popupsBoundariesElement,
+    popupsScrollableElement,
+    toolbarSize,
+    disabled,
+    isToolbarReducedSpacing
+  }) {
+    const isSmall = toolbarSize < ToolbarSize.L;
+    return /*#__PURE__*/React.createElement(WithPluginState, {
+      plugins: {
+        listState: listPluginKey
+      },
+      render: ({
+        listState: 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/es2019/plugins/toolbar-lists-indentation/types.js

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

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

@@ -0,0 +1,94 @@
+/** @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) {
+  const {
+    formatMessage
+  } = useIntl();
+  const {
+    disabled,
+    isReducedSpacing,
+    bulletListActive,
+    bulletListDisabled,
+    orderedListActive,
+    orderedListDisabled,
+    showIndentationButtons,
+    onItemActivated
+  } = props;
+  const labelUnorderedList = formatMessage(messages.unorderedList);
+  const labelOrderedList = formatMessage(messages.orderedList);
+
+  const handleOnItemActivated = buttonName => event => onItemActivated({
+    editorView: props.editorView,
+    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/es2019/plugins/toolbar-lists-indentation/ui/ToolbarDropdown.js

@@ -0,0 +1,149 @@
+/** @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) {
+  const {
+    formatMessage
+  } = useIntl();
+  const {
+    disabled,
+    isReducedSpacing,
+    bulletListActive,
+    orderedListActive,
+    popupsMountPoint,
+    popupsBoundariesElement,
+    popupsScrollableElement,
+    onItemActivated
+  } = props;
+  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
+  const labelLists = formatMessage(listMessages.lists);
+
+  const onOpenChange = attrs => {
+    setIsDropdownOpen(attrs.isDropdownOpen);
+  };
+
+  const handleTriggerClick = () => {
+    onOpenChange({
+      isDropdownOpen: !isDropdownOpen
+    });
+  };
+
+  const items = useItems(props);
+
+  const handleOnItemActivated = ({
+    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) {
+  const {
+    formatMessage
+  } = useIntl();
+  const labelUnorderedList = formatMessage(listMessages.unorderedList);
+  const labelOrderedList = formatMessage(listMessages.orderedList);
+  let 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) {
+    const labelIndent = formatMessage(indentationMessages.indent);
+    const 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
+  }];
+}