@atlaskit/editor-plugin-media 0.12.0 → 0.12.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-plugin-media
 
+## 0.12.2
+
+### Patch Changes
+
+- [#68640](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/68640) [`6a3ea210641a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6a3ea210641a) - Create new context identifier plugin which contains the provider.
+
+## 0.12.1
+
+### Patch Changes
+
+- [#66027](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/66027) [`9e0417874343`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9e0417874343) - [CXP-2867] Fix superfluous newline in inline-to-card conversion
+- Updated dependencies
+
 ## 0.12.0
 
 ### Minor Changes

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

@@ -91,37 +91,14 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
     (0, _defineProperty2.default)(this, "taskManager", new _mediaTaskManager.MediaTaskManager());
     (0, _defineProperty2.default)(this, "pickers", []);
     (0, _defineProperty2.default)(this, "pickerPromises", []);
-    (0, _defineProperty2.default)(this, "onContextIdentifierProvider", /*#__PURE__*/function () {
-      var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_name, provider) {
-        return _regenerator.default.wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              if (!provider) {
-                _context.next = 4;
-                break;
-              }
-              _context.next = 3;
-              return provider;
-            case 3:
-              _this.contextIdentifierProvider = _context.sent;
-            case 4:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee);
-      }));
-      return function (_x, _x2) {
-        return _ref.apply(this, arguments);
-      };
-    }());
     (0, _defineProperty2.default)(this, "setMediaProvider", /*#__PURE__*/function () {
-      var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(mediaProvider) {
+      var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(mediaProvider) {
         var viewMediaClientConfig, wrappedError, view, allowsUploads;
-        return _regenerator.default.wrap(function _callee2$(_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
             case 0:
               if (mediaProvider) {
-                _context2.next = 5;
+                _context.next = 5;
                 break;
               }
               _this.destroyPickers();
@@ -131,13 +108,13 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
                   allowsUploads: _this.allowsUploads
                 }));
               }
-              return _context2.abrupt("return");
+              return _context.abrupt("return");
             case 5:
-              _context2.prev = 5;
-              _context2.next = 8;
+              _context.prev = 5;
+              _context.next = 8;
               return mediaProvider;
             case 8:
-              _this.mediaProvider = _context2.sent;
+              _this.mediaProvider = _context.sent;
               // TODO [MS-2038]: remove once context api is removed
               // We want to re assign the view and upload configs if they are missing for backwards compatibility
               // as currently integrators can pass context || mediaClientConfig
@@ -148,12 +125,12 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
                 }
               }
               (0, _assert.default)(_this.mediaProvider.viewMediaClientConfig, "MediaProvider promise did not resolve to a valid instance of MediaProvider - ".concat(_this.mediaProvider));
-              _context2.next = 21;
+              _context.next = 21;
               break;
             case 13:
-              _context2.prev = 13;
-              _context2.t0 = _context2["catch"](5);
-              wrappedError = new Error("Media functionality disabled due to rejected provider: ".concat(_context2.t0 instanceof Error ? _context2.t0.message : String(_context2.t0)));
+              _context.prev = 13;
+              _context.t0 = _context["catch"](5);
+              wrappedError = new Error("Media functionality disabled due to rejected provider: ".concat(_context.t0 instanceof Error ? _context.t0.message : String(_context.t0)));
               _this.errorReporter.captureException(wrappedError);
               _this.destroyPickers();
               _this.allowsUploads = false;
@@ -162,7 +139,7 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
                   allowsUploads: _this.allowsUploads
                 }));
               }
-              return _context2.abrupt("return");
+              return _context.abrupt("return");
             case 21:
               _this.mediaClientConfig = _this.mediaProvider.viewMediaClientConfig;
               _this.allowsUploads = !!_this.mediaProvider.uploadMediaClientConfig;
@@ -174,42 +151,42 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
                 }));
               }
               if (!_this.allowsUploads) {
-                _context2.next = 35;
+                _context.next = 35;
                 break;
               }
               _this.uploadMediaClientConfig = _this.mediaProvider.uploadMediaClientConfig;
               if (!(_this.mediaProvider.uploadParams && _this.uploadMediaClientConfig)) {
-                _context2.next = 32;
+                _context.next = 32;
                 break;
               }
-              _context2.next = 30;
+              _context.next = 30;
               return _this.initPickers(_this.mediaProvider.uploadParams, _pickerFacade.default);
             case 30:
-              _context2.next = 33;
+              _context.next = 33;
               break;
             case 32:
               _this.destroyPickers();
             case 33:
-              _context2.next = 36;
+              _context.next = 36;
               break;
             case 35:
               _this.destroyPickers();
             case 36:
             case "end":
-              return _context2.stop();
+              return _context.stop();
           }
-        }, _callee2, null, [[5, 13]]);
+        }, _callee, null, [[5, 13]]);
       }));
-      return function (_x3) {
-        return _ref2.apply(this, arguments);
+      return function (_x) {
+        return _ref.apply(this, arguments);
       };
     }());
     (0, _defineProperty2.default)(this, "getMediaOptions", function () {
       return _this.options;
     });
-    (0, _defineProperty2.default)(this, "isMediaSchemaNode", function (_ref3) {
+    (0, _defineProperty2.default)(this, "isMediaSchemaNode", function (_ref2) {
       var _this$mediaOptions;
-      var type = _ref3.type;
+      var type = _ref2.type;
       var _this$view$state$sche = _this.view.state.schema.nodes,
         mediaInline = _this$view$state$sche.mediaInline,
         mediaSingle = _this$view$state$sche.mediaSingle,
@@ -362,8 +339,8 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
      */
     (0, _defineProperty2.default)(this, "handleMediaNodeUnmount", function (oldNode) {
       _this.trackMediaNodeRemoval(oldNode);
-      _this.mediaNodes = _this.mediaNodes.filter(function (_ref4) {
-        var node = _ref4.node;
+      _this.mediaNodes = _this.mediaNodes.filter(function (_ref3) {
+        var node = _ref3.node;
         return oldNode !== node;
       });
     });
@@ -497,7 +474,6 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
     options.providerFactory.subscribe('mediaProvider', function (_name, provider) {
       return _this.setMediaProvider(provider);
     });
-    options.providerFactory.subscribe('contextIdentifierProvider', this.onContextIdentifierProvider);
     if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.inline-image.base-support')) {
       this.allowInlineImages = true;
     }
@@ -563,6 +539,12 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
       }
       return;
     }
+  }, {
+    key: "contextIdentifierProvider",
+    get: function get() {
+      var _this$pluginInjection3;
+      return (_this$pluginInjection3 = this.pluginInjectionApi) === null || _this$pluginInjection3 === void 0 || (_this$pluginInjection3 = _this$pluginInjection3.contextIdentifier) === null || _this$pluginInjection3 === void 0 || (_this$pluginInjection3 = _this$pluginInjection3.sharedState.currentState()) === null || _this$pluginInjection3 === void 0 ? void 0 : _this$pluginInjection3.contextIdentifierProvider;
+    }
   }, {
     key: "setView",
     value: function setView(view) {
@@ -583,21 +565,21 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
   }, {
     key: "initPickers",
     value: function () {
-      var _initPickers = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(uploadParams, Picker) {
+      var _initPickers = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(uploadParams, Picker) {
         var _this2 = this;
         var errorReporter, pickers, pickerPromises, pickerFacadeConfig, customPicker;
-        return _regenerator.default.wrap(function _callee3$(_context3) {
-          while (1) switch (_context3.prev = _context3.next) {
+        return _regenerator.default.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
             case 0:
               if (!(this.destroyed || !this.uploadMediaClientConfig)) {
-                _context3.next = 2;
+                _context2.next = 2;
                 break;
               }
-              return _context3.abrupt("return");
+              return _context2.abrupt("return");
             case 2:
               errorReporter = this.errorReporter, pickers = this.pickers, pickerPromises = this.pickerPromises; // create pickers if they don't exist, re-use otherwise
               if (pickers.length) {
-                _context3.next = 14;
+                _context2.next = 14;
                 break;
               }
               pickerFacadeConfig = {
@@ -605,17 +587,17 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
                 errorReporter: errorReporter
               };
               if (!this.options.customMediaPicker) {
-                _context3.next = 13;
+                _context2.next = 13;
                 break;
               }
               customPicker = new Picker('customMediaPicker', pickerFacadeConfig, this.options.customMediaPicker).init();
               pickerPromises.push(customPicker);
-              _context3.t0 = pickers;
-              _context3.next = 11;
+              _context2.t0 = pickers;
+              _context2.next = 11;
               return customPicker;
             case 11:
-              _context3.t1 = this.customPicker = _context3.sent;
-              _context3.t0.push.call(_context3.t0, _context3.t1);
+              _context2.t1 = this.customPicker = _context2.sent;
+              _context2.t0.push.call(_context2.t0, _context2.t1);
             case 13:
               pickers.forEach(function (picker) {
                 picker.onNewMedia(_this2.insertFile);
@@ -627,11 +609,11 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
               });
             case 15:
             case "end":
-              return _context3.stop();
+              return _context2.stop();
           }
-        }, _callee3, this);
+        }, _callee2, this);
       }));
-      function initPickers(_x4, _x5) {
+      function initPickers(_x2, _x3) {
         return _initPickers.apply(this, arguments);
       }
       return initPickers;

package/dist/cjs/toolbar/commands.js

@@ -28,10 +28,13 @@ var getNodeType = exports.getNodeType = function getNodeType(state) {
 };
 var changeInlineToMediaCard = exports.changeInlineToMediaCard = function changeInlineToMediaCard(editorAnalyticsAPI, forceFocusSelector) {
   return function (state, dispatch) {
+    var _findParentNodeCloses, _parent$content$first, _parent$content$lastC, _parent$content$lastC2;
     var _state$schema$nodes2 = state.schema.nodes,
       media = _state$schema$nodes2.media,
       mediaInline = _state$schema$nodes2.mediaInline,
-      mediaGroup = _state$schema$nodes2.mediaGroup;
+      mediaGroup = _state$schema$nodes2.mediaGroup,
+      paragraph = _state$schema$nodes2.paragraph,
+      heading = _state$schema$nodes2.heading;
     var selectedNode = state.selection instanceof _state.NodeSelection && state.selection.node.type === mediaInline && state.selection.node;
     if (!selectedNode) {
       return false;
@@ -46,10 +49,26 @@ var changeInlineToMediaCard = exports.changeInlineToMediaCard = function changeI
       collection: collection
     });
     var group = mediaGroup.createChecked({}, mediaNode);
-    var nodePos = state.tr.doc.resolve(state.selection.from).end();
+    var parent = (_findParentNodeCloses = (0, _utils.findParentNodeClosestToPos)(state.selection.$from, function (node) {
+      return node.type === paragraph || node.type === heading;
+    })) === null || _findParentNodeCloses === void 0 ? void 0 : _findParentNodeCloses.node;
     var tr = state.tr;
-    tr = (0, _utils.removeSelectedNode)(tr);
-    tr = (0, _utils.safeInsert)(group, nodePos, true)(tr);
+    if (!!parent && parent.content.size === 2 && ((_parent$content$first = parent.content.firstChild) === null || _parent$content$first === void 0 ? void 0 : _parent$content$first.type.name) === 'mediaInline' && ((_parent$content$lastC = parent.content.lastChild) === null || _parent$content$lastC === void 0 ? void 0 : _parent$content$lastC.type.name) === 'text' && ((_parent$content$lastC2 = parent.content.lastChild) === null || _parent$content$lastC2 === void 0 || (_parent$content$lastC2 = _parent$content$lastC2.text) === null || _parent$content$lastC2 === void 0 ? void 0 : _parent$content$lastC2.trim()) === '') {
+      /// Empty paragraph or empty heading
+      /// Drop the corresponding card on the current line
+      var insertPos = state.tr.doc.resolve(state.selection.from).start() - 1;
+      if (insertPos < 0) {
+        return false;
+      }
+      tr = tr.delete(insertPos, insertPos + parent.nodeSize);
+      tr = (0, _utils.safeInsert)(group, insertPos, false)(tr);
+    } else {
+      /// Non-empty paragraph, non-empty heading, or other nodes (e.g., action, list)
+      /// Drop the corresponding card underneath the current line
+      var _insertPos = state.tr.doc.resolve(state.selection.from).end();
+      tr = (0, _utils.removeSelectedNode)(tr);
+      tr = (0, _utils.safeInsert)(group, _insertPos, false)(tr);
+    }
     if (dispatch) {
       editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
         action: _analytics.ACTION.CHANGED_TYPE,
@@ -60,6 +79,7 @@ var changeInlineToMediaCard = exports.changeInlineToMediaCard = function changeI
           previousType: _analytics.ACTION_SUBJECT_ID.MEDIA_INLINE
         }
       })(tr);
+      var nodePos = state.tr.doc.resolve(state.selection.from).end();
       if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.ally-media-file-dropdown_1kxo8')) {
         var $endOfNode = tr.doc.resolve(nodePos + 1);
         var newSelection = new _state.NodeSelection($endOfNode);

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

@@ -65,11 +65,6 @@ export class MediaPluginStateImplementation {
     _defineProperty(this, "taskManager", new MediaTaskManager());
     _defineProperty(this, "pickers", []);
     _defineProperty(this, "pickerPromises", []);
-    _defineProperty(this, "onContextIdentifierProvider", async (_name, provider) => {
-      if (provider) {
-        this.contextIdentifierProvider = await provider;
-      }
-    });
     _defineProperty(this, "setMediaProvider", async mediaProvider => {
       if (!mediaProvider) {
         this.destroyPickers();
@@ -427,7 +422,6 @@ export class MediaPluginStateImplementation {
     } = _state.schema;
     assert(nodes.media && (nodes.mediaGroup || nodes.mediaSingle), 'Editor: unable to init media plugin - media or mediaGroup/mediaSingle node absent in schema');
     options.providerFactory.subscribe('mediaProvider', (_name, provider) => this.setMediaProvider(provider));
-    options.providerFactory.subscribe('contextIdentifierProvider', this.onContextIdentifierProvider);
     if (getBooleanFF('platform.editor.media.inline-image.base-support')) {
       this.allowInlineImages = true;
     }
@@ -485,6 +479,10 @@ export class MediaPluginStateImplementation {
     }
     return;
   }
+  get contextIdentifierProvider() {
+    var _this$pluginInjection5, _this$pluginInjection6, _this$pluginInjection7;
+    return (_this$pluginInjection5 = this.pluginInjectionApi) === null || _this$pluginInjection5 === void 0 ? void 0 : (_this$pluginInjection6 = _this$pluginInjection5.contextIdentifier) === null || _this$pluginInjection6 === void 0 ? void 0 : (_this$pluginInjection7 = _this$pluginInjection6.sharedState.currentState()) === null || _this$pluginInjection7 === void 0 ? void 0 : _this$pluginInjection7.contextIdentifierProvider;
+  }
   setView(view) {
     this.view = view;
   }

package/dist/es2019/toolbar/commands.js

@@ -1,7 +1,7 @@
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
-import { isNodeSelection, removeSelectedNode, safeInsert } from '@atlaskit/editor-prosemirror/utils';
+import { findParentNodeClosestToPos, isNodeSelection, removeSelectedNode, safeInsert } from '@atlaskit/editor-prosemirror/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { findChangeFromLocation, getChangeMediaAnalytics, getMediaInputResizeAnalyticsEvent } from '../utils/analytics';
 import { currentMediaInlineNodeWithPos, currentMediaNodeWithPos } from '../utils/current-media-node';
@@ -18,10 +18,13 @@ export const getNodeType = state => {
   return isSelectionMediaSingleNode(state) ? mediaSingle.name : mediaInline.name;
 };
 export const changeInlineToMediaCard = (editorAnalyticsAPI, forceFocusSelector) => (state, dispatch) => {
+  var _findParentNodeCloses, _parent$content$first, _parent$content$lastC, _parent$content$lastC2, _parent$content$lastC3;
   const {
     media,
     mediaInline,
-    mediaGroup
+    mediaGroup,
+    paragraph,
+    heading
   } = state.schema.nodes;
   const selectedNode = state.selection instanceof NodeSelection && state.selection.node.type === mediaInline && state.selection.node;
   if (!selectedNode) {
@@ -38,10 +41,26 @@ export const changeInlineToMediaCard = (editorAnalyticsAPI, forceFocusSelector)
     collection
   });
   const group = mediaGroup.createChecked({}, mediaNode);
-  const nodePos = state.tr.doc.resolve(state.selection.from).end();
+  const parent = (_findParentNodeCloses = findParentNodeClosestToPos(state.selection.$from, node => {
+    return node.type === paragraph || node.type === heading;
+  })) === null || _findParentNodeCloses === void 0 ? void 0 : _findParentNodeCloses.node;
   let tr = state.tr;
-  tr = removeSelectedNode(tr);
-  tr = safeInsert(group, nodePos, true)(tr);
+  if (!!parent && parent.content.size === 2 && ((_parent$content$first = parent.content.firstChild) === null || _parent$content$first === void 0 ? void 0 : _parent$content$first.type.name) === 'mediaInline' && ((_parent$content$lastC = parent.content.lastChild) === null || _parent$content$lastC === void 0 ? void 0 : _parent$content$lastC.type.name) === 'text' && ((_parent$content$lastC2 = parent.content.lastChild) === null || _parent$content$lastC2 === void 0 ? void 0 : (_parent$content$lastC3 = _parent$content$lastC2.text) === null || _parent$content$lastC3 === void 0 ? void 0 : _parent$content$lastC3.trim()) === '') {
+    /// Empty paragraph or empty heading
+    /// Drop the corresponding card on the current line
+    const insertPos = state.tr.doc.resolve(state.selection.from).start() - 1;
+    if (insertPos < 0) {
+      return false;
+    }
+    tr = tr.delete(insertPos, insertPos + parent.nodeSize);
+    tr = safeInsert(group, insertPos, false)(tr);
+  } else {
+    /// Non-empty paragraph, non-empty heading, or other nodes (e.g., action, list)
+    /// Drop the corresponding card underneath the current line
+    const insertPos = state.tr.doc.resolve(state.selection.from).end();
+    tr = removeSelectedNode(tr);
+    tr = safeInsert(group, insertPos, false)(tr);
+  }
   if (dispatch) {
     editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
       action: ACTION.CHANGED_TYPE,
@@ -52,6 +71,7 @@ export const changeInlineToMediaCard = (editorAnalyticsAPI, forceFocusSelector)
         previousType: ACTION_SUBJECT_ID.MEDIA_INLINE
       }
     })(tr);
+    const nodePos = state.tr.doc.resolve(state.selection.from).end();
     if (getBooleanFF('platform.editor.ally-media-file-dropdown_1kxo8')) {
       const $endOfNode = tr.doc.resolve(nodePos + 1);
       const newSelection = new NodeSelection($endOfNode);

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

@@ -76,37 +76,14 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
     _defineProperty(this, "taskManager", new MediaTaskManager());
     _defineProperty(this, "pickers", []);
     _defineProperty(this, "pickerPromises", []);
-    _defineProperty(this, "onContextIdentifierProvider", /*#__PURE__*/function () {
-      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_name, provider) {
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              if (!provider) {
-                _context.next = 4;
-                break;
-              }
-              _context.next = 3;
-              return provider;
-            case 3:
-              _this.contextIdentifierProvider = _context.sent;
-            case 4:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee);
-      }));
-      return function (_x, _x2) {
-        return _ref.apply(this, arguments);
-      };
-    }());
     _defineProperty(this, "setMediaProvider", /*#__PURE__*/function () {
-      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(mediaProvider) {
+      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(mediaProvider) {
         var viewMediaClientConfig, wrappedError, view, allowsUploads;
-        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
             case 0:
               if (mediaProvider) {
-                _context2.next = 5;
+                _context.next = 5;
                 break;
               }
               _this.destroyPickers();
@@ -116,13 +93,13 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
                   allowsUploads: _this.allowsUploads
                 }));
               }
-              return _context2.abrupt("return");
+              return _context.abrupt("return");
             case 5:
-              _context2.prev = 5;
-              _context2.next = 8;
+              _context.prev = 5;
+              _context.next = 8;
               return mediaProvider;
             case 8:
-              _this.mediaProvider = _context2.sent;
+              _this.mediaProvider = _context.sent;
               // TODO [MS-2038]: remove once context api is removed
               // We want to re assign the view and upload configs if they are missing for backwards compatibility
               // as currently integrators can pass context || mediaClientConfig
@@ -133,12 +110,12 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
                 }
               }
               assert(_this.mediaProvider.viewMediaClientConfig, "MediaProvider promise did not resolve to a valid instance of MediaProvider - ".concat(_this.mediaProvider));
-              _context2.next = 21;
+              _context.next = 21;
               break;
             case 13:
-              _context2.prev = 13;
-              _context2.t0 = _context2["catch"](5);
-              wrappedError = new Error("Media functionality disabled due to rejected provider: ".concat(_context2.t0 instanceof Error ? _context2.t0.message : String(_context2.t0)));
+              _context.prev = 13;
+              _context.t0 = _context["catch"](5);
+              wrappedError = new Error("Media functionality disabled due to rejected provider: ".concat(_context.t0 instanceof Error ? _context.t0.message : String(_context.t0)));
               _this.errorReporter.captureException(wrappedError);
               _this.destroyPickers();
               _this.allowsUploads = false;
@@ -147,7 +124,7 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
                   allowsUploads: _this.allowsUploads
                 }));
               }
-              return _context2.abrupt("return");
+              return _context.abrupt("return");
             case 21:
               _this.mediaClientConfig = _this.mediaProvider.viewMediaClientConfig;
               _this.allowsUploads = !!_this.mediaProvider.uploadMediaClientConfig;
@@ -159,42 +136,42 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
                 }));
               }
               if (!_this.allowsUploads) {
-                _context2.next = 35;
+                _context.next = 35;
                 break;
               }
               _this.uploadMediaClientConfig = _this.mediaProvider.uploadMediaClientConfig;
               if (!(_this.mediaProvider.uploadParams && _this.uploadMediaClientConfig)) {
-                _context2.next = 32;
+                _context.next = 32;
                 break;
               }
-              _context2.next = 30;
+              _context.next = 30;
               return _this.initPickers(_this.mediaProvider.uploadParams, PickerFacade);
             case 30:
-              _context2.next = 33;
+              _context.next = 33;
               break;
             case 32:
               _this.destroyPickers();
             case 33:
-              _context2.next = 36;
+              _context.next = 36;
               break;
             case 35:
               _this.destroyPickers();
             case 36:
             case "end":
-              return _context2.stop();
+              return _context.stop();
           }
-        }, _callee2, null, [[5, 13]]);
+        }, _callee, null, [[5, 13]]);
       }));
-      return function (_x3) {
-        return _ref2.apply(this, arguments);
+      return function (_x) {
+        return _ref.apply(this, arguments);
       };
     }());
     _defineProperty(this, "getMediaOptions", function () {
       return _this.options;
     });
-    _defineProperty(this, "isMediaSchemaNode", function (_ref3) {
+    _defineProperty(this, "isMediaSchemaNode", function (_ref2) {
       var _this$mediaOptions;
-      var type = _ref3.type;
+      var type = _ref2.type;
       var _this$view$state$sche = _this.view.state.schema.nodes,
         mediaInline = _this$view$state$sche.mediaInline,
         mediaSingle = _this$view$state$sche.mediaSingle,
@@ -347,8 +324,8 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
      */
     _defineProperty(this, "handleMediaNodeUnmount", function (oldNode) {
       _this.trackMediaNodeRemoval(oldNode);
-      _this.mediaNodes = _this.mediaNodes.filter(function (_ref4) {
-        var node = _ref4.node;
+      _this.mediaNodes = _this.mediaNodes.filter(function (_ref3) {
+        var node = _ref3.node;
         return oldNode !== node;
       });
     });
@@ -482,7 +459,6 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
     options.providerFactory.subscribe('mediaProvider', function (_name, provider) {
       return _this.setMediaProvider(provider);
     });
-    options.providerFactory.subscribe('contextIdentifierProvider', this.onContextIdentifierProvider);
     if (getBooleanFF('platform.editor.media.inline-image.base-support')) {
       this.allowInlineImages = true;
     }
@@ -548,6 +524,12 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
       }
       return;
     }
+  }, {
+    key: "contextIdentifierProvider",
+    get: function get() {
+      var _this$pluginInjection3;
+      return (_this$pluginInjection3 = this.pluginInjectionApi) === null || _this$pluginInjection3 === void 0 || (_this$pluginInjection3 = _this$pluginInjection3.contextIdentifier) === null || _this$pluginInjection3 === void 0 || (_this$pluginInjection3 = _this$pluginInjection3.sharedState.currentState()) === null || _this$pluginInjection3 === void 0 ? void 0 : _this$pluginInjection3.contextIdentifierProvider;
+    }
   }, {
     key: "setView",
     value: function setView(view) {
@@ -568,21 +550,21 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
   }, {
     key: "initPickers",
     value: function () {
-      var _initPickers = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(uploadParams, Picker) {
+      var _initPickers = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(uploadParams, Picker) {
         var _this2 = this;
         var errorReporter, pickers, pickerPromises, pickerFacadeConfig, customPicker;
-        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
-          while (1) switch (_context3.prev = _context3.next) {
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
             case 0:
               if (!(this.destroyed || !this.uploadMediaClientConfig)) {
-                _context3.next = 2;
+                _context2.next = 2;
                 break;
               }
-              return _context3.abrupt("return");
+              return _context2.abrupt("return");
             case 2:
               errorReporter = this.errorReporter, pickers = this.pickers, pickerPromises = this.pickerPromises; // create pickers if they don't exist, re-use otherwise
               if (pickers.length) {
-                _context3.next = 14;
+                _context2.next = 14;
                 break;
               }
               pickerFacadeConfig = {
@@ -590,17 +572,17 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
                 errorReporter: errorReporter
               };
               if (!this.options.customMediaPicker) {
-                _context3.next = 13;
+                _context2.next = 13;
                 break;
               }
               customPicker = new Picker('customMediaPicker', pickerFacadeConfig, this.options.customMediaPicker).init();
               pickerPromises.push(customPicker);
-              _context3.t0 = pickers;
-              _context3.next = 11;
+              _context2.t0 = pickers;
+              _context2.next = 11;
               return customPicker;
             case 11:
-              _context3.t1 = this.customPicker = _context3.sent;
-              _context3.t0.push.call(_context3.t0, _context3.t1);
+              _context2.t1 = this.customPicker = _context2.sent;
+              _context2.t0.push.call(_context2.t0, _context2.t1);
             case 13:
               pickers.forEach(function (picker) {
                 picker.onNewMedia(_this2.insertFile);
@@ -612,11 +594,11 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
               });
             case 15:
             case "end":
-              return _context3.stop();
+              return _context2.stop();
           }
-        }, _callee3, this);
+        }, _callee2, this);
       }));
-      function initPickers(_x4, _x5) {
+      function initPickers(_x2, _x3) {
         return _initPickers.apply(this, arguments);
       }
       return initPickers;

package/dist/esm/toolbar/commands.js

@@ -4,7 +4,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
-import { isNodeSelection, removeSelectedNode, safeInsert } from '@atlaskit/editor-prosemirror/utils';
+import { findParentNodeClosestToPos, isNodeSelection, removeSelectedNode, safeInsert } from '@atlaskit/editor-prosemirror/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { findChangeFromLocation, getChangeMediaAnalytics, getMediaInputResizeAnalyticsEvent } from '../utils/analytics';
 import { currentMediaInlineNodeWithPos, currentMediaNodeWithPos } from '../utils/current-media-node';
@@ -21,10 +21,13 @@ export var getNodeType = function getNodeType(state) {
 };
 export var changeInlineToMediaCard = function changeInlineToMediaCard(editorAnalyticsAPI, forceFocusSelector) {
   return function (state, dispatch) {
+    var _findParentNodeCloses, _parent$content$first, _parent$content$lastC, _parent$content$lastC2;
     var _state$schema$nodes2 = state.schema.nodes,
       media = _state$schema$nodes2.media,
       mediaInline = _state$schema$nodes2.mediaInline,
-      mediaGroup = _state$schema$nodes2.mediaGroup;
+      mediaGroup = _state$schema$nodes2.mediaGroup,
+      paragraph = _state$schema$nodes2.paragraph,
+      heading = _state$schema$nodes2.heading;
     var selectedNode = state.selection instanceof NodeSelection && state.selection.node.type === mediaInline && state.selection.node;
     if (!selectedNode) {
       return false;
@@ -39,10 +42,26 @@ export var changeInlineToMediaCard = function changeInlineToMediaCard(editorAnal
       collection: collection
     });
     var group = mediaGroup.createChecked({}, mediaNode);
-    var nodePos = state.tr.doc.resolve(state.selection.from).end();
+    var parent = (_findParentNodeCloses = findParentNodeClosestToPos(state.selection.$from, function (node) {
+      return node.type === paragraph || node.type === heading;
+    })) === null || _findParentNodeCloses === void 0 ? void 0 : _findParentNodeCloses.node;
     var tr = state.tr;
-    tr = removeSelectedNode(tr);
-    tr = safeInsert(group, nodePos, true)(tr);
+    if (!!parent && parent.content.size === 2 && ((_parent$content$first = parent.content.firstChild) === null || _parent$content$first === void 0 ? void 0 : _parent$content$first.type.name) === 'mediaInline' && ((_parent$content$lastC = parent.content.lastChild) === null || _parent$content$lastC === void 0 ? void 0 : _parent$content$lastC.type.name) === 'text' && ((_parent$content$lastC2 = parent.content.lastChild) === null || _parent$content$lastC2 === void 0 || (_parent$content$lastC2 = _parent$content$lastC2.text) === null || _parent$content$lastC2 === void 0 ? void 0 : _parent$content$lastC2.trim()) === '') {
+      /// Empty paragraph or empty heading
+      /// Drop the corresponding card on the current line
+      var insertPos = state.tr.doc.resolve(state.selection.from).start() - 1;
+      if (insertPos < 0) {
+        return false;
+      }
+      tr = tr.delete(insertPos, insertPos + parent.nodeSize);
+      tr = safeInsert(group, insertPos, false)(tr);
+    } else {
+      /// Non-empty paragraph, non-empty heading, or other nodes (e.g., action, list)
+      /// Drop the corresponding card underneath the current line
+      var _insertPos = state.tr.doc.resolve(state.selection.from).end();
+      tr = removeSelectedNode(tr);
+      tr = safeInsert(group, _insertPos, false)(tr);
+    }
     if (dispatch) {
       editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
         action: ACTION.CHANGED_TYPE,
@@ -53,6 +72,7 @@ export var changeInlineToMediaCard = function changeInlineToMediaCard(editorAnal
           previousType: ACTION_SUBJECT_ID.MEDIA_INLINE
         }
       })(tr);
+      var nodePos = state.tr.doc.resolve(state.selection.from).end();
       if (getBooleanFF('platform.editor.ally-media-file-dropdown_1kxo8')) {
         var $endOfNode = tr.doc.resolve(nodePos + 1);
         var newSelection = new NodeSelection($endOfNode);

package/dist/types/next-plugin-type.d.ts

@@ -1,5 +1,6 @@
 import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
+import type { ContextIdentifierPlugin } from '@atlaskit/editor-plugin-context-identifier';
 import type { DecorationsPlugin } from '@atlaskit/editor-plugin-decorations';
 import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
 import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
@@ -17,6 +18,7 @@ export type MediaNextEditorPluginType = NextEditorPlugin<'media', {
     dependencies: [
         OptionalPlugin<FeatureFlagsPlugin>,
         OptionalPlugin<AnalyticsPlugin>,
+        OptionalPlugin<ContextIdentifierPlugin>,
         GuidelinePlugin,
         GridPlugin,
         WidthPlugin,

package/dist/types/pm-plugins/main.d.ts

@@ -1,7 +1,7 @@
 import type { IntlShape } from 'react-intl-next';
 import type { RichMediaLayout as MediaSingleLayout } from '@atlaskit/adf-schema';
 import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
-import type { ContextIdentifierProvider, MediaProvider } from '@atlaskit/editor-common/provider-factory';
+import type { MediaProvider } from '@atlaskit/editor-common/provider-factory';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { Node as PMNode, Schema } from '@atlaskit/editor-prosemirror/model';
@@ -40,7 +40,6 @@ export declare class MediaPluginStateImplementation implements MediaPluginState
     allowInlineImages: boolean;
     private view;
     private destroyed;
-    private contextIdentifierProvider?;
     private errorReporter;
     private customPicker?;
     private removeOnCloseListener;
@@ -58,7 +57,6 @@ export declare class MediaPluginStateImplementation implements MediaPluginState
     singletonCreatedAt: number;
     constructor(state: EditorState, options: MediaPluginOptions, mediaOptions: MediaOptions | undefined, newInsertionBehaviour: boolean | undefined, dispatch: Dispatch | undefined, pluginInjectionApi: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined);
     clone(): this;
-    onContextIdentifierProvider: (_name: string, provider?: Promise<ContextIdentifierProvider>) => Promise<void>;
     setMediaProvider: (mediaProvider?: Promise<MediaProvider>) => Promise<void>;
     getMediaOptions: () => MediaPluginOptions;
     setIsResizing(isResizing: boolean): void;
@@ -66,6 +64,7 @@ export declare class MediaPluginStateImplementation implements MediaPluginState
     updateElement(): void;
     private isMediaSchemaNode;
     private getDomElement;
+    get contextIdentifierProvider(): import("@atlaskit/editor-common/provider-factory").ContextIdentifierProvider | undefined;
     /**
      * we insert a new file by inserting a initial state for that file.
      *

package/dist/types/pm-plugins/types.d.ts

@@ -1,6 +1,6 @@
 import type { RichMediaLayout as MediaSingleLayout } from '@atlaskit/adf-schema';
 import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
-import type { ContextIdentifierProvider, MediaProvider } from '@atlaskit/editor-common/provider-factory';
+import type { MediaProvider } from '@atlaskit/editor-common/provider-factory';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { MediaClientConfig } from '@atlaskit/media-core';
@@ -36,7 +36,6 @@ export interface MediaPluginState {
     currentMaxWidth?: number;
     allowInlineImages?: boolean;
     dispatch?: Dispatch;
-    onContextIdentifierProvider: (_name: string, provider?: Promise<ContextIdentifierProvider>) => Promise<void>;
     setMediaProvider: (mediaProvider?: Promise<MediaProvider>) => Promise<void>;
     getMediaOptions: () => MediaPluginOptions;
     insertFile: (mediaState: MediaState, onMediaStateChanged: MediaStateEventSubscriber, pickerType?: string) => void;

package/dist/types-ts4.5/next-plugin-type.d.ts

@@ -1,5 +1,6 @@
 import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
+import type { ContextIdentifierPlugin } from '@atlaskit/editor-plugin-context-identifier';
 import type { DecorationsPlugin } from '@atlaskit/editor-plugin-decorations';
 import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
 import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
@@ -17,6 +18,7 @@ export type MediaNextEditorPluginType = NextEditorPlugin<'media', {
     dependencies: [
         OptionalPlugin<FeatureFlagsPlugin>,
         OptionalPlugin<AnalyticsPlugin>,
+        OptionalPlugin<ContextIdentifierPlugin>,
         GuidelinePlugin,
         GridPlugin,
         WidthPlugin,

package/dist/types-ts4.5/pm-plugins/main.d.ts

@@ -1,7 +1,7 @@
 import type { IntlShape } from 'react-intl-next';
 import type { RichMediaLayout as MediaSingleLayout } from '@atlaskit/adf-schema';
 import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
-import type { ContextIdentifierProvider, MediaProvider } from '@atlaskit/editor-common/provider-factory';
+import type { MediaProvider } from '@atlaskit/editor-common/provider-factory';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { Node as PMNode, Schema } from '@atlaskit/editor-prosemirror/model';
@@ -40,7 +40,6 @@ export declare class MediaPluginStateImplementation implements MediaPluginState
     allowInlineImages: boolean;
     private view;
     private destroyed;
-    private contextIdentifierProvider?;
     private errorReporter;
     private customPicker?;
     private removeOnCloseListener;
@@ -58,7 +57,6 @@ export declare class MediaPluginStateImplementation implements MediaPluginState
     singletonCreatedAt: number;
     constructor(state: EditorState, options: MediaPluginOptions, mediaOptions: MediaOptions | undefined, newInsertionBehaviour: boolean | undefined, dispatch: Dispatch | undefined, pluginInjectionApi: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined);
     clone(): this;
-    onContextIdentifierProvider: (_name: string, provider?: Promise<ContextIdentifierProvider>) => Promise<void>;
     setMediaProvider: (mediaProvider?: Promise<MediaProvider>) => Promise<void>;
     getMediaOptions: () => MediaPluginOptions;
     setIsResizing(isResizing: boolean): void;
@@ -66,6 +64,7 @@ export declare class MediaPluginStateImplementation implements MediaPluginState
     updateElement(): void;
     private isMediaSchemaNode;
     private getDomElement;
+    get contextIdentifierProvider(): import("@atlaskit/editor-common/provider-factory").ContextIdentifierProvider | undefined;
     /**
      * we insert a new file by inserting a initial state for that file.
      *

package/dist/types-ts4.5/pm-plugins/types.d.ts

@@ -1,6 +1,6 @@
 import type { RichMediaLayout as MediaSingleLayout } from '@atlaskit/adf-schema';
 import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
-import type { ContextIdentifierProvider, MediaProvider } from '@atlaskit/editor-common/provider-factory';
+import type { MediaProvider } from '@atlaskit/editor-common/provider-factory';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { MediaClientConfig } from '@atlaskit/media-core';
@@ -36,7 +36,6 @@ export interface MediaPluginState {
     currentMaxWidth?: number;
     allowInlineImages?: boolean;
     dispatch?: Dispatch;
-    onContextIdentifierProvider: (_name: string, provider?: Promise<ContextIdentifierProvider>) => Promise<void>;
     setMediaProvider: (mediaProvider?: Promise<MediaProvider>) => Promise<void>;
     getMediaOptions: () => MediaPluginOptions;
     insertFile: (mediaState: MediaState, onMediaStateChanged: MediaStateEventSubscriber, pickerType?: string) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-media",
-  "version": "0.12.0",
+  "version": "0.12.2",
   "description": "Media plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -37,13 +37,13 @@
     "@atlaskit/analytics-namespaced-context": "^6.9.0",
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/button": "^17.2.0",
-    "@atlaskit/editor-common": "^77.0.0",
+    "@atlaskit/editor-common": "^77.1.0",
     "@atlaskit/editor-palette": "1.5.2",
     "@atlaskit/editor-plugin-analytics": "^0.4.0",
     "@atlaskit/editor-plugin-decorations": "^0.2.0",
     "@atlaskit/editor-plugin-editor-disabled": "^0.2.0",
     "@atlaskit/editor-plugin-feature-flags": "^1.0.0",
-    "@atlaskit/editor-plugin-floating-toolbar": "^0.8.0",
+    "@atlaskit/editor-plugin-floating-toolbar": "^0.9.0",
     "@atlaskit/editor-plugin-focus": "^0.2.0",
     "@atlaskit/editor-plugin-grid": "^0.3.0",
     "@atlaskit/editor-plugin-guideline": "^0.5.0",
@@ -51,7 +51,7 @@
     "@atlaskit/editor-plugin-width": "^0.2.0",
     "@atlaskit/editor-prosemirror": "1.1.0",
     "@atlaskit/editor-shared-styles": "^2.9.0",
-    "@atlaskit/editor-tables": "^2.4.0",
+    "@atlaskit/editor-tables": "^2.5.0",
     "@atlaskit/form": "^9.0.3",
     "@atlaskit/icon": "^22.0.0",
     "@atlaskit/media-card": "^77.7.0",
@@ -65,7 +65,7 @@
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/textfield": "^6.0.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.34.0",
+    "@atlaskit/tokens": "^1.35.0",
     "@atlaskit/tooltip": "^18.1.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
@@ -75,17 +75,9 @@
     "uuid": "^3.1.0"
   },
   "devDependencies": {
-    "@af/visual-regression": "*",
-    "@atlaskit/media-test-helpers": "^33.0.0",
-    "@atlaskit/util-data-test": "^17.8.0",
     "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
-    "@atlassian/feature-flags-test-utils": "^0.1.1",
-    "@testing-library/react": "^12.1.5",
-    "@testing-library/user-event": "^14.4.3",
-    "enzyme": "^3.10.0",
     "react-dom": "^16.8.0",
-    "typescript": "~4.9.5",
-    "wait-for-expect": "^1.2.0"
+    "typescript": "~4.9.5"
   },
   "peerDependencies": {
     "@atlaskit/media-core": "^34.1.2",
@@ -152,5 +144,10 @@
       "type": "boolean"
     }
   },
-  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
+  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0",
+  "stricter": {
+    "no-unused-dependencies": {
+      "checkDevDependencies": true
+    }
+  }
 }