@atlaskit/editor-plugin-media 0.6.12 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/editor-plugin-media
 
+## 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
+
+- [#61685](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/61685) [`ac1ec9ea4cd3`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ac1ec9ea4cd3) - [ux] Add border mark support to mediaInline in Editor/Renderer
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.6.12
 
 ### Patch 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/nodeviews/mediaInline.js

@@ -115,6 +115,7 @@ var handleNewNode = exports.handleNewNode = function handleNewNode(props) {
   });
 };
 var MediaInline = exports.MediaInline = function MediaInline(props) {
+  var _props$node;
   var _useState = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     viewMediaClientConfig = _useState2[0],
@@ -185,6 +186,9 @@ var MediaInline = exports.MediaInline = function MediaInline(props) {
     });
   }
   var allowInlineImages = props.mediaPluginState.allowInlineImages;
+  var borderMark = (_props$node = props.node) === null || _props$node === void 0 || (_props$node = _props$node.marks) === null || _props$node === void 0 ? void 0 : _props$node.find(function (mark) {
+    return mark.type.name === 'border';
+  });
   if (allowInlineImages && (0, _isType.isImage)(type)) {
     return /*#__PURE__*/_react.default.createElement(_mediaInline.MediaInlineImageCard, {
       mediaClient: (0, _mediaClientReact.getMediaClient)(viewMediaClientConfig),
@@ -192,7 +196,11 @@ var MediaInline = exports.MediaInline = function MediaInline(props) {
       isSelected: props.isSelected,
       alt: alt,
       width: width,
-      height: height
+      height: height,
+      border: {
+        borderSize: borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size,
+        borderColor: borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.color
+      }
     });
   }
   return /*#__PURE__*/_react.default.createElement(_mediaCard.MediaInlineCard, {

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/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/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/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/nodeviews/mediaInline.js

@@ -62,6 +62,7 @@ export const handleNewNode = props => {
   mediaPluginState.handleMediaNodeMount(node, () => getPos());
 };
 export const MediaInline = props => {
+  var _props$node, _props$node$marks;
   const [viewMediaClientConfig, setViewMediaClientConfig] = useState();
   const [isContextIdUnsync, setIsContextIdUnsync] = useState(true);
   useEffect(() => {
@@ -114,6 +115,7 @@ export const MediaInline = props => {
   const {
     allowInlineImages
   } = props.mediaPluginState;
+  const borderMark = (_props$node = props.node) === null || _props$node === void 0 ? void 0 : (_props$node$marks = _props$node.marks) === null || _props$node$marks === void 0 ? void 0 : _props$node$marks.find(mark => mark.type.name === 'border');
   if (allowInlineImages && isImage(type)) {
     return /*#__PURE__*/React.createElement(MediaInlineImageCard, {
       mediaClient: getMediaClient(viewMediaClientConfig),
@@ -121,7 +123,11 @@ export const MediaInline = props => {
       isSelected: props.isSelected,
       alt: alt,
       width: width,
-      height: height
+      height: height,
+      border: {
+        borderSize: borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size,
+        borderColor: borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.color
+      }
     });
   }
   return /*#__PURE__*/React.createElement(MediaInlineCard, {

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/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;
   }

package/dist/es2019/toolbar/linking.js

@@ -11,14 +11,15 @@ export function shouldShowMediaLinkToolbar(editorState) {
   }
   const {
     nodes: {
-      media
+      media,
+      mediaInline
     },
     marks: {
       link
     }
   } = editorState.schema;
   const node = editorState.doc.nodeAt(mediaLinkingState.mediaPos);
-  if (!node || node.type !== media) {
+  if (!node || ![media, mediaInline].includes(node.type)) {
     return false;
   }
   const {

package/dist/es2019/toolbar/mediaInline.js

@@ -1,15 +1,19 @@
 import React from 'react';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { IconEmbed, IconInline } from '@atlaskit/editor-common/card';
 import commonMessages, { cardMessages, mediaAndEmbedToolbarMessages } from '@atlaskit/editor-common/messages';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import DownloadIcon from '@atlaskit/icon/glyph/download';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import { messages } from '@atlaskit/media-ui';
+import { showLinkingToolbar } from '../commands/linking';
+import { getMediaLinkingState } from '../pm-plugins/linking';
 import { isImage } from '../utils/is-type';
 import { changeInlineToMediaCard, changeMediaInlineToMediaSingle, removeInlineCard } from './commands';
 import { FilePreviewItem } from './filePreviewItem';
+import { LinkToolbarAppearance } from './linking-toolbar-appearance';
 import { downloadMedia } from './utils';
-export const generateMediaInlineFloatingToolbar = (state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi) => {
+export const generateMediaInlineFloatingToolbar = (state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, options = {}) => {
   var _pluginInjectionApi$a, _pluginInjectionApi$w;
   const editorAnalyticsAPI = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions;
   const widthPluginState = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$w = pluginInjectionApi.width) === null || _pluginInjectionApi$w === void 0 ? void 0 : _pluginInjectionApi$w.sharedState.currentState();
@@ -17,8 +21,9 @@ export const generateMediaInlineFloatingToolbar = (state, intl, mediaPluginState
     mediaInline
   } = state.schema.nodes;
   const mediaType = state.selection instanceof NodeSelection && state.selection.node.attrs.type;
+  const mediaLinkingState = getMediaLinkingState(state);
   if (mediaPluginState.allowInlineImages && isImage(mediaType)) {
-    return getMediaInlineImageToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, widthPluginState);
+    return getMediaInlineImageToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, widthPluginState, pluginInjectionApi, mediaLinkingState);
   }
   const items = [{
     id: 'editor.media.view.switcher',
@@ -91,15 +96,16 @@ export const generateMediaInlineFloatingToolbar = (state, intl, mediaPluginState
   }];
   return items;
 };
-export const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, widthPluginState) => {
+export const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, widthPluginState, pluginInjectionApi, mediaLinkingState) => {
   const {
     mediaInline
   } = state.schema.nodes;
   const mediaInlineImageTitle = intl.formatMessage(mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
   const mediaSingleTitle = intl.formatMessage(mediaAndEmbedToolbarMessages.changeToMediaSingle);
+
   // if type is image, return inline image floating toolbar items
   const 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',
@@ -123,6 +129,52 @@ export const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverD
     onClick: changeMediaInlineToMediaSingle(editorAnalyticsAPI, widthPluginState)
   }, {
     type: 'separator'
+  }, {
+    type: 'custom',
+    fallback: [],
+    render: (editorView, idx) => {
+      if (editorView !== null && editorView !== void 0 && editorView.state) {
+        const editLink = () => {
+          if (editorView) {
+            const {
+              state,
+              dispatch
+            } = editorView;
+            showLinkingToolbar(state, dispatch);
+          }
+        };
+        const openLink = () => {
+          if (editorView) {
+            var _pluginInjectionApi$a2;
+            const {
+              state: {
+                tr
+              },
+              dispatch
+            } = editorView;
+            pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions.attachAnalyticsEvent({
+              eventType: EVENT_TYPE.TRACK,
+              action: ACTION.VISITED,
+              actionSubject: ACTION_SUBJECT.MEDIA,
+              actionSubjectId: ACTION_SUBJECT_ID.LINK
+            })(tr);
+            dispatch(tr);
+            return true;
+          }
+        };
+        return /*#__PURE__*/React.createElement(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/es2019/utils/current-media-node.js

@@ -18,10 +18,33 @@ export const currentMediaNodeWithPos = editorState => {
     pos
   };
 };
+export const currentMediaInlineNodeWithPos = editorState => {
+  const {
+    doc,
+    selection,
+    schema
+  } = editorState;
+  if (!doc || !selection || !(selection instanceof NodeSelection) || selection.node.type !== schema.nodes.mediaInline) {
+    return;
+  }
+  const pos = selection.$anchor.pos;
+  const node = doc.nodeAt(pos);
+  if (!node || node.type !== schema.nodes.mediaInline) {
+    return;
+  }
+  return {
+    node,
+    pos
+  };
+};
 export const currentMediaNode = editorState => {
   var _currentMediaNodeWith;
   return (_currentMediaNodeWith = currentMediaNodeWithPos(editorState)) === null || _currentMediaNodeWith === void 0 ? void 0 : _currentMediaNodeWith.node;
 };
+export const currentMediaInlineNode = editorState => {
+  var _currentMediaInlineNo;
+  return (_currentMediaInlineNo = currentMediaInlineNodeWithPos(editorState)) === null || _currentMediaInlineNo === void 0 ? void 0 : _currentMediaInlineNo.node;
+};
 export const currentMediaNodeBorderMark = editorState => {
   const node = currentMediaNode(editorState);
   if (!node) {

package/dist/esm/commands/linking.js

@@ -2,18 +2,18 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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) { _defineProperty(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; }
 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 var showLinkingToolbar = createMediaLinkingCommand(function (state) {
   var mediaLinkingState = 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: MediaLinkingActionsTypes.showToolbar
       };
@@ -24,7 +24,10 @@ export var showLinkingToolbar = createMediaLinkingCommand(function (state) {
 export var showLinkingToolbarWithMediaTypeCheck = function showLinkingToolbarWithMediaTypeCheck(editorState, dispatch, editorView) {
   if (dispatch && editorView) {
     var mediaNode = currentMediaNode(editorState);
-    if (!mediaNode) {
+    var mediaInlineNode = currentMediaInlineNode(editorState);
+    var nodeSelection = editorState.selection;
+    var currentSelectedNode = nodeSelection.node;
+    if (!mediaNode && !mediaInlineNode) {
       return false;
     }
     var _getMediaPluginState = getMediaPluginState(editorState),
@@ -32,15 +35,28 @@ export var showLinkingToolbarWithMediaTypeCheck = function showLinkingToolbarWit
     if (!mediaClientConfig) {
       return false;
     }
-    checkMediaType(mediaNode, mediaClientConfig).then(function (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(function (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(function (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;
 };
@@ -90,10 +106,37 @@ function toggleLinkMark(tr, state, _ref) {
     return tr;
   }
   var linkMark = state.schema.marks.link;
-  var media = state.schema.nodes.media;
-  var toggleBlockLinkMark = 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 = createToggleBlockMarkOnRange(linkMark, function (prevAttrs, node) {
+      // Only add mark to media
+      if (!node || node.type !== media) {
+        return; //No op
+      }
+
+      if (forceRemove) {
+        return false;
+      }
+      var href = 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 = createToggleInlineMarkOnRange(linkMark, function (prevAttrs, node) {
+    // Only add mark to mediaInline
+    if (!node || node.type !== mediaInline) {
       return; //No op
     }
 
@@ -112,8 +155,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/esm/nodeviews/mediaInline.js

@@ -105,6 +105,7 @@ export var handleNewNode = function handleNewNode(props) {
   });
 };
 export var MediaInline = function MediaInline(props) {
+  var _props$node;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     viewMediaClientConfig = _useState2[0],
@@ -175,6 +176,9 @@ export var MediaInline = function MediaInline(props) {
     });
   }
   var allowInlineImages = props.mediaPluginState.allowInlineImages;
+  var borderMark = (_props$node = props.node) === null || _props$node === void 0 || (_props$node = _props$node.marks) === null || _props$node === void 0 ? void 0 : _props$node.find(function (mark) {
+    return mark.type.name === 'border';
+  });
   if (allowInlineImages && isImage(type)) {
     return /*#__PURE__*/React.createElement(MediaInlineImageCard, {
       mediaClient: getMediaClient(viewMediaClientConfig),
@@ -182,7 +186,11 @@ export var MediaInline = function MediaInline(props) {
       isSelected: props.isSelected,
       alt: alt,
       width: width,
-      height: height
+      height: height,
+      border: {
+        borderSize: borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size,
+        borderColor: borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.color
+      }
     });
   }
   return /*#__PURE__*/React.createElement(MediaInlineCard, {

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

@@ -25,9 +25,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/esm/toolbar/index.js

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

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

@@ -7,13 +7,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.
 var wrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin-right: ", ";\n"])), "var(--ds-space-050, 4px)");
 export var LinkToolbarAppearance = function LinkToolbarAppearance(_ref) {
@@ -22,14 +21,15 @@ export var LinkToolbarAppearance = function LinkToolbarAppearance(_ref) {
     intl = _ref.intl,
     onAddLink = _ref.onAddLink,
     onEditLink = _ref.onEditLink,
-    onOpenLink = _ref.onOpenLink;
+    onOpenLink = _ref.onOpenLink,
+    isInlineNode = _ref.isInlineNode;
   var _useState = useState(true),
     _useState2 = _slicedToArray(_useState, 2),
     showLinkingControls = _useState2[0],
     setShowLinkingControls = _useState2[1];
   useEffect(function () {
     var _stateKey$getState;
-    var mediaNode = currentMediaNode(editorState);
+    var mediaNode = isInlineNode ? currentMediaInlineNode(editorState) : currentMediaNode(editorState);
     if (!mediaNode) {
       setShowLinkingControls(false);
       return;
@@ -42,7 +42,7 @@ export var LinkToolbarAppearance = function LinkToolbarAppearance(_ref) {
     checkMediaType(mediaNode, mediaClientConfig).then(function (mediaType) {
       setShowLinkingControls(mediaType === 'external' || mediaType === 'image');
     });
-  }, [editorState]);
+  }, [editorState, isInlineNode]);
   if (!showLinkingControls) {
     return null;
   }

package/dist/esm/toolbar/linking.js

@@ -13,10 +13,12 @@ export 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/esm/toolbar/mediaInline.js

@@ -1,22 +1,28 @@
 import React from 'react';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { IconEmbed, IconInline } from '@atlaskit/editor-common/card';
 import commonMessages, { cardMessages, mediaAndEmbedToolbarMessages } from '@atlaskit/editor-common/messages';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import DownloadIcon from '@atlaskit/icon/glyph/download';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import { messages } from '@atlaskit/media-ui';
+import { showLinkingToolbar } from '../commands/linking';
+import { getMediaLinkingState } from '../pm-plugins/linking';
 import { isImage } from '../utils/is-type';
 import { changeInlineToMediaCard, changeMediaInlineToMediaSingle, removeInlineCard } from './commands';
 import { FilePreviewItem } from './filePreviewItem';
+import { LinkToolbarAppearance } from './linking-toolbar-appearance';
 import { downloadMedia } from './utils';
 export var 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 NodeSelection && state.selection.node.attrs.type;
+  var mediaLinkingState = getMediaLinkingState(state);
   if (mediaPluginState.allowInlineImages && 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',
@@ -89,13 +95,14 @@ export var generateMediaInlineFloatingToolbar = function generateMediaInlineFloa
   }];
   return items;
 };
-export var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, widthPluginState) {
+export var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, widthPluginState, pluginInjectionApi, mediaLinkingState) {
   var mediaInline = state.schema.nodes.mediaInline;
   var mediaInlineImageTitle = intl.formatMessage(mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
   var mediaSingleTitle = intl.formatMessage(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',
@@ -123,6 +130,46 @@ export var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(stat
     onClick: 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;
+            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: EVENT_TYPE.TRACK,
+              action: ACTION.VISITED,
+              actionSubject: ACTION_SUBJECT.MEDIA,
+              actionSubjectId: ACTION_SUBJECT_ID.LINK
+            })(tr);
+            dispatch(tr);
+            return true;
+          }
+        };
+        return /*#__PURE__*/React.createElement(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/esm/utils/current-media-node.js

@@ -16,10 +16,31 @@ export var currentMediaNodeWithPos = function currentMediaNodeWithPos(editorStat
     pos: pos
   };
 };
+export var currentMediaInlineNodeWithPos = function currentMediaInlineNodeWithPos(editorState) {
+  var doc = editorState.doc,
+    selection = editorState.selection,
+    schema = editorState.schema;
+  if (!doc || !selection || !(selection instanceof 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
+  };
+};
 export var currentMediaNode = function currentMediaNode(editorState) {
   var _currentMediaNodeWith;
   return (_currentMediaNodeWith = currentMediaNodeWithPos(editorState)) === null || _currentMediaNodeWith === void 0 ? void 0 : _currentMediaNodeWith.node;
 };
+export var currentMediaInlineNode = function currentMediaInlineNode(editorState) {
+  var _currentMediaInlineNo;
+  return (_currentMediaInlineNo = currentMediaInlineNodeWithPos(editorState)) === null || _currentMediaInlineNo === void 0 ? void 0 : _currentMediaInlineNo.node;
+};
 export var currentMediaNodeBorderMark = function currentMediaNodeBorderMark(editorState) {
   var node = currentMediaNode(editorState);
   if (!node) {

package/dist/types/toolbar/linking-toolbar-appearance.d.ts

@@ -10,5 +10,6 @@ export interface LinkingToolbarProps {
     onAddLink: React.MouseEventHandler;
     onEditLink: React.MouseEventHandler;
     onOpenLink: React.MouseEventHandler;
+    isInlineNode?: boolean;
 }
 export declare const LinkToolbarAppearance: React.FC<LinkingToolbarProps>;

package/dist/types/toolbar/mediaInline.d.ts

@@ -5,6 +5,8 @@ import type { HoverDecorationHandler } from '@atlaskit/editor-plugin-decorations
 import type { WidthPluginState } from '@atlaskit/editor-plugin-width';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { MediaNextEditorPluginType } from '../next-plugin-type';
+import type { MediaLinkingState } from '../pm-plugins/linking';
 import type { MediaPluginState } from '../pm-plugins/types';
-export declare const generateMediaInlineFloatingToolbar: (state: EditorState, intl: IntlShape, mediaPluginState: MediaPluginState, hoverDecoration: HoverDecorationHandler | undefined, pluginInjectionApi: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined) => FloatingToolbarItem<Command>[];
-export declare const getMediaInlineImageToolbar: (state: EditorState, intl: IntlShape, mediaPluginState: MediaPluginState, hoverDecoration: HoverDecorationHandler | undefined, editorAnalyticsAPI: EditorAnalyticsAPI | undefined, widthPluginState: WidthPluginState | undefined) => FloatingToolbarItem<Command>[];
+import type { MediaFloatingToolbarOptions } from '../types';
+export declare const generateMediaInlineFloatingToolbar: (state: EditorState, intl: IntlShape, mediaPluginState: MediaPluginState, hoverDecoration: HoverDecorationHandler | undefined, pluginInjectionApi: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined, options?: MediaFloatingToolbarOptions) => FloatingToolbarItem<Command>[];
+export declare const getMediaInlineImageToolbar: (state: EditorState, intl: IntlShape, mediaPluginState: MediaPluginState, hoverDecoration: HoverDecorationHandler | undefined, editorAnalyticsAPI: EditorAnalyticsAPI | undefined, widthPluginState: WidthPluginState | undefined, pluginInjectionApi: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined, mediaLinkingState: MediaLinkingState) => FloatingToolbarItem<Command>[];

package/dist/types/utils/current-media-node.d.ts

@@ -5,5 +5,10 @@ export declare const currentMediaNodeWithPos: (editorState: EditorState) => {
     node: PMNode;
     pos: number;
 } | undefined;
+export declare const currentMediaInlineNodeWithPos: (editorState: EditorState) => {
+    node: PMNode;
+    pos: number;
+} | undefined;
 export declare const currentMediaNode: (editorState: EditorState) => PMNode | undefined;
+export declare const currentMediaInlineNode: (editorState: EditorState) => PMNode | undefined;
 export declare const currentMediaNodeBorderMark: (editorState: EditorState) => BorderMarkAttributes | undefined;

package/dist/types-ts4.5/toolbar/linking-toolbar-appearance.d.ts

@@ -10,5 +10,6 @@ export interface LinkingToolbarProps {
     onAddLink: React.MouseEventHandler;
     onEditLink: React.MouseEventHandler;
     onOpenLink: React.MouseEventHandler;
+    isInlineNode?: boolean;
 }
 export declare const LinkToolbarAppearance: React.FC<LinkingToolbarProps>;

package/dist/types-ts4.5/toolbar/mediaInline.d.ts

@@ -5,6 +5,8 @@ import type { HoverDecorationHandler } from '@atlaskit/editor-plugin-decorations
 import type { WidthPluginState } from '@atlaskit/editor-plugin-width';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { MediaNextEditorPluginType } from '../next-plugin-type';
+import type { MediaLinkingState } from '../pm-plugins/linking';
 import type { MediaPluginState } from '../pm-plugins/types';
-export declare const generateMediaInlineFloatingToolbar: (state: EditorState, intl: IntlShape, mediaPluginState: MediaPluginState, hoverDecoration: HoverDecorationHandler | undefined, pluginInjectionApi: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined) => FloatingToolbarItem<Command>[];
-export declare const getMediaInlineImageToolbar: (state: EditorState, intl: IntlShape, mediaPluginState: MediaPluginState, hoverDecoration: HoverDecorationHandler | undefined, editorAnalyticsAPI: EditorAnalyticsAPI | undefined, widthPluginState: WidthPluginState | undefined) => FloatingToolbarItem<Command>[];
+import type { MediaFloatingToolbarOptions } from '../types';
+export declare const generateMediaInlineFloatingToolbar: (state: EditorState, intl: IntlShape, mediaPluginState: MediaPluginState, hoverDecoration: HoverDecorationHandler | undefined, pluginInjectionApi: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined, options?: MediaFloatingToolbarOptions) => FloatingToolbarItem<Command>[];
+export declare const getMediaInlineImageToolbar: (state: EditorState, intl: IntlShape, mediaPluginState: MediaPluginState, hoverDecoration: HoverDecorationHandler | undefined, editorAnalyticsAPI: EditorAnalyticsAPI | undefined, widthPluginState: WidthPluginState | undefined, pluginInjectionApi: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined, mediaLinkingState: MediaLinkingState) => FloatingToolbarItem<Command>[];

package/dist/types-ts4.5/utils/current-media-node.d.ts

@@ -5,5 +5,10 @@ export declare const currentMediaNodeWithPos: (editorState: EditorState) => {
     node: PMNode;
     pos: number;
 } | undefined;
+export declare const currentMediaInlineNodeWithPos: (editorState: EditorState) => {
+    node: PMNode;
+    pos: number;
+} | undefined;
 export declare const currentMediaNode: (editorState: EditorState) => PMNode | undefined;
+export declare const currentMediaInlineNode: (editorState: EditorState) => PMNode | undefined;
 export declare const currentMediaNodeBorderMark: (editorState: EditorState) => BorderMarkAttributes | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-media",
-  "version": "0.6.12",
+  "version": "0.8.0",
   "description": "Media plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -10,7 +10,8 @@
   "atlassian": {
     "team": "Editor: Media Experience Porygon",
     "releaseModel": "continuous",
-    "singleton": true
+    "singleton": true,
+    "runReact18": false
   },
   "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
   "main": "dist/cjs/index.js",
@@ -36,7 +37,7 @@
     "@atlaskit/analytics-namespaced-context": "^6.7.0",
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/button": "^17.1.0",
-    "@atlaskit/editor-common": "^76.27.0",
+    "@atlaskit/editor-common": "^76.29.0",
     "@atlaskit/editor-palette": "1.5.2",
     "@atlaskit/editor-plugin-analytics": "^0.4.0",
     "@atlaskit/editor-plugin-decorations": "^0.2.0",
@@ -64,8 +65,8 @@
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/textfield": "^6.0.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.30.0",
-    "@atlaskit/tooltip": "^18.0.0",
+    "@atlaskit/tokens": "^1.31.0",
+    "@atlaskit/tooltip": "^18.1.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "classnames": "^2.2.5",