@atlaskit/editor-core 151.3.0 → 153.0.1

package/dist/es2019/plugins/list/actions/conversions.js

@@ -4,6 +4,7 @@ import { findWrapping } from 'prosemirror-transform';
 import { findParentNodeClosestToPos } from 'prosemirror-utils';
 import { isListNode, joinSiblingLists } from '../utils/node';
 import { isEmptyParagraph } from '../../../utils';
+import { findFirstParentListNode } from '../utils/find';
 export function convertListType({
   tr,
   nextListNodeType
@@ -35,82 +36,50 @@ export function convertListType({
     startIndex,
     endIndex,
     depth
-  } = nodeRangeAroundList;
-  const before = {
-    from: !isListNode(parentNode.child(startIndex)) ? // @ts-ignore
-    doc.resolve(nodeRangeAroundList.$from.posAtIndex(startIndex, depth) + 1) : null,
-    to: null
-  };
-  const after = {
-    from: null,
-    to: !isListNode(parentNode.child(endIndex - 1)) ? doc.resolve( // @ts-ignore
-    nodeRangeAroundList.$from.posAtIndex(endIndex - 1, depth) + 1) : null
-  };
-  let isListNodeFound = false;
-  let firstEmptyParagraphAfterListFound = false;
-
-  for (let i = startIndex; i < endIndex; i++) {
-    // @ts-ignore posAtIndex is a public API but has no type yet
-    const position = nodeRangeAroundList.$from.posAtIndex(i, depth);
-    const resolvedPosition = doc.resolve(position);
-
-    if (isEmptyParagraph(parentNode.child(i)) && !isListNodeFound) {
-      before.from = doc.resolve( // @ts-ignore posAtIndex is a public API but has no type yet
-      nodeRangeAroundList.$from.posAtIndex(i, depth) + 2);
-    }
-
-    if (isEmptyParagraph(parentNode.child(i)) && isListNodeFound && !firstEmptyParagraphAfterListFound) {
-      after.to = resolvedPosition;
-      firstEmptyParagraphAfterListFound = true;
-    }
-
-    if (!isListNode(parentNode.child(i)) && !isListNodeFound) {
-      before.to = doc.resolve(resolvedPosition.pos + 1);
-    } else if (!isListNodeFound) {
-      isListNodeFound = true;
-      const endNodePosition = doc.resolve(resolvedPosition.pos + 1).end() + 1;
-
-      if (doc.resolve(endNodePosition).nodeAfter) {
-        after.from = doc.resolve(endNodePosition + 1);
+  } = nodeRangeAroundList; // Checking for invalid nodes to prevent conversion
+  // eg. a panel cannot be wrapped in a list so return
+  // It will skip this check if the selection begins within a list
+  // This is to match the behaviour of the toolbar buttons being disabled
+
+  if (!findFirstParentListNode($from)) {
+    for (let i = startIndex; i < endIndex; i++) {
+      const position = nodeRangeAroundList.$from.posAtIndex(i, depth);
+      const resolvedPosition = doc.resolve(position);
+      const currentChild = parentNode.child(i);
+      const currentNodeRange = resolvedPosition.blockRange(tr.doc.resolve(position + currentChild.nodeSize));
+
+      if (currentNodeRange && !isListNode(currentChild) && !findWrapping(currentNodeRange, nextListNodeType)) {
+        return;
       }
     }
-  }
+  } // Checking for any non list nodes and wrapping them in a list
+  // so they can be converted
 
-  let beforeConversionArgs, beforeRange, afterConversionArgs, afterRange;
-
-  if (after.from && after.to) {
-    const mappedFrom = tr.mapping.map(after.from.pos);
-    const mappedTo = tr.mapping.map(after.to.pos);
-    afterRange = new NodeRange(tr.doc.resolve(mappedFrom), tr.doc.resolve(mappedTo), nodeRangeAroundList.depth);
-    afterConversionArgs = {
-      tr,
-      nextListNodeType,
-      nodeRange: afterRange
-    };
-  }
 
-  if (before.from && before.to) {
-    const mappedFrom = tr.mapping.map(before.from.pos);
-    const mappedTo = tr.mapping.map(before.to.pos);
-    beforeRange = new NodeRange(tr.doc.resolve(mappedFrom), tr.doc.resolve(mappedTo), nodeRangeAroundList.depth);
-    beforeConversionArgs = {
-      tr,
-      nextListNodeType,
-      nodeRange: beforeRange
-    };
-  }
+  tr.doc.nodesBetween(nodeRangeAroundList.start, nodeRangeAroundList.end, (node, pos) => {
+    // Skip over any nodes that are part of a list
+    if (findFirstParentListNode(tr.doc.resolve(tr.mapping.map(pos)))) {
+      return false;
+    } // The following applies to suitable nodes that are not within a list
 
-  if (!afterRange && !beforeRange || afterRange && !findWrapping(afterRange, nextListNodeType) || beforeRange && !findWrapping(beforeRange, nextListNodeType)) {
-    return;
-  }
 
-  if (afterConversionArgs) {
-    convertAroundList(afterConversionArgs);
-  }
+    const currentNodeNotWrappedInList = node;
+    const isNotAnEmptyParagraphAndIsParagraphOrLeafNode = !isEmptyParagraph(currentNodeNotWrappedInList) && (!node.type.isBlock || node.type.name === 'paragraph');
 
-  if (beforeConversionArgs) {
-    convertAroundList(beforeConversionArgs);
-  }
+    if (isNotAnEmptyParagraphAndIsParagraphOrLeafNode) {
+      const remainingNodeRange = new NodeRange(tr.doc.resolve(tr.mapping.map(pos)), tr.doc.resolve(tr.mapping.map(pos) + currentNodeNotWrappedInList.nodeSize), nodeRangeAroundList.depth);
+      convertAroundList({
+        tr,
+        nextListNodeType,
+        nodeRange: remainingNodeRange
+      });
+      return false;
+    }
+  });
+  convertSelectedList({
+    tr,
+    nextListNodeType
+  });
 
   if (tr.docChanged) {
     joinSiblingLists({

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

@@ -1,5 +1,5 @@
 // Common Translations will live here
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 export const messages = defineMessages({
   unorderedList: {
     id: 'fabric.editor.unorderedList',

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

@@ -195,9 +195,13 @@ const extractListFromParagraph = (node, parent, schema) => {
     } // Return false to prevent replaceWith from wrapping the text node in a paragraph
     // paragraph since that will be done later. If it's done here, it will fail
     // the paragraph.validContent check.
+    // Dont return false if there are lists, as they arent validContent for paragraphs
+    // and will result in hanging textNodes
 
 
-    if (listified.some(node => node.isText)) {
+    const containsList = listified.some(node => node.type === bulletList || node.type === orderedList);
+
+    if (listified.some(node => node.isText) && !containsList) {
       return false;
     }
 

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

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { PureComponent } from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import BulletListIcon from '@atlaskit/icon/glyph/editor/bullet-list';
 import NumberListIcon from '@atlaskit/icon/glyph/editor/number-list';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';

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

@@ -31,10 +31,10 @@ const mediaPlugin = options => ({
     const {
       allowMediaGroup = true,
       allowMediaSingle = false,
-      allowMediaInline = false,
       featureFlags
     } = options || {};
     const captions = getMediaFeatureFlag('captions', featureFlags);
+    const allowMediaInline = getMediaFeatureFlag('mediaInline', featureFlags);
     const mediaSingleNode = captions ? mediaSingleWithCaption : mediaSingle;
     return [{
       name: 'mediaGroup',
@@ -77,21 +77,23 @@ const mediaPlugin = options => ({
         portalProviderAPI,
         reactContext,
         dispatchAnalyticsEvent
-      }) => createPlugin(schema, {
-        providerFactory,
-        nodeViews: {
-          mediaGroup: ReactMediaGroupNode(portalProviderAPI, eventDispatcher, providerFactory, options),
-          mediaSingle: ReactMediaSingleNode(portalProviderAPI, eventDispatcher, providerFactory, dispatchAnalyticsEvent, options),
-          media: ReactMediaNode(portalProviderAPI, eventDispatcher, providerFactory, options),
-          mediaInline: ReactMediaInlineNode(portalProviderAPI, eventDispatcher, providerFactory)
-        },
-        errorReporter,
-        uploadErrorHandler: options && options.uploadErrorHandler,
-        waitForMediaUpload: options && options.waitForMediaUpload,
-        customDropzoneContainer: options && options.customDropzoneContainer,
-        customMediaPicker: options && options.customMediaPicker,
-        allowResizing: !!(options && options.allowResizing)
-      }, reactContext, dispatch, options)
+      }) => {
+        return createPlugin(schema, {
+          providerFactory,
+          nodeViews: {
+            mediaGroup: ReactMediaGroupNode(portalProviderAPI, eventDispatcher, providerFactory, options),
+            mediaSingle: ReactMediaSingleNode(portalProviderAPI, eventDispatcher, providerFactory, dispatchAnalyticsEvent, options),
+            media: ReactMediaNode(portalProviderAPI, eventDispatcher, providerFactory, options),
+            mediaInline: ReactMediaInlineNode(portalProviderAPI, eventDispatcher, providerFactory)
+          },
+          errorReporter,
+          uploadErrorHandler: options && options.uploadErrorHandler,
+          waitForMediaUpload: options && options.waitForMediaUpload,
+          customDropzoneContainer: options && options.customDropzoneContainer,
+          customMediaPicker: options && options.customMediaPicker,
+          allowResizing: !!(options && options.allowResizing)
+        }, reactContext, dispatch, options);
+      }
     }, {
       name: 'mediaKeymap',
       plugin: () => keymapPlugin(options)
@@ -221,7 +223,7 @@ const mediaPlugin = options => ({
     }],
     floatingToolbar: (state, intl, providerFactory) => floatingToolbar(state, intl, {
       providerFactory,
-      allowMediaInline: options && options.allowMediaInline,
+      allowMediaInline: options && getMediaFeatureFlag('mediaInline', options.featureFlags),
       allowResizing: options && options.allowResizing,
       allowResizingInTables: options && options.allowResizingInTables,
       allowAnnotation: options && options.allowAnnotation,

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

@@ -11,6 +11,7 @@ import { isNodeSelectedOrInRange, SelectedState } from '../../../utils/nodes';
 import { pluginKey as editorDisabledPluginKey } from '../../editor-disabled';
 import { stateKey as mediaStateKey } from '../pm-plugins/plugin-key';
 import { MediaNodeUpdater } from './mediaNodeUpdater';
+import { getMediaFeatureFlag } from '@atlaskit/media-common';
 
 const isMediaGroupSelectedFromProps = props => {
   return isNodeSelectedOrInRange(props.anchorPos, props.headPos, props.getPos(), props.node.nodeSize);
@@ -135,7 +136,7 @@ export default class MediaGroup extends React.Component {
           onClick: () => {
             setNodeSelection(this.props.view, getNodePos());
           },
-          ...mediaInlineOptions(mediaOptions.allowMediaInline)
+          ...mediaInlineOptions(getMediaFeatureFlag('mediaInline', mediaOptions.featureFlags))
         };
       });
       return /*#__PURE__*/React.createElement(Filmstrip, {
@@ -278,8 +279,9 @@ class MediaGroupNodeView extends ReactNodeView {
 }
 
 export const ReactMediaGroupNode = (portalProviderAPI, eventDispatcher, providerFactory, mediaOptions = {}) => (node, view, getPos) => {
+  const hasIntlContext = true;
   return new MediaGroupNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {
     providerFactory,
     mediaOptions
-  }).init();
+  }, undefined, undefined, undefined, hasIntlContext).init();
 };

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

@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from 'react';
-import { ReactNodeView } from '../../../nodeviews/';
+import { SelectionBasedNodeView } from '../../../nodeviews/';
 import { MediaInlineCard } from '@atlaskit/media-card';
 import { WithProviders } from '@atlaskit/editor-common';
+import { MediaInlineNodeSelector } from './styles';
 export const MediaInline = props => {
   const [viewMediaClientConfig, setViewMediaClientConfig] = useState({});
   useEffect(() => {
@@ -27,14 +28,16 @@ export const MediaInline = props => {
     collectionName: collection
   };
   return /*#__PURE__*/React.createElement(MediaInlineCard, {
+    isSelected: props.isSelected,
     identifier: identifier,
     mediaClientConfig: viewMediaClientConfig
   });
 };
-export class MediaInlineNodeView extends ReactNodeView {
+export class MediaInlineNodeView extends SelectionBasedNodeView {
   createDomRef() {
     const domRef = document.createElement('span');
     domRef.contentEditable = 'false';
+    domRef.classList.add(MediaInlineNodeSelector);
     return domRef;
   }
 
@@ -54,7 +57,7 @@ export class MediaInlineNodeView extends ReactNodeView {
       return true;
     }
 
-    return false;
+    return super.viewShouldUpdate(nextNode);
   }
 
   render(props) {
@@ -74,7 +77,8 @@ export class MediaInlineNodeView extends ReactNodeView {
         return /*#__PURE__*/React.createElement(MediaInline, {
           identifier: this.node.attrs.id,
           mediaProvider: mediaProvider,
-          node: this.node
+          node: this.node,
+          isSelected: this.nodeInsideSelection()
         });
       }
     });

package/dist/es2019/plugins/media/nodeviews/mediaNodeView/index.js

@@ -152,9 +152,10 @@ class MediaNodeView extends SelectionBasedNodeView {
 }
 
 export const ReactMediaNode = (portalProviderAPI, eventDispatcher, providerFactory, mediaOptions = {}) => (node, view, getPos) => {
+  const hasIntlContext = true;
   return new MediaNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {
     eventDispatcher,
     providerFactory,
     mediaOptions
-  }).init();
+  }, undefined, undefined, undefined, hasIntlContext).init();
 };

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

@@ -13,7 +13,7 @@ import { stateKey as mediaPluginKey } from '../pm-plugins/main';
 import { MediaNodeUpdater } from './mediaNodeUpdater';
 import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
-import { FigureWrapper } from './styles';
+import { FigureWrapper, MediaSingleNodeSelector } from './styles';
 import { floatingLayouts, isRichMediaInsideOfBlockNode } from '../../../utils/rich-media-utils';
 import { getAttrsFromUrl } from '@atlaskit/media-client';
 import { isMediaBlobUrlFromAttrs } from '../utils/media-common';
@@ -289,7 +289,9 @@ export default class MediaSingleNode extends Component {
     const lineLength = this.getLineLength(view, getPos()) || this.props.lineLength;
     const isSelected = selected();
     const shouldShowPlaceholder = getMediaFeatureFlag('captions', mediaOptions.featureFlags) && node.childCount !== 2 && isSelected && state.selection instanceof NodeSelection;
-    const MediaChildren = /*#__PURE__*/React.createElement(FigureWrapper, null, /*#__PURE__*/React.createElement("div", {
+    const MediaChildren = /*#__PURE__*/React.createElement(FigureWrapper, {
+      className: MediaSingleNodeSelector
+    }, /*#__PURE__*/React.createElement("div", {
       ref: this.props.forwardRef
     }), shouldShowPlaceholder && /*#__PURE__*/React.createElement(CaptionPlaceholder, {
       onClick: this.clickPlaceholder
@@ -391,12 +393,12 @@ class MediaSingleNodeView extends ReactNodeView {
     return undefined;
   }
 
-  update(node, decorations, isValidUpdate) {
+  update(node, decorations, _innerDecorations, isValidUpdate) {
     if (!isValidUpdate) {
       isValidUpdate = (currentNode, newNode) => this.getNodeMediaId(currentNode) === this.getNodeMediaId(newNode);
     }
 
-    return super.update(node, decorations, isValidUpdate);
+    return super.update(node, decorations, _innerDecorations, isValidUpdate);
   }
 
   render(props, forwardRef) {
@@ -456,7 +458,7 @@ class MediaSingleNodeView extends ReactNodeView {
       if (offsetLeft !== this.lastOffsetLeft) {
         this.lastOffsetLeft = offsetLeft;
         this.forceViewUpdate = true;
-        this.update(this.node, [], () => true);
+        this.update(this.node, [], [], () => true);
       }
     }
 
@@ -466,6 +468,7 @@ class MediaSingleNodeView extends ReactNodeView {
 }
 
 export const ReactMediaSingleNode = (portalProviderAPI, eventDispatcher, providerFactory, dispatchAnalyticsEvent, mediaOptions = {}) => (node, view, getPos) => {
+  const hasIntlContext = true;
   return new MediaSingleNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {
     eventDispatcher,
     fullWidthMode: mediaOptions.fullWidthEnabled,
@@ -473,5 +476,5 @@ export const ReactMediaSingleNode = (portalProviderAPI, eventDispatcher, provide
     mediaOptions,
     dispatchAnalyticsEvent,
     isCopyPasteEnabled: mediaOptions.isCopyPasteEnabled
-  }).init();
+  }, undefined, undefined, undefined, hasIntlContext).init();
 };

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

@@ -1,5 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
+export const MediaInlineNodeSelector = 'media-inline-node';
+export const MediaSingleNodeSelector = 'media-single-node';
 export const FigureWrapper = styled.figure`
   margin: 0;
 `;

package/dist/es2019/plugins/media/pm-plugins/alt-text/messages.js

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 export const messages = defineMessages({
   altText: {
     id: 'fabric.editor.addAltText',

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

@@ -5,7 +5,7 @@ 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';
 import { messages } from '../messages';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import Button from '../../../../floating-toolbar/ui/Button';
 import PanelTextInput from '../../../../../ui/PanelTextInput';
 import * as keymaps from '../../../../../keymaps';
@@ -186,6 +186,8 @@ export class AltTextEditComponent extends React.Component {
       onClick: this.closeMediaAltTextMenu
     })), /*#__PURE__*/React.createElement(PanelTextInput, {
       testId: "alt-text-input",
+      ariaLabel: formatMessage(messages.placeholder),
+      describedById: "support-text",
       placeholder: formatMessage(messages.placeholder),
       defaultValue: this.state.lastValue,
       onCancel: this.dispatchCancelEvent,
@@ -202,7 +204,9 @@ export class AltTextEditComponent extends React.Component {
       })),
       tooltipContent: formatMessage(messages.clear),
       onClick: this.handleClearText
-    }))), !!errorsList.length && /*#__PURE__*/React.createElement(ValidationWrapper, null, errorsList), /*#__PURE__*/React.createElement(SupportText, null, formatMessage(messages.supportText)));
+    }))), !!errorsList.length && /*#__PURE__*/React.createElement(ValidationWrapper, null, errorsList), /*#__PURE__*/React.createElement(SupportText, {
+      id: "support-text"
+    }, formatMessage(messages.supportText)));
   }
 
   fireAnalytics(actionType) {

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

@@ -4,7 +4,7 @@ import ReactDOM from 'react-dom';
 import { NodeSelection, Plugin } from 'prosemirror-state';
 import { insertPoint } from 'prosemirror-transform';
 import { Decoration, DecorationSet } from 'prosemirror-view';
-import { ErrorReporter } from '@atlaskit/editor-common';
+import { ErrorReporter, browser } from '@atlaskit/editor-common';
 import assert from 'assert';
 import { findDomRefAtPos, isNodeSelection } from 'prosemirror-utils';
 import { insertMediaSingleNode, isMediaSingle } from '../utils/media-single';
@@ -18,6 +18,9 @@ import PickerFacade from '../picker-facade';
 import { INPUT_METHOD } from '../../analytics/types';
 import { isImage } from '../utils/is-image';
 import { isInEmptyLine } from '../../../utils/document';
+import { getMediaFeatureFlag } from '@atlaskit/media-common';
+import { isInListItem } from '../../../utils';
+import { CAPTION_PLACEHOLDER_ID } from '../ui/CaptionPlaceholder';
 export { stateKey } from './plugin-key';
 
 const createDropPlaceholder = allowDropLine => {
@@ -157,7 +160,7 @@ export class MediaPluginStateImplementation {
         media
       } = this.view.state.schema.nodes;
 
-      if ((_this$mediaOptions = this.mediaOptions) !== null && _this$mediaOptions !== void 0 && _this$mediaOptions.allowMediaInline) {
+      if (getMediaFeatureFlag('mediaInline', (_this$mediaOptions = this.mediaOptions) === null || _this$mediaOptions === void 0 ? void 0 : _this$mediaOptions.featureFlags)) {
         return type === mediaSingle || type === media || type === mediaInline;
       }
 
@@ -194,7 +197,7 @@ export class MediaPluginStateImplementation {
 
       if (isMediaSingle(state.schema, mediaStateWithContext.fileMimeType)) {
         insertMediaSingleNode(this.view, mediaStateWithContext, this.getInputMethod(pickerType), collection, this.mediaOptions && this.mediaOptions.alignLeftOnInsert);
-      } else if ((_this$mediaOptions2 = this.mediaOptions) !== null && _this$mediaOptions2 !== void 0 && _this$mediaOptions2.allowMediaInline && !isInEmptyLine(state) && !isInsidePotentialEmptyParagraph(state) && canInsertMediaInline(state)) {
+      } else if (getMediaFeatureFlag('mediaInline', (_this$mediaOptions2 = this.mediaOptions) === null || _this$mediaOptions2 === void 0 ? void 0 : _this$mediaOptions2.featureFlags) && !isInEmptyLine(state) && (!isInsidePotentialEmptyParagraph(state) || isInListItem(state)) && canInsertMediaInline(state)) {
         insertMediaInlineNode(this.view, mediaStateWithContext, collection, this.getInputMethod(pickerType));
       } else {
         insertMediaGroupNode(this.view, [mediaStateWithContext], collection, this.getInputMethod(pickerType));
@@ -491,8 +494,6 @@ export class MediaPluginStateImplementation {
   }
 
   getDomElement(domAtPos) {
-    var _this$mediaOptions3;
-
     const {
       selection
     } = this.view.state;
@@ -505,16 +506,14 @@ export class MediaPluginStateImplementation {
       return;
     }
 
-    const position = (_this$mediaOptions3 = this.mediaOptions) !== null && _this$mediaOptions3 !== void 0 && _this$mediaOptions3.allowMediaInline ? selection.from + 1 : selection.from;
-    const node = findDomRefAtPos(position, domAtPos);
+    const node = findDomRefAtPos(selection.from, domAtPos);
 
     if (node) {
       if (!node.childNodes.length) {
         return node.parentNode;
       }
 
-      const target = node.querySelector('figure') || node;
-      return target;
+      return node;
     }
 
     return;
@@ -648,13 +647,21 @@ export const createPlugin = (_schema, options, reactContext, dispatch, mediaOpti
 
     },
 
-    filterTransaction(transaction, state) {
-      // Media node inside mediaSingle should not be selected
-      // We are relying on plugins/media/nodeviews/mediaNodeView/media.tsx#selectMediaSingleFromCard
-      // to set selection on correct mediaSingle node,
-      // We don't use 'appendTransaction' because we would like to avoid have additional transactions
-      // http://product-fabric.atlassian.net/browse/ED-10091
-      return !(transaction.selectionSet && isNodeSelection(transaction.selection) && transaction.selection.node.type === state.schema.nodes.media && transaction.selection.$anchor.parent.type === state.schema.nodes.mediaSingle);
+    appendTransaction(transactions, _oldState, newState) {
+      for (const transaction of transactions) {
+        const isSelectionOnMediaInsideMediaSingle = transaction.selectionSet && isNodeSelection(transaction.selection) && transaction.selection.node.type === newState.schema.nodes.media && transaction.selection.$anchor.parent.type === newState.schema.nodes.mediaSingle; // Note: this causes an additional transaction when selecting a media node
+        // through clicking  on it with the cursor.
+
+        if (isSelectionOnMediaInsideMediaSingle) {
+          // If a selection has been placed on a media inside a media single,
+          // we shift it to the media single parent as other code is opinionated about
+          // the selection landing there. In particular the caption insertion and selection
+          // action.
+          return newState.tr.setSelection(NodeSelection.create(newState.doc, transaction.selection.$from.pos - 1));
+        }
+      }
+
+      return;
     },
 
     key: stateKey,
@@ -716,8 +723,17 @@ export const createPlugin = (_schema, options, reactContext, dispatch, mediaOpti
       handleTextInput(view) {
         getMediaPluginState(view.state).splitMediaGroup();
         return false;
-      }
+      },
+
+      handleClick: (_editorView, _pos, event) => {
+        var _event$target;
 
+        const clickedInsideCaptionPlaceholder = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.closest(`[data-id="${CAPTION_PLACEHOLDER_ID}"]`); // Workaround for Chrome given a regression introduced in prosemirror-view@1.18.6
+        // Returning true prevents that updateSelection() is getting called in the commit below:
+        // @see https://github.com/ProseMirror/prosemirror-view/compare/1.18.5...1.18.6
+
+        return Boolean((browser.chrome || browser.safari) && clickedInsideCaptionPlaceholder);
+      }
     }
   });
 };

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

@@ -0,0 +1,47 @@
+import { NodeSelection } from 'prosemirror-state';
+import { isNodeSelection, removeSelectedNode, safeInsert } from 'prosemirror-utils';
+export const changeInlineToMediaCard = (state, dispatch) => {
+  const {
+    media,
+    mediaInline,
+    mediaGroup
+  } = state.schema.nodes;
+  const selectedNode = state.selection instanceof NodeSelection && state.selection.node.type === mediaInline && state.selection.node;
+
+  if (!selectedNode) {
+    return false;
+  }
+
+  const {
+    id,
+    type,
+    collection
+  } = selectedNode.attrs;
+  const mediaNode = media.createChecked({
+    id,
+    type,
+    collection
+  });
+  const group = mediaGroup.createChecked({}, mediaNode);
+  const nodePos = state.tr.doc.resolve(state.selection.from).end();
+  let tr = state.tr;
+  tr = removeSelectedNode(tr);
+  tr = safeInsert(group, nodePos, true)(tr);
+
+  if (dispatch) {
+    dispatch(tr);
+  }
+
+  return true;
+};
+export const removeInlineCard = (state, dispatch) => {
+  if (isNodeSelection(state.selection)) {
+    if (dispatch) {
+      dispatch(removeSelectedNode(state.tr));
+    }
+
+    return true;
+  }
+
+  return false;
+};

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

@@ -1,11 +1,13 @@
 import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
 import { MediaViewer } from '@atlaskit/media-viewer';
+import { messages } from '@atlaskit/media-ui';
 import FilePreviewIcon from '@atlaskit/icon/glyph/editor/file-preview';
 import ToolbarButton from '../../floating-toolbar/ui/Button';
 import { getSelectedMediaContainerNodeAttrs } from './utils';
 export const FilePreviewItem = ({
-  mediaPluginState
+  mediaPluginState,
+  intl
 }) => {
   const [isMediaViewerVisible, setMediaViewerVisible] = useState(false);
 
@@ -48,12 +50,14 @@ export const FilePreviewItem = ({
   };
 
   const mediaViewer = renderMediaViewer();
+  const tooltipContent = intl.formatMessage(messages.preview);
   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"
-    })
+    }),
+    tooltipContent: tooltipContent
   }), mediaViewer);
 };