@atlaskit/editor-core 148.0.0 → 149.0.3

package/dist/esm/plugins/floating-toolbar/ui/EmojiPickerButton.js

@@ -6,10 +6,10 @@ var _templateObject;
 import React from 'react';
 import styled from 'styled-components';
 import Button from '@atlaskit/button';
-import Emoji from '@atlaskit/icon/glyph/editor/emoji';
 import { Popup, WithProviders } from '@atlaskit/editor-common';
 import { EmojiPicker } from '@atlaskit/emoji';
-import Tooltip from '@atlaskit/tooltip'; // helps adjusts position of popup
+import Tooltip from '@atlaskit/tooltip';
+import EditorEmojiAddIcon from './EditorEmojiAddIcon'; // helps adjusts position of popup
 
 var EmojiPickerButtonWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n"])));
 export var EmojiPickerButton = function EmojiPickerButton(props) {
@@ -76,8 +76,6 @@ export var EmojiPickerButton = function EmojiPickerButton(props) {
     onClick: togglePopup,
     ref: buttonRef,
     isSelected: props.isSelected,
-    iconBefore: /*#__PURE__*/React.createElement(Emoji, {
-      label: "emoji"
-    })
+    iconBefore: /*#__PURE__*/React.createElement(EditorEmojiAddIcon, null)
   })), renderPopup());
 };

package/dist/esm/plugins/help-dialog/ui/index.js

@@ -16,7 +16,7 @@ import React from 'react';
 import { injectIntl, defineMessages, FormattedMessage } from 'react-intl';
 import { browser } from '@atlaskit/editor-common';
 import CrossIcon from '@atlaskit/icon/glyph/cross';
-import AkModalDialog, { ModalTransition } from '@atlaskit/modal-dialog';
+import AkModalDialog, { ModalTransition, ModalBody, useModal } from '@atlaskit/modal-dialog';
 import { Header, Footer, ContentWrapper, Line, Content, ColumnRight, ColumnLeft, Row, CodeSm, CodeMd, CodeLg, Title } from './styles';
 import * as keymaps from '../../../keymaps';
 import ToolbarButton from '../../../ui/ToolbarButton';
@@ -342,12 +342,13 @@ export var getComponentFromKeymap = function getComponentFromKeymap(keymap) {
   }));
 };
 var ModalHeader = injectIntl(function (_ref4) {
-  var onClose = _ref4.onClose,
-      showKeyline = _ref4.showKeyline,
-      formatMessage = _ref4.intl.formatMessage;
-  return /*#__PURE__*/React.createElement(Header, {
-    showKeyline: showKeyline
-  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.editorHelp), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ToolbarButton, {
+  var formatMessage = _ref4.intl.formatMessage;
+
+  var _useModal = useModal(),
+      onClose = _useModal.onClose;
+
+  return /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.editorHelp), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ToolbarButton // @ts-ignore
+  , {
     onClick: onClose,
     title: formatMessage(messages.closeHelpDialog),
     spacing: "compact",
@@ -358,11 +359,8 @@ var ModalHeader = injectIntl(function (_ref4) {
   })));
 });
 
-var ModalFooter = function ModalFooter(_ref5) {
-  var showKeyline = _ref5.showKeyline;
-  return /*#__PURE__*/React.createElement(Footer, {
-    showKeyline: showKeyline
-  }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.helpDialogTips, {
+var ModalFooter = function ModalFooter() {
+  return /*#__PURE__*/React.createElement(Footer, null, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.helpDialogTips, {
     values: {
       keyMap: getComponentFromKeymap(keymaps.openHelp)
     }
@@ -426,12 +424,8 @@ var HelpDialog = /*#__PURE__*/function (_React$Component) {
       this.formatting = getSupportedFormatting(editorView.state.schema, intl, imageEnabled, quickInsertEnabled);
       return /*#__PURE__*/React.createElement(ModalTransition, null, this.props.isVisible ? /*#__PURE__*/React.createElement(AkModalDialog, {
         width: "large",
-        onClose: this.closeDialog,
-        components: {
-          Header: ModalHeader,
-          Footer: ModalFooter
-        }
-      }, /*#__PURE__*/React.createElement(ContentWrapper, null, /*#__PURE__*/React.createElement(Line, null), /*#__PURE__*/React.createElement(Content, null, /*#__PURE__*/React.createElement(ColumnLeft, null, /*#__PURE__*/React.createElement(Title, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.keyboardShortcuts)), /*#__PURE__*/React.createElement("div", null, this.formatting.filter(function (form) {
+        onClose: this.closeDialog
+      }, /*#__PURE__*/React.createElement(ModalHeader, null), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(ContentWrapper, null, /*#__PURE__*/React.createElement(Line, null), /*#__PURE__*/React.createElement(Content, null, /*#__PURE__*/React.createElement(ColumnLeft, null, /*#__PURE__*/React.createElement(Title, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.keyboardShortcuts)), /*#__PURE__*/React.createElement("div", null, this.formatting.filter(function (form) {
         var keymap = form.keymap && form.keymap(_this2.props);
         return keymap && keymap[browser.mac ? 'mac' : 'windows'];
       }).map(function (form) {
@@ -452,7 +446,7 @@ var HelpDialog = /*#__PURE__*/function (_React$Component) {
         return form.autoFormatting && /*#__PURE__*/React.createElement(Row, {
           key: "autoFormatting-".concat(form.name)
         }, /*#__PURE__*/React.createElement("span", null, form.name), form.autoFormatting());
-      })))))) : null);
+      })))))), /*#__PURE__*/React.createElement(ModalFooter, null)) : null);
     }
   }]);
 

package/dist/esm/plugins/help-dialog/ui/styles.js

@@ -6,12 +6,8 @@ import styled from 'styled-components';
 import { borderRadius } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
 import { akEditorUnitZIndex, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-export var Header = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  z-index: ", ";\n  min-height: 24px;\n  padding: 20px 40px;\n  font-size: ", ";\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  box-shadow: ", ";\n  color: ", ";\n  background-color: ", ";\n  border-radius: ", "px;\n"])), akEditorUnitZIndex, relativeFontSizeToBase16(24), function (props) {
-  return props.showKeyline ? "0 2px 0 ".concat(colors.N30) : 'none';
-}, colors.N400, colors.N0, borderRadius());
-export var Footer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  z-index: ", ";\n  font-size: ", ";\n  line-height: 20px;\n  color: ", ";\n  padding: 24px;\n  text-align: right;\n  box-shadow: ", ";\n"])), akEditorUnitZIndex, relativeFontSizeToBase16(14), colors.N300, function (props) {
-  return props.showKeyline ? "0 -2px 0 ".concat(colors.N30) : 'none';
-});
+export var Header = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  z-index: ", ";\n  min-height: 24px;\n  padding: 20px 40px;\n  font-size: ", ";\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  box-shadow: 'none';\n  color: ", ";\n  background-color: ", ";\n  border-radius: ", "px;\n"])), akEditorUnitZIndex, relativeFontSizeToBase16(24), colors.N400, colors.N0, borderRadius());
+export var Footer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  z-index: ", ";\n  font-size: ", ";\n  line-height: 20px;\n  color: ", ";\n  padding: 24px;\n  text-align: right;\n  box-shadow: 'none';\n"])), akEditorUnitZIndex, relativeFontSizeToBase16(14), colors.N300);
 export var ContentWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 18px 20px;\n  border-bottom-right-radius: ", "px;\n  overflow: auto;\n  position: relative;\n  color: ", ";\n  background-color: ", ";\n"])), borderRadius(), colors.N400, colors.N0);
 export var Line = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  background: #fff;\n  content: '';\n  display: block;\n  height: 2px;\n  left: 0;\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 100%;\n  min-width: 604px;\n"])));
 export var Content = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  min-width: 524px;\n  width: 100%;\n  position: relative;\n  display: flex;\n  justify-content: space-between;\n"])));

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

@@ -61,17 +61,11 @@ var hyperlinkPlugin = function hyperlinkPlugin(options) {
           icon: function icon() {
             return /*#__PURE__*/React.createElement(IconLink, null);
           },
-          action: function action(_insert, state) {
-            var pos = state.selection.from;
-            var nodeBefore = state.selection.$from.nodeBefore;
-
-            if (!nodeBefore) {
-              return false;
-            }
-
-            var tr = state.tr.setMeta(stateKey, {
+          action: function action(insert, state) {
+            var tr = insert(undefined);
+            tr.setMeta(stateKey, {
               type: LinkAction.SHOW_INSERT_TOOLBAR
-            }).delete(pos - nodeBefore.nodeSize, pos);
+            });
             return addAnalytics(state, tr, {
               action: ACTION.INVOKED,
               actionSubject: ACTION_SUBJECT.TYPEAHEAD,

package/dist/esm/plugins/insert-block/index.js

@@ -3,15 +3,16 @@ import { WithProviders } from '@atlaskit/editor-common';
 import { pluginKey as blockTypeStateKey } from '../block-type/pm-plugins/main';
 import { stateKey as mediaStateKey } from '../media/pm-plugins/plugin-key';
 import { stateKey as hyperlinkPluginKey } from '../hyperlink/pm-plugins/main';
-import { mentionPluginKey } from '../mentions';
+import { isTypeAheadAllowed } from '../type-ahead/utils';
+import { mentionPluginKey } from '../mentions/pm-plugins/key';
 import { pluginKey as layoutStateKey } from '../layout';
 import { insertMacroFromMacroBrowser } from '../macro';
 import { emojiPluginKey } from '../emoji';
 import WithPluginState from '../../ui/WithPluginState';
 import ToolbarInsertBlock from './ui/ToolbarInsertBlock';
+import { pluginKey as typeAheadPluginKey } from '../type-ahead/pm-plugins/key';
 import { insertBlockTypesWithAnalytics } from '../block-type/commands';
 import { startImageUpload } from '../image-upload/pm-plugins/commands';
-import { pluginKey as typeAheadPluginKey } from '../type-ahead/pm-plugins/main';
 import { INPUT_METHOD } from '../analytics';
 import { stateKey as imageUploadStateKey } from '../image-upload/pm-plugins/plugin-key';
 import { pluginKey as dateStateKey } from '../date/pm-plugins/plugin-key';
@@ -77,8 +78,7 @@ var insertBlockPlugin = function insertBlockPlugin() {
             layoutState: layoutStateKey
           },
           render: function render(_ref2) {
-            var typeAheadState = _ref2.typeAheadState,
-                mentionState = _ref2.mentionState,
+            var mentionState = _ref2.mentionState,
                 blockTypeState = _ref2.blockTypeState,
                 mediaState = _ref2.mediaState,
                 _ref2$macroState = _ref2.macroState,
@@ -93,7 +93,7 @@ var insertBlockPlugin = function insertBlockPlugin() {
               buttons: buttons,
               isReducedSpacing: isToolbarReducedSpacing,
               isDisabled: disabled,
-              isTypeAheadAllowed: typeAheadState && typeAheadState.isAllowed,
+              isTypeAheadAllowed: isTypeAheadAllowed(editorView.state),
               editorView: editorView,
               tableSupported: options.allowTables,
               actionSupported: !!editorView.state.schema.nodes.taskItem,

package/dist/esm/plugins/insert-block/ui/ToolbarInsertBlock/index.js

@@ -23,14 +23,14 @@ import { Popup } from '@atlaskit/editor-common';
 import ToolbarButton from '../../../../ui/ToolbarButton';
 import { Separator, ButtonGroup, Wrapper } from '../../../../ui/styles';
 import { createTable } from '../../../table/commands';
-import { insertDate, openDatePicker } from '../../../date/actions';
+import { insertDate } from '../../../date/actions';
 import { openElementBrowserModal } from '../../../quick-insert/commands';
 import { showPlaceholderFloatingToolbar } from '../../../placeholder-text/actions';
 import { insertLayoutColumnsWithAnalytics } from '../../../layout/actions';
 import { insertTaskDecision } from '../../../tasks-and-decisions/commands';
 import { insertExpand } from '../../../expand/commands';
 import { showLinkToolbar } from '../../../hyperlink/commands';
-import { insertMentionQuery } from '../../../mentions/commands/insert-mention-query';
+import { createTypeAheadTools } from '../../../type-ahead/api';
 import { updateStatusWithAnalytics } from '../../../status/actions';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, withAnalytics as commandWithAnalytics } from '../../../analytics';
 import { insertEmoji } from '../../../emoji/commands/insert-emoji';
@@ -193,7 +193,12 @@ var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
 
     _defineProperty(_assertThisInitialized(_this), "insertMention", function (inputMethod) {
       var editorView = _this.props.editorView;
-      insertMentionQuery(inputMethod)(editorView.state, editorView.dispatch);
+
+      if (!editorView) {
+        return true;
+      }
+
+      createTypeAheadTools(editorView).openMention(inputMethod);
       return true;
     });
 
@@ -213,7 +218,6 @@ var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
     _defineProperty(_assertThisInitialized(_this), "createDate", function (inputMethod) {
       var editorView = _this.props.editorView;
       insertDate(undefined, inputMethod)(editorView.state, editorView.dispatch);
-      openDatePicker()(editorView.state, editorView.dispatch);
       return true;
     });
 

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

@@ -112,6 +112,11 @@ var listPlugin = function listPlugin() {
         },
         render: function render(_ref5) {
           var listState = _ref5.listState;
+
+          if (!listState) {
+            return null;
+          }
+
           return /*#__PURE__*/React.createElement(ToolbarLists, {
             isSmall: isSmall,
             isSeparator: true,

package/dist/esm/plugins/macro/actions.js

@@ -71,20 +71,20 @@ export var insertMacroFromMacroBrowser = function insertMacroFromMacroBrowser(ma
                 tr.setSelection(TextSelection.create(tr.doc, state.selection.anchor));
               } // If any extension is currently selected
               else if (findSelectedNodeOfType([extension, bodiedExtension, inlineExtension])(selection)) {
-                  tr = replaceSelectedNode(node)(tr); // Replacing selected node doesn't update the selection. `selection.node` still returns the old node
-
-                  tr.setSelection(NodeSelection.create(tr.doc, tr.mapping.map(state.selection.anchor)));
-                } // When we loose the selection. This usually happens when Synchrony resets or changes
-                // the selection when user is in the middle of updating an extension.
-                else if (extensionState.element) {
-                    pos = view.posAtDOM(extensionState.element, -1);
-
-                    if (pos > -1) {
-                      tr = tr.replaceWith(pos, pos + macroNode.nodeSize, node);
-                      tr.setSelection(Selection.near(tr.doc.resolve(pos)));
-                      targetSelectionSource = TARGET_SELECTION_SOURCE.HTML_ELEMENT;
-                    }
-                  } // Only scroll if we have anything to update, best to avoid surprise scroll
+                tr = replaceSelectedNode(node)(tr); // Replacing selected node doesn't update the selection. `selection.node` still returns the old node
+
+                tr.setSelection(NodeSelection.create(tr.doc, tr.mapping.map(state.selection.anchor)));
+              } // When we loose the selection. This usually happens when Synchrony resets or changes
+              // the selection when user is in the middle of updating an extension.
+              else if (extensionState.element) {
+                pos = view.posAtDOM(extensionState.element, -1);
+
+                if (pos > -1) {
+                  tr = tr.replaceWith(pos, pos + macroNode.nodeSize, node);
+                  tr.setSelection(Selection.near(tr.doc.resolve(pos)));
+                  targetSelectionSource = TARGET_SELECTION_SOURCE.HTML_ELEMENT;
+                }
+              } // Only scroll if we have anything to update, best to avoid surprise scroll
 
 
               if (dispatch && tr.docChanged) {

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

@@ -219,6 +219,7 @@ var mediaPlugin = function mediaPlugin(options) {
       floatingToolbar: function floatingToolbar(state, intl, providerFactory) {
         return _floatingToolbar(state, intl, {
           providerFactory: providerFactory,
+          allowMediaInline: options && options.allowMediaInline,
           allowResizing: options && options.allowResizing,
           allowResizingInTables: options && options.allowResizingInTables,
           allowAnnotation: options && options.allowAnnotation,

package/dist/esm/plugins/media/nodeviews/mediaGroup.js

@@ -139,6 +139,7 @@ var MediaGroup = /*#__PURE__*/function (_React$Component) {
           onClick: function onClick() {
             setNodeSelection(_this.props.view, getNodePos());
           },
+          shouldEnableDownloadButton: mediaOptions.enableDownloadButton,
           actions: [{
             handler: disabled ? function () {} : _this.mediaPluginState.handleMediaNodeRemoval.bind(null, undefined, getNodePos),
             icon: /*#__PURE__*/React.createElement(EditorCloseIcon, {

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

@@ -180,7 +180,7 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
                 _this.allowsUploads = !!_this.mediaProvider.uploadMediaClientConfig;
                 view = _this.view, allowsUploads = _this.allowsUploads; // make sure editable DOM node is mounted
 
-                if (!_this.destroyed && view.dom.parentNode) {
+                if (!_this.destroyed && view && view.dom.parentNode) {
                   // make PM plugin aware of the state change to update UI during 'apply' hook
                   view.dispatch(view.state.tr.setMeta(stateKey, {
                     allowsUploads: allowsUploads
@@ -233,6 +233,21 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
       return _this.options;
     });
 
+    _defineProperty(this, "isMediaSchemaNode", function (_ref3) {
+      var _this$mediaOptions;
+
+      var type = _ref3.type;
+      var _this$view$state$sche = _this.view.state.schema.nodes,
+          mediaSingle = _this$view$state$sche.mediaSingle,
+          media = _this$view$state$sche.media;
+
+      if ((_this$mediaOptions = _this.mediaOptions) !== null && _this$mediaOptions !== void 0 && _this$mediaOptions.allowMediaInline) {
+        return type === mediaSingle || type === media;
+      }
+
+      return type === mediaSingle;
+    });
+
     _defineProperty(this, "hasUserAuthProvider", function () {
       return !!_this.uploadMediaClientConfig && !!_this.uploadMediaClientConfig.userAuthProvider;
     });
@@ -392,8 +407,8 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
     });
 
     _defineProperty(this, "handleMediaNodeUnmount", function (oldNode) {
-      _this.mediaNodes = _this.mediaNodes.filter(function (_ref3) {
-        var node = _ref3.node;
+      _this.mediaNodes = _this.mediaNodes.filter(function (_ref4) {
+        var node = _ref4.node;
         return oldNode !== node;
       });
     });
@@ -512,11 +527,9 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
     });
 
     _defineProperty(this, "selectedMediaContainerNode", function () {
-      var _this$view$state = _this.view.state,
-          selection = _this$view$state.selection,
-          schema = _this$view$state.schema;
+      var selection = _this.view.state.selection;
 
-      if (selection instanceof NodeSelection && (selection.node.type === schema.nodes.mediaSingle || selection.node.type === schema.nodes.mediaGroup)) {
+      if (selection instanceof NodeSelection && _this.isMediaSchemaNode(selection.node)) {
         return selection.node;
       }
 
@@ -557,9 +570,8 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
     value: function updateElement() {
       var newElement;
       var selectedContainer = this.selectedMediaContainerNode();
-      var mediaSingle = this.view.state.schema.nodes.mediaSingle;
 
-      if (selectedContainer && selectedContainer.type === mediaSingle) {
+      if (selectedContainer && this.isMediaSchemaNode(selectedContainer)) {
         newElement = this.getDomElement(this.view.domAtPos.bind(this.view));
       }
 
@@ -570,19 +582,20 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
   }, {
     key: "getDomElement",
     value: function getDomElement(domAtPos) {
-      var _this$view$state2 = this.view.state,
-          selection = _this$view$state2.selection,
-          schema = _this$view$state2.schema;
+      var _this$mediaOptions2;
+
+      var selection = this.view.state.selection;
 
       if (!(selection instanceof NodeSelection)) {
         return;
       }
 
-      if (selection.node.type !== schema.nodes.mediaSingle) {
+      if (!this.isMediaSchemaNode(selection.node)) {
         return;
       }
 
-      var node = findDomRefAtPos(selection.from, domAtPos);
+      var position = (_this$mediaOptions2 = this.mediaOptions) !== null && _this$mediaOptions2 !== void 0 && _this$mediaOptions2.allowMediaInline ? selection.from + 1 : selection.from;
+      var node = findDomRefAtPos(position, domAtPos);
 
       if (node) {
         if (!node.childNodes.length) {

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

@@ -6,8 +6,8 @@ import { css } from 'styled-components';
 import { mediaSingleSharedStyle, richMediaClassName } from '@atlaskit/editor-common';
 import { akEditorDeleteBorder, akEditorDeleteBackground, akEditorSelectedBorderBoldSize, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPadding, akEditorSelectedNodeClassName, akEditorDeleteIconColor } from '@atlaskit/editor-shared-styles';
 import { N60, B200 } from '@atlaskit/theme/colors';
-import { fileCardImageViewSelector, 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\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, richMediaClassName, fileCardImageViewSelector, akEditorDeleteIconColor, richMediaClassName, inlinePlayerClassName, akEditorDeleteIconColor, richMediaClassName, newFileExperienceClassName, akEditorDeleteIconColor, akEditorDeleteIconColor);
+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);
 /* `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/filePreviewItem.js

@@ -0,0 +1,62 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState } from 'react';
+import ReactDOM from 'react-dom';
+import { MediaViewer } from '@atlaskit/media-viewer';
+import FilePreviewIcon from '@atlaskit/icon/glyph/editor/file-preview';
+import ToolbarButton from '../../floating-toolbar/ui/Button';
+import { getSelectedMediaContainerNodeAttrs } from './utils';
+export var FilePreviewItem = function FilePreviewItem(_ref) {
+  var mediaPluginState = _ref.mediaPluginState;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isMediaViewerVisible = _useState2[0],
+      setMediaViewerVisible = _useState2[1];
+
+  var openMediaViewer = function openMediaViewer() {
+    setMediaViewerVisible(true);
+  };
+
+  var onMediaViewerClose = function onMediaViewerClose() {
+    setMediaViewerVisible(false);
+  };
+
+  var renderMediaViewer = function renderMediaViewer() {
+    if (isMediaViewerVisible) {
+      var dataSource = {
+        list: []
+      };
+      var selectedNodeAttrs = getSelectedMediaContainerNodeAttrs(mediaPluginState);
+
+      if (selectedNodeAttrs && mediaPluginState.mediaClientConfig) {
+        var id = selectedNodeAttrs.id,
+            _selectedNodeAttrs$co = selectedNodeAttrs.collection,
+            collection = _selectedNodeAttrs$co === void 0 ? '' : _selectedNodeAttrs$co;
+        var identifier = {
+          id: id,
+          mediaItemType: 'file',
+          collectionName: collection
+        };
+        return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(MediaViewer, {
+          collectionName: collection,
+          dataSource: dataSource,
+          mediaClientConfig: mediaPluginState.mediaClientConfig,
+          selectedItem: identifier,
+          onClose: onMediaViewerClose
+        }), document.body);
+      }
+    }
+
+    return null;
+  };
+
+  var mediaViewer = renderMediaViewer();
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ToolbarButton, {
+    testId: "file-preview-toolbar-button",
+    key: "editor.media.card.preview",
+    onClick: openMediaViewer,
+    icon: /*#__PURE__*/React.createElement(FilePreviewIcon, {
+      label: "file preview"
+    })
+  }), mediaViewer);
+};