@atlaskit/editor-core 153.1.4 → 156.0.0

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

@@ -0,0 +1,89 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.cardKeymap = cardKeymap;
+
+var _prosemirrorKeymap = require("prosemirror-keymap");
+
+var _prosemirrorState = require("prosemirror-state");
+
+var keymaps = _interopRequireWildcard(require("../../../keymaps"));
+
+var _prosemirrorUtils = require("prosemirror-utils");
+
+var _utils = require("@atlaskit/editor-common/utils");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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 (!(0, _prosemirrorUtils.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 || (0, _prosemirrorUtils.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 _prosemirrorState.NodeSelection(state.doc.resolve(pos))));
+      return true;
+    }
+
+    return false;
+  };
+};
+
+function cardKeymap(featureFlags) {
+  var list = {}; // https://bugs.chromium.org/p/chromium/issues/detail?id=1227468 introduced since Chrome 91
+
+  if (_utils.browser.chrome && _utils.browser.chrome_version > 90 && featureFlags.chromeCursorHandlerFixedVersion && _utils.browser.chrome_version < featureFlags.chromeCursorHandlerFixedVersion) {
+    keymaps.bindKeymapWithCommand(keymaps.moveUp.common, selectAboveBelowInlineCard('up'), list);
+    keymaps.bindKeymapWithCommand(keymaps.moveDown.common, selectAboveBelowInlineCard('down'), list);
+  }
+
+  return (0, _prosemirrorKeymap.keymap)(list);
+}

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

@@ -13,7 +13,7 @@ Object.defineProperty(exports, "pluginKey", {
   }
 });
 
-var _prosemirrorState = require("prosemirror-state");
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
 
@@ -42,7 +42,7 @@ var createPlugin = function createPlugin(options) {
         useAlternativePreloader = options.useAlternativePreloader,
         fullWidthMode = options.fullWidthMode,
         createAnalyticsEvent = options.createAnalyticsEvent;
-    return new _prosemirrorState.Plugin({
+    return new _safePlugin.SafePlugin({
       state: {
         init: function init() {
           return {
@@ -123,8 +123,7 @@ var createPlugin = function createPlugin(options) {
         nodeViews: {
           inlineCard: function inlineCard(node, view, getPos) {
             var reactComponentProps = {
-              useAlternativePreloader: useAlternativePreloader,
-              useInlineWrapper: platform === 'mobile'
+              useAlternativePreloader: useAlternativePreloader
             };
             var hasIntlContext = true;
             return new _inlineCard.InlineCard(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, undefined, true, undefined, hasIntlContext).init();

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

@@ -15,9 +15,9 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _styles = require("@atlaskit/editor-common/styles");
 
 var _templateObject;
 
-var smartCardStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    max-width: calc(100% - 20px);\n    vertical-align: top;\n    word-break: break-all;\n\n    .card {\n      padding-left: 2px;\n      padding-right: 2px;\n\n      .", " > a:focus {\n        ", "\n      }\n    }\n\n    &.", "\n      .", "\n      > a {\n      ", "\n    }\n    .", " > a {\n      /* EDM-1717: box-shadow Safari fix start */\n      z-index: 1;\n      position: relative;\n      /* EDM-1717: box-shadow Safari fix end */\n    }\n\n    &.danger {\n      .", " > a {\n        box-shadow: 0 0 0 1px ", ";\n        /* EDM-1717: box-shadow Safari fix start */\n        z-index: 2;\n        /* EDM-1717: box-shadow Safari fix end */\n      }\n    }\n  }\n\n  .", " {\n    .", " > div {\n      cursor: pointer;\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    &.", "\n      .", "\n      > div {\n      ", "\n    }\n\n    &.danger {\n      .", " > div {\n        box-shadow: 0 0 0 1px ", " !important;\n      }\n    }\n  }\n\n  .", " {\n    .", " > div {\n      cursor: pointer;\n      &::after {\n        transition: box-shadow 0s;\n      }\n    }\n    &.", "\n      .", "\n      > div {\n      ", "\n    }\n\n    &.", "\n      .", "\n      > div::after {\n      ", "\n    }\n\n    &.danger {\n      .media-card-frame::after {\n        box-shadow: 0 0 0 1px ", " !important;\n        background: ", " !important;\n      }\n      .richMedia-resize-handle-right::after,\n      .richMedia-resize-handle-left::after {\n        background: ", ";\n      }\n    }\n  }\n"])), _editorCommon.SmartCardSharedCssClassName.INLINE_CARD_CONTAINER, _editorCommon.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _editorSharedStyles.akEditorSelectedNodeClassName, _editorCommon.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _editorCommon.SmartCardSharedCssClassName.LOADER_WRAPPER, _editorCommon.SmartCardSharedCssClassName.LOADER_WRAPPER, _editorSharedStyles.akEditorDeleteBorder, _editorCommon.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _editorCommon.SmartCardSharedCssClassName.LOADER_WRAPPER, _colors.N20, _editorSharedStyles.akEditorSelectedNodeClassName, _editorCommon.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _editorCommon.SmartCardSharedCssClassName.LOADER_WRAPPER, _editorSharedStyles.akEditorDeleteBorder, _editorCommon.SmartCardSharedCssClassName.EMBED_CARD_CONTAINER, _editorCommon.SmartCardSharedCssClassName.LOADER_WRAPPER, _editorSharedStyles.akEditorSelectedNodeClassName, _editorCommon.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _editorSharedStyles.akEditorSelectedNodeClassName, _editorCommon.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _editorSharedStyles.akEditorDeleteBorder, _editorSharedStyles.akEditorDeleteBackground, _editorSharedStyles.akEditorDeleteBorder);
+var smartCardStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    max-width: calc(100% - 20px);\n    vertical-align: top;\n    word-break: break-all;\n\n    .card {\n      padding-left: 2px;\n      padding-right: 2px;\n\n      .", " > a:focus {\n        ", "\n      }\n    }\n\n    &.", "\n      .", "\n      > a {\n      ", "\n    }\n    .", " > a {\n      /* EDM-1717: box-shadow Safari fix start */\n      z-index: 1;\n      position: relative;\n      /* EDM-1717: box-shadow Safari fix end */\n    }\n\n    &.danger {\n      .", " > a {\n        box-shadow: 0 0 0 1px ", ";\n        /* EDM-1717: box-shadow Safari fix start */\n        z-index: 2;\n        /* EDM-1717: box-shadow Safari fix end */\n      }\n    }\n  }\n\n  .", " {\n    .", " > div {\n      cursor: pointer;\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    &.", "\n      .", "\n      > div {\n      ", "\n    }\n\n    &.danger {\n      .", " > div {\n        box-shadow: 0 0 0 1px ", " !important;\n      }\n    }\n  }\n\n  .", " {\n    .", " > div {\n      cursor: pointer;\n      &::after {\n        transition: box-shadow 0s;\n      }\n    }\n    &.", "\n      .", "\n      > div {\n      ", "\n    }\n\n    &.", "\n      .", "\n      > div::after {\n      ", "\n    }\n\n    &.danger {\n      .media-card-frame::after {\n        box-shadow: 0 0 0 1px ", " !important;\n        background: ", " !important;\n      }\n      .richMedia-resize-handle-right::after,\n      .richMedia-resize-handle-left::after {\n        background: ", ";\n      }\n    }\n  }\n"])), _styles.SmartCardSharedCssClassName.INLINE_CARD_CONTAINER, _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _editorSharedStyles.akEditorSelectedNodeClassName, _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, _editorSharedStyles.akEditorDeleteBorder, _styles.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, _colors.N20, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, _editorSharedStyles.akEditorDeleteBorder, _styles.SmartCardSharedCssClassName.EMBED_CARD_CONTAINER, _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _editorSharedStyles.akEditorSelectedNodeClassName, _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _editorSharedStyles.akEditorDeleteBorder, _editorSharedStyles.akEditorDeleteBackground, _editorSharedStyles.akEditorDeleteBorder);
 exports.smartCardStyles = smartCardStyles;

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

@@ -35,7 +35,7 @@ var _doc = require("./pm-plugins/doc");
 
 var _main = require("./pm-plugins/main");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _styles = require("@atlaskit/editor-common/styles");
 
 var _EditLinkToolbar = require("./ui/EditLinkToolbar");
 
@@ -288,7 +288,7 @@ var floatingToolbar = function floatingToolbar(cardOptions, platform) {
         }
 
         if (isEmbedCard) {
-          return element.querySelector(".".concat(_editorCommon.richMediaClassName));
+          return element.querySelector(".".concat(_styles.richMediaClassName));
         }
 
         return element;

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

@@ -37,6 +37,12 @@ var _messages = require("../messages");
 
 var _messages2 = _interopRequireDefault(require("../../../messages"));
 
+var _featureFlagsContext = require("../../../plugins/feature-flags-context");
+
+var _LinkToolbarIconDropdown = _interopRequireDefault(require("./LinkToolbarIconDropdown"));
+
+var _LinkToolbarButtonGroup = _interopRequireDefault(require("./LinkToolbarButtonGroup"));
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
 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; } }
@@ -119,6 +125,21 @@ var LinkToolbarAppearance = /*#__PURE__*/function (_React$Component) {
         options.push(embedOption);
       }
 
+      var _getFeatureFlags = (0, _featureFlagsContext.getFeatureFlags)(editorState),
+          viewChangingExperimentToolbarStyle = _getFeatureFlags.viewChangingExperimentToolbarStyle;
+
+      if (viewChangingExperimentToolbarStyle === 'toolbarIcons') {
+        return /*#__PURE__*/_react.default.createElement(_LinkToolbarButtonGroup.default, {
+          key: "link-toolbar-button-group"
+        });
+      }
+
+      if (viewChangingExperimentToolbarStyle === 'newDropdown') {
+        return /*#__PURE__*/_react.default.createElement(_LinkToolbarIconDropdown.default, {
+          key: "link-toolbar-icon-dropdown"
+        });
+      }
+
       return /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
         key: 'link-toolbar',
         buttonTestId: "link-toolbar-appearance-button",

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

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var LinkToolbarButtonGroup = function LinkToolbarButtonGroup(_ref) {
+  (0, _objectDestructuringEmpty2.default)(_ref);
+  return /*#__PURE__*/_react.default.createElement("span", null);
+};
+
+var _default = LinkToolbarButtonGroup;
+exports.default = _default;

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

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var LinkToolbarIconDropdown = function LinkToolbarIconDropdown(_ref) {
+  (0, _objectDestructuringEmpty2.default)(_ref);
+  return /*#__PURE__*/_react.default.createElement("span", null);
+};
+
+var _default = LinkToolbarIconDropdown;
+exports.default = _default;

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

@@ -27,7 +27,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _prosemirrorUtils = require("prosemirror-utils");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _ui = require("@atlaskit/editor-common/ui");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
@@ -41,6 +41,8 @@ var _utils = require("../../../ui/Resizer/utils");
 
 var _mediaSingle = require("../../../plugins/media/utils/media-single");
 
+var _styled2 = require("./styled");
+
 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(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; }
@@ -71,7 +73,7 @@ var ResizableEmbedCard = /*#__PURE__*/function (_React$Component) {
       var _this$props = _this.props,
           layout = _this$props.layout,
           state = _this$props.view.state;
-      var newPct = (0, _editorCommon.calcPctFromPx)(newWidth, _this.props.lineLength) * 100;
+      var newPct = (0, _ui.calcPctFromPx)(newWidth, _this.props.lineLength) * 100;
 
       _this.setState({
         resizedPctWidth: newPct
@@ -108,7 +110,7 @@ var ResizableEmbedCard = /*#__PURE__*/function (_React$Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calcColumnLeftOffset", function () {
       var offsetLeft = _this.state.offsetLeft;
-      return _this.insideInlineLike ? (0, _editorCommon.calcColumnsFromPx)(offsetLeft, _this.props.lineLength, _this.props.gridSize) : 0;
+      return _this.insideInlineLike ? (0, _ui.calcColumnsFromPx)(offsetLeft, _this.props.lineLength, _this.props.gridSize) : 0;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calcPxWidth", function (useLayout) {
       var _this$props2 = _this.props,
@@ -156,7 +158,7 @@ var ResizableEmbedCard = /*#__PURE__*/function (_React$Component) {
           layout = _this$props3.layout,
           lineLength = _this$props3.lineLength,
           gridSize = _this$props3.gridSize;
-      var columns = (0, _editorCommon.calcColumnsFromPx)(snapWidth, lineLength, gridSize);
+      var columns = (0, _ui.calcColumnsFromPx)(snapWidth, lineLength, gridSize);
       var columnWidth = Math.round(columns);
       var highlight = [];
 
@@ -189,7 +191,7 @@ var ResizableEmbedCard = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "wrappedLayout",
     get: function get() {
-      return _editorCommon.wrappedLayouts.indexOf(this.props.layout) > -1;
+      return _ui.wrappedLayouts.indexOf(this.props.layout) > -1;
     }
   }, {
     key: "UNSAFE_componentWillReceiveProps",
@@ -208,7 +210,7 @@ var ResizableEmbedCard = /*#__PURE__*/function (_React$Component) {
     value: function checkLayout(oldLayout, newLayout) {
       var resizedPctWidth = this.state.resizedPctWidth;
 
-      if (_editorCommon.wrappedLayouts.indexOf(oldLayout) > -1 && newLayout === 'center' && resizedPctWidth) {
+      if (_ui.wrappedLayouts.indexOf(oldLayout) > -1 && newLayout === 'center' && resizedPctWidth) {
         var layout = this.calcUnwrappedLayout(resizedPctWidth, this.calcPxWidth(newLayout));
         this.props.updateSize(resizedPctWidth, layout);
       }
@@ -274,12 +276,12 @@ var ResizableEmbedCard = /*#__PURE__*/function (_React$Component) {
       var snapTargets = [];
 
       for (var i = 0; i < this.gridWidth; i++) {
-        snapTargets.push((0, _editorCommon.calcPxFromColumns)(i, lineLength, this.gridWidth) - offsetLeft);
+        snapTargets.push((0, _ui.calcPxFromColumns)(i, lineLength, this.gridWidth) - offsetLeft);
       } // full width
 
 
       snapTargets.push(lineLength - offsetLeft);
-      var minimumWidth = (0, _editorCommon.calcPxFromColumns)(this.wrappedLayout || this.insideInlineLike ? 1 : 2, lineLength, this.props.gridSize);
+      var minimumWidth = (0, _ui.calcPxFromColumns)(this.wrappedLayout || this.insideInlineLike ? 1 : 2, lineLength, this.props.gridSize);
       var snapPoints = snapTargets.filter(function (width) {
         return width >= minimumWidth;
       });
@@ -396,7 +398,9 @@ var ResizableEmbedCard = /*#__PURE__*/function (_React$Component) {
         }
       });
 
-      return /*#__PURE__*/_react.default.createElement(_styled.Wrapper, {
+      return /*#__PURE__*/_react.default.createElement(_styled2.EmbedSpacing, {
+        "data-testid": "resizable-embed-card-spacing"
+      }, /*#__PURE__*/_react.default.createElement(_styled.Wrapper, {
         layout: layout,
         isResized: !!pctWidth,
         containerWidth: containerWidth || _editorSharedStyles.DEFAULT_EMBED_CARD_WIDTH,
@@ -414,7 +418,7 @@ var ResizableEmbedCard = /*#__PURE__*/function (_React$Component) {
         highlights: this.highlights,
         innerPadding: _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide,
         nodeType: "embed"
-      }), children, this.getHeightDefiningComponent()));
+      }), children, this.getHeightDefiningComponent())));
     }
   }]);
   return ResizableEmbedCard;

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

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconCard = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _icon = _interopRequireDefault(require("@atlaskit/icon"));
+
+var IconCardGlyph = function IconCardGlyph(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
+    width: "32",
+    height: "32",
+    viewBox: "0 0 32 32",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M8 9c-1.10457 0-2 .89543-2 2v10c0 1.1046.89543 2 2 2h16c1.1046 0 2-.8954 2-2V11c0-1.10457-.8954-2-2-2H8Zm0 3c0-.5523.44772-1 1-1h2c.5523 0 1 .4477 1 1v2c0 .5523-.4477 1-1 1H9c-.55228 0-1-.4477-1-1v-2Zm5 1c0-.2761.2239-.5.5-.5h10c.2761 0 .5.2239.5.5s-.2239.5-.5.5h-10c-.2761 0-.5-.2239-.5-.5Zm-4 3c-.55228 0-1 .4477-1 1s.44772 1 1 1h14c.5523 0 1-.4477 1-1s-.4477-1-1-1H9Zm-1 4c0-.5523.44772-1 1-1h6c.5523 0 1 .4477 1 1s-.4477 1-1 1H9c-.55228 0-1-.4477-1-1Z",
+    fill: "#42526E"
+  }));
+};
+
+var IconCard = function IconCard(props) {
+  return /*#__PURE__*/_react.default.createElement(_icon.default, (0, _extends2.default)({
+    glyph: IconCardGlyph
+  }, props));
+};
+
+exports.IconCard = IconCard;

package/dist/cjs/plugins/card/ui/assets/embed.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconEmbed = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _icon = _interopRequireDefault(require("@atlaskit/icon"));
+
+var IconEmbedGlyph = function IconEmbedGlyph(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
+    width: "32",
+    height: "32",
+    viewBox: "0 0 32 32",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M8 6c-1.10457 0-2 .89543-2 2v16c0 1.1046.89543 2 2 2h16c1.1046 0 2-.8954 2-2V8c0-1.10457-.8954-2-2-2H8Zm1 2c-.55228 0-1 .44772-1 1v2c0 .5523.44772 1 1 1h2c.5523 0 1-.4477 1-1V9c0-.55228-.4477-1-1-1H9Zm4.5 1.5c-.2761 0-.5.22386-.5.5 0 .2761.2239.5.5.5h10c.2761 0 .5-.2239.5-.5 0-.27614-.2239-.5-.5-.5h-10ZM9 14c-.55228 0-1 .4477-1 1v8c0 .5523.44772 1 1 1h14c.5523 0 1-.4477 1-1v-8c0-.5523-.4477-1-1-1H9Zm6 2.5c0 .8284-.6716 1.5-1.5 1.5s-1.5-.6716-1.5-1.5.6716-1.5 1.5-1.5 1.5.6716 1.5 1.5Zm0 5.5-1-1-2 2h8v-1.8L18 19l-3 3Z",
+    fill: "#42526E"
+  }));
+};
+
+var IconEmbed = function IconEmbed(props) {
+  return /*#__PURE__*/_react.default.createElement(_icon.default, (0, _extends2.default)({
+    glyph: IconEmbedGlyph
+  }, props));
+};
+
+exports.IconEmbed = IconEmbed;

package/dist/cjs/plugins/card/ui/assets/inline.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconInline = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _icon = _interopRequireDefault(require("@atlaskit/icon"));
+
+var IconInlineGlyph = function IconInlineGlyph(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
+    width: "32",
+    height: "32",
+    viewBox: "0 0 32 32",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M8 12c-1.10457 0-2 .8954-2 2v4c0 1.1046.89543 2 2 2h16c1.1046 0 2-.8954 2-2v-4c0-1.1046-.8954-2-2-2H8Zm0 3c0-.5523.44772-1 1-1h2c.5523 0 1 .4477 1 1v2c0 .5523-.4477 1-1 1H9c-.55228 0-1-.4477-1-1v-2Zm5 1c0-.2761.2239-.5.5-.5h10c.2761 0 .5.2239.5.5s-.2239.5-.5.5h-10c-.2761 0-.5-.2239-.5-.5Z",
+    fill: "#42526E"
+  }));
+};
+
+var IconInline = function IconInline(props) {
+  return /*#__PURE__*/_react.default.createElement(_icon.default, (0, _extends2.default)({
+    glyph: IconInlineGlyph
+  }, props));
+};
+
+exports.IconInline = IconInline;

package/dist/cjs/plugins/card/ui/assets/url.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconUrl = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _icon = _interopRequireDefault(require("@atlaskit/icon"));
+
+var IconUrlGlyph = function IconUrlGlyph(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
+    width: "32",
+    height: "32",
+    viewBox: "0 0 32 32",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/_react.default.createElement("rect", {
+    x: "6",
+    y: "15",
+    width: "20",
+    height: "2",
+    rx: "1",
+    fill: "#42526E"
+  }));
+};
+
+var IconUrl = function IconUrl(props) {
+  return /*#__PURE__*/_react.default.createElement(_icon.default, (0, _extends2.default)({
+    glyph: IconUrlGlyph
+  }, props));
+};
+
+exports.IconUrl = IconUrl;

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

@@ -2,16 +2,26 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.embedCardStyles = void 0;
+exports.embedCardStyles = exports.EmbedSpacing = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = require("styled-components");
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _templateObject, _templateObject2;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-var _templateObject;
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var embedCardStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    .embedCardView-content-wrap[layout^='wrap-'] {\n      max-width: 100%;\n    }\n\n    .embedCardView-content-wrap[layout='wrap-left'] {\n      float: left;\n    }\n\n    .embedCardView-content-wrap[layout='wrap-right'] {\n      float: right;\n    }\n\n    .embedCardView-content-wrap[layout='wrap-right']\n      + .embedCardView-content-wrap[layout='wrap-left'] {\n      clear: both;\n    }\n  }\n"])));
-exports.embedCardStyles = embedCardStyles;
+exports.embedCardStyles = embedCardStyles;
+
+var EmbedSpacing = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 10px;\n"])));
+
+exports.EmbedSpacing = EmbedSpacing;

package/dist/cjs/plugins/clear-marks-on-change-to-empty-document/index.js

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.createPlugin = createPlugin;
 exports.pluginKey = exports.default = void 0;
 
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+
 var _prosemirrorState = require("prosemirror-state");
 
 var _utils = require("../../utils");
@@ -14,7 +16,7 @@ var pluginKey = new _prosemirrorState.PluginKey('clearMarksOnChangeToEmptyDocume
 exports.pluginKey = pluginKey;
 
 function createPlugin() {
-  return new _prosemirrorState.Plugin({
+  return new _safePlugin.SafePlugin({
     key: pluginKey,
     appendTransaction: function appendTransaction(_transactions, oldState, newState) {
       // ED-2973: When a user clears the editor's content, remove the current active marks

package/dist/cjs/plugins/clipboard/pm-plugins/main.js

@@ -9,6 +9,8 @@ exports.sendClipboardAnalytics = exports.createPlugin = void 0;
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+
 var _prosemirrorState = require("prosemirror-state");
 
 var _pluginKey = require("../plugin-key");
@@ -19,7 +21,7 @@ var _enums = require("../../analytics/types/enums");
 
 var createPlugin = function createPlugin(_ref) {
   var dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent;
-  return new _prosemirrorState.Plugin({
+  return new _safePlugin.SafePlugin({
     key: _pluginKey.clipboardPluginKey,
     props: {
       handleDOMEvents: {

package/dist/cjs/plugins/code-bidi-warning/pm-plugins/main.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createPlugin = void 0;
 
-var _prosemirrorState = require("prosemirror-state");
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 
 var _messages = require("@atlaskit/editor-common/messages");
 
@@ -19,7 +19,7 @@ var createPlugin = function createPlugin(_ref, _ref2) {
   var appearance = _ref2.appearance;
   var intl = getIntl();
   var codeBidiWarningLabel = intl.formatMessage(_messages.codeBidiWarningMessages.label);
-  return new _prosemirrorState.Plugin({
+  return new _safePlugin.SafePlugin({
     key: _pluginKey.codeBidiWarningPluginKey,
     state: (0, _pluginFactory.createPluginState)(dispatch, function (state) {
       // The appearance being mobile indicates we are in an editor being

package/dist/cjs/plugins/code-block/index.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _adfSchema = require("@atlaskit/adf-schema");
@@ -27,6 +29,10 @@ var _messages = require("../block-type/messages");
 
 var _refreshBrowserSelection = _interopRequireDefault(require("./refresh-browser-selection"));
 
+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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(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; }
+
 var codeBlockPlugin = function codeBlockPlugin(options) {
   return {
     name: 'codeBlock',
@@ -41,11 +47,10 @@ var codeBlockPlugin = function codeBlockPlugin(options) {
         name: 'codeBlock',
         plugin: function plugin(_ref) {
           var getIntl = _ref.getIntl;
-          return (0, _main.createPlugin)({
-            useLongPressSelection: options.useLongPressSelection,
+          return (0, _main.createPlugin)(_objectSpread(_objectSpread({}, options), {}, {
             getIntl: getIntl,
             appearance: options.appearance
-          });
+          }));
         }
       }, {
         name: 'codeBlockIDEKeyBindings',

package/dist/cjs/plugins/code-block/pm-plugins/ide-ux.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+
 var _prosemirrorState = require("prosemirror-state");
 
 var _prosemirrorKeymap = require("prosemirror-keymap");
@@ -25,7 +27,7 @@ var _lineHandling = require("../ide-ux/line-handling");
 
 var _commands2 = require("../ide-ux/commands");
 
-var _default = new _prosemirrorState.Plugin({
+var _default = new _safePlugin.SafePlugin({
   props: {
     handleTextInput: function handleTextInput(view, from, to, text) {
       var state = view.state,

package/dist/cjs/plugins/code-block/pm-plugins/keymaps.js

@@ -16,7 +16,7 @@ var _utils = require("../../../utils");
 
 var deleteCurrentItem = function deleteCurrentItem($from) {
   return function (tr) {
-    return tr.delete($from.before($from.depth) - 1, $from.end($from.depth) + 1);
+    return tr.delete($from.before($from.depth), $from.after($from.depth));
   };
 };