@atlaskit/editor-core 151.2.1 → 153.0.0

package/dist/esm/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(_ref) {
   var tr = _ref.tr,
       nextListNodeType = _ref.nextListNodeType;
@@ -29,84 +30,50 @@ export function convertListType(_ref) {
   var parentNode = nodeRangeAroundList.parent;
   var startIndex = nodeRangeAroundList.startIndex,
       endIndex = nodeRangeAroundList.endIndex,
-      depth = nodeRangeAroundList.depth;
-  var before = {
-    from: !isListNode(parentNode.child(startIndex)) ? // @ts-ignore
-    doc.resolve(nodeRangeAroundList.$from.posAtIndex(startIndex, depth) + 1) : null,
-    to: null
-  };
-  var after = {
-    from: null,
-    to: !isListNode(parentNode.child(endIndex - 1)) ? doc.resolve( // @ts-ignore
-    nodeRangeAroundList.$from.posAtIndex(endIndex - 1, depth) + 1) : null
-  };
-  var isListNodeFound = false;
-  var firstEmptyParagraphAfterListFound = false;
-
-  for (var i = startIndex; i < endIndex; i++) {
-    // @ts-ignore posAtIndex is a public API but has no type yet
-    var position = nodeRangeAroundList.$from.posAtIndex(i, depth);
-    var 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;
-      var endNodePosition = doc.resolve(resolvedPosition.pos + 1).end() + 1;
-
-      if (doc.resolve(endNodePosition).nodeAfter) {
-        after.from = doc.resolve(endNodePosition + 1);
+      depth = nodeRangeAroundList.depth; // 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 (var i = startIndex; i < endIndex; i++) {
+      var position = nodeRangeAroundList.$from.posAtIndex(i, depth);
+      var resolvedPosition = doc.resolve(position);
+      var currentChild = parentNode.child(i);
+      var currentNodeRange = resolvedPosition.blockRange(tr.doc.resolve(position + currentChild.nodeSize));
+
+      if (currentNodeRange && !isListNode(currentChild) && !findWrapping(currentNodeRange, nextListNodeType)) {
+        return;
       }
     }
-  }
-
-  var beforeConversionArgs, beforeRange, afterConversionArgs, afterRange;
-
-  if (after.from && after.to) {
-    var mappedFrom = tr.mapping.map(after.from.pos);
-    var mappedTo = tr.mapping.map(after.to.pos);
-    afterRange = new NodeRange(tr.doc.resolve(mappedFrom), tr.doc.resolve(mappedTo), nodeRangeAroundList.depth);
-    afterConversionArgs = {
-      tr: tr,
-      nextListNodeType: nextListNodeType,
-      nodeRange: afterRange
-    };
-  }
+  } // Checking for any non list nodes and wrapping them in a list
+  // so they can be converted
 
-  if (before.from && before.to) {
-    var _mappedFrom = tr.mapping.map(before.from.pos);
 
-    var _mappedTo = tr.mapping.map(before.to.pos);
+  tr.doc.nodesBetween(nodeRangeAroundList.start, nodeRangeAroundList.end, function (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
 
-    beforeRange = new NodeRange(tr.doc.resolve(_mappedFrom), tr.doc.resolve(_mappedTo), nodeRangeAroundList.depth);
-    beforeConversionArgs = {
-      tr: tr,
-      nextListNodeType: nextListNodeType,
-      nodeRange: beforeRange
-    };
-  }
 
-  if (!afterRange && !beforeRange || afterRange && !findWrapping(afterRange, nextListNodeType) || beforeRange && !findWrapping(beforeRange, nextListNodeType)) {
-    return;
-  }
+    var currentNodeNotWrappedInList = node;
+    var isNotAnEmptyParagraphAndIsParagraphOrLeafNode = !isEmptyParagraph(currentNodeNotWrappedInList) && (!node.type.isBlock || node.type.name === 'paragraph');
 
-  if (afterConversionArgs) {
-    convertAroundList(afterConversionArgs);
-  }
-
-  if (beforeConversionArgs) {
-    convertAroundList(beforeConversionArgs);
-  }
+    if (isNotAnEmptyParagraphAndIsParagraphOrLeafNode) {
+      var remainingNodeRange = new NodeRange(tr.doc.resolve(tr.mapping.map(pos)), tr.doc.resolve(tr.mapping.map(pos) + currentNodeNotWrappedInList.nodeSize), nodeRangeAroundList.depth);
+      convertAroundList({
+        tr: tr,
+        nextListNodeType: nextListNodeType,
+        nodeRange: remainingNodeRange
+      });
+      return false;
+    }
+  });
+  convertSelectedList({
+    tr: tr,
+    nextListNodeType: nextListNodeType
+  });
 
   if (tr.docChanged) {
     joinSiblingLists({

package/dist/esm/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 var messages = defineMessages({
   unorderedList: {
     id: 'fabric.editor.unorderedList',

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

@@ -194,11 +194,17 @@ var extractListFromParagraph = function extractListFromParagraph(node, parent, s
     } // 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
 
 
+    var containsList = listified.some(function (node) {
+      return node.type === bulletList || node.type === orderedList;
+    });
+
     if (listified.some(function (node) {
       return node.isText;
-    })) {
+    }) && !containsList) {
       return false;
     }
 

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

@@ -12,7 +12,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 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/esm/plugins/media/index.js

@@ -33,11 +33,10 @@ var mediaPlugin = function mediaPlugin(options) {
           allowMediaGroup = _ref$allowMediaGroup === void 0 ? true : _ref$allowMediaGroup,
           _ref$allowMediaSingle = _ref.allowMediaSingle,
           allowMediaSingle = _ref$allowMediaSingle === void 0 ? false : _ref$allowMediaSingle,
-          _ref$allowMediaInline = _ref.allowMediaInline,
-          allowMediaInline = _ref$allowMediaInline === void 0 ? false : _ref$allowMediaInline,
           featureFlags = _ref.featureFlags;
 
       var captions = getMediaFeatureFlag('captions', featureFlags);
+      var allowMediaInline = getMediaFeatureFlag('mediaInline', featureFlags);
       var mediaSingleNode = captions ? mediaSingleWithCaption : mediaSingle;
       return [{
         name: 'mediaGroup',
@@ -229,7 +228,7 @@ var mediaPlugin = function mediaPlugin(options) {
       floatingToolbar: function floatingToolbar(state, intl, providerFactory) {
         return _floatingToolbar(state, intl, {
           providerFactory: 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/esm/plugins/media/nodeviews/mediaGroup.js

@@ -28,6 +28,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';
 
 var isMediaGroupSelectedFromProps = function isMediaGroupSelectedFromProps(props) {
   return isNodeSelectedOrInRange(props.anchorPos, props.headPos, props.getPos(), props.node.nodeSize);
@@ -160,7 +161,7 @@ var MediaGroup = /*#__PURE__*/function (_React$Component) {
           onClick: function onClick() {
             setNodeSelection(_this.props.view, getNodePos());
           }
-        }, mediaInlineOptions(mediaOptions.allowMediaInline));
+        }, mediaInlineOptions(getMediaFeatureFlag('mediaInline', mediaOptions.featureFlags)));
       });
 
       return /*#__PURE__*/React.createElement(Filmstrip, {
@@ -362,9 +363,10 @@ var MediaGroupNodeView = /*#__PURE__*/function (_ReactNodeView) {
 export var ReactMediaGroupNode = function ReactMediaGroupNode(portalProviderAPI, eventDispatcher, providerFactory) {
   var mediaOptions = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
   return function (node, view, getPos) {
+    var hasIntlContext = true;
     return new MediaGroupNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {
       providerFactory: providerFactory,
       mediaOptions: mediaOptions
-    }).init();
+    }, undefined, undefined, undefined, hasIntlContext).init();
   };
 };

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

@@ -1,5 +1,6 @@
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
+import _get from "@babel/runtime/helpers/get";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
@@ -12,9 +13,10 @@ 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; } }
 
 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 var MediaInline = function MediaInline(props) {
   var _useState = useState({}),
       _useState2 = _slicedToArray(_useState, 2),
@@ -66,12 +68,13 @@ export var MediaInline = function MediaInline(props) {
     collectionName: collection
   };
   return /*#__PURE__*/React.createElement(MediaInlineCard, {
+    isSelected: props.isSelected,
     identifier: identifier,
     mediaClientConfig: viewMediaClientConfig
   });
 };
-export var MediaInlineNodeView = /*#__PURE__*/function (_ReactNodeView) {
-  _inherits(MediaInlineNodeView, _ReactNodeView);
+export var MediaInlineNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
+  _inherits(MediaInlineNodeView, _SelectionBasedNodeVi);
 
   var _super = _createSuper(MediaInlineNodeView);
 
@@ -86,6 +89,7 @@ export var MediaInlineNodeView = /*#__PURE__*/function (_ReactNodeView) {
     value: function createDomRef() {
       var domRef = document.createElement('span');
       domRef.contentEditable = 'false';
+      domRef.classList.add(MediaInlineNodeSelector);
       return domRef;
     }
   }, {
@@ -108,7 +112,7 @@ export var MediaInlineNodeView = /*#__PURE__*/function (_ReactNodeView) {
         return true;
       }
 
-      return false;
+      return _get(_getPrototypeOf(MediaInlineNodeView.prototype), "viewShouldUpdate", this).call(this, nextNode);
     }
   }, {
     key: "render",
@@ -129,7 +133,8 @@ export var MediaInlineNodeView = /*#__PURE__*/function (_ReactNodeView) {
           return /*#__PURE__*/React.createElement(MediaInline, {
             identifier: _this.node.attrs.id,
             mediaProvider: mediaProvider,
-            node: _this.node
+            node: _this.node,
+            isSelected: _this.nodeInsideSelection()
           });
         }
       });
@@ -137,7 +142,7 @@ export var MediaInlineNodeView = /*#__PURE__*/function (_ReactNodeView) {
   }]);
 
   return MediaInlineNodeView;
-}(ReactNodeView);
+}(SelectionBasedNodeView);
 export var ReactMediaInlineNode = function ReactMediaInlineNode(portalProviderAPI, eventDispatcher, providerFactory) {
   return function (node, view, getPos) {
     return new MediaInlineNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {

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

@@ -179,10 +179,11 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
 export var ReactMediaNode = function ReactMediaNode(portalProviderAPI, eventDispatcher, providerFactory) {
   var mediaOptions = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
   return function (node, view, getPos) {
+    var hasIntlContext = true;
     return new MediaNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {
       eventDispatcher: eventDispatcher,
       providerFactory: providerFactory,
       mediaOptions: mediaOptions
-    }).init();
+    }, undefined, undefined, undefined, hasIntlContext).init();
   };
 };

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

@@ -31,7 +31,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';
@@ -416,7 +416,9 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
       var lineLength = this.getLineLength(view, getPos()) || this.props.lineLength;
       var isSelected = selected();
       var shouldShowPlaceholder = getMediaFeatureFlag('captions', mediaOptions.featureFlags) && node.childCount !== 2 && isSelected && state.selection instanceof NodeSelection;
-      var MediaChildren = /*#__PURE__*/React.createElement(FigureWrapper, null, /*#__PURE__*/React.createElement("div", {
+      var MediaChildren = /*#__PURE__*/React.createElement(FigureWrapper, {
+        className: MediaSingleNodeSelector
+      }, /*#__PURE__*/React.createElement("div", {
         ref: this.props.forwardRef
       }), shouldShowPlaceholder && /*#__PURE__*/React.createElement(CaptionPlaceholder, {
         onClick: this.clickPlaceholder
@@ -541,7 +543,7 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
     }
   }, {
     key: "update",
-    value: function update(node, decorations, isValidUpdate) {
+    value: function update(node, decorations, _innerDecorations, isValidUpdate) {
       var _this3 = this;
 
       if (!isValidUpdate) {
@@ -550,7 +552,7 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
         };
       }
 
-      return _get(_getPrototypeOf(MediaSingleNodeView.prototype), "update", this).call(this, node, decorations, isValidUpdate);
+      return _get(_getPrototypeOf(MediaSingleNodeView.prototype), "update", this).call(this, node, decorations, _innerDecorations, isValidUpdate);
     }
   }, {
     key: "render",
@@ -611,7 +613,7 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
         if (offsetLeft !== this.lastOffsetLeft) {
           this.lastOffsetLeft = offsetLeft;
           this.forceViewUpdate = true;
-          this.update(this.node, [], function () {
+          this.update(this.node, [], [], function () {
             return true;
           });
         }
@@ -627,6 +629,7 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
 export var ReactMediaSingleNode = function ReactMediaSingleNode(portalProviderAPI, eventDispatcher, providerFactory, dispatchAnalyticsEvent) {
   var mediaOptions = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
   return function (node, view, getPos) {
+    var hasIntlContext = true;
     return new MediaSingleNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {
       eventDispatcher: eventDispatcher,
       fullWidthMode: mediaOptions.fullWidthEnabled,
@@ -634,6 +637,6 @@ export var ReactMediaSingleNode = function ReactMediaSingleNode(portalProviderAP
       mediaOptions: mediaOptions,
       dispatchAnalyticsEvent: dispatchAnalyticsEvent,
       isCopyPasteEnabled: mediaOptions.isCopyPasteEnabled
-    }).init();
+    }, undefined, undefined, undefined, hasIntlContext).init();
   };
 };

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

@@ -4,6 +4,8 @@ var _templateObject, _templateObject2, _templateObject3;
 
 import React from 'react';
 import styled from 'styled-components';
+export var MediaInlineNodeSelector = 'media-inline-node';
+export var MediaSingleNodeSelector = 'media-single-node';
 export var FigureWrapper = styled.figure(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin: 0;\n"])));
 FigureWrapper.displayName = 'FigureWrapper';
 var AbsoluteDiv = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n"])));

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

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

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

@@ -19,7 +19,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';
@@ -168,6 +168,8 @@ export var AltTextEditComponent = /*#__PURE__*/function (_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,
@@ -184,7 +186,9 @@ export var AltTextEditComponent = /*#__PURE__*/function (_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)));
     }
   }, {
     key: "fireAnalytics",

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

@@ -4,6 +4,12 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -13,7 +19,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';
@@ -27,6 +33,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';
 
 var createDropPlaceholder = function createDropPlaceholder(allowDropLine) {
@@ -243,7 +252,7 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
           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) {
+      if (getMediaFeatureFlag('mediaInline', (_this$mediaOptions = _this.mediaOptions) === null || _this$mediaOptions === void 0 ? void 0 : _this$mediaOptions.featureFlags)) {
         return type === mediaSingle || type === media || type === mediaInline;
       }
 
@@ -282,7 +291,7 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
 
       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));
@@ -590,8 +599,6 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
   }, {
     key: "getDomElement",
     value: function getDomElement(domAtPos) {
-      var _this$mediaOptions3;
-
       var selection = this.view.state.selection;
 
       if (!(selection instanceof NodeSelection)) {
@@ -602,16 +609,14 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
         return;
       }
 
-      var position = (_this$mediaOptions3 = this.mediaOptions) !== null && _this$mediaOptions3 !== void 0 && _this$mediaOptions3.allowMediaInline ? selection.from + 1 : selection.from;
-      var node = findDomRefAtPos(position, domAtPos);
+      var node = findDomRefAtPos(selection.from, domAtPos);
 
       if (node) {
         if (!node.childNodes.length) {
           return node.parentNode;
         }
 
-        var target = node.querySelector('figure') || node;
-        return target;
+        return node;
       }
 
       return;
@@ -804,13 +809,31 @@ export var createPlugin = function createPlugin(_schema, options, reactContext,
         return pluginState;
       }
     },
-    filterTransaction: function 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: function appendTransaction(transactions, _oldState, newState) {
+      var _iterator = _createForOfIteratorHelper(transactions),
+          _step;
+
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var transaction = _step.value;
+          var 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));
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+
+      return;
     },
     key: stateKey,
     view: function view(_view) {
@@ -866,6 +889,15 @@ export var createPlugin = function createPlugin(_schema, options, reactContext,
       handleTextInput: function handleTextInput(view) {
         getMediaPluginState(view.state).splitMediaGroup();
         return false;
+      },
+      handleClick: function handleClick(_editorView, _pos, event) {
+        var _event$target;
+
+        var clickedInsideCaptionPlaceholder = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.closest("[data-id=\"".concat(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/esm/plugins/media/toolbar/commands.js

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

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

@@ -2,11 +2,13 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 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 var FilePreviewItem = function FilePreviewItem(_ref) {
-  var mediaPluginState = _ref.mediaPluginState;
+  var mediaPluginState = _ref.mediaPluginState,
+      intl = _ref.intl;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -51,12 +53,14 @@ export var FilePreviewItem = function FilePreviewItem(_ref) {
   };
 
   var mediaViewer = renderMediaViewer();
+  var 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);
 };