@atlaskit/editor-core 181.0.1 → 182.0.0

package/dist/esm/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 var DEFAULT_BORDER_COLOR = '#091e4224';
+export var DEFAULT_BORDER_SIZE = 2;
 export var changeInlineToMediaCard = function changeInlineToMediaCard(state, dispatch) {
   var _state$schema$nodes = state.schema.nodes,
     media = _state$schema$nodes.media,
@@ -81,4 +84,100 @@ export var removeInlineCard = function removeInlineCard(state, dispatch) {
     return true;
   }
   return false;
+};
+export var toggleBorderMark = function toggleBorderMark(state, dispatch) {
+  var nodeWithPos = currentMediaNodeWithPos(state);
+  if (!nodeWithPos) {
+    return false;
+  }
+  var node = nodeWithPos.node,
+    pos = nodeWithPos.pos;
+  var borderMark = node.marks.find(function (m) {
+    return m.type.name === 'border';
+  });
+  var marks = node.marks.filter(function (m) {
+    return m.type.name !== 'border';
+  }).concat(borderMark ? [] : state.schema.marks.border.create({
+    color: DEFAULT_BORDER_COLOR,
+    size: DEFAULT_BORDER_SIZE
+  }));
+  var 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 var setBorderMark = function setBorderMark(attrs) {
+  return function (state, dispatch) {
+    var _node$marks$find, _ref, _attrs$color, _ref2, _attrs$size;
+    var nodeWithPos = currentMediaNodeWithPos(state);
+    if (!nodeWithPos) {
+      return false;
+    }
+    var node = nodeWithPos.node,
+      pos = nodeWithPos.pos;
+    var borderMark = (_node$marks$find = node.marks.find(function (m) {
+      return m.type.name === 'border';
+    })) === null || _node$marks$find === void 0 ? void 0 : _node$marks$find.attrs;
+    var 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;
+    var 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;
+    var marks = node.marks.filter(function (m) {
+      return m.type.name !== 'border';
+    }).concat(state.schema.marks.border.create({
+      color: color,
+      size: size
+    }));
+    var 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/esm/plugins/media/toolbar/imageBorder.js

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

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

@@ -23,8 +23,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';
 var remove = function remove(state, dispatch) {
   if (dispatch) {
     dispatch(removeSelectedNode(state.tr));
@@ -184,7 +187,7 @@ var generateMediaInlineFloatingToolbar = function generateMediaInlineFloatingToo
   }];
   return items;
 };
-var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToolbar(state, intl, options, pluginState, mediaLinkingState) {
+var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToolbar(state, intl, options, pluginState, mediaLinkingState, getEditorFeatureFlags) {
   var mediaSingle = state.schema.nodes.mediaSingle;
   var allowResizing = options.allowResizing,
     allowLinking = options.allowLinking,
@@ -192,8 +195,33 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     allowResizingInTables = options.allowResizingInTables,
     allowAltTextOnImages = options.allowAltTextOnImages;
   var toolbarButtons = [];
+  if (shouldShowImageBorder(state)) {
+    toolbarButtons.push({
+      type: 'custom',
+      fallback: [],
+      render: function render(editorView) {
+        if (!editorView) {
+          return null;
+        }
+        var dispatch = editorView.dispatch,
+          state = editorView.state;
+        var borderMark = currentMediaNodeBorderMark(state);
+        return /*#__PURE__*/React.createElement(ImageBorderItem, {
+          toggleBorder: function toggleBorder() {
+            toggleBorderMark(state, dispatch);
+          },
+          setBorder: function 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 = [].concat(_toConsumableArray(toolbarButtons), _toConsumableArray(buildLayoutButtons(state, intl, state.schema.nodes.mediaSingle, allowResizing, allowResizingInTables)));
     if (toolbarButtons.length) {
       toolbarButtons.push({
         type: 'separator'
@@ -282,7 +310,8 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
     allowLinking = options.allowLinking,
     allowAltTextOnImages = options.allowAltTextOnImages,
     providerFactory = options.providerFactory,
-    allowMediaInline = options.allowMediaInline;
+    allowMediaInline = options.allowMediaInline,
+    getEditorFeatureFlags = options.getEditorFeatureFlags;
   var mediaPluginState = stateKey.getState(state);
   var mediaLinkingState = getMediaLinkingState(state);
   if (!mediaPluginState) {
@@ -337,7 +366,7 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
       var element = (_mediaPluginState$ele3 = mediaPluginState.element) === null || _mediaPluginState$ele3 === void 0 ? void 0 : _mediaPluginState$ele3.querySelector(".".concat(MediaSingleNodeSelector));
       return element || mediaPluginState.element;
     };
-    items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState);
+    items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState, getEditorFeatureFlags);
   }
   return _objectSpread(_objectSpread({}, baseToolbar), {}, {
     items: items,

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

@@ -0,0 +1,211 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/** @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';
+var ImageBorder = function ImageBorder(_ref) {
+  var formatMessage = _ref.intl.formatMessage,
+    toggleBorder = _ref.toggleBorder,
+    showSomewhatSemanticTooltips = _ref.showSomewhatSemanticTooltips,
+    borderMark = _ref.borderMark,
+    setBorder = _ref.setBorder;
+  var popupTarget = useRef(null);
+  var enabled = !!borderMark;
+  var color = borderMark === null || borderMark === void 0 ? void 0 : borderMark.color;
+  var size = borderMark === null || borderMark === void 0 ? void 0 : borderMark.size;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isColorSubmenuOpen = _useState4[0],
+    setIsColorSubmenuOpen = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isSizeSubmenuOpen = _useState6[0],
+    setIsSizeSubmenuOpen = _useState6[1];
+  var borderSizeOptions = [{
+    name: formatMessage(messages.borderSizeSubtle),
+    value: 1
+  }, {
+    name: formatMessage(messages.borderSizeMedium),
+    value: 2
+  }, {
+    name: formatMessage(messages.borderSizeBold),
+    value: 3
+  }];
+  var 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: function onClick(color) {
+        setBorder({
+          color: color
+        });
+        setIsOpen(!isOpen);
+      },
+      selectedColor: color !== null && color !== void 0 ? color : null,
+      paletteOptions: {
+        palette: borderColorPalette,
+        paletteColorTooltipMessages: borderPaletteTooltipMessages,
+        hexToPaletteColor: hexToEditorBorderPaletteColor,
+        showSomewhatSemanticTooltips: 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(function (_ref2, idx) {
+      var name = _ref2.name,
+        value = _ref2.value;
+      return 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: function onClick() {
+          setBorder({
+            size: value
+          });
+          setIsOpen(false);
+        },
+        onMouseDown: function 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.
+   */
+  var fitTolerance = 10;
+  var fitWidth = menuItemDimensions.width;
+  var fitHeight = items.length * (menuItemDimensions.height + itemSpacing);
+  return jsx("div", null, jsx("div", {
+    css: toolbarButtonWrapper({
+      enabled: enabled,
+      isOpen: 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: function onClick() {
+      setIsOpen(!isOpen);
+    }
+  }))), jsx(Popup, {
+    target: popupTarget.current ? popupTarget.current : undefined,
+    fitWidth: fitWidth + fitTolerance,
+    fitHeight: fitHeight + fitTolerance,
+    forcePlacement: true,
+    stick: true
+  }, jsx("div", {
+    onMouseLeave: function 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: items
+    }],
+    isOpen: isOpen,
+    onOpenChange: function onOpenChange() {
+      setIsOpen(false);
+      setIsColorSubmenuOpen(false);
+      setIsSizeSubmenuOpen(false);
+    },
+    onItemActivated: function onItemActivated(_ref3) {
+      var item = _ref3.item;
+      if (item.value.name === 'color') {
+        setIsColorSubmenuOpen(!isColorSubmenuOpen);
+      }
+      if (item.value.name === 'size') {
+        setIsSizeSubmenuOpen(!isSizeSubmenuOpen);
+      }
+    },
+    onMouseEnter: function onMouseEnter(_ref4) {
+      var item = _ref4.item;
+      if (item.value.name === 'color') {
+        setIsColorSubmenuOpen(true);
+      }
+      if (item.value.name === 'size') {
+        setIsSizeSubmenuOpen(true);
+      }
+    },
+    onMouseLeave: function onMouseLeave(_ref5) {
+      var item = _ref5.item;
+      if (item.value.name === 'color') {
+        setIsColorSubmenuOpen(false);
+      }
+      if (item.value.name === 'size') {
+        setIsSizeSubmenuOpen(false);
+      }
+    },
+    fitWidth: fitWidth + fitTolerance,
+    fitHeight: fitHeight + fitTolerance
+  }))));
+};
+export default ImageBorder;

package/dist/esm/plugins/media/ui/ImageBorder/messages.js

@@ -0,0 +1,43 @@
+import { defineMessages } from 'react-intl-next';
+export var messages = defineMessages({
+  borderColor: {
+    id: 'fabric.editor.imageBorderColor',
+    defaultMessage: 'Color',
+    description: 'Change the border color of an image.'
+  },
+  borderSize: {
+    id: 'fabric.editor.imageBorderSize',
+    defaultMessage: 'Size',
+    description: 'Change the border size of an image.'
+  },
+  addBorder: {
+    id: 'fabric.editor.addImageBorder',
+    defaultMessage: 'Add border',
+    description: 'Add a border to an image.'
+  },
+  removeBorder: {
+    id: 'fabric.editor.removeImageBorder',
+    defaultMessage: 'Remove border',
+    description: 'Remove the border of an image.'
+  },
+  borderOptions: {
+    id: 'fabric.editor.imageBorderOptions',
+    defaultMessage: 'Border options',
+    description: 'Display options available for customizing the border of an image.'
+  },
+  borderSizeSubtle: {
+    id: 'fabric.editor.imageBorderSubtle',
+    defaultMessage: 'Subtle',
+    description: 'Name of a border size.'
+  },
+  borderSizeMedium: {
+    id: 'fabric.editor.imageBorderMedium',
+    defaultMessage: 'Medium',
+    description: 'Name of a border size.'
+  },
+  borderSizeBold: {
+    id: 'fabric.editor.imageBorderBold',
+    defaultMessage: 'Bold',
+    description: 'Name of a border size.'
+  }
+});

package/dist/esm/plugins/media/ui/ImageBorder/styles.js

@@ -0,0 +1,37 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+import { css } from '@emotion/react';
+import * as colors from '@atlaskit/theme/colors';
+import { DEFAULT_BORDER_COLOR } from '@atlaskit/editor-common/ui-color';
+import { N20A, N50, N60A, N90, N800, N0 } from '@atlaskit/theme/colors';
+import { gridSize } from '@atlaskit/theme/constants';
+
+// menuItemDimensions and itemSpacing are copied from
+// packages/editor/editor-core/src/plugins/floating-toolbar/ui/DropdownMenu.tsx
+
+export var menuItemDimensions = {
+  width: 175,
+  height: 32
+};
+export var itemSpacing = gridSize() / 2;
+export var contextualMenuArrow = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  &::after {\n    content: '\u203A';\n    margin-left: 4px;\n    line-height: 20px;\n    color: ", ";\n  }\n"])), "var(--ds-icon, ".concat(N90, ")"));
+export var contextualMenuColorIcon = function contextualMenuColorIcon(color) {
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  &::before {\n    content: '';\n    display: block;\n    border: 1px solid ", ";\n    border-radius: ", ";\n    width: 20px;\n    height: 20px;\n    ", "\n  }\n"])), contextualMenuArrow, DEFAULT_BORDER_COLOR, "var(--ds-radius-100, 3px)", color && "background: ".concat(color));
+};
+export var contextualSubMenu = function contextualSubMenu(index) {
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  border-radius: ", ";\n  background: ", ";\n  box-shadow: ", ";\n  display: flex;\n  position: absolute;\n  top: ", "px;\n  left: ", "px;\n  padding: 8px;\n\n  > div {\n    padding: 0;\n  }\n"])), "var(--ds-radius-100, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"), index * (menuItemDimensions.height + itemSpacing * 2), menuItemDimensions.width);
+};
+export var buttonStyle = function buttonStyle(selected) {
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  height: 26px;\n  width: 26px;\n  padding: 0;\n  border-radius: 4px;\n  background-color: ", ";\n  border: 1px solid ", ";\n  cursor: pointer;\n  display: block;\n"])), selected ? "var(--ds-text, ".concat(N800, ")") : "var(--ds-background-neutral, ".concat(N20A, ")"), DEFAULT_BORDER_COLOR);
+};
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+export var buttonWrapperStyle = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  border: 1px solid transparent;\n  margin: 1px;\n  font-size: 0;\n  display: flex;\n  align-items: center;\n  padding: 1px;\n  border-radius: 6px;\n  &:focus-within,\n  &:focus,\n  &:hover {\n    border-color: ", " !important;\n  }\n"])), N50);
+export var line = function line(size, selected) {
+  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  position: relative;\n  &:before {\n    content: '';\n    display: block;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 12px;\n    height: ", "px;\n    background-color: ", ";\n    border-radius: 90px;\n    transform: translate(-50%, -50%) rotate(135deg);\n  }\n"])), size, selected ? "var(--ds-icon-inverse, ".concat(N0, ")") : "var(--ds-icon, #44546F)");
+};
+export var toolbarButtonWrapper = function toolbarButtonWrapper(_ref) {
+  var enabled = _ref.enabled,
+    isOpen = _ref.isOpen;
+  return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  .image-border-toolbar-btn {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    padding: 0;\n    & > span {\n      margin: 0;\n    }\n  }\n  .image-border-toolbar-dropdown {\n    padding: 0;\n    & > span {\n      margin: 0;\n    }\n    width: 16px !important;\n    border-top-left-radius: 0 !important;\n    border-bottom-left-radius: 0 !important;\n    margin-left: 1px;\n  }\n\n  &:hover {\n    .image-border-toolbar-btn {\n      ", "\n    }\n\n    .image-border-toolbar-dropdown {\n      ", "\n    }\n  }\n"])), !enabled && " background: ".concat("var(--ds-background-neutral-subtle-hovered, ".concat(colors.N30A, ")"), ";"), !isOpen && "background: ".concat("var(--ds-background-neutral-subtle-hovered, ".concat(colors.N30A, ")"), ";"));
+};

package/dist/esm/plugins/media/utils/current-media-node.js

@@ -1,14 +1,35 @@
 import { NodeSelection } from 'prosemirror-state';
-export var currentMediaNode = function currentMediaNode(editorState) {
+export var currentMediaNodeWithPos = function currentMediaNodeWithPos(editorState) {
   var doc = editorState.doc,
     selection = editorState.selection,
     schema = editorState.schema;
   if (!doc || !selection || !(selection instanceof NodeSelection) || selection.node.type !== schema.nodes.mediaSingle) {
     return;
   }
-  var node = doc.nodeAt(selection.$anchor.pos + 1);
+  var pos = selection.$anchor.pos + 1;
+  var node = doc.nodeAt(pos);
   if (!node || node.type !== schema.nodes.media) {
     return;
   }
-  return node;
+  return {
+    node: node,
+    pos: pos
+  };
+};
+export var currentMediaNode = function currentMediaNode(editorState) {
+  var _currentMediaNodeWith;
+  return (_currentMediaNodeWith = currentMediaNodeWithPos(editorState)) === null || _currentMediaNodeWith === void 0 ? void 0 : _currentMediaNodeWith.node;
+};
+export var currentMediaNodeBorderMark = function currentMediaNodeBorderMark(editorState) {
+  var node = currentMediaNode(editorState);
+  if (!node) {
+    return;
+  }
+  var borderMark = node.marks.find(function (m) {
+    return m.type.name === 'border';
+  });
+  if (!borderMark) {
+    return;
+  }
+  return borderMark.attrs;
 };

package/dist/esm/plugins/paste/util/index.js

@@ -5,6 +5,7 @@ import { ACTION_SUBJECT, addAnalytics, EVENT_TYPE, INPUT_METHOD, TABLE_ACTION }
 import { TextSelection, NodeSelection } from 'prosemirror-state';
 import { findParentNodeOfType } from 'prosemirror-utils';
 import { getSelectedTableInfo, isTableSelected } from '@atlaskit/editor-tables/utils';
+import { sortByOrderWithTypeName } from '../../../create-editor/sort-by-order';
 export function isPastedFromWord(html) {
   return !!html && html.indexOf('urn:schemas-microsoft-com:office:word') >= 0;
 }
@@ -92,6 +93,7 @@ export function applyTextMarksToSlice(schema, marks) {
         }) || []), _toConsumableArray(parent.type.allowedMarks(marks).filter(function (mark) {
           return mark.type !== linkMark;
         })));
+        node.marks.sort(sortByOrderWithTypeName('marks'));
         return false;
       }
       return true;

package/dist/esm/plugins/rank.js

@@ -21,7 +21,7 @@ export default {
   // Inline marks
   'link', 'em', 'strong', 'textColor', 'strike', 'subsup', 'underline', 'code', 'typeAheadQuery',
   // Block marks
-  'alignment', 'breakout', 'indentation', 'annotation', 'dataConsumer',
+  'alignment', 'breakout', 'indentation', 'annotation', 'dataConsumer', 'border',
   // Unsupported mark
   'unsupportedMark', 'unsupportedNodeAttribute']
 };

package/dist/esm/plugins/rule/pm-plugins/input-rule.js

@@ -2,6 +2,7 @@ import { Fragment, Slice } from 'prosemirror-model';
 import { createRule, createPlugin } from '../../../utils/input-rules';
 import { leafNodeReplacementCharacter } from '@atlaskit/prosemirror-input-rules';
 import { safeInsert } from '../../../utils/insert';
+import { hasParentNodeOfType } from 'prosemirror-utils';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, addAnalytics, EVENT_TYPE, INPUT_METHOD } from '../../analytics';
 import { getFeatureFlags } from '../../feature-flags-context';
 export var createHorizontalRule = function createHorizontalRule(state, start, end, inputMethod) {
@@ -35,6 +36,10 @@ export var createHorizontalRule = function createHorizontalRule(state, start, en
   });
 };
 var createHorizontalRuleAutoformat = function createHorizontalRuleAutoformat(state, start, end) {
+  var listItem = state.schema.nodes.listItem;
+  if (hasParentNodeOfType(listItem)(state.selection)) {
+    return null;
+  }
   return createHorizontalRule(state, start, end, INPUT_METHOD.FORMATTING);
 };
 export function inputRulePlugin(schema, featureFlags) {

package/dist/esm/plugins/text-formatting/ui/Toolbar/hooks/clear-formatting-icon.js

@@ -35,7 +35,8 @@ export var useClearIcon = function useClearIcon(_ref) {
         name: 'clearFormatting'
       },
       isActive: false,
-      isDisabled: !formattingIsPresent
+      isDisabled: !formattingIsPresent,
+      'aria-label': clearFormattingKeymap ? tooltip(clearFormattingKeymap, String(clearFormattingLabel)) : String(clearFormattingLabel)
     };
   }, [clearFormattingLabel, isPluginAvailable, formattingIsPresent]);
 };

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

@@ -4,9 +4,10 @@ import WithPluginState from '../../ui/WithPluginState';
 import { ToolbarSize } from '../../ui/Toolbar/types';
 import { pluginKey as listPluginKey } from '../list/pm-plugins/main';
 import { pluginKey as indentationButtonsPluginKey, createPlugin as indentationButtonsPlugin } from './pm-plugins/indentation-buttons';
-var toolbarListsIndentationPlugin = function toolbarListsIndentationPlugin(_ref) {
+var toolbarListsIndentationPlugin = function toolbarListsIndentationPlugin(_ref, api) {
   var showIndentationButtons = _ref.showIndentationButtons,
     allowHeadingAndParagraphIndentation = _ref.allowHeadingAndParagraphIndentation;
+  var featureFlags = (api === null || api === void 0 ? void 0 : api.dependencies.featureFlags.sharedState.currentState()) || {};
   return {
     name: 'toolbarListsIndentation',
     pmPlugins: function pmPlugins() {
@@ -43,6 +44,7 @@ var toolbarListsIndentationPlugin = function toolbarListsIndentationPlugin(_ref)
             return null;
           }
           return /*#__PURE__*/React.createElement(ToolbarListsIndentation, {
+            featureFlags: featureFlags,
             isSmall: isSmall,
             isReducedSpacing: isToolbarReducedSpacing,
             disabled: disabled,

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

@@ -37,7 +37,8 @@ export function Toolbar(props) {
     return function (event) {
       return onItemActivated({
         editorView: props.editorView,
-        buttonName: buttonName
+        buttonName: buttonName,
+        featureFlags: props.featureFlags
       });
     };
   };

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

@@ -54,7 +54,8 @@ export function ToolbarDropdown(props) {
     setIsDropdownOpen(!shouldCloseMenu);
     return onItemActivated({
       editorView: props.editorView,
-      buttonName: item.value.name
+      buttonName: item.value.name,
+      featureFlags: props.featureFlags
     });
   };
   return jsx("span", {

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

@@ -16,7 +16,8 @@ export default function ToolbarListsIndentation(props) {
     popupsBoundariesElement = props.popupsBoundariesElement,
     popupsScrollableElement = props.popupsScrollableElement,
     indentDisabled = props.indentDisabled,
-    outdentDisabled = props.outdentDisabled;
+    outdentDisabled = props.outdentDisabled,
+    featureFlags = props.featureFlags;
   if (isSmall) {
     return jsx(ToolbarDropdown, {
       editorView: props.editorView,
@@ -32,7 +33,8 @@ export default function ToolbarListsIndentation(props) {
       indentDisabled: indentDisabled,
       outdentDisabled: outdentDisabled,
       disabled: disabled,
-      onItemActivated: onItemActivated
+      onItemActivated: onItemActivated,
+      featureFlags: featureFlags
     });
   }
   return jsx(Toolbar, {
@@ -46,6 +48,7 @@ export default function ToolbarListsIndentation(props) {
     indentDisabled: indentDisabled,
     outdentDisabled: outdentDisabled,
     disabled: disabled,
-    onItemActivated: onItemActivated
+    onItemActivated: onItemActivated,
+    featureFlags: featureFlags
   });
 }