@atlaskit/editor-core 161.0.0 → 163.0.0

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

@@ -2,52 +2,18 @@ import { DecorationSet, Decoration } from 'prosemirror-view';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from 'prosemirror-state';
 import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
+import { isTextSelection } from '../../../utils';
 export var inlineCursorTargetStateKey = new PluginKey('inlineCursorTargetPlugin');
-export var SPECIAL_NODES = ['mention', 'emoji'];
-export var isSpecial = function isSpecial(node) {
-  return node && SPECIAL_NODES.indexOf(node.type.name) !== -1;
+export var isInlineNodeView = function isInlineNodeView(node) {
+  return node && node.type.isInline && !node.type.isText;
 };
-export 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;
-
-    if (nodeAfter && isSpecial(nodeAfter.firstChild)) {
-      return $pos.pos + 2;
-    }
-  }
-
-  return;
+export var findInlineNodeViewAfter = function findInlineNodeViewAfter($pos) {
+  return isInlineNodeView($pos.nodeAfter);
 };
-export 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;
-    }
-  }
-
-  return;
+export 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);
 };
 export default (function () {
   return new SafePlugin({
@@ -55,26 +21,49 @@ export default (function () {
     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);
+        var $from = selection.$from,
+            $to = selection.$to;
 
-        if (posAfter !== undefined) {
-          positions.push(posAfter);
-        }
+        if (selection && 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(ZERO_WIDTH_SPACE));
+              return Decoration.widget(selection.from, node, {
+                raw: true,
+                side: side === 'left' ? -1 : 1,
+                key: 'inlineCursor'
+              });
+            };
 
-        if (posBefore !== undefined) {
-          positions.push(posBefore);
+            return {
+              cursorTarget: {
+                decorations: [createWidget('left'), createWidget('right')],
+                positions: {
+                  from: $from.pos,
+                  to: $to.pos
+                }
+              }
+            };
+          }
         }
 
         return {
-          positions: positions
+          cursorTarget: undefined
         };
       }
     },
@@ -82,24 +71,100 @@ export default (function () {
       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(ZERO_WIDTH_SPACE));
-            return Decoration.widget(position, node, {
-              raw: true,
-              side: -1,
-              key: 'inlineCursor'
-            });
-          });
-          return DecorationSet.create(doc, decorations);
+        var _ref = inlineCursorTargetStateKey.getState(state),
+            cursorTarget = _ref.cursorTarget;
+
+        if (cursorTargetHasValidDecorations(cursorTarget)) {
+          return 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;
+        }
       }
     }
   });
-});
+});
+
+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/esm/plugins/before-primaryToolbar/ui/BeforePrimaryToolbarWrapper.js

@@ -2,11 +2,12 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import React from 'react';
-import styled from 'styled-components';
-export var BeforePrimaryToolbarPluginWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  margin-right: 8px;\n  flex-grow: 1;\n  justify-content: flex-end;\n  align-items: center;\n"])));
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+var beforePrimaryToolbarPluginWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  margin-right: 8px;\n  flex-grow: 1;\n  justify-content: flex-end;\n  align-items: center;\n"])));
 export var BeforePrimaryToolbarWrapper = function BeforePrimaryToolbarWrapper(props) {
-  return /*#__PURE__*/React.createElement(BeforePrimaryToolbarPluginWrapper, {
+  return jsx("div", {
+    css: beforePrimaryToolbarPluginWrapper,
     "data-testid": 'before-primary-toolbar-components-plugin'
   }, props.beforePrimaryToolbarComponents);
 };

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

@@ -6,8 +6,10 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 
 import { Selection } from 'prosemirror-state';
 import { findWrapping } from 'prosemirror-transform';
+import { safeInsert } from 'prosemirror-utils';
 import { CODE_BLOCK, BLOCK_QUOTE, PANEL, HEADINGS_BY_NAME, NORMAL_TEXT } from '../types';
 import { removeBlockMarks } from '../../../utils/mark';
+import { shouldSplitSelectedNodeOnNodeInsertion } from '../../../utils/insert';
 import { withAnalytics, ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../analytics';
 import { filterChildrenBetween } from '../../../utils';
 import { PanelType } from '@atlaskit/adf-schema';
@@ -230,7 +232,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;
@@ -245,8 +246,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(Selection.near(tr.doc.resolve(state.selection.to + 1)));
+      safeInsert(type.createAndFill())(tr).scrollIntoView();
     }
 
     if (dispatch) {
@@ -263,15 +263,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(Selection.near(tr.doc.resolve(state.selection.to + addPos)));
+    if (shouldSplitSelectedNodeOnNodeInsertion(parentType, grandParentType, codeBlock.createAndFill())) {
+      tr.replaceRangeWith($from.pos, $to.pos, codeBlock.createAndFill());
+      tr.setSelection(Selection.near(tr.doc.resolve(state.selection.to)));
+    } else {
+      safeInsert(codeBlock.createAndFill())(tr).scrollIntoView();
+    }
 
     if (dispatch) {
       dispatch(tr);

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

@@ -13,7 +13,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; } }
 
+/** @jsx jsx */
 import React from 'react';
+import { css, jsx } from '@emotion/react';
 import * as colors from '@atlaskit/theme/colors';
 import { injectIntl } from 'react-intl-next';
 import { findParentDomRefOfType, findDomRefAtPos } from 'prosemirror-utils';
@@ -21,7 +23,6 @@ import { Popup } from '@atlaskit/editor-common/ui';
 import CollapseIcon from '@atlaskit/icon/glyph/editor/collapse';
 import ExpandIcon from '@atlaskit/icon/glyph/editor/expand';
 import ToolbarButton from '../../../ui/ToolbarButton';
-import styled from 'styled-components';
 import { getBreakoutMode } from '../utils/get-breakout-mode';
 import { setBreakoutMode } from '../commands/set-breakout-mode';
 import { removeBreakout } from '../commands/remove-breakout';
@@ -34,7 +35,7 @@ import { isSupportedNodeForBreakout } from '../utils/is-supported-node';
 var B300 = colors.B300,
     N300 = colors.N300,
     N20A = colors.N20A;
-var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  && button {\n    background: ", ";\n    color: ", ";\n    :hover {\n      background: ", ";\n      color: white !important;\n    }\n  }\n"])), N20A, N300, B300);
+var toolbarButtonWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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',
@@ -138,7 +139,7 @@ var LayoutButton = /*#__PURE__*/function (_React$Component) {
         element = closestEl.firstChild;
       }
 
-      return /*#__PURE__*/React.createElement(Popup, {
+      return jsx(Popup, {
         ariaLabel: title,
         target: element,
         offset: [5, 0],
@@ -149,13 +150,15 @@ var LayoutButton = /*#__PURE__*/function (_React$Component) {
         scrollableElement: scrollableElement,
         stick: true,
         forcePlacement: true
-      }, /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(ToolbarButton, {
+      }, jsx("div", {
+        css: toolbarButtonWrapper
+      }, jsx(ToolbarButton, {
         title: title,
         testId: titleMessage.id,
         onClick: this.handleClick(nextBreakoutMode),
-        iconBefore: breakoutMode === BREAKOUT_MODE.FULL_WIDTH ? /*#__PURE__*/React.createElement(CollapseIcon, {
+        iconBefore: breakoutMode === BREAKOUT_MODE.FULL_WIDTH ? jsx(CollapseIcon, {
           label: title
-        }) : /*#__PURE__*/React.createElement(ExpandIcon, {
+        }) : jsx(ExpandIcon, {
           label: title
         })
       })));

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.'
   },

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

@@ -15,11 +15,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { isSafeUrl } from '@atlaskit/adf-schema';
 import { titleUrlPairFromNode } from '../utils';
-import { changeSelectedCardToLink } from '../pm-plugins/doc';
+import { changeSelectedCardToLinkFallback } from '../pm-plugins/doc';
 export function Card(SmartCardComponent, UnsupportedComponent) {
-  var _class, _temp;
+  var _class;
 
-  return _temp = _class = /*#__PURE__*/function (_React$Component) {
+  return _class = /*#__PURE__*/function (_React$Component) {
     _inherits(_class, _React$Component);
 
     var _super = _createSuper(_class);
@@ -95,7 +95,7 @@ export function Card(SmartCardComponent, UnsupportedComponent) {
             return;
           }
 
-          changeSelectedCardToLink(undefined, url, true, node, getPos())(view.state, view.dispatch);
+          changeSelectedCardToLinkFallback(undefined, url, true, node, getPos())(view.state, view.dispatch);
           return null;
         } else {
           // Otherwise, render a blue link as fallback (above in render()).
@@ -109,5 +109,5 @@ export function Card(SmartCardComponent, UnsupportedComponent) {
     return _class;
   }(React.Component), _defineProperty(_class, "contextTypes", {
     contextAdapter: PropTypes.object
-  }), _temp;
+  }), _class;
 }

package/dist/esm/plugins/card/pm-plugins/doc.js

@@ -19,6 +19,7 @@ import { shouldReplaceLink } from './shouldReplaceLink';
 import { SMART_LINK_TYPE } from '../../../plugins/analytics/types/node-events';
 import { getLinkCreationAnalyticsEvent } from '../../../plugins/hyperlink/analytics';
 import { unlinkPayload } from '../../../utils/linking-utils';
+import { getFeatureFlags } from '../../feature-flags-context';
 export function insertCard(tr, cardAdf, schema) {
   var inlineCard = schema.nodes.inlineCard; // ED-5638: add an extra space after inline cards to avoid re-rendering them
 
@@ -213,6 +214,43 @@ export var convertHyperlinkToSmartCard = function convertHyperlinkToSmartCard(st
   return queueCards(requests)(state.tr);
 };
 export var changeSelectedCardToLink = function changeSelectedCardToLink(text, href, sendAnalytics, node, pos) {
+  return function (state, dispatch) {
+    var tr;
+
+    if (node && pos) {
+      tr = cardNodeToLinkWithTransaction(state, text, href, node, pos);
+    } else {
+      tr = cardToLinkWithTransaction(state, text, href);
+    }
+
+    var selectedNode = state.selection instanceof NodeSelection && state.selection.node;
+
+    if (sendAnalytics) {
+      if (selectedNode) {
+        var _getFeatureFlags = getFeatureFlags(state),
+            viewChangingExperimentToolbarStyle = _getFeatureFlags.viewChangingExperimentToolbarStyle;
+
+        addAnalytics(state, tr, {
+          action: ACTION.CHANGED_TYPE,
+          actionSubject: ACTION_SUBJECT.SMART_LINK,
+          eventType: EVENT_TYPE.TRACK,
+          attributes: {
+            newType: SMART_LINK_TYPE.URL,
+            previousType: appearanceForNodeType(selectedNode.type),
+            featureFlag: viewChangingExperimentToolbarStyle || 'noChange'
+          }
+        });
+      }
+    }
+
+    if (dispatch) {
+      dispatch(tr.scrollIntoView());
+    }
+
+    return true;
+  };
+};
+export var changeSelectedCardToLinkFallback = function changeSelectedCardToLinkFallback(text, href, sendAnalytics, node, pos) {
   return function (state, dispatch) {
     var tr;
 
@@ -224,11 +262,11 @@ export var changeSelectedCardToLink = function changeSelectedCardToLink(text, hr
 
     if (sendAnalytics) {
       addAnalytics(state, tr, {
-        action: ACTION.CHANGED_TYPE,
+        action: ACTION.ERRORED,
         actionSubject: ACTION_SUBJECT.SMART_LINK,
-        eventType: EVENT_TYPE.TRACK,
+        eventType: EVENT_TYPE.OPERATIONAL,
         attributes: {
-          newType: SMART_LINK_TYPE.URL
+          error: 'Smart card falling back to link.'
         }
       });
     }
@@ -326,13 +364,18 @@ export var setSelectedCardAppearance = function setSelectedCardAppearance(appear
     var from = state.selection.from;
     var nodeType = getLinkNodeType(appearance, state.schema.nodes);
     var tr = state.tr.setNodeMarkup(from, nodeType, attrs, selectedNode.marks);
+
+    var _getFeatureFlags2 = getFeatureFlags(state),
+        viewChangingExperimentToolbarStyle = _getFeatureFlags2.viewChangingExperimentToolbarStyle;
+
     addAnalytics(state, tr, {
       action: ACTION.CHANGED_TYPE,
       actionSubject: ACTION_SUBJECT.SMART_LINK,
       eventType: EVENT_TYPE.TRACK,
       attributes: {
         newType: appearance,
-        previousType: appearanceForNodeType(selectedNode.type)
+        previousType: appearanceForNodeType(selectedNode.type),
+        featureFlag: viewChangingExperimentToolbarStyle || 'noChange'
       }
     });