@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
86 lines (85 loc) • 6.04 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
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 _templateObject, _templateObject2; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
var annotationPrefix = exports.annotationPrefix = 'ak-editor-annotation';
var AnnotationSharedClassNames = exports.AnnotationSharedClassNames = {
focus: "".concat(annotationPrefix, "-focus"),
blur: "".concat(annotationPrefix, "-blur"),
draft: "".concat(annotationPrefix, "-draft"),
hover: "".concat(annotationPrefix, "-hover")
};
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 AnnotationSharedCSSByState = exports.AnnotationSharedCSSByState = function AnnotationSharedCSSByState() {
if ((0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes')) {
// NOTE: These styles are shared between renderer and editor. Sometimes they
// need different selectors and other times they apply the same attributes
// in a different way. For example in renderer the focus styles are an
// override, not a separate class. Be sure to check both usages of this
// before modifying.
return {
common: {
borderBottom: '2px solid transparent',
cursor: 'pointer',
padding: '1px 0 2px',
'&:has(.card), &:has([data-inline-card])': (0, _platformFeatureFlags.fg)('annotations_align_editor_and_renderer_styles') ? {
padding: '5px 0 3px 0'
} : {
paddingTop: '4px',
border: 'none',
boxShadow: "0 2px 0 0 ".concat("var(--ds-border-accent-yellow, #B38600)")
},
'&:has(.date-lozenger-container)': {
paddingTop: '2px'
}
},
focus: (0, _react.css)({
background: "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)",
borderBottomColor: "var(--ds-border-accent-yellow, #B38600)",
boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #091E4226, 0px 0px 1px #091E424f)"
}),
blur: (0, _react.css)({
background: "var(--ds-background-accent-yellow-subtlest, #FFF7D6)",
borderBottomColor: "var(--ds-border-accent-yellow, #B38600)"
}),
hover: (0, _react.css)({
background: "var(--ds-background-accent-yellow-subtlest-hovered, #F8E6A0)",
borderBottomColor: "var(--ds-border-accent-yellow, #B38600)",
boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #091E4226, 0px 0px 1px #091E424f)"
})
};
} else {
return {
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, #F8E6A0)",
borderBottom: "2px solid ".concat("var(--ds-border-accent-yellow, #B38600)"),
// TODO: https://product-fabric.atlassian.net/browse/DSP-4147
boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #091E4226, 0px 0px 1px #091E424f)",
cursor: 'pointer'
}),
blur: (0, _react.css)({
background: "var(--ds-background-accent-yellow-subtlest, #FFF7D6)",
borderBottom: "2px solid ".concat("var(--ds-border-accent-yellow, #B38600)"),
cursor: 'pointer'
})
};
}
};
var annotationSharedStyles = exports.annotationSharedStyles = function annotationSharedStyles() {
return (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') ? // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- `AnnotationSharedCSSByState()` is not safe in object syntax
(0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror {\n\t\t\t\t\t.", ",\n\t\t\t\t\t\t.", ",\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t", ";\n\t\t\t\t\t}\n\n\t\t\t\t\t.", " {\n\t\t\t\t\t\t", ";\n\t\t\t\t\t}\n\n\t\t\t\t\t.", " {\n\t\t\t\t\t\t", ";\n\t\t\t\t\t\tcursor: initial;\n\t\t\t\t\t}\n\n\t\t\t\t\t.", " {\n\t\t\t\t\t\t", ";\n\t\t\t\t\t}\n\t\t\t\t\t.", " {\n\t\t\t\t\t\t", ";\n\t\t\t\t\t\t", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), AnnotationSharedClassNames.blur, AnnotationSharedClassNames.focus, AnnotationSharedClassNames.draft, AnnotationSharedCSSByState().common, AnnotationSharedClassNames.focus, AnnotationSharedCSSByState().focus, AnnotationSharedClassNames.draft, AnnotationSharedCSSByState().focus, AnnotationSharedClassNames.blur, AnnotationSharedCSSByState().blur, AnnotationSharedClassNames.hover, AnnotationSharedCSSByState().common, AnnotationSharedCSSByState().hover) : // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- `AnnotationSharedCSSByState()` is not safe in object syntax
(0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror {\n\t\t\t\t\t.", " {\n\t\t\t\t\t\t", ";\n\t\t\t\t\t}\n\n\t\t\t\t\t.", " {\n\t\t\t\t\t\t", ";\n\t\t\t\t\t\tcursor: initial;\n\t\t\t\t\t}\n\n\t\t\t\t\t.", " {\n\t\t\t\t\t\t", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), AnnotationSharedClassNames.focus, AnnotationSharedCSSByState().focus, AnnotationSharedClassNames.draft, AnnotationSharedCSSByState().focus, AnnotationSharedClassNames.blur, AnnotationSharedCSSByState().blur);
};