@atlaskit/editor-core 181.0.0 → 182.0.0

package/dist/cjs/plugins/list/index.js

@@ -18,7 +18,8 @@ var _assets = require("../quick-insert/assets");
   Toolbar buttons to bullet and ordered list can be found in
   packages/editor/editor-core/src/plugins/toolbar-lists-indentation/ui/Toolbar.tsx
  */
-var listPlugin = function listPlugin(options) {
+var listPlugin = function listPlugin(options, api) {
+  var featureFlags = (api === null || api === void 0 ? void 0 : api.dependencies.featureFlags.sharedState.currentState()) || {};
   return {
     name: 'list',
     nodes: function nodes() {
@@ -38,7 +39,7 @@ var listPlugin = function listPlugin(options) {
         name: 'list',
         plugin: function plugin(_ref) {
           var dispatch = _ref.dispatch;
-          return (0, _main.createPlugin)(dispatch);
+          return (0, _main.createPlugin)(dispatch, featureFlags);
         }
       }, {
         name: 'listInputRule',
@@ -50,7 +51,7 @@ var listPlugin = function listPlugin(options) {
       }, {
         name: 'listKeymap',
         plugin: function plugin() {
-          return (0, _keymap.default)();
+          return (0, _keymap.default)(featureFlags);
         }
       }];
     },

package/dist/cjs/plugins/list/pm-plugins/input-rules/create-list-input-rule.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createRuleForListType = createRuleForListType;
 var _inputRules = require("../../../../utils/input-rules");
+var _wrappingJoinRule = require("./wrapping-join-rule");
 var _analytics = require("../../../analytics");
 var _analytics2 = require("@atlaskit/editor-common/analytics");
 var getOrder = function getOrder(matchResult) {
@@ -50,7 +51,8 @@ function createRuleForListType(_ref) {
       };
     };
   }
-  var inputRule = (0, _inputRules.createWrappingJoinRule)({
+  var inputRule = (0, _wrappingJoinRule.createWrappingJoinRule)({
+    featureFlags: featureFlags,
     match: expression,
     nodeType: listType,
     getAttrs: getAttrs,

package/dist/cjs/plugins/list/pm-plugins/input-rules/index.js

@@ -17,7 +17,8 @@ function inputRulePlugin(schema, featureFlags) {
       // because of issue where product converted the
       // character into an escaped version.
       expression: /^\s*([\*\-\u2022]) $/,
-      listType: bulletList
+      listType: bulletList,
+      featureFlags: featureFlags
     }));
   }
   var expression = featureFlags !== null && featureFlags !== void 0 && featureFlags.restartNumberedLists ? /((^[1-9]{1}[0-9]{0,2})|^(0))[\.\)] $/ : /^(1)[\.\)] $/;

package/dist/cjs/plugins/list/pm-plugins/input-rules/wrapping-join-rule.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createWrappingJoinRule = void 0;
+var _prosemirrorTransform = require("prosemirror-transform");
+var _prosemirrorUtils = require("prosemirror-utils");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _inputRules = require("../../../../utils/input-rules");
+var createWrappingJoinRule = function createWrappingJoinRule(_ref) {
+  var match = _ref.match,
+    nodeType = _ref.nodeType,
+    getAttrs = _ref.getAttrs,
+    joinPredicate = _ref.joinPredicate,
+    featureFlags = _ref.featureFlags;
+  var handler = function handler(state, match, start, end) {
+    var attrs = (getAttrs instanceof Function ? getAttrs(match) : getAttrs) || {};
+    var tr = state.tr;
+    var fixedStart = Math.max(start, 1);
+    tr.delete(fixedStart, end);
+    var $start = tr.doc.resolve(fixedStart);
+    var range = $start.blockRange();
+    var wrapping = range && (0, _prosemirrorTransform.findWrapping)(range, nodeType, attrs);
+    if (!wrapping || !range) {
+      return null;
+    }
+    var parentNodePosMapped = tr.mapping.map(range.start);
+    var parentNode = tr.doc.nodeAt(parentNodePosMapped);
+    var lastWrap = wrapping[wrapping.length - 1];
+    if (parentNode && lastWrap) {
+      var allowedMarks = lastWrap.type.allowedMarks(parentNode.marks) || [];
+      tr.setNodeMarkup(parentNodePosMapped, parentNode.type, parentNode.attrs, allowedMarks);
+    }
+    tr.wrap(range, wrapping);
+    if (featureFlags !== null && featureFlags !== void 0 && featureFlags.restartNumberedLists && nodeType === state.schema.nodes.orderedList) {
+      // if an orderedList node would be inserted by the input rule match, and
+      // that orderedList node is being added directly before another orderedList
+      // node, then join those nodes
+      var $end = tr.doc.resolve(tr.mapping.map(end));
+      var _node = (0, _prosemirrorUtils.findParentNodeOfTypeClosestToPos)($end, nodeType);
+      if (_node) {
+        var nodeEnd = _node.pos + _node.node.nodeSize;
+        var after = tr.doc.resolve(nodeEnd).nodeAfter;
+        if (after && after.type === nodeType && (0, _prosemirrorTransform.canJoin)(tr.doc, nodeEnd) && (!joinPredicate || joinPredicate(match, after, _analytics.JOIN_SCENARIOS_WHEN_TYPING_TO_INSERT_LIST.JOINED_TO_LIST_BELOW))) {
+          tr.join(nodeEnd);
+        }
+      }
+    }
+    var before = tr.doc.resolve(fixedStart - 1).nodeBefore;
+    if (before && before.type === nodeType && (0, _prosemirrorTransform.canJoin)(tr.doc, fixedStart - 1) && (!joinPredicate || joinPredicate(match, before, _analytics.JOIN_SCENARIOS_WHEN_TYPING_TO_INSERT_LIST.JOINED_TO_LIST_ABOVE))) {
+      tr.join(fixedStart - 1);
+    }
+    return tr;
+  };
+  return (0, _inputRules.createRule)(match, handler);
+};
+exports.createWrappingJoinRule = createWrappingJoinRule;

package/dist/cjs/plugins/list/pm-plugins/keymap.js

@@ -13,14 +13,14 @@ var _outdentList = require("../commands/outdent-list");
 var _analytics = require("../../analytics");
 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; }
-function keymapPlugin() {
+function keymapPlugin(featureFlags) {
   var list = {};
   keymaps.bindKeymapWithCommand(keymaps.findShortcutByKeymap(keymaps.toggleOrderedList), (0, _commands.toggleList)(_analytics.INPUT_METHOD.KEYBOARD, 'orderedList'), list);
   keymaps.bindKeymapWithCommand(keymaps.findShortcutByKeymap(keymaps.toggleBulletList), (0, _commands.toggleList)(_analytics.INPUT_METHOD.KEYBOARD, 'bulletList'), list);
   keymaps.bindKeymapWithCommand(keymaps.indentList.common, (0, _commands.indentList)(_analytics.INPUT_METHOD.KEYBOARD), list);
-  keymaps.bindKeymapWithCommand(keymaps.outdentList.common, (0, _outdentList.outdentList)(_analytics.INPUT_METHOD.KEYBOARD), list);
-  keymaps.bindKeymapWithCommand(keymaps.enter.common, _commands.enterKeyCommand, list);
-  keymaps.bindKeymapWithCommand(keymaps.backspace.common, _commands.backspaceKeyCommand, list);
+  keymaps.bindKeymapWithCommand(keymaps.outdentList.common, (0, _outdentList.outdentList)(_analytics.INPUT_METHOD.KEYBOARD, featureFlags), list);
+  keymaps.bindKeymapWithCommand(keymaps.enter.common, (0, _commands.enterKeyCommand)(featureFlags), list);
+  keymaps.bindKeymapWithCommand(keymaps.backspace.common, (0, _commands.backspaceKeyCommand)(featureFlags), list);
   keymaps.bindKeymapWithCommand(keymaps.deleteKey.common, _commands.deleteKeyCommand, list);
 
   // This shortcut is Mac only

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

@@ -17,7 +17,6 @@ var _utils = require("../../../utils");
 var _gapCursorSelection = require("../../selection/gap-cursor-selection");
 var _styles = require("@atlaskit/editor-common/styles");
 var _utils2 = require("@atlaskit/editor-common/utils");
-var _featureFlagsContext = require("../../feature-flags-context");
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var listPluginKey = new _prosemirrorState.PluginKey('listPlugin');
@@ -30,9 +29,8 @@ var initialState = {
   orderedListDisabled: false,
   decorationSet: _prosemirrorView.DecorationSet.empty
 };
-var getDecorations = function getDecorations(doc, state) {
+var getDecorations = function getDecorations(doc, state, featureFlags) {
   var decorations = [];
-  var featureFlags = (0, _featureFlagsContext.getFeatureFlags)(state);
 
   // this stack keeps track of each (nested) list to calculate the indentation level
   var processedListsStack = [];
@@ -86,12 +84,14 @@ var getDecorations = function getDecorations(doc, state) {
   return _prosemirrorView.DecorationSet.empty.add(doc, decorations);
 };
 exports.getDecorations = getDecorations;
-var handleDocChanged = function handleDocChanged(tr, pluginState, editorState) {
-  var nextPluginState = handleSelectionChanged(tr, pluginState);
-  var decorationSet = getDecorations(tr.doc, editorState);
-  return _objectSpread(_objectSpread({}, nextPluginState), {}, {
-    decorationSet: decorationSet
-  });
+var handleDocChanged = function handleDocChanged(featureFlags) {
+  return function (tr, pluginState, editorState) {
+    var nextPluginState = handleSelectionChanged(tr, pluginState);
+    var decorationSet = getDecorations(tr.doc, editorState, featureFlags);
+    return _objectSpread(_objectSpread({}, nextPluginState), {}, {
+      decorationSet: decorationSet
+    });
+  };
 };
 var handleSelectionChanged = function handleSelectionChanged(tr, pluginState) {
   var _tr$doc$type$schema$n = tr.doc.type.schema.nodes,
@@ -118,20 +118,22 @@ var reducer = function reducer() {
     return state;
   };
 };
-var _pluginFactory = (0, _pluginStateFactory.pluginFactory)(listPluginKey, reducer(), {
-    onDocChanged: handleDocChanged,
-    onSelectionChanged: handleSelectionChanged
-  }),
-  getPluginState = _pluginFactory.getPluginState,
-  createPluginState = _pluginFactory.createPluginState;
-var createInitialState = function createInitialState(state) {
-  return _objectSpread(_objectSpread({}, initialState), {}, {
-    decorationSet: getDecorations(state.doc, state)
-  });
+var createInitialState = function createInitialState(featureFlags) {
+  return function (state) {
+    return _objectSpread(_objectSpread({}, initialState), {}, {
+      decorationSet: getDecorations(state.doc, state, featureFlags)
+    });
+  };
 };
-var createPlugin = function createPlugin(eventDispatch) {
+var createPlugin = function createPlugin(eventDispatch, featureFlags) {
+  var _pluginFactory = (0, _pluginStateFactory.pluginFactory)(listPluginKey, reducer(), {
+      onDocChanged: handleDocChanged(featureFlags),
+      onSelectionChanged: handleSelectionChanged
+    }),
+    getPluginState = _pluginFactory.getPluginState,
+    createPluginState = _pluginFactory.createPluginState;
   return new _safePlugin.SafePlugin({
-    state: createPluginState(eventDispatch, createInitialState),
+    state: createPluginState(eventDispatch, createInitialState(featureFlags)),
     key: listPluginKey,
     props: {
       decorations: function decorations(state) {

package/dist/cjs/plugins/media/nodeviews/mediaNodeView/media.js

@@ -168,6 +168,9 @@ var MediaNode = /*#__PURE__*/function (_Component) {
         isLoading = _this$props.isLoading,
         maxDimensions = _this$props.maxDimensions,
         mediaOptions = _this$props.mediaOptions;
+      var borderMark = node.marks.find(function (m) {
+        return m.type.name === 'border';
+      });
       var _this$state = this.state,
         viewMediaClientConfig = _this$state.viewMediaClientConfig,
         contextIdentifierProvider = _this$state.contextIdentifierProvider;
@@ -203,7 +206,9 @@ var MediaNode = /*#__PURE__*/function (_Component) {
       };
       return /*#__PURE__*/_react.default.createElement(_styles.MediaCardWrapper, {
         dimensions: originalDimensions,
-        onContextMenu: this.selectMediaSingle
+        onContextMenu: this.selectMediaSingle,
+        borderWidth: borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size,
+        selected: selected
       }, /*#__PURE__*/_react.default.createElement(_mediaCard.Card, {
         mediaClientConfig: mediaClientConfig,
         resizeMode: "stretchy-fit",

package/dist/cjs/plugins/media/nodeviews/styles.js

@@ -20,8 +20,20 @@ var forcedDimensions = (0, _react2.css)(_templateObject3 || (_templateObject3 =
 var MediaCardWrapper = function MediaCardWrapper(_ref) {
   var dimensions = _ref.dimensions,
     children = _ref.children,
+    selected = _ref.selected,
+    _ref$borderWidth = _ref.borderWidth,
+    borderWidth = _ref$borderWidth === void 0 ? 0 : _ref$borderWidth,
     onContextMenu = _ref.onContextMenu;
+  var calculatedBorderWidth = selected && borderWidth > 0 ? borderWidth + 1 : borderWidth;
   return (0, _react2.jsx)("div", {
+    "data-testid": "media-card-wrapper",
+    style: {
+      borderColor: "var(--custom-palette-color)",
+      borderWidth: "".concat(calculatedBorderWidth, "px"),
+      borderStyle: 'solid',
+      borderRadius: "".concat(calculatedBorderWidth * 2, "px")
+    }
+  }, (0, _react2.jsx)("div", {
     css: forcedDimensions,
     style: {
       paddingBottom: "".concat(dimensions.height / dimensions.width * 100, "%")
@@ -29,6 +41,6 @@ var MediaCardWrapper = function MediaCardWrapper(_ref) {
     onContextMenuCapture: onContextMenu
   }, (0, _react2.jsx)("div", {
     css: absoluteDiv
-  }, children));
+  }, children)));
 };
 exports.MediaCardWrapper = MediaCardWrapper;

package/dist/cjs/plugins/media/toolbar/commands.js

@@ -3,12 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.removeInlineCard = exports.changeMediaCardToInline = exports.changeInlineToMediaCard = void 0;
+exports.toggleBorderMark = exports.setBorderMark = exports.removeInlineCard = exports.changeMediaCardToInline = exports.changeInlineToMediaCard = exports.DEFAULT_BORDER_SIZE = exports.DEFAULT_BORDER_COLOR = void 0;
 var _prosemirrorModel = require("prosemirror-model");
 var _prosemirrorState = require("prosemirror-state");
 var _prosemirrorUtils = require("prosemirror-utils");
 var _analytics = require("../../analytics");
 var _utils = require("./utils");
+var _currentMediaNode = require("../utils/current-media-node");
+var DEFAULT_BORDER_COLOR = '#091e4224';
+exports.DEFAULT_BORDER_COLOR = DEFAULT_BORDER_COLOR;
+var DEFAULT_BORDER_SIZE = 2;
+exports.DEFAULT_BORDER_SIZE = DEFAULT_BORDER_SIZE;
 var changeInlineToMediaCard = function changeInlineToMediaCard(state, dispatch) {
   var _state$schema$nodes = state.schema.nodes,
     media = _state$schema$nodes.media,
@@ -90,4 +95,102 @@ var removeInlineCard = function removeInlineCard(state, dispatch) {
   }
   return false;
 };
-exports.removeInlineCard = removeInlineCard;
+exports.removeInlineCard = removeInlineCard;
+var toggleBorderMark = function toggleBorderMark(state, dispatch) {
+  var nodeWithPos = (0, _currentMediaNode.currentMediaNodeWithPos)(state);
+  if (!nodeWithPos) {
+    return false;
+  }
+  var node = nodeWithPos.node,
+    pos = nodeWithPos.pos;
+  var borderMark = node.marks.find(function (m) {
+    return m.type.name === 'border';
+  });
+  var marks = node.marks.filter(function (m) {
+    return m.type.name !== 'border';
+  }).concat(borderMark ? [] : state.schema.marks.border.create({
+    color: DEFAULT_BORDER_COLOR,
+    size: DEFAULT_BORDER_SIZE
+  }));
+  var tr = state.tr.setNodeMarkup(pos, node.type, node.attrs, marks);
+  tr.setMeta('scrollIntoView', false);
+  if (state.selection instanceof _prosemirrorState.NodeSelection) {
+    if (state.selection.$anchor.pos === state.selection.from) {
+      tr.setSelection(_prosemirrorState.NodeSelection.create(tr.doc, state.selection.from));
+    }
+  }
+  if (dispatch) {
+    if (borderMark !== null && borderMark !== void 0 && borderMark.attrs) {
+      (0, _analytics.addAnalytics)(state, tr, {
+        action: _analytics.ACTION.DELETED,
+        actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
+        actionSubjectId: _analytics.ACTION_SUBJECT_ID.BORDER,
+        eventType: _analytics.EVENT_TYPE.TRACK,
+        attributes: {
+          previousColor: borderMark.attrs.color,
+          previousSize: borderMark.attrs.size
+        }
+      });
+    } else {
+      (0, _analytics.addAnalytics)(state, tr, {
+        action: _analytics.ACTION.ADDED,
+        actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
+        actionSubjectId: _analytics.ACTION_SUBJECT_ID.BORDER,
+        eventType: _analytics.EVENT_TYPE.TRACK,
+        attributes: {
+          color: DEFAULT_BORDER_COLOR,
+          size: DEFAULT_BORDER_SIZE
+        }
+      });
+    }
+    dispatch(tr);
+  }
+  return true;
+};
+exports.toggleBorderMark = toggleBorderMark;
+var setBorderMark = function setBorderMark(attrs) {
+  return function (state, dispatch) {
+    var _node$marks$find, _ref, _attrs$color, _ref2, _attrs$size;
+    var nodeWithPos = (0, _currentMediaNode.currentMediaNodeWithPos)(state);
+    if (!nodeWithPos) {
+      return false;
+    }
+    var node = nodeWithPos.node,
+      pos = nodeWithPos.pos;
+    var borderMark = (_node$marks$find = node.marks.find(function (m) {
+      return m.type.name === 'border';
+    })) === null || _node$marks$find === void 0 ? void 0 : _node$marks$find.attrs;
+    var color = (_ref = (_attrs$color = attrs.color) !== null && _attrs$color !== void 0 ? _attrs$color : borderMark === null || borderMark === void 0 ? void 0 : borderMark.color) !== null && _ref !== void 0 ? _ref : DEFAULT_BORDER_COLOR;
+    var size = (_ref2 = (_attrs$size = attrs.size) !== null && _attrs$size !== void 0 ? _attrs$size : borderMark === null || borderMark === void 0 ? void 0 : borderMark.size) !== null && _ref2 !== void 0 ? _ref2 : DEFAULT_BORDER_SIZE;
+    var marks = node.marks.filter(function (m) {
+      return m.type.name !== 'border';
+    }).concat(state.schema.marks.border.create({
+      color: color,
+      size: size
+    }));
+    var tr = state.tr.setNodeMarkup(pos, node.type, node.attrs, marks);
+    tr.setMeta('scrollIntoView', false);
+    if (state.selection instanceof _prosemirrorState.NodeSelection) {
+      if (state.selection.$anchor.pos === state.selection.from) {
+        tr.setSelection(_prosemirrorState.NodeSelection.create(tr.doc, state.selection.from));
+      }
+    }
+    if (dispatch) {
+      (0, _analytics.addAnalytics)(state, tr, {
+        action: _analytics.ACTION.UPDATED,
+        actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
+        actionSubjectId: _analytics.ACTION_SUBJECT_ID.BORDER,
+        eventType: _analytics.EVENT_TYPE.TRACK,
+        attributes: {
+          previousColor: borderMark === null || borderMark === void 0 ? void 0 : borderMark.color,
+          previousSize: borderMark === null || borderMark === void 0 ? void 0 : borderMark.size,
+          newColor: color,
+          newSize: size
+        }
+      });
+      dispatch(tr);
+    }
+    return true;
+  };
+};
+exports.setBorderMark = setBorderMark;

package/dist/cjs/plugins/media/toolbar/imageBorder.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shouldShowImageBorder = shouldShowImageBorder;
+var _currentMediaNode = require("../utils/current-media-node");
+function shouldShowImageBorder(editorState) {
+  var border = editorState.schema.marks.border;
+  if (!border) {
+    return false;
+  }
+  var nodeWithPos = (0, _currentMediaNode.currentMediaNodeWithPos)(editorState);
+  if (!nodeWithPos) {
+    return false;
+  }
+  var _editorState$doc$reso = editorState.doc.resolve(nodeWithPos.pos),
+    parent = _editorState$doc$reso.parent;
+  return parent && parent.type.allowsMarkType(border);
+}

package/dist/cjs/plugins/media/toolbar/index.js

@@ -30,6 +30,9 @@ var _filePreviewItem = require("./filePreviewItem");
 var _utils = require("./utils");
 var _commands = require("./commands");
 var _styles = require("../nodeviews/styles");
+var _ImageBorder = _interopRequireDefault(require("../ui/ImageBorder"));
+var _currentMediaNode = require("../utils/current-media-node");
+var _imageBorder = require("./imageBorder");
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var remove = function remove(state, dispatch) {
@@ -191,7 +194,7 @@ var generateMediaInlineFloatingToolbar = function generateMediaInlineFloatingToo
   }];
   return items;
 };
-var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToolbar(state, intl, options, pluginState, mediaLinkingState) {
+var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToolbar(state, intl, options, pluginState, mediaLinkingState, getEditorFeatureFlags) {
   var mediaSingle = state.schema.nodes.mediaSingle;
   var allowResizing = options.allowResizing,
     allowLinking = options.allowLinking,
@@ -199,8 +202,33 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     allowResizingInTables = options.allowResizingInTables,
     allowAltTextOnImages = options.allowAltTextOnImages;
   var toolbarButtons = [];
+  if ((0, _imageBorder.shouldShowImageBorder)(state)) {
+    toolbarButtons.push({
+      type: 'custom',
+      fallback: [],
+      render: function render(editorView) {
+        if (!editorView) {
+          return null;
+        }
+        var dispatch = editorView.dispatch,
+          state = editorView.state;
+        var borderMark = (0, _currentMediaNode.currentMediaNodeBorderMark)(state);
+        return /*#__PURE__*/_react.default.createElement(_ImageBorder.default, {
+          toggleBorder: function toggleBorder() {
+            (0, _commands.toggleBorderMark)(state, dispatch);
+          },
+          setBorder: function setBorder(attrs) {
+            (0, _commands.setBorderMark)(attrs)(state, dispatch);
+          },
+          showSomewhatSemanticTooltips: getEditorFeatureFlags === null || getEditorFeatureFlags === void 0 ? void 0 : getEditorFeatureFlags().useSomewhatSemanticTextColorNames,
+          borderMark: borderMark,
+          intl: intl
+        });
+      }
+    });
+  }
   if (allowAdvancedToolBarOptions) {
-    toolbarButtons = (0, _MediaAndEmbedsToolbar.default)(state, intl, state.schema.nodes.mediaSingle, allowResizing, allowResizingInTables);
+    toolbarButtons = [].concat((0, _toConsumableArray2.default)(toolbarButtons), (0, _toConsumableArray2.default)((0, _MediaAndEmbedsToolbar.default)(state, intl, state.schema.nodes.mediaSingle, allowResizing, allowResizingInTables)));
     if (toolbarButtons.length) {
       toolbarButtons.push({
         type: 'separator'
@@ -289,7 +317,8 @@ var floatingToolbar = function floatingToolbar(state, intl) {
     allowLinking = options.allowLinking,
     allowAltTextOnImages = options.allowAltTextOnImages,
     providerFactory = options.providerFactory,
-    allowMediaInline = options.allowMediaInline;
+    allowMediaInline = options.allowMediaInline,
+    getEditorFeatureFlags = options.getEditorFeatureFlags;
   var mediaPluginState = _pluginKey.stateKey.getState(state);
   var mediaLinkingState = (0, _linking2.getMediaLinkingState)(state);
   if (!mediaPluginState) {
@@ -344,7 +373,7 @@ var floatingToolbar = function floatingToolbar(state, intl) {
       var element = (_mediaPluginState$ele3 = mediaPluginState.element) === null || _mediaPluginState$ele3 === void 0 ? void 0 : _mediaPluginState$ele3.querySelector(".".concat(_styles.MediaSingleNodeSelector));
       return element || mediaPluginState.element;
     };
-    items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState);
+    items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState, getEditorFeatureFlags);
   }
   return _objectSpread(_objectSpread({}, baseToolbar), {}, {
     items: items,