@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
81 lines (79 loc) • 5.02 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.mediaAnnotationStyles = exports.blockAnnotationPrefix = exports.annotationSharedStyles = exports.annotationPrefix = exports.BlockAnnotationSharedClassNames = exports.AnnotationSharedClassNames = exports.AnnotationSharedCSSByState = void 0;
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
var _react = require("@emotion/react");
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _colors = require("@atlaskit/theme/colors");
var _styles = require("../../media/styles");
var _templateObject;
var annotationPrefix = exports.annotationPrefix = 'ak-editor-annotation';
var AnnotationSharedClassNames = exports.AnnotationSharedClassNames = {
focus: "".concat(annotationPrefix, "-focus"),
blur: "".concat(annotationPrefix, "-blur"),
draft: "".concat(annotationPrefix, "-draft")
};
var blockAnnotationPrefix = exports.blockAnnotationPrefix = 'ak-editor-block-annotation';
var BlockAnnotationSharedClassNames = exports.BlockAnnotationSharedClassNames = {
focus: "".concat(blockAnnotationPrefix, "-focus"),
blur: "".concat(blockAnnotationPrefix, "-blur"),
draft: "".concat(blockAnnotationPrefix, "-draft")
};
var mediaNodeDomRef = 'mediaView-content-wrap';
var Y75a = 'rgba(255, 240, 179, 0.5)';
var Y200a = 'rgba(255, 196, 0, 0.82)';
var AnnotationSharedCSSByState = exports.AnnotationSharedCSSByState = function AnnotationSharedCSSByState() {
return (0, _platformFeatureFlags.getBooleanFF)('platform.editor.allow-inline-comments-for-inline-nodes') ? {
focus: (0, _react.css)({
background: "var(--ds-background-accent-yellow-subtler, ".concat(_colors.Y75, ")"),
borderBottom: "2px solid ".concat("var(--ds-border-accent-yellow, ".concat(_colors.Y300, ")")),
boxShadow: "var(--ds-shadow-overlay, ".concat("1px 2px 3px ".concat(_colors.N60A, ", -1px 2px 3px ").concat(_colors.N60A), ")"),
cursor: 'pointer',
'&:has(.card)': {
fontSize: '1.5rem',
lineHeight: '1.2rem',
'& > *': {
fontSize: '16px'
}
}
}),
blur: (0, _react.css)({
background: "var(--ds-background-accent-yellow-subtlest, ".concat(Y75a, ")"),
borderBottom: "2px solid ".concat("var(--ds-border-accent-yellow, ".concat(Y200a, ")")),
cursor: 'pointer',
'&:has(.card)': {
fontSize: '1.5rem',
lineHeight: '1.2rem',
'& > *': {
fontSize: '16px'
}
}
})
} : {
focus: (0, _react.css)({
// Background is not coming through in confluence, suspecting to be caused by some specific combination of
// emotion and token look up
background: "var(--ds-background-accent-yellow-subtler, ".concat(_colors.Y75, ")"),
borderBottom: "2px solid ".concat("var(--ds-border-accent-yellow, ".concat(_colors.Y300, ")")),
// TODO: https://product-fabric.atlassian.net/browse/DSP-4147
boxShadow: "var(--ds-shadow-overlay, ".concat("1px 2px 3px ".concat(_colors.N60A, ", -1px 2px 3px ").concat(_colors.N60A), ")"),
cursor: 'pointer'
}),
blur: (0, _react.css)({
background: "var(--ds-background-accent-yellow-subtlest, ".concat(Y75a, ")"),
borderBottom: "2px solid ".concat("var(--ds-border-accent-yellow, ".concat(Y200a, ")")),
cursor: 'pointer'
})
};
};
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- `AnnotationSharedCSSByState()` is not safe in object syntax
var annotationSharedStyles = exports.annotationSharedStyles = function annotationSharedStyles() {
return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n .ProseMirror {\n .", " {\n ", ";\n }\n\n .", " {\n ", ";\n cursor: initial;\n }\n\n .", " {\n ", ";\n }\n\n // Styling for comments on media node\n .", "[class*=ak-editor-block-annotation-] {\n border-radius: 3px;\n }\n\n .", ".", " {\n box-shadow: ", ";\n }\n\n .", ".", " {\n box-shadow: ", ";\n }\n\n .", ".", " {\n box-shadow: ", ";\n }\n }\n"])), AnnotationSharedClassNames.focus, AnnotationSharedCSSByState().focus, AnnotationSharedClassNames.draft, AnnotationSharedCSSByState().focus, AnnotationSharedClassNames.blur, AnnotationSharedCSSByState().blur, mediaNodeDomRef, mediaNodeDomRef, BlockAnnotationSharedClassNames.draft, (0, _styles.commentStatusStyleMap)('draft'), mediaNodeDomRef, BlockAnnotationSharedClassNames.focus, (0, _styles.commentStatusStyleMap)('focus'), mediaNodeDomRef, BlockAnnotationSharedClassNames.blur, (0, _styles.commentStatusStyleMap)('blur'));
};
var mediaAnnotationStyles = exports.mediaAnnotationStyles = (0, _react.css)({
boxShadow: "5px 5px ".concat("var(--ds-background-accent-yellow-subtler, ".concat(Y75a, ")")),
borderRadius: '3px'
});