@atlaskit/editor-core
Version:
A package contains Atlassian editor core functionality
708 lines (683 loc) • 36.9 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.layoutStylesForView = exports.layoutSelectedStylesNotAdvanced = exports.layoutSelectedStylesForViewNotAdvanced = exports.layoutSelectedStylesForViewAdvanced = exports.layoutSelectedStylesAdvancedFix = exports.layoutSelectedStylesAdvanced = exports.layoutSectionStylesNotAdvanced = exports.layoutSectionStylesAdvanced = exports.layoutResponsiveStylesForView = exports.layoutResponsiveBaseStyles = exports.layoutColumnStylesNotAdvanced = exports.layoutColumnStylesAdvanced = exports.layoutColumnResponsiveStyles = exports.layoutColumnResizeStyles = exports.layoutColumnMartinTopFixesOld = exports.layoutColumnMartinTopFixesNew = exports.layoutColumnDividerStylesNestedDnD = exports.layoutColumnDividerStyles = exports.layoutBaseStylesWithTableExcerptsFix = exports.layoutBaseStylesFixesUnderNestedDnDFGExcludingBodiedSync = exports.layoutBaseStylesFixesUnderNestedDnDFG = exports.layoutBaseStylesAdvanced = exports.layoutBaseStyles = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = require("@emotion/react");
var _selectionStyles = require("./selectionStyles");
/* eslint-disable @atlaskit/ui-styling-standard/use-compiled */
var gridMediumMaxWidth = 1024;
var akEditorSelectedNodeClassName = 'ak-editor-selected-node';
// Class names for the column resize divider widget — must stay in sync with main.ts in editor-plugin-layout
var layoutColumnDividerClassName = 'layout-column-divider';
var layoutColumnDividerRailClassName = 'layout-column-divider-rail';
var layoutColumnDividerThumbClassName = 'layout-column-divider-thumb';
/**
* Styles for the column resize divider widget DOM elements.
* Mirrors the pm-breakout-resize-handle-* pattern from resizerStyles.ts.
* Applied only when advanced_layouts experiment is on.
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
var layoutColumnDividerStyles = exports.layoutColumnDividerStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(layoutColumnDividerClassName), (0, _defineProperty2.default)((0, _defineProperty2.default)({
// Negative margin removes the applied 'gap' from the parent's flex box
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
marginInline: '-15px 0px',
flexShrink: 0,
boxSizing: 'content-box',
cursor: 'col-resize',
position: 'relative',
zIndex: 2,
alignSelf: 'stretch',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}, "&:hover .".concat(layoutColumnDividerRailClassName), {
background: "var(--ds-background-selected, #E9F2FE)"
}), "&:hover .".concat(layoutColumnDividerThumbClassName), {
background: "var(--ds-border-focused, #4688EC)"
})), ".".concat(layoutColumnDividerRailClassName), {
width: 7,
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
borderRadius: "var(--ds-radius-small, 4px)",
transition: 'background-color 0.2s',
pointerEvents: 'none'
}), ".".concat(layoutColumnDividerThumbClassName), {
minWidth: 3,
height: 'clamp(27px, calc(100% - 32px), 96px)',
background: "var(--ds-border, #0B120E24)",
borderRadius: "var(--ds-radius-medium, 6px)",
pointerEvents: 'none',
position: 'sticky',
top: "var(--ds-space-150, 12px)",
bottom: "var(--ds-space-150, 12px)"
}));
/**
* Override divider marginInline when platform_editor_nested_dnd_styles_changes is on,
* since the layout section/column spacing changes.
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
var layoutColumnDividerStylesNestedDnD = exports.layoutColumnDividerStylesNestedDnD = (0, _react.css)((0, _defineProperty2.default)({}, ".".concat(layoutColumnDividerClassName), {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
marginInline: '0 -7px'
}));
var selectorForNotResizedLayoutInFulllWidthEditor = '.fabric-editor--full-width-mode .ProseMirror > .layoutSectionView-content-wrap';
var selectorForNotResizedLayoutInFixedWidthEditor = '.ak-editor-content-area:not(.fabric-editor--full-width-mode) .ProseMirror > .layoutSectionView-content-wrap';
var selectorForResizedLayoutInFullOrFixedWidthEditor = '.ProseMirror .fabric-editor-breakout-mark .layoutSectionView-content-wrap';
var layoutResponsiveSelectedSelector = "&.selected, &:hover, &.selected.danger, &.".concat(akEditorSelectedNodeClassName, ":not(.danger)");
var layoutSelectedSelector = "&.selected, [data-empty-layout='true'], &:hover, &.selected.danger [data-layout-section], &.".concat(akEditorSelectedNodeClassName, ":not(.danger) [data-layout-section]");
/**
* Layout columns styles when advanced layouts experiment is on
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
var layoutColumnStylesAdvanced = exports.layoutColumnStylesAdvanced = (0, _react.css)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ProseMirror [data-layout-section]': (0, _defineProperty2.default)((0, _defineProperty2.default)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'> [data-layout-column]': {
margin: '0 4px'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
'> [data-layout-column]:first-of-type': {
marginLeft: 0
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
'> [data-layout-column]:last-of-type': {
marginRight: 0
}
}, "@media screen and (max-width: ".concat(gridMediumMaxWidth, "px)"), {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'[data-layout-column] + [data-layout-column]': {
margin: 0
}
}), "> [data-layout-column].".concat(akEditorSelectedNodeClassName, ":not(.danger)"), [
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
_selectionStyles.blanketSelectionStyles,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
_selectionStyles.hideNativeBrowserTextSelectionStyles, {
// layout column selection shorter after layout border has been removed
'::before': {
width: 'calc(100% - 8px)',
left: 4,
borderRadius: "var(--ds-radius-small, 3px)"
}
}])
});
/**
* Layout column resize styles for the platform_editor_layout_column_resize_handle experiment
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
var layoutColumnResizeStyles = exports.layoutColumnResizeStyles = (0, _react.css)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ProseMirror [data-layout-section]': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'> [data-layout-column][style*="--column-width"]': {
// Support CSS custom property for smooth resizing during drag
// When --column-resize-width is set, use it; otherwise fall back to the original flex-basis
// Using attribute selector for higher specificity than inline styles
flexBasis: 'var(--column-resize-width, var(--column-width))',
// Also ensure flex-grow and flex-shrink are reset when using custom width
flex: 'var(--column-resize-flex, 1)'
}
}
});
/**
* Layout columns styles when advanced layouts experiment is off
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
var layoutColumnStylesNotAdvanced = exports.layoutColumnStylesNotAdvanced = (0, _react.css)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ProseMirror [data-layout-section]': (0, _defineProperty2.default)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'[data-layout-column] + [data-layout-column]': {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
marginLeft: 8
}
}, "@media screen and (max-width: ".concat(gridMediumMaxWidth, "px)"), {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'[data-layout-column] + [data-layout-column]': {
marginLeft: 0
}
})
});
/**
* Responsive styles for layout columns when advanced layouts experiment is on
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
var layoutColumnResponsiveStyles = exports.layoutColumnResponsiveStyles = (0, _react.css)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ProseMirror [data-layout-section]': {
display: 'flex',
flexDirection: 'row',
gap: "var(--ds-space-100, 8px)",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'& > *': {
flex: 1,
minWidth: 0
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'& > .unsupportedBlockView-content-wrap': {
minWidth: 'initial'
}
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'.layout-section-container': {
containerType: 'inline-size',
containerName: 'layout-area'
}
});
/**
* Layout section styles when advanced layouts experiment is on
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-exported-styles
var layoutSectionStylesAdvanced = exports.layoutSectionStylesAdvanced = (0, _react.css)((0, _defineProperty2.default)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ProseMirror .layout-section-container [data-layout-section]': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'> .ProseMirror-widget': (0, _defineProperty2.default)((0, _defineProperty2.default)({
flex: 'none',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
display: 'contents !important',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'&[data-blocks-drag-handle-container] div': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
display: 'contents !important'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'&[data-blocks-drop-target-container]': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
display: 'block !important',
margin: "var(--ds-space-negative-050, -4px)",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'[data-drop-target-for-element]': {
position: 'absolute'
}
}
}, "&.".concat(layoutColumnDividerClassName), {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
display: 'block !important',
flex: 'none',
opacity: 0,
transition: 'opacity 0.2s'
}), '& + [data-layout-column]', {
margin: 0
}),
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'> [data-layout-column]': {
margin: 0
}
}
}, ".ProseMirror .layoutSectionView-content-wrap:hover .layout-section-container [data-layout-section]", (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "> .ProseMirror-widget.".concat(layoutColumnDividerClassName), {
opacity: 1
}), "> .ProseMirror-widget.".concat(layoutColumnDividerClassName, " ~ [data-layout-column] [data-layout-content]::before"), {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
display: 'none !important'
})));
/**
* Layout section styles when advanced layouts experiment is off
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
var layoutSectionStylesNotAdvanced = exports.layoutSectionStylesNotAdvanced = (0, _react.css)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'.ProseMirror [data-layout-section]': (0, _defineProperty2.default)((0, _defineProperty2.default)({
position: 'relative',
display: 'flex',
flexDirection: 'row',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'& > *': {
flex: 1,
minWidth: 0
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'& > .unsupportedBlockView-content-wrap': {
minWidth: 'initial'
}
}, "& > .".concat(layoutColumnDividerClassName), {
flex: 'none'
}), "@media screen and (max-width: ".concat(gridMediumMaxWidth, "px)"), {
flexDirection: 'column'
})
});
/**
* Selected styles for layout when advanced layouts experiment is off
*/
// TODO: DSP-4441 - Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.
// This is because the default state already uses the same token and, as such, the hover style won't change anything.
// https://product-fabric.atlassian.net/browse/DSP-4441
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
var layoutSelectedStylesNotAdvanced = exports.layoutSelectedStylesNotAdvanced = (0, _react.css)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ProseMirror': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'[data-layout-section], .layoutSectionView-content-wrap': (0, _defineProperty2.default)({
// Shows the border when cursor is inside a layout
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'&.selected [data-layout-column], &:hover [data-layout-column]': {
border: "1px solid ".concat("var(--ds-border, #0B120E24)")
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'&.selected.danger [data-layout-column]': {
backgroundColor: "var(--ds-background-danger, #FFECEB)",
borderColor: "var(--ds-border-danger, #E2483D)"
}
}, "&.".concat(akEditorSelectedNodeClassName, ":not(.danger)"), {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
'[data-layout-column]': [
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
_selectionStyles.borderSelectionStyles,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
_selectionStyles.blanketSelectionStyles,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
_selectionStyles.hideNativeBrowserTextSelectionStyles, {
'::after': {
backgroundColor: 'transparent'
}
}]
})
}
});
// TODO: ED-28075 - inline rowSeparatorBaseStyles to unblock Compiled CSS migration
var rowSeparatorBaseStyles = (0, _react.css)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'[data-layout-content]::before': {
content: "''",
borderTop: "1px solid ".concat("var(--ds-border, #0B120E24)"),
position: 'absolute',
width: 'calc(100% - 32px)',
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
marginTop: -13,
// clear styles for column separator
borderLeft: 'unset',
marginLeft: 'unset',
height: 'unset'
}
});
/**
* Selected styles for layout when advanced layouts experiment is on
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
var layoutSelectedStylesAdvanced = exports.layoutSelectedStylesAdvanced = (0, _react.css)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ProseMirror': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'[data-layout-section], .layoutSectionView-content-wrap': (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, layoutSelectedSelector, {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
'[data-layout-column]:not(:first-of-type) [data-layout-content]::before': {
content: "''",
borderLeft: "1px solid ".concat("var(--ds-border, #0B120E24)"),
position: 'absolute',
height: 'calc(100% - 24px)',
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
marginLeft: -25
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
'[data-layout-column]:is([data-valign="middle"], [data-valign="bottom"]):not(:first-of-type) [data-layout-content]::before': {
top: "var(--ds-space-150, 12px)"
}
}), '&.selected.danger [data-layout-section]', {
backgroundColor: "var(--ds-background-danger, #FFECEB)",
boxShadow: "0 0 0 1px ".concat("var(--ds-border-danger, #E2483D)"),
borderRadius: "var(--ds-radius-small, 4px)"
}), "&.".concat(akEditorSelectedNodeClassName, ":not(.danger) [data-layout-section]"), {
boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, #1868DB)"),
borderRadius: "var(--ds-radius-small, 4px)",
backgroundColor: "var(--ds-background-selected, #E9F2FE)",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
'[data-layout-column]': [
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
_selectionStyles.blanketSelectionStyles,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
_selectionStyles.hideNativeBrowserTextSelectionStyles, {
border: 0,
'::before': {
backgroundColor: 'transparent'
}
}]
})
}
});
// Fix for layoutSelectedStylesAdvanced that addresses an issue where the delete indicator
// sometimes doesn't appear when inside a synced block.
// Separated as a distinct style to allow feature-gating without affecting module-level styles.
// This prevents style inconsistencies before the feature flag is initialized.
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
var layoutSelectedStylesAdvancedFix = exports.layoutSelectedStylesAdvancedFix = (0, _react.css)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ProseMirror': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'[data-layout-section], .layoutSectionView-content-wrap': (0, _defineProperty2.default)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'&.selected.danger [data-layout-section]': {
boxShadow: "inset 0 0 0 1px ".concat("var(--ds-border-danger, #E2483D)")
}
}, "&.".concat(akEditorSelectedNodeClassName, ":not(.danger) [data-layout-section]"), {
boxShadow: "inset 0 0 0 1px ".concat("var(--ds-border-selected, #1868DB)")
})
}
});
/**
* Base responsive styles for layout
*/
// jest warning: JSDOM version (22) doesn't support the new @container CSS rule
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
var layoutResponsiveBaseStyles = exports.layoutResponsiveBaseStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, selectorForNotResizedLayoutInFulllWidthEditor, (0, _defineProperty2.default)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'[data-layout-section]': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-container-queries
'@container editor-area (max-width:724px)': {
flexDirection: 'column'
}
}
}, layoutResponsiveSelectedSelector, {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
'[data-layout-column]:not(:first-of-type)': (0, _defineProperty2.default)({}, "@container editor-area (max-width:724px)", rowSeparatorBaseStyles)
})), selectorForNotResizedLayoutInFixedWidthEditor, (0, _defineProperty2.default)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'[data-layout-section]': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-container-queries
'@container editor-area (max-width:788px)': {
flexDirection: 'column'
}
}
}, layoutResponsiveSelectedSelector, {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
'[data-layout-column]:not(:first-of-type)': (0, _defineProperty2.default)({}, "@container editor-area (max-width:788px)", rowSeparatorBaseStyles)
})), selectorForResizedLayoutInFullOrFixedWidthEditor, (0, _defineProperty2.default)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'[data-layout-section]': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-container-queries
'@container editor-area (max-width:820px)': {
flexDirection: 'column'
}
}
}, layoutResponsiveSelectedSelector, {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
'[data-layout-column]:not(:first-of-type)': (0, _defineProperty2.default)({}, "@container editor-area (max-width:820px)", rowSeparatorBaseStyles)
})));
/**
* Responsive styles for layout in view mode
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
var layoutResponsiveStylesForView = exports.layoutResponsiveStylesForView = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, selectorForNotResizedLayoutInFulllWidthEditor, (0, _defineProperty2.default)({}, layoutResponsiveSelectedSelector, {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
'[data-layout-column]:not(:first-of-type)': (0, _defineProperty2.default)({}, "@container editor-area (max-width:724px)", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'[data-layout-content]::before': {
borderTop: 0
}
})
})), selectorForNotResizedLayoutInFixedWidthEditor, (0, _defineProperty2.default)({}, layoutResponsiveSelectedSelector, {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
'[data-layout-column]:not(:first-of-type)': (0, _defineProperty2.default)({}, "@container editor-area (max-width:788px)", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'[data-layout-content]::before': {
borderTop: 0
}
})
})), selectorForResizedLayoutInFullOrFixedWidthEditor, (0, _defineProperty2.default)({}, layoutResponsiveSelectedSelector, {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
'[data-layout-column]:not(:first-of-type)': (0, _defineProperty2.default)({}, "@container editor-area (max-width:820px)", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'[data-layout-content]::before': {
borderTop: 0
}
})
})));
/**
* Base styles for layout
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Needs manual remediation
var layoutBaseStyles = exports.layoutBaseStyles = (0, _react.css)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-nested-selectors
'.ProseMirror': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'[data-layout-section]': {
margin: "var(--ds-space-100, 8px)".concat(" -12px 0"),
transition: 'border-color 0.3s cubic-bezier(0.15, 1, 0.3, 1)',
cursor: 'pointer',
// Inner cursor located 26px from left
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'[data-layout-column]': {
flex: 1,
position: 'relative',
minWidth: 0,
/* disable 4 borders when in view mode and advanced layouts is on */
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, #0B120E24)"),
borderRadius: "var(--ds-radius-small, 4px)",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
padding: "var(--ds-space-150, 12px)",
boxSizing: 'border-box',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'> div': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
'> .embedCardView-content-wrap:first-of-type .rich-media-item': {
marginTop: 0
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
'> .mediaSingleView-content-wrap:first-of-type .rich-media-item': {
marginTop: 0
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
'> .ProseMirror-gapcursor.-right:first-child + .mediaSingleView-content-wrap .rich-media-item, > style:first-child + .ProseMirror-gapcursor.-right + .mediaSingleView-content-wrap .rich-media-item, > .ProseMirror-gapcursor.-right:first-of-type + .embedCardView-content-wrap .rich-media-item': {
marginTop: 0
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
'> .ProseMirror-gapcursor:first-child + span + .mediaSingleView-content-wrap .rich-media-item, > style:first-child + .ProseMirror-gapcursor + span + .mediaSingleView-content-wrap .rich-media-item': {
marginTop: 0
},
// Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down and shrinking layout's node selectable area (leniency margin)
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
"> [data-node-type='decisionList']": {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
'li:first-of-type [data-decision-wrapper]': {
marginTop: 0
}
}
},
// Make the 'content' fill the entire height of the layout column to allow click handler of layout section nodeview to target only data-layout-column
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'[data-layout-content]': {
height: '100%',
cursor: 'text',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.mediaGroupView-content-wrap': {
clear: 'both'
}
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'&[data-valign="middle"], &[data-valign="bottom"]': {
display: 'flex',
flexDirection: 'column'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'&[data-valign="middle"]': {
justifyContent: 'center'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'&[data-valign="bottom"]': {
justifyContent: 'flex-end'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'&[data-valign="middle"] > [data-layout-content], &[data-valign="bottom"] > [data-layout-content]': {
height: 'auto'
}
}
}
},
// hide separator when element is dragging on top of a layout column
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'[data-blocks-drop-target-container] ~ [data-layout-column] > [data-layout-content]::before': {
display: 'none'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.fabric-editor--full-width-mode .ProseMirror': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'[data-layout-section]': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.pm-table-container': {
margin: '0 2px'
}
}
}
});
// on exp 'platform_editor_table_excerpts_fix' cleanup, merge this style to the one above
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Needs manual remediation
var layoutBaseStylesWithTableExcerptsFix = exports.layoutBaseStylesWithTableExcerptsFix = (0, _react.css)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-nested-selectors
'.ProseMirror': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'[data-layout-section]': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'[data-layout-column]': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'> div': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.pm-table-container': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
width: '100% !important'
}
}
}
}
}
});
/**
* Base styles overrides for layout columns when advanced layouts experiment is on
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
var layoutBaseStylesAdvanced = exports.layoutBaseStylesAdvanced = (0, _react.css)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ProseMirror [data-layout-section] [data-layout-column]': {
border: 0
}
});
/**
* Spacing overrides when platform_editor_nested_dnd_styles_changes is on
*/
// TODO: EDF-123 - Migrate away from gridSize
// Recommendation: Replace directly with 7px
// Ignored via go/ees007
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
var layoutBaseStylesFixesUnderNestedDnDFG = exports.layoutBaseStylesFixesUnderNestedDnDFG = (0, _react.css)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ProseMirror [data-layout-section]': {
margin: "var(--ds-space-100, 8px)".concat(" -20px 0")
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ProseMirror [data-layout-section] [data-layout-column]': {
padding: '12px 20px'
}
});
/**
* Spacing overrides when platform_editor_nested_dnd_styles_changes is on,
* excluding layouts inside bodied sync blocks
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
var layoutBaseStylesFixesUnderNestedDnDFGExcludingBodiedSync = exports.layoutBaseStylesFixesUnderNestedDnDFGExcludingBodiedSync = (0, _react.css)({
// Apply -20px margin to all sections
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ProseMirror [data-layout-section]': {
margin: "var(--ds-space-100, 8px)".concat(" -20px 0")
},
// Reset to default margin when inside bodied sync block
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ProseMirror [data-prosemirror-node-name="bodiedSyncBlock"] [data-layout-section]': {
margin: "var(--ds-space-100, 8px)".concat(" -12px 0")
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ProseMirror [data-layout-section] [data-layout-column]': {
padding: '12px 20px'
}
});
/**
* Layout in view mode styles for selected state when advanced layouts experiment is on.
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Needs manual remediation
var layoutSelectedStylesForViewAdvanced = exports.layoutSelectedStylesForViewAdvanced = (0, _react.css)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ProseMirror': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-nested-selectors
'[data-layout-section], .layoutSectionView-content-wrap': (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, layoutSelectedSelector, {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
'[data-layout-column]:not(:first-of-type) [data-layout-content]::before': {
borderLeft: 0
}
}), '&.selected.danger [data-layout-section]', {
boxShadow: "0 0 0 0 ".concat("var(--ds-border-danger, #E2483D)")
}), "&.".concat(akEditorSelectedNodeClassName, ":not(.danger) [data-layout-section]"), {
boxShadow: "0 0 0 0 ".concat("var(--ds-border-selected, #1868DB)")
})
}
});
/**
* Layout in view mode styles for selected state when advanced layouts experiment is off.
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
var layoutSelectedStylesForViewNotAdvanced = exports.layoutSelectedStylesForViewNotAdvanced = (0, _react.css)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ProseMirror': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-nested-selectors
'[data-layout-section], .layoutSectionView-content-wrap': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'&.selected [data-layout-column], &:hover [data-layout-column]': {
border: 0
}
}
}
});
/*
* Layout in view mode styles, overrides over layout base styles
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Needs manual remediation
var layoutStylesForView = exports.layoutStylesForView = (0, _react.css)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ProseMirror': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'[data-layout-section]': {
cursor: 'default',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'[data-layout-column]': {
border: 0
}
}
}
});
/*
* marginTop fixes when platform_editor_nested_dnd_styles_changes is on
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
var layoutColumnMartinTopFixesNew = exports.layoutColumnMartinTopFixesNew = (0, _react.css)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ProseMirror [data-layout-section] [data-layout-column] > div': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
'> :nth-child(1 of :not(style, .ProseMirror-gapcursor, .ProseMirror-widget, span))': {
marginTop: 0
}
}
});
/*
* marginTop fixes when platform_editor_nested_dnd_styles_changes is off
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
var layoutColumnMartinTopFixesOld = exports.layoutColumnMartinTopFixesOld = (0, _react.css)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ProseMirror [data-layout-section] [data-layout-column] > div': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
'> :not(style):first-child, > style:first-child + *': {
marginTop: 0
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
'> .ProseMirror-gapcursor:first-child + *, > style:first-child + .ProseMirror-gapcursor + *': {
marginTop: 0
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
'> .ProseMirror-gapcursor:first-child + span + *': {
marginTop: 0
}
}
});