@atlaskit/editor-plugin-media 0.2.0 → 0.3.1

package/dist/es2019/toolbar/linking.js

@@ -0,0 +1,98 @@
+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';
+const FORCE_FOCUS_SELECTOR = '[data-testid="add-link-button"],[data-testid="edit-link-button"]';
+export function shouldShowMediaLinkToolbar(editorState) {
+  const mediaLinkingState = getMediaLinkingState(editorState);
+  if (!mediaLinkingState || mediaLinkingState.mediaPos === null) {
+    return false;
+  }
+  const {
+    nodes: {
+      media
+    },
+    marks: {
+      link
+    }
+  } = editorState.schema;
+  const node = editorState.doc.nodeAt(mediaLinkingState.mediaPos);
+  if (!node || node.type !== media) {
+    return false;
+  }
+  const {
+    parent
+  } = editorState.doc.resolve(mediaLinkingState.mediaPos);
+  return parent && parent.type.allowsMarkType(link);
+}
+export const getLinkingToolbar = (toolbarBaseConfig, mediaLinkingState, state, intl, pluginInjectionApi, providerFactory) => {
+  const {
+    link,
+    visible,
+    editable: editing,
+    mediaPos
+  } = mediaLinkingState;
+  if (visible && mediaPos !== null) {
+    const node = state.doc.nodeAt(mediaPos);
+    if (node) {
+      return {
+        ...toolbarBaseConfig,
+        height: RECENT_SEARCH_HEIGHT_IN_PX,
+        width: RECENT_SEARCH_WIDTH_IN_PX,
+        forcePlacement: true,
+        items: [{
+          type: 'custom',
+          fallback: [],
+          disableArrowNavigation: true,
+          render: (view, idx) => {
+            if (!view || !providerFactory) {
+              return null;
+            }
+            return /*#__PURE__*/React.createElement(MediaLinkingToolbar, {
+              key: idx,
+              displayUrl: link,
+              providerFactory: providerFactory,
+              intl: intl,
+              editing: editing,
+              onUnlink: () => {
+                var _pluginInjectionApi$a;
+                return unlink(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions)(view.state, view.dispatch, view);
+              },
+              onBack: (href, meta) => {
+                if (href.trim() && meta.inputMethod) {
+                  var _pluginInjectionApi$a2;
+                  setUrlToMedia(href, meta.inputMethod, pluginInjectionApi === null || pluginInjectionApi === void 0 ? 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: () => {
+                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.
+                 */
+                const {
+                  state: {
+                    tr
+                  },
+                  dispatch
+                } = view;
+                pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$f = pluginInjectionApi.floatingToolbar.actions) === null || _pluginInjectionApi$f === void 0 ? void 0 : _pluginInjectionApi$f.forceFocusSelector(FORCE_FOCUS_SELECTOR)(tr);
+                dispatch(tr);
+              },
+              onSubmit: (href, meta) => {
+                var _pluginInjectionApi$a3;
+                setUrlToMedia(href, meta.inputMethod, pluginInjectionApi === null || pluginInjectionApi === void 0 ? 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: () => {
+                hideLinkingToolbar(view.state, view.dispatch, view);
+              }
+            });
+          }
+        }]
+      };
+    }
+  }
+};

package/dist/es2019/toolbar/utils.js

@@ -0,0 +1,86 @@
+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 const getSelectedMediaContainerNodeAttrs = mediaPluginState => {
+  const selectedNode = mediaPluginState.selectedMediaContainerNode();
+  if (selectedNode && selectedNode.attrs) {
+    return selectedNode.attrs;
+  }
+  return null;
+};
+export const downloadMedia = async mediaPluginState => {
+  try {
+    const selectedNodeAttrs = getSelectedMediaContainerNodeAttrs(mediaPluginState);
+    if (selectedNodeAttrs && mediaPluginState.mediaClientConfig) {
+      const {
+        id,
+        collection = ''
+      } = selectedNodeAttrs;
+      const mediaClient = getMediaClient(mediaPluginState.mediaClientConfig);
+      const fileState = await mediaClient.file.getCurrentState(id, {
+        collectionName: collection
+      });
+      const fileName = fileState.status === 'error' ? undefined : fileState.name;
+      mediaClient.file.downloadBinary(id, fileName, collection);
+    }
+    return true;
+  } catch (err) {
+    return false;
+  }
+};
+export const removeMediaGroupNode = state => {
+  const {
+    mediaGroup
+  } = state.schema.nodes;
+  const mediaGroupParent = findParentNodeOfType(mediaGroup)(state.selection);
+  let 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 const getSelectedMediaSingle = state => {
+  const {
+    mediaSingle
+  } = state.schema.nodes;
+  return findSelectedNodeOfType(mediaSingle)(state.selection) || findParentNodeOfType(mediaSingle)(state.selection);
+};
+export const getPixelWidthOfElement = (editorView, pos, mediaWidth) => {
+  const domNode = editorView.nodeDOM(pos);
+  if (domNode instanceof HTMLElement) {
+    return domNode.offsetWidth;
+  }
+  return mediaWidth;
+};
+export const calcNewLayout = (width, layout, contentWidth, fullWidthMode = false) => {
+  const 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';
+};
+let maxToolbarFitWidth = 0;
+export const getMaxToolbarWidth = () => {
+  const toolbar = document.querySelector(`div[aria-label="Media floating controls"]`);
+  const 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/es2019/ui/CaptionPlaceholder/index.js

@@ -0,0 +1,25 @@
+/** @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';
+const placeholder = css`
+  color: ${`var(--ds-text-subtlest, ${N200})`};
+  width: 100%;
+  text-align: center;
+  margin-top: ${"var(--ds-space-100, 8px)"} !important;
+  display: block;
+`;
+export default /*#__PURE__*/React.forwardRef(({
+  onClick
+}, ref) => {
+  return jsx("span", {
+    ref: ref,
+    css: placeholder,
+    onClick: onClick,
+    "data-id": CAPTION_PLACEHOLDER_ID,
+    "data-testid": "caption-placeholder"
+  }, jsx(FormattedMessage, messages.placeholder));
+});

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

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

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

@@ -0,0 +1,213 @@
+/** @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';
+const ImageBorder = ({
+  intl: {
+    formatMessage
+  },
+  toggleBorder,
+  borderMark,
+  setBorder
+}) => {
+  const popupTarget = useRef(null);
+  const enabled = !!borderMark;
+  const color = borderMark === null || borderMark === void 0 ? void 0 : borderMark.color;
+  const size = borderMark === null || borderMark === void 0 ? void 0 : borderMark.size;
+  const [isOpen, setIsOpen] = useState(false);
+  const [isColorSubmenuOpen, setIsColorSubmenuOpen] = useState(false);
+  const [isSizeSubmenuOpen, setIsSizeSubmenuOpen] = useState(false);
+  const handleSubMenuRef = ref => {
+    if (!ref) {
+      return;
+    }
+    const rect = ref.getBoundingClientRect();
+    if (rect.left + rect.width > window.innerWidth) {
+      ref.style.left = `-${rect.width}px`;
+    }
+  };
+  const borderSizeOptions = [{
+    name: formatMessage(messages.borderSizeSubtle),
+    value: 1
+  }, {
+    name: formatMessage(messages.borderSizeMedium),
+    value: 2
+  }, {
+    name: formatMessage(messages.borderSizeBold),
+    value: 3
+  }];
+  const 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: color => {
+        setBorder({
+          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(({
+      name,
+      value
+    }, idx) => 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: () => {
+        setBorder({
+          size: value
+        });
+        setIsOpen(false);
+      },
+      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.
+   */
+  const fitTolerance = 10;
+  const fitWidth = menuItemDimensions.width;
+  const fitHeight = items.length * (menuItemDimensions.height + itemSpacing);
+  return jsx("div", null, jsx("div", {
+    css: toolbarButtonWrapper({
+      enabled,
+      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: () => {
+      setIsOpen(!isOpen);
+    }
+  }))), jsx(Popup, {
+    target: popupTarget.current ? popupTarget.current : undefined,
+    fitWidth: fitWidth + fitTolerance,
+    fitHeight: fitHeight + fitTolerance,
+    forcePlacement: true,
+    stick: true
+  }, jsx("div", {
+    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
+    }],
+    isOpen: isOpen,
+    onOpenChange: () => {
+      setIsOpen(false);
+      setIsColorSubmenuOpen(false);
+      setIsSizeSubmenuOpen(false);
+    },
+    onItemActivated: ({
+      item
+    }) => {
+      if (item.value.name === 'color') {
+        setIsColorSubmenuOpen(!isColorSubmenuOpen);
+      }
+      if (item.value.name === 'size') {
+        setIsSizeSubmenuOpen(!isSizeSubmenuOpen);
+      }
+    },
+    onMouseEnter: ({
+      item
+    }) => {
+      if (item.value.name === 'color') {
+        setIsColorSubmenuOpen(true);
+      }
+      if (item.value.name === 'size') {
+        setIsSizeSubmenuOpen(true);
+      }
+    },
+    onMouseLeave: ({
+      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/es2019/ui/ImageBorder/messages.js

@@ -0,0 +1,43 @@
+import { defineMessages } from 'react-intl-next';
+export const 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/es2019/ui/ImageBorder/styles.js

@@ -0,0 +1,126 @@
+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 const menuItemDimensions = {
+  width: 175,
+  height: 32
+};
+
+// TODO: Migrate away from gridSize
+// Recommendation: Replace directly with 4 due to itemSpacing being used in calculations
+export const itemSpacing = gridSize() / 2;
+export const contextualMenuArrow = css`
+  display: flex;
+  &::after {
+    content: '›';
+    margin-left: ${"var(--ds-space-050, 4px)"};
+    line-height: 20px;
+    color: ${`var(--ds-icon, ${N90})`};
+  }
+`;
+export const contextualMenuColorIcon = color => css`
+  ${contextualMenuArrow}
+  &::before {
+    content: '';
+    display: block;
+    border: 1px solid ${DEFAULT_BORDER_COLOR};
+    border-radius: ${"var(--ds-border-radius-100, 3px)"};
+    width: 20px;
+    height: 20px;
+    ${color && `background: ${color}`}
+  }
+`;
+export const contextualSubMenu = index => css`
+  border-radius: ${"var(--ds-border-radius-100, 3px)"};
+  background: ${"var(--ds-surface-overlay, white)"};
+  box-shadow: ${`var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`})`};
+  display: flex;
+  position: absolute;
+  top: ${index * (menuItemDimensions.height + itemSpacing * 2)}px;
+  left: ${menuItemDimensions.width}px;
+  padding: ${"var(--ds-space-100, 8px)"};
+
+  > div {
+    padding: 0;
+  }
+`;
+export const buttonStyle = selected => css`
+  height: 26px;
+  width: 26px;
+  padding: 0;
+  border-radius: 4px;
+  background-color: ${selected ? `var(--ds-text, ${N800})` : `var(--ds-background-neutral, ${N20A})`};
+  border: 1px solid ${DEFAULT_BORDER_COLOR};
+  cursor: pointer;
+  display: block;
+`;
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+export const buttonWrapperStyle = css`
+  border: 1px solid transparent;
+  margin: 1px;
+  font-size: 0;
+  display: flex;
+  align-items: center;
+  padding: 1px;
+  border-radius: 6px;
+  &:focus-within,
+  &:focus,
+  &:hover {
+    border-color: ${N50} !important;
+  }
+`;
+export const line = (size, selected) => css`
+  position: relative;
+  &:before {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 12px;
+    height: ${size}px;
+    background-color: ${selected ? `var(--ds-icon-inverse, ${N0})` : "var(--ds-icon, #44546F)"};
+    border-radius: 90px;
+    transform: translate(-50%, -50%) rotate(135deg);
+  }
+`;
+const getHoverStyles = selector => `&:hover ${selector} {
+    background: ${`var(--ds-background-neutral-subtle-hovered, ${colors.N20A})`};
+
+    &:hover {
+      background: ${`var(--ds-background-neutral-hovered, ${colors.N30A})`};
+    } 
+  }`;
+export const toolbarButtonWrapper = ({
+  enabled,
+  isOpen
+}) => css`
+  display: flex;
+  .image-border-toolbar-btn {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    padding: 0;
+    & > span {
+      margin: 0;
+    }
+  }
+  .image-border-toolbar-dropdown {
+    padding: 0;
+    & > span {
+      margin: 0;
+    }
+    width: 16px !important;
+    border-top-left-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
+    margin-left: 1px;
+  }
+
+  ${!enabled && getHoverStyles('.image-border-toolbar-btn')}
+  ${!isOpen && !enabled && getHoverStyles('.image-border-toolbar-dropdown')}
+`;

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

@@ -0,0 +1,47 @@
+/** @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';
+const iconWrapper = css`
+  color: ${`var(--ds-icon-accent-blue, ${hexToRgba(B400, 0.4) || B400})`};
+  background: ${`var(--ds-background-accent-blue-subtle, ${hexToRgba(B300, 0.6) || B300})`};
+  border-radius: ${borderRadius()}px;
+  margin: 5px 3px 25px;
+  width: ${FILE_WIDTH}px;
+  min-height: ${MEDIA_HEIGHT}px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const dropLine = css`
+  background: ${`var(--ds-border-focused, ${B200})`};
+  border-radius: ${borderRadius()}px;
+  margin: ${"var(--ds-space-025, 2px)"} 0;
+  width: 100%;
+  height: 2px;
+`;
+const IconWrapperComponent = props => {
+  const {
+    intl
+  } = props;
+  const {
+    dropPlaceholderLabel
+  } = dropPlaceholderMessages;
+  return jsx("div", {
+    css: iconWrapper
+  }, jsx(DocumentFilledIcon, {
+    label: intl.formatMessage(dropPlaceholderLabel),
+    size: "medium"
+  }));
+};
+const IntlIconWrapper = injectIntl(IconWrapperComponent);
+export default (({
+  type = 'group'
+}) => type === 'single' ? jsx("div", {
+  css: dropLine
+}) : jsx(IntlIconWrapper, null));

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

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