@atlaskit/editor-core 161.0.0 → 162.0.2

package/dist/es2019/plugins/type-ahead/ui/InputQuery.js

@@ -181,6 +181,18 @@ export const InputQuery = /*#__PURE__*/React.memo(({
     };
 
     const onFocusOut = event => {
+      var _window$getSelection;
+
+      // See ED-14909: Chrome may emit focusout events where an input
+      // device was not directly responsible. (This rears in react v17+ consumers
+      // where react-managed node removal now appears to propagate focusout events to
+      // our event listener). As this path is strictly for click or other typeahead
+      // dismissals that don't involve typeahead item selection, we carve out an
+      // exception for Chrome-specific events where an input device was not the initiator.
+      if (browser.chrome && !(((_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.type) === 'Range') && !(event !== null && event !== void 0 && event.sourceCapabilities)) {
+        return;
+      }
+
       cancel({
         addPrefixTrigger: true,
         text: cleanedInputContent(),

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

@@ -64,6 +64,21 @@ export const findHandler = (id, state) => {
   } = pluginState;
   return typeAheadHandlers.find(h => h.id === id) || null;
 };
+export const findHandlerByTrigger = ({
+  trigger,
+  editorState
+}) => {
+  const pluginState = typeAheadPluginKey.getState(editorState);
+
+  if (!pluginState || !pluginState.typeAheadHandlers || pluginState.typeAheadHandlers.length === 0) {
+    return null;
+  }
+
+  const {
+    typeAheadHandlers
+  } = pluginState;
+  return typeAheadHandlers.find(h => h.trigger === trigger) || null;
+};
 export const moveSelectedIndex = ({
   editorView,
   direction

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

@@ -12,7 +12,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';
@@ -67,7 +67,7 @@ const ContentArea = styled(ContentStyles)`
 
   padding: ${TableControlsPadding}px;
 
-  ${tableCommentEditorStyles};
+  ${deprecatedTableCommentEditorStyles};
 `;
 ContentArea.displayName = 'ContentArea';
 const SecondaryToolbar = styled.div`

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

@@ -2,7 +2,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';
 const SWOOP_ANIMATION = `0.5s ${akEditorSwoopCubicBezier}`;
@@ -93,7 +93,7 @@ export const EditorContentArea = styled.div`
     }
   }
 
-  ${tableFullPageEditorStyles};
+  ${deprecatedTableFullPageEditorStyles};
 
   .fabric-editor--full-width-mode {
     /* Full Width Mode styles for ignoring breakout sizes */

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

@@ -1,12 +1,15 @@
 import _extends from "@babel/runtime/helpers/extends";
-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';
@@ -32,10 +35,16 @@ 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';
-const ContentStyles = styled.div`
+
+const contentStyles = props => {
+  var _props$featureFlags;
+
+  return css`
   .ProseMirror {
     outline: none;
-    font-size: ${editorFontSize}px;
+    font-size: ${editorFontSize({
+    theme: props.theme
+  })}px;
     ${whitespaceSharedStyles};
     ${paragraphSharedStyles};
     ${listsSharedStyles};
@@ -43,6 +52,27 @@ const ContentStyles = styled.div`
     ${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}
+
+  .mediaGroupView-content-wrap ul {
+    padding: 0;
+  }
+`;
+};
+
+const DeprecatedContentStyles = styled.div`
   .ProseMirror[contenteditable='false'] .taskItemView-content-wrap {
     pointer-events: none;
     opacity: 0.7;
@@ -64,52 +94,34 @@ const ContentStyles = styled.div`
     outline: 2px solid #8cf;
   }
 
-  ${blocktypeStyles}
-  ${textFormattingStyles}
   ${placeholderTextStyles}
   ${placeholderStyles}
-  ${({
-  featureFlags
-}) => featureFlags !== null && featureFlags !== void 0 && featureFlags.codeBlockSyntaxHighlighting ? highlightingCodeBlockStyles : codeBlockStyles}
-  ${textColorStyles}
   ${listsStyles}
   ${ruleStyles}
-  ${mediaStyles}
-  ${layoutStyles}
   ${telepointerStyle}
   ${gapCursorStyles};
-  ${tableStyles}
   ${panelStyles}
   ${fakeCursorStyles}
   ${mentionsStyles}
   ${({
   featureFlags
 }) => 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}
 
   .panelView-content-wrap {
     box-sizing: border-box;
   }
 
-  .mediaGroupView-content-wrap ul {
-    padding: 0;
-  }
-
   /** Needed to override any cleared floats, e.g. image wrapping */
 
   div.fabric-editor-block-mark[class^='fabric-editor-align'] {
@@ -154,8 +166,18 @@ const ContentStyles = styled.div`
 `;
 export default /*#__PURE__*/React.forwardRef((props, ref) => {
   const featureFlags = useFeatureFlags();
-  return /*#__PURE__*/React.createElement(ContentStyles, _extends({}, props, {
+  const {
+    allowAnnotation
+  } = props;
+  const theme = useTheme();
+  const memoizedStyle = useMemo(() => contentStyles({
+    theme,
+    allowAnnotation,
+    featureFlags
+  }), [theme, featureFlags, allowAnnotation]);
+  return jsx(DeprecatedContentStyles, _extends({}, props, {
     innerRef: ref,
-    featureFlags: featureFlags
+    featureFlags: featureFlags,
+    css: memoizedStyle
   }));
 });

package/dist/es2019/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/es2019/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 let LookDirection;
 
 (function (LookDirection) {
@@ -165,15 +165,7 @@ export const insertSelectedItem = (maybeNode, opts = {}) => (state, tr, start) =
      */
   } else if (node.isInline || isInputFragment) {
     const 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) {
-      const selection = document.getSelection();
-
-      if (selection) {
-        selection.empty();
-      }
-    }
+    tr = tr.replaceWith(start, start, fragment);
 
     if (opts.selectInlineNode) {
       // Select inserted node

package/dist/es2019/utils/selection.js

@@ -1,6 +1,5 @@
 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 const setNodeSelection = (view, pos) => {
   const {
@@ -66,11 +65,7 @@ export const normaliseNestedLayout = ({
   }
 
   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 const isChromeWithSelectionBug = browser.chrome && !browser.android && browser.chrome_version >= 58;
+};
 export const isSelectionAtStartOfNode = ($pos, parentNode) => {
   if (!parentNode) {
     return false;

package/dist/es2019/version-wrapper.js

@@ -1,5 +1,5 @@
 export const name = "@atlaskit/editor-core";
-export const version = "161.0.0";
+export const version = "162.0.2";
 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": "161.0.0",
+	"version": "162.0.2",
 	"sideEffects": false
 }

package/dist/esm/actions/index.js

@@ -32,36 +32,64 @@ var EditorActions = /*#__PURE__*/function () {
       }
     });
 
-    _defineProperty(this, "getResolvedEditorState", function () {
-      return new Promise(function (resolver, reject) {
-        var _getCollabProvider;
-
-        if (!_this.editorView) {
-          reject();
-          return;
-        }
-
-        var featureFlags = getFeatureFlags(_this.editorView.state);
-
-        if (!featureFlags.useNativeCollabPlugin) {
-          var _this$getValue;
-
-          return (_this$getValue = _this.getValue()) === null || _this$getValue === void 0 ? void 0 : _this$getValue.then(function (content) {
-            resolver({
-              content: content,
-              title: null,
-              stepVersion: -1
-            });
-          });
+    _defineProperty(this, "getResolvedEditorState", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var _getCollabProvider;
+
+      var featureFlags, editorValue, editorView;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (_this.editorView) {
+                _context.next = 2;
+                break;
+              }
+
+              throw new Error('Called getResolvedEditorState before editorView is ready');
+
+            case 2:
+              featureFlags = getFeatureFlags(_this.editorView.state);
+
+              if (featureFlags.useNativeCollabPlugin) {
+                _context.next = 10;
+                break;
+              }
+
+              _context.next = 6;
+              return _this.getValue();
+
+            case 6:
+              editorValue = _context.sent;
+
+              if (editorValue) {
+                _context.next = 9;
+                break;
+              }
+
+              throw new Error('editorValue is undefined');
+
+            case 9:
+              return _context.abrupt("return", {
+                content: editorValue,
+                title: null,
+                stepVersion: -1
+              });
+
+            case 10:
+              editorView = _this.editorView;
+              _context.next = 13;
+              return getEditorValueWithMedia(editorView);
+
+            case 13:
+              return _context.abrupt("return", (_getCollabProvider = getCollabProvider(editorView.state)) === null || _getCollabProvider === void 0 ? void 0 : _getCollabProvider.getFinalAcknowledgedState());
+
+            case 14:
+            case "end":
+              return _context.stop();
+          }
         }
-
-        (_getCollabProvider = getCollabProvider(_this.editorView.state)) === null || _getCollabProvider === void 0 ? void 0 : _getCollabProvider.getFinalAcknowledgedState().then(function (resolvedEditorState) {
-          resolver(resolvedEditorState);
-        }).catch(function (error) {
-          reject(error);
-        });
-      });
-    });
+      }, _callee);
+    })));
   }
 
   _createClass(EditorActions, [{
@@ -161,30 +189,30 @@ var EditorActions = /*#__PURE__*/function () {
   }, {
     key: "__temporaryFixForConfigPanel",
     value: function () {
-      var _temporaryFixForConfigPanel2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var _temporaryFixForConfigPanel2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
         var editorView;
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
           while (1) {
-            switch (_context.prev = _context.next) {
+            switch (_context2.prev = _context2.next) {
               case 0:
                 editorView = this.editorView;
 
                 if (editorView) {
-                  _context.next = 3;
+                  _context2.next = 3;
                   break;
                 }
 
-                return _context.abrupt("return");
+                return _context2.abrupt("return");
 
               case 3:
                 _temporaryFixForConfigPanel(editorView);
 
               case 4:
               case "end":
-                return _context.stop();
+                return _context2.stop();
             }
           }
-        }, _callee, this);
+        }, _callee2, this);
       }));
 
       function __temporaryFixForConfigPanel() {
@@ -197,46 +225,46 @@ var EditorActions = /*#__PURE__*/function () {
   }, {
     key: "getValue",
     value: function () {
-      var _getValue = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      var _getValue = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
         var editorView, doc, json, nodeSanitized;
-        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
           while (1) {
-            switch (_context2.prev = _context2.next) {
+            switch (_context3.prev = _context3.next) {
               case 0:
                 editorView = this.editorView;
 
                 if (editorView) {
-                  _context2.next = 3;
+                  _context3.next = 3;
                   break;
                 }
 
-                return _context2.abrupt("return");
+                return _context3.abrupt("return");
 
               case 3:
-                _context2.next = 5;
+                _context3.next = 5;
                 return getEditorValueWithMedia(editorView);
 
               case 5:
-                doc = _context2.sent;
+                doc = _context3.sent;
                 json = toJSON(doc);
 
                 if (this.contentEncode) {
-                  _context2.next = 9;
+                  _context3.next = 9;
                   break;
                 }
 
-                return _context2.abrupt("return", json);
+                return _context3.abrupt("return", json);
 
               case 9:
                 nodeSanitized = Node.fromJSON(this.editorView.state.schema, json);
-                return _context2.abrupt("return", this.contentEncode(nodeSanitized));
+                return _context3.abrupt("return", this.contentEncode(nodeSanitized));
 
               case 11:
               case "end":
-                return _context2.stop();
+                return _context3.stop();
             }
           }
-        }, _callee2, this);
+        }, _callee3, this);
       }));
 
       function getValue() {

package/dist/esm/extensibility.js

@@ -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 var EmitterEvents = {
   TABLE_DELETED: 'TABLE_DELETED'
 };

package/dist/esm/labs/next/full-page.js

@@ -15,7 +15,7 @@ import ContentStyles from '../../ui/ContentStyles';
 import WidthEmitter from '../../ui/WidthEmitter';
 import { ClickAreaBlock } from '../../ui/Addon';
 import { scrollbarStyles } from '../../ui/styles';
-import { tableFullPageEditorStyles } from '../../plugins/table/ui/common-styles.css';
+import { deprecatedTableFullPageEditorStyles } from '../../plugins/table/ui/common-styles';
 import AvatarsWithPluginState from '../../plugins/collab-edit/ui';
 import { Editor, EditorContent, useEditorSharedConfig } from './Editor';
 import { Toolbar } from './Toolbar';
@@ -35,7 +35,7 @@ ContentArea.displayName = 'ContentArea';
 var EditorContentArea = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  line-height: 24px;\n  height: 100%;\n  width: 100%;\n  max-width: ", "px;\n  padding-top: 50px;\n  margin: 0 auto;\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  padding-bottom: 55px;\n\n  & .ProseMirror {\n    flex-grow: 1;\n    box-sizing: border-box;\n  }\n\n  && .ProseMirror {\n    & > * {\n      clear: both;\n    }\n    > p,\n    > ul,\n    > ol,\n    > h1,\n    > h2,\n    > h3,\n    > h4,\n    > h5,\n    > h6 {\n      clear: none;\n    }\n  }\n  ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.layoutMaxWidth + GUTTER_PADDING * 2;
-}, tableFullPageEditorStyles);
+}, deprecatedTableFullPageEditorStyles);
 EditorContentArea.displayName = 'EditorContentArea';
 var MainToolbar = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: relative;\n  align-items: center;\n  box-shadow: ", ";\n  transition: box-shadow 200ms;\n  z-index: ", ";\n  display: flex;\n  height: 80px;\n  flex-shrink: 0;\n  background-color: white;\n\n  & object {\n    height: 0 !important;\n  }\n"])), function (props) {
   return props.showKeyline ? "0 ".concat(akEditorToolbarKeylineHeight, "px 0 0 ").concat(N30) : 'none';

package/dist/esm/plugins/block-type/styles.js

@@ -2,6 +2,8 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { blockquoteSharedStyles, headingsSharedStyles } from '@atlaskit/editor-common/styles';
-export var blocktypeStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    ", ";\n    ", ";\n  }\n"])), blockquoteSharedStyles, headingsSharedStyles);
+export var blocktypeStyles = function blocktypeStyles(props) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    ", ";\n    ", ";\n  }\n"])), blockquoteSharedStyles, headingsSharedStyles(props));
+};

package/dist/esm/plugins/block-type/ui/ToolbarBlockType/index.js

@@ -11,13 +11,15 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 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; } }
 
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
 import DropdownMenu from '../../../../ui/DropdownMenu';
 import { Separator, Wrapper, MenuWrapper } from '../../../../ui/styles';
 import { NORMAL_TEXT } from '../../types';
-import { BlockTypeMenuItem, KeyboardShortcut } from './styled';
+import { blockTypeMenuItemStyle, KeyboardShortcut } from './styled';
 import { tooltip, findKeymapByDescription } from '../../../../keymaps';
 import { BlockTypeButton } from './blocktype-button';
 
@@ -60,16 +62,16 @@ var ToolbarBlockType = /*#__PURE__*/function (_React$PureComponent) {
           availableBlockTypes = _this$props$pluginSta.availableBlockTypes;
       var items = availableBlockTypes.map(function (blockType, index) {
         var isActive = currentBlockType === blockType;
-        var Tag = blockType.tagName || 'p';
+        var tagName = blockType.tagName || 'p';
+        var Tag = tagName;
         return {
-          content: /*#__PURE__*/React.createElement(BlockTypeMenuItem, {
-            tagName: Tag,
-            selected: isActive
-          }, /*#__PURE__*/React.createElement(Tag, null, formatMessage(blockType.title))),
+          content: jsx("div", {
+            css: blockTypeMenuItemStyle(tagName, isActive)
+          }, jsx(Tag, null, formatMessage(blockType.title))),
           value: blockType,
           label: formatMessage(blockType.title),
           key: "".concat(blockType.name, "-").concat(index),
-          elemAfter: /*#__PURE__*/React.createElement(KeyboardShortcut, {
+          elemAfter: jsx(KeyboardShortcut, {
             selected: isActive
           }, tooltip(findKeymapByDescription(blockType.title.defaultMessage))),
           isActive: isActive
@@ -129,7 +131,7 @@ var ToolbarBlockType = /*#__PURE__*/function (_React$PureComponent) {
 
       if (!this.props.isDisabled && !blockTypesDisabled) {
         var items = this.createItems();
-        return /*#__PURE__*/React.createElement(MenuWrapper, null, /*#__PURE__*/React.createElement(DropdownMenu, {
+        return jsx(MenuWrapper, null, jsx(DropdownMenu, {
           items: items,
           onOpenChange: this.onOpenChange,
           onItemActivated: this.handleSelectBlockType,
@@ -141,7 +143,7 @@ var ToolbarBlockType = /*#__PURE__*/function (_React$PureComponent) {
           fitHeight: 360,
           fitWidth: 106,
           shouldUseDefaultRole: true
-        }, /*#__PURE__*/React.createElement(BlockTypeButton, {
+        }, jsx(BlockTypeButton, {
           isSmall: isSmall,
           isReducedSpacing: isReducedSpacing,
           selected: active,
@@ -150,10 +152,10 @@ var ToolbarBlockType = /*#__PURE__*/function (_React$PureComponent) {
           onClick: this.handleTriggerClick,
           formatMessage: formatMessage,
           "aria-expanded": active
-        }, longestDropdownMenuItem)), /*#__PURE__*/React.createElement(Separator, null));
+        }, longestDropdownMenuItem)), jsx(Separator, null));
       }
 
-      return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(BlockTypeButton, {
+      return jsx(Wrapper, null, jsx(BlockTypeButton, {
         isSmall: isSmall,
         isReducedSpacing: isReducedSpacing,
         selected: active,
@@ -162,7 +164,7 @@ var ToolbarBlockType = /*#__PURE__*/function (_React$PureComponent) {
         onClick: this.handleTriggerClick,
         formatMessage: formatMessage,
         "aria-expanded": active
-      }, longestDropdownMenuItem), /*#__PURE__*/React.createElement(Separator, null));
+      }, longestDropdownMenuItem), jsx(Separator, null));
     }
   }]);
 

package/dist/esm/plugins/block-type/ui/ToolbarBlockType/styled.js

@@ -2,15 +2,19 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2;
 
+/** @jsx jsx */
+import { css } from '@emotion/react';
 import { N400 } from '@atlaskit/theme/colors';
 import styled from 'styled-components';
 import { headingsSharedStyles } from '@atlaskit/editor-common/styles';
 import { Shortcut } from '../../../../ui/styles';
-export var BlockTypeMenuItem = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", ";\n  > {\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6 {\n      margin-top: 0;\n    }\n  }\n  ", ";\n"])), headingsSharedStyles, function (props) {
-  return (// TEMP FIX: See https://product-fabric.atlassian.net/browse/ED-13878
-    props.selected ? "".concat(props.tagName, " { color: white !important; }") : ''
-  );
-});
+export var blockTypeMenuItemStyle = function blockTypeMenuItemStyle(tagName, selected) {
+  // TEMP FIX: See https://product-fabric.atlassian.net/browse/ED-13878
+  var selectedStyle = selected ? "".concat(tagName, " { color: white !important; }") : '';
+  return function (themeProps) {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    ", ";\n    > {\n      h1,\n      h2,\n      h3,\n      h4,\n      h5,\n      h6 {\n        margin-top: 0;\n      }\n    }\n    ", ";\n  "])), headingsSharedStyles(themeProps), selectedStyle);
+  };
+};
 export var KeyboardShortcut = styled(Shortcut)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  margin-left: 16px;\n"])), function (props) {
   return props.selected ? "color: ".concat(N400, ";") : '';
 });

package/dist/esm/plugins/card/messages.js

@@ -45,8 +45,8 @@ export var messages = defineMessages({
     defaultMessage: 'URL',
     description: 'Title for option to convert the card to become a regular text-based hyperlink.'
   },
-  cardTitle: {
-    id: 'fabric.editor.cardTitle',
+  blockTitle: {
+    id: 'fabric.editor.blockTitle',
     defaultMessage: 'Card',
     description: 'Title for option to display link in the card view.'
   },
@@ -65,8 +65,8 @@ export var messages = defineMessages({
     defaultMessage: 'Display link as URL',
     description: 'Description for option to convert the card to become a regular text-based hyperlink.'
   },
-  cardDescription: {
-    id: 'fabric.editor.cardDescription',
+  blockDescription: {
+    id: 'fabric.editor.blockDescription',
     defaultMessage: 'Display more information about a link, including a summary and actions',
     description: 'Description for option to display link in the card view.'
   },