@atlaskit/editor-core 188.3.0 → 188.3.1

package/dist/es2019/plugins/media/toolbar/linking.js

@@ -1,98 +0,0 @@
-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/plugins/media/toolbar/utils.js

@@ -1,86 +0,0 @@
-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/plugins/media/types.js

@@ -1 +0,0 @@
-export {};

package/dist/es2019/plugins/media/ui/CaptionPlaceholder/index.js

@@ -1,25 +0,0 @@
-/** @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/plugins/media/ui/CaptionPlaceholder/messages.js

@@ -1,8 +0,0 @@
-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/plugins/media/ui/ImageBorder/index.js

@@ -1,215 +0,0 @@
-/** @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 { borderPaletteTooltipMessages, ColorPalette } from '@atlaskit/editor-common/ui-color';
-import { borderColorPalette } from '@atlaskit/editor-common/ui-color';
-import { ArrowKeyNavigationType, DropdownMenu } from '@atlaskit/editor-common/ui-menu';
-import { 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/plugins/media/ui/ImageBorder/messages.js

@@ -1,43 +0,0 @@
-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/plugins/media/ui/ImageBorder/styles.js

@@ -1,126 +0,0 @@
-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/plugins/media/ui/Media/DropPlaceholder.js

@@ -1,47 +0,0 @@
-/** @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/plugins/media/ui/Media/drop-placeholder-messages.js

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