@atlaskit/editor-plugin-media 0.9.0 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-media
 
+## 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
+
+- [#63950](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/63950) [`aa44815a0e60`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/aa44815a0e60) - [ux] changed color for instructions to add alt text
+- Updated dependencies
+
 ## 0.9.0
 
 ### Minor Changes

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

@@ -33,7 +33,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 var CONTAINER_WIDTH_IN_PX = exports.CONTAINER_WIDTH_IN_PX = _ui.RECENT_SEARCH_WIDTH_IN_PX;
 var MAX_ALT_TEXT_LENGTH = exports.MAX_ALT_TEXT_LENGTH = 510; // double tweet length
 
-var supportText = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: ", ";\n  padding: ", " ", ";\n  line-height: 20px;\n  border-top: 1px solid ", ";\n  margin: 0;\n"])), "var(--ds-text-subtlest, ".concat(_colors.N100, ")"), (0, _editorSharedStyles.relativeFontSizeToBase16)(12), "var(--ds-space-150, 12px)", "var(--ds-space-500, 40px)", "var(--ds-border, ".concat(_colors.N30, ")"));
+var supportText = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: ", ";\n  padding: ", " ", ";\n  line-height: 20px;\n  border-top: 1px solid ", ";\n  margin: 0;\n"])), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"), (0, _editorSharedStyles.relativeFontSizeToBase16)(12), "var(--ds-space-150, 12px)", "var(--ds-space-500, 40px)", "var(--ds-border, ".concat(_colors.N30, ")"));
 var container = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: ", "px;\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n  line-height: 2;\n"])), CONTAINER_WIDTH_IN_PX);
 var inputWrapper = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  line-height: 0;\n  padding: 5px 0;\n  align-items: center;\n"])));
 var validationWrapper = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  line-height: 0;\n  padding: ", " ", "\n    ", " 0;\n  margin: 0 ", " 0 ", ";\n  border-top: 1px solid ", ";\n  align-items: start;\n  flex-direction: column;\n"])), "var(--ds-space-150, 12px)", "var(--ds-space-300, 24px)", "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)", "var(--ds-space-500, 40px)", "var(--ds-border-danger, ".concat(_colors.R400, ")"));

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);

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/pm-plugins/alt-text/ui/AltTextEdit.js

@@ -11,14 +11,14 @@ import { FloatingToolbarButton as Button, ErrorMessage, PanelTextInput, RECENT_S
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import ChevronLeftLargeIcon from '@atlaskit/icon/glyph/chevron-left-large';
 import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
-import { N100, N30, N80, R400 } from '@atlaskit/theme/colors';
+import { N200, N30, N80, R400 } from '@atlaskit/theme/colors';
 import { closeMediaAltTextMenu, closeMediaAltTextMenuAndSave } from '../commands';
 import { messages } from '../messages';
 export const CONTAINER_WIDTH_IN_PX = RECENT_SEARCH_WIDTH_IN_PX;
 export const MAX_ALT_TEXT_LENGTH = 510; // double tweet length
 
 const supportText = css`
-  color: ${`var(--ds-text-subtlest, ${N100})`};
+  color: ${`var(--ds-text-subtlest, ${N200})`};
   font-size: ${relativeFontSizeToBase16(12)};
   padding: ${"var(--ds-space-150, 12px)"} ${"var(--ds-space-500, 40px)"};
   line-height: 20px;

package/dist/es2019/toolbar/commands.js

@@ -3,7 +3,7 @@ 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 { 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);

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/pm-plugins/alt-text/ui/AltTextEdit.js

@@ -21,13 +21,13 @@ import { FloatingToolbarButton as Button, ErrorMessage, PanelTextInput, RECENT_S
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import ChevronLeftLargeIcon from '@atlaskit/icon/glyph/chevron-left-large';
 import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
-import { N100, N30, N80, R400 } from '@atlaskit/theme/colors';
+import { N200, N30, N80, R400 } from '@atlaskit/theme/colors';
 import { closeMediaAltTextMenu, closeMediaAltTextMenuAndSave } from '../commands';
 import { messages } from '../messages';
 export var CONTAINER_WIDTH_IN_PX = RECENT_SEARCH_WIDTH_IN_PX;
 export var MAX_ALT_TEXT_LENGTH = 510; // double tweet length
 
-var supportText = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: ", ";\n  padding: ", " ", ";\n  line-height: 20px;\n  border-top: 1px solid ", ";\n  margin: 0;\n"])), "var(--ds-text-subtlest, ".concat(N100, ")"), relativeFontSizeToBase16(12), "var(--ds-space-150, 12px)", "var(--ds-space-500, 40px)", "var(--ds-border, ".concat(N30, ")"));
+var supportText = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: ", ";\n  padding: ", " ", ";\n  line-height: 20px;\n  border-top: 1px solid ", ";\n  margin: 0;\n"])), "var(--ds-text-subtlest, ".concat(N200, ")"), relativeFontSizeToBase16(12), "var(--ds-space-150, 12px)", "var(--ds-space-500, 40px)", "var(--ds-border, ".concat(N30, ")"));
 var container = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: ", "px;\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n  line-height: 2;\n"])), CONTAINER_WIDTH_IN_PX);
 var inputWrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  line-height: 0;\n  padding: 5px 0;\n  align-items: center;\n"])));
 var validationWrapper = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  line-height: 0;\n  padding: ", " ", "\n    ", " 0;\n  margin: 0 ", " 0 ", ";\n  border-top: 1px solid ", ";\n  align-items: start;\n  flex-direction: column;\n"])), "var(--ds-space-150, 12px)", "var(--ds-space-300, 24px)", "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)", "var(--ds-space-500, 40px)", "var(--ds-border-danger, ".concat(R400, ")"));

package/dist/esm/toolbar/commands.js

@@ -6,7 +6,7 @@ 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 { 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);

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.0",
+  "version": "0.10.0",
   "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/adf-schema": "^35.3.0",
     "@atlaskit/analytics-namespaced-context": "^6.7.0",
     "@atlaskit/analytics-next": "^9.1.0",
-    "@atlaskit/button": "^17.1.0",
-    "@atlaskit/editor-common": "^76.30.0",
+    "@atlaskit/button": "^17.2.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",
@@ -50,7 +50,7 @@
     "@atlaskit/editor-plugin-selection": "^0.1.0",
     "@atlaskit/editor-plugin-width": "^0.2.0",
     "@atlaskit/editor-prosemirror": "1.1.0",
-    "@atlaskit/editor-shared-styles": "^2.6.0",
+    "@atlaskit/editor-shared-styles": "^2.9.0",
     "@atlaskit/editor-tables": "^2.3.0",
     "@atlaskit/form": "^9.0.3",
     "@atlaskit/icon": "^22.0.0",
@@ -65,7 +65,7 @@
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/textfield": "^6.0.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.32.0",
+    "@atlaskit/tokens": "^1.33.0",
     "@atlaskit/tooltip": "^18.1.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",