@atlaskit/editor-core 162.0.1 → 163.0.0

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

@@ -2,5 +2,5 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 export var listsStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror li {\n    position: relative;\n\n    > p:not(:first-child) {\n      margin: 4px 0 0 0;\n    }\n  }\n"])));

package/dist/esm/plugins/list/utils/node.js

@@ -106,10 +106,11 @@ export var joinSiblingLists = function joinSiblingLists(_ref) {
 
   for (var i = joins.length - 1; i >= 0; i--) {
     var listNode = tr.doc.nodeAt(joins[i]);
+    var listName = listNode === null || listNode === void 0 ? void 0 : listNode.type.name;
 
-    if (listNode) {
-      var amount = result[listNode.type.name] || 0;
-      result[listNode.type.name] = amount + 1;
+    if (listName && (listName === 'orderedList' || listName === 'bulletList')) {
+      var amount = result[listName] || 0;
+      result[listName] = amount + 1;
     }
 
     tr.join(joins[i]);

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

@@ -2,8 +2,6 @@ import React from 'react';
 import { media, mediaGroup, mediaSingle, mediaSingleWithCaption, mediaInline } from '@atlaskit/adf-schema';
 import { stateKey as pluginKey, createPlugin } from './pm-plugins/main';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
-import { createPlugin as createMediaEditorPlugin } from './pm-plugins/media-editor';
-import { pluginKey as mediaEditorPluginKey } from './pm-plugins/media-editor-plugin-factory';
 import { createPlugin as createMediaAltTextPlugin } from './pm-plugins/alt-text';
 import keymapMediaAltTextPlugin from './pm-plugins/alt-text/keymap';
 import keymapMediaSinglePlugin from './pm-plugins/keymap-media-single';
@@ -17,7 +15,6 @@ import { floatingToolbar as _floatingToolbar } from './toolbar';
 import { addAnalytics, ACTION, ACTION_SUBJECT, INPUT_METHOD, EVENT_TYPE, ACTION_SUBJECT_ID } from '../analytics';
 import { IconImages } from '../quick-insert/assets';
 import WithPluginState from '../../ui/WithPluginState';
-import MediaEditor from './ui/MediaEditor';
 import { MediaPickerComponents } from './ui/MediaPicker';
 import { messages } from '../insert-block/ui/ToolbarInsertBlock/messages';
 import { ReactMediaNode } from './nodeviews/mediaNodeView';
@@ -112,13 +109,6 @@ var mediaPlugin = function mediaPlugin(options) {
         });
       }
 
-      if (options && options.allowAnnotation) {
-        pmPlugins.push({
-          name: 'mediaEditor',
-          plugin: createMediaEditorPlugin
-        });
-      }
-
       if (options && options.allowAltTextOnImages) {
         pmPlugins.push({
           name: 'mediaAltText',
@@ -154,43 +144,26 @@ var mediaPlugin = function mediaPlugin(options) {
     },
     contentComponent: function contentComponent(_ref7) {
       var editorView = _ref7.editorView,
-          eventDispatcher = _ref7.eventDispatcher,
           appearance = _ref7.appearance;
-      // render MediaEditor separately because it doesn't depend on media plugin state
-      // so we can utilise EventDispatcher-based rerendering
-      var mediaEditor = options && options.allowAnnotation ? /*#__PURE__*/React.createElement(WithPluginState, {
-        editorView: editorView,
-        plugins: {
-          mediaEditorState: mediaEditorPluginKey
-        },
-        eventDispatcher: eventDispatcher,
-        render: function render(_ref8) {
-          var mediaEditorState = _ref8.mediaEditorState;
-          return /*#__PURE__*/React.createElement(MediaEditor, {
-            mediaEditorState: mediaEditorState,
-            view: editorView
-          });
-        }
-      }) : null;
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(WithPluginState, {
         editorView: editorView,
         plugins: {
           mediaState: pluginKey
         },
-        render: function render(_ref9) {
-          var mediaState = _ref9.mediaState;
+        render: function render(_ref8) {
+          var mediaState = _ref8.mediaState;
           return /*#__PURE__*/React.createElement(MediaPickerComponents, {
             editorDomElement: editorView.dom,
             mediaState: mediaState,
             appearance: appearance
           });
         }
-      }), mediaEditor);
+      }));
     },
-    secondaryToolbarComponent: function secondaryToolbarComponent(_ref10) {
-      var editorView = _ref10.editorView,
-          eventDispatcher = _ref10.eventDispatcher,
-          disabled = _ref10.disabled;
+    secondaryToolbarComponent: function secondaryToolbarComponent(_ref9) {
+      var editorView = _ref9.editorView,
+          eventDispatcher = _ref9.eventDispatcher,
+          disabled = _ref9.disabled;
       return /*#__PURE__*/React.createElement(ToolbarMedia, {
         editorView: editorView,
         eventDispatcher: eventDispatcher,
@@ -200,8 +173,8 @@ var mediaPlugin = function mediaPlugin(options) {
       });
     },
     pluginsOptions: {
-      quickInsert: function quickInsert(_ref11) {
-        var formatMessage = _ref11.formatMessage;
+      quickInsert: function quickInsert(_ref10) {
+        var formatMessage = _ref10.formatMessage;
         return [{
           id: 'media',
           title: formatMessage(messages.filesAndImages),
@@ -232,7 +205,6 @@ var mediaPlugin = function mediaPlugin(options) {
           allowMediaInline: options && getMediaFeatureFlag('mediaInline', options.featureFlags),
           allowResizing: options && options.allowResizing,
           allowResizingInTables: options && options.allowResizingInTables,
-          allowAnnotation: options && options.allowAnnotation,
           allowLinking: options && options.allowLinking,
           allowAdvancedToolBarOptions: options && options.allowAdvancedToolBarOptions,
           allowAltTextOnImages: options && options.allowAltTextOnImages,

package/dist/esm/plugins/media/pm-plugins/alt-text/ui/AltTextEdit.js

@@ -13,8 +13,9 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
+/** @jsx jsx */
 import React from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { N100, N30, R400, N80 } from '@atlaskit/theme/colors';
 import ChevronLeftLargeIcon from '@atlaskit/icon/glyph/chevron-left-large';
 import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
@@ -33,12 +34,12 @@ import { ErrorMessage } from '@atlaskit/editor-common/ui';
 export var CONTAINER_WIDTH_IN_PX = RECENT_SEARCH_WIDTH_IN_PX;
 export var MAX_ALT_TEXT_LENGTH = 510; // double tweet length
 
-var SupportText = styled.p(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: ", ";\n  padding: 12px 40px;\n  line-height: 20px;\n  border-top: 1px solid ", ";\n  margin: 0;\n"])), N100, relativeFontSizeToBase16(12), N30);
-var Container = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: ", "px;\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n  line-height: 2;\n"])), CONTAINER_WIDTH_IN_PX);
-var InputWrapper = styled.section(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  line-height: 0;\n  padding: 5px 0;\n  align-items: center;\n"])));
-var ValidationWrapper = styled.section(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  line-height: 0;\n  padding: 12px 24px 12px 0;\n  margin: 0 12px 0 40px;\n  border-top: 1px solid ", ";\n  align-items: start;\n  display: flex;\n  flex-direction: column;\n"])), R400);
-var ButtonWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  padding: 4px 8px;\n"])));
-var ClearText = styled.span(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), N80);
+var supportText = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: ", ";\n  padding: 12px 40px;\n  line-height: 20px;\n  border-top: 1px solid ", ";\n  margin: 0;\n"])), N100, relativeFontSizeToBase16(12), N30);
+var container = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: ", "px;\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n  line-height: 2;\n"])), CONTAINER_WIDTH_IN_PX);
+var inputWrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  line-height: 0;\n  padding: 5px 0;\n  align-items: center;\n"])));
+var validationWrapper = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  line-height: 0;\n  padding: 12px 24px 12px 0;\n  margin: 0 12px 0 40px;\n  border-top: 1px solid ", ";\n  align-items: start;\n  flex-direction: column;\n"])), R400);
+var buttonWrapper = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  padding: 4px 8px;\n"])));
+var clearText = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), N80);
 export var AltTextEditComponent = /*#__PURE__*/function (_React$Component) {
   _inherits(AltTextEditComponent, _React$Component);
 
@@ -149,24 +150,30 @@ export var AltTextEditComponent = /*#__PURE__*/function (_React$Component) {
       var formatMessage = this.props.intl.formatMessage;
       var showClearTextButton = this.state.showClearTextButton;
       var backButtonMessage = formatMessage(messages.back);
-      var backButtonMessageComponent = /*#__PURE__*/React.createElement(ToolTipContent, {
+      var backButtonMessageComponent = jsx(ToolTipContent, {
         description: backButtonMessage,
         keymap: keymaps.escape,
         shortcutOverride: "Esc"
       });
       var errorsList = (this.state.validationErrors || []).map(function (error, index) {
-        return /*#__PURE__*/React.createElement(ErrorMessage, {
+        return jsx(ErrorMessage, {
           key: index
         }, error);
       });
-      return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(InputWrapper, null, /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(Button, {
+      return jsx("div", {
+        css: container
+      }, jsx("section", {
+        css: inputWrapper
+      }, jsx("div", {
+        css: buttonWrapper
+      }, jsx(Button, {
         title: formatMessage(messages.back),
-        icon: /*#__PURE__*/React.createElement(ChevronLeftLargeIcon, {
+        icon: jsx(ChevronLeftLargeIcon, {
           label: formatMessage(messages.back)
         }),
         tooltipContent: backButtonMessageComponent,
         onClick: this.closeMediaAltTextMenu
-      })), /*#__PURE__*/React.createElement(PanelTextInput, {
+      })), jsx(PanelTextInput, {
         testId: "alt-text-input",
         ariaLabel: formatMessage(messages.placeholder),
         describedById: "support-text",
@@ -178,15 +185,22 @@ export var AltTextEditComponent = /*#__PURE__*/function (_React$Component) {
         onSubmit: this.closeMediaAltTextMenu,
         maxLength: MAX_ALT_TEXT_LENGTH,
         autoFocus: true
-      }), showClearTextButton && /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(Button, {
+      }), showClearTextButton && jsx("div", {
+        css: buttonWrapper
+      }, jsx(Button, {
         testId: "alt-text-clear-button",
         title: formatMessage(messages.clear),
-        icon: /*#__PURE__*/React.createElement(ClearText, null, /*#__PURE__*/React.createElement(CrossCircleIcon, {
+        icon: jsx("span", {
+          css: clearText
+        }, jsx(CrossCircleIcon, {
           label: formatMessage(messages.clear)
         })),
         tooltipContent: formatMessage(messages.clear),
         onClick: this.handleClearText
-      }))), !!errorsList.length && /*#__PURE__*/React.createElement(ValidationWrapper, null, errorsList), /*#__PURE__*/React.createElement(SupportText, {
+      }))), !!errorsList.length && jsx("section", {
+        css: validationWrapper
+      }, errorsList), jsx("p", {
+        css: supportText,
         id: "support-text"
       }, formatMessage(messages.supportText)));
     }

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

@@ -266,10 +266,6 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
       return type === mediaSingle;
     });
 
-    _defineProperty(this, "hasUserAuthProvider", function () {
-      return !!_this.uploadMediaClientConfig && !!_this.uploadMediaClientConfig.userAuthProvider;
-    });
-
     _defineProperty(this, "insertFile", function (mediaState, onMediaStateChanged, pickerType) {
       var _this$mediaOptions2;
 
@@ -356,11 +352,7 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
     });
 
     _defineProperty(this, "shouldUseMediaPickerPopup", function () {
-      if (!_this.mediaOptions || _this.mediaOptions && _this.mediaOptions.useMediaPickerPopup === undefined) {
-        return _this.hasUserAuthProvider();
-      }
-
-      return !!_this.mediaOptions.useMediaPickerPopup;
+      return false;
     });
 
     _defineProperty(this, "showMediaPicker", function () {

package/dist/esm/plugins/media/pm-plugins/media-editor-plugin-factory.js

@@ -1,59 +1,2 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-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) { _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 { PluginKey } from 'prosemirror-state';
-import { pluginFactory } from '../../../utils/plugin-state-factory';
-export var pluginKey = new PluginKey('mediaEditorPlugin');
-export var reducer = function reducer(state, action) {
-  switch (action.type) {
-    case 'open':
-      return _objectSpread(_objectSpread({}, state), {}, {
-        editor: {
-          identifier: action.identifier,
-          pos: action.pos
-        }
-      });
-
-    case 'close':
-      return _objectSpread(_objectSpread({}, state), {}, {
-        editor: undefined
-      });
-
-    case 'upload':
-      return _objectSpread(_objectSpread({}, state), {}, {
-        editor: undefined
-      });
-
-    case 'setMediaClientConfig':
-      return _objectSpread(_objectSpread({}, state), {}, {
-        mediaClientConfig: action.mediaClientConfig
-      });
-
-    default:
-      return state;
-  }
-};
-
-var _pluginFactory = pluginFactory(pluginKey, reducer, {
-  mapping: function mapping(tr, state) {
-    if (!state.editor) {
-      return state;
-    } // remap the position of the editing media inside the state
-
-
-    // remap the position of the editing media inside the state
-    return _objectSpread(_objectSpread({}, state), {}, {
-      editor: _objectSpread(_objectSpread({}, state.editor), {}, {
-        pos: tr.mapping.map(state.editor.pos)
-      })
-    });
-  }
-}),
-    createPluginState = _pluginFactory.createPluginState,
-    createCommand = _pluginFactory.createCommand,
-    getPluginState = _pluginFactory.getPluginState;
-
-export { createPluginState, createCommand, getPluginState };
+export var pluginKey = new PluginKey('mediaEditorPlugin');

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

@@ -7,7 +7,7 @@ import { mediaSingleSharedStyle, richMediaClassName } from '@atlaskit/editor-com
 import { akEditorDeleteBorder, akEditorDeleteBackground, akEditorSelectedBorderBoldSize, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPadding, akEditorSelectedNodeClassName, akEditorDeleteIconColor } from '@atlaskit/editor-shared-styles';
 import { N60, B200 } from '@atlaskit/theme/colors';
 import { fileCardImageViewSelector, fileCardImageViewSelectedSelector, inlinePlayerClassName, newFileExperienceClassName } from '@atlaskit/media-card';
-export var mediaStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    ", " & [layout='full-width'] .", ",\n    & [layout='wide'] .", " {\n      margin-left: 50%;\n      transform: translateX(-50%);\n    }\n\n    & [layout^='wrap-'] + [layout^='wrap-'] {\n      clear: none;\n      & + p,\n      & + div[class^='fabric-editor-align'],\n      & + ul,\n      & + ol,\n      & + h1,\n      & + h2,\n      & + h3,\n      & + h4,\n      & + h5,\n      & + h6 {\n        clear: both !important;\n      }\n      & .", " {\n        margin-left: 0;\n        margin-right: 0;\n      }\n    }\n\n    .mediaSingleView-content-wrap[layout^='wrap-'] {\n      max-width: 100%;\n      // overwrite default Prosemirror setting making it clear: both\n      clear: inherit;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-left'] {\n      float: left;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right'] {\n      float: right;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right']\n      + .mediaSingleView-content-wrap[layout='wrap-left'] {\n      clear: both;\n    }\n\n    /* Larger margins for resize handlers when at depth 0 of the document */\n    & > .mediaSingleView-content-wrap {\n      .richMedia-resize-handle-right {\n        margin-right: -", "px;\n      }\n      .richMedia-resize-handle-left {\n        margin-left: -", "px;\n      }\n    }\n  }\n\n  .richMedia-resize-handle-right,\n  .richMedia-resize-handle-left {\n    display: flex;\n    flex-direction: column;\n\n    /* vertical align */\n    justify-content: center;\n  }\n\n  .richMedia-resize-handle-right {\n    align-items: flex-end;\n    padding-right: 12px;\n    margin-right: -", "px;\n  }\n\n  .richMedia-resize-handle-left {\n    align-items: flex-start;\n    padding-left: 12px;\n    margin-left: -", "px;\n  }\n\n  .richMedia-resize-handle-right::after,\n  .richMedia-resize-handle-left::after {\n    content: ' ';\n    display: flex;\n    width: 3px;\n    height: 64px;\n\n    border-radius: 6px;\n  }\n\n  .", ":hover .richMedia-resize-handle-left::after,\n  .", ":hover .richMedia-resize-handle-right::after {\n    background: ", ";\n  }\n\n  .", " .richMedia-resize-handle-right::after,\n  .", " .richMedia-resize-handle-left::after,\n  .", " .richMedia-resize-handle-right:hover::after,\n  .", " .richMedia-resize-handle-left:hover::after,\n  .", ".is-resizing .richMedia-resize-handle-right::after,\n  .", ".is-resizing .richMedia-resize-handle-left::after {\n    background: ", ";\n  }\n\n  .__resizable_base__ {\n    left: unset !important;\n    width: auto !important;\n    height: auto !important;\n  }\n\n  /* Danger when top level node for smart cards / inline links */\n  .danger > div > div > .media-card-frame,\n  .danger > span > a {\n    background-color: ", ";\n    box-shadow: 0px 0px 0px ", "px\n      ", ";\n    transition: background-color 0s;\n    transition: box-shadow 0s;\n  }\n  .mediaGroupView-content-wrap.danger {\n    /* Media inline */\n    .", "::after {\n      border: 1px solid ", ";\n    }\n  }\n  /* Danger when nested node or common */\n  .danger {\n    /* Media single */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* Media single video player */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* New file experience */\n    .", " .", " {\n      box-shadow: 0 0 0 1px ", " !important;\n    }\n    /* Media resize handlers */\n    .richMedia-resize-handle-right::after,\n    .richMedia-resize-handle-left::after {\n      background: ", ";\n    }\n\n    /* Smart cards */\n    div div .media-card-frame,\n    .inlineCardView-content-wrap > span > a {\n      background-color: rgb(255, 189, 173, 0.5); /* R75 with 50% opactiy */\n      transition: background-color 0s;\n    }\n\n    div div .media-card-frame::after {\n      box-shadow: none;\n    }\n  }\n"])), mediaSingleSharedStyle, richMediaClassName, richMediaClassName, richMediaClassName, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPadding, akEditorMediaResizeHandlerPadding, richMediaClassName, richMediaClassName, N60, akEditorSelectedNodeClassName, akEditorSelectedNodeClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, B200, akEditorDeleteBackground, akEditorSelectedBorderBoldSize, akEditorDeleteBorder, fileCardImageViewSelectedSelector, akEditorDeleteIconColor, richMediaClassName, fileCardImageViewSelector, akEditorDeleteIconColor, richMediaClassName, inlinePlayerClassName, akEditorDeleteIconColor, richMediaClassName, newFileExperienceClassName, akEditorDeleteIconColor, akEditorDeleteIconColor);
+export var mediaStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    ", " & [layout='full-width'] .", ",\n    & [layout='wide'] .", " {\n      margin-left: 50%;\n      transform: translateX(-50%);\n    }\n\n    & [layout^='wrap-'] + [layout^='wrap-'] {\n      clear: none;\n      & + p,\n      & + div[class^='fabric-editor-align'],\n      & + ul,\n      & + ol,\n      & + h1,\n      & + h2,\n      & + h3,\n      & + h4,\n      & + h5,\n      & + h6 {\n        clear: both !important;\n      }\n      & .", " {\n        margin-left: 0;\n        margin-right: 0;\n      }\n    }\n\n    .mediaSingleView-content-wrap[layout^='wrap-'] {\n      max-width: 100%;\n      // overwrite default Prosemirror setting making it clear: both\n      clear: inherit;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-left'] {\n      float: left;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right'] {\n      float: right;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right']\n      + .mediaSingleView-content-wrap[layout='wrap-left'] {\n      clear: both;\n    }\n\n    /* Larger margins for resize handlers when at depth 0 of the document */\n    & > .mediaSingleView-content-wrap {\n      .richMedia-resize-handle-right {\n        margin-right: -", "px;\n      }\n      .richMedia-resize-handle-left {\n        margin-left: -", "px;\n      }\n    }\n  }\n\n  .richMedia-resize-handle-right,\n  .richMedia-resize-handle-left {\n    display: flex;\n    flex-direction: column;\n\n    /* vertical align */\n    justify-content: center;\n  }\n\n  .richMedia-resize-handle-right {\n    align-items: flex-end;\n    padding-right: 12px;\n    margin-right: -", "px;\n  }\n\n  .richMedia-resize-handle-left {\n    align-items: flex-start;\n    padding-left: 12px;\n    margin-left: -", "px;\n  }\n\n  .richMedia-resize-handle-right::after,\n  .richMedia-resize-handle-left::after {\n    content: ' ';\n    display: flex;\n    width: 3px;\n    height: 64px;\n\n    border-radius: 6px;\n  }\n\n  .", ":hover .richMedia-resize-handle-left::after,\n  .", ":hover .richMedia-resize-handle-right::after {\n    background: ", ";\n  }\n\n  .", " .richMedia-resize-handle-right::after,\n  .", " .richMedia-resize-handle-left::after,\n  .", " .richMedia-resize-handle-right:hover::after,\n  .", " .richMedia-resize-handle-left:hover::after,\n  .", ".is-resizing .richMedia-resize-handle-right::after,\n  .", ".is-resizing .richMedia-resize-handle-left::after {\n    background: ", ";\n  }\n\n  .__resizable_base__ {\n    left: unset !important;\n    width: auto !important;\n    height: auto !important;\n  }\n\n  /* Danger when top level node for smart cards / inline links */\n  .danger > div > div > .media-card-frame,\n  .danger > span > a {\n    background-color: ", ";\n    box-shadow: 0px 0px 0px ", "px\n      ", ";\n    transition: background-color 0s, box-shadow 0s;\n  }\n  .mediaGroupView-content-wrap.danger {\n    /* Media inline */\n    .", "::after {\n      border: 1px solid ", ";\n    }\n  }\n  /* Danger when nested node or common */\n  .danger {\n    /* Media single */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* Media single video player */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* New file experience */\n    .", " .", " {\n      box-shadow: 0 0 0 1px ", " !important;\n    }\n    /* Media resize handlers */\n    .richMedia-resize-handle-right::after,\n    .richMedia-resize-handle-left::after {\n      background: ", ";\n    }\n\n    /* Smart cards */\n    div div .media-card-frame,\n    .inlineCardView-content-wrap > span > a {\n      background-color: rgb(255, 189, 173, 0.5); /* R75 with 50% opactiy */\n      transition: background-color 0s;\n    }\n\n    div div .media-card-frame::after {\n      box-shadow: none;\n    }\n  }\n"])), mediaSingleSharedStyle, richMediaClassName, richMediaClassName, richMediaClassName, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPadding, akEditorMediaResizeHandlerPadding, richMediaClassName, richMediaClassName, N60, akEditorSelectedNodeClassName, akEditorSelectedNodeClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, B200, akEditorDeleteBackground, akEditorSelectedBorderBoldSize, akEditorDeleteBorder, fileCardImageViewSelectedSelector, akEditorDeleteIconColor, richMediaClassName, fileCardImageViewSelector, akEditorDeleteIconColor, richMediaClassName, inlinePlayerClassName, akEditorDeleteIconColor, richMediaClassName, newFileExperienceClassName, akEditorDeleteIconColor, akEditorDeleteIconColor);
 /* `left: unset` above is to work around Chrome bug where rendering a div with
  * that style applied inside a container that has a scroll, causes any svgs on
  * the page, without a border, that are inside a flexbox, to no longer align to

package/dist/esm/plugins/media/toolbar/index.js

@@ -14,7 +14,6 @@ import { mediaFilmstripItemDOMSelector } from '@atlaskit/media-filmstrip';
 import commonMessages from '../../../messages';
 import { stateKey } from '../pm-plugins/plugin-key';
 import { hoverDecoration } from '../../base/pm-plugins/decoration';
-import { renderAnnotationButton } from './annotation';
 import { getLinkingToolbar, shouldShowMediaLinkToolbar } from './linking';
 import buildLayoutButtons from '../../../ui/MediaAndEmbedsToolbar';
 import { getMediaLinkingState } from '../pm-plugins/linking';
@@ -179,7 +178,6 @@ var generateMediaInlineFloatingToolbar = function generateMediaInlineFloatingToo
 var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToolbar(state, intl, options, pluginState, mediaLinkingState) {
   var mediaSingle = state.schema.nodes.mediaSingle;
   var allowResizing = options.allowResizing,
-      allowAnnotation = options.allowAnnotation,
       allowLinking = options.allowLinking,
       allowAdvancedToolBarOptions = options.allowAdvancedToolBarOptions,
       allowResizingInTables = options.allowResizingInTables,
@@ -189,16 +187,6 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
   if (allowAdvancedToolBarOptions) {
     toolbarButtons = buildLayoutButtons(state, intl, state.schema.nodes.mediaSingle, allowResizing, allowResizingInTables);
 
-    if (toolbarButtons.length) {
-      if (allowAnnotation) {
-        toolbarButtons.push({
-          type: 'custom',
-          fallback: [],
-          render: renderAnnotationButton(pluginState, intl)
-        });
-      }
-    }
-
     if (toolbarButtons.length) {
       toolbarButtons.push({
         type: 'separator'

package/dist/esm/plugins/media/ui/MediaLinkingToolbar.js

@@ -29,7 +29,7 @@ import styled from 'styled-components';
 import { R400 } from '@atlaskit/theme/colors';
 import { INPUT_METHOD } from '../../analytics/types/enums';
 import { mediaLinkToolbarMessages } from './media-linking-toolbar-messages';
-var ValidationWrapper = styled.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  line-height: 0;\n  padding: 12px 24px 12px 0;\n  margin: 0 4px 0 32px;\n  border-top: 1px solid ", ";\n  align-items: start;\n  display: flex;\n  flex-direction: column;\n"])), R400);
+var ValidationWrapper = styled.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  line-height: 0;\n  padding: 12px 24px 12px 0;\n  margin: 0 4px 0 32px;\n  border-top: 1px solid ", ";\n  align-items: start;\n  display: flex;\n  flex-direction: column;\n"])), R400);
 var ButtonWrapper = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 4px 8px 4px 0px;\n"])));
 export var LinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(LinkAddToolbar, _React$PureComponent);

package/dist/esm/plugins/media/ui/ResizableMediaSingle/index.js

@@ -13,12 +13,14 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { findParentNodeOfTypeClosestToPos, hasParentNodeOfType } from 'prosemirror-utils';
 import { getMediaClient } from '@atlaskit/media-client';
 import { calcPctFromPx, calcColumnsFromPx, wrappedLayouts } from '@atlaskit/editor-common/ui';
 import { akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
-import { Wrapper } from './styled';
+import { wrapperStyle } from './styled';
 import Resizer from '../../../../ui/Resizer';
 import { snapTo, handleSides, imageAlignmentMap } from '../../../../ui/Resizer/utils';
 import { calcMediaPxWidth } from '../../utils/media-single';
@@ -407,13 +409,15 @@ var ResizableMediaSingle = /*#__PURE__*/function (_React$Component) {
         offsetLeft: this.state.offsetLeft,
         wrappedLayout: this.wrappedLayout
       };
-      return /*#__PURE__*/React.createElement(Wrapper, {
-        layout: layout,
-        isResized: !!pctWidth,
-        containerWidth: containerWidth || origWidth,
-        innerRef: this.saveWrapper,
-        fullWidthMode: fullWidthMode
-      }, /*#__PURE__*/React.createElement(Resizer, _extends({}, this.props, {
+      return jsx("div", {
+        ref: this.saveWrapper,
+        css: wrapperStyle({
+          layout: layout,
+          isResized: !!pctWidth,
+          containerWidth: containerWidth || origWidth,
+          fullWidthMode: fullWidthMode
+        })
+      }, jsx(Resizer, _extends({}, this.props, {
         ratio: ratio,
         width: initialWidth,
         selected: selected,
@@ -432,7 +436,7 @@ var ResizableMediaSingle = /*#__PURE__*/function (_React$Component) {
         // This workaround adds an empty div inside the resize handler to prevent the issue.
         ,
         handleComponentFunc: function handleComponentFunc() {
-          return /*#__PURE__*/React.createElement("div", {
+          return jsx("div", {
             contentEditable: false
           });
         }

package/dist/esm/plugins/media/ui/ResizableMediaSingle/styled.js

@@ -2,7 +2,8 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
+import { css } from '@emotion/react';
 import { MediaSingleDimensionHelper } from '@atlaskit/editor-common/ui';
-import styled from 'styled-components';
-export var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  & > div {\n    ", ";\n    position: relative;\n    clear: both;\n  }\n"])), MediaSingleDimensionHelper);
-Wrapper.displayName = 'ResizerWrapper';
+export var wrapperStyle = function wrapperStyle(props) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  & > div {\n    ", ";\n    position: relative;\n    clear: both;\n  }\n"])), MediaSingleDimensionHelper(props));
+};

package/dist/esm/plugins/media/utils/media-single.js

@@ -12,7 +12,7 @@ import { checkNodeDown, isEmptyParagraph } from '../../../utils';
 import { copyOptionalAttrsFromMediaState } from '../utils/media-common';
 import { mapSlice } from '../../../utils/slice';
 import { addAnalytics, ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID } from '../../analytics';
-import { safeInsert } from '../../../utils/insert';
+import { safeInsert, shouldSplitSelectedNodeOnNodeInsertion } from '../../../utils/insert';
 import { getFeatureFlags } from '../../feature-flags-context';
 import { isImage } from './is-image';
 import { atTheBeginningOfBlock } from '../../../utils/prosemirror/position';
@@ -92,23 +92,27 @@ export var insertMediaAsMediaSingle = function insertMediaAsMediaSingle(view, no
   return insertNodesWithOptionalParagraph(nodes, analyticsAttributes)(state, dispatch);
 };
 export var insertMediaSingleNode = function insertMediaSingleNode(view, mediaState, inputMethod, collection, alignLeftOnInsert) {
+  var _state$selection$$fro;
+
   if (collection === undefined) {
     return false;
   }
 
   var state = view.state,
       dispatch = view.dispatch;
-  var grandParent = state.selection.$from.node(-1);
+  var grandParentType = (_state$selection$$fro = state.selection.$from.node(-1)) === null || _state$selection$$fro === void 0 ? void 0 : _state$selection$$fro.type;
+  var parentType = state.selection.$from.parent.type;
   var node = createMediaSingleNode(state.schema, collection, alignLeftOnInsert)(mediaState);
-  var shouldSplit = grandParent && grandParent.type.validContent(Fragment.from(node));
   var fileExtension;
 
   if (mediaState.fileName) {
     var extensionIdx = mediaState.fileName.lastIndexOf('.');
     fileExtension = extensionIdx >= 0 ? mediaState.fileName.substring(extensionIdx + 1) : undefined;
-  }
+  } // should split if media is valid content for the grandparent of the selected node
+  // and the parent node is a paragraph
+
 
-  if (shouldSplit) {
+  if (shouldSplitSelectedNodeOnNodeInsertion(parentType, grandParentType, node)) {
     insertNodesWithOptionalParagraph([node], {
       fileExtension: fileExtension,
       inputMethod: inputMethod

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

@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { MentionSharedCssClassName } from '@atlaskit/editor-common/mention';
 import { SelectionStyle, getSelectionStyles, akEditorSelectedBorderSize, akEditorDeleteBorder, akEditorDeleteBackgroundWithOpacity, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 import { N500, N30A } from '@atlaskit/theme/colors';

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

@@ -2,7 +2,9 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { panelSharedStyles, PanelSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { SelectionStyle, getSelectionStyles, akEditorDeleteBackground, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorDeleteIconColor, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
-export var panelStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    .", " {\n      cursor: pointer;\n\n      /* Danger when top level node */\n      &.danger {\n        box-shadow: 0 0 0 ", "px\n          ", ";\n        background-color: ", " !important;\n\n        .", " {\n          color: ", " !important;\n        }\n      }\n    }\n\n    .", " {\n      cursor: text;\n    }\n\n    /* Danger when nested node */\n    .danger .", " {\n      &[data-panel-type] {\n        background-color: ", ";\n\n        .", " {\n          color: ", ";\n        }\n      }\n    }\n\n    ", ";\n  }\n\n  .", ".", ":not(.danger) {\n    ", "\n  }\n"])), PanelSharedCssClassName.prefix, akEditorSelectedBorderSize, akEditorDeleteBorder, akEditorDeleteBackground, PanelSharedCssClassName.icon, akEditorDeleteIconColor, PanelSharedCssClassName.content, PanelSharedCssClassName.prefix, akEditorDeleteBackgroundWithOpacity, PanelSharedCssClassName.icon, akEditorDeleteIconColor, panelSharedStyles, PanelSharedCssClassName.prefix, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket]));
+export var panelStyles = function panelStyles(props) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    .", " {\n      cursor: pointer;\n\n      /* Danger when top level node */\n      &.danger {\n        box-shadow: 0 0 0 ", "px\n          ", ";\n        background-color: ", " !important;\n\n        .", " {\n          color: ", " !important;\n        }\n      }\n    }\n\n    .", " {\n      cursor: text;\n    }\n\n    /* Danger when nested node */\n    .danger .", " {\n      &[data-panel-type] {\n        background-color: ", ";\n\n        .", " {\n          color: ", ";\n        }\n      }\n    }\n\n    ", ";\n  }\n\n  .", ".", ":not(.danger) {\n    ", "\n  }\n"])), PanelSharedCssClassName.prefix, akEditorSelectedBorderSize, akEditorDeleteBorder, akEditorDeleteBackground, PanelSharedCssClassName.icon, akEditorDeleteIconColor, PanelSharedCssClassName.content, PanelSharedCssClassName.prefix, akEditorDeleteBackgroundWithOpacity, PanelSharedCssClassName.icon, akEditorDeleteIconColor, panelSharedStyles(props), PanelSharedCssClassName.prefix, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket]));
+};

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

@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { N200 } from '@atlaskit/theme/colors';
 export var placeHolderClassName = 'placeholder-decoration';
 export var placeholderStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror .", " {\n    position: relative;\n    color: ", ";\n    width: 100%;\n\n    pointer-events: none;\n    display: block;\n    user-select: none;\n\n    > span {\n      position: absolute;\n      pointer-events: none;\n    }\n\n    &.align-end > span {\n      right: 0;\n    }\n\n    &.align-center > span {\n      left: 0;\n    }\n  }\n"])), placeHolderClassName, N200);

package/dist/esm/plugins/placeholder-text/styles.js

@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { N300 } from '@atlaskit/theme/colors';
 import { SelectionStyle, getSelectionStyles, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 export var placeholderTextStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror span[data-placeholder] {\n    color: ", ";\n    display: inline;\n  }\n\n  .ProseMirror span.pm-placeholder {\n    display: inline;\n    color: ", ";\n  }\n  .ProseMirror span.pm-placeholder__text {\n    display: inline;\n    color: ", ";\n  }\n\n  .ProseMirror span.pm-placeholder.", " {\n    ", "\n  }\n\n  .ProseMirror span.pm-placeholder__text[data-placeholder]::after {\n    color: ", ";\n    cursor: text;\n    content: attr(data-placeholder);\n    display: inline;\n  }\n"])), N300, N300, N300, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.Background]), N300);

package/dist/esm/plugins/rule/pm-plugins/input-rule.js

@@ -10,6 +10,7 @@ export var createHorizontalRule = function createHorizontalRule(state, start, en
   }
 
   var tr = null;
+  var rule = state.schema.nodes.rule;
 
   var _getFeatureFlags = getFeatureFlags(state),
       newInsertionBehaviour = _getFeatureFlags.newInsertionBehaviour;
@@ -21,7 +22,7 @@ export var createHorizontalRule = function createHorizontalRule(state, start, en
      * without considering the extra text after the `/` command.
      **/
     tr = state.tr.replaceWith(start, end, Fragment.empty);
-    tr = safeInsert(state.schema.nodes.rule.createChecked(), tr.selection.from)(tr);
+    tr = safeInsert(rule.createChecked(), tr.selection.from)(tr);
   }
 
   if (!tr) {

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

@@ -2,7 +2,9 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { ruleSharedStyles } from '@atlaskit/editor-common/styles';
 import { akEditorLineHeight, akEditorSelectedBorderColor, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
-export var ruleStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    ", ";\n\n    hr {\n      cursor: pointer;\n      padding: 4px 0;\n      margin: calc(", "em - 4px) 0;\n      background-clip: content-box;\n\n      &.", " {\n        outline: none;\n        background-color: ", ";\n      }\n    }\n  }\n"])), ruleSharedStyles, akEditorLineHeight, akEditorSelectedNodeClassName, akEditorSelectedBorderColor);
+export var ruleStyles = function ruleStyles(props) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    ", ";\n\n    hr {\n      cursor: pointer;\n      padding: 4px 0;\n      margin: calc(", "em - 4px) 0;\n      background-clip: content-box;\n\n      &.", " {\n        outline: none;\n        background-color: ", ";\n      }\n    }\n  }\n"])), ruleSharedStyles(props), akEditorLineHeight, akEditorSelectedNodeClassName, akEditorSelectedBorderColor);
+};

package/dist/esm/plugins/selection/gap-cursor/styles.js

@@ -1,12 +1,12 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject;
+var _templateObject, _templateObject2;
 
-import { keyframes } from 'styled-components';
+import { css, keyframes } from '@emotion/react';
 var gapCursorBlink = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from, to {\n    opacity: 0;\n  }\n  50% {\n    opacity: 1;\n  }\n"])));
 export var hideCaretModifier = 'ProseMirror-hide-gapcursor';
 var gapCursor = '.ProseMirror-gapcursor';
 var prosemirrorwidget = '.ProseMirror-widget';
 var wrapLeft = '[layout="wrap-left"]';
 var wrapRight = '[layout="wrap-right"]';
-export var gapCursorStyles = "\n  /* =============== GAP CURSOR ================== */\n  .ProseMirror {\n    &.".concat(hideCaretModifier, " {\n      caret-color: transparent;\n    }\n\n    ").concat(gapCursor, " {\n      display: none;\n      pointer-events: none;\n      position: relative;\n\n      & span {\n        caret-color: transparent;\n        position: absolute;\n        height: 100%;\n        width: 100%;\n        display: block;\n      }\n\n      & span::after {\n        animation: 1s ").concat(gapCursorBlink, " step-end infinite;\n        border-left: 1px solid;\n        content: '';\n        display: block;\n        position: absolute;\n        top: 0;\n        height: 100%;\n      }\n      &.-left span::after {\n        left: -3px;\n      }\n      &.-right span::after {\n        right: -3px;\n      }\n      & span[layout='full-width'],\n      & span[layout='wide'] {\n        margin-left: 50%;\n        transform: translateX(-50%);\n      }\n      &").concat(wrapRight, " {\n        float: right;\n      }\n\n      /* fix vertical alighment of gap cursor */\n      &:first-child + ul,\n      &:first-child + span + ul,\n      &:first-child + ol,\n      &:first-child + span + ol,\n      &:first-child + pre,\n      &:first-child + span + pre,\n      &:first-child + blockquote,\n      &:first-child + span + blockquote {\n        margin-top: 0;\n      }\n    }\n    &.ProseMirror-focused ").concat(gapCursor, " {\n      display: block;\n      border-color: transparent;\n    }\n  }\n\n  /* This hack below is for two images aligned side by side */\n  ").concat(gapCursor).concat(wrapLeft, " + span + ").concat(wrapLeft, ",\n  ").concat(gapCursor).concat(wrapRight, " + span + ").concat(wrapRight, ",\n  ").concat(gapCursor, " + ").concat(wrapLeft, " + ").concat(wrapRight, ",\n  ").concat(gapCursor, " + ").concat(wrapLeft, " + span + ").concat(wrapRight, ",\n  ").concat(gapCursor, " + ").concat(wrapRight, " + ").concat(wrapLeft, ",\n  ").concat(gapCursor, " + ").concat(wrapRight, " + span + ").concat(wrapLeft, ",\n  ").concat(wrapLeft, " + ").concat(gapCursor, " + ").concat(wrapRight, ",\n  ").concat(wrapLeft, " + ").concat(gapCursor, " + span ").concat(wrapRight, ",\n  ").concat(wrapRight, " + ").concat(gapCursor, " + ").concat(wrapLeft, ",\n  ").concat(wrapRight, " + ").concat(gapCursor, " + span + ").concat(wrapLeft, ",\n  ").concat(wrapLeft, " + ").concat(gapCursor, " {\n    clear: none;\n  }\n\n  ").concat(wrapLeft, " + ").concat(gapCursor, " + ").concat(wrapRight, " > div,\n  ").concat(wrapLeft, " + ").concat(gapCursor, " + span + ").concat(wrapRight, " > div,\n  ").concat(wrapRight, " + ").concat(gapCursor, " + ").concat(wrapLeft, " > div,\n  ").concat(wrapRight, " + ").concat(gapCursor, " + span + ").concat(wrapLeft, " > div,\n  ").concat(gapCursor, " + ").concat(wrapRight, " + ").concat(wrapLeft, " > div,\n  ").concat(gapCursor, " + ").concat(wrapRight, " + span + ").concat(wrapLeft, " > div,\n  ").concat(gapCursor, " + ").concat(wrapLeft, " + ").concat(wrapRight, " > div,\n  ").concat(gapCursor, " + ").concat(wrapLeft, " + span + ").concat(wrapRight, " > div {\n    margin-right: 0;\n    margin-left: 0;\n    margin-bottom: 0;\n  }\n\n  ").concat(wrapLeft, " + ").concat(gapCursor, ",\n  ").concat(wrapRight, " + ").concat(gapCursor, " {\n    float: left;\n  }\n\n  ").concat(gapCursor, " + ").concat(wrapLeft, " + span + ").concat(wrapRight, "::after,\n  ").concat(gapCursor, " + ").concat(wrapRight, " + span + ").concat(wrapLeft, "::after,\n  ").concat(wrapLeft, " + ").concat(gapCursor, " + ").concat(wrapRight, "::after,\n  ").concat(wrapLeft, " + ").concat(gapCursor, " + span + ").concat(wrapRight, "::after,\n  ").concat(wrapRight, " + ").concat(gapCursor, " + ").concat(wrapLeft, "::after,\n  ").concat(wrapRight, " + ").concat(gapCursor, " + span + ").concat(wrapLeft, "::after {\n    visibility: hidden;\n    display: block;\n    font-size: 0;\n    content: ' ';\n    clear: both;\n    height: 0;\n  }\n\n  ").concat(wrapLeft, " + ").concat(gapCursor, " + ").concat(wrapRight, " + *,\n  ").concat(wrapLeft, " + ").concat(gapCursor, " + ").concat(wrapRight, " + span + *,\n  ").concat(wrapRight, " + ").concat(gapCursor, " + ").concat(wrapLeft, " + *,\n  ").concat(wrapRight, " + ").concat(gapCursor, " + ").concat(wrapLeft, " + span + *,\n  ").concat(wrapLeft, " + ").concat(gapCursor, " + span + ").concat(wrapRight, " + *,\n  ").concat(wrapRight, " + ").concat(gapCursor, " + span + ").concat(wrapLeft, " + *,\n  ").concat(gapCursor, " + ").concat(wrapLeft, " + span + ").concat(wrapRight, " + *,\n  ").concat(gapCursor, " + ").concat(wrapRight, " + span + ").concat(wrapLeft, " + *,\n  ").concat(wrapLeft, " + ").concat(gapCursor, " + ").concat(wrapRight, " + * > *,\n  ").concat(wrapLeft, " + ").concat(gapCursor, " + ").concat(wrapRight, " + span + * > *,\n  ").concat(wrapRight, " + ").concat(gapCursor, " + ").concat(wrapLeft, " + * > *,\n  ").concat(wrapRight, " + ").concat(gapCursor, " + ").concat(wrapLeft, " + span + * > *,\n  ").concat(wrapLeft, " + ").concat(gapCursor, " + span + ").concat(wrapRight, " + * > *,\n  ").concat(wrapRight, " + ").concat(gapCursor, " + span + ").concat(wrapLeft, " + * > *,\n  ").concat(gapCursor, " + ").concat(wrapLeft, " + span + ").concat(wrapRight, " + * > *,\n  ").concat(gapCursor, " + ").concat(wrapRight, " + span + ").concat(wrapLeft, " + * > *,\n  ").concat(prosemirrorwidget, " + ").concat(gapCursor, " + *,\n  ").concat(prosemirrorwidget, " + ").concat(gapCursor, " + span + * {\n    margin-top: 0;\n  }\n");
+export var gapCursorStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  /* =============== GAP CURSOR ================== */\n  .ProseMirror {\n    &.", " {\n      caret-color: transparent;\n    }\n\n    ", " {\n      display: none;\n      pointer-events: none;\n      position: relative;\n\n      & span {\n        caret-color: transparent;\n        position: absolute;\n        height: 100%;\n        width: 100%;\n        display: block;\n      }\n\n      & span::after {\n        animation: 1s ", " step-end infinite;\n        border-left: 1px solid;\n        content: '';\n        display: block;\n        position: absolute;\n        top: 0;\n        height: 100%;\n      }\n      &.-left span::after {\n        left: -3px;\n      }\n      &.-right span::after {\n        right: -3px;\n      }\n      & span[layout='full-width'],\n      & span[layout='wide'] {\n        margin-left: 50%;\n        transform: translateX(-50%);\n      }\n      &", " {\n        float: right;\n      }\n\n      /* fix vertical alighment of gap cursor */\n      &:first-child + ul,\n      &:first-child + span + ul,\n      &:first-child + ol,\n      &:first-child + span + ol,\n      &:first-child + pre,\n      &:first-child + span + pre,\n      &:first-child + blockquote,\n      &:first-child + span + blockquote {\n        margin-top: 0;\n      }\n    }\n    &.ProseMirror-focused ", " {\n      display: block;\n      border-color: transparent;\n    }\n  }\n\n  /* This hack below is for two images aligned side by side */\n  ", "", " + span + ", ",\n  ", "", " + span + ", ",\n  ", " + ", " + ", ",\n  ", " + ", " + span + ", ",\n  ", " + ", " + ", ",\n  ", " + ", " + span + ", ",\n  ", " + ", " + ", ",\n  ", " + ", " + span ", ",\n  ", " + ", " + ", ",\n  ", " + ", " + span + ", ",\n  ", " + ", " {\n    clear: none;\n  }\n\n  ", " + ", " + ", " > div,\n  ", " + ", " + span + ", " > div,\n  ", " + ", " + ", " > div,\n  ", " + ", " + span + ", " > div,\n  ", " + ", " + ", " > div,\n  ", " + ", " + span + ", " > div,\n  ", " + ", " + ", " > div,\n  ", " + ", " + span + ", " > div {\n    margin-right: 0;\n    margin-left: 0;\n    margin-bottom: 0;\n  }\n\n  ", " + ", ",\n  ", " + ", " {\n    float: left;\n  }\n\n  ", " + ", " + span + ", "::after,\n  ", " + ", " + span + ", "::after,\n  ", " + ", " + ", "::after,\n  ", " + ", " + span + ", "::after,\n  ", " + ", " + ", "::after,\n  ", " + ", " + span + ", "::after {\n    visibility: hidden;\n    display: block;\n    font-size: 0;\n    content: ' ';\n    clear: both;\n    height: 0;\n  }\n\n  ", " + ", " + ", " + *,\n  ", " + ", " + ", " + span + *,\n  ", " + ", " + ", " + *,\n  ", " + ", " + ", " + span + *,\n  ", " + ", " + span + ", " + *,\n  ", " + ", " + span + ", " + *,\n  ", " + ", " + span + ", " + *,\n  ", " + ", " + span + ", " + *,\n  ", " + ", " + ", " + * > *,\n  ", " + ", " + ", " + span + * > *,\n  ", " + ", " + ", " + * > *,\n  ", " + ", " + ", " + span + * > *,\n  ", " + ", " + span + ", " + * > *,\n  ", " + ", " + span + ", " + * > *,\n  ", " + ", " + span + ", " + * > *,\n  ", " + ", " + span + ", " + * > *,\n  ", " + ", " + *,\n  ", " + ", " + span + * {\n    margin-top: 0;\n  }\n"])), hideCaretModifier, gapCursor, gapCursorBlink, wrapRight, gapCursor, gapCursor, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapLeft, gapCursor, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapRight, wrapLeft, gapCursor, wrapRight, gapCursor, gapCursor, wrapLeft, wrapRight, gapCursor, wrapRight, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, gapCursor, wrapLeft, wrapRight, gapCursor, wrapRight, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, gapCursor, wrapLeft, wrapRight, gapCursor, wrapRight, wrapLeft, prosemirrorwidget, gapCursor, prosemirrorwidget, gapCursor);