@atlaskit/editor-core 175.0.4 → 176.0.0

package/dist/es2019/ui/DropdownMenu/index.js

@@ -1,2 +1,14 @@
-import { DropdownMenu } from '@atlaskit/editor-common/ui-menu';
+import _extends from "@babel/runtime/helpers/extends";
+import { DropdownMenu as DropdownComponent } from '@atlaskit/editor-common/ui-menu';
+import React, { useContext } from 'react';
+import { KeyDownHandlerContext } from '../ToolbarArrowKeyNavigationProvider';
+const DropdownMenu = /*#__PURE__*/React.memo(({ ...props
+}) => {
+  const keydownHandlerContext = useContext(KeyDownHandlerContext); //This context is to handle the tab, Arrow Right/Left key events for dropdown.
+  //Default context has the void callbacks for above key events
+
+  return /*#__PURE__*/React.createElement(DropdownComponent, _extends({
+    keyDownHandlerContext: keydownHandlerContext
+  }, props));
+});
 export default DropdownMenu;

package/dist/es2019/ui/ElementBrowser/constants.js

@@ -1,4 +1,3 @@
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import { gridSize } from '@atlaskit/theme/constants';
 export const GRID_SIZE = gridSize();
 export const DEVICE_BREAKPOINT_NUMBERS = {

package/dist/es2019/ui/ToolbarArrowKeyNavigationProvider/index.js

@@ -0,0 +1,148 @@
+/* eslint-disable no-console */
+import React, { useLayoutEffect, useRef } from 'react';
+
+/*
+ **  The context is used to handle the keydown events of submenus.
+ **  Because the keyboard navigation is explicitly managed for main toolbar items
+ **  Few key presses such as Tab,Arrow Right/Left need ot be handled here via context
+ */
+export const KeyDownHandlerContext = /*#__PURE__*/React.createContext({
+  handleArrowLeft: () => {},
+  handleArrowRight: () => {},
+  handleTab: () => {}
+});
+/**
+ * This component is a wrapper of main toolbar which listens to keydown events of children
+ * and handles left/right arrow key navigation for all focusable elements
+ * @param
+ * @returns
+ */
+
+export const ToolbarArrowKeyNavigationProvider = ({
+  children,
+  editorView
+}) => {
+  const wrapperRef = useRef(null);
+  const currentSelectedItemIndex = useRef(0);
+
+  const incrementIndex = list => {
+    if (currentSelectedItemIndex.current === list.length - 1) {
+      currentSelectedItemIndex.current = 0;
+    } else {
+      currentSelectedItemIndex.current = currentSelectedItemIndex.current + 1;
+    }
+  };
+
+  const decrementIndex = list => {
+    if (currentSelectedItemIndex.current === 0) {
+      currentSelectedItemIndex.current = list.length - 1;
+    } else {
+      currentSelectedItemIndex.current = currentSelectedItemIndex.current - 1;
+    }
+  };
+
+  const handleArrowRight = () => {
+    var _filteredFocusableEle;
+
+    const filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
+    incrementIndex(filteredFocusableElements);
+    (_filteredFocusableEle = filteredFocusableElements[currentSelectedItemIndex.current]) === null || _filteredFocusableEle === void 0 ? void 0 : _filteredFocusableEle.focus();
+  };
+
+  const handleArrowLeft = () => {
+    var _filteredFocusableEle2;
+
+    const filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
+    decrementIndex(filteredFocusableElements);
+    (_filteredFocusableEle2 = filteredFocusableElements[currentSelectedItemIndex.current]) === null || _filteredFocusableEle2 === void 0 ? void 0 : _filteredFocusableEle2.focus();
+  };
+
+  const handleTab = () => {
+    var _filteredFocusableEle3;
+
+    const filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
+    (_filteredFocusableEle3 = filteredFocusableElements[currentSelectedItemIndex.current]) === null || _filteredFocusableEle3 === void 0 ? void 0 : _filteredFocusableEle3.focus();
+  };
+
+  const submenuKeydownHandleContext = {
+    handleArrowLeft,
+    handleArrowRight,
+    handleTab
+  };
+  useLayoutEffect(() => {
+    if (!wrapperRef.current) {
+      return;
+    }
+
+    const {
+      current: element
+    } = wrapperRef;
+    /**
+     * To handle the key events on the list
+     * @param event
+     */
+
+    const handleKeyDown = event => {
+      var _document$querySelect, _wrapperRef$current, _filteredFocusableEle4;
+
+      //To trap the focus inside the horizontal main toolbar for left and right arrow keys
+      const targetElement = event.target; //To filter out the events outside the main toolbar
+
+      if (!targetElement.closest("[data-testid='ak-editor-main-toolbar']")) {
+        return;
+      } //The key events are from child components such as dropdown menus / popups are ignored
+
+
+      if ((_document$querySelect = document.querySelector('[data-role="droplistContent"], [data-test-id="color-picker-menu"], [data-emoji-picker-container="true"]')) !== null && _document$querySelect !== void 0 && _document$querySelect.contains(targetElement) || event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+        return;
+      }
+
+      const filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
+
+      if (!filteredFocusableElements || (filteredFocusableElements === null || filteredFocusableElements === void 0 ? void 0 : filteredFocusableElements.length) === 0) {
+        return;
+      } //This is kind of hack to reset the current focused toolbar item
+      //to handle some usecases such as Tab in/out of main toolbar
+
+
+      if (!((_wrapperRef$current = wrapperRef.current) !== null && _wrapperRef$current !== void 0 && _wrapperRef$current.contains(targetElement))) {
+        currentSelectedItemIndex.current = -1;
+      } else {
+        currentSelectedItemIndex.current = filteredFocusableElements.indexOf(targetElement) > -1 ? filteredFocusableElements.indexOf(targetElement) : currentSelectedItemIndex.current;
+      }
+
+      if (event.key === 'ArrowRight') {
+        incrementIndex(filteredFocusableElements);
+      } else if (event.key === 'ArrowLeft') {
+        decrementIndex(filteredFocusableElements);
+      }
+
+      (_filteredFocusableEle4 = filteredFocusableElements[currentSelectedItemIndex.current]) === null || _filteredFocusableEle4 === void 0 ? void 0 : _filteredFocusableEle4.focus();
+    };
+
+    element === null || element === void 0 ? void 0 : element.addEventListener('keydown', handleKeyDown);
+    return () => {
+      element === null || element === void 0 ? void 0 : element.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [currentSelectedItemIndex, wrapperRef, editorView]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "custom-key-handler-wrapper",
+    ref: wrapperRef
+  }, /*#__PURE__*/React.createElement(KeyDownHandlerContext.Provider, {
+    value: submenuKeydownHandleContext
+  }, children));
+};
+
+function getFocusableElements(rootNode) {
+  if (!rootNode) {
+    return [];
+  }
+
+  const focusableModalElements = rootNode.querySelectorAll('a[href], button:not([disabled]), textarea, input, select, div[tabindex="-1"], div[tabindex="0"]') || [];
+  return Array.from(focusableModalElements);
+}
+
+function getFilteredFocusableElements(rootNode) {
+  //The focusable elements from child components such as dropdown menus / popups are ignored
+  return getFocusableElements(rootNode).filter(elm => !elm.closest('[data-role="droplistContent"]') && !elm.closest('[data-emoji-picker-container="true"]') && !elm.closest('[data-test-id="color-picker-menu"]'));
+}

package/dist/es2019/ui/styles.js

@@ -2,13 +2,7 @@ import { css } from '@emotion/react';
 import { N30 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 export { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
-export { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar'; // TODO ED-15449 delete this style when deleting editor-core table
-
-export const cellColourPreviewStyles = selectedColor => css`
-  &::before {
-    background: ${selectedColor};
-  }
-`;
+export { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
 export const buttonGroupStyle = css`
   display: inline-flex;
   align-items: center;

package/dist/es2019/utils/clipboard.js

@@ -37,19 +37,20 @@ export const copyToClipboard = async textToCopy => {
     throw new Error('Clipboard api is not supported');
   }
 };
-export const copyHTMLToClipboard = async htmlToCopy => {
+export const copyHTMLToClipboard = async (elementToCopy, plainTextToCopy) => {
   // @ts-ignore
   if (isClipboardApiSupported() && typeof ClipboardItem !== 'undefined') {
     try {
-      const blobInput = new Blob([htmlToCopy], {
-        type: 'text/html'
+      const data = new ClipboardItem({
+        'text/plain': new Blob([plainTextToCopy || elementToCopy.innerText], {
+          type: 'text/plain'
+        }),
+        'text/html': new Blob([elementToCopy.innerHTML], {
+          type: 'text/html'
+        })
       }); // @ts-ignore
 
-      const data = [new ClipboardItem({
-        'text/html': blobInput
-      })]; // @ts-ignore
-
-      navigator.clipboard.write(data);
+      await navigator.clipboard.write([data]);
     } catch (error) {
       throw new Error('Clipboard api is not supported');
     }
@@ -58,7 +59,8 @@ export const copyHTMLToClipboard = async htmlToCopy => {
     // Hence of use of this polyfill
     const Clipboard = clipboard;
     const dt = new Clipboard.DT();
-    dt.setData('text/html', htmlToCopy);
+    dt.setData('text/plain', plainTextToCopy || elementToCopy.innerText);
+    dt.setData('text/html', elementToCopy.innerHTML);
     Clipboard.write(dt);
   }
 };

package/dist/es2019/utils/document.js

@@ -1,5 +1,5 @@
 import { Node } from 'prosemirror-model';
-import { transformMediaLinkMarks, transformTextLinkCodeMarks, transformDedupeMarks, transformNodesMissingContent, transformIndentationMarks } from '@atlaskit/adf-utils/transforms';
+import { transformMediaLinkMarks, transformTextLinkCodeMarks, transformDedupeMarks, transformNodesMissingContent, transformIndentationMarks, transformInvalidMediaContent } from '@atlaskit/adf-utils/transforms';
 import { sanitizeNodeForPrivacy } from '../utils/filter/privacy-filter';
 import { validateADFEntity, findAndTrackUnsupportedContentNodes } from '@atlaskit/editor-common/utils';
 import { getBreakoutMode } from './node-width';
@@ -252,6 +252,19 @@ export function processRawValue(schema, value, providerFactory, sanitizePrivateC
       });
     }
 
+    ({
+      transformedAdf,
+      isTransformed
+    } = transformInvalidMediaContent(transformedAdf));
+
+    if (isTransformed && dispatchAnalyticsEvent) {
+      dispatchAnalyticsEvent({
+        action: ACTION.INVALID_MEDIA_CONTENT_TRANSFORMED,
+        actionSubject: ACTION_SUBJECT.EDITOR,
+        eventType: EVENT_TYPE.OPERATIONAL
+      });
+    }
+
     const entity = validateADFEntity(schema, transformedAdf || node, dispatchAnalyticsEvent);
     let newEntity = maySanitizePrivateContent(entity, providerFactory, sanitizePrivateContent);
     const parsedDoc = Node.fromJSON(schema, newEntity); // throws an error if the document is invalid

package/dist/es2019/utils/index.js

@@ -368,13 +368,6 @@ export function stringRepeat(text, length) {
 
   return result;
 }
-/**
- * A replacement for `Array.from` until it becomes widely implemented.
- */
-
-export function arrayFrom(obj) {
-  return Array.prototype.slice.call(obj);
-}
 /*
  * From Modernizr
  * Returns the kind of transitionevent available for the element

package/dist/es2019/utils/input-rules.js

@@ -1,8 +1,9 @@
-import { canJoin, findWrapping } from 'prosemirror-transform';
 import { closeHistory } from 'prosemirror-history';
 import { TextSelection } from 'prosemirror-state';
-import { addAnalytics } from '../plugins/analytics/utils';
+import { canJoin, findWrapping } from 'prosemirror-transform';
+import { GapCursorSelection } from '@atlaskit/editor-common/selection';
 import { createInputRulePlugin } from '@atlaskit/prosemirror-input-rules';
+import { addAnalytics } from '../plugins/analytics';
 export const ruleWithAnalytics = getPayload => {
   return originalRule => {
     const onHandlerApply = (state, tr, matchResult) => {
@@ -57,7 +58,7 @@ export const createPlugin = (pluginName, rules, options = {}) => {
     const unsupportedMarks = isBlockNodeRule ? ['code', 'link', 'typeAheadQuery'] : ['code'];
     const $from = state.selection.$from;
 
-    if ($from.parent.type.spec.code || !(state.selection instanceof TextSelection) || hasUnsupportedMarks(state, from, to, unsupportedMarks) || isBlockNodeRule && isCursorInsideUnsupportedMarks(state, unsupportedMarks)) {
+    if ($from.parent.type.spec.code || !(state.selection instanceof TextSelection) && !(state.selection instanceof GapCursorSelection) || hasUnsupportedMarks(state, from, to, unsupportedMarks) || isBlockNodeRule && isCursorInsideUnsupportedMarks(state, unsupportedMarks)) {
       return false;
     }
 

package/dist/es2019/utils/table.js

@@ -0,0 +1,28 @@
+/*
+  isPositionNearTableRow()
+  Returns true when a sibling node, or any  of the parent's sibling
+  nodes are a tableRow
+ */
+export function isPositionNearTableRow(pos, schema, direction) {
+  if (!schema.nodes.tableRow) {
+    return false;
+  }
+
+  let doc = pos.doc;
+  let resolved = pos;
+  const sibling = direction === 'before' ? 'nodeBefore' : 'nodeAfter';
+
+  while (resolved.depth > 0) {
+    var _resolved$sibling;
+
+    const siblingType = (_resolved$sibling = resolved[sibling]) === null || _resolved$sibling === void 0 ? void 0 : _resolved$sibling.type;
+
+    if (siblingType === schema.nodes.tableRow) {
+      return true;
+    }
+
+    resolved = doc.resolve(resolved[direction]());
+  }
+
+  return false;
+}

package/dist/es2019/version-wrapper.js

@@ -1,5 +1,5 @@
 export const name = "@atlaskit/editor-core";
-export const version = "175.0.4";
+export const version = "176.0.0";
 export const nextMajorVersion = () => {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "175.0.4",
+	"version": "176.0.0",
 	"sideEffects": false
 }

package/dist/esm/create-editor/ReactEditorView.js

@@ -77,7 +77,7 @@ export function shouldReconfigureState(props, nextProps) {
   }
 
   var mobileProperties = props.appearance === 'mobile' ? ['featureFlags', 'quickInsert'] : [];
-  var properties = ['appearance', 'persistScrollGutter', 'allowUndoRedoButtons', 'placeholder'].concat(mobileProperties);
+  var properties = ['appearance', 'persistScrollGutter', 'allowUndoRedoButtons', 'placeholder', 'sanitizePrivateContent'].concat(mobileProperties);
   return properties.reduce(function (acc, curr) {
     return acc || props[curr] !== nextProps[curr];
   }, false);

package/dist/esm/create-editor/create-plugins-list.js

@@ -47,7 +47,7 @@ export function getScrollGutterOptions(props) {
   return undefined;
 }
 export function getDefaultPresetOptionsFromEditorProps(props, createAnalyticsEvent) {
-  var _props$performanceTra, _props$linking, _props$featureFlags, _props$performanceTra2, _props$textFormatting, _props$linking2;
+  var _props$performanceTra, _props$linking, _props$performanceTra2, _props$textFormatting, _props$linking2;
 
   var appearance = props.appearance;
   var isMobile = appearance === 'mobile';
@@ -62,8 +62,7 @@ export function getDefaultPresetOptionsFromEditorProps(props, createAnalyticsEve
     featureFlags: createFeatureFlagsFromProps(props),
     paste: {
       cardOptions: cardOptions,
-      sanitizePrivateContent: props.sanitizePrivateContent,
-      plainTextPasteLinkification: ((_props$featureFlags = props.featureFlags) === null || _props$featureFlags === void 0 ? void 0 : _props$featureFlags.plainTextPasteLinkification) === true
+      sanitizePrivateContent: props.sanitizePrivateContent
     },
     base: {
       allowInlineCursorTarget: !isMobile,
@@ -301,7 +300,6 @@ export default function createPluginsList(props, prevProps, createAnalyticsEvent
     var extensionConfig = _typeof(props.allowExtension) === 'object' ? props.allowExtension : {};
     preset.add([extensionPlugin, {
       breakoutEnabled: props.appearance === 'full-page' && extensionConfig.allowBreakout !== false,
-      stickToolbarToBottom: extensionConfig.stickToolbarToBottom,
       allowAutoSave: extensionConfig.allowAutoSave,
       extensionHandlers: props.extensionHandlers,
       useLongPressSelection: false,

package/dist/esm/keymaps/index.js

@@ -1 +1 @@
-export { addAltText, toggleBold, toggleItalic, toggleUnderline, toggleStrikethrough, toggleSubscript, toggleSuperscript, toggleCode, pastePlainText, clearFormatting, setNormalText, toggleHeading1, toggleHeading2, toggleHeading3, toggleHeading4, toggleHeading5, toggleHeading6, toggleOrderedList, ctrlBackSpace, toggleBulletList, toggleBlockQuote, insertNewLine, shiftBackspace, splitCodeBlock, splitListItem, insertRule, undo, moveUp, moveDown, moveLeft, moveRight, indentList, outdentList, redo, openHelp, addLink, addInlineComment, submit, enter, shiftEnter, tab, indent, outdent, backspace, deleteKey, forwardDelete, space, escape, nextCell, previousCell, shiftTab, toggleTable, addRowBefore, addRowAfter, addColumnAfter, addColumnBefore, cut, copy, paste, altPaste, find, alignLeft, alignRight, tooltip, ToolTipContent, findKeymapByDescription, findShortcutByDescription, findShortcutByKeymap, makeKeymap, makeKeyMapWithCommon, bindKeymapWithCommand, findKeyMapForBrowser, DOWN, HEADING_KEYS, KEY_0, KEY_1, KEY_2, KEY_3, KEY_4, KEY_5, KEY_6, LEFT, RIGHT, UP } from '@atlaskit/editor-common/keymaps';
+export { addAltText, toggleBold, toggleItalic, toggleUnderline, toggleStrikethrough, toggleSubscript, toggleSuperscript, toggleCode, pastePlainText, clearFormatting, setNormalText, toggleHeading1, toggleHeading2, toggleHeading3, toggleHeading4, toggleHeading5, toggleHeading6, toggleOrderedList, ctrlBackSpace, toggleBulletList, toggleBlockQuote, insertNewLine, shiftBackspace, splitCodeBlock, splitListItem, insertRule, undo, moveUp, moveDown, moveLeft, moveRight, indentList, outdentList, redo, openHelp, addLink, addInlineComment, submit, enter, shiftEnter, tab, indent, outdent, backspace, deleteKey, forwardDelete, space, escape, nextCell, previousCell, shiftTab, toggleTable, addRowBefore, addRowAfter, addColumnAfter, addColumnBefore, cut, copy, paste, altPaste, find, alignLeft, tooltip, ToolTipContent, findKeymapByDescription, findShortcutByDescription, findShortcutByKeymap, makeKeymap, makeKeyMapWithCommon, bindKeymapWithCommand, findKeyMapForBrowser, DOWN, HEADING_KEYS, KEY_0, KEY_1, KEY_2, KEY_3, KEY_4, KEY_5, KEY_6, LEFT, RIGHT, UP } from '@atlaskit/editor-common/keymaps';

package/dist/esm/labs/next/presets/cxhtml.js

@@ -14,9 +14,7 @@ export function useCXHTMLPreset(_ref) {
 
   var _useDefaultPreset = useDefaultPreset({
     featureFlags: featureFlags,
-    paste: {
-      plainTextPasteLinkification: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.plainTextPasteLinkification
-    }
+    paste: {}
   }),
       _useDefaultPreset2 = _slicedToArray(_useDefaultPreset, 1),
       preset = _useDefaultPreset2[0];

package/dist/esm/labs/next/presets/mobile.js

@@ -38,9 +38,7 @@ export function useMobilePreset(_ref) {
 
   var _useDefaultPreset = useDefaultPreset({
     featureFlags: featureFlags,
-    paste: {
-      plainTextPasteLinkification: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.plainTextPasteLinkification
-    }
+    paste: {}
   }),
       _useDefaultPreset2 = _slicedToArray(_useDefaultPreset, 1),
       preset = _useDefaultPreset2[0];

package/dist/esm/nodeviews/getInlineNodeViewProducer.js

@@ -1,4 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import React from 'react';
 import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
 import { ACTION_SUBJECT, ACTION_SUBJECT_ID } from '../plugins/analytics';
@@ -158,17 +161,21 @@ function getPortalChildren(_ref2) {
     //  within inline node view Components however would require a sizable
     //  refactor. A test suite to catch any instances of this is ideal however
     //  the refactor required is currently out of scope for https://product-fabric.atlassian.net/browse/ED-14176
-    return /*#__PURE__*/React.createElement(ErrorBoundary, {
+    return jsx(ErrorBoundary, {
       component: ACTION_SUBJECT.REACT_NODE_VIEW,
       componentId: (_currentNode$type$nam = currentNode === null || currentNode === void 0 ? void 0 : (_currentNode$type = currentNode.type) === null || _currentNode$type === void 0 ? void 0 : _currentNode$type.name) !== null && _currentNode$type$nam !== void 0 ? _currentNode$type$nam : ACTION_SUBJECT_ID.UNKNOWN_NODE,
       dispatchAnalyticsEvent: dispatchAnalyticsEvent
-    }, /*#__PURE__*/React.createElement("span", {
+    }, jsx("span", {
+      "aria-hidden": "true",
+      className: "zeroWidthSpaceContainer"
+    }, jsx("span", {
       className: "".concat(inlineNodeViewClassname, "AddZeroWidthSpace")
-    }), ZERO_WIDTH_SPACE, /*#__PURE__*/React.createElement(Component, _extends({
+    }), ZERO_WIDTH_SPACE), jsx(Component, _extends({
       view: nodeViewParams.view,
       getPos: nodeViewParams.getPos,
       node: currentNode
-    }, extraComponentProps)), /*#__PURE__*/React.createElement("span", {
+    }, extraComponentProps)), jsx("span", {
+      "aria-hidden": "true",
       className: "".concat(inlineNodeViewClassname, "AddZeroWidthSpace")
     }));
   };

package/dist/esm/nodeviews/getInlineNodeViewProducer.styles.js

@@ -7,4 +7,4 @@ import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
 import { inlineNodeViewClassname } from './getInlineNodeViewProducer'; // For reasoning behind styles, see comments in:
 // ./getInlineNodeViewProducer -> portalChildren()
 
-export var InlineNodeViewSharedStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    display: inline;\n    user-select: all;\n    /* Collapses zero width spaces inside the inline node view\n    to prevent the node from line breaking too early.\n    */\n    white-space: nowrap;\n    /* Then reset to the Editor default so we don't interfere\n    with any component styling. */\n    & > * {\n      white-space: pre-wrap;\n    }\n  }\n  /** Remove browser deafult selections style. This prevents\n    unexpected visual artefacts in Safari when navigating\n    with the keyboard or making range selections. */\n  &.ua-safari {\n    .", " {\n      ::selection,\n      *::selection {\n        background: transparent;\n      }\n    }\n  }\n\n  &.ua-chrome .", " > span {\n    user-select: none;\n  }\n\n  .", "AddZeroWidthSpace {\n    ::after {\n      content: '", "';\n    }\n  }\n"])), inlineNodeViewClassname, inlineNodeViewClassname, inlineNodeViewClassname, inlineNodeViewClassname, ZERO_WIDTH_SPACE);
+export var InlineNodeViewSharedStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    display: inline;\n    user-select: all;\n    /* Collapses zero width spaces inside the inline node view\n    to prevent the node from line breaking too early.\n    */\n    white-space: nowrap;\n    /* Then reset to the Editor default so we don't interfere\n    with any component styling. */\n    & > *:not(span[aria-hidden='true'].zeroWidthSpaceContainer) {\n      white-space: pre-wrap;\n    }\n  }\n  /** Remove browser deafult selections style. This prevents\n    unexpected visual artefacts in Safari when navigating\n    with the keyboard or making range selections. */\n  &.ua-safari {\n    .", " {\n      ::selection,\n      *::selection {\n        background: transparent;\n      }\n    }\n  }\n\n  &.ua-chrome .", " > span {\n    user-select: none;\n  }\n\n  .", "AddZeroWidthSpace {\n    ::after {\n      content: '", "';\n    }\n  }\n"])), inlineNodeViewClassname, inlineNodeViewClassname, inlineNodeViewClassname, inlineNodeViewClassname, ZERO_WIDTH_SPACE);

package/dist/esm/plugins/alignment/pm-plugins/keymap.js

@@ -1,9 +1,8 @@
 import { keymap } from 'prosemirror-keymap';
-import { bindKeymapWithCommand, alignLeft, alignRight } from '../../../keymaps';
+import { bindKeymapWithCommand, alignLeft } from '../../../keymaps';
 import { changeAlignment } from '../commands';
 export function keymapPlugin() {
   var list = {};
   bindKeymapWithCommand(alignLeft.common, changeAlignment('start'), list);
-  bindKeymapWithCommand(alignRight.common, changeAlignment('end'), list);
   return keymap(list);
 }

package/dist/esm/plugins/alignment/ui/ToolbarAlignment/index.js

@@ -37,6 +37,8 @@ export var AlignmentToolbar = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call.apply(_super, [this].concat(args));
 
+    _defineProperty(_assertThisInitialized(_this), "toolbarItemRef", /*#__PURE__*/React.createRef());
+
     _defineProperty(_assertThisInitialized(_this), "state", {
       isOpen: false
     });
@@ -61,14 +63,29 @@ export var AlignmentToolbar = /*#__PURE__*/function (_React$Component) {
       });
     });
 
-    _defineProperty(_assertThisInitialized(_this), "hide", function () {
+    _defineProperty(_assertThisInitialized(_this), "hide", function (attrs) {
       if (_this.state.isOpen) {
         _this.setState({
           isOpen: false
         });
+
+        if ((attrs === null || attrs === void 0 ? void 0 : attrs.event) instanceof KeyboardEvent && attrs.event.key === 'Escape') {
+          var _this$toolbarItemRef, _this$toolbarItemRef$;
+
+          (_this$toolbarItemRef = _this.toolbarItemRef) === null || _this$toolbarItemRef === void 0 ? void 0 : (_this$toolbarItemRef$ = _this$toolbarItemRef.current) === null || _this$toolbarItemRef$ === void 0 ? void 0 : _this$toolbarItemRef$.focus();
+        }
       }
     });
 
+    _defineProperty(_assertThisInitialized(_this), "hideonEsc", function () {
+      var _this$toolbarItemRef2, _this$toolbarItemRef3;
+
+      _this.hide(); //To set the focus on the textcolor button when the menu is closed by 'Esc' only (aria guidelines)
+
+
+      (_this$toolbarItemRef2 = _this.toolbarItemRef) === null || _this$toolbarItemRef2 === void 0 ? void 0 : (_this$toolbarItemRef3 = _this$toolbarItemRef2.current) === null || _this$toolbarItemRef3 === void 0 ? void 0 : _this$toolbarItemRef3.focus();
+    });
+
     return _this;
   }
 
@@ -94,10 +111,17 @@ export var AlignmentToolbar = /*#__PURE__*/function (_React$Component) {
         boundariesElement: popupsBoundariesElement,
         scrollableElement: popupsScrollableElement,
         isOpen: isOpen,
-        handleClickOutside: this.hide,
-        handleEscapeKeydown: this.hide,
+        handleClickOutside: function handleClickOutside(event) {
+          return _this2.hide({
+            isOpen: false,
+            event: event
+          });
+        },
+        handleEscapeKeydown: this.hideonEsc,
+        onOpenChange: this.hide,
         fitWidth: 112,
         fitHeight: 80,
+        closeonTab: true,
         trigger: jsx(ToolbarButton, {
           spacing: isReducedSpacing ? 'none' : 'default',
           disabled: disabled,
@@ -116,7 +140,8 @@ export var AlignmentToolbar = /*#__PURE__*/function (_React$Component) {
             css: expandIconWrapper
           }, jsx(ExpandIcon, {
             label: ""
-          })))
+          }))),
+          ref: this.toolbarItemRef
         })
       }, jsx(Alignment, {
         onClick: function onClick(align) {

package/dist/esm/plugins/annotation/nodeviews/index.js

@@ -11,8 +11,6 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import React from 'react';
 import { AnnotationSharedClassNames } from '@atlaskit/editor-common/styles';
 import { ReactNodeView } from '../../../nodeviews';
-import WithPluginState from '../../../ui/WithPluginState';
-import { inlineCommentPluginKey } from '../utils';
 export var AnnotationNodeView = /*#__PURE__*/function (_ReactNodeView) {
   _inherits(AnnotationNodeView, _ReactNodeView);
 
@@ -41,37 +39,13 @@ export var AnnotationNodeView = /*#__PURE__*/function (_ReactNodeView) {
   }, {
     key: "render",
     value: function render(_props, forwardRef) {
-      var _this = this;
-
-      return /*#__PURE__*/React.createElement(WithPluginState, {
-        plugins: {
-          inlineCommentState: inlineCommentPluginKey
-        },
-        editorView: this.view,
-        render: function render(_ref) {
-          var inlineCommentState = _ref.inlineCommentState;
-
-          if (!(inlineCommentState !== null && inlineCommentState !== void 0 && inlineCommentState.isVisible)) {
-            return /*#__PURE__*/React.createElement("span", {
-              ref: forwardRef
-            });
-          } // Check if selection includes current annotation ID
-
-
-          var annotations = inlineCommentState.annotations,
-              selectedAnnotations = inlineCommentState.selectedAnnotations;
-          var id = _this.node.attrs.id;
-          var isUnresolved = annotations[id] === false;
-          var annotationHasFocus = selectedAnnotations.some(function (x) {
-            return x.id === id;
-          });
-          var className = getAnnotationViewClassname(isUnresolved, annotationHasFocus);
-          return /*#__PURE__*/React.createElement("span", {
-            className: className,
-            ref: forwardRef
-          });
-        }
-      });
+      return (
+        /*#__PURE__*/
+        // all inline comment states are now set in decorations at ../pm-plugins/inline-comment.ts
+        React.createElement("span", {
+          ref: forwardRef
+        })
+      );
     }
   }]);
 

package/dist/esm/plugins/annotation/pm-plugins/inline-comment.js

@@ -3,8 +3,9 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { RESOLVE_METHOD } from './../../analytics/types/inline-comment-events';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { Decoration, DecorationSet } from 'prosemirror-view';
 import { AnnotationTypes } from '@atlaskit/adf-schema';
-import { AnnotationNodeView } from '../nodeviews';
+import { AnnotationNodeView, getAnnotationViewClassname } from '../nodeviews';
 import { updateInlineCommentResolvedState, updateMouseState, clearDirtyMark, setInlineCommentsVisibility } from '../commands';
 import { getAllAnnotations, inlineCommentPluginKey, getPluginState } from '../utils';
 import { createPluginState } from './plugin-factory';
@@ -219,10 +220,34 @@ export var inlineCommentPlugin = function inlineCommentPlugin(options) {
         }
       },
       decorations: function decorations(state) {
+        // highlight comments, depending on state
         var _getPluginState3 = getPluginState(state),
-            draftDecorationSet = _getPluginState3.draftDecorationSet;
+            draftDecorationSet = _getPluginState3.draftDecorationSet,
+            annotations = _getPluginState3.annotations,
+            selectedAnnotations = _getPluginState3.selectedAnnotations,
+            isVisible = _getPluginState3.isVisible;
+
+        var decorations = draftDecorationSet !== null && draftDecorationSet !== void 0 ? draftDecorationSet : DecorationSet.empty;
+        var focusDecorations = [];
+        state.doc.descendants(function (node, pos) {
+          node.marks.filter(function (mark) {
+            return mark.type === state.schema.marks.annotation;
+          }).forEach(function (mark) {
+            var isSelected = selectedAnnotations.some(function (selectedAnnotation) {
+              return selectedAnnotation.id === mark.attrs.id;
+            });
+            var isUnresolved = annotations[mark.attrs.id] === false;
 
-        return draftDecorationSet;
+            if (isVisible) {
+              focusDecorations.push(Decoration.inline(pos, pos + node.nodeSize, {
+                class: "".concat(getAnnotationViewClassname(isUnresolved, isSelected), " ").concat(isUnresolved),
+                nodeName: 'span'
+              }));
+            }
+          });
+        });
+        decorations = decorations.add(state.doc, focusDecorations);
+        return decorations;
       }
     }
   });