@atlaskit/editor-core 181.0.0 → 182.0.0

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;

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

@@ -0,0 +1,43 @@
+import { defineMessages } from 'react-intl-next';
+export const 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/es2019/plugins/media/ui/ImageBorder/styles.js

@@ -0,0 +1,124 @@
+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 const menuItemDimensions = {
+  width: 175,
+  height: 32
+};
+export const itemSpacing = gridSize() / 2;
+export const contextualMenuArrow = css`
+  display: flex;
+  &::after {
+    content: '›';
+    margin-left: 4px;
+    line-height: 20px;
+    color: ${`var(--ds-icon, ${N90})`};
+  }
+`;
+export const contextualMenuColorIcon = color => css`
+  ${contextualMenuArrow}
+  &::before {
+    content: '';
+    display: block;
+    border: 1px solid ${DEFAULT_BORDER_COLOR};
+    border-radius: ${"var(--ds-radius-100, 3px)"};
+    width: 20px;
+    height: 20px;
+    ${color && `background: ${color}`}
+  }
+`;
+export const contextualSubMenu = index => css`
+  border-radius: ${"var(--ds-radius-100, 3px)"};
+  background: ${"var(--ds-surface-overlay, white)"};
+  box-shadow: ${`var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`})`};
+  display: flex;
+  position: absolute;
+  top: ${index * (menuItemDimensions.height + itemSpacing * 2)}px;
+  left: ${menuItemDimensions.width}px;
+  padding: 8px;
+
+  > div {
+    padding: 0;
+  }
+`;
+export const buttonStyle = selected => css`
+  height: 26px;
+  width: 26px;
+  padding: 0;
+  border-radius: 4px;
+  background-color: ${selected ? `var(--ds-text, ${N800})` : `var(--ds-background-neutral, ${N20A})`};
+  border: 1px solid ${DEFAULT_BORDER_COLOR};
+  cursor: pointer;
+  display: block;
+`;
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+export const buttonWrapperStyle = css`
+  border: 1px solid transparent;
+  margin: 1px;
+  font-size: 0;
+  display: flex;
+  align-items: center;
+  padding: 1px;
+  border-radius: 6px;
+  &:focus-within,
+  &:focus,
+  &:hover {
+    border-color: ${N50} !important;
+  }
+`;
+export const line = (size, selected) => css`
+  position: relative;
+  &:before {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 12px;
+    height: ${size}px;
+    background-color: ${selected ? `var(--ds-icon-inverse, ${N0})` : "var(--ds-icon, #44546F)"};
+    border-radius: 90px;
+    transform: translate(-50%, -50%) rotate(135deg);
+  }
+`;
+export const toolbarButtonWrapper = ({
+  enabled,
+  isOpen
+}) => css`
+  display: flex;
+  .image-border-toolbar-btn {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    padding: 0;
+    & > span {
+      margin: 0;
+    }
+  }
+  .image-border-toolbar-dropdown {
+    padding: 0;
+    & > span {
+      margin: 0;
+    }
+    width: 16px !important;
+    border-top-left-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
+    margin-left: 1px;
+  }
+
+  &:hover {
+    .image-border-toolbar-btn {
+      ${!enabled && ` background: ${`var(--ds-background-neutral-subtle-hovered, ${colors.N30A})`};`}
+    }
+
+    .image-border-toolbar-dropdown {
+      ${!isOpen && `background: ${`var(--ds-background-neutral-subtle-hovered, ${colors.N30A})`};`}
+    }
+  }
+`;

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

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

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

@@ -4,6 +4,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;
 }
@@ -93,6 +94,7 @@ export function applyTextMarksToSlice(schema, marks) {
         // add marks to a slice if they're allowed in parent node
         // and exclude link marks
         ...parent.type.allowedMarks(marks).filter(mark => mark.type !== linkMark)];
+        node.marks.sort(sortByOrderWithTypeName('marks'));
         return false;
       }
       return true;

package/dist/es2019/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/es2019/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 const createHorizontalRule = (state, start, end, inputMethod) => {
@@ -38,6 +39,12 @@ export const createHorizontalRule = (state, start, end, inputMethod) => {
   });
 };
 const createHorizontalRuleAutoformat = (state, start, end) => {
+  const {
+    listItem
+  } = state.schema.nodes;
+  if (hasParentNodeOfType(listItem)(state.selection)) {
+    return null;
+  }
   return createHorizontalRule(state, start, end, INPUT_METHOD.FORMATTING);
 };
 export function inputRulePlugin(schema, featureFlags) {

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

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