@atlaskit/editor-core 160.0.0 → 162.0.1

package/dist/esm/plugins/text-formatting/ui/Toolbar/index.js

@@ -4,12 +4,13 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-import React, { useMemo } from 'react';
+import React, { useMemo, useState, useEffect } from 'react';
 import { injectIntl } from 'react-intl-next';
 import { Separator, Wrapper, ButtonGroup } from '../../../../ui/styles';
 import { useFormattingIcons, useHasFormattingActived } from './hooks/formatting-icons';
@@ -19,6 +20,8 @@ import { SingleToolbarButtons } from './single-toolbar-buttons';
 import { MoreButton } from './more-button';
 import { FormattingTextDropdownMenu } from './dropdown-menu';
 import { toolbarMessages } from './toolbar-messages';
+import { usePreviousObjectState, compareItemsArrays, isArrayContainsContent } from '../../utils';
+import Announcer from '../../../../utils/announcer/announcer';
 
 var ToolbarFormatting = function ToolbarFormatting(_ref) {
   var shouldUseResponsiveToolbar = _ref.shouldUseResponsiveToolbar,
@@ -33,6 +36,12 @@ var ToolbarFormatting = function ToolbarFormatting(_ref) {
   var editorState = useMemo(function () {
     return editorView.state;
   }, [editorView.state]);
+
+  var _useState = useState(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      message = _useState2[0],
+      setMessage = _useState2[1];
+
   var defaultIcons = useFormattingIcons({
     editorState: editorState,
     intl: intl,
@@ -59,6 +68,54 @@ var ToolbarFormatting = function ToolbarFormatting(_ref) {
       dropdownItems = _useResponsiveToolbar.dropdownItems,
       singleItems = _useResponsiveToolbar.singleItems;
 
+  var clearFormattingStatus = intl.formatMessage(toolbarMessages.textFormattingOff);
+  var superscriptOffSubscriptOnStatus = intl.formatMessage(toolbarMessages.superscriptOffSubscriptOn);
+  var subscriptOffSuperscriptOnStatus = intl.formatMessage(toolbarMessages.subscriptOffSuperscriptOn);
+  var activeItems = [].concat(_toConsumableArray(dropdownItems), _toConsumableArray(singleItems)).filter(function (item) {
+    return item.isActive;
+  });
+  var prevActiveItems = usePreviousObjectState(activeItems);
+  var fromSuperscriptToSubscript = isArrayContainsContent(activeItems, 'Subscript') && isArrayContainsContent(prevActiveItems, 'Superscript');
+  var fromSubscriptToSuperscript = isArrayContainsContent(activeItems, 'Superscript') && isArrayContainsContent(prevActiveItems, 'Subscript');
+  var comparedItems;
+  var screenReaderMessage = '';
+
+  if (prevActiveItems && activeItems.length > prevActiveItems.length) {
+    comparedItems = compareItemsArrays(activeItems, prevActiveItems);
+    screenReaderMessage = intl.formatMessage(toolbarMessages.on, {
+      formattingType: comparedItems[0].content
+    });
+  } else {
+    comparedItems = compareItemsArrays(prevActiveItems, activeItems);
+
+    if (comparedItems && comparedItems.length) {
+      var _activeItems$;
+
+      screenReaderMessage = intl.formatMessage(toolbarMessages.off, {
+        formattingType: comparedItems[0].content
+      });
+
+      if (((_activeItems$ = activeItems[0]) === null || _activeItems$ === void 0 ? void 0 : _activeItems$.content) === 'Code') {
+        screenReaderMessage = intl.formatMessage(toolbarMessages.codeOn, {
+          textFormattingOff: (prevActiveItems === null || prevActiveItems === void 0 ? void 0 : prevActiveItems.length) > 1 ? clearFormattingStatus : screenReaderMessage
+        });
+      }
+
+      if (fromSuperscriptToSubscript) {
+        screenReaderMessage = superscriptOffSubscriptOnStatus;
+      }
+
+      if (fromSubscriptToSuperscript) {
+        screenReaderMessage = subscriptOffSuperscriptOnStatus;
+      }
+    }
+  } // handle 'Clear formatting' status for screen readers
+
+
+  if (!(activeItems !== null && activeItems !== void 0 && activeItems.length) && (prevActiveItems === null || prevActiveItems === void 0 ? void 0 : prevActiveItems.length) > 1) {
+    screenReaderMessage = clearFormattingStatus;
+  }
+
   var items = useMemo(function () {
     if (!clearIcon) {
       return dropdownItems;
@@ -67,9 +124,19 @@ var ToolbarFormatting = function ToolbarFormatting(_ref) {
     return [].concat(_toConsumableArray(dropdownItems), [clearIcon]);
   }, [clearIcon, dropdownItems]);
   var moreFormattingButtonLabel = intl.formatMessage(toolbarMessages.moreFormatting);
+  useEffect(function () {
+    if (screenReaderMessage) {
+      setMessage(screenReaderMessage);
+    }
+  }, [screenReaderMessage]);
   return /*#__PURE__*/React.createElement(ButtonGroup, {
     width: isReducedSpacing ? 'small' : 'large'
-  }, /*#__PURE__*/React.createElement(SingleToolbarButtons, {
+  }, message && /*#__PURE__*/React.createElement(Announcer, {
+    ariaLive: "assertive",
+    text: message,
+    ariaRelevant: "additions",
+    delay: 250
+  }), /*#__PURE__*/React.createElement(SingleToolbarButtons, {
     items: singleItems,
     editorView: editorView,
     isReducedSpacing: isReducedSpacing

package/dist/esm/plugins/text-formatting/ui/Toolbar/toolbar-messages.js

@@ -15,16 +15,31 @@ export var toolbarMessages = defineMessages({
     defaultMessage: 'Code',
     description: 'Whether the text selection has monospaced/code font'
   },
+  codeOn: {
+    id: 'fabric.editor.code.on',
+    defaultMessage: '{textFormattingOff}, Code On',
+    description: 'Reports that code formatting has been turned on'
+  },
   subscript: {
     id: 'fabric.editor.subscript',
     defaultMessage: 'Subscript',
     description: 'Whether the text selection is written below the line in a slightly smaller size'
   },
+  subscriptOffSuperscriptOn: {
+    id: 'fabric.editor.subscript.off.superscript.on',
+    defaultMessage: 'Subscript Off, Superscript On',
+    description: 'Reports text formatting in case when subscript off and superscript on'
+  },
   superscript: {
     id: 'fabric.editor.superscript',
     defaultMessage: 'Superscript',
     description: 'Whether the text selection is written above the line in a slightly smaller size'
   },
+  superscriptOffSubscriptOn: {
+    id: 'fabric.editor.superscript.off.subscript.on',
+    defaultMessage: 'Superscript Off, Subscript On',
+    description: 'Describe text formatting in case when Superscript Off and Subscript on'
+  },
   clearFormatting: {
     id: 'fabric.editor.clearFormatting',
     defaultMessage: 'Clear formatting',
@@ -44,5 +59,20 @@ export var toolbarMessages = defineMessages({
     id: 'fabric.editor.italic',
     defaultMessage: 'Italic',
     description: 'This refers to italics or emphasized formatting.'
+  },
+  on: {
+    id: 'fabric.editor.on',
+    defaultMessage: '{formattingType} On',
+    description: 'Reports that text formatting has been turned on'
+  },
+  off: {
+    id: 'fabric.editor.off',
+    defaultMessage: '{formattingType} Off',
+    description: 'Reports that text formatting has been turned off'
+  },
+  textFormattingOff: {
+    id: 'fabric.editor.text.formatting.off',
+    defaultMessage: 'Text formatting Off',
+    description: 'Reports that text formatting has been turned off'
   }
 });

package/dist/esm/plugins/text-formatting/utils.js

@@ -1,3 +1,4 @@
+import { useRef, useEffect } from 'react';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { FORMATTING_MARK_TYPES, FORMATTING_NODE_TYPES } from './commands/clear-formatting';
 export var nodeLen = function nodeLen(node) {
@@ -127,4 +128,21 @@ var marksArePresent = function marksArePresent(state) {
 
 export var checkFormattingIsPresent = function checkFormattingIsPresent(state) {
   return marksArePresent(state) || blockStylingIsPresent(state);
+};
+export var usePreviousObjectState = function usePreviousObjectState(value) {
+  var ref = useRef();
+  useEffect(function () {
+    ref.current = value;
+  });
+  return ref.current;
+};
+export var compareItemsArrays = function compareItemsArrays(items, prevItems) {
+  return items && items.filter(function (item) {
+    return !prevItems.includes(item);
+  });
+};
+export var isArrayContainsContent = function isArrayContainsContent(items, content) {
+  return items.filter(function (item) {
+    return item.content === content;
+  }).length > 0;
 };

package/dist/esm/plugins/type-ahead/api.js

@@ -1,7 +1,7 @@
 import { TypeAheadAvailableNodes, SelectItemMode } from '@atlaskit/editor-common/type-ahead';
-import { findHandler, isTypeAheadOpen, getTypeAheadHandler, getTypeAheadQuery } from './utils';
+import { findHandler, findHandlerByTrigger, isTypeAheadOpen, getTypeAheadHandler, getTypeAheadQuery } from './utils';
 import { INPUT_METHOD } from '../analytics/types/enums';
-import { openTypeAheadAtCursor } from './transforms/open-typeahead-at-cursor';
+import { openTypeAheadAtCursor, openTypeAhead } from './transforms/open-typeahead-at-cursor';
 import { closeTypeAhead } from './transforms/close-type-ahead';
 import { updateQuery } from './commands/update-query';
 import { insertTypeAheadItem } from './commands/insert-type-ahead-item';
@@ -207,6 +207,34 @@ var currentQuery = function currentQuery(_ref8) {
   };
 };
 
+var find = function find(_ref9) {
+  var editorView = _ref9.editorView;
+  return function (trigger) {
+    var editorState = editorView.state;
+    var handler = findHandlerByTrigger({
+      trigger: trigger,
+      editorState: editorState
+    });
+
+    if (!handler) {
+      return null;
+    }
+
+    return handler;
+  };
+}; // This is an internal tool to be used inside of others Editor Plugins
+// We shouldn't public export this method.
+
+
+export var createInternalTypeAheadTools = function createInternalTypeAheadTools(editorView) {
+  var props = {
+    editorView: editorView
+  };
+  return {
+    findTypeAheadHandler: find(props),
+    openTypeAheadHandler: openTypeAhead
+  };
+};
 export var createTypeAheadTools = function createTypeAheadTools(editorView) {
   var props = {
     editorView: editorView

package/dist/esm/plugins/type-ahead/transforms/open-typeahead-at-cursor.js

@@ -1,11 +1,11 @@
 import { TextSelection } from 'prosemirror-state';
 import { pluginKey } from '../pm-plugins/key';
 import { ACTIONS } from '../pm-plugins/actions';
-export var openTypeAheadAtCursor = function openTypeAheadAtCursor(_ref) {
-  var triggerHandler = _ref.triggerHandler,
-      inputMethod = _ref.inputMethod,
-      query = _ref.query;
+export var openTypeAhead = function openTypeAhead(props) {
   return function (tr) {
+    var triggerHandler = props.triggerHandler,
+        inputMethod = props.inputMethod,
+        query = props.query;
     tr.setMeta(pluginKey, {
       action: ACTIONS.OPEN_TYPEAHEAD_AT_CURSOR,
       params: {
@@ -14,6 +14,18 @@ export var openTypeAheadAtCursor = function openTypeAheadAtCursor(_ref) {
         query: query
       }
     });
+  };
+};
+export var openTypeAheadAtCursor = function openTypeAheadAtCursor(_ref) {
+  var triggerHandler = _ref.triggerHandler,
+      inputMethod = _ref.inputMethod,
+      query = _ref.query;
+  return function (tr) {
+    openTypeAhead({
+      triggerHandler: triggerHandler,
+      inputMethod: inputMethod,
+      query: query
+    })(tr);
     var selection = tr.selection;
 
     if (!(selection instanceof TextSelection)) {

package/dist/esm/plugins/type-ahead/utils.js

@@ -60,9 +60,23 @@ export var findHandler = function findHandler(id, state) {
     return h.id === id;
   }) || null;
 };
-export var moveSelectedIndex = function moveSelectedIndex(_ref) {
-  var editorView = _ref.editorView,
-      direction = _ref.direction;
+export var findHandlerByTrigger = function findHandlerByTrigger(_ref) {
+  var trigger = _ref.trigger,
+      editorState = _ref.editorState;
+  var pluginState = typeAheadPluginKey.getState(editorState);
+
+  if (!pluginState || !pluginState.typeAheadHandlers || pluginState.typeAheadHandlers.length === 0) {
+    return null;
+  }
+
+  var typeAheadHandlers = pluginState.typeAheadHandlers;
+  return typeAheadHandlers.find(function (h) {
+    return h.trigger === trigger;
+  }) || null;
+};
+export var moveSelectedIndex = function moveSelectedIndex(_ref2) {
+  var editorView = _ref2.editorView,
+      direction = _ref2.direction;
   return function () {
     var typeAheadState = getPluginState(editorView.state);
 

package/dist/esm/ui/Appearance/Comment/Comment.js

@@ -26,7 +26,7 @@ import ContentStyles from '../../ContentStyles';
 import { pluginKey as maxContentSizePluginKey } from '../../../plugins/max-content-size';
 import { stateKey as mediaPluginKey } from '../../../plugins/media/pm-plugins/plugin-key';
 import { ClickAreaBlock } from '../../Addon';
-import { tableCommentEditorStyles } from '../../../plugins/table/ui/common-styles.css';
+import { deprecatedTableCommentEditorStyles } from '../../../plugins/table/ui/common-styles';
 import WithFlash from '../../WithFlash';
 import { WidthConsumer } from '@atlaskit/editor-common/ui';
 import { akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
@@ -42,7 +42,7 @@ var CommentEditor = styled.div(_templateObject || (_templateObject = _taggedTemp
 CommentEditor.displayName = 'CommentEditor';
 var ContentArea = styled(ContentStyles)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  overflow-x: hidden;\n  overflow-y: auto;\n  line-height: 24px;\n  ", ";\n\n  /** Hack for Bitbucket to ensure entire editorView gets drop event; see ED-3294 **/\n  /** Hack for tables controlls. Otherwise marging collapse and controlls are misplaced. **/\n  .ProseMirror {\n    margin: 12px ", "px ", "px;\n  }\n\n  .gridParent {\n    margin-left: ", "px;\n    margin-right: ", "px;\n    width: calc(100% + ", "px);\n  }\n\n  padding: ", "px;\n\n  ", ";\n"])), function (props) {
   return props.maxHeight ? 'max-height: ' + props.maxHeight + 'px;' : '';
-}, CommentEditorMargin, CommentEditorMargin, CommentEditorMargin - GRID_GUTTER, CommentEditorMargin - GRID_GUTTER, CommentEditorMargin - GRID_GUTTER, TableControlsPadding, tableCommentEditorStyles);
+}, CommentEditorMargin, CommentEditorMargin, CommentEditorMargin - GRID_GUTTER, CommentEditorMargin - GRID_GUTTER, CommentEditorMargin - GRID_GUTTER, TableControlsPadding, deprecatedTableCommentEditorStyles);
 ContentArea.displayName = 'ContentArea';
 var SecondaryToolbar = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  justify-content: flex-end;\n  align-items: center;\n  display: flex;\n  padding: 12px 1px;\n"])));
 SecondaryToolbar.displayName = 'SecondaryToolbar';

package/dist/esm/ui/Appearance/FullPage/StyledComponents.js

@@ -6,7 +6,7 @@ import styled from 'styled-components';
 import { akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorSwoopCubicBezier, akLayoutGutterOffset, ATLASSIAN_NAVIGATION_HEIGHT, akEditorContextPanelWidth } from '@atlaskit/editor-shared-styles';
 import { taskListSelector, decisionListSelector } from '@atlaskit/adf-schema';
 import ContentStyles from '../../ContentStyles';
-import { tableFullPageEditorStyles } from '../../../plugins/table/ui/common-styles.css';
+import { deprecatedTableFullPageEditorStyles } from '../../../plugins/table/ui/common-styles';
 import { tableMarginFullWidthMode } from '../../../plugins/table/ui/consts';
 import { scrollbarStyles } from '../../styles';
 var SWOOP_ANIMATION = "0.5s ".concat(akEditorSwoopCubicBezier);
@@ -27,7 +27,7 @@ export var EditorContentArea = styled.div(_templateObject5 || (_templateObject5
   var theme = _ref.theme,
       fullWidthMode = _ref.fullWidthMode;
   return (fullWidthMode ? akEditorFullWidthLayoutWidth : theme.layoutMaxWidth) + TOTAL_PADDING;
-}, SWOOP_ANIMATION, taskListSelector, decisionListSelector, tableFullPageEditorStyles, function (_ref2) {
+}, SWOOP_ANIMATION, taskListSelector, decisionListSelector, deprecatedTableFullPageEditorStyles, function (_ref2) {
   var containerWidth = _ref2.containerWidth;
 
   if (!containerWidth) {

package/dist/esm/ui/ContentStyles/index.js

@@ -1,16 +1,18 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject;
+var _templateObject, _templateObject2;
 
-import React from 'react';
+/** @jsx jsx */
+import React, { useMemo } from 'react';
+import { jsx, css, useTheme } from '@emotion/react';
 import styled from 'styled-components';
 import { whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, shadowSharedStyle, dateSharedStyle, tasksAndDecisionsStyles, annotationSharedStyles, smartCardSharedStyles, textColorStyles } from '@atlaskit/editor-common/styles';
 import { editorFontSize } from '@atlaskit/editor-shared-styles';
 import { unsupportedStyles } from '../../plugins/unsupported-content/styles';
 import { telepointerStyle } from '../../plugins/collab-edit/styles';
 import { gapCursorStyles } from '../../plugins/selection/gap-cursor/styles';
-import { tableStyles } from '../../plugins/table/ui/common-styles.css';
+import { tableStyles } from '../../plugins/table/ui/common-styles';
 import { placeholderStyles } from '../../plugins/placeholder/styles';
 import { blocktypeStyles } from '../../plugins/block-type/styles';
 import { codeBlockStyles, highlightingCodeBlockStyles } from '../../plugins/code-block/styles';
@@ -36,17 +38,33 @@ import { smartCardStyles } from '../../plugins/card/styles';
 import { dateStyles } from '../../plugins/date/styles';
 import { embedCardStyles } from '../../plugins/card/ui/styled';
 import { useFeatureFlags } from '../../plugins/feature-flags-context';
-var ContentStyles = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    outline: none;\n    font-size: ", "px;\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n  }\n\n  .ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n    pointer-events: none;\n    opacity: 0.7;\n  }\n\n  .ProseMirror-hideselection *::selection {\n    background: transparent;\n  }\n\n  .ProseMirror-hideselection *::-moz-selection {\n    background: transparent;\n  }\n\n  .ProseMirror-selectednode {\n    outline: none;\n  }\n\n  .ProseMirror-selectednode:empty {\n    outline: 2px solid #8cf;\n  }\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  .panelView-content-wrap {\n    box-sizing: border-box;\n  }\n\n  .mediaGroupView-content-wrap ul {\n    padding: 0;\n  }\n\n  /** Needed to override any cleared floats, e.g. image wrapping */\n\n  div.fabric-editor-block-mark[class^='fabric-editor-align'] {\n    clear: none !important;\n  }\n\n  .fabric-editor-align-end {\n    text-align: right;\n  }\n\n  .fabric-editor-align-start {\n    text-align: left;\n  }\n\n  .fabric-editor-align-center {\n    text-align: center;\n  }\n\n  .pm-table-header-content-wrap,\n  .pm-table-cell-content-wrap div.fabric-editor-block-mark {\n    p:first-child {\n      margin-top: 0;\n    }\n  }\n\n  .hyperlink-floating-toolbar,\n  .", " {\n    padding: 0;\n  }\n\n  /* Link icon in the Atlaskit package\n     is bigger than the others\n  */\n  .hyperlink-open-link {\n    svg {\n      max-width: 18px;\n    }\n    &[href] {\n      padding: 0 4px;\n    }\n  }\n"])), editorFontSize, whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, shadowSharedStyle, blocktypeStyles, textFormattingStyles, placeholderTextStyles, placeholderStyles, function (_ref) {
+
+var contentStyles = function contentStyles(props) {
+  var _props$featureFlags;
+
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    outline: none;\n    font-size: ", "px;\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n  }\n\n  ", "\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  .mediaGroupView-content-wrap ul {\n    padding: 0;\n  }\n"])), editorFontSize({
+    theme: props.theme
+  }), whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, shadowSharedStyle, tableStyles(props), (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.codeBlockSyntaxHighlighting ? highlightingCodeBlockStyles(props) : codeBlockStyles(props), blocktypeStyles(props), textFormattingStyles(props), textColorStyles, mediaStyles, layoutStyles, tasksAndDecisionsStyles, blockMarksSharedStyles, dateSharedStyle, annotationSharedStyles(props), embedCardStyles);
+};
+
+var DeprecatedContentStyles = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n    pointer-events: none;\n    opacity: 0.7;\n  }\n\n  .ProseMirror-hideselection *::selection {\n    background: transparent;\n  }\n\n  .ProseMirror-hideselection *::-moz-selection {\n    background: transparent;\n  }\n\n  .ProseMirror-selectednode {\n    outline: none;\n  }\n\n  .ProseMirror-selectednode:empty {\n    outline: 2px solid #8cf;\n  }\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  .panelView-content-wrap {\n    box-sizing: border-box;\n  }\n\n  /** Needed to override any cleared floats, e.g. image wrapping */\n\n  div.fabric-editor-block-mark[class^='fabric-editor-align'] {\n    clear: none !important;\n  }\n\n  .fabric-editor-align-end {\n    text-align: right;\n  }\n\n  .fabric-editor-align-start {\n    text-align: left;\n  }\n\n  .fabric-editor-align-center {\n    text-align: center;\n  }\n\n  .pm-table-header-content-wrap,\n  .pm-table-cell-content-wrap div.fabric-editor-block-mark {\n    p:first-child {\n      margin-top: 0;\n    }\n  }\n\n  .hyperlink-floating-toolbar,\n  .", " {\n    padding: 0;\n  }\n\n  /* Link icon in the Atlaskit package\n     is bigger than the others\n  */\n  .hyperlink-open-link {\n    svg {\n      max-width: 18px;\n    }\n    &[href] {\n      padding: 0 4px;\n    }\n  }\n"])), placeholderTextStyles, placeholderStyles, listsStyles, ruleStyles, telepointerStyle, gapCursorStyles, panelStyles, fakeCursorStyles, mentionsStyles, function (_ref) {
   var featureFlags = _ref.featureFlags;
-  return featureFlags !== null && featureFlags !== void 0 && featureFlags.codeBlockSyntaxHighlighting ? highlightingCodeBlockStyles : codeBlockStyles;
-}, textColorStyles, listsStyles, ruleStyles, mediaStyles, layoutStyles, telepointerStyle, gapCursorStyles, tableStyles, panelStyles, fakeCursorStyles, mentionsStyles, function (_ref2) {
-  var featureFlags = _ref2.featureFlags;
   return featureFlags !== null && featureFlags !== void 0 && featureFlags.nextEmojiNodeView ? emojiStylesNext : emojiStyles;
-}, tasksAndDecisionsStyles, gridStyles, linkStyles, blockMarksSharedStyles, dateSharedStyle, extensionStyles, expandStyles, findReplaceStyles, taskDecisionStyles, statusStyles, annotationSharedStyles, smartCardStyles, smartCardSharedStyles, dateStyles, embedCardStyles, unsupportedStyles, ClassNames.FLOATING_TOOLBAR_COMPONENT);
+}, gridStyles, linkStyles, extensionStyles, expandStyles, findReplaceStyles, taskDecisionStyles, statusStyles, smartCardStyles, smartCardSharedStyles, dateStyles, unsupportedStyles, ClassNames.FLOATING_TOOLBAR_COMPONENT);
 export default /*#__PURE__*/React.forwardRef(function (props, ref) {
   var featureFlags = useFeatureFlags();
-  return /*#__PURE__*/React.createElement(ContentStyles, _extends({}, props, {
+  var allowAnnotation = props.allowAnnotation;
+  var theme = useTheme();
+  var memoizedStyle = useMemo(function () {
+    return contentStyles({
+      theme: theme,
+      allowAnnotation: allowAnnotation,
+      featureFlags: featureFlags
+    });
+  }, [theme, featureFlags, allowAnnotation]);
+  return jsx(DeprecatedContentStyles, _extends({}, props, {
     innerRef: ref,
-    featureFlags: featureFlags
+    featureFlags: featureFlags,
+    css: memoizedStyle
   }));
 });

package/dist/esm/utils/index.js

@@ -12,7 +12,7 @@ export { isEmptyParagraph, hasVisibleContent, isNodeEmpty, isEmptyDocument, proc
 export { cascadeCommands, getEditorValueWithMedia } from './action';
 export { isMarkAllowedInRange, isMarkExcluded, removeBlockMarks, sanitiseSelectionMarksForWrapping, sanitiseMarksInSelection } from './mark';
 export { isParagraph, isText, isLinkMark, validateNodes } from './nodes';
-export { isChromeWithSelectionBug, normaliseNestedLayout, setNodeSelection, setAllSelection, setGapCursorSelection, setCellSelection, setTextSelection, isValidPosition } from './selection';
+export { normaliseNestedLayout, setNodeSelection, setAllSelection, setGapCursorSelection, setCellSelection, setTextSelection, isValidPosition } from './selection';
 export { containsClassName } from './dom';
 export { default as measurements } from './performance/measure-enum';
 

package/dist/esm/utils/insert.js

@@ -4,7 +4,7 @@ import { NodeSelection, Selection } from 'prosemirror-state';
 import { ReplaceStep, ReplaceAroundStep } from 'prosemirror-transform';
 import { isEmptyParagraph } from './document';
 import { GapCursorSelection, Side } from '../plugins/selection/gap-cursor-selection';
-import { isChromeWithSelectionBug, normaliseNestedLayout } from './selection';
+import { normaliseNestedLayout } from './selection';
 export var LookDirection;
 
 (function (LookDirection) {
@@ -167,15 +167,7 @@ export var insertSelectedItem = function insertSelectedItem(maybeNode) {
        */
     } else if (node.isInline || isInputFragment) {
       var fragment = isInputFragment ? node : Fragment.fromArray([node, state.schema.text(' ')]);
-      tr = tr.replaceWith(start, start, fragment); // This problem affects Chrome v58+. See: https://github.com/ProseMirror/prosemirror/issues/710
-
-      if (isChromeWithSelectionBug) {
-        var selection = document.getSelection();
-
-        if (selection) {
-          selection.empty();
-        }
-      }
+      tr = tr.replaceWith(start, start, fragment);
 
       if (opts.selectInlineNode) {
         // Select inserted node

package/dist/esm/utils/selection.js

@@ -6,7 +6,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { NodeSelection, TextSelection, AllSelection } from 'prosemirror-state';
-import { browser } from '@atlaskit/editor-common/utils';
 import { GapCursorSelection } from '../plugins/selection/gap-cursor/selection';
 export var setNodeSelection = function setNodeSelection(view, pos) {
   var state = view.state,
@@ -62,11 +61,7 @@ export var normaliseNestedLayout = function normaliseNestedLayout(_ref, node) {
   }
 
   return node;
-}; // @see: https://github.com/ProseMirror/prosemirror/issues/710
-// @see: https://bugs.chromium.org/p/chromium/issues/detail?id=740085
-// Chrome >= 58 (desktop only)
-
-export var isChromeWithSelectionBug = browser.chrome && !browser.android && browser.chrome_version >= 58;
+};
 export var isSelectionAtStartOfNode = function isSelectionAtStartOfNode($pos, parentNode) {
   if (!parentNode) {
     return false;

package/dist/esm/version-wrapper.js

@@ -1,5 +1,5 @@
 export var name = "@atlaskit/editor-core";
-export var version = "160.0.0";
+export var version = "162.0.1";
 export var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/esm/version.json

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

package/dist/types/actions/index.d.ts

@@ -16,7 +16,7 @@ export interface EditorActionsOptions<T> {
     replaceSelection(rawValue: Node | Object | string): boolean;
     appendText(text: string): boolean;
     isDocumentEmpty(): boolean;
-    getResolvedEditorState(): Promise<ResolvedEditorState>;
+    getResolvedEditorState(): Promise<ResolvedEditorState | undefined>;
 }
 export default class EditorActions<T = any> implements EditorActionsOptions<T> {
     private editorView?;
@@ -50,5 +50,5 @@ export default class EditorActions<T = any> implements EditorActionsOptions<T> {
      * refers to the latest state of editor with confirmed
      * steps.
      */
-    getResolvedEditorState: () => Promise<ResolvedEditorState>;
+    getResolvedEditorState: () => Promise<ResolvedEditorState | undefined>;
 }

package/dist/types/extensibility.d.ts

@@ -4,7 +4,7 @@ export { toJSON } from './utils';
 export { default as Extension } from './plugins/extension/ui/Extension';
 export { default as ExtensionNodeWrapper } from './plugins/extension/ui/Extension/ExtensionNodeWrapper';
 export { ExtensionNode } from './plugins/extension/nodeviews/extension';
-export { pluginKey as tablePluginKey } from './plugins/table/pm-plugins/plugin-factory';
+export { pluginKey as tablePluginKey } from './plugins/table/pm-plugins/plugin-key';
 export declare const EmitterEvents: {
     TABLE_DELETED: string;
 };

package/dist/types/plugins/analytics/types/list-events.d.ts

@@ -36,7 +36,6 @@ declare type ListConvertedTrackAEP = TrackAEP<ACTION.CONVERTED, ACTION_SUBJECT.L
 } & CommonListAnalyticsAttributes, undefined>;
 declare type ListIndentedAEP = TrackAEP<ACTION.INDENTED, ACTION_SUBJECT.LIST, ACTION_SUBJECT_ID.FORMAT_LIST_BULLET | ACTION_SUBJECT_ID.FORMAT_LIST_NUMBER, {
     inputMethod: INPUT_METHOD;
-    canSink?: boolean;
 } & CommonListAnalyticsAttributes, undefined>;
 declare type ListOutdentedAEP = TrackAEP<ACTION.OUTDENTED, ACTION_SUBJECT.LIST, ACTION_SUBJECT_ID.FORMAT_LIST_BULLET | ACTION_SUBJECT_ID.FORMAT_LIST_NUMBER, {
     inputMethod: INPUT_METHOD;

package/dist/types/plugins/block-type/styles.d.ts

@@ -1 +1,2 @@
-export declare const blocktypeStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<import("@atlaskit/theme").AtlaskitThemeProps | import("@atlaskit/theme").CustomThemeProps | import("@atlaskit/theme").NoThemeProps | undefined, any>>[];
+import { ThemeProps } from '@atlaskit/theme/types';
+export declare const blocktypeStyles: (props: ThemeProps) => import("@emotion/react").SerializedStyles;

package/dist/types/plugins/block-type/ui/ToolbarBlockType/index.d.ts

@@ -1,3 +1,4 @@
+/** @jsx jsx */
 import React from 'react';
 import { WrappedComponentProps } from 'react-intl-next';
 import { BlockTypeState } from '../../pm-plugins/main';

package/dist/types/plugins/block-type/ui/ToolbarBlockType/styled.d.ts

@@ -1,11 +1,6 @@
+import { ThemeProps } from '@atlaskit/theme/types';
 import { HTMLAttributes, ComponentClass } from 'react';
-export declare const BlockTypeMenuItem: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & {
-    tagName: string;
-    selected?: boolean | undefined;
-}, any, import("react").ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & {
-    tagName: string;
-    selected?: boolean | undefined;
-}>;
+export declare const blockTypeMenuItemStyle: (tagName: string, selected?: boolean | undefined) => (themeProps: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const KeyboardShortcut: ComponentClass<HTMLAttributes<{}> & {
     selected?: boolean;
 }>;

package/dist/types/plugins/card/messages.d.ts

@@ -44,7 +44,7 @@ export declare const messages: {
         defaultMessage: string;
         description: string;
     };
-    cardTitle: {
+    blockTitle: {
         id: string;
         defaultMessage: string;
         description: string;
@@ -64,7 +64,7 @@ export declare const messages: {
         defaultMessage: string;
         description: string;
     };
-    cardDescription: {
+    blockDescription: {
         id: string;
         defaultMessage: string;
         description: string;

package/dist/types/plugins/card/ui/LinkToolbarButtonGroup.d.ts

@@ -1,5 +1,21 @@
 /// <reference types="react" />
+import type { GlyphProps } from '@atlaskit/icon/types';
+/**
+ * Applying `pointer-events: none;` when disabled allows the Tooltip to be displayed
+ */
+export declare const StyledButton: import("styled-components").StyledComponentClass<import("../../floating-toolbar/ui/Button").Props, any, Pick<import("../../floating-toolbar/ui/Button").Props, "title" | "children" | "className" | "tabIndex" | "onFocus" | "onBlur" | "onClick" | "onMouseEnter" | "onMouseLeave" | "icon" | "appearance" | "disabled" | "target" | "iconAfter" | "selected" | "href" | "tooltipContent" | "testId" | "hideTooltipOnClick" | "ariaHasPopup"> & {
+    theme?: any;
+}>;
+export interface ButtonOptionProps {
+    title: string;
+    selected: boolean;
+    testId: string;
+    disabled: boolean;
+    tooltipContent?: string | null;
+    onClick: () => void;
+    icon: (props: GlyphProps) => JSX.Element;
+}
 export interface LinkToolbarButtonGroupProps {
+    options: ButtonOptionProps[];
 }
-declare const LinkToolbarButtonGroup: ({}: LinkToolbarButtonGroupProps) => JSX.Element;
-export default LinkToolbarButtonGroup;
+export declare const LinkToolbarButtonGroup: ({ options, }: LinkToolbarButtonGroupProps) => JSX.Element;

package/dist/types/plugins/card/ui/LinkToolbarIconDropdown.d.ts

@@ -1,5 +1,25 @@
 /// <reference types="react" />
-export interface LinkToolbarIconDropdownProps {
+import { jsx } from '@emotion/react';
+import type { GlyphProps } from '@atlaskit/icon/types';
+import { Props as DropdownProps } from '../../floating-toolbar/ui/Dropdown';
+export declare const ICON_HEIGHT = 40;
+export declare const ICON_WIDTH = 40;
+interface IconSizeProps {
+    width?: number;
+    height?: number;
 }
-declare const LinkToolbarIconDropdown: ({}: LinkToolbarIconDropdownProps) => JSX.Element;
-export default LinkToolbarIconDropdown;
+export interface IconDropdownOptionProps {
+    title: string;
+    description: string;
+    selected: boolean;
+    disabled: boolean;
+    onClick: () => void;
+    icon: (props: GlyphProps & IconSizeProps) => JSX.Element;
+    testId?: string;
+    tooltipContent?: string | null;
+}
+export interface LinkToolbarIconDropdownProps extends DropdownProps {
+    options: IconDropdownOptionProps[];
+}
+export declare const LinkToolbarIconDropdown: ({ options, ...rest }: LinkToolbarIconDropdownProps) => jsx.JSX.Element;
+export {};

package/dist/types/plugins/card/ui/ResizableEmbedCard.d.ts

@@ -1,4 +1,6 @@
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { RichMediaLayout } from '@atlaskit/adf-schema';
 import { Props as ResizerProps } from '../../../ui/Resizer/types';
 declare type State = {
@@ -53,6 +55,6 @@ export default class ResizableEmbedCard extends React.Component<Props, State> {
      * and hence we use `style` prop.
      */
     private getHeightDefiningComponent;
-    render(): JSX.Element;
+    render(): jsx.JSX.Element;
 }
 export {};