@atlaskit/editor-core 151.3.0 → 152.0.0

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

@@ -49,6 +49,8 @@ var _pluginKey = require("../pm-plugins/plugin-key");
 
 var _mediaNodeUpdater = require("./mediaNodeUpdater");
 
+var _mediaCommon = require("@atlaskit/media-common");
+
 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) { (0, _defineProperty2.default)(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; }
@@ -181,7 +183,7 @@ var MediaGroup = /*#__PURE__*/function (_React$Component) {
           onClick: function onClick() {
             (0, _utils.setNodeSelection)(_this.props.view, getNodePos());
           }
-        }, mediaInlineOptions(mediaOptions.allowMediaInline));
+        }, mediaInlineOptions((0, _mediaCommon.getMediaFeatureFlag)('mediaInline', mediaOptions.featureFlags)));
       });
 
       return /*#__PURE__*/_react.default.createElement(_mediaFilmstrip.Filmstrip, {

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

@@ -13,6 +13,8 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/cl
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 
+var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
+
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
@@ -33,6 +35,8 @@ var _mediaCard = require("@atlaskit/media-card");
 
 var _editorCommon = require("@atlaskit/editor-common");
 
+var _styles = require("./styles");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -92,6 +96,7 @@ var MediaInline = function MediaInline(props) {
     collectionName: collection
   };
   return /*#__PURE__*/_react.default.createElement(_mediaCard.MediaInlineCard, {
+    isSelected: props.isSelected,
     identifier: identifier,
     mediaClientConfig: viewMediaClientConfig
   });
@@ -99,8 +104,8 @@ var MediaInline = function MediaInline(props) {
 
 exports.MediaInline = MediaInline;
 
-var MediaInlineNodeView = /*#__PURE__*/function (_ReactNodeView) {
-  (0, _inherits2.default)(MediaInlineNodeView, _ReactNodeView);
+var MediaInlineNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
+  (0, _inherits2.default)(MediaInlineNodeView, _SelectionBasedNodeVi);
 
   var _super = _createSuper(MediaInlineNodeView);
 
@@ -114,6 +119,7 @@ var MediaInlineNodeView = /*#__PURE__*/function (_ReactNodeView) {
     value: function createDomRef() {
       var domRef = document.createElement('span');
       domRef.contentEditable = 'false';
+      domRef.classList.add(_styles.MediaInlineNodeSelector);
       return domRef;
     }
   }, {
@@ -136,7 +142,7 @@ var MediaInlineNodeView = /*#__PURE__*/function (_ReactNodeView) {
         return true;
       }
 
-      return false;
+      return (0, _get2.default)((0, _getPrototypeOf2.default)(MediaInlineNodeView.prototype), "viewShouldUpdate", this).call(this, nextNode);
     }
   }, {
     key: "render",
@@ -157,14 +163,15 @@ var MediaInlineNodeView = /*#__PURE__*/function (_ReactNodeView) {
           return /*#__PURE__*/_react.default.createElement(MediaInline, {
             identifier: _this.node.attrs.id,
             mediaProvider: mediaProvider,
-            node: _this.node
+            node: _this.node,
+            isSelected: _this.nodeInsideSelection()
           });
         }
       });
     }
   }]);
   return MediaInlineNodeView;
-}(_nodeviews.ReactNodeView);
+}(_nodeviews.SelectionBasedNodeView);
 
 exports.MediaInlineNodeView = MediaInlineNodeView;
 

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

@@ -453,7 +453,9 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
 
       var shouldShowPlaceholder = (0, _mediaCommon2.getMediaFeatureFlag)('captions', mediaOptions.featureFlags) && node.childCount !== 2 && isSelected && state.selection instanceof _prosemirrorState.NodeSelection;
 
-      var MediaChildren = /*#__PURE__*/_react.default.createElement(_styles.FigureWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
+      var MediaChildren = /*#__PURE__*/_react.default.createElement(_styles.FigureWrapper, {
+        className: _styles.MediaSingleNodeSelector
+      }, /*#__PURE__*/_react.default.createElement("div", {
         ref: this.props.forwardRef
       }), shouldShowPlaceholder && /*#__PURE__*/_react.default.createElement(_CaptionPlaceholder.default, {
         onClick: this.clickPlaceholder
@@ -570,7 +572,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) {
@@ -579,7 +581,7 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
         };
       }
 
-      return (0, _get2.default)((0, _getPrototypeOf2.default)(MediaSingleNodeView.prototype), "update", this).call(this, node, decorations, isValidUpdate);
+      return (0, _get2.default)((0, _getPrototypeOf2.default)(MediaSingleNodeView.prototype), "update", this).call(this, node, decorations, _innerDecorations, isValidUpdate);
     }
   }, {
     key: "render",
@@ -640,7 +642,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;
           });
         }

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MediaCardWrapper = exports.FigureWrapper = void 0;
+exports.MediaCardWrapper = exports.FigureWrapper = exports.MediaSingleNodeSelector = exports.MediaInlineNodeSelector = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -15,6 +15,11 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _templateObject, _templateObject2, _templateObject3;
 
+var MediaInlineNodeSelector = 'media-inline-node';
+exports.MediaInlineNodeSelector = MediaInlineNodeSelector;
+var MediaSingleNodeSelector = 'media-single-node';
+exports.MediaSingleNodeSelector = MediaSingleNodeSelector;
+
 var FigureWrapper = _styledComponents.default.figure(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0;\n"])));
 
 exports.FigureWrapper = FigureWrapper;

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

@@ -207,6 +207,8 @@ var AltTextEditComponent = /*#__PURE__*/function (_React$Component) {
         onClick: this.closeMediaAltTextMenu
       })), /*#__PURE__*/_react.default.createElement(_PanelTextInput.default, {
         testId: "alt-text-input",
+        ariaLabel: formatMessage(_messages.messages.placeholder),
+        describedById: "support-text",
         placeholder: formatMessage(_messages.messages.placeholder),
         defaultValue: this.state.lastValue,
         onCancel: this.dispatchCancelEvent,
@@ -223,7 +225,9 @@ var AltTextEditComponent = /*#__PURE__*/function (_React$Component) {
         })),
         tooltipContent: formatMessage(_messages.messages.clear),
         onClick: this.handleClearText
-      }))), !!errorsList.length && /*#__PURE__*/_react.default.createElement(ValidationWrapper, null, errorsList), /*#__PURE__*/_react.default.createElement(SupportText, null, formatMessage(_messages.messages.supportText)));
+      }))), !!errorsList.length && /*#__PURE__*/_react.default.createElement(ValidationWrapper, null, errorsList), /*#__PURE__*/_react.default.createElement(SupportText, {
+        id: "support-text"
+      }, formatMessage(_messages.messages.supportText)));
     }
   }, {
     key: "fireAnalytics",

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

@@ -61,10 +61,22 @@ var _isImage = require("../utils/is-image");
 
 var _document = require("../../../utils/document");
 
+var _mediaCommon2 = require("@atlaskit/media-common");
+
+var _utils = require("../../../utils");
+
+var _CaptionPlaceholder = require("../ui/CaptionPlaceholder");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+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) { (0, _defineProperty2.default)(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; }
@@ -265,7 +277,7 @@ 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 ((0, _mediaCommon2.getMediaFeatureFlag)('mediaInline', (_this$mediaOptions = _this.mediaOptions) === null || _this$mediaOptions === void 0 ? void 0 : _this$mediaOptions.featureFlags)) {
         return type === mediaSingle || type === media || type === mediaInline;
       }
 
@@ -302,7 +314,7 @@ var MediaPluginStateImplementation = /*#__PURE__*/function () {
 
       if ((0, _mediaSingle.isMediaSingle)(state.schema, mediaStateWithContext.fileMimeType)) {
         (0, _mediaSingle.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 && !(0, _document.isInEmptyLine)(state) && !(0, _mediaCommon.isInsidePotentialEmptyParagraph)(state) && (0, _mediaFiles.canInsertMediaInline)(state)) {
+      } else if ((0, _mediaCommon2.getMediaFeatureFlag)('mediaInline', (_this$mediaOptions2 = _this.mediaOptions) === null || _this$mediaOptions2 === void 0 ? void 0 : _this$mediaOptions2.featureFlags) && !(0, _document.isInEmptyLine)(state) && (!(0, _mediaCommon.isInsidePotentialEmptyParagraph)(state) || (0, _utils.isInListItem)(state)) && (0, _mediaFiles.canInsertMediaInline)(state)) {
         (0, _mediaFiles.insertMediaInlineNode)(_this.view, mediaStateWithContext, collection, _this.getInputMethod(pickerType));
       } else {
         (0, _mediaFiles.insertMediaGroupNode)(_this.view, [mediaStateWithContext], collection, _this.getInputMethod(pickerType));
@@ -587,8 +599,6 @@ var MediaPluginStateImplementation = /*#__PURE__*/function () {
   }, {
     key: "getDomElement",
     value: function getDomElement(domAtPos) {
-      var _this$mediaOptions3;
-
       var selection = this.view.state.selection;
 
       if (!(selection instanceof _prosemirrorState.NodeSelection)) {
@@ -599,16 +609,14 @@ 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 = (0, _prosemirrorUtils.findDomRefAtPos)(position, domAtPos);
+      var node = (0, _prosemirrorUtils.findDomRefAtPos)(selection.from, domAtPos);
 
       if (node) {
         if (!node.childNodes.length) {
           return node.parentNode;
         }
 
-        var target = node.querySelector('figure') || node;
-        return target;
+        return node;
       }
 
       return;
@@ -806,13 +814,31 @@ var createPlugin = function createPlugin(_schema, options, reactContext, dispatc
         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 && (0, _prosemirrorUtils.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 && (0, _prosemirrorUtils.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(_prosemirrorState.NodeSelection.create(newState.doc, transaction.selection.$from.pos - 1));
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+
+      return;
     },
     key: _pluginKey.stateKey,
     view: function view(_view) {
@@ -869,6 +895,14 @@ var createPlugin = function createPlugin(_schema, options, reactContext, dispatc
       handleTextInput: function handleTextInput(view) {
         getMediaPluginState(view.state).splitMediaGroup();
         return false;
+      },
+      handleClick: function handleClick(_editorView, _pos, event) {
+        var _parentElement;
+
+        // 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((_editorCommon.browser.chrome || _editorCommon.browser.safari) && event.target && _CaptionPlaceholder.CAPTION_PLACEHOLDER_ID === ((_parentElement = event.target.parentElement) === null || _parentElement === void 0 ? void 0 : _parentElement.dataset.id));
       }
     }
   });

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

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.removeInlineCard = exports.changeInlineToMediaCard = void 0;
+
+var _prosemirrorState = require("prosemirror-state");
+
+var _prosemirrorUtils = require("prosemirror-utils");
+
+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 _prosemirrorState.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 = (0, _prosemirrorUtils.removeSelectedNode)(tr);
+  tr = (0, _prosemirrorUtils.safeInsert)(group, nodePos, true)(tr);
+
+  if (dispatch) {
+    dispatch(tr);
+  }
+
+  return true;
+};
+
+exports.changeInlineToMediaCard = changeInlineToMediaCard;
+
+var removeInlineCard = function removeInlineCard(state, dispatch) {
+  if ((0, _prosemirrorUtils.isNodeSelection)(state.selection)) {
+    if (dispatch) {
+      dispatch((0, _prosemirrorUtils.removeSelectedNode)(state.tr));
+    }
+
+    return true;
+  }
+
+  return false;
+};
+
+exports.removeInlineCard = removeInlineCard;

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

@@ -17,6 +17,8 @@ var _reactDom = _interopRequireDefault(require("react-dom"));
 
 var _mediaViewer = require("@atlaskit/media-viewer");
 
+var _mediaUi = require("@atlaskit/media-ui");
+
 var _filePreview = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/file-preview"));
 
 var _Button = _interopRequireDefault(require("../../floating-toolbar/ui/Button"));
@@ -28,7 +30,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var FilePreviewItem = function FilePreviewItem(_ref) {
-  var mediaPluginState = _ref.mediaPluginState;
+  var mediaPluginState = _ref.mediaPluginState,
+      intl = _ref.intl;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -73,13 +76,15 @@ var FilePreviewItem = function FilePreviewItem(_ref) {
   };
 
   var mediaViewer = renderMediaViewer();
+  var tooltipContent = intl.formatMessage(_mediaUi.messages.preview);
   return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Button.default, {
     testId: "file-preview-toolbar-button",
     key: "editor.media.card.preview",
     onClick: openMediaViewer,
     icon: /*#__PURE__*/_react.default.createElement(_filePreview.default, {
       label: "file preview"
-    })
+    }),
+    tooltipContent: tooltipContent
   }), mediaViewer);
 };
 

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

@@ -57,6 +57,10 @@ var _utils = require("./utils");
 
 var _prosemirrorModel = require("prosemirror-model");
 
+var _commands = require("./commands");
+
+var _styles = require("../nodeviews/styles");
+
 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) { (0, _defineProperty2.default)(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; }
@@ -113,6 +117,7 @@ var changeMediaCardToInline = function changeMediaCardToInline(state, dispatch)
 var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar(state, intl, mediaPluginState) {
   var mediaGroup = state.schema.nodes.mediaGroup;
   var items = [{
+    id: 'editor.media.view.switcher',
     type: 'dropdown',
     title: intl.formatMessage(_mediaUi.messages.displayThumbnail),
     options: [{
@@ -136,7 +141,8 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
     render: function render() {
       return /*#__PURE__*/_react.default.createElement(_filePreviewItem.FilePreviewItem, {
         key: "editor.media.card.preview",
-        mediaPluginState: mediaPluginState
+        mediaPluginState: mediaPluginState,
+        intl: intl
       });
     }
   }, {
@@ -168,6 +174,66 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
   return items;
 };
 
+var generateMediaInlineFloatingToolbar = function generateMediaInlineFloatingToolbar(state, intl, mediaPluginState) {
+  var mediaInline = state.schema.nodes.mediaInline;
+  var items = [{
+    id: 'editor.media.view.switcher',
+    type: 'dropdown',
+    title: intl.formatMessage(_messages2.messages.inline),
+    options: [{
+      title: intl.formatMessage(_messages2.messages.inline),
+      selected: true,
+      onClick: function onClick() {
+        return true;
+      },
+      testId: 'inline-appearance'
+    }, {
+      title: intl.formatMessage(_mediaUi.messages.displayThumbnail),
+      selected: false,
+      onClick: _commands.changeInlineToMediaCard,
+      testId: 'thumbnail-appearance'
+    }]
+  }, {
+    type: 'separator'
+  }, {
+    type: 'custom',
+    fallback: [],
+    render: function render() {
+      return /*#__PURE__*/_react.default.createElement(_filePreviewItem.FilePreviewItem, {
+        key: "editor.media.card.preview",
+        mediaPluginState: mediaPluginState,
+        intl: intl
+      });
+    }
+  }, {
+    type: 'separator'
+  }, {
+    id: 'editor.media.card.download',
+    type: 'button',
+    icon: _download.default,
+    onClick: function onClick() {
+      (0, _utils.downloadMedia)(mediaPluginState);
+      return true;
+    },
+    title: intl.formatMessage(_mediaUi.messages.download)
+  }, {
+    type: 'separator'
+  }, {
+    id: 'editor.media.delete',
+    type: 'button',
+    appearance: 'danger',
+    icon: _remove.default,
+    onMouseEnter: (0, _decoration.hoverDecoration)(mediaInline, true),
+    onMouseLeave: (0, _decoration.hoverDecoration)(mediaInline, false),
+    onFocus: (0, _decoration.hoverDecoration)(mediaInline, true),
+    onBlur: (0, _decoration.hoverDecoration)(mediaInline, false),
+    title: intl.formatMessage(_messages.default.remove),
+    onClick: _commands.removeInlineCard,
+    testId: 'media-toolbar-remove-button'
+  }];
+  return items;
+};
+
 var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToolbar(state, intl, options, pluginState, mediaLinkingState) {
   var mediaSingle = state.schema.nodes.mediaSingle;
   var allowResizing = options.allowResizing,
@@ -314,9 +380,14 @@ var floatingToolbar = function floatingToolbar(state, intl) {
   }
 
   var items = [];
-  var parentNode = (0, _prosemirrorUtils.findParentNodeOfType)(mediaGroup)(state.selection);
+  var parentMediaGroupNode = (0, _prosemirrorUtils.findParentNodeOfType)(mediaGroup)(state.selection);
+  var selectedNodeType;
+
+  if (state.selection instanceof _prosemirrorState.NodeSelection) {
+    selectedNodeType = state.selection.node.type;
+  }
 
-  if (allowMediaInline && parentNode && parentNode.node.type === mediaGroup) {
+  if (allowMediaInline && (parentMediaGroupNode === null || parentMediaGroupNode === void 0 ? void 0 : parentMediaGroupNode.node.type) === mediaGroup) {
     var mediaOffset = state.selection.$from.parentOffset + 1;
 
     baseToolbar.getDomRef = function () {
@@ -327,7 +398,23 @@ var floatingToolbar = function floatingToolbar(state, intl) {
     };
 
     items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState);
+  } else if (allowMediaInline && selectedNodeType && selectedNodeType === mediaInline) {
+    baseToolbar.getDomRef = function () {
+      var _mediaPluginState$ele2;
+
+      var element = (_mediaPluginState$ele2 = mediaPluginState.element) === null || _mediaPluginState$ele2 === void 0 ? void 0 : _mediaPluginState$ele2.querySelector(".".concat(_styles.MediaInlineNodeSelector));
+      return element || mediaPluginState.element;
+    };
+
+    items = generateMediaInlineFloatingToolbar(state, intl, mediaPluginState);
   } else {
+    baseToolbar.getDomRef = function () {
+      var _mediaPluginState$ele3;
+
+      var element = (_mediaPluginState$ele3 = mediaPluginState.element) === null || _mediaPluginState$ele3 === void 0 ? void 0 : _mediaPluginState$ele3.querySelector(".".concat(_styles.MediaSingleNodeSelector));
+      return element || mediaPluginState.element;
+    };
+
     items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState);
   }
 

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

@@ -450,7 +450,15 @@ var ResizableMediaSingle = /*#__PURE__*/function (_React$Component) {
           return columResizingPluginState ? !columResizingPluginState.dragging : true;
         },
         nodeType: "media",
-        dispatchAnalyticsEvent: this.props.dispatchAnalyticsEvent
+        dispatchAnalyticsEvent: this.props.dispatchAnalyticsEvent // when cursor is located below a media with caption,
+        // press “Up“ key will result cursor focus on an invalid position, (on the resize handler)
+        // This workaround adds an empty div inside the resize handler to prevent the issue.
+        ,
+        handleComponentFunc: function handleComponentFunc() {
+          return /*#__PURE__*/_react.default.createElement("div", {
+            contentEditable: false
+          });
+        }
       }), children));
     }
   }]);

package/dist/cjs/plugins/media/utils/media-common.js

@@ -334,7 +334,7 @@ var unwrapNestedMediaElements = function unwrapNestedMediaElements(html) {
     // ProseMirror should handle this case properly.
 
 
-    if (mediaParent instanceof HTMLDivElement) {
+    if (mediaParent instanceof HTMLDivElement || mediaParent instanceof HTMLSpanElement && mediaParent.closest('[class*="emoji-common"]')) {
       return;
     } // Find the top most element that the parent has a valid container for the image.
     // Stop just before found the wrapper

package/dist/cjs/plugins/media/utils/media-files.js

@@ -111,7 +111,11 @@ var insertMediaInlineNode = function insertMediaInlineNode(view, mediaState, col
     collection: collection
   });
   var space = state.schema.text(' ');
-  var pos = state.selection.$to.pos;
+  var pos = state.selection.$to.pos; // If the selection is inside an empty list item set pos inside paragraph
+
+  if ((0, _utils.isInListItem)(state) && (0, _mediaCommon.isInsidePotentialEmptyParagraph)(state)) {
+    pos = pos + 1;
+  }
 
   var content = _prosemirrorModel.Fragment.from([mediaInlineNode, space]); // Delete the selection if a selection is made
 

package/dist/cjs/plugins/panel/actions.js

@@ -59,7 +59,7 @@ exports.removePanel = removePanel;
 
 var changePanelType = function changePanelType(panelType) {
   var panelOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var UNSAFE_allowCustomPanel = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var allowCustomPanel = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   return function (state, dispatch) {
     var nodes = state.schema.nodes,
         tr = state.tr;
@@ -73,7 +73,7 @@ var changePanelType = function changePanelType(panelType) {
     var previousType = panelNode.node.attrs.panelType;
     var newTr;
 
-    if (UNSAFE_allowCustomPanel) {
+    if (allowCustomPanel) {
       var previousColor = panelNode.node.attrs.panelColor || (0, _editorCommon.getPanelTypeBackground)(previousType);
       var previousIcon = panelNode.node.attrs.panelIcon;
 

package/dist/cjs/plugins/panel/index.js

@@ -55,7 +55,7 @@ var panelPlugin = function panelPlugin() {
   return {
     name: 'panel',
     nodes: function nodes() {
-      var panelNode = (0, _adfSchema.customPanel)(!!options.UNSAFE_allowCustomPanel);
+      var panelNode = (0, _adfSchema.panel)(!!options.allowCustomPanel);
       return [{
         name: 'panel',
         node: panelNode
@@ -148,7 +148,7 @@ var panelPlugin = function panelPlugin() {
           }
         }];
 
-        if (options.UNSAFE_allowCustomPanelEdit && options.UNSAFE_allowCustomPanel) {
+        if (options.allowCustomPanel && options.allowCustomPanelEdit) {
           quickInsertOptions.push({
             id: 'custompanel',
             title: formatMessage(_messages.messages.customPanel),
@@ -161,7 +161,7 @@ var panelPlugin = function panelPlugin() {
               return insertPanelTypeWithAnalytics({
                 panelType: _adfSchema.PanelType.CUSTOM,
                 panelIcon: ':rainbow:',
-                panelColor: _colors.T75
+                panelColor: _colors.T50
               }, state, insert);
             }
           });

package/dist/cjs/plugins/panel/nodeviews/panel.js

@@ -81,7 +81,7 @@ var PanelNodeView = /*#__PURE__*/function () {
     this.view = view;
     this.node = node;
 
-    var _DOMSerializer$render = _prosemirrorModel.DOMSerializer.renderSpec(document, (0, _utils.panelAttrsToDom)(node.attrs, pluginOptions.UNSAFE_allowCustomPanel || false)),
+    var _DOMSerializer$render = _prosemirrorModel.DOMSerializer.renderSpec(document, (0, _utils.panelAttrsToDom)(node.attrs, pluginOptions.allowCustomPanel || false)),
         dom = _DOMSerializer$render.dom,
         contentDOM = _DOMSerializer$render.contentDOM;
 
@@ -98,7 +98,7 @@ var PanelNodeView = /*#__PURE__*/function () {
     this.icon.contentEditable = 'false';
 
     _reactDom.default.render( /*#__PURE__*/_react.default.createElement(PanelIcon, {
-      allowCustomPanel: pluginOptions.UNSAFE_allowCustomPanel,
+      allowCustomPanel: pluginOptions.allowCustomPanel,
       panelAttributes: node.attrs,
       providerFactory: this.providerFactory
     }), this.icon);