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