@atlaskit/editor-core 181.0.1 → 182.0.0

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,

package/dist/cjs/plugins/media/ui/ImageBorder/index.js

@@ -0,0 +1,219 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("@emotion/react");
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
+var _styles = require("@atlaskit/editor-common/styles");
+var _imageBorder = _interopRequireDefault(require("@atlaskit/icon/glyph/image-border"));
+var _react2 = require("react");
+var _uiColor = require("@atlaskit/editor-common/ui-color");
+var _editorPalette = require("@atlaskit/editor-palette");
+var _uiMenu = require("@atlaskit/editor-common/ui-menu");
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _ui = require("@atlaskit/editor-common/ui");
+var _ToolbarButton = _interopRequireDefault(require("../../../../ui/ToolbarButton"));
+var _styles2 = require("./styles");
+var _messages = require("./messages");
+/** @jsx jsx */
+
+var ImageBorder = function ImageBorder(_ref) {
+  var formatMessage = _ref.intl.formatMessage,
+    toggleBorder = _ref.toggleBorder,
+    showSomewhatSemanticTooltips = _ref.showSomewhatSemanticTooltips,
+    borderMark = _ref.borderMark,
+    setBorder = _ref.setBorder;
+  var popupTarget = (0, _react2.useRef)(null);
+  var enabled = !!borderMark;
+  var color = borderMark === null || borderMark === void 0 ? void 0 : borderMark.color;
+  var size = borderMark === null || borderMark === void 0 ? void 0 : borderMark.size;
+  var _useState = (0, _react2.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var _useState3 = (0, _react2.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    isColorSubmenuOpen = _useState4[0],
+    setIsColorSubmenuOpen = _useState4[1];
+  var _useState5 = (0, _react2.useState)(false),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    isSizeSubmenuOpen = _useState6[0],
+    setIsSizeSubmenuOpen = _useState6[1];
+  var borderSizeOptions = [{
+    name: formatMessage(_messages.messages.borderSizeSubtle),
+    value: 1
+  }, {
+    name: formatMessage(_messages.messages.borderSizeMedium),
+    value: 2
+  }, {
+    name: formatMessage(_messages.messages.borderSizeBold),
+    value: 3
+  }];
+  var items = [{
+    content: formatMessage(_messages.messages.borderColor),
+    value: {
+      name: 'color'
+    },
+    elemAfter: (0, _react.jsx)("div", {
+      className: _styles.DropdownMenuSharedCssClassName.SUBMENU
+    }, (0, _react.jsx)("div", {
+      css: (0, _styles2.contextualMenuColorIcon)(color && (0, _editorPalette.hexToEditorBorderPaletteColor)(color))
+    }), isColorSubmenuOpen && (0, _react.jsx)("div", {
+      css: (0, _styles2.contextualSubMenu)(0)
+    }, (0, _react.jsx)(_uiColor.ColorPalette, {
+      onClick: function onClick(color) {
+        setBorder({
+          color: color
+        });
+        setIsOpen(!isOpen);
+      },
+      selectedColor: color !== null && color !== void 0 ? color : null,
+      paletteOptions: {
+        palette: _uiColor.borderColorPalette,
+        paletteColorTooltipMessages: _uiColor.borderPaletteTooltipMessages,
+        hexToPaletteColor: _editorPalette.hexToEditorBorderPaletteColor,
+        showSomewhatSemanticTooltips: showSomewhatSemanticTooltips
+      }
+    })))
+  }, {
+    content: formatMessage(_messages.messages.borderSize),
+    value: {
+      name: 'size'
+    },
+    elemAfter: (0, _react.jsx)("div", {
+      className: _styles.DropdownMenuSharedCssClassName.SUBMENU
+    }, (0, _react.jsx)("div", {
+      css: _styles2.contextualMenuArrow
+    }), isSizeSubmenuOpen && (0, _react.jsx)("div", {
+      css: (0, _styles2.contextualSubMenu)(1)
+    }, borderSizeOptions.map(function (_ref2, idx) {
+      var name = _ref2.name,
+        value = _ref2.value;
+      return (0, _react.jsx)(_tooltip.default, {
+        key: idx,
+        content: name
+      }, (0, _react.jsx)("span", {
+        css: _styles2.buttonWrapperStyle
+      }, (0, _react.jsx)("button", {
+        css: (0, _styles2.buttonStyle)(value === size),
+        "aria-label": name,
+        role: "radio",
+        "aria-checked": value === size,
+        onClick: function onClick() {
+          setBorder({
+            size: value
+          });
+          setIsOpen(false);
+        },
+        onMouseDown: function onMouseDown(e) {
+          e.preventDefault();
+        }
+      }, (0, _react.jsx)("div", {
+        css: (0, _styles2.line)(value, value === size),
+        role: "presentation"
+      }))));
+    })))
+  }];
+
+  /**
+   * We want to change direction of our dropdowns a bit early,
+   * not exactly when it hits the boundary.
+   */
+  var fitTolerance = 10;
+  var fitWidth = _styles2.menuItemDimensions.width;
+  var fitHeight = items.length * (_styles2.menuItemDimensions.height + _styles2.itemSpacing);
+  return (0, _react.jsx)("div", null, (0, _react.jsx)("div", {
+    css: (0, _styles2.toolbarButtonWrapper)({
+      enabled: enabled,
+      isOpen: isOpen
+    })
+  }, (0, _react.jsx)(_ToolbarButton.default, {
+    className: "image-border-toolbar-btn",
+    selected: enabled,
+    onClick: toggleBorder,
+    spacing: "compact",
+    "aria-label": enabled ? formatMessage(_messages.messages.removeBorder) : formatMessage(_messages.messages.addBorder),
+    iconBefore: (0, _react.jsx)(_imageBorder.default, {
+      label: ""
+    }),
+    title: enabled ? formatMessage(_messages.messages.removeBorder) : formatMessage(_messages.messages.addBorder)
+  }), (0, _react.jsx)("div", {
+    ref: popupTarget
+  }, (0, _react.jsx)(_ToolbarButton.default, {
+    className: "image-border-toolbar-dropdown",
+    selected: isOpen,
+    "aria-label": formatMessage(_messages.messages.borderOptions),
+    title: formatMessage(_messages.messages.borderOptions),
+    spacing: "compact",
+    iconBefore: (0, _react.jsx)(_chevronDown.default, {
+      label: ""
+    }),
+    onClick: function onClick() {
+      setIsOpen(!isOpen);
+    }
+  }))), (0, _react.jsx)(_ui.Popup, {
+    target: popupTarget.current ? popupTarget.current : undefined,
+    fitWidth: fitWidth + fitTolerance,
+    fitHeight: fitHeight + fitTolerance,
+    forcePlacement: true,
+    stick: true
+  }, (0, _react.jsx)("div", {
+    onMouseLeave: function onMouseLeave() {
+      setIsColorSubmenuOpen(false);
+      setIsSizeSubmenuOpen(false);
+    }
+  }, (0, _react.jsx)(_uiMenu.DropdownMenu
+  //This needs be removed when the a11y is completely handled
+  //Disabling key navigation now as it works only partially
+  //Same with packages/editor/editor-plugin-table/src/plugins/table/ui/FloatingContextualMenu/ContextualMenu.tsx
+  , {
+    arrowKeyNavigationProviderOptions: {
+      type: _uiMenu.ArrowKeyNavigationType.MENU,
+      disableArrowKeyNavigation: true
+    },
+    items: [{
+      items: items
+    }],
+    isOpen: isOpen,
+    onOpenChange: function onOpenChange() {
+      setIsOpen(false);
+      setIsColorSubmenuOpen(false);
+      setIsSizeSubmenuOpen(false);
+    },
+    onItemActivated: function onItemActivated(_ref3) {
+      var item = _ref3.item;
+      if (item.value.name === 'color') {
+        setIsColorSubmenuOpen(!isColorSubmenuOpen);
+      }
+      if (item.value.name === 'size') {
+        setIsSizeSubmenuOpen(!isSizeSubmenuOpen);
+      }
+    },
+    onMouseEnter: function onMouseEnter(_ref4) {
+      var item = _ref4.item;
+      if (item.value.name === 'color') {
+        setIsColorSubmenuOpen(true);
+      }
+      if (item.value.name === 'size') {
+        setIsSizeSubmenuOpen(true);
+      }
+    },
+    onMouseLeave: function onMouseLeave(_ref5) {
+      var item = _ref5.item;
+      if (item.value.name === 'color') {
+        setIsColorSubmenuOpen(false);
+      }
+      if (item.value.name === 'size') {
+        setIsSizeSubmenuOpen(false);
+      }
+    },
+    fitWidth: fitWidth + fitTolerance,
+    fitHeight: fitHeight + fitTolerance
+  }))));
+};
+var _default = ImageBorder;
+exports.default = _default;

package/dist/cjs/plugins/media/ui/ImageBorder/messages.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.messages = void 0;
+var _reactIntlNext = require("react-intl-next");
+var messages = (0, _reactIntlNext.defineMessages)({
+  borderColor: {
+    id: 'fabric.editor.imageBorderColor',
+    defaultMessage: 'Color',
+    description: 'Change the border color of an image.'
+  },
+  borderSize: {
+    id: 'fabric.editor.imageBorderSize',
+    defaultMessage: 'Size',
+    description: 'Change the border size of an image.'
+  },
+  addBorder: {
+    id: 'fabric.editor.addImageBorder',
+    defaultMessage: 'Add border',
+    description: 'Add a border to an image.'
+  },
+  removeBorder: {
+    id: 'fabric.editor.removeImageBorder',
+    defaultMessage: 'Remove border',
+    description: 'Remove the border of an image.'
+  },
+  borderOptions: {
+    id: 'fabric.editor.imageBorderOptions',
+    defaultMessage: 'Border options',
+    description: 'Display options available for customizing the border of an image.'
+  },
+  borderSizeSubtle: {
+    id: 'fabric.editor.imageBorderSubtle',
+    defaultMessage: 'Subtle',
+    description: 'Name of a border size.'
+  },
+  borderSizeMedium: {
+    id: 'fabric.editor.imageBorderMedium',
+    defaultMessage: 'Medium',
+    description: 'Name of a border size.'
+  },
+  borderSizeBold: {
+    id: 'fabric.editor.imageBorderBold',
+    defaultMessage: 'Bold',
+    description: 'Name of a border size.'
+  }
+});
+exports.messages = messages;