@atlaskit/editor-plugin-media 0.2.0 → 0.3.1

package/dist/esm/toolbar/linking.js

@@ -0,0 +1,88 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
+import { RECENT_SEARCH_HEIGHT_IN_PX, RECENT_SEARCH_WIDTH_IN_PX } from '@atlaskit/editor-common/ui';
+import { hideLinkingToolbar, setUrlToMedia, unlink } from '../commands/linking';
+import { getMediaLinkingState } from '../pm-plugins/linking';
+import MediaLinkingToolbar from '../ui/MediaLinkingToolbar';
+var FORCE_FOCUS_SELECTOR = '[data-testid="add-link-button"],[data-testid="edit-link-button"]';
+export function shouldShowMediaLinkToolbar(editorState) {
+  var mediaLinkingState = getMediaLinkingState(editorState);
+  if (!mediaLinkingState || mediaLinkingState.mediaPos === null) {
+    return false;
+  }
+  var _editorState$schema = editorState.schema,
+    media = _editorState$schema.nodes.media,
+    link = _editorState$schema.marks.link;
+  var node = editorState.doc.nodeAt(mediaLinkingState.mediaPos);
+  if (!node || node.type !== media) {
+    return false;
+  }
+  var _editorState$doc$reso = editorState.doc.resolve(mediaLinkingState.mediaPos),
+    parent = _editorState$doc$reso.parent;
+  return parent && parent.type.allowsMarkType(link);
+}
+export var getLinkingToolbar = function getLinkingToolbar(toolbarBaseConfig, mediaLinkingState, state, intl, pluginInjectionApi, providerFactory) {
+  var link = mediaLinkingState.link,
+    visible = mediaLinkingState.visible,
+    editing = mediaLinkingState.editable,
+    mediaPos = mediaLinkingState.mediaPos;
+  if (visible && mediaPos !== null) {
+    var node = state.doc.nodeAt(mediaPos);
+    if (node) {
+      return _objectSpread(_objectSpread({}, toolbarBaseConfig), {}, {
+        height: RECENT_SEARCH_HEIGHT_IN_PX,
+        width: RECENT_SEARCH_WIDTH_IN_PX,
+        forcePlacement: true,
+        items: [{
+          type: 'custom',
+          fallback: [],
+          disableArrowNavigation: true,
+          render: function render(view, idx) {
+            if (!view || !providerFactory) {
+              return null;
+            }
+            return /*#__PURE__*/React.createElement(MediaLinkingToolbar, {
+              key: idx,
+              displayUrl: link,
+              providerFactory: providerFactory,
+              intl: intl,
+              editing: editing,
+              onUnlink: function onUnlink() {
+                var _pluginInjectionApi$a;
+                return unlink(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions)(view.state, view.dispatch, view);
+              },
+              onBack: function onBack(href, meta) {
+                if (href.trim() && meta.inputMethod) {
+                  var _pluginInjectionApi$a2;
+                  setUrlToMedia(href, meta.inputMethod, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions)(view.state, view.dispatch, view);
+                }
+                hideLinkingToolbar(view.state, view.dispatch, view);
+              },
+              onCancel: function onCancel() {
+                var _pluginInjectionApi$f;
+                hideLinkingToolbar(view.state, view.dispatch, view, true);
+                /** Focus should move to the 'Add link' button when the toolbar closes
+                 * and not close the floating toolbar.
+                 */
+                var tr = view.state.tr,
+                  dispatch = view.dispatch;
+                pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f = pluginInjectionApi.floatingToolbar.actions) === null || _pluginInjectionApi$f === void 0 || _pluginInjectionApi$f.forceFocusSelector(FORCE_FOCUS_SELECTOR)(tr);
+                dispatch(tr);
+              },
+              onSubmit: function onSubmit(href, meta) {
+                var _pluginInjectionApi$a3;
+                setUrlToMedia(href, meta.inputMethod, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 ? void 0 : _pluginInjectionApi$a3.actions)(view.state, view.dispatch, view);
+                hideLinkingToolbar(view.state, view.dispatch, view);
+              },
+              onBlur: function onBlur() {
+                hideLinkingToolbar(view.state, view.dispatch, view);
+              }
+            });
+          }
+        }]
+      });
+    }
+  }
+};

package/dist/esm/toolbar/utils.js

@@ -0,0 +1,103 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { wrappedLayouts } from '@atlaskit/editor-common/media-single';
+import { findParentNodeOfType, findSelectedNodeOfType, removeParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
+import { akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { getMediaClient } from '@atlaskit/media-client';
+export var getSelectedMediaContainerNodeAttrs = function getSelectedMediaContainerNodeAttrs(mediaPluginState) {
+  var selectedNode = mediaPluginState.selectedMediaContainerNode();
+  if (selectedNode && selectedNode.attrs) {
+    return selectedNode.attrs;
+  }
+  return null;
+};
+export var downloadMedia = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(mediaPluginState) {
+    var selectedNodeAttrs, id, _selectedNodeAttrs$co, collection, mediaClient, fileState, fileName;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _context.prev = 0;
+          selectedNodeAttrs = getSelectedMediaContainerNodeAttrs(mediaPluginState);
+          if (!(selectedNodeAttrs && mediaPluginState.mediaClientConfig)) {
+            _context.next = 10;
+            break;
+          }
+          id = selectedNodeAttrs.id, _selectedNodeAttrs$co = selectedNodeAttrs.collection, collection = _selectedNodeAttrs$co === void 0 ? '' : _selectedNodeAttrs$co;
+          mediaClient = getMediaClient(mediaPluginState.mediaClientConfig);
+          _context.next = 7;
+          return mediaClient.file.getCurrentState(id, {
+            collectionName: collection
+          });
+        case 7:
+          fileState = _context.sent;
+          fileName = fileState.status === 'error' ? undefined : fileState.name;
+          mediaClient.file.downloadBinary(id, fileName, collection);
+        case 10:
+          return _context.abrupt("return", true);
+        case 13:
+          _context.prev = 13;
+          _context.t0 = _context["catch"](0);
+          return _context.abrupt("return", false);
+        case 16:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[0, 13]]);
+  }));
+  return function downloadMedia(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();
+export var removeMediaGroupNode = function removeMediaGroupNode(state) {
+  var mediaGroup = state.schema.nodes.mediaGroup;
+  var mediaGroupParent = findParentNodeOfType(mediaGroup)(state.selection);
+  var tr = state.tr;
+  // If it is the last media group in filmstrip, remove the entire filmstrip
+  if (mediaGroupParent && mediaGroupParent.node.childCount === 1) {
+    tr = removeParentNodeOfType(mediaGroup)(tr);
+  } else {
+    tr = removeSelectedNode(tr);
+  }
+  return tr;
+};
+export var getSelectedMediaSingle = function getSelectedMediaSingle(state) {
+  var mediaSingle = state.schema.nodes.mediaSingle;
+  return findSelectedNodeOfType(mediaSingle)(state.selection) || findParentNodeOfType(mediaSingle)(state.selection);
+};
+export var getPixelWidthOfElement = function getPixelWidthOfElement(editorView, pos, mediaWidth) {
+  var domNode = editorView.nodeDOM(pos);
+  if (domNode instanceof HTMLElement) {
+    return domNode.offsetWidth;
+  }
+  return mediaWidth;
+};
+export var calcNewLayout = function calcNewLayout(width, layout, contentWidth) {
+  var fullWidthMode = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  var isWrappedLayout = wrappedLayouts.indexOf(layout) > -1;
+  if (width >= akEditorFullWidthLayoutWidth) {
+    // If width is greater than or equal to full editor width
+    return 'full-width';
+  }
+  if (fullWidthMode) {
+    // If under editor full width mode
+    return isWrappedLayout ? layout : 'center';
+  }
+  if (width > contentWidth) {
+    // If width is greater than content length and not nested
+    return 'wide';
+  }
+  return isWrappedLayout && width !== contentWidth ? layout : 'center';
+};
+var maxToolbarFitWidth = 0;
+export var getMaxToolbarWidth = function getMaxToolbarWidth() {
+  var toolbar = document.querySelector("div[aria-label=\"Media floating controls\"]");
+  var toolbarWidth = toolbar === null || toolbar === void 0 ? void 0 : toolbar.getBoundingClientRect().width;
+  if (!toolbar) {
+    maxToolbarFitWidth = 0;
+  }
+  if (toolbarWidth && toolbarWidth > maxToolbarFitWidth) {
+    maxToolbarFitWidth = toolbarWidth;
+  }
+  return maxToolbarFitWidth;
+};

package/dist/esm/ui/CaptionPlaceholder/index.js

@@ -0,0 +1,20 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject;
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx } from '@emotion/react';
+import { FormattedMessage } from 'react-intl-next';
+import { CAPTION_PLACEHOLDER_ID } from '@atlaskit/editor-common/media-single';
+import { N200 } from '@atlaskit/theme/colors';
+import { messages } from './messages';
+var placeholder = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  width: 100%;\n  text-align: center;\n  margin-top: ", " !important;\n  display: block;\n"])), "var(--ds-text-subtlest, ".concat(N200, ")"), "var(--ds-space-100, 8px)");
+export default /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var onClick = _ref.onClick;
+  return jsx("span", {
+    ref: ref,
+    css: placeholder,
+    onClick: onClick,
+    "data-id": CAPTION_PLACEHOLDER_ID,
+    "data-testid": "caption-placeholder"
+  }, jsx(FormattedMessage, messages.placeholder));
+});

package/dist/esm/ui/CaptionPlaceholder/messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl-next';
+export var messages = defineMessages({
+  placeholder: {
+    id: 'fabric.editor.captionPlaceholder',
+    defaultMessage: 'Add a caption',
+    description: 'Placeholder description for an empty (new) caption in the editor'
+  }
+});

package/dist/esm/ui/ImageBorder/index.js

@@ -0,0 +1,218 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/** @jsx jsx */
+import { useRef, useState } from 'react';
+import { jsx } from '@emotion/react';
+import { BorderIcon } from '@atlaskit/editor-common/icons';
+import { DropdownMenuSharedCssClassName } from '@atlaskit/editor-common/styles';
+import { Popup } from '@atlaskit/editor-common/ui';
+import { borderColorPalette, borderPaletteTooltipMessages, ColorPalette } from '@atlaskit/editor-common/ui-color';
+import { ArrowKeyNavigationType, DropdownMenu, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
+import { hexToEditorBorderPaletteColor } from '@atlaskit/editor-palette';
+import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
+import Tooltip from '@atlaskit/tooltip';
+import { messages } from './messages';
+import { buttonStyle, buttonWrapperStyle, contextualMenuArrow, contextualMenuColorIcon, contextualSubMenu, itemSpacing, line, menuItemDimensions, toolbarButtonWrapper } from './styles';
+var ImageBorder = function ImageBorder(_ref) {
+  var formatMessage = _ref.intl.formatMessage,
+    toggleBorder = _ref.toggleBorder,
+    borderMark = _ref.borderMark,
+    setBorder = _ref.setBorder;
+  var popupTarget = 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 = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isColorSubmenuOpen = _useState4[0],
+    setIsColorSubmenuOpen = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isSizeSubmenuOpen = _useState6[0],
+    setIsSizeSubmenuOpen = _useState6[1];
+  var handleSubMenuRef = function handleSubMenuRef(ref) {
+    if (!ref) {
+      return;
+    }
+    var rect = ref.getBoundingClientRect();
+    if (rect.left + rect.width > window.innerWidth) {
+      ref.style.left = "-".concat(rect.width, "px");
+    }
+  };
+  var borderSizeOptions = [{
+    name: formatMessage(messages.borderSizeSubtle),
+    value: 1
+  }, {
+    name: formatMessage(messages.borderSizeMedium),
+    value: 2
+  }, {
+    name: formatMessage(messages.borderSizeBold),
+    value: 3
+  }];
+  var items = [{
+    content: formatMessage(messages.borderColor),
+    value: {
+      name: 'color'
+    },
+    elemAfter: jsx("div", {
+      className: DropdownMenuSharedCssClassName.SUBMENU
+    }, jsx("div", {
+      css: contextualMenuColorIcon(color && hexToEditorBorderPaletteColor(color))
+    }), isColorSubmenuOpen && jsx("div", {
+      css: contextualSubMenu(0),
+      ref: handleSubMenuRef
+    }, jsx(ColorPalette, {
+      onClick: function onClick(color) {
+        setBorder({
+          color: color
+        });
+        setIsOpen(!isOpen);
+      },
+      selectedColor: color !== null && color !== void 0 ? color : null,
+      paletteOptions: {
+        palette: borderColorPalette,
+        paletteColorTooltipMessages: borderPaletteTooltipMessages,
+        hexToPaletteColor: hexToEditorBorderPaletteColor
+      }
+    })))
+  }, {
+    content: formatMessage(messages.borderSize),
+    value: {
+      name: 'size'
+    },
+    elemAfter: jsx("div", {
+      className: DropdownMenuSharedCssClassName.SUBMENU
+    }, jsx("div", {
+      css: contextualMenuArrow
+    }), isSizeSubmenuOpen && jsx("div", {
+      css: contextualSubMenu(1),
+      ref: handleSubMenuRef
+    }, borderSizeOptions.map(function (_ref2, idx) {
+      var name = _ref2.name,
+        value = _ref2.value;
+      return jsx(Tooltip, {
+        key: idx,
+        content: name
+      }, jsx("span", {
+        css: buttonWrapperStyle
+      }, jsx("button", {
+        css: 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();
+        }
+      }, jsx("div", {
+        css: 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 = menuItemDimensions.width;
+  var fitHeight = items.length * (menuItemDimensions.height + itemSpacing);
+  return jsx("div", null, jsx("div", {
+    css: toolbarButtonWrapper({
+      enabled: enabled,
+      isOpen: isOpen
+    })
+  }, jsx(ToolbarButton, {
+    className: "image-border-toolbar-btn",
+    selected: enabled,
+    onClick: toggleBorder,
+    spacing: "compact",
+    "aria-label": enabled ? formatMessage(messages.removeBorder) : formatMessage(messages.addBorder),
+    iconBefore: jsx(BorderIcon, {
+      label: ""
+    }),
+    title: enabled ? formatMessage(messages.removeBorder) : formatMessage(messages.addBorder)
+  }), jsx("div", {
+    ref: popupTarget
+  }, jsx(ToolbarButton, {
+    className: "image-border-toolbar-dropdown",
+    selected: enabled || isOpen,
+    "aria-label": formatMessage(messages.borderOptions),
+    title: formatMessage(messages.borderOptions),
+    spacing: "compact",
+    iconBefore: jsx(ExpandIcon, {
+      label: ""
+    }),
+    onClick: function onClick() {
+      setIsOpen(!isOpen);
+    }
+  }))), jsx(Popup, {
+    target: popupTarget.current ? popupTarget.current : undefined,
+    fitWidth: fitWidth + fitTolerance,
+    fitHeight: fitHeight + fitTolerance,
+    forcePlacement: true,
+    stick: true
+  }, jsx("div", {
+    onMouseLeave: function onMouseLeave() {
+      setIsColorSubmenuOpen(false);
+      setIsSizeSubmenuOpen(false);
+    }
+  }, jsx(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: 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
+  }))));
+};
+export default ImageBorder;

package/dist/esm/ui/ImageBorder/messages.js

@@ -0,0 +1,43 @@
+import { defineMessages } from 'react-intl-next';
+export var messages = 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.'
+  }
+});

package/dist/esm/ui/ImageBorder/styles.js

@@ -0,0 +1,42 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+import { css } from '@emotion/react';
+import { DEFAULT_BORDER_COLOR } from '@atlaskit/editor-common/ui-color';
+import * as colors from '@atlaskit/theme/colors';
+import { N0, N20A, N50, N60A, N800, N90 } from '@atlaskit/theme/colors';
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+import { gridSize } from '@atlaskit/theme/constants';
+// menuItemDimensions and itemSpacing are copied from
+// packages/editor/editor-core/src/plugins/floating-toolbar/ui/DropdownMenu.tsx
+export var menuItemDimensions = {
+  width: 175,
+  height: 32
+};
+
+// TODO: Migrate away from gridSize
+// Recommendation: Replace directly with 4 due to itemSpacing being used in calculations
+export var itemSpacing = gridSize() / 2;
+export var contextualMenuArrow = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  &::after {\n    content: '\u203A';\n    margin-left: ", ";\n    line-height: 20px;\n    color: ", ";\n  }\n"])), "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"));
+export var contextualMenuColorIcon = function contextualMenuColorIcon(color) {
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  &::before {\n    content: '';\n    display: block;\n    border: 1px solid ", ";\n    border-radius: ", ";\n    width: 20px;\n    height: 20px;\n    ", "\n  }\n"])), contextualMenuArrow, DEFAULT_BORDER_COLOR, "var(--ds-border-radius-100, 3px)", color && "background: ".concat(color));
+};
+export var contextualSubMenu = function contextualSubMenu(index) {
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  border-radius: ", ";\n  background: ", ";\n  box-shadow: ", ";\n  display: flex;\n  position: absolute;\n  top: ", "px;\n  left: ", "px;\n  padding: ", ";\n\n  > div {\n    padding: 0;\n  }\n"])), "var(--ds-border-radius-100, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"), index * (menuItemDimensions.height + itemSpacing * 2), menuItemDimensions.width, "var(--ds-space-100, 8px)");
+};
+export var buttonStyle = function buttonStyle(selected) {
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  height: 26px;\n  width: 26px;\n  padding: 0;\n  border-radius: 4px;\n  background-color: ", ";\n  border: 1px solid ", ";\n  cursor: pointer;\n  display: block;\n"])), selected ? "var(--ds-text, ".concat(N800, ")") : "var(--ds-background-neutral, ".concat(N20A, ")"), DEFAULT_BORDER_COLOR);
+};
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+export var buttonWrapperStyle = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  border: 1px solid transparent;\n  margin: 1px;\n  font-size: 0;\n  display: flex;\n  align-items: center;\n  padding: 1px;\n  border-radius: 6px;\n  &:focus-within,\n  &:focus,\n  &:hover {\n    border-color: ", " !important;\n  }\n"])), N50);
+export var line = function line(size, selected) {
+  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  position: relative;\n  &:before {\n    content: '';\n    display: block;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 12px;\n    height: ", "px;\n    background-color: ", ";\n    border-radius: 90px;\n    transform: translate(-50%, -50%) rotate(135deg);\n  }\n"])), size, selected ? "var(--ds-icon-inverse, ".concat(N0, ")") : "var(--ds-icon, #44546F)");
+};
+var getHoverStyles = function getHoverStyles(selector) {
+  return "&:hover ".concat(selector, " {\n    background: ", "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N20A, ")"), ";\n\n    &:hover {\n      background: ", "var(--ds-background-neutral-hovered, ".concat(colors.N30A, ")"), ";\n    } \n  }");
+};
+export var toolbarButtonWrapper = function toolbarButtonWrapper(_ref) {
+  var enabled = _ref.enabled,
+    isOpen = _ref.isOpen;
+  return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  .image-border-toolbar-btn {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    padding: 0;\n    & > span {\n      margin: 0;\n    }\n  }\n  .image-border-toolbar-dropdown {\n    padding: 0;\n    & > span {\n      margin: 0;\n    }\n    width: 16px !important;\n    border-top-left-radius: 0 !important;\n    border-bottom-left-radius: 0 !important;\n    margin-left: 1px;\n  }\n\n  ", "\n  ", "\n"])), !enabled && getHoverStyles('.image-border-toolbar-btn'), !isOpen && !enabled && getHoverStyles('.image-border-toolbar-dropdown'));
+};

package/dist/esm/ui/Media/DropPlaceholder.js

@@ -0,0 +1,31 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2;
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+import { injectIntl } from 'react-intl-next';
+import { hexToRgba } from '@atlaskit/adf-schema';
+import DocumentFilledIcon from '@atlaskit/icon/glyph/document-filled';
+import { B200, B300, B400 } from '@atlaskit/theme/colors';
+import { borderRadius } from '@atlaskit/theme/constants';
+import { FILE_WIDTH, MEDIA_HEIGHT } from '../../nodeviews/mediaNodeView/media';
+import { dropPlaceholderMessages } from './drop-placeholder-messages';
+var iconWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  background: ", ";\n  border-radius: ", "px;\n  margin: 5px 3px 25px;\n  width: ", "px;\n  min-height: ", "px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), "var(--ds-icon-accent-blue, ".concat(hexToRgba(B400, 0.4) || B400, ")"), "var(--ds-background-accent-blue-subtle, ".concat(hexToRgba(B300, 0.6) || B300, ")"), borderRadius(), FILE_WIDTH, MEDIA_HEIGHT);
+var dropLine = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: ", ";\n  border-radius: ", "px;\n  margin: ", " 0;\n  width: 100%;\n  height: 2px;\n"])), "var(--ds-border-focused, ".concat(B200, ")"), borderRadius(), "var(--ds-space-025, 2px)");
+var IconWrapperComponent = function IconWrapperComponent(props) {
+  var intl = props.intl;
+  var dropPlaceholderLabel = dropPlaceholderMessages.dropPlaceholderLabel;
+  return jsx("div", {
+    css: iconWrapper
+  }, jsx(DocumentFilledIcon, {
+    label: intl.formatMessage(dropPlaceholderLabel),
+    size: "medium"
+  }));
+};
+var IntlIconWrapper = injectIntl(IconWrapperComponent);
+export default (function (_ref) {
+  var _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'group' : _ref$type;
+  return type === 'single' ? jsx("div", {
+    css: dropLine
+  }) : jsx(IntlIconWrapper, null);
+});

package/dist/esm/ui/Media/drop-placeholder-messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl-next';
+export var dropPlaceholderMessages = defineMessages({
+  dropPlaceholderLabel: {
+    id: 'fabric.editor.dropPlaceholderLabel',
+    defaultMessage: 'Document',
+    description: 'document label for an media icon'
+  }
+});