@atlaskit/editor-core 148.0.0 → 149.0.3

package/dist/es2019/plugins/floating-toolbar/ui/EditorHideEmojiIcon.js

@@ -0,0 +1,28 @@
+import React from 'react';
+export default function EditorHideEmojiIcon() {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "24",
+    height: "24",
+    fill: "white",
+    fillOpacity: "0.01"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M5.84238 8.67075C5.29444 9.68427 5 10.827 5 12C5 13.8565 5.7375 15.637 7.05025 16.9497C8.36301 18.2625 10.1435 19 12 19C12.9193 19 13.8295 18.8189 14.6788 18.4672C14.9012 18.375 15.1183 18.2717 15.3292 18.1576L14.2087 17.037C13.5324 17.3347 12.7851 17.5 12 17.5C8.967 17.5 6.5 15.033 6.5 12C6.50084 11.2327 6.66182 10.4821 6.9644 9.79277L5.84238 8.67075ZM17.0371 14.2086C17.3347 13.5323 17.5 12.7851 17.5 12C17.5 8.967 15.033 6.5 12 6.5C11.2327 6.50084 10.4821 6.6618 9.79285 6.96437L8.67083 5.84234C9.68433 5.29442 10.827 5 12 5C12.9193 5 13.8295 5.18106 14.6788 5.53284C15.5281 5.88463 16.2997 6.40024 16.9497 7.05025C17.5998 7.70026 18.1154 8.47194 18.4672 9.32122C18.8189 10.1705 19 11.0807 19 12C19 12.9193 18.8189 13.8295 18.4672 14.6788C18.375 14.9012 18.2717 15.1182 18.1577 15.3292L17.0371 14.2086Z",
+    fill: "currentColor"
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: "4.31882",
+    y: "5.55618",
+    width: "1.75",
+    height: "19.9758",
+    rx: "0.875",
+    transform: "rotate(-45 4.31882 5.55618)",
+    fill: "currentColor"
+  }));
+}

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

@@ -1,10 +1,10 @@
 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
 
 const EmojiPickerButtonWrapper = styled.div`
   position: relative;
@@ -69,8 +69,6 @@ export const 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/es2019/plugins/help-dialog/ui/index.js

@@ -4,7 +4,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';
@@ -237,28 +237,26 @@ export const getComponentFromKeymap = keymap => {
   }));
 };
 const ModalHeader = injectIntl(({
-  onClose,
-  showKeyline,
   intl: {
     formatMessage
   }
-}) => /*#__PURE__*/React.createElement(Header, {
-  showKeyline: showKeyline
-}, /*#__PURE__*/React.createElement(FormattedMessage, messages.editorHelp), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ToolbarButton, {
-  onClick: onClose,
-  title: formatMessage(messages.closeHelpDialog),
-  spacing: "compact",
-  iconBefore: /*#__PURE__*/React.createElement(CrossIcon, {
-    label: formatMessage(messages.closeHelpDialog),
-    size: "medium"
-  })
-}))));
+}) => {
+  const {
+    onClose
+  } = useModal();
+  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",
+    iconBefore: /*#__PURE__*/React.createElement(CrossIcon, {
+      label: formatMessage(messages.closeHelpDialog),
+      size: "medium"
+    })
+  })));
+});
 
-const ModalFooter = ({
-  showKeyline
-}) => /*#__PURE__*/React.createElement(Footer, {
-  showKeyline: showKeyline
-}, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.helpDialogTips, {
+const ModalFooter = () => /*#__PURE__*/React.createElement(Footer, null, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.helpDialogTips, {
   values: {
     keyMap: getComponentFromKeymap(keymaps.openHelp)
   }
@@ -305,12 +303,8 @@ class HelpDialog extends 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(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(form => {
       const keymap = form.keymap && form.keymap(this.props);
       return keymap && keymap[browser.mac ? 'mac' : 'windows'];
     }).map(form => /*#__PURE__*/React.createElement(Row, {
@@ -319,7 +313,7 @@ class HelpDialog extends React.Component {
       key: `autoFormatting-${form.name}`
     }, /*#__PURE__*/React.createElement("span", null, form.name), form.autoFormatting())))), /*#__PURE__*/React.createElement(Line, null), /*#__PURE__*/React.createElement(ColumnRight, null, /*#__PURE__*/React.createElement(Title, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.markdown)), /*#__PURE__*/React.createElement("div", null, this.formatting.filter(form => shortcutNamesWithoutKeymap.indexOf(form.type) === -1).map(form => form.autoFormatting && /*#__PURE__*/React.createElement(Row, {
       key: `autoFormatting-${form.name}`
-    }, /*#__PURE__*/React.createElement("span", null, form.name), form.autoFormatting()))))))) : null);
+    }, /*#__PURE__*/React.createElement("span", null, form.name), form.autoFormatting()))))))), /*#__PURE__*/React.createElement(ModalFooter, null)) : null);
   }
 
 }

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

@@ -10,7 +10,7 @@ export const Header = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  box-shadow: ${props => props.showKeyline ? `0 2px 0 ${colors.N30}` : 'none'};
+  box-shadow: 'none';
   color: ${colors.N400};
   background-color: ${colors.N0};
   border-radius: ${borderRadius()}px;
@@ -22,7 +22,7 @@ export const Footer = styled.div`
   color: ${colors.N300};
   padding: 24px;
   text-align: right;
-  box-shadow: ${props => props.showKeyline ? `0 -2px 0 ${colors.N30}` : 'none'};
+  box-shadow: 'none';
 `;
 export const ContentWrapper = styled.div`
   padding: 18px 20px;

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

@@ -56,19 +56,11 @@ const hyperlinkPlugin = options => ({
       keyshortcut: tooltip(addLink),
       icon: () => /*#__PURE__*/React.createElement(IconLink, null),
 
-      action(_insert, state) {
-        const pos = state.selection.from;
-        const {
-          nodeBefore
-        } = state.selection.$from;
-
-        if (!nodeBefore) {
-          return false;
-        }
-
-        const tr = state.tr.setMeta(stateKey, {
+      action(insert, state) {
+        const 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/es2019/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,7 +78,6 @@ const insertBlockPlugin = (options = {}) => ({
           layoutState: layoutStateKey
         },
         render: ({
-          typeAheadState,
           mentionState,
           blockTypeState,
           mediaState,
@@ -92,7 +92,7 @@ const insertBlockPlugin = (options = {}) => ({
           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/es2019/plugins/insert-block/ui/ToolbarInsertBlock/index.js

@@ -7,14 +7,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';
@@ -170,7 +170,12 @@ class ToolbarInsertBlock extends React.PureComponent {
       const {
         editorView
       } = this.props;
-      insertMentionQuery(inputMethod)(editorView.state, editorView.dispatch);
+
+      if (!editorView) {
+        return true;
+      }
+
+      createTypeAheadTools(editorView).openMention(inputMethod);
       return true;
     });
 
@@ -194,7 +199,6 @@ class ToolbarInsertBlock extends React.PureComponent {
         editorView
       } = this.props;
       insertDate(undefined, inputMethod)(editorView.state, editorView.dispatch);
-      openDatePicker()(editorView.state, editorView.dispatch);
       return true;
     });
 

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

@@ -111,20 +111,26 @@ const listPlugin = () => ({
       },
       render: ({
         listState: listState
-      }) => /*#__PURE__*/React.createElement(ToolbarLists, {
-        isSmall: isSmall,
-        isSeparator: true,
-        isReducedSpacing: isToolbarReducedSpacing,
-        disabled: disabled,
-        editorView: editorView,
-        popupsMountPoint: popupsMountPoint,
-        popupsBoundariesElement: popupsBoundariesElement,
-        popupsScrollableElement: popupsScrollableElement,
-        bulletListActive: listState.bulletListActive,
-        bulletListDisabled: listState.bulletListDisabled,
-        orderedListActive: listState.orderedListActive,
-        orderedListDisabled: listState.orderedListDisabled
-      })
+      }) => {
+        if (!listState) {
+          return null;
+        }
+
+        return /*#__PURE__*/React.createElement(ToolbarLists, {
+          isSmall: isSmall,
+          isSeparator: true,
+          isReducedSpacing: isToolbarReducedSpacing,
+          disabled: disabled,
+          editorView: editorView,
+          popupsMountPoint: popupsMountPoint,
+          popupsBoundariesElement: popupsBoundariesElement,
+          popupsScrollableElement: popupsScrollableElement,
+          bulletListActive: listState.bulletListActive,
+          bulletListDisabled: listState.bulletListDisabled,
+          orderedListActive: listState.orderedListActive,
+          orderedListDisabled: listState.orderedListDisabled
+        });
+      }
     });
   }
 

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

@@ -52,20 +52,20 @@ export const insertMacroFromMacroBrowser = (macroProvider, macroNode, isEditing)
       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) {
-          const 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) {
+      const 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/es2019/plugins/media/index.js

@@ -212,6 +212,7 @@ const mediaPlugin = options => ({
     }],
     floatingToolbar: (state, intl, providerFactory) => floatingToolbar(state, intl, {
       providerFactory,
+      allowMediaInline: options && options.allowMediaInline,
       allowResizing: options && options.allowResizing,
       allowResizingInTables: options && options.allowResizingInTables,
       allowAnnotation: options && options.allowAnnotation,

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

@@ -120,6 +120,7 @@ export default class MediaGroup extends React.Component {
           onClick: () => {
             setNodeSelection(this.props.view, getNodePos());
           },
+          shouldEnableDownloadButton: mediaOptions.enableDownloadButton,
           actions: [{
             handler: disabled ? () => {} : this.mediaPluginState.handleMediaNodeRemoval.bind(null, undefined, getNodePos),
             icon: /*#__PURE__*/React.createElement(EditorCloseIcon, {

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

@@ -123,7 +123,7 @@ export class MediaPluginStateImplementation {
         allowsUploads
       } = this; // 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
@@ -145,6 +145,23 @@ export class MediaPluginStateImplementation {
 
     _defineProperty(this, "getMediaOptions", () => this.options);
 
+    _defineProperty(this, "isMediaSchemaNode", ({
+      type
+    }) => {
+      var _this$mediaOptions;
+
+      const {
+        mediaSingle,
+        media
+      } = this.view.state.schema.nodes;
+
+      if ((_this$mediaOptions = this.mediaOptions) !== null && _this$mediaOptions !== void 0 && _this$mediaOptions.allowMediaInline) {
+        return type === mediaSingle || type === media;
+      }
+
+      return type === mediaSingle;
+    });
+
     _defineProperty(this, "hasUserAuthProvider", () => !!this.uploadMediaClientConfig && !!this.uploadMediaClientConfig.userAuthProvider);
 
     _defineProperty(this, "insertFile", (mediaState, onMediaStateChanged, pickerType) => {
@@ -411,11 +428,10 @@ export class MediaPluginStateImplementation {
 
     _defineProperty(this, "selectedMediaContainerNode", () => {
       const {
-        selection,
-        schema
+        selection
       } = this.view.state;
 
-      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;
       }
 
@@ -455,11 +471,8 @@ export class MediaPluginStateImplementation {
   updateElement() {
     let newElement;
     const selectedContainer = this.selectedMediaContainerNode();
-    const {
-      mediaSingle
-    } = this.view.state.schema.nodes;
 
-    if (selectedContainer && selectedContainer.type === mediaSingle) {
+    if (selectedContainer && this.isMediaSchemaNode(selectedContainer)) {
       newElement = this.getDomElement(this.view.domAtPos.bind(this.view));
     }
 
@@ -469,20 +482,22 @@ export class MediaPluginStateImplementation {
   }
 
   getDomElement(domAtPos) {
+    var _this$mediaOptions2;
+
     const {
-      selection,
-      schema
+      selection
     } = this.view.state;
 
     if (!(selection instanceof NodeSelection)) {
       return;
     }
 
-    if (selection.node.type !== schema.nodes.mediaSingle) {
+    if (!this.isMediaSchemaNode(selection.node)) {
       return;
     }
 
-    const node = findDomRefAtPos(selection.from, domAtPos);
+    const position = (_this$mediaOptions2 = this.mediaOptions) !== null && _this$mediaOptions2 !== void 0 && _this$mediaOptions2.allowMediaInline ? selection.from + 1 : selection.from;
+    const node = findDomRefAtPos(position, domAtPos);
 
     if (node) {
       if (!node.childNodes.length) {

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

@@ -2,7 +2,7 @@ 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';
+import { fileCardImageViewSelector, fileCardImageViewSelectedSelector, inlinePlayerClassName, newFileExperienceClassName } from '@atlaskit/media-card';
 export const mediaStyles = css`
   .ProseMirror {
     ${mediaSingleSharedStyle} & [layout='full-width'] .${richMediaClassName},
@@ -121,7 +121,12 @@ export const mediaStyles = css`
     transition: background-color 0s;
     transition: box-shadow 0s;
   }
-
+  .mediaGroupView-content-wrap.danger {
+    /* Media inline */
+    .${fileCardImageViewSelectedSelector}::after {
+      border: 1px solid ${akEditorDeleteIconColor};
+    }
+  }
   /* Danger when nested node or common */
   .danger {
     /* Media single */

package/dist/es2019/plugins/media/toolbar/filePreviewItem.js

@@ -0,0 +1,59 @@
+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 const FilePreviewItem = ({
+  mediaPluginState
+}) => {
+  const [isMediaViewerVisible, setMediaViewerVisible] = useState(false);
+
+  const openMediaViewer = () => {
+    setMediaViewerVisible(true);
+  };
+
+  const onMediaViewerClose = () => {
+    setMediaViewerVisible(false);
+  };
+
+  const renderMediaViewer = () => {
+    if (isMediaViewerVisible) {
+      const dataSource = {
+        list: []
+      };
+      const selectedNodeAttrs = getSelectedMediaContainerNodeAttrs(mediaPluginState);
+
+      if (selectedNodeAttrs && mediaPluginState.mediaClientConfig) {
+        const {
+          id,
+          collection = ''
+        } = selectedNodeAttrs;
+        const identifier = {
+          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;
+  };
+
+  const 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);
+};