@atlaskit/editor-core 161.0.0 → 162.0.2

package/CHANGELOG.md

@@ -1,5 +1,55 @@
 # @atlaskit/editor-core
 
+## 162.0.1
+
+### Patch Changes
+
+- [`cfcc23db294`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cfcc23db294) - ED-14735 Rename table styles from '.css.ts' to '.
+
+## 162.0.0
+
+### Minor Changes
+
+- [`b70bf801c6d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b70bf801c6d) - [ux] ED-14235 Fix conversion of aligned text to list
+- [`53046ba2ac3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/53046ba2ac3) - [ux] Added a new dropdown menu for smart cards view changing in the floating toolbar as a variant to be tested against the current dropdown.
+- [`d1faad40e59`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d1faad40e59) - [ux] Adds helper function to find caption node and hides adaptive toolbar on mobile when selection is inside caption node
+- [`7f158b2734b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7f158b2734b) - [ux] Shows correct toolbar state after header row or header column option is undone
+- [`9712e78abb0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9712e78abb0) - ED-14255 moved some usages of editor-shared-styles to emotion
+- [`9d6e344a6d6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d6e344a6d6) - [ux] EDM-2642: Added icons/buttons for smart cards view changing directly in the toolbar as opposed to the normal dropdown.
+- [`171af4f5fda`](https://bitbucket.org/atlassian/atlassian-frontend/commits/171af4f5fda) - Ed-14165 Remove table resize button optimization code.
+  Removing the code fixes the strange behaviour in multi-user collaboration.
+
+### Patch Changes
+
+- [`35c1a07273b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/35c1a07273b) - [ux] ED-13003: Fix copying table rows, ensuring they keep the original table's attributes (such as layout).
+- [`6e551822ea8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6e551822ea8) - Extracted out smart-mention-resource
+- [`98304ee1b02`](https://bitbucket.org/atlassian/atlassian-frontend/commits/98304ee1b02) - import embedHeaderHeight from smart-card instead of media-ui
+- [`29c631e4e60`](https://bitbucket.org/atlassian/atlassian-frontend/commits/29c631e4e60) - ED-11866 Remove unused canSink parameter from list analytics
+- [`8984ab2e078`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8984ab2e078) - [ux] ED-14650 Ensure we locate any table node in the current list of children nodes to determine if table wrapper exists
+- [`d0eed99c3e3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d0eed99c3e3) - ED-14264 Moved styles to emotion css
+- [`cb6bf345163`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb6bf345163) - [ED-13933] Fix issue when backspacing text into an image inside a list. Avoid also the ProseMirror error when this issue occurs.
+- [`f9a144c5a71`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f9a144c5a71) - ED-14255 migrated table styles to use emotion
+- [`55256125722`](https://bitbucket.org/atlassian/atlassian-frontend/commits/55256125722) - ED-14262 update editor packages to use emotion 11
+- [`ee8e5f50b6f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ee8e5f50b6f) - Add regression testing for multi cell table selection
+- [`9dfdfaab7c6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9dfdfaab7c6) - [ux] ED-14241: fix initial visibility of edit icon on extension floating toolbar when selecting an editable extension at the first node in the document
+
+  - fixed bug in bodiedExtension where clicking on the border of 'extension-content' wont trigger a selection
+
+- [`b960f4f81ee`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b960f4f81ee) - [ED-11194] Fix typehead insertion from placeholders
+- [`d0dff8da956`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d0dff8da956) - [ED-14514] In NCS backed editor wait for media uploads to complete before getting the final acknowledged state in getResolvedEditorState EditorAction. Fixes from ED-14588 were also copied over and a fix on media uploads in the collaborative-editing atlaskit example.
+  ResolvedEditorState type updated for compatability with synchrony code.
+- [`03930b9f4c7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/03930b9f4c7) - ED-14253: fixed infinite transaction loop after uploading a file to the editor.
+
+  - updated ADF for MediaBaseAttributes.\_\_contextId to allow for null value
+  - fixed Editor example page 2-comment-jira-bento
+
+- [`1a664f6b1e5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1a664f6b1e5) - [ux][ed-14583] Solve inconsistencies in paste handler. Specifically targeting invalid nodes being pasted into decision nodes (should safe insert if not valid content) and nested expands being pasted into tables (invalid so return early out of expand paste handler).
+- [`e22509504e8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e22509504e8) - ED-14255 migrate editor-shared-style to emotion
+- [`58016841de5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/58016841de5) - [ux] Now allows users to use the toolbar to insert action items and decision items when wrapped within a blockquote.
+- [`92537fdfe96`](https://bitbucket.org/atlassian/atlassian-frontend/commits/92537fdfe96) - ED-14376 Removes workaround code for Chrome 58 selection bug as solution has been implemented by prosemirror
+- [`6dc2254f102`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6dc2254f102) - AK-850: Text formatting shortcuts provide status updates for screen readers
+- Updated dependencies
+
 ## 161.0.0
 
 ### Patch Changes

package/dist/cjs/actions/index.js

@@ -53,36 +53,64 @@ var EditorActions = /*#__PURE__*/function () {
         });
       }
     });
-    (0, _defineProperty2.default)(this, "getResolvedEditorState", function () {
-      return new Promise(function (resolver, reject) {
-        var _getCollabProvider;
-
-        if (!_this.editorView) {
-          reject();
-          return;
-        }
-
-        var featureFlags = (0, _getFeatureFlags.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
-            });
-          });
+    (0, _defineProperty2.default)(this, "getResolvedEditorState", /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+      var _getCollabProvider;
+
+      var featureFlags, editorValue, editorView;
+      return _regenerator.default.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 = (0, _getFeatureFlags.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 (0, _action.getEditorValueWithMedia)(editorView);
+
+            case 13:
+              return _context.abrupt("return", (_getCollabProvider = (0, _nativeCollabProviderPlugin.getCollabProvider)(editorView.state)) === null || _getCollabProvider === void 0 ? void 0 : _getCollabProvider.getFinalAcknowledgedState());
+
+            case 14:
+            case "end":
+              return _context.stop();
+          }
         }
-
-        (_getCollabProvider = (0, _nativeCollabProviderPlugin.getCollabProvider)(_this.editorView.state)) === null || _getCollabProvider === void 0 ? void 0 : _getCollabProvider.getFinalAcknowledgedState().then(function (resolvedEditorState) {
-          resolver(resolvedEditorState);
-        }).catch(function (error) {
-          reject(error);
-        });
-      });
-    });
+      }, _callee);
+    })));
   }
 
   (0, _createClass2.default)(EditorActions, [{
@@ -182,30 +210,30 @@ var EditorActions = /*#__PURE__*/function () {
   }, {
     key: "__temporaryFixForConfigPanel",
     value: function () {
-      var _temporaryFixForConfigPanel2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+      var _temporaryFixForConfigPanel2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
         var editorView;
-        return _regenerator.default.wrap(function _callee$(_context) {
+        return _regenerator.default.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:
                 (0, _action.__temporaryFixForConfigPanel)(editorView);
 
               case 4:
               case "end":
-                return _context.stop();
+                return _context2.stop();
             }
           }
-        }, _callee, this);
+        }, _callee2, this);
       }));
 
       function __temporaryFixForConfigPanel() {
@@ -218,46 +246,46 @@ var EditorActions = /*#__PURE__*/function () {
   }, {
     key: "getValue",
     value: function () {
-      var _getValue = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+      var _getValue = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
         var editorView, doc, json, nodeSanitized;
-        return _regenerator.default.wrap(function _callee2$(_context2) {
+        return _regenerator.default.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 (0, _action.getEditorValueWithMedia)(editorView);
 
               case 5:
-                doc = _context2.sent;
+                doc = _context3.sent;
                 json = (0, _utils.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 = _prosemirrorModel.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/cjs/extensibility.js

@@ -33,7 +33,7 @@ Object.defineProperty(exports, "getChangedNodes", {
 Object.defineProperty(exports, "tablePluginKey", {
   enumerable: true,
   get: function get() {
-    return _pluginFactory.pluginKey;
+    return _pluginKey.pluginKey;
   }
 });
 Object.defineProperty(exports, "toJSON", {
@@ -61,7 +61,7 @@ var _ExtensionNodeWrapper = _interopRequireDefault(require("./plugins/extension/
 
 var _extension = require("./plugins/extension/nodeviews/extension");
 
-var _pluginFactory = require("./plugins/table/pm-plugins/plugin-factory");
+var _pluginKey = require("./plugins/table/pm-plugins/plugin-key");
 
 var EmitterEvents = {
   TABLE_DELETED: 'TABLE_DELETED'

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

@@ -35,7 +35,7 @@ var _Addon = require("../../ui/Addon");
 
 var _styles = require("../../ui/styles");
 
-var _commonStyles = require("../../plugins/table/ui/common-styles.css");
+var _commonStyles = require("../../plugins/table/ui/common-styles");
 
 var _ui2 = _interopRequireDefault(require("../../plugins/collab-edit/ui"));
 
@@ -68,7 +68,7 @@ ContentArea.displayName = 'ContentArea';
 var EditorContentArea = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\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;
-}, _commonStyles.tableFullPageEditorStyles);
+}, _commonStyles.deprecatedTableFullPageEditorStyles);
 
 EditorContentArea.displayName = 'EditorContentArea';
 

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/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/ui/LinkToolbarAppearance.js

@@ -39,9 +39,13 @@ var _messages2 = _interopRequireDefault(require("../../../messages"));
 
 var _featureFlagsContext = require("../../../plugins/feature-flags-context");
 
-var _LinkToolbarIconDropdown = _interopRequireDefault(require("./LinkToolbarIconDropdown"));
+var _LinkToolbarIconDropdown = require("./LinkToolbarIconDropdown");
 
-var _LinkToolbarButtonGroup = _interopRequireDefault(require("./LinkToolbarButtonGroup"));
+var _LinkToolbarButtonGroup = require("./LinkToolbarButtonGroup");
+
+var _linkToolbarButtonGroupOptions = require("./link-toolbar-button-group-options");
+
+var _linkToolbarIconDropdownOptions = require("./link-toolbar-icon-dropdown-options");
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
@@ -85,6 +89,7 @@ var LinkToolbarAppearance = /*#__PURE__*/function (_React$Component) {
       var isSmartLinkSupportedInParent = (0, _nodes.isSupportedInParent)(editorState, _prosemirrorModel.Fragment.from(editorState.schema.nodes.blockCard.createChecked({})), currentAppearance);
       var tooltip = isSmartLinkSupportedInParent ? undefined : parentNodeName(editorState, intl);
       var embedOption = allowEmbeds && preview && {
+        appearance: 'embed',
         title: intl.formatMessage(_messages.messages.embed),
         onClick: (0, _doc.setSelectedCardAppearance)('embed'),
         selected: currentAppearance === 'embed',
@@ -101,24 +106,27 @@ var LinkToolbarAppearance = /*#__PURE__*/function (_React$Component) {
         selected: !currentAppearance,
         testId: 'url-appearance'
       }, {
+        appearance: 'inline',
         title: intl.formatMessage(_messages.messages.inline),
         onClick: (0, _doc.setSelectedCardAppearance)('inline'),
         selected: currentAppearance === 'inline',
-        hidden: false,
         testId: 'inline-appearance'
       }, {
+        appearance: 'block',
         title: intl.formatMessage(_messages.messages.block),
         onClick: (0, _doc.setSelectedCardAppearance)('block'),
         selected: currentAppearance === 'block',
-        hidden: false,
         testId: 'block-appearance',
         disabled: !isSmartLinkSupportedInParent,
         tooltip: tooltip
       }];
-      var title = intl.formatMessage(currentAppearance ? _messages.messages[currentAppearance] : _messages.messages.url);
 
       var dispatchCommand = function dispatchCommand(fn) {
-        fn && fn(editorState, view && view.dispatch);
+        fn && fn(editorState, view && view.dispatch); // Refocus the view to ensure the editor has focus
+
+        if (view && !view.hasFocus()) {
+          view.focus();
+        }
       };
 
       if (embedOption) {
@@ -129,19 +137,29 @@ var LinkToolbarAppearance = /*#__PURE__*/function (_React$Component) {
           viewChangingExperimentToolbarStyle = _getFeatureFlags.viewChangingExperimentToolbarStyle;
 
       if (viewChangingExperimentToolbarStyle === 'toolbarIcons') {
-        return /*#__PURE__*/_react.default.createElement(_LinkToolbarButtonGroup.default, {
-          key: "link-toolbar-button-group"
+        return /*#__PURE__*/_react.default.createElement(_LinkToolbarButtonGroup.LinkToolbarButtonGroup, {
+          key: "link-toolbar-button-group",
+          options: options.map(function (option) {
+            return (0, _linkToolbarButtonGroupOptions.getButtonGroupOption)(intl, dispatchCommand, option);
+          })
         });
       }
 
       if (viewChangingExperimentToolbarStyle === 'newDropdown') {
-        return /*#__PURE__*/_react.default.createElement(_LinkToolbarIconDropdown.default, {
-          key: "link-toolbar-icon-dropdown"
+        return /*#__PURE__*/_react.default.createElement(_LinkToolbarIconDropdown.LinkToolbarIconDropdown, {
+          key: "link-toolbar-icon-dropdown",
+          title: "Change view",
+          buttonTestId: "link-toolbar-appearance-button",
+          dispatchCommand: dispatchCommand,
+          options: options.map(function (option) {
+            return (0, _linkToolbarIconDropdownOptions.getIconDropdownOption)(intl, dispatchCommand, option);
+          })
         });
       }
 
+      var title = intl.formatMessage(currentAppearance ? _messages.messages[currentAppearance] : _messages.messages.url);
       return /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
-        key: 'link-toolbar',
+        key: "link-toolbar",
         buttonTestId: "link-toolbar-appearance-button",
         title: title,
         dispatchCommand: dispatchCommand,

package/dist/cjs/plugins/card/ui/LinkToolbarButtonGroup.js

@@ -5,16 +5,75 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.StyledButton = exports.LinkToolbarButtonGroup = void 0;
 
-var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _react = _interopRequireDefault(require("react"));
 
-var LinkToolbarButtonGroup = function LinkToolbarButtonGroup(_ref) {
-  (0, _objectDestructuringEmpty2.default)(_ref);
-  return /*#__PURE__*/_react.default.createElement("span", null);
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _button = require("@atlaskit/button");
+
+var _Button = _interopRequireDefault(require("../../floating-toolbar/ui/Button"));
+
+var _excluded = ["disabled"];
+
+var _templateObject, _templateObject2;
+
+/**
+ * Applying `pointer-events: none;` when disabled allows the Tooltip to be displayed
+ */
+var StyledButton = (0, _styledComponents.default)(_Button.default)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  pointer-events: ", ";\n"])), function (_ref) {
+  var disabled = _ref.disabled;
+  return disabled ? 'none' : 'auto';
+});
+exports.StyledButton = StyledButton;
+
+var DisallowedWrapper = function DisallowedWrapper(_ref2) {
+  var disabled = _ref2.disabled,
+      props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+  return /*#__PURE__*/_react.default.createElement("div", props);
+};
+/**
+ * The button requires `pointer-events: none;` in order to fix the tooltip, hence
+ * leaving us without a disabled cursor, the following fixes this:
+ */
+
+
+var StyledDisallowedWrapper = (0, _styledComponents.default)(DisallowedWrapper)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  cursor: ", ";\n"])), function (_ref3) {
+  var disabled = _ref3.disabled;
+  return disabled ? 'not-allowed' : 'pointer';
+});
+
+var LinkToolbarButtonGroup = function LinkToolbarButtonGroup(_ref4) {
+  var options = _ref4.options;
+  return /*#__PURE__*/_react.default.createElement(_button.ButtonGroup, null, options.map(function (_ref5) {
+    var onClick = _ref5.onClick,
+        selected = _ref5.selected,
+        disabled = _ref5.disabled,
+        testId = _ref5.testId,
+        tooltipContent = _ref5.tooltipContent,
+        title = _ref5.title,
+        Icon = _ref5.icon;
+    return /*#__PURE__*/_react.default.createElement(StyledDisallowedWrapper, {
+      key: testId,
+      disabled: disabled
+    }, /*#__PURE__*/_react.default.createElement(StyledButton, {
+      title: title,
+      icon: /*#__PURE__*/_react.default.createElement(Icon, {
+        size: "medium",
+        label: title
+      }),
+      selected: selected,
+      onClick: onClick,
+      testId: testId,
+      disabled: disabled,
+      tooltipContent: tooltipContent
+    }));
+  }));
 };
 
-var _default = LinkToolbarButtonGroup;
-exports.default = _default;
+exports.LinkToolbarButtonGroup = LinkToolbarButtonGroup;