@atlaskit/editor-core
Version:
A package contains Atlassian editor core functionality
193 lines (189 loc) • 10.5 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.syncBlockStylesBase = exports.syncBlockStyles = exports.syncBlockOverflowStyles = exports.syncBlockFirstNodeStyles = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = require("@emotion/react");
var _syncBlock = require("@atlaskit/editor-common/sync-block");
var _$concat$concat;
/* eslint-disable @atlaskit/ui-styling-standard/use-compiled */
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
var syncBlockStylesBase = exports.syncBlockStylesBase = (0, _react.css)((0, _defineProperty2.default)({
'@property --angle': {
syntax: '"<angle>"',
initialValue: '0deg',
inherits: 'false'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ProseMirror': (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_syncBlock.SyncBlockSharedCssClassName.prefix, ", .").concat(_syncBlock.BodiedSyncBlockSharedCssClassName.prefix), (_$concat$concat = {
position: 'relative',
cursor: 'pointer',
borderRadius: "var(--ds-radius-small, 3px)",
marginBottom: 0,
marginTop: "var(--ds-space-075, 6px)",
paddingBlock: "var(--ds-space-150, 12px)",
color: 'inherit',
/* Hover state */
'&:hover': (0, _defineProperty2.default)({
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
boxShadow: "0px 0px 0px 1px ".concat("var(--ds-border, #0B120E24)"),
transition: 'box-shadow 200ms ease-in'
}, ".".concat(_syncBlock.SyncBlockLabelSharedCssClassName.labelClassName), {
opacity: 1,
visibility: 'visible',
transition: 'opacity 200ms ease-in, visibility 200ms ease-in'
})
}, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_$concat$concat, "&.".concat(_syncBlock.BodiedSyncBlockSharedCssClassName.selectionInside), (0, _defineProperty2.default)({
boxShadow: "0 0 0 1px ".concat("var(--ds-border, #0B120E24)")
}, ".".concat(_syncBlock.SyncBlockLabelSharedCssClassName.labelClassName), {
opacity: 1,
visibility: 'visible'
})), '&.ak-editor-selected-node', (0, _defineProperty2.default)({
boxShadow: "0 0 0 1px ".concat("var(--ds-border-focused, #4688EC)")
}, ".".concat(_syncBlock.SyncBlockLabelSharedCssClassName.labelClassName), {
opacity: 1,
visibility: 'visible',
backgroundColor: "var(--ds-background-selected, #E9F2FE)",
top: '-14px',
paddingBottom: "var(--ds-space-050, 4px)",
paddingTop: "var(--ds-space-050, 4px)",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'> span': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
color: "var(--ds-text-selected, #1868DB)".concat(" !important")
}
})), '&.danger', (0, _defineProperty2.default)({
boxShadow: "0 0 0 1px ".concat("var(--ds-border-danger, #E2483D)"),
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ak-editor-panel__icon': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
color: "var(--ds-icon-danger, #C9372C)".concat(" !important")
}
}, ".".concat(_syncBlock.SyncBlockLabelSharedCssClassName.labelClassName), {
backgroundColor: "var(--ds-background-danger, #FFECEB)",
top: '-14px',
paddingBottom: "var(--ds-space-050, 4px)",
paddingTop: "var(--ds-space-050, 4px)",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'> span': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
color: "var(--ds-text-danger, #AE2E24)".concat(" !important")
}
})), "&.".concat(_syncBlock.SyncBlockStateCssClassName.disabledClassName), (0, _defineProperty2.default)({
backgroundColor: "var(--ds-background-disabled, #17171708)",
boxShadow: "0 0 0 1px ".concat("var(--ds-border-disabled, #0515240F)"),
userSelect: 'none'
}, ".".concat(_syncBlock.SyncBlockLabelSharedCssClassName.labelClassName), {
backgroundColor: "var(--ds-surface, #FFFFFF)",
'&::before': {
border: 'none'
}
})), "&.".concat(_syncBlock.SyncBlockStateCssClassName.creationLoadingClassName), (0, _defineProperty2.default)({
animation: "".concat((0, _react.keyframes)({
from: {
'--angle': '0deg'
},
to: {
'--angle': '360deg'
}
}), " 2s linear infinite"),
border: '1px solid transparent',
background: "linear-gradient(".concat("var(--ds-surface, #FFFFFF)", ", ", "var(--ds-surface, #FFFFFF)", ") padding-box, conic-gradient(from var(--angle), #1868DB, ", "var(--ds-background-accent-purple-subtlest-pressed, #E3BDFA)", ", #3279E0, #1868DB) border-box"),
backgroundClip: 'padding-box, border-box',
boxShadow: 'none',
transition: 'boxShadow 200ms ease-in'
}, ".".concat(_syncBlock.SyncBlockLabelSharedCssClassName.labelClassName), {
display: 'none'
})), ":has(.".concat(_syncBlock.SyncBlockSharedCssClassName.error, ")"), {
backgroundColor: "var(--ds-background-disabled, #17171708)"
}), ":has(.".concat(_syncBlock.SyncBlockSharedCssClassName.loading, ")"), (0, _defineProperty2.default)({
boxShadow: "0 0 0 1px ".concat("var(--ds-border, #0B120E24)")
}, ".".concat(_syncBlock.SyncBlockLabelSharedCssClassName.labelClassName), {
opacity: 0,
visibility: 'hidden'
})), "&.".concat(_syncBlock.SyncBlockStateCssClassName.viewModeClassName), (0, _defineProperty2.default)({
boxShadow: 'none',
backgroundColor: 'unset'
}, ".".concat(_syncBlock.SyncBlockLabelSharedCssClassName.labelClassName), {
opacity: 0,
visibility: 'hidden'
})), "&.".concat(_syncBlock.SyncBlockStateCssClassName.draggingClassName), (0, _defineProperty2.default)({
boxShadow: "0 0 0 1px ".concat("var(--ds-border, #0B120E24)")
}, ".".concat(_syncBlock.SyncBlockLabelSharedCssClassName.labelClassName), {
opacity: 1,
visibility: 'visible'
})), ".".concat(_syncBlock.BodiedSyncBlockSharedCssClassName.content), {
paddingTop: 0,
paddingBottom: 0,
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
paddingLeft: '19px',
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
paddingRight: '18px',
cursor: 'text'
}), (0, _defineProperty2.default)(_$concat$concat, ".".concat(_syncBlock.SyncBlockSharedCssClassName.renderer), {
paddingTop: 0,
paddingBottom: 0,
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
paddingLeft: '19px',
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
paddingRight: '18px'
}))), ".".concat(_syncBlock.BodiedSyncBlockSharedCssClassName.content), {
// First child node that has drag handle widget next to it is overridden with marginTop: 0, see globalStyles in editor-plugin-block-controls/src/ui/global-styles.tsx
// Hence we set marginTop: 0 when by default to avoid flickering when hovering on and off the first node
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
'> :nth-child(1 of :not(style, .ProseMirror-gapcursor, .ProseMirror-widget, span))': {
marginTop: 0
}
}), ".".concat(_syncBlock.SyncBlockSharedCssClassName.renderer), {
// First child node in bodiedSyncBlock is overridden with marginTop: 0, hence apply the same style to syncBlock for consistency
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
'.ak-renderer-document > :first-child': {
marginTop: 0
}
})
}, ".".concat(_syncBlock.SyncBlockLabelSharedCssClassName.labelClassName), {
borderRadius: "var(--ds-radius-small, 3px)",
position: 'absolute',
gap: "var(--ds-space-050, 4px)",
justifyContent: 'center',
alignItems: 'center',
display: 'flex',
opacity: 0,
visibility: 'hidden',
boxShadow: 'none',
zIndex: 1,
paddingLeft: "var(--ds-space-100, 8px)",
paddingRight: "var(--ds-space-100, 8px)",
top: '-10px',
right: "var(--ds-space-150, 12px)",
backgroundColor: "var(--ds-surface, #FFFFFF)",
maxWidth: '140px'
}));
// Export the default styles with negative margins (original behavior)
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
var syncBlockStyles = exports.syncBlockStyles = (0, _react.css)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ProseMirror': (0, _defineProperty2.default)({}, ".".concat(_syncBlock.SyncBlockSharedCssClassName.prefix, ", .").concat(_syncBlock.BodiedSyncBlockSharedCssClassName.prefix), {
marginRight: "-19px",
marginLeft: "-19px"
})
});
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
var syncBlockOverflowStyles = exports.syncBlockOverflowStyles = (0, _react.css)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ProseMirror': (0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_syncBlock.BodiedSyncBlockSharedCssClassName.content), {
// Contain floated elements (wrap-left/wrap-right) within synced block borders
// Use display: flow-root to create a block formatting context without clipping other content e.g. telepointers
display: 'flow-root'
}), ".".concat(_syncBlock.SyncBlockSharedCssClassName.renderer), {
// Contain floated elements (wrap-left/wrap-right) within synced block borders
// Use display: flow-root to create a block formatting context without clipping other content e.g. telepointers
display: 'flow-root'
})
});
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
var syncBlockFirstNodeStyles = exports.syncBlockFirstNodeStyles = (0, _react.css)((0, _defineProperty2.default)({}, ".ProseMirror > .fabric-editor-breakout-mark:first-child", (0, _defineProperty2.default)({}, ".".concat(_syncBlock.SyncBlockSharedCssClassName.prefix, ", .").concat(_syncBlock.BodiedSyncBlockSharedCssClassName.prefix), {
marginTop: 0
})));