@atlaskit/editor-core
Version:
A package contains Atlassian editor core functionality
293 lines (286 loc) • 18.6 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.mediaStyles = exports.mediaGroupStyles = exports.mediaDangerStyles = exports.mediaCaptionStyles = exports.mediaAlignmentStyles = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = require("@emotion/react");
var _mediaInline = require("@atlaskit/editor-common/media-inline");
var _mediaSingle = require("@atlaskit/editor-common/media-single");
var _styles = require("@atlaskit/editor-common/styles");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _mediaCard = require("@atlaskit/media-card");
var _selectionStyles = require("./selectionStyles");
var _ProseMirror, _css;
/* eslint-disable @atlaskit/ui-styling-standard/use-compiled */
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(_mediaInline.INLINE_IMAGE_WRAPPER_CLASS_NAME, ", > :is(a, span[data-mark-type='border']) .mediaInlineView-content-wrap > .").concat(_mediaInline.INLINE_IMAGE_WRAPPER_CLASS_NAME, ", > .").concat(_mediaInline.INLINE_IMAGE_WRAPPER_CLASS_NAME, ", > :is(a, span[data-mark-type='border']) .").concat(_mediaInline.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
var mediaStyles = exports.mediaStyles = (0, _react.css)((_css = {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ProseMirror': (_ProseMirror = {}, (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)(_ProseMirror, "li .".concat(_styles.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: _editorSharedStyles.akEditorWrappedNodeZIndex,
maxWidth: '100%',
/* overwrite default Prosemirror setting making it clear: both */
clear: 'inherit'
}), ".mediaSingleView-content-wrap[layout='center']", {
clear: 'both'
}), "table .".concat(_styles.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(_styles.richMediaClassName, ".image-wrap-right + .").concat(_styles.richMediaClassName, ".image-wrap-left"), {
clear: 'both'
}), ".".concat(_styles.richMediaClassName, ".image-wrap-left + .").concat(_styles.richMediaClassName, ".image-wrap-right, .").concat(_styles.richMediaClassName, ".image-wrap-right + .").concat(_styles.richMediaClassName, ".image-wrap-left, .").concat(_styles.richMediaClassName, ".image-wrap-left + .").concat(_styles.richMediaClassName, ".image-wrap-left, .").concat(_styles.richMediaClassName, ".image-wrap-right + .").concat(_styles.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(_styles.richMediaClassName, ", & [layout='wide'] .").concat(_styles.richMediaClassName), {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
marginLeft: '50%',
transform: 'translateX(-50%)'
}), (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)(_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-']", (0, _defineProperty2.default)({
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(_styles.richMediaClassName), {
marginLeft: 0,
marginRight: 0
})), ".".concat(_mediaInline.INLINE_IMAGE_WRAPPER_CLASS_NAME), {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
height: referenceHeights['p'],
transform: 'translateY(-2px)'
}), "h1", (0, _defineProperty2.default)({}, inlineImageSelector, {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
height: referenceHeights.h1,
transform: "translateY(-3px)"
})), "h2", (0, _defineProperty2.default)({}, inlineImageSelector, {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
height: referenceHeights.h2,
transform: "translateY(-3px)"
})), "h3", (0, _defineProperty2.default)({}, inlineImageSelector, {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
height: referenceHeights.h3,
transform: "translateY(-2px)"
})), "h4", (0, _defineProperty2.default)({}, inlineImageSelector, {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
height: referenceHeights.h4,
transform: "translateY(-2px)"
})), "h5", (0, _defineProperty2.default)({}, inlineImageSelector, {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
height: referenceHeights.h5,
transform: "translateY(-2px)"
})), "h6", (0, _defineProperty2.default)({}, 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'
}), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_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(_editorSharedStyles.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(_editorSharedStyles.akEditorMediaResizeHandlerPaddingWide, "px")
}
}))
}, (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)(_css, ".".concat(_styles.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(_editorSharedStyles.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(_editorSharedStyles.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(_styles.richMediaClassName, ":hover .richMedia-resize-handle-left::after, .").concat(_styles.richMediaClassName, ":hover .richMedia-resize-handle-right::after"), {
background: "var(--ds-border, #0B120E24)"
}), ".".concat(_editorSharedStyles.akEditorSelectedNodeClassName, " .richMedia-resize-handle-right::after, .").concat(_editorSharedStyles.akEditorSelectedNodeClassName, " .richMedia-resize-handle-left::after, .").concat(_styles.richMediaClassName, " .richMedia-resize-handle-right:hover::after, .").concat(_styles.richMediaClassName, " .richMedia-resize-handle-left:hover::after, .").concat(_styles.richMediaClassName, ".is-resizing .richMedia-resize-handle-right::after, .").concat(_styles.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(_editorSharedStyles.akEditorSelectedBorderBoldSize, "px, ", "var(--ds-border-danger, #E2483D)"),
transition: 'background-color 0s, box-shadow 0s'
}), '.danger', (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_styles.richMediaClassName, " .").concat(_mediaCard.fileCardImageViewSelector, "::after"), {
border: "1px solid ".concat("var(--ds-border-danger, #E2483D)")
}), ".".concat(_styles.richMediaClassName, " .").concat(_mediaCard.inlinePlayerClassName, "::after"), {
border: "1px solid ".concat("var(--ds-border-danger, #E2483D)")
}), ".".concat(_styles.richMediaClassName, " .").concat(_mediaCard.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'
})), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_css, '.warning', (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_styles.richMediaClassName, " .").concat(_mediaCard.fileCardImageViewSelector, "::after"), {
border: "1px solid ".concat("var(--ds-border-warning, #E06C00)")
}), ".".concat(_styles.richMediaClassName, " .").concat(_mediaCard.inlinePlayerClassName, "::after"), {
border: "1px solid ".concat("var(--ds-border-warning, #E06C00)")
}), ".".concat(_styles.richMediaClassName, " .").concat(_mediaCard.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(_editorSharedStyles.akEditorSelectedNodeClassName, " #newFileExperienceWrapper"), {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
boxShadow: _editorSharedStyles.akEditorSelectedBoxShadow
}), '.ak-editor-no-interaction #newFileExperienceWrapper', {
boxShadow: 'none'
})));
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
var mediaDangerStyles = exports.mediaDangerStyles = (0, _react.css)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ProseMirror': (0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".mediaInlineView-content-wrap.".concat(_editorSharedStyles.akEditorSelectedNodeClassName, ".danger"), (0, _defineProperty2.default)((0, _defineProperty2.default)({}, " .".concat(_mediaInline.INLINE_IMAGE_WRAPPER_CLASS_NAME), [_selectionStyles.dangerBorderStyles]), '>span> span[role="button"]', [_selectionStyles.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
[_selectionStyles.dangerBorderStyles])
});
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
var mediaGroupStyles = exports.mediaGroupStyles = (0, _react.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
var mediaAlignmentStyles = exports.mediaAlignmentStyles = (0, _react.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
var mediaCaptionStyles = exports.mediaCaptionStyles = (0, _react.css)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.mediaSingleView-content-wrap': (0, _defineProperty2.default)({}, "span#".concat(_mediaSingle.CAPTION_PLACEHOLDER_ID), {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
fontSize: 'var(--ak-editor-base-font-size)'
})
});