@atlaskit/editor-plugin-media
Version:
Media plugin for @atlaskit/editor-core
47 lines • 1.54 kB
JavaScript
/** @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));