@atlaskit/editor-core 153.1.3 → 155.0.0

package/dist/esm/plugins/block-type/pm-plugins/main.js

@@ -1,11 +1,12 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-import { Plugin, PluginKey } from 'prosemirror-state';
-import { browser } from '@atlaskit/editor-common';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from 'prosemirror-state';
+import { browser } from '@atlaskit/editor-common/utils';
 import { NORMAL_TEXT, HEADING_1, HEADING_2, HEADING_3, HEADING_4, HEADING_5, HEADING_6, BLOCK_QUOTE, CODE_BLOCK, PANEL, OTHER, TEXT_BLOCK_TYPES, WRAPPER_BLOCK_TYPES, HEADINGS_BY_LEVEL } from '../types';
 import { areBlockTypesDisabled } from '../../../utils';
 import { setHeadingWithAnalytics, setNormalTextWithAnalytics } from '../commands';
@@ -91,7 +92,7 @@ var autoformatHeading = function autoformatHeading(headingLevel, view) {
 export var pluginKey = new PluginKey('blockTypePlugin');
 export var createPlugin = function createPlugin(dispatch, lastNodeMustBeParagraph) {
   var altKeyLocation = 0;
-  return new Plugin({
+  return new SafePlugin({
     appendTransaction: function appendTransaction(_transactions, _oldState, newState) {
       if (lastNodeMustBeParagraph) {
         var pos = newState.doc.resolve(newState.doc.content.size - 1);

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

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

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

@@ -22,6 +22,8 @@ export var BlockTypeButton = function BlockTypeButton(props) {
     onClick: props.onClick,
     title: labelTextStyles,
     "aria-label": labelTextStyles,
+    "aria-haspopup": true,
+    "aria-expanded": props['aria-expanded'],
     iconAfter: /*#__PURE__*/React.createElement(Wrapper, {
       isSmall: props.isSmall
     }, props.isSmall && /*#__PURE__*/React.createElement(TextStyleIcon, {

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

@@ -67,6 +67,7 @@ var ToolbarBlockType = /*#__PURE__*/function (_React$PureComponent) {
             selected: isActive
           }, /*#__PURE__*/React.createElement(Tag, null, formatMessage(blockType.title))),
           value: blockType,
+          label: formatMessage(blockType.title),
           key: "".concat(blockType.name, "-").concat(index),
           elemAfter: /*#__PURE__*/React.createElement(KeyboardShortcut, {
             selected: isActive
@@ -138,7 +139,8 @@ var ToolbarBlockType = /*#__PURE__*/function (_React$PureComponent) {
           scrollableElement: popupsScrollableElement,
           zIndex: akEditorMenuZIndex,
           fitHeight: 360,
-          fitWidth: 106
+          fitWidth: 106,
+          shouldUseDefaultRole: true
         }, /*#__PURE__*/React.createElement(BlockTypeButton, {
           isSmall: isSmall,
           isReducedSpacing: isReducedSpacing,
@@ -146,7 +148,8 @@ var ToolbarBlockType = /*#__PURE__*/function (_React$PureComponent) {
           disabled: false,
           title: blockTypeTitles[0],
           onClick: this.handleTriggerClick,
-          formatMessage: formatMessage
+          formatMessage: formatMessage,
+          "aria-expanded": active
         }, longestDropdownMenuItem)), /*#__PURE__*/React.createElement(Separator, null));
       }
 
@@ -157,7 +160,8 @@ var ToolbarBlockType = /*#__PURE__*/function (_React$PureComponent) {
         disabled: true,
         title: blockTypeTitles[0],
         onClick: this.handleTriggerClick,
-        formatMessage: formatMessage
+        formatMessage: formatMessage,
+        "aria-expanded": active
       }, longestDropdownMenuItem), /*#__PURE__*/React.createElement(Separator, null));
     }
   }]);

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

@@ -4,7 +4,7 @@ var _templateObject, _templateObject2;
 
 import { N400 } from '@atlaskit/theme/colors';
 import styled from 'styled-components';
-import { headingsSharedStyles } from '@atlaskit/editor-common';
+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

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

@@ -2,14 +2,14 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import React from 'react';
-import { Plugin } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { breakout } from '@atlaskit/adf-schema';
-import { calcBreakoutWidth } from '@atlaskit/editor-common';
+import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
 import WithPluginState from '../../ui/WithPluginState';
 import { pluginKey as widthPluginKey } from '../width';
 import LayoutButton from './ui/LayoutButton';
@@ -98,7 +98,7 @@ function shouldPluginStateUpdate(newBreakoutNode, currentBreakoutNode) {
 function createPlugin(_ref) {
   var dispatch = _ref.dispatch,
       eventDispatcher = _ref.eventDispatcher;
-  return new Plugin({
+  return new SafePlugin({
     state: {
       init: function init() {
         return {

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

@@ -17,7 +17,7 @@ import React from 'react';
 import * as colors from '@atlaskit/theme/colors';
 import { injectIntl } from 'react-intl-next';
 import { findParentDomRefOfType, findDomRefAtPos } from 'prosemirror-utils';
-import { Popup } from '@atlaskit/editor-common';
+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';

package/dist/esm/plugins/caption/nodeviews/index.js

@@ -11,7 +11,7 @@ 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; } }
 
 import React from 'react';
-import { Caption } from '@atlaskit/editor-common';
+import { Caption } from '@atlaskit/editor-common/ui';
 import { SelectionBasedNodeView } from '../../../nodeviews/';
 export var CaptionNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
   _inherits(CaptionNodeView, _SelectionBasedNodeVi);

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

@@ -1,4 +1,4 @@
-import { Plugin } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { findParentNodeOfType } from 'prosemirror-utils';
 import { pluginKey } from './plugin-key';
 import captionNodeView from './../nodeviews';
@@ -14,7 +14,7 @@ var fireAnalytic = function fireAnalytic(state, tr, action) {
 };
 
 export default (function (portalProviderAPI, eventDispatcher, providerFactory, dispatch) {
-  return new Plugin({
+  return new SafePlugin({
     appendTransaction: function appendTransaction(transactions, oldState, newState) {
       // only run for transactions that change selection
       if (!transactions.find(function (tr) {

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

@@ -1,14 +1,15 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import React from 'react';
 import { inlineCard, blockCard, embedCard } from '@atlaskit/adf-schema';
 import { createPlugin } from './pm-plugins/main';
 import { floatingToolbar } from './toolbar';
 import { EditorSmartCardEvents } from './ui/EditorSmartCardEvents';
+import { cardKeymap } from './pm-plugins/keymap';
 
 var cardPlugin = function cardPlugin(options) {
   return {
@@ -37,7 +38,7 @@ var cardPlugin = function cardPlugin(options) {
       var allowBlockCards = (_options$allowBlockCa = options.allowBlockCards) !== null && _options$allowBlockCa !== void 0 ? _options$allowBlockCa : true;
       var allowResizing = (_options$allowResizin = options.allowResizing) !== null && _options$allowResizin !== void 0 ? _options$allowResizin : true;
       var useAlternativePreloader = (_options$useAlternati = options.useAlternativePreloader) !== null && _options$useAlternati !== void 0 ? _options$useAlternati : true;
-      return [{
+      var plugins = [{
         name: 'card',
         plugin: createPlugin(_objectSpread(_objectSpread({}, options), {}, {
           allowBlockCards: allowBlockCards,
@@ -45,9 +46,17 @@ var cardPlugin = function cardPlugin(options) {
           useAlternativePreloader: useAlternativePreloader
         }))
       }];
+      plugins.push({
+        name: 'cardKeymap',
+        plugin: function plugin(_ref) {
+          var featureFlags = _ref.featureFlags;
+          return cardKeymap(featureFlags);
+        }
+      });
+      return plugins;
     },
-    contentComponent: function contentComponent(_ref) {
-      var editorView = _ref.editorView;
+    contentComponent: function contentComponent(_ref2) {
+      var editorView = _ref2.editorView;
       return /*#__PURE__*/React.createElement(EditorSmartCardEvents, {
         editorView: editorView
       });

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

@@ -39,5 +39,45 @@ export var messages = defineMessages({
     id: 'fabric.editor.displayOptionUnavailableInParentNode',
     defaultMessage: "This display option isn't available inside {node}",
     description: 'Warning message to show the user that this node option is not available inside a parent node type'
+  },
+  urlTitle: {
+    id: 'fabric.editor.urlTitle',
+    defaultMessage: 'URL',
+    description: 'Title for option to convert the card to become a regular text-based hyperlink.'
+  },
+  cardTitle: {
+    id: 'fabric.editor.cardTitle',
+    defaultMessage: 'Card',
+    description: 'Title for option to display link in the card view.'
+  },
+  inlineTitle: {
+    id: 'fabric.editor.inlineTitle',
+    defaultMessage: 'Inline',
+    description: 'Title for option to display link in the inline view.'
+  },
+  embedTitle: {
+    id: 'fabric.editor.embedTitle',
+    defaultMessage: 'Embed',
+    description: 'Title for option to display link as an embedded object.'
+  },
+  urlDescription: {
+    id: 'fabric.editor.urlDescription',
+    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',
+    defaultMessage: 'Display more information about a link, including a summary and actions',
+    description: 'Description for option to display link in the card view.'
+  },
+  inlineDescription: {
+    id: 'fabric.editor.inlineDescription',
+    defaultMessage: 'Display link as inline text',
+    description: 'Description for option to display link in the inline view.'
+  },
+  embedDescription: {
+    id: 'fabric.editor.ecombedDescription',
+    defaultMessage: 'Display an interactive preview of a link',
+    description: 'Description for option to display link as an embedded object.'
   }
 });

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

@@ -12,13 +12,13 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import React from 'react';
 import { Card as SmartCard } from '@atlaskit/smart-card';
-import { UnsupportedBlock, browser } from '@atlaskit/editor-common';
+import { UnsupportedBlock } from '@atlaskit/editor-common/ui';
+import { browser } from '@atlaskit/editor-common/utils';
 import PropTypes from 'prop-types';
 import rafSchedule from 'raf-schd';
-import { Card } from './genericCard';
-import { ReactNodeView } from '../../../nodeviews/';
+import { Card, GenericCard } from './genericCard';
 import { registerCard } from '../pm-plugins/actions';
-import { findOverflowScrollParent } from '@atlaskit/editor-common';
+import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
 export var BlockCardComponent = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(BlockCardComponent, _React$PureComponent);
 
@@ -120,8 +120,8 @@ _defineProperty(BlockCardComponent, "contextTypes", {
 });
 
 var WrappedBlockCard = Card(BlockCardComponent, UnsupportedBlock);
-export var BlockCard = /*#__PURE__*/function (_ReactNodeView) {
-  _inherits(BlockCard, _ReactNodeView);
+export var BlockCard = /*#__PURE__*/function (_GenericCard) {
+  _inherits(BlockCard, _GenericCard);
 
   var _super2 = _createSuper(BlockCard);
 
@@ -158,4 +158,4 @@ export var BlockCard = /*#__PURE__*/function (_ReactNodeView) {
   }]);
 
   return BlockCard;
-}(ReactNodeView);
+}(GenericCard);

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

@@ -8,9 +8,9 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -21,8 +21,10 @@ import { Card as SmartCard } from '@atlaskit/smart-card';
 import PropTypes from 'prop-types';
 import rafSchedule from 'raf-schd';
 import { Card } from './genericCard';
-import { UnsupportedBlock, MediaSingle as RichMediaWrapper, browser, findOverflowScrollParent } from '@atlaskit/editor-common';
+import { UnsupportedBlock, MediaSingle as RichMediaWrapper, findOverflowScrollParent } from '@atlaskit/editor-common/ui';
+import { browser } from '@atlaskit/editor-common/utils';
 import { DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
+import { uuid } from '@atlaskit/adf-schema';
 import { SelectionBasedNodeView } from '../../../nodeviews/';
 import { registerCard } from '../pm-plugins/actions';
 import ResizableEmbedCard from '../ui/ResizableEmbedCard';
@@ -338,6 +340,15 @@ export var EmbedCard = /*#__PURE__*/function (_SelectionBasedNodeVi) {
   }
 
   _createClass(EmbedCard, [{
+    key: "init",
+    value: function init() {
+      _get(_getPrototypeOf(EmbedCard.prototype), "init", this).call(this); // localId exists to distinguish between different smart cards for the purpose of analytics
+
+
+      this.node.attrs.localId = this.node.attrs.localId || uuid.generate();
+      return this;
+    }
+  }, {
     key: "viewShouldUpdate",
     value: function viewShouldUpdate(nextNode) {
       if (this.node.attrs !== nextNode.attrs) {

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

@@ -1,3 +1,4 @@
+import _get from "@babel/runtime/helpers/get";
 import _extends from "@babel/runtime/helpers/extends";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
@@ -14,8 +15,10 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import React from 'react';
 import PropTypes from 'prop-types';
 import { isSafeUrl } from '@atlaskit/adf-schema';
+import ReactNodeView from '../../../nodeviews/ReactNodeView';
 import { titleUrlPairFromNode } from '../utils';
-import { changeSelectedCardToLink } from '../pm-plugins/doc';
+import { changeSelectedCardToLinkFallback } from '../pm-plugins/doc';
+import { uuid } from '@atlaskit/adf-schema';
 export function Card(SmartCardComponent, UnsupportedComponent) {
   var _class, _temp;
 
@@ -67,6 +70,7 @@ export function Card(SmartCardComponent, UnsupportedComponent) {
 
         var cardContext = this.context.contextAdapter ? this.context.contextAdapter.card : undefined;
         return /*#__PURE__*/React.createElement(SmartCardComponent, _extends({
+          key: url,
           cardContext: cardContext
         }, this.props));
       }
@@ -94,7 +98,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,4 +113,28 @@ export function Card(SmartCardComponent, UnsupportedComponent) {
   }(React.Component), _defineProperty(_class, "contextTypes", {
     contextAdapter: PropTypes.object
   }), _temp;
-}
+}
+export var GenericCard = /*#__PURE__*/function (_ReactNodeView) {
+  _inherits(GenericCard, _ReactNodeView);
+
+  var _super2 = _createSuper(GenericCard);
+
+  function GenericCard() {
+    _classCallCheck(this, GenericCard);
+
+    return _super2.apply(this, arguments);
+  }
+
+  _createClass(GenericCard, [{
+    key: "init",
+    value: function init() {
+      _get(_getPrototypeOf(GenericCard.prototype), "init", this).call(this); // localId exists to distinguish between different smart cards for the purpose of analytics
+
+
+      this.node.attrs.localId = this.node.attrs.localId || uuid.generate();
+      return this;
+    }
+  }]);
+
+  return GenericCard;
+}(ReactNodeView);

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

@@ -14,13 +14,12 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Card as SmartCard } from '@atlaskit/smart-card';
-import { UnsupportedInline, ZERO_WIDTH_SPACE } from '@atlaskit/editor-common';
-import { findOverflowScrollParent } from '@atlaskit/editor-common';
+import { UnsupportedInline } from '@atlaskit/editor-common/ui';
+import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
+import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
 import rafSchedule from 'raf-schd';
-import { Card } from './genericCard';
-import ReactNodeView from '../../../nodeviews/ReactNodeView';
+import { Card, GenericCard } from './genericCard';
 import { registerCard } from '../pm-plugins/actions';
-import InlineNodeWrapper, { createMobileInlineDomRef } from '../../../ui/InlineNodeWrapper';
 export var InlineCardComponent = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(InlineCardComponent, _React$PureComponent);
 
@@ -109,8 +108,8 @@ _defineProperty(InlineCardComponent, "contextTypes", {
 });
 
 var WrappedInlineCard = Card(InlineCardComponent, UnsupportedInline);
-export var InlineCard = /*#__PURE__*/function (_ReactNodeView) {
-  _inherits(InlineCard, _ReactNodeView);
+export var InlineCard = /*#__PURE__*/function (_GenericCard) {
+  _inherits(InlineCard, _GenericCard);
 
   var _super2 = _createSuper(InlineCard);
 
@@ -123,10 +122,6 @@ export var InlineCard = /*#__PURE__*/function (_ReactNodeView) {
   _createClass(InlineCard, [{
     key: "createDomRef",
     value: function createDomRef() {
-      if (this.reactComponentProps.useInlineWrapper) {
-        return createMobileInlineDomRef();
-      }
-
       return _get(_getPrototypeOf(InlineCard.prototype), "createDomRef", this).call(this, {
         displayInlineBlockForInlineNodes: false
       });
@@ -134,12 +129,8 @@ export var InlineCard = /*#__PURE__*/function (_ReactNodeView) {
   }, {
     key: "render",
     value: function render() {
-      var _this$reactComponentP = this.reactComponentProps,
-          useInlineWrapper = _this$reactComponentP.useInlineWrapper,
-          useAlternativePreloader = _this$reactComponentP.useAlternativePreloader;
-      return /*#__PURE__*/React.createElement(InlineNodeWrapper, {
-        useInlineWrapper: useInlineWrapper
-      }, /*#__PURE__*/React.createElement(WrappedInlineCard, {
+      var useAlternativePreloader = this.reactComponentProps.useAlternativePreloader;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(WrappedInlineCard, {
         node: this.node,
         view: this.view,
         getPos: this.getPos,
@@ -149,4 +140,4 @@ export var InlineCard = /*#__PURE__*/function (_ReactNodeView) {
   }]);
 
   return InlineCard;
-}(ReactNodeView);
+}(GenericCard);

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

@@ -1,9 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import { NodeSelection } from 'prosemirror-state';
 import { Fragment, Slice } from 'prosemirror-model';
@@ -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,44 @@ 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),
+            localId: selectedNode.attrs.localId,
+            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 +263,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 +365,19 @@ 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),
+        localId: selectedNode.attrs.localId,
+        featureFlag: viewChangingExperimentToolbarStyle || 'noChange'
       }
     });
 

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

@@ -0,0 +1,71 @@
+import { keymap } from 'prosemirror-keymap';
+import { NodeSelection } from 'prosemirror-state';
+import * as keymaps from '../../../keymaps';
+import { findChildren, flatten } from 'prosemirror-utils';
+import { browser } from '@atlaskit/editor-common/utils';
+var lookupPixel = 10;
+
+var getClosestInlineCardPos = function getClosestInlineCardPos(state, editorView, direction) {
+  var _editorView$posAtCoor;
+
+  var selection = state.selection;
+  var parent = selection.$from.parent;
+  var inlineCardType = state.schema.nodes.inlineCard;
+
+  if (!flatten(parent, false).some(function (_ref) {
+    var node = _ref.node;
+    return node.type === inlineCardType;
+  })) {
+    return null;
+  }
+
+  var coord = editorView.coordsAtPos(selection.$anchor.pos);
+  var nearPos = (_editorView$posAtCoor = editorView.posAtCoords({
+    left: coord.left,
+    top: direction === 'up' ? coord.top - lookupPixel : coord.bottom + lookupPixel
+  })) === null || _editorView$posAtCoor === void 0 ? void 0 : _editorView$posAtCoor.pos;
+
+  if (nearPos) {
+    var newNode = state.doc.nodeAt(nearPos);
+
+    if (newNode) {
+      if (newNode.type !== inlineCardType || findChildren(parent, function (node) {
+        return node === newNode;
+      }, false).length === 0 || newNode === selection.node) {
+        return null;
+      }
+
+      return nearPos;
+    }
+  }
+
+  return null;
+};
+
+var selectAboveBelowInlineCard = function selectAboveBelowInlineCard(direction) {
+  return function (state, dispatch, editorView) {
+    if (!editorView || !dispatch) {
+      return false;
+    }
+
+    var pos = getClosestInlineCardPos(state, editorView, direction);
+
+    if (pos) {
+      dispatch(state.tr.setSelection(new NodeSelection(state.doc.resolve(pos))));
+      return true;
+    }
+
+    return false;
+  };
+};
+
+export function cardKeymap(featureFlags) {
+  var list = {}; // https://bugs.chromium.org/p/chromium/issues/detail?id=1227468 introduced since Chrome 91
+
+  if (browser.chrome && browser.chrome_version > 90 && featureFlags.chromeCursorHandlerFixedVersion && browser.chrome_version < featureFlags.chromeCursorHandlerFixedVersion) {
+    keymaps.bindKeymapWithCommand(keymaps.moveUp.common, selectAboveBelowInlineCard('up'), list);
+    keymaps.bindKeymapWithCommand(keymaps.moveDown.common, selectAboveBelowInlineCard('down'), list);
+  }
+
+  return keymap(list);
+}