@atlaskit/editor-core 162.0.1 → 163.0.0

package/dist/esm/plugins/analytics/types/enums.js

@@ -43,6 +43,7 @@ export var ACTION;
   ACTION["RE_RENDERED"] = "reRendered";
   ACTION["ENTERED"] = "entered";
   ACTION["ERRORED"] = "errored";
+  ACTION["EXPOSED"] = "exposed";
   ACTION["FAILED_TO_UNMOUNT"] = "failedToUnmount";
   ACTION["FIND_NEXT_PERFORMED"] = "findNextPerformed";
   ACTION["FIND_PERFORMED"] = "findPerformed";
@@ -158,6 +159,7 @@ export var ACTION_SUBJECT;
   ACTION_SUBJECT["EMBEDS"] = "embeds";
   ACTION_SUBJECT["EXPAND"] = "expand";
   ACTION_SUBJECT["EXTENSION"] = "extension";
+  ACTION_SUBJECT["FEATURE"] = "feature";
   ACTION_SUBJECT["FEEDBACK_DIALOG"] = "feedbackDialog";
   ACTION_SUBJECT["FIND_REPLACE_DIALOG"] = "findReplaceDialog";
   ACTION_SUBJECT["FLOATING_CONTEXTUAL_BUTTON"] = "floatingContextualButton";

package/dist/esm/plugins/avatar-group/ui/AvatarGroupPluginWrapper.js

@@ -1,16 +1,16 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject;
+var _templateObject, _templateObject2;
 
-import React, { useEffect } from 'react';
+/** @jsx jsx */
+import { useEffect } from 'react';
+import { css, jsx } from '@emotion/react';
 import AvatarsWithPluginState from '../../collab-edit/ui/avatars-with-plugin-state';
-import styled from 'styled-components';
 import { useIntl } from 'react-intl-next';
 import { avatarGroupMessages } from '../messages';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID } from '../../analytics';
-var ToolbarButtonWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-grow: ", ";\n  justify-content: flex-end;\n  align-items: center;\n  & > div {\n    margin-right: 0;\n  }\n"])), function (props) {
-  return props.takeFullWidth ? 1 : 0;
-});
+var toolbarButtonWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-end;\n  flex-grow: 0;\n  align-items: center;\n  & > div {\n    margin-right: 0;\n  }\n"])));
+var toolbarButtonWrapperFullWidth = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  flex-grow: 1;\n"])), toolbarButtonWrapper);
 
 var AvatarGroupPluginWrapper = function AvatarGroupPluginWrapper(props) {
   var dispatchAnalyticsEvent = props.dispatchAnalyticsEvent;
@@ -27,11 +27,11 @@ var AvatarGroupPluginWrapper = function AvatarGroupPluginWrapper(props) {
       eventType: EVENT_TYPE.UI
     });
   }, [dispatchAnalyticsEvent]);
-  return /*#__PURE__*/React.createElement(ToolbarButtonWrapper, {
+  return jsx("div", {
     "aria-label": intl.formatMessage(avatarGroupMessages.editors),
     "data-testid": 'avatar-group-in-plugin',
-    takeFullWidth: props.takeFullWidth
-  }, /*#__PURE__*/React.createElement(AvatarsWithPluginState, {
+    css: props.takeFullWidth ? toolbarButtonWrapperFullWidth : toolbarButtonWrapper
+  }, jsx(AvatarsWithPluginState, {
     editorView: props.editorView,
     eventDispatcher: props.eventDispatcher,
     inviteToEditComponent: props.collabEdit && props.collabEdit.inviteToEditComponent,

package/dist/esm/plugins/base/index.js

@@ -34,12 +34,31 @@ var basePlugin = function basePlugin(options) {
           var dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent;
           return filterStepsPlugin(dispatchAnalyticsEvent);
         }
-      }, {
-        name: 'inlineCursorTargetPlugin',
-        plugin: function plugin() {
-          return options && options.allowInlineCursorTarget ? inlineCursorTargetPlugin() : undefined;
-        }
-      }, {
+      }]; // In Chrome, when the selection is placed between adjacent nodes which are not contenteditatble
+      // the cursor appears at the right most point of the parent container.
+      // In Firefox, when the selection is placed between adjacent nodes which are not contenteditatble
+      // no cursor is presented to users.
+      // In Safari, when the selection is placed between adjacent nodes which are not contenteditatble
+      // the cursor appears inside the adjacent nodes.
+      // This plugin workarounds the issues with chrome and firefox by inserting decorations between
+      // inline nodes which are set as contenteditable, and have a zero width space.
+      // At time of development, using this workaround in Safari caused additional issues;
+      // - visual artifacts when moving across inline nodes (ie. using the arrow key to traverse a
+      //   series of inline nodes)
+      // - blocking the right arrow key when at the start of a line from moving to the end of the
+      //   previous line.
+      // As such we only apply the workaround for firefox and chrome.
+
+      if (browser.chrome || browser.gecko) {
+        plugins.push({
+          name: 'inlineCursorTargetPlugin',
+          plugin: function plugin() {
+            return options && options.allowInlineCursorTarget ? inlineCursorTargetPlugin() : undefined;
+          }
+        });
+      }
+
+      plugins.push({
         name: 'focusHandlerPlugin',
         plugin: function plugin(_ref2) {
           var dispatch = _ref2.dispatch;
@@ -98,7 +117,7 @@ var basePlugin = function basePlugin(options) {
               providerFactory = _ref5.providerFactory;
           return betterTypeHistoryPlugin();
         }
-      }];
+      });
 
       if (options && options.allowScrollGutter) {
         plugins.push({

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/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/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'
       }
     });
 

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

@@ -7,13 +7,15 @@ import { getNewRequests, getPluginState, getPluginStateWithUpdatedPos } from './
 import { EmbedCard } from '../nodeviews/embedCard';
 import { BlockCard } from '../nodeviews/blockCard';
 import { InlineCard } from '../nodeviews/inlineCard';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../../../plugins/analytics';
 export { pluginKey } from './plugin-key';
 export var createPlugin = function createPlugin(options) {
   return function (_ref) {
     var portalProviderAPI = _ref.portalProviderAPI,
         eventDispatcher = _ref.eventDispatcher,
         providerFactory = _ref.providerFactory,
-        dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent;
+        dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
+        featureFlags = _ref.featureFlags;
     var platform = options.platform,
         allowResizing = options.allowResizing,
         useAlternativePreloader = options.useAlternativePreloader,
@@ -22,6 +24,18 @@ export var createPlugin = function createPlugin(options) {
     return new SafePlugin({
       state: {
         init: function init() {
+          var viewChangingExperimentToolbarStyle = featureFlags.viewChangingExperimentToolbarStyle;
+          dispatchAnalyticsEvent({
+            eventType: EVENT_TYPE.OPERATIONAL,
+            action: ACTION.EXPOSED,
+            actionSubject: ACTION_SUBJECT.FEATURE,
+            attributes: {
+              flagKey: 'confluence.frontend.fabric.editor.view-changing-experiment-toolbar-style',
+              value: viewChangingExperimentToolbarStyle || 'noChange'
+            },
+            source: '@atlaskit/feature-flag-client',
+            tags: ['measurement']
+          });
           return {
             requests: [],
             provider: null,

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

@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { SelectionStyle, getSelectionStyles, akEditorDeleteBorder, akEditorDeleteBackground } from '@atlaskit/editor-shared-styles';
 import { N20 } from '@atlaskit/theme/colors';
 import { SmartCardSharedCssClassName } from '@atlaskit/editor-common/styles';