@atlaskit/editor-plugin-media 0.7.0 → 0.8.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-media
 
+## 0.8.1
+
+### Patch Changes
+
+- [#63388](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/63388) [`999a8302f404`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/999a8302f404) - add analytics for changing media inline to media single
+- [#63608](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/63608) [`bfb98fe84eae`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bfb98fe84eae) - [ux] EDF-93: Report and resolve existing duplicate i18n message descriptor keys/IDs in editor, as precursor work to adding CI check
+
+## 0.8.0
+
+### Minor Changes
+
+- [#62560](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/62560) [`5ad72b247e6a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5ad72b247e6a) - [ux] ED-20895 Added linking support for inline images
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.7.0
 
 ### Minor Changes

package/dist/cjs/commands/linking.js

@@ -19,8 +19,8 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var showLinkingToolbar = exports.showLinkingToolbar = (0, _linking.createMediaLinkingCommand)(function (state) {
   var mediaLinkingState = (0, _linking.getMediaLinkingState)(state);
   if (mediaLinkingState && mediaLinkingState.mediaPos !== null) {
-    var mediaSingle = state.doc.nodeAt(mediaLinkingState.mediaPos);
-    if (mediaSingle) {
+    var node = state.doc.nodeAt(mediaLinkingState.mediaPos);
+    if (node) {
       return {
         type: _actions.MediaLinkingActionsTypes.showToolbar
       };
@@ -31,7 +31,10 @@ var showLinkingToolbar = exports.showLinkingToolbar = (0, _linking.createMediaLi
 var showLinkingToolbarWithMediaTypeCheck = exports.showLinkingToolbarWithMediaTypeCheck = function showLinkingToolbarWithMediaTypeCheck(editorState, dispatch, editorView) {
   if (dispatch && editorView) {
     var mediaNode = (0, _currentMediaNode.currentMediaNode)(editorState);
-    if (!mediaNode) {
+    var mediaInlineNode = (0, _currentMediaNode.currentMediaInlineNode)(editorState);
+    var nodeSelection = editorState.selection;
+    var currentSelectedNode = nodeSelection.node;
+    if (!mediaNode && !mediaInlineNode) {
       return false;
     }
     var _getMediaPluginState = (0, _main.getMediaPluginState)(editorState),
@@ -39,15 +42,28 @@ var showLinkingToolbarWithMediaTypeCheck = exports.showLinkingToolbarWithMediaTy
     if (!mediaClientConfig) {
       return false;
     }
-    (0, _checkMediaType.checkMediaType)(mediaNode, mediaClientConfig).then(function (mediaType) {
-      if ((mediaType === 'external' || mediaType === 'image') &&
-      // We make sure the selection and the node hasn't changed.
-      (0, _currentMediaNode.currentMediaNode)(editorView.state) === mediaNode) {
-        dispatch(editorView.state.tr.setMeta(_linking.mediaLinkingPluginKey, {
-          type: _actions.MediaLinkingActionsTypes.showToolbar
-        }));
-      }
-    });
+    if (mediaNode && currentSelectedNode !== mediaInlineNode) {
+      (0, _checkMediaType.checkMediaType)(mediaNode, mediaClientConfig).then(function (mediaType) {
+        if ((mediaType === 'external' || mediaType === 'image') &&
+        // We make sure the selection and the node hasn't changed.
+        (0, _currentMediaNode.currentMediaNode)(editorView.state) === mediaNode) {
+          dispatch(editorView.state.tr.setMeta(_linking.mediaLinkingPluginKey, {
+            type: _actions.MediaLinkingActionsTypes.showToolbar
+          }));
+        }
+      });
+    }
+    if (mediaInlineNode) {
+      (0, _checkMediaType.checkMediaType)(mediaInlineNode, mediaClientConfig).then(function (mediaType) {
+        if ((mediaType === 'external' || mediaType === 'image') &&
+        // We make sure the selection and the node hasn't changed.
+        (0, _currentMediaNode.currentMediaInlineNode)(editorView.state) === mediaInlineNode) {
+          dispatch(editorView.state.tr.setMeta(_linking.mediaLinkingPluginKey, {
+            type: _actions.MediaLinkingActionsTypes.showToolbar
+          }));
+        }
+      });
+    }
   }
   return true;
 };
@@ -97,10 +113,37 @@ function toggleLinkMark(tr, state, _ref) {
     return tr;
   }
   var linkMark = state.schema.marks.link;
-  var media = state.schema.nodes.media;
-  var toggleBlockLinkMark = (0, _commands.createToggleBlockMarkOnRange)(linkMark, function (prevAttrs, node) {
-    // Only add mark to media
-    if (!node || node.type !== media) {
+  var _state$schema$nodes = state.schema.nodes,
+    media = _state$schema$nodes.media,
+    mediaInline = _state$schema$nodes.mediaInline;
+  if (node.type !== mediaInline) {
+    var toggleBlockLinkMark = (0, _commands.createToggleBlockMarkOnRange)(linkMark, function (prevAttrs, node) {
+      // Only add mark to media
+      if (!node || node.type !== media) {
+        return; //No op
+      }
+
+      if (forceRemove) {
+        return false;
+      }
+      var href = (0, _utils.normalizeUrl)(url);
+      if (prevAttrs && prevAttrs.href === href) {
+        return; //No op
+      }
+
+      if (href.trim() === '') {
+        return false; // remove
+      }
+
+      return _objectSpread(_objectSpread({}, prevAttrs), {}, {
+        href: href
+      });
+    }, [media]);
+    toggleBlockLinkMark($pos.pos, $pos.pos + node.nodeSize, tr, state);
+  }
+  var toggleInlineLinkMark = (0, _commands.createToggleInlineMarkOnRange)(linkMark, function (prevAttrs, node) {
+    // Only add mark to mediaInline
+    if (!node || node.type !== mediaInline) {
       return; //No op
     }
 
@@ -119,8 +162,8 @@ function toggleLinkMark(tr, state, _ref) {
     return _objectSpread(_objectSpread({}, prevAttrs), {}, {
       href: href
     });
-  }, [media]);
-  toggleBlockLinkMark($pos.pos, $pos.pos + node.nodeSize, tr, state);
+  });
+  toggleInlineLinkMark($pos.pos, $pos.pos + node.nodeSize, tr, state);
   return tr;
 }
 var fireAnalyticForMediaLink = function fireAnalyticForMediaLink(tr, action) {

package/dist/cjs/pm-plugins/linking/index.js

@@ -32,9 +32,10 @@ function onSelectionChanged(tr) {
   if (!isNodeSelection) {
     return initialState;
   }
-  var mediaPos = tr.selection.$from.pos + 1;
+  var pos = tr.selection.$from.pos;
+  var mediaPos = tr.selection.node.type.name === 'mediaInline' ? pos : pos + 1;
   var node = tr.doc.nodeAt(mediaPos);
-  if (!node || node.type.name !== 'media') {
+  if (!node || !['media', 'mediaInline'].includes(node.type.name)) {
     return initialState;
   }
   var mark = node.marks.find(function (mark) {

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

@@ -22,7 +22,7 @@ var mediaResizeAnnouncerMess = exports.mediaResizeAnnouncerMess = (0, _reactIntl
     description: 'Media width {action} to {newMediaWidth} pixels.'
   },
   IncreasedAction: {
-    id: 'fabric.editor.media.decreased',
+    id: 'fabric.editor.media.increased',
     defaultMessage: 'increased',
     description: 'Increased action'
   },

package/dist/cjs/toolbar/index.js

@@ -517,7 +517,7 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
       var element = (_mediaPluginState$ele2 = mediaPluginState.element) === null || _mediaPluginState$ele2 === void 0 ? void 0 : _mediaPluginState$ele2.querySelector(".".concat(_styles.MediaInlineNodeSelector));
       return element || mediaPluginState.element;
     };
-    items = (0, _mediaInline.generateMediaInlineFloatingToolbar)(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi);
+    items = (0, _mediaInline.generateMediaInlineFloatingToolbar)(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, options);
   } else {
     baseToolbar.getDomRef = function () {
       var _mediaPluginState$ele3;

package/dist/cjs/toolbar/linking-toolbar-appearance.js

@@ -31,14 +31,15 @@ var LinkToolbarAppearance = exports.LinkToolbarAppearance = function LinkToolbar
     intl = _ref.intl,
     onAddLink = _ref.onAddLink,
     onEditLink = _ref.onEditLink,
-    onOpenLink = _ref.onOpenLink;
+    onOpenLink = _ref.onOpenLink,
+    isInlineNode = _ref.isInlineNode;
   var _useState = (0, _react.useState)(true),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     showLinkingControls = _useState2[0],
     setShowLinkingControls = _useState2[1];
   (0, _react.useEffect)(function () {
     var _stateKey$getState;
-    var mediaNode = (0, _currentMediaNode.currentMediaNode)(editorState);
+    var mediaNode = isInlineNode ? (0, _currentMediaNode.currentMediaInlineNode)(editorState) : (0, _currentMediaNode.currentMediaNode)(editorState);
     if (!mediaNode) {
       setShowLinkingControls(false);
       return;
@@ -51,7 +52,7 @@ var LinkToolbarAppearance = exports.LinkToolbarAppearance = function LinkToolbar
     (0, _checkMediaType.checkMediaType)(mediaNode, mediaClientConfig).then(function (mediaType) {
       setShowLinkingControls(mediaType === 'external' || mediaType === 'image');
     });
-  }, [editorState]);
+  }, [editorState, isInlineNode]);
   if (!showLinkingControls) {
     return null;
   }

package/dist/cjs/toolbar/linking.js

@@ -21,10 +21,12 @@ function shouldShowMediaLinkToolbar(editorState) {
     return false;
   }
   var _editorState$schema = editorState.schema,
-    media = _editorState$schema.nodes.media,
+    _editorState$schema$n = _editorState$schema.nodes,
+    media = _editorState$schema$n.media,
+    mediaInline = _editorState$schema$n.mediaInline,
     link = _editorState$schema.marks.link;
   var node = editorState.doc.nodeAt(mediaLinkingState.mediaPos);
-  if (!node || node.type !== media) {
+  if (!node || ![media, mediaInline].includes(node.type)) {
     return false;
   }
   var _editorState$doc$reso = editorState.doc.resolve(mediaLinkingState.mediaPos),

package/dist/cjs/toolbar/mediaInline.js

@@ -7,26 +7,32 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getMediaInlineImageToolbar = exports.generateMediaInlineFloatingToolbar = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _card = require("@atlaskit/editor-common/card");
 var _messages = _interopRequireWildcard(require("@atlaskit/editor-common/messages"));
-var _state = require("@atlaskit/editor-prosemirror/state");
+var _state2 = require("@atlaskit/editor-prosemirror/state");
 var _download = _interopRequireDefault(require("@atlaskit/icon/glyph/download"));
 var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove"));
 var _mediaUi = require("@atlaskit/media-ui");
+var _linking = require("../commands/linking");
+var _linking2 = require("../pm-plugins/linking");
 var _isType = require("../utils/is-type");
 var _commands = require("./commands");
 var _filePreviewItem = require("./filePreviewItem");
+var _linkingToolbarAppearance = require("./linking-toolbar-appearance");
 var _utils = require("./utils");
 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; }
 var generateMediaInlineFloatingToolbar = exports.generateMediaInlineFloatingToolbar = function generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi) {
   var _pluginInjectionApi$a, _pluginInjectionApi$w;
+  var options = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : {};
   var editorAnalyticsAPI = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions;
   var widthPluginState = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$w = pluginInjectionApi.width) === null || _pluginInjectionApi$w === void 0 ? void 0 : _pluginInjectionApi$w.sharedState.currentState();
   var mediaInline = state.schema.nodes.mediaInline;
-  var mediaType = state.selection instanceof _state.NodeSelection && state.selection.node.attrs.type;
+  var mediaType = state.selection instanceof _state2.NodeSelection && state.selection.node.attrs.type;
+  var mediaLinkingState = (0, _linking2.getMediaLinkingState)(state);
   if (mediaPluginState.allowInlineImages && (0, _isType.isImage)(mediaType)) {
-    return getMediaInlineImageToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, widthPluginState);
+    return getMediaInlineImageToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, widthPluginState, pluginInjectionApi, mediaLinkingState);
   }
   var items = [{
     id: 'editor.media.view.switcher',
@@ -99,13 +105,14 @@ var generateMediaInlineFloatingToolbar = exports.generateMediaInlineFloatingTool
   }];
   return items;
 };
-var getMediaInlineImageToolbar = exports.getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, widthPluginState) {
+var getMediaInlineImageToolbar = exports.getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, widthPluginState, pluginInjectionApi, mediaLinkingState) {
   var mediaInline = state.schema.nodes.mediaInline;
   var mediaInlineImageTitle = intl.formatMessage(_messages.mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
   var mediaSingleTitle = intl.formatMessage(_messages.mediaAndEmbedToolbarMessages.changeToMediaSingle);
+
   // if type is image, return inline image floating toolbar items
   var inlineImageItems = [
-  // TODO: border marks, media single switcher, link, alt text, etc
+  // TODO: border marks, media single switcher, alt text, etc
   {
     id: 'editor.media.convert.mediainline',
     type: 'button',
@@ -133,6 +140,46 @@ var getMediaInlineImageToolbar = exports.getMediaInlineImageToolbar = function g
     onClick: (0, _commands.changeMediaInlineToMediaSingle)(editorAnalyticsAPI, widthPluginState)
   }, {
     type: 'separator'
+  }, {
+    type: 'custom',
+    fallback: [],
+    render: function render(editorView, idx) {
+      if (editorView !== null && editorView !== void 0 && editorView.state) {
+        var editLink = function editLink() {
+          if (editorView) {
+            var _state = editorView.state,
+              dispatch = editorView.dispatch;
+            (0, _linking.showLinkingToolbar)(_state, dispatch);
+          }
+        };
+        var openLink = function openLink() {
+          if (editorView) {
+            var _pluginInjectionApi$a2;
+            var tr = editorView.state.tr,
+              dispatch = editorView.dispatch;
+            pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 || _pluginInjectionApi$a2.actions.attachAnalyticsEvent({
+              eventType: _analytics.EVENT_TYPE.TRACK,
+              action: _analytics.ACTION.VISITED,
+              actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
+              actionSubjectId: _analytics.ACTION_SUBJECT_ID.LINK
+            })(tr);
+            dispatch(tr);
+            return true;
+          }
+        };
+        return /*#__PURE__*/_react.default.createElement(_linkingToolbarAppearance.LinkToolbarAppearance, {
+          key: idx,
+          editorState: editorView.state,
+          intl: intl,
+          mediaLinkingState: mediaLinkingState,
+          onAddLink: editLink,
+          onEditLink: editLink,
+          onOpenLink: openLink,
+          isInlineNode: true
+        });
+      }
+      return null;
+    }
   }, {
     type: 'copy-button',
     items: [{

package/dist/cjs/utils/analytics.js

@@ -3,8 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getMediaResizeAnalyticsEvent = exports.getMediaInputResizeAnalyticsEvent = void 0;
+exports.findChangeFromLocation = findChangeFromLocation;
+exports.getMediaResizeAnalyticsEvent = exports.getMediaInputResizeAnalyticsEvent = exports.getChangeMediaAnalytics = void 0;
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _utils = require("@atlaskit/editor-prosemirror/utils");
 var getMediaResizeAnalyticsEvent = exports.getMediaResizeAnalyticsEvent = function getMediaResizeAnalyticsEvent(type, attributes) {
   if (!attributes) {
     return;
@@ -54,4 +56,25 @@ var getMediaInputResizeAnalyticsEvent = exports.getMediaInputResizeAnalyticsEven
     },
     eventType: _analytics.EVENT_TYPE.UI
   };
-};
+};
+var getChangeMediaAnalytics = exports.getChangeMediaAnalytics = function getChangeMediaAnalytics(previousType, newType, changeFromLocation) {
+  return {
+    action: _analytics.ACTION.CHANGED_TYPE,
+    actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
+    eventType: _analytics.EVENT_TYPE.TRACK,
+    attributes: {
+      newType: newType,
+      previousType: previousType,
+      changeFromLocation: changeFromLocation
+    }
+  };
+};
+function findChangeFromLocation(selection) {
+  var _selection$$from$doc$ = selection.$from.doc.type,
+    schema = _selection$$from$doc$.schema,
+    name = _selection$$from$doc$.name;
+  var parentNodeInfo = (0, _utils.findParentNode)(function (node) {
+    return node.type !== schema.nodes.paragraph;
+  })(selection);
+  return parentNodeInfo ? parentNodeInfo.node.type.name : name;
+}

package/dist/cjs/utils/current-media-node.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.currentMediaNodeWithPos = exports.currentMediaNodeBorderMark = exports.currentMediaNode = void 0;
+exports.currentMediaNodeWithPos = exports.currentMediaNodeBorderMark = exports.currentMediaNode = exports.currentMediaInlineNodeWithPos = exports.currentMediaInlineNode = void 0;
 var _state = require("@atlaskit/editor-prosemirror/state");
 var currentMediaNodeWithPos = exports.currentMediaNodeWithPos = function currentMediaNodeWithPos(editorState) {
   var doc = editorState.doc,
@@ -22,10 +22,31 @@ var currentMediaNodeWithPos = exports.currentMediaNodeWithPos = function current
     pos: pos
   };
 };
+var currentMediaInlineNodeWithPos = exports.currentMediaInlineNodeWithPos = function currentMediaInlineNodeWithPos(editorState) {
+  var doc = editorState.doc,
+    selection = editorState.selection,
+    schema = editorState.schema;
+  if (!doc || !selection || !(selection instanceof _state.NodeSelection) || selection.node.type !== schema.nodes.mediaInline) {
+    return;
+  }
+  var pos = selection.$anchor.pos;
+  var node = doc.nodeAt(pos);
+  if (!node || node.type !== schema.nodes.mediaInline) {
+    return;
+  }
+  return {
+    node: node,
+    pos: pos
+  };
+};
 var currentMediaNode = exports.currentMediaNode = function currentMediaNode(editorState) {
   var _currentMediaNodeWith;
   return (_currentMediaNodeWith = currentMediaNodeWithPos(editorState)) === null || _currentMediaNodeWith === void 0 ? void 0 : _currentMediaNodeWith.node;
 };
+var currentMediaInlineNode = exports.currentMediaInlineNode = function currentMediaInlineNode(editorState) {
+  var _currentMediaInlineNo;
+  return (_currentMediaInlineNo = currentMediaInlineNodeWithPos(editorState)) === null || _currentMediaInlineNo === void 0 ? void 0 : _currentMediaInlineNo.node;
+};
 var currentMediaNodeBorderMark = exports.currentMediaNodeBorderMark = function currentMediaNodeBorderMark(editorState) {
   var node = currentMediaNode(editorState);
   if (!node) {

package/dist/cjs/utils/media-single.js

@@ -18,6 +18,7 @@ var _model = require("@atlaskit/editor-prosemirror/model");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _mediaCommon = require("../utils/media-common");
+var _analytics2 = require("./analytics");
 var _isType = require("./is-type");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -45,7 +46,9 @@ function insertNodesWithOptionalParagraph(nodes) {
       schema = state.schema;
     var paragraph = schema.nodes.paragraph;
     var inputMethod = analyticsAttributes.inputMethod,
-      fileExtension = analyticsAttributes.fileExtension;
+      fileExtension = analyticsAttributes.fileExtension,
+      newType = analyticsAttributes.newType,
+      previousType = analyticsAttributes.previousType;
     var openEnd = 0;
     if (shouldAddParagraph(state)) {
       nodes.push(paragraph.create());
@@ -55,6 +58,9 @@ function insertNodesWithOptionalParagraph(nodes) {
     if (inputMethod) {
       editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent(getInsertMediaAnalytics(inputMethod, fileExtension))(tr);
     }
+    if (newType && previousType) {
+      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent((0, _analytics2.getChangeMediaAnalytics)(previousType, newType, (0, _analytics2.findChangeFromLocation)(state.selection)))(tr);
+    }
     if (dispatch) {
       dispatch(tr);
     }
@@ -163,7 +169,9 @@ var changeFromMediaInlineToMediaSingleNode = exports.changeFromMediaInlineToMedi
     content: node
   })) {
     return insertNodesWithOptionalParagraph([node], {
-      fileExtension: fileExtension
+      fileExtension: fileExtension,
+      newType: _analytics.ACTION_SUBJECT_ID.MEDIA_SINGLE,
+      previousType: _analytics.ACTION_SUBJECT_ID.MEDIA_INLINE
     }, editorAnalyticsAPI)(state, dispatch);
   } else {
     var nodePos = state.tr.doc.resolve(state.selection.from).end();
@@ -174,7 +182,7 @@ var changeFromMediaInlineToMediaSingleNode = exports.changeFromMediaInlineToMedi
       var content = shouldAddParagraph(view.state) ? _model.Fragment.fromArray([node, state.schema.nodes.paragraph.create()]) : node;
       tr = (0, _utils2.safeInsert)(content, undefined, true)(state.tr);
     }
-    // TODO: add analytics specifically for change mediaInline to mediaSingle later
+    editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent((0, _analytics2.getChangeMediaAnalytics)(_analytics.ACTION_SUBJECT_ID.MEDIA_INLINE, _analytics.ACTION_SUBJECT_ID.MEDIA_SINGLE, (0, _analytics2.findChangeFromLocation)(state.selection)))(tr);
     dispatch(tr);
   }
   return true;

package/dist/es2019/commands/linking.js

@@ -1,16 +1,16 @@
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
-import { createToggleBlockMarkOnRange } from '@atlaskit/editor-common/commands';
+import { createToggleBlockMarkOnRange, createToggleInlineMarkOnRange } from '@atlaskit/editor-common/commands';
 import { normalizeUrl } from '@atlaskit/editor-common/utils';
 import { createMediaLinkingCommand, getMediaLinkingState, mediaLinkingPluginKey } from '../pm-plugins/linking';
 import { MediaLinkingActionsTypes } from '../pm-plugins/linking/actions';
 import { getMediaPluginState } from '../pm-plugins/main';
 import { checkMediaType } from '../utils/check-media-type';
-import { currentMediaNode } from '../utils/current-media-node';
+import { currentMediaInlineNode, currentMediaNode } from '../utils/current-media-node';
 export const showLinkingToolbar = createMediaLinkingCommand(state => {
   const mediaLinkingState = getMediaLinkingState(state);
   if (mediaLinkingState && mediaLinkingState.mediaPos !== null) {
-    const mediaSingle = state.doc.nodeAt(mediaLinkingState.mediaPos);
-    if (mediaSingle) {
+    const node = state.doc.nodeAt(mediaLinkingState.mediaPos);
+    if (node) {
       return {
         type: MediaLinkingActionsTypes.showToolbar
       };
@@ -21,7 +21,10 @@ export const showLinkingToolbar = createMediaLinkingCommand(state => {
 export const showLinkingToolbarWithMediaTypeCheck = (editorState, dispatch, editorView) => {
   if (dispatch && editorView) {
     const mediaNode = currentMediaNode(editorState);
-    if (!mediaNode) {
+    const mediaInlineNode = currentMediaInlineNode(editorState);
+    const nodeSelection = editorState.selection;
+    const currentSelectedNode = nodeSelection.node;
+    if (!mediaNode && !mediaInlineNode) {
       return false;
     }
     const {
@@ -30,15 +33,28 @@ export const showLinkingToolbarWithMediaTypeCheck = (editorState, dispatch, edit
     if (!mediaClientConfig) {
       return false;
     }
-    checkMediaType(mediaNode, mediaClientConfig).then(mediaType => {
-      if ((mediaType === 'external' || mediaType === 'image') &&
-      // We make sure the selection and the node hasn't changed.
-      currentMediaNode(editorView.state) === mediaNode) {
-        dispatch(editorView.state.tr.setMeta(mediaLinkingPluginKey, {
-          type: MediaLinkingActionsTypes.showToolbar
-        }));
-      }
-    });
+    if (mediaNode && currentSelectedNode !== mediaInlineNode) {
+      checkMediaType(mediaNode, mediaClientConfig).then(mediaType => {
+        if ((mediaType === 'external' || mediaType === 'image') &&
+        // We make sure the selection and the node hasn't changed.
+        currentMediaNode(editorView.state) === mediaNode) {
+          dispatch(editorView.state.tr.setMeta(mediaLinkingPluginKey, {
+            type: MediaLinkingActionsTypes.showToolbar
+          }));
+        }
+      });
+    }
+    if (mediaInlineNode) {
+      checkMediaType(mediaInlineNode, mediaClientConfig).then(mediaType => {
+        if ((mediaType === 'external' || mediaType === 'image') &&
+        // We make sure the selection and the node hasn't changed.
+        currentMediaInlineNode(editorView.state) === mediaInlineNode) {
+          dispatch(editorView.state.tr.setMeta(mediaLinkingPluginKey, {
+            type: MediaLinkingActionsTypes.showToolbar
+          }));
+        }
+      });
+    }
   }
   return true;
 };
@@ -89,11 +105,38 @@ function toggleLinkMark(tr, state, {
   }
   const linkMark = state.schema.marks.link;
   const {
-    media
+    media,
+    mediaInline
   } = state.schema.nodes;
-  const toggleBlockLinkMark = createToggleBlockMarkOnRange(linkMark, (prevAttrs, node) => {
-    // Only add mark to media
-    if (!node || node.type !== media) {
+  if (node.type !== mediaInline) {
+    const toggleBlockLinkMark = createToggleBlockMarkOnRange(linkMark, (prevAttrs, node) => {
+      // Only add mark to media
+      if (!node || node.type !== media) {
+        return; //No op
+      }
+
+      if (forceRemove) {
+        return false;
+      }
+      const href = normalizeUrl(url);
+      if (prevAttrs && prevAttrs.href === href) {
+        return; //No op
+      }
+
+      if (href.trim() === '') {
+        return false; // remove
+      }
+
+      return {
+        ...prevAttrs,
+        href: href
+      };
+    }, [media]);
+    toggleBlockLinkMark($pos.pos, $pos.pos + node.nodeSize, tr, state);
+  }
+  const toggleInlineLinkMark = createToggleInlineMarkOnRange(linkMark, (prevAttrs, node) => {
+    // Only add mark to mediaInline
+    if (!node || node.type !== mediaInline) {
       return; //No op
     }
 
@@ -113,8 +156,8 @@ function toggleLinkMark(tr, state, {
       ...prevAttrs,
       href: href
     };
-  }, [media]);
-  toggleBlockLinkMark($pos.pos, $pos.pos + node.nodeSize, tr, state);
+  });
+  toggleInlineLinkMark($pos.pos, $pos.pos + node.nodeSize, tr, state);
   return tr;
 }
 const fireAnalyticForMediaLink = (tr, action, attributes = undefined, editorAnalyticsAPI) => {

package/dist/es2019/pm-plugins/linking/index.js

@@ -23,9 +23,10 @@ function onSelectionChanged(tr) {
   if (!isNodeSelection) {
     return initialState;
   }
-  const mediaPos = tr.selection.$from.pos + 1;
+  const pos = tr.selection.$from.pos;
+  const mediaPos = tr.selection.node.type.name === 'mediaInline' ? pos : pos + 1;
   const node = tr.doc.nodeAt(mediaPos);
-  if (!node || node.type.name !== 'media') {
+  if (!node || !['media', 'mediaInline'].includes(node.type.name)) {
     return initialState;
   }
   const mark = node.marks.find(mark => mark.type.name === 'link');

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

@@ -16,7 +16,7 @@ export const mediaResizeAnnouncerMess = defineMessages({
     description: 'Media width {action} to {newMediaWidth} pixels.'
   },
   IncreasedAction: {
-    id: 'fabric.editor.media.decreased',
+    id: 'fabric.editor.media.increased',
     defaultMessage: 'increased',
     description: 'Increased action'
   },

package/dist/es2019/toolbar/index.js

@@ -520,7 +520,7 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
       const element = (_mediaPluginState$ele2 = mediaPluginState.element) === null || _mediaPluginState$ele2 === void 0 ? void 0 : _mediaPluginState$ele2.querySelector(`.${MediaInlineNodeSelector}`);
       return element || mediaPluginState.element;
     };
-    items = generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi);
+    items = generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, options);
   } else {
     baseToolbar.getDomRef = () => {
       var _mediaPluginState$ele3;

package/dist/es2019/toolbar/linking-toolbar-appearance.js

@@ -4,13 +4,12 @@ import { css, jsx } from '@emotion/react';
 import { isSafeUrl } from '@atlaskit/adf-schema';
 import { addLink, ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { linkMessages, linkToolbarMessages } from '@atlaskit/editor-common/messages';
-import { FloatingToolbarButton as ToolbarButton } from '@atlaskit/editor-common/ui';
-import { FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
+import { FloatingToolbarSeparator as Separator, FloatingToolbarButton as ToolbarButton } from '@atlaskit/editor-common/ui';
 import LinkIcon from '@atlaskit/icon/glyph/editor/link';
 import OpenIcon from '@atlaskit/icon/glyph/shortcut';
 import { stateKey } from '../pm-plugins/plugin-key';
 import { checkMediaType } from '../utils/check-media-type';
-import { currentMediaNode } from '../utils/current-media-node';
+import { currentMediaInlineNode, currentMediaNode } from '../utils/current-media-node';
 // need this wrapper, need to have 4px between items.
 const wrapper = css`
   display: flex;
@@ -23,12 +22,13 @@ export const LinkToolbarAppearance = ({
   intl,
   onAddLink,
   onEditLink,
-  onOpenLink
+  onOpenLink,
+  isInlineNode
 }) => {
   const [showLinkingControls, setShowLinkingControls] = useState(true);
   useEffect(() => {
     var _stateKey$getState;
-    const mediaNode = currentMediaNode(editorState);
+    const mediaNode = isInlineNode ? currentMediaInlineNode(editorState) : currentMediaNode(editorState);
     if (!mediaNode) {
       setShowLinkingControls(false);
       return;
@@ -41,7 +41,7 @@ export const LinkToolbarAppearance = ({
     checkMediaType(mediaNode, mediaClientConfig).then(mediaType => {
       setShowLinkingControls(mediaType === 'external' || mediaType === 'image');
     });
-  }, [editorState]);
+  }, [editorState, isInlineNode]);
   if (!showLinkingControls) {
     return null;
   }