@atlaskit/editor-core 161.0.0 → 163.0.0

package/dist/cjs/plugins/base/pm-plugins/inline-cursor-target.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isSpecial = exports.inlineCursorTargetStateKey = exports.findSpecialNodeBefore = exports.findSpecialNodeAfter = exports.default = exports.SPECIAL_NODES = void 0;
+exports.isInlineNodeView = exports.inlineCursorTargetStateKey = exports.findInlineNodeViewBefore = exports.findInlineNodeViewAfter = exports.default = void 0;
 
 var _prosemirrorView = require("prosemirror-view");
 
@@ -13,64 +13,30 @@ var _prosemirrorState = require("prosemirror-state");
 
 var _utils = require("@atlaskit/editor-common/utils");
 
+var _utils2 = require("../../../utils");
+
 var inlineCursorTargetStateKey = new _prosemirrorState.PluginKey('inlineCursorTargetPlugin');
 exports.inlineCursorTargetStateKey = inlineCursorTargetStateKey;
-var SPECIAL_NODES = ['mention', 'emoji'];
-exports.SPECIAL_NODES = SPECIAL_NODES;
 
-var isSpecial = function isSpecial(node) {
-  return node && SPECIAL_NODES.indexOf(node.type.name) !== -1;
+var isInlineNodeView = function isInlineNodeView(node) {
+  return node && node.type.isInline && !node.type.isText;
 };
 
-exports.isSpecial = isSpecial;
-
-var findSpecialNodeAfter = function findSpecialNodeAfter($pos, tr) {
-  if (isSpecial($pos.nodeAfter)) {
-    return $pos.pos + 1;
-  }
-
-  var parentOffset = $pos.parentOffset,
-      parent = $pos.parent;
-  var docSize = tr.doc.nodeSize - 2;
-
-  if (parentOffset === parent.content.size && $pos.pos + 1 < docSize - 2) {
-    var _tr$doc$resolve = tr.doc.resolve($pos.pos + 1),
-        nodeAfter = _tr$doc$resolve.nodeAfter;
+exports.isInlineNodeView = isInlineNodeView;
 
-    if (nodeAfter && isSpecial(nodeAfter.firstChild)) {
-      return $pos.pos + 2;
-    }
-  }
-
-  return;
+var findInlineNodeViewAfter = function findInlineNodeViewAfter($pos) {
+  return isInlineNodeView($pos.nodeAfter);
 };
 
-exports.findSpecialNodeAfter = findSpecialNodeAfter;
-
-var findSpecialNodeBefore = function findSpecialNodeBefore($pos, tr) {
-  if (isSpecial($pos.nodeBefore)) {
-    return $pos.pos - 1;
-  }
-
-  if ($pos.pos === 0) {
-    return;
-  }
-
-  var parentOffset = $pos.parentOffset;
-
-  if (parentOffset === 0) {
-    var _tr$doc$resolve2 = tr.doc.resolve($pos.pos - 1),
-        nodeBefore = _tr$doc$resolve2.nodeBefore;
-
-    if (nodeBefore && isSpecial(nodeBefore.firstChild)) {
-      return $pos.pos - 2;
-    }
-  }
+exports.findInlineNodeViewAfter = findInlineNodeViewAfter;
 
-  return;
+var findInlineNodeViewBefore = function findInlineNodeViewBefore($pos) {
+  return isInlineNodeView($pos.nodeBefore) || // This prevents the cursor from disappearing when at the beginning
+  // of a paragraph and next to an inline node view.
+  $pos.parentOffset === 0 && isInlineNodeView($pos.nodeAfter);
 };
 
-exports.findSpecialNodeBefore = findSpecialNodeBefore;
+exports.findInlineNodeViewBefore = findInlineNodeViewBefore;
 
 var _default = function _default() {
   return new _safePlugin.SafePlugin({
@@ -78,26 +44,49 @@ var _default = function _default() {
     state: {
       init: function init() {
         return {
-          positions: []
+          cursorTarget: undefined
         };
       },
       apply: function apply(tr) {
         var selection = tr.selection;
-        var $from = selection.$from;
-        var positions = [];
-        var posAfter = findSpecialNodeAfter($from, tr);
-        var posBefore = findSpecialNodeBefore($from, tr);
-
-        if (posAfter !== undefined) {
-          positions.push(posAfter);
-        }
-
-        if (posBefore !== undefined) {
-          positions.push(posBefore);
+        var $from = selection.$from,
+            $to = selection.$to;
+
+        if (selection && (0, _utils2.isTextSelection)(selection)) {
+          var hasInlineNodeViewAfter = findInlineNodeViewAfter($from);
+          var hasInlineNodeViewBefore = findInlineNodeViewBefore($from); // Create editable widgets either side of the cursor to allow
+          // text input. This prevents issues with the cursor disappearing
+          // or apperaing in the wrong place when positioned between
+          // non contenteditable nodes.
+          // We check beforeInput events below to prevent content
+          // being added to the decorations.
+
+          if (hasInlineNodeViewAfter && hasInlineNodeViewBefore) {
+            var createWidget = function createWidget(side) {
+              var node = document.createElement('span');
+              node.contentEditable = 'true';
+              node.appendChild(document.createTextNode(_utils.ZERO_WIDTH_SPACE));
+              return _prosemirrorView.Decoration.widget(selection.from, node, {
+                raw: true,
+                side: side === 'left' ? -1 : 1,
+                key: 'inlineCursor'
+              });
+            };
+
+            return {
+              cursorTarget: {
+                decorations: [createWidget('left'), createWidget('right')],
+                positions: {
+                  from: $from.pos,
+                  to: $to.pos
+                }
+              }
+            };
+          }
         }
 
         return {
-          positions: positions
+          cursorTarget: undefined
         };
       }
     },
@@ -105,26 +94,102 @@ var _default = function _default() {
       decorations: function decorations(state) {
         var doc = state.doc;
 
-        var _inlineCursorTargetSt = inlineCursorTargetStateKey.getState(state),
-            positions = _inlineCursorTargetSt.positions;
-
-        if (positions && positions.length) {
-          var decorations = positions.map(function (position) {
-            var node = document.createElement('span');
-            node.appendChild(document.createTextNode(_utils.ZERO_WIDTH_SPACE));
-            return _prosemirrorView.Decoration.widget(position, node, {
-              raw: true,
-              side: -1,
-              key: 'inlineCursor'
-            });
-          });
-          return _prosemirrorView.DecorationSet.create(doc, decorations);
+        var _ref = inlineCursorTargetStateKey.getState(state),
+            cursorTarget = _ref.cursorTarget;
+
+        if (cursorTargetHasValidDecorations(cursorTarget)) {
+          return _prosemirrorView.DecorationSet.create(doc, cursorTarget.decorations);
         }
 
         return null;
+      },
+      handleDOMEvents: {
+        // Check the DOM to see if there are inline cursor targets
+        // after a composition event ends. If so, manually insert the
+        // event data in order to prevent contents ending up inside
+        // of the cursor target decorations.
+        compositionend: function compositionend(view, incorrectlyTypedEvent) {
+          // This is typed by the prosemirror definitions as Event,
+          // this type is incorrect, and it is actually an InputEvent
+          var event = incorrectlyTypedEvent;
+          var state = view.state;
+
+          var _ref2 = inlineCursorTargetStateKey.getState(state),
+              cursorTarget = _ref2.cursorTarget;
+
+          if (cursorTarget !== undefined) {
+            handleTextInputInsideCursorTargetDecoration({
+              event: event,
+              cursorTarget: cursorTarget,
+              view: view
+            });
+            return true;
+          }
+
+          return false;
+        },
+        // Check the DOM to see if there are inline cursor targets
+        // before any input event. If so, manually insert the
+        // event data in order to prevent contents ending up inside
+        // of the cursor target decorations.
+        beforeinput: function beforeinput(view, incorrectlyTypedEvent) {
+          // This is typed by the prosemirror definitions as Event,
+          // this type is incorrect, and it is actually an InputEvent
+          var event = incorrectlyTypedEvent;
+          var state = view.state;
+
+          var _ref3 = inlineCursorTargetStateKey.getState(state),
+              cursorTarget = _ref3.cursorTarget;
+
+          if (!event.isComposing && cursorTarget !== undefined) {
+            handleTextInputInsideCursorTargetDecoration({
+              event: event,
+              cursorTarget: cursorTarget,
+              view: view
+            });
+            return true;
+          }
+
+          return false;
+        }
       }
     }
   });
 };
 
-exports.default = _default;
+exports.default = _default;
+
+function cursorTargetHasValidDecorations(cursorTarget) {
+  if (!cursorTarget || // Decorations can end up as null when the decorations prop is
+  // called after the decorations have been removed from the dom.
+  // https://github.com/ProseMirror/prosemirror-view/blob/8f0d313a6389b86a335274fba36534ba1cb21f12/src/decoration.js#L30
+  cursorTarget.decorations.includes(null)) {
+    return false;
+  }
+
+  return true;
+}
+
+function handleTextInputInsideCursorTargetDecoration(_ref4) {
+  var event = _ref4.event,
+      view = _ref4.view,
+      cursorTarget = _ref4.cursorTarget;
+  event.stopPropagation();
+  event.preventDefault();
+  var content = event.data || '';
+  var tr = view.state.tr; // ensure any custom handleTextInput handlers are called for the input event
+  // ie. type ahead, emoji shortcuts.
+
+  var potentiallyHandleByHandleTextInput = view.someProp('handleTextInput', function (f) {
+    return f(view, cursorTarget.positions.from, cursorTarget.positions.to, content);
+  });
+
+  if (potentiallyHandleByHandleTextInput) {
+    // if a handleTextInput handler has handled the event, we don't want to
+    // manually update the document.
+    return;
+  }
+
+  tr.insertText(content);
+  view.dispatch(tr);
+}

package/dist/cjs/plugins/before-primaryToolbar/ui/BeforePrimaryToolbarWrapper.js

@@ -5,22 +5,19 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.BeforePrimaryToolbarWrapper = exports.BeforePrimaryToolbarPluginWrapper = void 0;
+exports.BeforePrimaryToolbarWrapper = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireDefault(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react = require("@emotion/react");
 
 var _templateObject;
 
-var BeforePrimaryToolbarPluginWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-right: 8px;\n  flex-grow: 1;\n  justify-content: flex-end;\n  align-items: center;\n"])));
-
-exports.BeforePrimaryToolbarPluginWrapper = BeforePrimaryToolbarPluginWrapper;
+var beforePrimaryToolbarPluginWrapper = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-right: 8px;\n  flex-grow: 1;\n  justify-content: flex-end;\n  align-items: center;\n"])));
 
 var BeforePrimaryToolbarWrapper = function BeforePrimaryToolbarWrapper(props) {
-  return /*#__PURE__*/_react.default.createElement(BeforePrimaryToolbarPluginWrapper, {
+  return (0, _react.jsx)("div", {
+    css: beforePrimaryToolbarPluginWrapper,
     "data-testid": 'before-primary-toolbar-components-plugin'
   }, props.beforePrimaryToolbarComponents);
 };

package/dist/cjs/plugins/block-type/commands/block-type.js

@@ -17,10 +17,14 @@ var _prosemirrorState = require("prosemirror-state");
 
 var _prosemirrorTransform = require("prosemirror-transform");
 
+var _prosemirrorUtils = require("prosemirror-utils");
+
 var _types = require("../types");
 
 var _mark = require("../../../utils/mark");
 
+var _insert = require("../../../utils/insert");
+
 var _analytics = require("../../analytics");
 
 var _utils = require("../../../utils");
@@ -263,7 +267,6 @@ function wrapSelectionIn(type) {
     var _state$selection3 = state.selection,
         $from = _state$selection3.$from,
         $to = _state$selection3.$to;
-    var paragraph = state.schema.nodes.paragraph;
     var _state$schema$marks = state.schema.marks,
         alignment = _state$schema$marks.alignment,
         indentation = _state$schema$marks.indentation;
@@ -278,8 +281,7 @@ function wrapSelectionIn(type) {
       tr.wrap(range, wrapping).scrollIntoView();
     } else {
       /** We always want to append a block type */
-      tr.replaceRangeWith($to.pos + 1, $to.pos + 1, type.createAndFill({}, paragraph.create()));
-      tr.setSelection(_prosemirrorState.Selection.near(tr.doc.resolve(state.selection.to + 1)));
+      (0, _prosemirrorUtils.safeInsert)(type.createAndFill())(tr).scrollIntoView();
     }
 
     if (dispatch) {
@@ -296,15 +298,25 @@ function wrapSelectionIn(type) {
 
 function insertCodeBlock() {
   return function (state, dispatch) {
+    var _state$selection$$fro;
+
     var tr = state.tr;
-    var $to = state.selection.$to;
+    var _state$selection4 = state.selection,
+        $to = _state$selection4.$to,
+        $from = _state$selection4.$from;
     var codeBlock = state.schema.nodes.codeBlock;
-    var getNextNode = state.doc.nodeAt($to.pos + 1);
-    var addPos = getNextNode && getNextNode.isText ? 0 : 1;
-    /** We always want to append a block type */
+    var grandParentType = (_state$selection$$fro = state.selection.$from.node(-1)) === null || _state$selection$$fro === void 0 ? void 0 : _state$selection$$fro.type;
+    var parentType = state.selection.$from.parent.type;
+    /** We always want to append a block type unless we're inserting into a paragraph
+     * AND it's a valid child of the grandparent node
+     */
 
-    tr.replaceRangeWith($to.pos + addPos, $to.pos + addPos, codeBlock.createAndFill());
-    tr.setSelection(_prosemirrorState.Selection.near(tr.doc.resolve(state.selection.to + addPos)));
+    if ((0, _insert.shouldSplitSelectedNodeOnNodeInsertion)(parentType, grandParentType, codeBlock.createAndFill())) {
+      tr.replaceRangeWith($from.pos, $to.pos, codeBlock.createAndFill());
+      tr.setSelection(_prosemirrorState.Selection.near(tr.doc.resolve(state.selection.to)));
+    } else {
+      (0, _prosemirrorUtils.safeInsert)(codeBlock.createAndFill())(tr).scrollIntoView();
+    }
 
     if (dispatch) {
       dispatch(tr);

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

@@ -9,11 +9,14 @@ exports.blocktypeStyles = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = require("styled-components");
+var _react = require("@emotion/react");
 
 var _styles = require("@atlaskit/editor-common/styles");
 
 var _templateObject;
 
-var blocktypeStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    ", ";\n    ", ";\n  }\n"])), _styles.blockquoteSharedStyles, _styles.headingsSharedStyles);
+var blocktypeStyles = function blocktypeStyles(props) {
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    ", ";\n    ", ";\n  }\n"])), _styles.blockquoteSharedStyles, (0, _styles.headingsSharedStyles)(props));
+};
+
 exports.blocktypeStyles = blocktypeStyles;

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

@@ -25,6 +25,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireDefault(require("react"));
 
+var _react2 = require("@emotion/react");
+
 var _reactIntlNext = require("react-intl-next");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
@@ -80,16 +82,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.default.createElement(_styled.BlockTypeMenuItem, {
-            tagName: Tag,
-            selected: isActive
-          }, /*#__PURE__*/_react.default.createElement(Tag, null, formatMessage(blockType.title))),
+          content: (0, _react2.jsx)("div", {
+            css: (0, _styled.blockTypeMenuItemStyle)(tagName, isActive)
+          }, (0, _react2.jsx)(Tag, null, formatMessage(blockType.title))),
           value: blockType,
           label: formatMessage(blockType.title),
           key: "".concat(blockType.name, "-").concat(index),
-          elemAfter: /*#__PURE__*/_react.default.createElement(_styled.KeyboardShortcut, {
+          elemAfter: (0, _react2.jsx)(_styled.KeyboardShortcut, {
             selected: isActive
           }, (0, _keymaps.tooltip)((0, _keymaps.findKeymapByDescription)(blockType.title.defaultMessage))),
           isActive: isActive
@@ -147,7 +149,7 @@ var ToolbarBlockType = /*#__PURE__*/function (_React$PureComponent) {
 
       if (!this.props.isDisabled && !blockTypesDisabled) {
         var items = this.createItems();
-        return /*#__PURE__*/_react.default.createElement(_styles.MenuWrapper, null, /*#__PURE__*/_react.default.createElement(_DropdownMenu.default, {
+        return (0, _react2.jsx)(_styles.MenuWrapper, null, (0, _react2.jsx)(_DropdownMenu.default, {
           items: items,
           onOpenChange: this.onOpenChange,
           onItemActivated: this.handleSelectBlockType,
@@ -159,7 +161,7 @@ var ToolbarBlockType = /*#__PURE__*/function (_React$PureComponent) {
           fitHeight: 360,
           fitWidth: 106,
           shouldUseDefaultRole: true
-        }, /*#__PURE__*/_react.default.createElement(_blocktypeButton.BlockTypeButton, {
+        }, (0, _react2.jsx)(_blocktypeButton.BlockTypeButton, {
           isSmall: isSmall,
           isReducedSpacing: isReducedSpacing,
           selected: active,
@@ -168,10 +170,10 @@ var ToolbarBlockType = /*#__PURE__*/function (_React$PureComponent) {
           onClick: this.handleTriggerClick,
           formatMessage: formatMessage,
           "aria-expanded": active
-        }, longestDropdownMenuItem)), /*#__PURE__*/_react.default.createElement(_styles.Separator, null));
+        }, longestDropdownMenuItem)), (0, _react2.jsx)(_styles.Separator, null));
       }
 
-      return /*#__PURE__*/_react.default.createElement(_styles.Wrapper, null, /*#__PURE__*/_react.default.createElement(_blocktypeButton.BlockTypeButton, {
+      return (0, _react2.jsx)(_styles.Wrapper, null, (0, _react2.jsx)(_blocktypeButton.BlockTypeButton, {
         isSmall: isSmall,
         isReducedSpacing: isReducedSpacing,
         selected: active,
@@ -180,7 +182,7 @@ var ToolbarBlockType = /*#__PURE__*/function (_React$PureComponent) {
         onClick: this.handleTriggerClick,
         formatMessage: formatMessage,
         "aria-expanded": active
-      }, longestDropdownMenuItem), /*#__PURE__*/_react.default.createElement(_styles.Separator, null));
+      }, longestDropdownMenuItem), (0, _react2.jsx)(_styles.Separator, null));
     }
   }]);
   return ToolbarBlockType;

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

@@ -5,10 +5,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.KeyboardShortcut = exports.BlockTypeMenuItem = void 0;
+exports.blockTypeMenuItemStyle = exports.KeyboardShortcut = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
+var _react = require("@emotion/react");
+
 var _colors = require("@atlaskit/theme/colors");
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
@@ -19,13 +21,15 @@ var _styles2 = require("../../../../ui/styles");
 
 var _templateObject, _templateObject2;
 
-var BlockTypeMenuItem = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  > {\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6 {\n      margin-top: 0;\n    }\n  }\n  ", ";\n"])), _styles.headingsSharedStyles, function (props) {
-  return (// TEMP FIX: See https://product-fabric.atlassian.net/browse/ED-13878
-    props.selected ? "".concat(props.tagName, " { color: white !important; }") : ''
-  );
-});
+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 (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    ", ";\n    > {\n      h1,\n      h2,\n      h3,\n      h4,\n      h5,\n      h6 {\n        margin-top: 0;\n      }\n    }\n    ", ";\n  "])), (0, _styles.headingsSharedStyles)(themeProps), selectedStyle);
+  };
+};
 
-exports.BlockTypeMenuItem = BlockTypeMenuItem;
+exports.blockTypeMenuItemStyle = blockTypeMenuItemStyle;
 var KeyboardShortcut = (0, _styledComponents.default)(_styles2.Shortcut)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  margin-left: 16px;\n"])), function (props) {
   return props.selected ? "color: ".concat(_colors.N400, ";") : '';
 });

package/dist/cjs/plugins/breakout/ui/LayoutButton.js

@@ -27,6 +27,8 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
+var _react2 = require("@emotion/react");
+
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
 var _reactIntlNext = require("react-intl-next");
@@ -41,8 +43,6 @@ var _expand = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/expand
 
 var _ToolbarButton = _interopRequireDefault(require("../../../ui/ToolbarButton"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _getBreakoutMode = require("../utils/get-breakout-mode");
 
 var _setBreakoutMode = require("../commands/set-breakout-mode");
@@ -74,9 +74,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 var B300 = colors.B300,
     N300 = colors.N300,
     N20A = colors.N20A;
-
-var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  && button {\n    background: ", ";\n    color: ", ";\n    :hover {\n      background: ", ";\n      color: white !important;\n    }\n  }\n"])), N20A, N300, B300);
-
+var toolbarButtonWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  && button {\n    background: ", ";\n    color: ", ";\n    :hover {\n      background: ", ";\n      color: white !important;\n    }\n  }\n"])), N20A, N300, B300);
 var BREAKOUT_MODE = {
   FULL_WIDTH: 'full-width',
   CENTER: 'center',
@@ -178,7 +176,7 @@ var LayoutButton = /*#__PURE__*/function (_React$Component) {
         element = closestEl.firstChild;
       }
 
-      return /*#__PURE__*/_react.default.createElement(_ui.Popup, {
+      return (0, _react2.jsx)(_ui.Popup, {
         ariaLabel: title,
         target: element,
         offset: [5, 0],
@@ -189,13 +187,15 @@ var LayoutButton = /*#__PURE__*/function (_React$Component) {
         scrollableElement: scrollableElement,
         stick: true,
         forcePlacement: true
-      }, /*#__PURE__*/_react.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement(_ToolbarButton.default, {
+      }, (0, _react2.jsx)("div", {
+        css: toolbarButtonWrapper
+      }, (0, _react2.jsx)(_ToolbarButton.default, {
         title: title,
         testId: titleMessage.id,
         onClick: this.handleClick(nextBreakoutMode),
-        iconBefore: breakoutMode === BREAKOUT_MODE.FULL_WIDTH ? /*#__PURE__*/_react.default.createElement(_collapse.default, {
+        iconBefore: breakoutMode === BREAKOUT_MODE.FULL_WIDTH ? (0, _react2.jsx)(_collapse.default, {
           label: title
-        }) : /*#__PURE__*/_react.default.createElement(_expand.default, {
+        }) : (0, _react2.jsx)(_expand.default, {
           label: title
         })
       })));

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

@@ -53,8 +53,8 @@ var messages = (0, _reactIntlNext.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.'
   },
@@ -73,8 +73,8 @@ var messages = (0, _reactIntlNext.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.'
   },

package/dist/cjs/plugins/card/nodeviews/genericCard.js

@@ -38,9 +38,9 @@ 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; } }
 
 function Card(SmartCardComponent, UnsupportedComponent) {
-  var _class, _temp;
+  var _class;
 
-  return _temp = _class = /*#__PURE__*/function (_React$Component) {
+  return _class = /*#__PURE__*/function (_React$Component) {
     (0, _inherits2.default)(_class, _React$Component);
 
     var _super = _createSuper(_class);
@@ -114,7 +114,7 @@ function Card(SmartCardComponent, UnsupportedComponent) {
             return;
           }
 
-          (0, _doc.changeSelectedCardToLink)(undefined, url, true, node, getPos())(view.state, view.dispatch);
+          (0, _doc.changeSelectedCardToLinkFallback)(undefined, url, true, node, getPos())(view.state, view.dispatch);
           return null;
         } else {
           // Otherwise, render a blue link as fallback (above in render()).
@@ -127,5 +127,5 @@ function Card(SmartCardComponent, UnsupportedComponent) {
     return _class;
   }(_react.default.Component), (0, _defineProperty2.default)(_class, "contextTypes", {
     contextAdapter: _propTypes.default.object
-  }), _temp;
+  }), _class;
 }