@atlaskit/editor-core
Version:
A package contains Atlassian editor core functionality
286 lines (280 loc) • 16.9 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
var _ProseMirror, _css;
/* eslint-disable @atlaskit/ui-styling-standard/use-compiled */
import { css } from '@emotion/react';
import { INLINE_IMAGE_WRAPPER_CLASS_NAME } from '@atlaskit/editor-common/media-inline';
import { CAPTION_PLACEHOLDER_ID } from '@atlaskit/editor-common/media-single';
import { MediaSharedClassNames, richMediaClassName } from '@atlaskit/editor-common/styles';
import { akEditorMediaResizeHandlerPadding, akEditorMediaResizeHandlerPaddingWide, akEditorSelectedBorderBoldSize, akEditorSelectedBoxShadow, akEditorSelectedNodeClassName, akEditorWrappedNodeZIndex } from '@atlaskit/editor-shared-styles';
import { fileCardImageViewSelector, inlinePlayerClassName, newFileExperienceClassName } from '@atlaskit/media-card';
import { dangerBorderStyles } from './selectionStyles';
var wrappedMediaBreakoutPoint = 410;
/**
* Reference Heights
*
* These heights enforce consistent sizes with media inline nodes due to
* inconsistencies with center aligned inline nodes and text.
*
* There is conversation about refactoring media inline nodes to conform to
* aligning correctly with the surrounding text.
*
* These constants originally came from `headingSizes` from the `theme` package
* and have been copied here to remove this package.
*/
var referenceHeights = {
p: 24 - 2,
h1: 32 + 4,
h2: 28 + 3,
h3: 24 + 1,
h4: 20 + 3,
h5: 16 + 4,
h6: 16 + 2
};
var inlineImageSelector = "> .mediaInlineView-content-wrap > .".concat(INLINE_IMAGE_WRAPPER_CLASS_NAME, ", > :is(a, span[data-mark-type='border']) .mediaInlineView-content-wrap > .").concat(INLINE_IMAGE_WRAPPER_CLASS_NAME, ", > .").concat(INLINE_IMAGE_WRAPPER_CLASS_NAME, ", > :is(a, span[data-mark-type='border']) .").concat(INLINE_IMAGE_WRAPPER_CLASS_NAME);
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles,@atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
export var mediaStyles = css((_css = {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ProseMirror': (_ProseMirror = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_ProseMirror, "li .".concat(richMediaClassName), {
margin: 0
}), '&.ua-chrome li > .mediaSingleView-content-wrap::before', {
content: "''",
display: 'block',
height: 0
}), '&.ua-firefox', {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.mediaSingleView-content-wrap': {
userSelect: 'none'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.captionView-content-wrap': {
userSelect: 'text'
}
}), ".mediaSingleView-content-wrap[layout^='wrap-']", {
position: 'relative',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values,@atlaskit/ui-styling-standard/no-imported-style-values
zIndex: akEditorWrappedNodeZIndex,
maxWidth: '100%',
/* overwrite default Prosemirror setting making it clear: both */
clear: 'inherit'
}), ".mediaSingleView-content-wrap[layout='center']", {
clear: 'both'
}), "table .".concat(richMediaClassName), {
marginTop: "var(--ds-space-150, 12px)",
marginBottom: "var(--ds-space-150, 12px)",
clear: 'both',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'&.image-wrap-left[data-layout], &.image-wrap-right[data-layout]': {
clear: 'none',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
'&:first-child': {
marginTop: "var(--ds-space-150, 12px)"
}
}
}), ".".concat(richMediaClassName, ".image-wrap-right + .").concat(richMediaClassName, ".image-wrap-left"), {
clear: 'both'
}), ".".concat(richMediaClassName, ".image-wrap-left + .").concat(richMediaClassName, ".image-wrap-right, .").concat(richMediaClassName, ".image-wrap-right + .").concat(richMediaClassName, ".image-wrap-left, .").concat(richMediaClassName, ".image-wrap-left + .").concat(richMediaClassName, ".image-wrap-left, .").concat(richMediaClassName, ".image-wrap-right + .").concat(richMediaClassName, ".image-wrap-right"), {
marginRight: 0,
marginLeft: 0
}), "@media all and (max-width: ".concat(wrappedMediaBreakoutPoint, "px)"), {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
"div.mediaSingleView-content-wrap[layout='wrap-left'], div.mediaSingleView-content-wrap[data-layout='wrap-left'], div.mediaSingleView-content-wrap[layout='wrap-right'], div.mediaSingleView-content-wrap[data-layout='wrap-right']": {
float: 'none',
overflow: 'auto',
margin: "var(--ds-space-150, 12px)".concat(" 0")
}
}), "& [layout='full-width'] .".concat(richMediaClassName, ", & [layout='wide'] .").concat(richMediaClassName), {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
marginLeft: '50%',
transform: 'translateX(-50%)'
}), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_ProseMirror, ".media-extended-resize-experience[layout^='wrap-']", {
// override 'overflow: auto' when viewport <= 410 set by mediaSingleSharedStyle
// to prevent scroll bar
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
overflow: 'visible !important'
}), "& [layout^='wrap-'] + [layout^='wrap-']", _defineProperty({
clear: 'none',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
"& + p, & + div[class^='fabric-editor-align'], & + ul, & + ol, & + h1, & + h2, & + h3, & + h4, & + h5, & + h6": {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles,@atlaskit/ui-styling-standard/no-unsafe-values
clear: 'both !important'
}
}, "& .".concat(richMediaClassName), {
marginLeft: 0,
marginRight: 0
})), ".".concat(INLINE_IMAGE_WRAPPER_CLASS_NAME), {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
height: referenceHeights['p'],
transform: 'translateY(-2px)'
}), "h1", _defineProperty({}, inlineImageSelector, {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
height: referenceHeights.h1,
transform: "translateY(-3px)"
})), "h2", _defineProperty({}, inlineImageSelector, {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
height: referenceHeights.h2,
transform: "translateY(-3px)"
})), "h3", _defineProperty({}, inlineImageSelector, {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
height: referenceHeights.h3,
transform: "translateY(-2px)"
})), "h4", _defineProperty({}, inlineImageSelector, {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
height: referenceHeights.h4,
transform: "translateY(-2px)"
})), "h5", _defineProperty({}, inlineImageSelector, {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
height: referenceHeights.h5,
transform: "translateY(-2px)"
})), "h6", _defineProperty({}, inlineImageSelector, {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
height: referenceHeights.h6,
transform: "translateY(-2px)"
})), ".mediaSingleView-content-wrap[layout='wrap-left']", {
float: 'left'
}), _defineProperty(_defineProperty(_defineProperty(_ProseMirror, ".mediaSingleView-content-wrap[layout='wrap-right']", {
float: 'right'
}), ".mediaSingleView-content-wrap[layout='wrap-right'] + .mediaSingleView-content-wrap[layout='wrap-left']", {
clear: 'both'
}), '& > .mediaSingleView-content-wrap', {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.richMedia-resize-handle-right': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
marginRight: "-".concat(akEditorMediaResizeHandlerPaddingWide, "px")
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.richMedia-resize-handle-left': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
marginLeft: "-".concat(akEditorMediaResizeHandlerPaddingWide, "px")
}
}))
}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_css, ".".concat(MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT), {
padding: 0
}), '.richMedia-resize-handle-right, .richMedia-resize-handle-left', {
display: 'flex',
flexDirection: 'column',
/* vertical align */
justifyContent: 'center'
}), '.richMedia-resize-handle-right', {
alignItems: 'flex-end',
paddingRight: "var(--ds-space-150, 12px)",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
marginRight: "-".concat(akEditorMediaResizeHandlerPadding, "px")
}), '.richMedia-resize-handle-left', {
alignItems: 'flex-start',
paddingLeft: "var(--ds-space-150, 12px)",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
marginLeft: "-".concat(akEditorMediaResizeHandlerPadding, "px")
}), '.richMedia-resize-handle-right::after, .richMedia-resize-handle-left::after', {
content: "' '",
display: 'flex',
width: 3,
height: 64,
borderRadius: "var(--ds-radius-medium, 6px)"
}), ".".concat(richMediaClassName, ":hover .richMedia-resize-handle-left::after, .").concat(richMediaClassName, ":hover .richMedia-resize-handle-right::after"), {
background: "var(--ds-border, #0B120E24)"
}), ".".concat(akEditorSelectedNodeClassName, " .richMedia-resize-handle-right::after, .").concat(akEditorSelectedNodeClassName, " .richMedia-resize-handle-left::after, .").concat(richMediaClassName, " .richMedia-resize-handle-right:hover::after, .").concat(richMediaClassName, " .richMedia-resize-handle-left:hover::after, .").concat(richMediaClassName, ".is-resizing .richMedia-resize-handle-right::after, .").concat(richMediaClassName, ".is-resizing .richMedia-resize-handle-left::after"), {
background: "var(--ds-border-focused, #4688EC)"
}), '.__resizable_base__', {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
left: 'unset !important',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
width: 'auto !important',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
height: 'auto !important'
}), '.danger > div > div > .media-card-frame, .danger > span > a', {
backgroundColor: "var(--ds-background-danger, #FFECEB)",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
boxShadow: "0px 0px 0px ".concat(akEditorSelectedBorderBoldSize, "px, ", "var(--ds-border-danger, #E2483D)"),
transition: 'background-color 0s, box-shadow 0s'
}), '.danger', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ".".concat(richMediaClassName, " .").concat(fileCardImageViewSelector, "::after"), {
border: "1px solid ".concat("var(--ds-border-danger, #E2483D)")
}), ".".concat(richMediaClassName, " .").concat(inlinePlayerClassName, "::after"), {
border: "1px solid ".concat("var(--ds-border-danger, #E2483D)")
}), ".".concat(richMediaClassName, " .").concat(newFileExperienceClassName), {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
boxShadow: "0 0 0 1px ".concat("var(--ds-border-danger, #E2483D)", " !important")
}), '.richMedia-resize-handle-right::after, .richMedia-resize-handle-left::after', {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
background: "var(--ds-icon-danger, #C9372C)".concat(" !important")
}), '.resizer-handle-thumb', {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
background: "var(--ds-icon-danger, #C9372C)".concat(" !important")
}), 'div div .media-card-frame, .inlineCardView-content-wrap > span > a', {
backgroundColor: "var(--ds-blanket-danger, #EF5C4814)",
transition: "background-color 0s"
}), 'div div .media-card-frame::after', {
boxShadow: 'none'
})), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_css, '.warning', _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ".".concat(richMediaClassName, " .").concat(fileCardImageViewSelector, "::after"), {
border: "1px solid ".concat("var(--ds-border-warning, #E06C00)")
}), ".".concat(richMediaClassName, " .").concat(inlinePlayerClassName, "::after"), {
border: "1px solid ".concat("var(--ds-border-warning, #E06C00)")
}), ".".concat(richMediaClassName, " .").concat(newFileExperienceClassName), {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
boxShadow: "0 0 0 1px ".concat("var(--ds-border-warning, #E06C00)", " !important")
}), '.resizer-handle-thumb', {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
background: "var(--ds-icon-warning, #E06C00)".concat(" !important")
})), '.media-filmstrip-list-item', {
cursor: 'pointer'
}), ".mediaGroupView-content-wrap.".concat(akEditorSelectedNodeClassName, " #newFileExperienceWrapper"), {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
boxShadow: akEditorSelectedBoxShadow
}), '.ak-editor-no-interaction #newFileExperienceWrapper', {
boxShadow: 'none'
})));
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export var mediaDangerStyles = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ProseMirror': _defineProperty(_defineProperty({}, ".mediaInlineView-content-wrap.".concat(akEditorSelectedNodeClassName, ".danger"), _defineProperty(_defineProperty({}, " .".concat(INLINE_IMAGE_WRAPPER_CLASS_NAME), [dangerBorderStyles]), '>span> span[role="button"]', [dangerBorderStyles])), ".mediaGroupView-content-wrap.danger #newFileExperienceWrapper",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
[dangerBorderStyles])
});
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export var mediaGroupStyles = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.mediaGroupView-content-wrap ul': {
padding: 0
}
});
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export var mediaAlignmentStyles = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.fabric-editor-block-mark[class^="fabric-editor-align"]': {
// It was `clear: none !important` before, but it was causing typescript errors
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
clear: 'none'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.fabric-editor-align-end': {
textAlign: 'right'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.fabric-editor-align-start': {
textAlign: 'left'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.fabric-editor-align-center': {
textAlign: 'center'
},
// For FullPage only when inside a table
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.fabric-editor--full-width-mode': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.pm-table-container': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.code-block, .extension-container, .multiBodiedExtension--container': {
maxWidth: '100%'
}
}
}
});
// When both platform_editor_content_mode_button_mvp & confluence_compact_text_format are cleaned up,
// move this style into mediaStyles variable ⬆️
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export var mediaCaptionStyles = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.mediaSingleView-content-wrap': _defineProperty({}, "span#".concat(CAPTION_PLACEHOLDER_ID), {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
fontSize: 'var(--ak-editor-base-font-size)'
})
});