@atlaskit/editor-core 154.0.0 → 155.0.0

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

@@ -39,5 +39,45 @@ export const 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/es2019/plugins/card/nodeviews/blockCard.js

@@ -5,8 +5,7 @@ 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/ui';
 export class BlockCardComponent extends React.PureComponent {
@@ -96,7 +95,7 @@ _defineProperty(BlockCardComponent, "contextTypes", {
 });
 
 const WrappedBlockCard = Card(BlockCardComponent, UnsupportedBlock);
-export class BlockCard extends ReactNodeView {
+export class BlockCard extends GenericCard {
   createDomRef() {
     const domRef = document.createElement('div');
 

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

@@ -8,6 +8,7 @@ import { Card } from './genericCard';
 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';
@@ -302,6 +303,13 @@ _defineProperty(EmbedCardComponent, "contextTypes", {
 
 const WrappedBlockCard = Card(EmbedCardComponent, UnsupportedBlock);
 export class EmbedCard extends SelectionBasedNodeView {
+  init() {
+    super.init(); // 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;
+  }
+
   viewShouldUpdate(nextNode) {
     if (this.node.attrs !== nextNode.attrs) {
       return true;

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

@@ -3,8 +3,10 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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;
 
@@ -41,6 +43,7 @@ export function Card(SmartCardComponent, UnsupportedComponent) {
 
       const cardContext = this.context.contextAdapter ? this.context.contextAdapter.card : undefined;
       return /*#__PURE__*/React.createElement(SmartCardComponent, _extends({
+        key: url,
         cardContext: cardContext
       }, this.props));
     }
@@ -68,7 +71,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()).
@@ -81,4 +84,13 @@ export function Card(SmartCardComponent, UnsupportedComponent) {
   }, _defineProperty(_class, "contextTypes", {
     contextAdapter: PropTypes.object
   }), _temp;
+}
+export class GenericCard extends ReactNodeView {
+  init() {
+    super.init(); // 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;
+  }
+
 }

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

@@ -6,10 +6,8 @@ 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 class InlineCardComponent extends React.PureComponent {
   constructor(...args) {
     super(...args);
@@ -84,12 +82,8 @@ _defineProperty(InlineCardComponent, "contextTypes", {
 });
 
 const WrappedInlineCard = Card(InlineCardComponent, UnsupportedInline);
-export class InlineCard extends ReactNodeView {
+export class InlineCard extends GenericCard {
   createDomRef() {
-    if (this.reactComponentProps.useInlineWrapper) {
-      return createMobileInlineDomRef();
-    }
-
     return super.createDomRef({
       displayInlineBlockForInlineNodes: false
     });
@@ -97,12 +91,9 @@ export class InlineCard extends ReactNodeView {
 
   render() {
     const {
-      useInlineWrapper,
       useAlternativePreloader
     } = this.reactComponentProps;
-    return /*#__PURE__*/React.createElement(InlineNodeWrapper, {
-      useInlineWrapper: useInlineWrapper
-    }, /*#__PURE__*/React.createElement(WrappedInlineCard, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(WrappedInlineCard, {
       node: this.node,
       view: this.view,
       getPos: this.getPos,

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

@@ -12,6 +12,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) {
   const {
     inlineCard
@@ -207,13 +208,49 @@ export const changeSelectedCardToLink = (text, href, sendAnalytics, node, pos) =
     tr = cardToLinkWithTransaction(state, text, href);
   }
 
+  const selectedNode = state.selection instanceof NodeSelection && state.selection.node;
+
+  if (sendAnalytics) {
+    if (selectedNode) {
+      const {
+        viewChangingExperimentToolbarStyle
+      } = getFeatureFlags(state);
+      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 const changeSelectedCardToLinkFallback = (text, href, sendAnalytics, node, pos) => (state, dispatch) => {
+  let tr;
+
+  if (node && pos) {
+    tr = cardNodeToLinkWithTransaction(state, text, href, node, pos);
+  } else {
+    tr = cardToLinkWithTransaction(state, text, href);
+  }
+
   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.'
       }
     });
   }
@@ -311,13 +348,18 @@ export const setSelectedCardAppearance = appearance => (state, dispatch) => {
   } = state.selection;
   const nodeType = getLinkNodeType(appearance, state.schema.nodes);
   const tr = state.tr.setNodeMarkup(from, nodeType, attrs, selectedNode.marks);
+  const {
+    viewChangingExperimentToolbarStyle
+  } = getFeatureFlags(state);
   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/es2019/plugins/card/pm-plugins/keymap.js

@@ -0,0 +1,72 @@
+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';
+const lookupPixel = 10;
+
+const getClosestInlineCardPos = (state, editorView, direction) => {
+  var _editorView$posAtCoor;
+
+  const {
+    selection
+  } = state;
+  const {
+    parent
+  } = selection.$from;
+  const inlineCardType = state.schema.nodes.inlineCard;
+
+  if (!flatten(parent, false).some(({
+    node
+  }) => node.type === inlineCardType)) {
+    return null;
+  }
+
+  const coord = editorView.coordsAtPos(selection.$anchor.pos);
+  const 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) {
+    const newNode = state.doc.nodeAt(nearPos);
+
+    if (newNode) {
+      if (newNode.type !== inlineCardType || findChildren(parent, node => node === newNode, false).length === 0 || newNode === selection.node) {
+        return null;
+      }
+
+      return nearPos;
+    }
+  }
+
+  return null;
+};
+
+const selectAboveBelowInlineCard = direction => {
+  return (state, dispatch, editorView) => {
+    if (!editorView || !dispatch) {
+      return false;
+    }
+
+    const 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) {
+  const 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);
+}

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

@@ -1,4 +1,4 @@
-import { Plugin } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import rafSchedule from 'raf-schd';
 import reducer from './reducers';
 import { pluginKey } from './plugin-key';
@@ -21,7 +21,7 @@ export const createPlugin = options => ({
     fullWidthMode,
     createAnalyticsEvent
   } = options;
-  return new Plugin({
+  return new SafePlugin({
     state: {
       init() {
         return {
@@ -102,8 +102,7 @@ export const createPlugin = options => ({
       nodeViews: {
         inlineCard: (node, view, getPos) => {
           const reactComponentProps = {
-            useAlternativePreloader,
-            useInlineWrapper: platform === 'mobile'
+            useAlternativePreloader
           };
           const hasIntlContext = true;
           return new InlineCard(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, undefined, true, undefined, hasIntlContext).init();

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

@@ -7,6 +7,9 @@ import { isSupportedInParent } from '../../../utils/nodes';
 import Dropdown from '../../floating-toolbar/ui/Dropdown';
 import { messages } from '../messages';
 import nodeNames from '../../../messages';
+import { getFeatureFlags } from '../../../plugins/feature-flags-context';
+import LinkToolbarIconDropdown from './LinkToolbarIconDropdown';
+import LinkToolbarButtonGroup from './LinkToolbarButtonGroup';
 export class LinkToolbarAppearance extends React.Component {
   constructor(...args) {
     super(...args);
@@ -73,6 +76,22 @@ export class LinkToolbarAppearance extends React.Component {
         options.push(embedOption);
       }
 
+      const {
+        viewChangingExperimentToolbarStyle
+      } = getFeatureFlags(editorState);
+
+      if (viewChangingExperimentToolbarStyle === 'toolbarIcons') {
+        return /*#__PURE__*/React.createElement(LinkToolbarButtonGroup, {
+          key: "link-toolbar-button-group"
+        });
+      }
+
+      if (viewChangingExperimentToolbarStyle === 'newDropdown') {
+        return /*#__PURE__*/React.createElement(LinkToolbarIconDropdown, {
+          key: "link-toolbar-icon-dropdown"
+        });
+      }
+
       return /*#__PURE__*/React.createElement(Dropdown, {
         key: 'link-toolbar',
         buttonTestId: "link-toolbar-appearance-button",

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

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const LinkToolbarButtonGroup = ({}) => {
+  return /*#__PURE__*/React.createElement("span", null);
+};
+
+export default LinkToolbarButtonGroup;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const LinkToolbarIconDropdown = ({}) => {
+  return /*#__PURE__*/React.createElement("span", null);
+};
+
+export default LinkToolbarIconDropdown;

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

@@ -9,6 +9,7 @@ import { Wrapper } from '../../../ui/Resizer/styled';
 import Resizer from '../../../ui/Resizer';
 import { handleSides, imageAlignmentMap, snapTo } from '../../../ui/Resizer/utils';
 import { calcMediaPxWidth } from '../../../plugins/media/utils/media-single';
+import { EmbedSpacing } from './styled';
 export default class ResizableEmbedCard extends React.Component {
   constructor(...args) {
     super(...args);
@@ -351,7 +352,9 @@ export default class ResizableEmbedCard extends React.Component {
         enable[side] = false;
       }
     });
-    return /*#__PURE__*/React.createElement(Wrapper, {
+    return /*#__PURE__*/React.createElement(EmbedSpacing, {
+      "data-testid": "resizable-embed-card-spacing"
+    }, /*#__PURE__*/React.createElement(Wrapper, {
       layout: layout,
       isResized: !!pctWidth,
       containerWidth: containerWidth || DEFAULT_EMBED_CARD_WIDTH,
@@ -367,7 +370,7 @@ export default class ResizableEmbedCard extends React.Component {
       highlights: this.highlights,
       innerPadding: akEditorMediaResizeHandlerPaddingWide,
       nodeType: "embed"
-    }), children, this.getHeightDefiningComponent()));
+    }), children, this.getHeightDefiningComponent())));
   }
 
 }

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

@@ -0,0 +1,24 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import Icon from '@atlaskit/icon';
+
+const IconCardGlyph = props => {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: "32",
+    height: "32",
+    viewBox: "0 0 32 32",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React.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"
+  }));
+};
+
+export const IconCard = props => {
+  return /*#__PURE__*/React.createElement(Icon, _extends({
+    glyph: IconCardGlyph
+  }, props));
+};

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

@@ -0,0 +1,24 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import Icon from '@atlaskit/icon';
+
+const IconEmbedGlyph = props => {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: "32",
+    height: "32",
+    viewBox: "0 0 32 32",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React.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"
+  }));
+};
+
+export const IconEmbed = props => {
+  return /*#__PURE__*/React.createElement(Icon, _extends({
+    glyph: IconEmbedGlyph
+  }, props));
+};

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

@@ -0,0 +1,24 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import Icon from '@atlaskit/icon';
+
+const IconInlineGlyph = props => {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: "32",
+    height: "32",
+    viewBox: "0 0 32 32",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React.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"
+  }));
+};
+
+export const IconInline = props => {
+  return /*#__PURE__*/React.createElement(Icon, _extends({
+    glyph: IconInlineGlyph
+  }, props));
+};

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

@@ -0,0 +1,26 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import Icon from '@atlaskit/icon';
+
+const IconUrlGlyph = props => {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: "32",
+    height: "32",
+    viewBox: "0 0 32 32",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React.createElement("rect", {
+    x: "6",
+    y: "15",
+    width: "20",
+    height: "2",
+    rx: "1",
+    fill: "#42526E"
+  }));
+};
+
+export const IconUrl = props => {
+  return /*#__PURE__*/React.createElement(Icon, _extends({
+    glyph: IconUrlGlyph
+  }, props));
+};

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

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import styled, { css } from 'styled-components';
 export const embedCardStyles = css`
   .ProseMirror {
     .embedCardView-content-wrap[layout^='wrap-'] {
@@ -18,4 +18,7 @@ export const embedCardStyles = css`
       clear: both;
     }
   }
+`;
+export const EmbedSpacing = styled.div`
+  margin: 0 10px;
 `;

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

@@ -1,8 +1,9 @@
-import { Plugin, PluginKey } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from 'prosemirror-state';
 import { isEmptyDocument } from '../../utils';
 export const pluginKey = new PluginKey('clearMarksOnChangeToEmptyDocumentPlugin');
 export function createPlugin() {
-  return new Plugin({
+  return new SafePlugin({
     key: pluginKey,
     appendTransaction: (_transactions, oldState, newState) => {
       // ED-2973: When a user clears the editor's content, remove the current active marks

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

@@ -1,10 +1,11 @@
-import { Plugin, TextSelection } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { TextSelection } from 'prosemirror-state';
 import { clipboardPluginKey } from '../plugin-key';
 import { getNodeSelectionAnalyticsPayload, getAllSelectionAnalyticsPayload, getRangeSelectionAnalyticsPayload, getCellSelectionAnalyticsPayload } from '../../selection/utils';
 import { EVENT_TYPE, ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID } from '../../analytics/types/enums';
 export const createPlugin = ({
   dispatchAnalyticsEvent
-}) => new Plugin({
+}) => new SafePlugin({
   key: clipboardPluginKey,
   props: {
     handleDOMEvents: {

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

@@ -1,4 +1,4 @@
-import { Plugin } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { codeBidiWarningMessages } from '@atlaskit/editor-common/messages';
 import { codeBidiWarningPluginKey } from '../plugin-key';
 import { createBidiWarningsDecorationSetFromDoc, createPluginState, getPluginState } from './plugin-factory';
@@ -10,7 +10,7 @@ export const createPlugin = ({
 }) => {
   const intl = getIntl();
   const codeBidiWarningLabel = intl.formatMessage(codeBidiWarningMessages.label);
-  return new Plugin({
+  return new SafePlugin({
     key: codeBidiWarningPluginKey,
     state: createPluginState(dispatch, state => {
       // The appearance being mobile indicates we are in an editor being

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

@@ -1,4 +1,5 @@
-import { Plugin, TextSelection } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { TextSelection } from 'prosemirror-state';
 import { keydownHandler } from 'prosemirror-keymap';
 import { setTextSelection } from 'prosemirror-utils';
 import { getCursor } from '../../../utils';
@@ -8,7 +9,7 @@ import { getAutoClosingBracketInfo, shouldAutoCloseBracket } from '../ide-ux/bra
 import { getAutoClosingQuoteInfo, shouldAutoCloseQuote } from '../ide-ux/quote-handling';
 import { getEndOfCurrentLine, getStartOfCurrentLine, isCursorInsideCodeBlock, isSelectionEntirelyInsideCodeBlock, getLineInfo } from '../ide-ux/line-handling';
 import { insertIndent, outdent, indent, insertNewlineWithIndent } from '../ide-ux/commands';
-export default new Plugin({
+export default new SafePlugin({
   props: {
     handleTextInput(view, from, to, text) {
       const {

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

@@ -4,7 +4,7 @@ import { findParentNodeOfTypeClosestToPos, hasParentNodeOfType } from 'prosemirr
 import { getCursor, isEmptyNode, pipe } from '../../../utils';
 
 const deleteCurrentItem = $from => 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));
 };
 
 const setTextSelection = pos => tr => {

package/dist/es2019/plugins/code-block/pm-plugins/main.js

@@ -1,4 +1,5 @@
-import { Plugin, NodeSelection } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { NodeSelection } from 'prosemirror-state';
 import { codeBidiWarningMessages } from '@atlaskit/editor-common/messages';
 import { codeBlockNodeView } from '../nodeviews/code-block';
 import { highlightingCodeBlockNodeView } from '../nodeviews/highlighting-code-block';
@@ -31,7 +32,7 @@ export const createPlugin = ({
     };
   }
 
-  return new Plugin({
+  return new SafePlugin({
     state: {
       init(_, state) {
         const node = findCodeBlock(state, state.selection);

package/dist/es2019/plugins/code-block/toolbar.js

@@ -64,7 +64,8 @@ export const getToolbarConfig = (allowCopyToClipboard = false) => (state, {
     title: formatMessage(codeBlockState.contentCopied ? commonMessages.copiedToClipboard : commonMessages.copyToClipboard),
     onMouseLeave: resetCopiedState,
     hideTooltipOnClick: false,
-    disabled: codeBlockState.isNodeSelected
+    disabled: codeBlockState.isNodeSelected,
+    tabIndex: null
   }, separator];
   const deleteButton = {
     id: 'editor.codeBlock.delete',
@@ -76,7 +77,8 @@ export const getToolbarConfig = (allowCopyToClipboard = false) => (state, {
     onFocus: hoverDecoration(nodeType, true),
     onBlur: hoverDecoration(nodeType, false),
     onClick: removeCodeBlock,
-    title: formatMessage(commonMessages.remove)
+    title: formatMessage(commonMessages.remove),
+    tabIndex: null
   };
   return {
     title: 'CodeBlock floating controls',