@atlaskit/editor-plugin-media 0.9.1 → 0.10.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-media
 
+## 0.10.1
+
+### Patch Changes
+
+- [#65562](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/65562) [`857a5d841564`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/857a5d841564) - add analytics to track media single to media inline convert
+- Updated dependencies
+
+## 0.10.0
+
+### Minor Changes
+
+- [#64354](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/64354) [`b07fcd05c2c9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b07fcd05c2c9) - [ux] Added border support for media inline node
+
+### Patch Changes
+
+- [#65031](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/65031) [`a00094111b5a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a00094111b5a) - ED-21609 Update adf-schema to 35.3.0
+- Updated dependencies
+
 ## 0.9.1
 
 ### Patch Changes

package/dist/cjs/toolbar/commands.js

@@ -118,7 +118,7 @@ var removeInlineCard = exports.removeInlineCard = function removeInlineCard(stat
 };
 var toggleBorderMark = exports.toggleBorderMark = function toggleBorderMark(editorAnalyticsAPI) {
   return function (state, dispatch) {
-    var nodeWithPos = (0, _currentMediaNode.currentMediaNodeWithPos)(state);
+    var nodeWithPos = (0, _currentMediaNode.currentMediaNodeWithPos)(state) || (0, _currentMediaNode.currentMediaInlineNodeWithPos)(state);
     if (!nodeWithPos) {
       return false;
     }
@@ -173,7 +173,7 @@ var setBorderMark = exports.setBorderMark = function setBorderMark(editorAnalyti
   return function (attrs) {
     return function (state, dispatch) {
       var _node$marks$find, _ref, _attrs$color, _ref2, _attrs$size;
-      var nodeWithPos = (0, _currentMediaNode.currentMediaNodeWithPos)(state);
+      var nodeWithPos = (0, _currentMediaNode.currentMediaNodeWithPos)(state) || (0, _currentMediaNode.currentMediaInlineNodeWithPos)(state);
       if (!nodeWithPos) {
         return false;
       }
@@ -265,9 +265,7 @@ var changeMediaSingleToMediaInline = exports.changeMediaSingleToMediaInline = fu
     }
     var mediaInlineNode = mediaInline.create(_objectSpread(_objectSpread({}, mediaNode.attrs), {}, {
       type: 'image'
-      // TODO: [ED-20261] copy marks across once both border and link marks are supported for inline image
-    }));
-
+    }), null, mediaNode.marks);
     var space = state.schema.text(' ');
     var content = _model.Fragment.from([mediaInlineNode, space]);
     var node = paragraph.createChecked({}, content);
@@ -278,6 +276,7 @@ var changeMediaSingleToMediaInline = exports.changeMediaSingleToMediaInline = fu
     // 3 accounts for  paragraph 1 + mediaInline size 1 + space 1
     tr.setSelection(_state.TextSelection.create(tr.doc, from + 3));
     if (dispatch) {
+      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent((0, _analytics2.getChangeMediaAnalytics)(_analytics.ACTION_SUBJECT_ID.MEDIA_SINGLE, _analytics.ACTION_SUBJECT_ID.MEDIA_INLINE, (0, _analytics2.findChangeFromLocation)(state.selection)))(tr);
       dispatch(tr);
     }
     return true;

package/dist/cjs/toolbar/imageBorder.js

@@ -10,7 +10,7 @@ function shouldShowImageBorder(editorState) {
   if (!border) {
     return false;
   }
-  var nodeWithPos = (0, _currentMediaNode.currentMediaNodeWithPos)(editorState);
+  var nodeWithPos = (0, _currentMediaNode.currentMediaNodeWithPos)(editorState) || (0, _currentMediaNode.currentMediaInlineNodeWithPos)(editorState);
   if (!nodeWithPos) {
     return false;
   }

package/dist/cjs/toolbar/index.js

@@ -159,7 +159,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
         }
         var dispatch = editorView.dispatch,
           state = editorView.state;
-        var borderMark = (0, _currentMediaNode.currentMediaNodeBorderMark)(state);
+        var borderMark = (0, _currentMediaNode.currentMediaOrInlineNodeBorderMark)(state);
         return /*#__PURE__*/_react.default.createElement(_ImageBorder.default, {
           toggleBorder: function toggleBorder() {
             var _pluginInjectionApi$a;

package/dist/cjs/toolbar/mediaInline.js

@@ -16,10 +16,13 @@ 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 _ImageBorder = _interopRequireDefault(require("../ui/ImageBorder"));
+var _currentMediaNode = require("../utils/current-media-node");
 var _isType = require("../utils/is-type");
 var _altText = require("./alt-text");
 var _commands = require("./commands");
 var _filePreviewItem = require("./filePreviewItem");
+var _imageBorder = require("./imageBorder");
 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); }
@@ -111,13 +114,38 @@ var getMediaInlineImageToolbar = exports.getMediaInlineImageToolbar = function g
   var mediaInline = state.schema.nodes.mediaInline;
   var mediaInlineImageTitle = intl.formatMessage(_messages.mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
   var mediaSingleTitle = intl.formatMessage(_messages.mediaAndEmbedToolbarMessages.changeToMediaSingle);
-
-  // TODO: border marks, media single switcher, alt text, etc
   var widthPluginState = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$w = pluginInjectionApi.width) === null || _pluginInjectionApi$w === void 0 ? void 0 : _pluginInjectionApi$w.sharedState.currentState();
-  // if type is image, return inline image floating toolbar items
-  var inlineImageItems = [
-  // TODO: border marks, media single switcher, link, etc
-  {
+  var inlineImageItems = [];
+  if ((0, _imageBorder.shouldShowImageBorder)(state)) {
+    inlineImageItems.push({
+      type: 'custom',
+      fallback: [],
+      render: function render(editorView) {
+        if (!editorView) {
+          return null;
+        }
+        var dispatch = editorView.dispatch,
+          state = editorView.state;
+        var borderMark = (0, _currentMediaNode.currentMediaOrInlineNodeBorderMark)(state);
+        return /*#__PURE__*/_react.default.createElement(_ImageBorder.default, {
+          toggleBorder: function toggleBorder() {
+            var _pluginInjectionApi$a2;
+            (0, _commands.toggleBorderMark)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions)(state, dispatch);
+          },
+          setBorder: function setBorder(attrs) {
+            var _pluginInjectionApi$a3;
+            (0, _commands.setBorderMark)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 ? void 0 : _pluginInjectionApi$a3.actions)(attrs)(state, dispatch);
+          },
+          borderMark: borderMark,
+          intl: intl
+        });
+      }
+    });
+    inlineImageItems.push({
+      type: 'separator'
+    });
+  }
+  inlineImageItems.push({
     id: 'editor.media.convert.mediainline',
     type: 'button',
     title: mediaInlineImageTitle,
@@ -144,10 +172,10 @@ var getMediaInlineImageToolbar = exports.getMediaInlineImageToolbar = function g
     onClick: (0, _commands.changeMediaInlineToMediaSingle)(editorAnalyticsAPI, widthPluginState)
   }, {
     type: 'separator'
-  }];
+  });
   if (options.allowAltTextOnImages) {
-    var _pluginInjectionApi$a2;
-    inlineImageItems.push((0, _altText.altTextButton)(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions), {
+    var _pluginInjectionApi$a4;
+    inlineImageItems.push((0, _altText.altTextButton)(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions), {
       type: 'separator'
     });
   }
@@ -165,10 +193,10 @@ var getMediaInlineImageToolbar = exports.getMediaInlineImageToolbar = function g
         };
         var openLink = function openLink() {
           if (editorView) {
-            var _pluginInjectionApi$a3;
+            var _pluginInjectionApi$a5;
             var tr = editorView.state.tr,
               dispatch = editorView.dispatch;
-            pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 || _pluginInjectionApi$a3.actions.attachAnalyticsEvent({
+            pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 || _pluginInjectionApi$a5.actions.attachAnalyticsEvent({
               eventType: _analytics.EVENT_TYPE.TRACK,
               action: _analytics.ACTION.VISITED,
               actionSubject: _analytics.ACTION_SUBJECT.MEDIA,

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.currentMediaNodeWithPos = exports.currentMediaNodeBorderMark = exports.currentMediaNode = exports.currentMediaInlineNodeWithPos = exports.currentMediaInlineNode = void 0;
+exports.currentMediaOrInlineNodeBorderMark = exports.currentMediaNodeWithPos = 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,
@@ -47,8 +47,8 @@ var currentMediaInlineNode = exports.currentMediaInlineNode = function currentMe
   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);
+var currentMediaOrInlineNodeBorderMark = exports.currentMediaOrInlineNodeBorderMark = function currentMediaOrInlineNodeBorderMark(editorState) {
+  var node = currentMediaNode(editorState) || currentMediaInlineNode(editorState);
   if (!node) {
     return;
   }

package/dist/es2019/toolbar/commands.js

@@ -2,8 +2,8 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { isNodeSelection, removeSelectedNode, safeInsert } from '@atlaskit/editor-prosemirror/utils';
-import { getMediaInputResizeAnalyticsEvent } from '../utils/analytics';
-import { currentMediaNodeWithPos } from '../utils/current-media-node';
+import { findChangeFromLocation, getChangeMediaAnalytics, getMediaInputResizeAnalyticsEvent } from '../utils/analytics';
+import { currentMediaInlineNodeWithPos, currentMediaNodeWithPos } from '../utils/current-media-node';
 import { changeFromMediaInlineToMediaSingleNode } from '../utils/media-single';
 import { getSelectedMediaSingle, removeMediaGroupNode } from './utils';
 export const DEFAULT_BORDER_COLOR = '#091e4224';
@@ -106,7 +106,7 @@ export const removeInlineCard = (state, dispatch) => {
   return false;
 };
 export const toggleBorderMark = editorAnalyticsAPI => (state, dispatch) => {
-  const nodeWithPos = currentMediaNodeWithPos(state);
+  const nodeWithPos = currentMediaNodeWithPos(state) || currentMediaInlineNodeWithPos(state);
   if (!nodeWithPos) {
     return false;
   }
@@ -156,7 +156,7 @@ export const toggleBorderMark = editorAnalyticsAPI => (state, dispatch) => {
 };
 export const setBorderMark = editorAnalyticsAPI => attrs => (state, dispatch) => {
   var _node$marks$find, _ref, _attrs$color, _ref2, _attrs$size;
-  const nodeWithPos = currentMediaNodeWithPos(state);
+  const nodeWithPos = currentMediaNodeWithPos(state) || currentMediaInlineNodeWithPos(state);
   if (!nodeWithPos) {
     return false;
   }
@@ -242,9 +242,7 @@ export const changeMediaSingleToMediaInline = editorAnalyticsAPI => (state, disp
   const mediaInlineNode = mediaInline.create({
     ...mediaNode.attrs,
     type: 'image'
-    // TODO: [ED-20261] copy marks across once both border and link marks are supported for inline image
-  });
-
+  }, null, mediaNode.marks);
   const space = state.schema.text(' ');
   const content = Fragment.from([mediaInlineNode, space]);
   const node = paragraph.createChecked({}, content);
@@ -257,6 +255,7 @@ export const changeMediaSingleToMediaInline = editorAnalyticsAPI => (state, disp
   // 3 accounts for  paragraph 1 + mediaInline size 1 + space 1
   tr.setSelection(TextSelection.create(tr.doc, from + 3));
   if (dispatch) {
+    editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent(getChangeMediaAnalytics(ACTION_SUBJECT_ID.MEDIA_SINGLE, ACTION_SUBJECT_ID.MEDIA_INLINE, findChangeFromLocation(state.selection)))(tr);
     dispatch(tr);
   }
   return true;

package/dist/es2019/toolbar/imageBorder.js

@@ -1,10 +1,10 @@
-import { currentMediaNodeWithPos } from '../utils/current-media-node';
+import { currentMediaInlineNodeWithPos, currentMediaNodeWithPos } from '../utils/current-media-node';
 export function shouldShowImageBorder(editorState) {
   const border = editorState.schema.marks.border;
   if (!border) {
     return false;
   }
-  const nodeWithPos = currentMediaNodeWithPos(editorState);
+  const nodeWithPos = currentMediaNodeWithPos(editorState) || currentMediaInlineNodeWithPos(editorState);
   if (!nodeWithPos) {
     return false;
   }

package/dist/es2019/toolbar/index.js

@@ -19,7 +19,7 @@ import { getMediaLinkingState } from '../pm-plugins/linking';
 import { stateKey } from '../pm-plugins/plugin-key';
 import ImageBorderItem from '../ui/ImageBorder';
 import { FullWidthDisplay, PixelEntry } from '../ui/PixelEntry';
-import { currentMediaNodeBorderMark } from '../utils/current-media-node';
+import { currentMediaOrInlineNodeBorderMark } from '../utils/current-media-node';
 import { isVideo } from '../utils/media-single';
 import { altTextButton, getAltTextToolbar } from './alt-text';
 import { changeMediaCardToInline, changeMediaSingleToMediaInline, setBorderMark, toggleBorderMark, updateMediaSingleWidth } from './commands';
@@ -154,7 +154,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
           dispatch,
           state
         } = editorView;
-        const borderMark = currentMediaNodeBorderMark(state);
+        const borderMark = currentMediaOrInlineNodeBorderMark(state);
         return /*#__PURE__*/React.createElement(ImageBorderItem, {
           toggleBorder: () => {
             var _pluginInjectionApi$a;

package/dist/es2019/toolbar/mediaInline.js

@@ -8,10 +8,13 @@ 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 ImageBorderItem from '../ui/ImageBorder';
+import { currentMediaOrInlineNodeBorderMark } from '../utils/current-media-node';
 import { isImage } from '../utils/is-type';
 import { altTextButton } from './alt-text';
-import { changeInlineToMediaCard, changeMediaInlineToMediaSingle, removeInlineCard } from './commands';
+import { changeInlineToMediaCard, changeMediaInlineToMediaSingle, removeInlineCard, setBorderMark, toggleBorderMark } from './commands';
 import { FilePreviewItem } from './filePreviewItem';
+import { shouldShowImageBorder } from './imageBorder';
 import { LinkToolbarAppearance } from './linking-toolbar-appearance';
 import { downloadMedia } from './utils';
 export const generateMediaInlineFloatingToolbar = (state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, options = {}) => {
@@ -103,13 +106,40 @@ export const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverD
   } = state.schema.nodes;
   const mediaInlineImageTitle = intl.formatMessage(mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
   const mediaSingleTitle = intl.formatMessage(mediaAndEmbedToolbarMessages.changeToMediaSingle);
-
-  // TODO: border marks, media single switcher, alt text, etc
   const widthPluginState = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$w = pluginInjectionApi.width) === null || _pluginInjectionApi$w === void 0 ? void 0 : _pluginInjectionApi$w.sharedState.currentState();
-  // if type is image, return inline image floating toolbar items
-  const inlineImageItems = [
-  // TODO: border marks, media single switcher, link, etc
-  {
+  const inlineImageItems = [];
+  if (shouldShowImageBorder(state)) {
+    inlineImageItems.push({
+      type: 'custom',
+      fallback: [],
+      render: editorView => {
+        if (!editorView) {
+          return null;
+        }
+        const {
+          dispatch,
+          state
+        } = editorView;
+        const borderMark = currentMediaOrInlineNodeBorderMark(state);
+        return /*#__PURE__*/React.createElement(ImageBorderItem, {
+          toggleBorder: () => {
+            var _pluginInjectionApi$a2;
+            toggleBorderMark(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions)(state, dispatch);
+          },
+          setBorder: attrs => {
+            var _pluginInjectionApi$a3;
+            setBorderMark(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 ? void 0 : _pluginInjectionApi$a3.actions)(attrs)(state, dispatch);
+          },
+          borderMark: borderMark,
+          intl: intl
+        });
+      }
+    });
+    inlineImageItems.push({
+      type: 'separator'
+    });
+  }
+  inlineImageItems.push({
     id: 'editor.media.convert.mediainline',
     type: 'button',
     title: mediaInlineImageTitle,
@@ -132,10 +162,10 @@ export const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverD
     onClick: changeMediaInlineToMediaSingle(editorAnalyticsAPI, widthPluginState)
   }, {
     type: 'separator'
-  }];
+  });
   if (options.allowAltTextOnImages) {
-    var _pluginInjectionApi$a2;
-    inlineImageItems.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions), {
+    var _pluginInjectionApi$a4;
+    inlineImageItems.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions), {
       type: 'separator'
     });
   }
@@ -155,14 +185,14 @@ export const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverD
         };
         const openLink = () => {
           if (editorView) {
-            var _pluginInjectionApi$a3;
+            var _pluginInjectionApi$a5;
             const {
               state: {
                 tr
               },
               dispatch
             } = editorView;
-            pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 ? void 0 : _pluginInjectionApi$a3.actions.attachAnalyticsEvent({
+            pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions.attachAnalyticsEvent({
               eventType: EVENT_TYPE.TRACK,
               action: ACTION.VISITED,
               actionSubject: ACTION_SUBJECT.MEDIA,

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

@@ -45,8 +45,8 @@ 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);
+export const currentMediaOrInlineNodeBorderMark = editorState => {
+  const node = currentMediaNode(editorState) || currentMediaInlineNode(editorState);
   if (!node) {
     return;
   }

package/dist/esm/toolbar/commands.js

@@ -5,8 +5,8 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { isNodeSelection, removeSelectedNode, safeInsert } from '@atlaskit/editor-prosemirror/utils';
-import { getMediaInputResizeAnalyticsEvent } from '../utils/analytics';
-import { currentMediaNodeWithPos } from '../utils/current-media-node';
+import { findChangeFromLocation, getChangeMediaAnalytics, getMediaInputResizeAnalyticsEvent } from '../utils/analytics';
+import { currentMediaInlineNodeWithPos, currentMediaNodeWithPos } from '../utils/current-media-node';
 import { changeFromMediaInlineToMediaSingleNode } from '../utils/media-single';
 import { getSelectedMediaSingle, removeMediaGroupNode } from './utils';
 export var DEFAULT_BORDER_COLOR = '#091e4224';
@@ -111,7 +111,7 @@ export var removeInlineCard = function removeInlineCard(state, dispatch) {
 };
 export var toggleBorderMark = function toggleBorderMark(editorAnalyticsAPI) {
   return function (state, dispatch) {
-    var nodeWithPos = currentMediaNodeWithPos(state);
+    var nodeWithPos = currentMediaNodeWithPos(state) || currentMediaInlineNodeWithPos(state);
     if (!nodeWithPos) {
       return false;
     }
@@ -166,7 +166,7 @@ export var setBorderMark = function setBorderMark(editorAnalyticsAPI) {
   return function (attrs) {
     return function (state, dispatch) {
       var _node$marks$find, _ref, _attrs$color, _ref2, _attrs$size;
-      var nodeWithPos = currentMediaNodeWithPos(state);
+      var nodeWithPos = currentMediaNodeWithPos(state) || currentMediaInlineNodeWithPos(state);
       if (!nodeWithPos) {
         return false;
       }
@@ -258,9 +258,7 @@ export var changeMediaSingleToMediaInline = function changeMediaSingleToMediaInl
     }
     var mediaInlineNode = mediaInline.create(_objectSpread(_objectSpread({}, mediaNode.attrs), {}, {
       type: 'image'
-      // TODO: [ED-20261] copy marks across once both border and link marks are supported for inline image
-    }));
-
+    }), null, mediaNode.marks);
     var space = state.schema.text(' ');
     var content = Fragment.from([mediaInlineNode, space]);
     var node = paragraph.createChecked({}, content);
@@ -271,6 +269,7 @@ export var changeMediaSingleToMediaInline = function changeMediaSingleToMediaInl
     // 3 accounts for  paragraph 1 + mediaInline size 1 + space 1
     tr.setSelection(TextSelection.create(tr.doc, from + 3));
     if (dispatch) {
+      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent(getChangeMediaAnalytics(ACTION_SUBJECT_ID.MEDIA_SINGLE, ACTION_SUBJECT_ID.MEDIA_INLINE, findChangeFromLocation(state.selection)))(tr);
       dispatch(tr);
     }
     return true;

package/dist/esm/toolbar/imageBorder.js

@@ -1,10 +1,10 @@
-import { currentMediaNodeWithPos } from '../utils/current-media-node';
+import { currentMediaInlineNodeWithPos, currentMediaNodeWithPos } from '../utils/current-media-node';
 export function shouldShowImageBorder(editorState) {
   var border = editorState.schema.marks.border;
   if (!border) {
     return false;
   }
-  var nodeWithPos = currentMediaNodeWithPos(editorState);
+  var nodeWithPos = currentMediaNodeWithPos(editorState) || currentMediaInlineNodeWithPos(editorState);
   if (!nodeWithPos) {
     return false;
   }

package/dist/esm/toolbar/index.js

@@ -23,7 +23,7 @@ import { getMediaLinkingState } from '../pm-plugins/linking';
 import { stateKey } from '../pm-plugins/plugin-key';
 import ImageBorderItem from '../ui/ImageBorder';
 import { FullWidthDisplay, PixelEntry } from '../ui/PixelEntry';
-import { currentMediaNodeBorderMark } from '../utils/current-media-node';
+import { currentMediaOrInlineNodeBorderMark } from '../utils/current-media-node';
 import { isVideo } from '../utils/media-single';
 import { altTextButton, getAltTextToolbar } from './alt-text';
 import { changeMediaCardToInline, changeMediaSingleToMediaInline, setBorderMark, toggleBorderMark, updateMediaSingleWidth } from './commands';
@@ -149,7 +149,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
         }
         var dispatch = editorView.dispatch,
           state = editorView.state;
-        var borderMark = currentMediaNodeBorderMark(state);
+        var borderMark = currentMediaOrInlineNodeBorderMark(state);
         return /*#__PURE__*/React.createElement(ImageBorderItem, {
           toggleBorder: function toggleBorder() {
             var _pluginInjectionApi$a;

package/dist/esm/toolbar/mediaInline.js

@@ -8,10 +8,13 @@ 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 ImageBorderItem from '../ui/ImageBorder';
+import { currentMediaOrInlineNodeBorderMark } from '../utils/current-media-node';
 import { isImage } from '../utils/is-type';
 import { altTextButton } from './alt-text';
-import { changeInlineToMediaCard, changeMediaInlineToMediaSingle, removeInlineCard } from './commands';
+import { changeInlineToMediaCard, changeMediaInlineToMediaSingle, removeInlineCard, setBorderMark, toggleBorderMark } from './commands';
 import { FilePreviewItem } from './filePreviewItem';
+import { shouldShowImageBorder } from './imageBorder';
 import { LinkToolbarAppearance } from './linking-toolbar-appearance';
 import { downloadMedia } from './utils';
 export var generateMediaInlineFloatingToolbar = function generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi) {
@@ -101,13 +104,38 @@ export var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(stat
   var mediaInline = state.schema.nodes.mediaInline;
   var mediaInlineImageTitle = intl.formatMessage(mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
   var mediaSingleTitle = intl.formatMessage(mediaAndEmbedToolbarMessages.changeToMediaSingle);
-
-  // TODO: border marks, media single switcher, alt text, etc
   var widthPluginState = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$w = pluginInjectionApi.width) === null || _pluginInjectionApi$w === void 0 ? void 0 : _pluginInjectionApi$w.sharedState.currentState();
-  // if type is image, return inline image floating toolbar items
-  var inlineImageItems = [
-  // TODO: border marks, media single switcher, link, etc
-  {
+  var inlineImageItems = [];
+  if (shouldShowImageBorder(state)) {
+    inlineImageItems.push({
+      type: 'custom',
+      fallback: [],
+      render: function render(editorView) {
+        if (!editorView) {
+          return null;
+        }
+        var dispatch = editorView.dispatch,
+          state = editorView.state;
+        var borderMark = currentMediaOrInlineNodeBorderMark(state);
+        return /*#__PURE__*/React.createElement(ImageBorderItem, {
+          toggleBorder: function toggleBorder() {
+            var _pluginInjectionApi$a2;
+            toggleBorderMark(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions)(state, dispatch);
+          },
+          setBorder: function setBorder(attrs) {
+            var _pluginInjectionApi$a3;
+            setBorderMark(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 ? void 0 : _pluginInjectionApi$a3.actions)(attrs)(state, dispatch);
+          },
+          borderMark: borderMark,
+          intl: intl
+        });
+      }
+    });
+    inlineImageItems.push({
+      type: 'separator'
+    });
+  }
+  inlineImageItems.push({
     id: 'editor.media.convert.mediainline',
     type: 'button',
     title: mediaInlineImageTitle,
@@ -134,10 +162,10 @@ export var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(stat
     onClick: changeMediaInlineToMediaSingle(editorAnalyticsAPI, widthPluginState)
   }, {
     type: 'separator'
-  }];
+  });
   if (options.allowAltTextOnImages) {
-    var _pluginInjectionApi$a2;
-    inlineImageItems.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions), {
+    var _pluginInjectionApi$a4;
+    inlineImageItems.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions), {
       type: 'separator'
     });
   }
@@ -155,10 +183,10 @@ export var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(stat
         };
         var openLink = function openLink() {
           if (editorView) {
-            var _pluginInjectionApi$a3;
+            var _pluginInjectionApi$a5;
             var tr = editorView.state.tr,
               dispatch = editorView.dispatch;
-            pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 || _pluginInjectionApi$a3.actions.attachAnalyticsEvent({
+            pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 || _pluginInjectionApi$a5.actions.attachAnalyticsEvent({
               eventType: EVENT_TYPE.TRACK,
               action: ACTION.VISITED,
               actionSubject: ACTION_SUBJECT.MEDIA,

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

@@ -41,8 +41,8 @@ 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);
+export var currentMediaOrInlineNodeBorderMark = function currentMediaOrInlineNodeBorderMark(editorState) {
+  var node = currentMediaNode(editorState) || currentMediaInlineNode(editorState);
   if (!node) {
     return;
   }

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

@@ -11,4 +11,4 @@ export declare const currentMediaInlineNodeWithPos: (editorState: EditorState) =
 } | 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;
+export declare const currentMediaOrInlineNodeBorderMark: (editorState: EditorState) => BorderMarkAttributes | undefined;

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

@@ -11,4 +11,4 @@ export declare const currentMediaInlineNodeWithPos: (editorState: EditorState) =
 } | 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;
+export declare const currentMediaOrInlineNodeBorderMark: (editorState: EditorState) => BorderMarkAttributes | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-media",
-  "version": "0.9.1",
+  "version": "0.10.1",
   "description": "Media plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -33,11 +33,11 @@
     "./types": "./src/types.ts"
   },
   "dependencies": {
-    "@atlaskit/adf-schema": "^35.2.0",
-    "@atlaskit/analytics-namespaced-context": "^6.7.0",
+    "@atlaskit/adf-schema": "^35.3.0",
+    "@atlaskit/analytics-namespaced-context": "^6.8.0",
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/button": "^17.2.0",
-    "@atlaskit/editor-common": "^76.34.0",
+    "@atlaskit/editor-common": "^76.35.0",
     "@atlaskit/editor-palette": "1.5.2",
     "@atlaskit/editor-plugin-analytics": "^0.4.0",
     "@atlaskit/editor-plugin-decorations": "^0.2.0",