@atlaskit/editor-core 181.0.1 → 182.0.0

package/dist/es2019/plugins/list/pm-plugins/input-rules/wrapping-join-rule.js

@@ -0,0 +1,52 @@
+import { canJoin, findWrapping } from 'prosemirror-transform';
+import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils';
+import { JOIN_SCENARIOS_WHEN_TYPING_TO_INSERT_LIST } from '@atlaskit/editor-common/analytics';
+import { createRule } from '../../../../utils/input-rules';
+export const createWrappingJoinRule = ({
+  match,
+  nodeType,
+  getAttrs,
+  joinPredicate,
+  featureFlags
+}) => {
+  const handler = (state, match, start, end) => {
+    const attrs = (getAttrs instanceof Function ? getAttrs(match) : getAttrs) || {};
+    const tr = state.tr;
+    const fixedStart = Math.max(start, 1);
+    tr.delete(fixedStart, end);
+    const $start = tr.doc.resolve(fixedStart);
+    const range = $start.blockRange();
+    const wrapping = range && findWrapping(range, nodeType, attrs);
+    if (!wrapping || !range) {
+      return null;
+    }
+    const parentNodePosMapped = tr.mapping.map(range.start);
+    const parentNode = tr.doc.nodeAt(parentNodePosMapped);
+    const lastWrap = wrapping[wrapping.length - 1];
+    if (parentNode && lastWrap) {
+      const allowedMarks = lastWrap.type.allowedMarks(parentNode.marks) || [];
+      tr.setNodeMarkup(parentNodePosMapped, parentNode.type, parentNode.attrs, allowedMarks);
+    }
+    tr.wrap(range, wrapping);
+    if (featureFlags !== null && featureFlags !== void 0 && featureFlags.restartNumberedLists && nodeType === state.schema.nodes.orderedList) {
+      // if an orderedList node would be inserted by the input rule match, and
+      // that orderedList node is being added directly before another orderedList
+      // node, then join those nodes
+      const $end = tr.doc.resolve(tr.mapping.map(end));
+      const node = findParentNodeOfTypeClosestToPos($end, nodeType);
+      if (node) {
+        const nodeEnd = node.pos + node.node.nodeSize;
+        const after = tr.doc.resolve(nodeEnd).nodeAfter;
+        if (after && after.type === nodeType && canJoin(tr.doc, nodeEnd) && (!joinPredicate || joinPredicate(match, after, JOIN_SCENARIOS_WHEN_TYPING_TO_INSERT_LIST.JOINED_TO_LIST_BELOW))) {
+          tr.join(nodeEnd);
+        }
+      }
+    }
+    const before = tr.doc.resolve(fixedStart - 1).nodeBefore;
+    if (before && before.type === nodeType && canJoin(tr.doc, fixedStart - 1) && (!joinPredicate || joinPredicate(match, before, JOIN_SCENARIOS_WHEN_TYPING_TO_INSERT_LIST.JOINED_TO_LIST_ABOVE))) {
+      tr.join(fixedStart - 1);
+    }
+    return tr;
+  };
+  return createRule(match, handler);
+};

package/dist/es2019/plugins/list/pm-plugins/keymap.js

@@ -3,14 +3,14 @@ import * as keymaps from '../../../keymaps';
 import { indentList, enterKeyCommand, toggleList, backspaceKeyCommand, deleteKeyCommand } from '../commands';
 import { outdentList } from '../commands/outdent-list';
 import { INPUT_METHOD } from '../../analytics';
-export function keymapPlugin() {
+export function keymapPlugin(featureFlags) {
   const list = {};
   keymaps.bindKeymapWithCommand(keymaps.findShortcutByKeymap(keymaps.toggleOrderedList), toggleList(INPUT_METHOD.KEYBOARD, 'orderedList'), list);
   keymaps.bindKeymapWithCommand(keymaps.findShortcutByKeymap(keymaps.toggleBulletList), toggleList(INPUT_METHOD.KEYBOARD, 'bulletList'), list);
   keymaps.bindKeymapWithCommand(keymaps.indentList.common, indentList(INPUT_METHOD.KEYBOARD), list);
-  keymaps.bindKeymapWithCommand(keymaps.outdentList.common, outdentList(INPUT_METHOD.KEYBOARD), list);
-  keymaps.bindKeymapWithCommand(keymaps.enter.common, enterKeyCommand, list);
-  keymaps.bindKeymapWithCommand(keymaps.backspace.common, backspaceKeyCommand, list);
+  keymaps.bindKeymapWithCommand(keymaps.outdentList.common, outdentList(INPUT_METHOD.KEYBOARD, featureFlags), list);
+  keymaps.bindKeymapWithCommand(keymaps.enter.common, enterKeyCommand(featureFlags), list);
+  keymaps.bindKeymapWithCommand(keymaps.backspace.common, backspaceKeyCommand(featureFlags), list);
   keymaps.bindKeymapWithCommand(keymaps.deleteKey.common, deleteKeyCommand, list);
 
   // This shortcut is Mac only

package/dist/es2019/plugins/list/pm-plugins/main.js

@@ -9,7 +9,6 @@ import { setGapCursorSelection } from '../../../utils';
 import { Side } from '../../selection/gap-cursor-selection';
 import { listItemCounterPadding, CodeBlockSharedCssClassName, getOrderedListInlineStyles } from '@atlaskit/editor-common/styles';
 import { getItemCounterDigitsSize } from '@atlaskit/editor-common/utils';
-import { getFeatureFlags } from '../../feature-flags-context';
 const listPluginKey = new PluginKey('listPlugin');
 export const pluginKey = listPluginKey;
 const initialState = {
@@ -19,9 +18,8 @@ const initialState = {
   orderedListDisabled: false,
   decorationSet: DecorationSet.empty
 };
-export const getDecorations = (doc, state) => {
+export const getDecorations = (doc, state, featureFlags) => {
   const decorations = [];
-  const featureFlags = getFeatureFlags(state);
 
   // this stack keeps track of each (nested) list to calculate the indentation level
   const processedListsStack = [];
@@ -74,9 +72,9 @@ export const getDecorations = (doc, state) => {
   });
   return DecorationSet.empty.add(doc, decorations);
 };
-const handleDocChanged = (tr, pluginState, editorState) => {
+const handleDocChanged = featureFlags => (tr, pluginState, editorState) => {
   const nextPluginState = handleSelectionChanged(tr, pluginState);
-  const decorationSet = getDecorations(tr.doc, editorState);
+  const decorationSet = getDecorations(tr.doc, editorState, featureFlags);
   return {
     ...nextPluginState,
     decorationSet
@@ -107,53 +105,55 @@ const handleSelectionChanged = (tr, pluginState) => {
 const reducer = () => state => {
   return state;
 };
-const {
-  getPluginState,
-  createPluginState
-} = pluginFactory(listPluginKey, reducer(), {
-  onDocChanged: handleDocChanged,
-  onSelectionChanged: handleSelectionChanged
-});
-const createInitialState = state => {
+const createInitialState = featureFlags => state => {
   return {
     ...initialState,
-    decorationSet: getDecorations(state.doc, state)
+    decorationSet: getDecorations(state.doc, state, featureFlags)
   };
 };
-export const createPlugin = eventDispatch => new SafePlugin({
-  state: createPluginState(eventDispatch, createInitialState),
-  key: listPluginKey,
-  props: {
-    decorations(state) {
-      const {
-        decorationSet
-      } = getPluginState(state);
-      return decorationSet;
-    },
-    handleClick: (view, pos, event) => {
-      const {
-        state
-      } = view;
-      if (['LI', 'UL'].includes((event === null || event === void 0 ? void 0 : event.target).tagName)) {
-        var _nodeAtPos$firstChild;
-        const nodeAtPos = state.tr.doc.nodeAt(pos);
+export const createPlugin = (eventDispatch, featureFlags) => {
+  const {
+    getPluginState,
+    createPluginState
+  } = pluginFactory(listPluginKey, reducer(), {
+    onDocChanged: handleDocChanged(featureFlags),
+    onSelectionChanged: handleSelectionChanged
+  });
+  return new SafePlugin({
+    state: createPluginState(eventDispatch, createInitialState(featureFlags)),
+    key: listPluginKey,
+    props: {
+      decorations(state) {
+        const {
+          decorationSet
+        } = getPluginState(state);
+        return decorationSet;
+      },
+      handleClick: (view, pos, event) => {
         const {
-          listItem,
-          codeBlock
-        } = view.state.schema.nodes;
-        if ((nodeAtPos === null || nodeAtPos === void 0 ? void 0 : nodeAtPos.type) === listItem && (nodeAtPos === null || nodeAtPos === void 0 ? void 0 : (_nodeAtPos$firstChild = nodeAtPos.firstChild) === null || _nodeAtPos$firstChild === void 0 ? void 0 : _nodeAtPos$firstChild.type) === codeBlock) {
-          var _document, _document$elementFrom;
-          const bufferPx = 50;
-          const isCodeBlockNextToListMarker = Boolean((_document = document) === null || _document === void 0 ? void 0 : (_document$elementFrom = _document.elementFromPoint(event.clientX + (listItemCounterPadding + bufferPx), event.clientY)) === null || _document$elementFrom === void 0 ? void 0 : _document$elementFrom.closest(`.${CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER}`));
-          if (isCodeBlockNextToListMarker) {
-            // +1 needed to put cursor inside li
-            // otherwise gap cursor markup will be injected as immediate child of ul resulting in invalid html
-            setGapCursorSelection(view, pos + 1, Side.LEFT);
-            return true;
+          state
+        } = view;
+        if (['LI', 'UL'].includes((event === null || event === void 0 ? void 0 : event.target).tagName)) {
+          var _nodeAtPos$firstChild;
+          const nodeAtPos = state.tr.doc.nodeAt(pos);
+          const {
+            listItem,
+            codeBlock
+          } = view.state.schema.nodes;
+          if ((nodeAtPos === null || nodeAtPos === void 0 ? void 0 : nodeAtPos.type) === listItem && (nodeAtPos === null || nodeAtPos === void 0 ? void 0 : (_nodeAtPos$firstChild = nodeAtPos.firstChild) === null || _nodeAtPos$firstChild === void 0 ? void 0 : _nodeAtPos$firstChild.type) === codeBlock) {
+            var _document, _document$elementFrom;
+            const bufferPx = 50;
+            const isCodeBlockNextToListMarker = Boolean((_document = document) === null || _document === void 0 ? void 0 : (_document$elementFrom = _document.elementFromPoint(event.clientX + (listItemCounterPadding + bufferPx), event.clientY)) === null || _document$elementFrom === void 0 ? void 0 : _document$elementFrom.closest(`.${CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER}`));
+            if (isCodeBlockNextToListMarker) {
+              // +1 needed to put cursor inside li
+              // otherwise gap cursor markup will be injected as immediate child of ul resulting in invalid html
+              setGapCursorSelection(view, pos + 1, Side.LEFT);
+              return true;
+            }
           }
         }
+        return false;
       }
-      return false;
     }
-  }
-});
+  });
+};

package/dist/es2019/plugins/media/nodeviews/mediaNodeView/media.js

@@ -103,6 +103,7 @@ export class MediaNode extends Component {
       maxDimensions,
       mediaOptions
     } = this.props;
+    const borderMark = node.marks.find(m => m.type.name === 'border');
     const {
       viewMediaClientConfig,
       contextIdentifierProvider
@@ -138,7 +139,9 @@ export class MediaNode extends Component {
     };
     return /*#__PURE__*/React.createElement(MediaCardWrapper, {
       dimensions: originalDimensions,
-      onContextMenu: this.selectMediaSingle
+      onContextMenu: this.selectMediaSingle,
+      borderWidth: borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size,
+      selected: selected
     }, /*#__PURE__*/React.createElement(Card, {
       mediaClientConfig: mediaClientConfig,
       resizeMode: "stretchy-fit",

package/dist/es2019/plugins/media/nodeviews/styles.js

@@ -18,9 +18,20 @@ const forcedDimensions = css`
 export const MediaCardWrapper = ({
   dimensions,
   children,
+  selected,
+  borderWidth = 0,
   onContextMenu
 }) => {
+  const calculatedBorderWidth = selected && borderWidth > 0 ? borderWidth + 1 : borderWidth;
   return jsx("div", {
+    "data-testid": "media-card-wrapper",
+    style: {
+      borderColor: `var(--custom-palette-color)`,
+      borderWidth: `${calculatedBorderWidth}px`,
+      borderStyle: 'solid',
+      borderRadius: `${calculatedBorderWidth * 2}px`
+    }
+  }, jsx("div", {
     css: forcedDimensions,
     style: {
       paddingBottom: `${dimensions.height / dimensions.width * 100}%`
@@ -28,5 +39,5 @@ export const MediaCardWrapper = ({
     onContextMenuCapture: onContextMenu
   }, jsx("div", {
     css: absoluteDiv
-  }, children));
+  }, children)));
 };

package/dist/es2019/plugins/media/toolbar/commands.js

@@ -3,6 +3,9 @@ import { NodeSelection } from 'prosemirror-state';
 import { isNodeSelection, removeSelectedNode, safeInsert } from 'prosemirror-utils';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, addAnalytics, EVENT_TYPE } from '../../analytics';
 import { removeMediaGroupNode } from './utils';
+import { currentMediaNodeWithPos } from '../utils/current-media-node';
+export const DEFAULT_BORDER_COLOR = '#091e4224';
+export const DEFAULT_BORDER_SIZE = 2;
 export const changeInlineToMediaCard = (state, dispatch) => {
   const {
     media,
@@ -84,4 +87,94 @@ export const removeInlineCard = (state, dispatch) => {
     return true;
   }
   return false;
+};
+export const toggleBorderMark = (state, dispatch) => {
+  const nodeWithPos = currentMediaNodeWithPos(state);
+  if (!nodeWithPos) {
+    return false;
+  }
+  const {
+    node,
+    pos
+  } = nodeWithPos;
+  const borderMark = node.marks.find(m => m.type.name === 'border');
+  const marks = node.marks.filter(m => m.type.name !== 'border').concat(borderMark ? [] : state.schema.marks.border.create({
+    color: DEFAULT_BORDER_COLOR,
+    size: DEFAULT_BORDER_SIZE
+  }));
+  const tr = state.tr.setNodeMarkup(pos, node.type, node.attrs, marks);
+  tr.setMeta('scrollIntoView', false);
+  if (state.selection instanceof NodeSelection) {
+    if (state.selection.$anchor.pos === state.selection.from) {
+      tr.setSelection(NodeSelection.create(tr.doc, state.selection.from));
+    }
+  }
+  if (dispatch) {
+    if (borderMark !== null && borderMark !== void 0 && borderMark.attrs) {
+      addAnalytics(state, tr, {
+        action: ACTION.DELETED,
+        actionSubject: ACTION_SUBJECT.MEDIA,
+        actionSubjectId: ACTION_SUBJECT_ID.BORDER,
+        eventType: EVENT_TYPE.TRACK,
+        attributes: {
+          previousColor: borderMark.attrs.color,
+          previousSize: borderMark.attrs.size
+        }
+      });
+    } else {
+      addAnalytics(state, tr, {
+        action: ACTION.ADDED,
+        actionSubject: ACTION_SUBJECT.MEDIA,
+        actionSubjectId: ACTION_SUBJECT_ID.BORDER,
+        eventType: EVENT_TYPE.TRACK,
+        attributes: {
+          color: DEFAULT_BORDER_COLOR,
+          size: DEFAULT_BORDER_SIZE
+        }
+      });
+    }
+    dispatch(tr);
+  }
+  return true;
+};
+export const setBorderMark = attrs => (state, dispatch) => {
+  var _node$marks$find, _ref, _attrs$color, _ref2, _attrs$size;
+  const nodeWithPos = currentMediaNodeWithPos(state);
+  if (!nodeWithPos) {
+    return false;
+  }
+  const {
+    node,
+    pos
+  } = nodeWithPos;
+  const borderMark = (_node$marks$find = node.marks.find(m => m.type.name === 'border')) === null || _node$marks$find === void 0 ? void 0 : _node$marks$find.attrs;
+  const color = (_ref = (_attrs$color = attrs.color) !== null && _attrs$color !== void 0 ? _attrs$color : borderMark === null || borderMark === void 0 ? void 0 : borderMark.color) !== null && _ref !== void 0 ? _ref : DEFAULT_BORDER_COLOR;
+  const size = (_ref2 = (_attrs$size = attrs.size) !== null && _attrs$size !== void 0 ? _attrs$size : borderMark === null || borderMark === void 0 ? void 0 : borderMark.size) !== null && _ref2 !== void 0 ? _ref2 : DEFAULT_BORDER_SIZE;
+  const marks = node.marks.filter(m => m.type.name !== 'border').concat(state.schema.marks.border.create({
+    color,
+    size
+  }));
+  const tr = state.tr.setNodeMarkup(pos, node.type, node.attrs, marks);
+  tr.setMeta('scrollIntoView', false);
+  if (state.selection instanceof NodeSelection) {
+    if (state.selection.$anchor.pos === state.selection.from) {
+      tr.setSelection(NodeSelection.create(tr.doc, state.selection.from));
+    }
+  }
+  if (dispatch) {
+    addAnalytics(state, tr, {
+      action: ACTION.UPDATED,
+      actionSubject: ACTION_SUBJECT.MEDIA,
+      actionSubjectId: ACTION_SUBJECT_ID.BORDER,
+      eventType: EVENT_TYPE.TRACK,
+      attributes: {
+        previousColor: borderMark === null || borderMark === void 0 ? void 0 : borderMark.color,
+        previousSize: borderMark === null || borderMark === void 0 ? void 0 : borderMark.size,
+        newColor: color,
+        newSize: size
+      }
+    });
+    dispatch(tr);
+  }
+  return true;
 };

package/dist/es2019/plugins/media/toolbar/imageBorder.js

@@ -0,0 +1,15 @@
+import { currentMediaNodeWithPos } from '../utils/current-media-node';
+export function shouldShowImageBorder(editorState) {
+  const border = editorState.schema.marks.border;
+  if (!border) {
+    return false;
+  }
+  const nodeWithPos = currentMediaNodeWithPos(editorState);
+  if (!nodeWithPos) {
+    return false;
+  }
+  let {
+    parent
+  } = editorState.doc.resolve(nodeWithPos.pos);
+  return parent && parent.type.allowsMarkType(border);
+}

package/dist/es2019/plugins/media/toolbar/index.js

@@ -19,8 +19,11 @@ import { messages } from '@atlaskit/media-ui';
 import { messages as cardMessages } from '../../card/messages';
 import { FilePreviewItem } from './filePreviewItem';
 import { downloadMedia, removeMediaGroupNode } from './utils';
-import { changeInlineToMediaCard, changeMediaCardToInline, removeInlineCard } from './commands';
+import { changeInlineToMediaCard, changeMediaCardToInline, removeInlineCard, setBorderMark, toggleBorderMark } from './commands';
 import { MediaInlineNodeSelector, MediaSingleNodeSelector } from '../nodeviews/styles';
+import ImageBorderItem from '../ui/ImageBorder';
+import { currentMediaNodeBorderMark } from '../utils/current-media-node';
+import { shouldShowImageBorder } from './imageBorder';
 const remove = (state, dispatch) => {
   if (dispatch) {
     dispatch(removeSelectedNode(state.tr));
@@ -184,7 +187,7 @@ const generateMediaInlineFloatingToolbar = (state, intl, mediaPluginState) => {
   }];
   return items;
 };
-const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, mediaLinkingState) => {
+const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, mediaLinkingState, getEditorFeatureFlags) => {
   const {
     mediaSingle
   } = state.schema.nodes;
@@ -196,8 +199,35 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
     allowAltTextOnImages
   } = options;
   let toolbarButtons = [];
+  if (shouldShowImageBorder(state)) {
+    toolbarButtons.push({
+      type: 'custom',
+      fallback: [],
+      render: editorView => {
+        if (!editorView) {
+          return null;
+        }
+        const {
+          dispatch,
+          state
+        } = editorView;
+        const borderMark = currentMediaNodeBorderMark(state);
+        return /*#__PURE__*/React.createElement(ImageBorderItem, {
+          toggleBorder: () => {
+            toggleBorderMark(state, dispatch);
+          },
+          setBorder: attrs => {
+            setBorderMark(attrs)(state, dispatch);
+          },
+          showSomewhatSemanticTooltips: getEditorFeatureFlags === null || getEditorFeatureFlags === void 0 ? void 0 : getEditorFeatureFlags().useSomewhatSemanticTextColorNames,
+          borderMark: borderMark,
+          intl: intl
+        });
+      }
+    });
+  }
   if (allowAdvancedToolBarOptions) {
-    toolbarButtons = buildLayoutButtons(state, intl, state.schema.nodes.mediaSingle, allowResizing, allowResizingInTables);
+    toolbarButtons = [...toolbarButtons, ...buildLayoutButtons(state, intl, state.schema.nodes.mediaSingle, allowResizing, allowResizingInTables)];
     if (toolbarButtons.length) {
       toolbarButtons.push({
         type: 'separator'
@@ -291,7 +321,8 @@ export const floatingToolbar = (state, intl, options = {}) => {
     allowLinking,
     allowAltTextOnImages,
     providerFactory,
-    allowMediaInline
+    allowMediaInline,
+    getEditorFeatureFlags
   } = options;
   const mediaPluginState = stateKey.getState(state);
   const mediaLinkingState = getMediaLinkingState(state);
@@ -345,7 +376,7 @@ export const floatingToolbar = (state, intl, options = {}) => {
       const element = (_mediaPluginState$ele3 = mediaPluginState.element) === null || _mediaPluginState$ele3 === void 0 ? void 0 : _mediaPluginState$ele3.querySelector(`.${MediaSingleNodeSelector}`);
       return element || mediaPluginState.element;
     };
-    items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState);
+    items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState, getEditorFeatureFlags);
   }
   return {
     ...baseToolbar,

package/dist/es2019/plugins/media/ui/ImageBorder/index.js

@@ -0,0 +1,206 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
+import { DropdownMenuSharedCssClassName } from '@atlaskit/editor-common/styles';
+import ImageBorderIcon from '@atlaskit/icon/glyph/image-border';
+import { useRef, useState } from 'react';
+import { ColorPalette, borderPaletteTooltipMessages } from '@atlaskit/editor-common/ui-color';
+import { hexToEditorBorderPaletteColor } from '@atlaskit/editor-palette';
+import { borderColorPalette } from '@atlaskit/editor-common/ui-color';
+import { ArrowKeyNavigationType, DropdownMenu } from '@atlaskit/editor-common/ui-menu';
+import Tooltip from '@atlaskit/tooltip';
+import { Popup } from '@atlaskit/editor-common/ui';
+import ToolbarButton from '../../../../ui/ToolbarButton';
+import { buttonStyle, buttonWrapperStyle, contextualMenuArrow, contextualMenuColorIcon, contextualSubMenu, itemSpacing, line, menuItemDimensions, toolbarButtonWrapper } from './styles';
+import { messages } from './messages';
+const ImageBorder = ({
+  intl: {
+    formatMessage
+  },
+  toggleBorder,
+  showSomewhatSemanticTooltips,
+  borderMark,
+  setBorder
+}) => {
+  const popupTarget = useRef(null);
+  const enabled = !!borderMark;
+  const color = borderMark === null || borderMark === void 0 ? void 0 : borderMark.color;
+  const size = borderMark === null || borderMark === void 0 ? void 0 : borderMark.size;
+  const [isOpen, setIsOpen] = useState(false);
+  const [isColorSubmenuOpen, setIsColorSubmenuOpen] = useState(false);
+  const [isSizeSubmenuOpen, setIsSizeSubmenuOpen] = useState(false);
+  const borderSizeOptions = [{
+    name: formatMessage(messages.borderSizeSubtle),
+    value: 1
+  }, {
+    name: formatMessage(messages.borderSizeMedium),
+    value: 2
+  }, {
+    name: formatMessage(messages.borderSizeBold),
+    value: 3
+  }];
+  const items = [{
+    content: formatMessage(messages.borderColor),
+    value: {
+      name: 'color'
+    },
+    elemAfter: jsx("div", {
+      className: DropdownMenuSharedCssClassName.SUBMENU
+    }, jsx("div", {
+      css: contextualMenuColorIcon(color && hexToEditorBorderPaletteColor(color))
+    }), isColorSubmenuOpen && jsx("div", {
+      css: contextualSubMenu(0)
+    }, jsx(ColorPalette, {
+      onClick: color => {
+        setBorder({
+          color
+        });
+        setIsOpen(!isOpen);
+      },
+      selectedColor: color !== null && color !== void 0 ? color : null,
+      paletteOptions: {
+        palette: borderColorPalette,
+        paletteColorTooltipMessages: borderPaletteTooltipMessages,
+        hexToPaletteColor: hexToEditorBorderPaletteColor,
+        showSomewhatSemanticTooltips
+      }
+    })))
+  }, {
+    content: formatMessage(messages.borderSize),
+    value: {
+      name: 'size'
+    },
+    elemAfter: jsx("div", {
+      className: DropdownMenuSharedCssClassName.SUBMENU
+    }, jsx("div", {
+      css: contextualMenuArrow
+    }), isSizeSubmenuOpen && jsx("div", {
+      css: contextualSubMenu(1)
+    }, borderSizeOptions.map(({
+      name,
+      value
+    }, idx) => jsx(Tooltip, {
+      key: idx,
+      content: name
+    }, jsx("span", {
+      css: buttonWrapperStyle
+    }, jsx("button", {
+      css: buttonStyle(value === size),
+      "aria-label": name,
+      role: "radio",
+      "aria-checked": value === size,
+      onClick: () => {
+        setBorder({
+          size: value
+        });
+        setIsOpen(false);
+      },
+      onMouseDown: e => {
+        e.preventDefault();
+      }
+    }, jsx("div", {
+      css: line(value, value === size),
+      role: "presentation"
+    })))))))
+  }];
+
+  /**
+   * We want to change direction of our dropdowns a bit early,
+   * not exactly when it hits the boundary.
+   */
+  const fitTolerance = 10;
+  const fitWidth = menuItemDimensions.width;
+  const fitHeight = items.length * (menuItemDimensions.height + itemSpacing);
+  return jsx("div", null, jsx("div", {
+    css: toolbarButtonWrapper({
+      enabled,
+      isOpen
+    })
+  }, jsx(ToolbarButton, {
+    className: "image-border-toolbar-btn",
+    selected: enabled,
+    onClick: toggleBorder,
+    spacing: "compact",
+    "aria-label": enabled ? formatMessage(messages.removeBorder) : formatMessage(messages.addBorder),
+    iconBefore: jsx(ImageBorderIcon, {
+      label: ""
+    }),
+    title: enabled ? formatMessage(messages.removeBorder) : formatMessage(messages.addBorder)
+  }), jsx("div", {
+    ref: popupTarget
+  }, jsx(ToolbarButton, {
+    className: "image-border-toolbar-dropdown",
+    selected: isOpen,
+    "aria-label": formatMessage(messages.borderOptions),
+    title: formatMessage(messages.borderOptions),
+    spacing: "compact",
+    iconBefore: jsx(ExpandIcon, {
+      label: ""
+    }),
+    onClick: () => {
+      setIsOpen(!isOpen);
+    }
+  }))), jsx(Popup, {
+    target: popupTarget.current ? popupTarget.current : undefined,
+    fitWidth: fitWidth + fitTolerance,
+    fitHeight: fitHeight + fitTolerance,
+    forcePlacement: true,
+    stick: true
+  }, jsx("div", {
+    onMouseLeave: () => {
+      setIsColorSubmenuOpen(false);
+      setIsSizeSubmenuOpen(false);
+    }
+  }, jsx(DropdownMenu
+  //This needs be removed when the a11y is completely handled
+  //Disabling key navigation now as it works only partially
+  //Same with packages/editor/editor-plugin-table/src/plugins/table/ui/FloatingContextualMenu/ContextualMenu.tsx
+  , {
+    arrowKeyNavigationProviderOptions: {
+      type: ArrowKeyNavigationType.MENU,
+      disableArrowKeyNavigation: true
+    },
+    items: [{
+      items
+    }],
+    isOpen: isOpen,
+    onOpenChange: () => {
+      setIsOpen(false);
+      setIsColorSubmenuOpen(false);
+      setIsSizeSubmenuOpen(false);
+    },
+    onItemActivated: ({
+      item
+    }) => {
+      if (item.value.name === 'color') {
+        setIsColorSubmenuOpen(!isColorSubmenuOpen);
+      }
+      if (item.value.name === 'size') {
+        setIsSizeSubmenuOpen(!isSizeSubmenuOpen);
+      }
+    },
+    onMouseEnter: ({
+      item
+    }) => {
+      if (item.value.name === 'color') {
+        setIsColorSubmenuOpen(true);
+      }
+      if (item.value.name === 'size') {
+        setIsSizeSubmenuOpen(true);
+      }
+    },
+    onMouseLeave: ({
+      item
+    }) => {
+      if (item.value.name === 'color') {
+        setIsColorSubmenuOpen(false);
+      }
+      if (item.value.name === 'size') {
+        setIsSizeSubmenuOpen(false);
+      }
+    },
+    fitWidth: fitWidth + fitTolerance,
+    fitHeight: fitHeight + fitTolerance
+  }))));
+};
+export default ImageBorder;