@atlaskit/editor-plugin-media
Version:
Media plugin for @atlaskit/editor-core
51 lines • 2.11 kB
JavaScript
/**
* @jsxRuntime classic
* @jsx jsx
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
import { css, jsx } from '@emotion/react';
import { injectIntl } from 'react-intl';
import { dropPlaceholderMessages } from '@atlaskit/editor-common/media';
import DocumentFilledIcon from '@atlaskit/icon/core/file';
import { FILE_WIDTH, MEDIA_HEIGHT } from '../../nodeviews/mediaNodeView/media';
const iconWrapperStyles = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
color: "var(--ds-icon-accent-blue, #357DE8)",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
background: "var(--ds-background-accent-blue-subtle, #669DF1)",
borderRadius: "var(--ds-radius-small, 3px)",
margin: `${"var(--ds-space-075, 6px)"} ${"var(--ds-space-050, 4px)"} ${"var(--ds-space-300, 24px)"}`,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
width: `${FILE_WIDTH}px`,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
minHeight: `${MEDIA_HEIGHT}px`,
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
});
const dropLineStyles = css({
background: "var(--ds-border-focused, #4688EC)",
borderRadius: "var(--ds-radius-small, 3px)",
margin: `${"var(--ds-space-025, 2px)"} 0`,
width: '100%',
height: '2px'
});
const IconWrapperComponent = props => {
const {
intl
} = props;
const {
dropPlaceholderLabel
} = dropPlaceholderMessages;
return jsx("div", {
css: iconWrapperStyles
}, jsx(DocumentFilledIcon, {
label: intl.formatMessage(dropPlaceholderLabel)
}));
};
const IntlIconWrapper = injectIntl(IconWrapperComponent);
export default (({
type = 'group'
}) => type === 'single' ? jsx("div", {
css: dropLineStyles
}) : jsx(IntlIconWrapper, null));