@atlaskit/editor-core
Version:
A package contains Atlassian editor core functionality
813 lines (789 loc) • 40.1 kB
JavaScript
/* eslint-disable @atlaskit/ui-styling-standard/use-compiled */
import { css } from '@emotion/react';
import { blanketSelectionStyles, borderSelectionStyles, hideNativeBrowserTextSelectionStyles } from './selectionStyles';
const gridMediumMaxWidth = 1024;
const akEditorSelectedNodeClassName = 'ak-editor-selected-node';
// Class names for the column resize divider widget — must stay in sync with main.ts in editor-plugin-layout
const layoutColumnDividerClassName = 'layout-column-divider';
const layoutColumnDividerRailClassName = 'layout-column-divider-rail';
const 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
export const layoutColumnDividerStyles = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
[`.${layoutColumnDividerClassName}`]: {
// 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',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
[`&:hover .${layoutColumnDividerRailClassName}`]: {
background: "var(--ds-background-selected, #E9F2FE)"
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
[`&:hover .${layoutColumnDividerThumbClassName}`]: {
background: "var(--ds-border-focused, #4688EC)"
}
},
// Rail and thumb styles intentionally mirror the breakout resize handle
// (see .pm-breakout-resize-handle-rail and .pm-breakout-resize-handle-thumb in resizerStyles.ts).
// If updating these styles, consider keeping both in sync.
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
[`.${layoutColumnDividerRailClassName}`]: {
width: 7,
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
borderRadius: "var(--ds-radius-small, 4px)",
transition: 'background-color 0.2s',
pointerEvents: 'none'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
[`.${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
export const layoutColumnDividerStylesNestedDnD = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
[`.${layoutColumnDividerClassName}`]: {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
marginInline: '0 -7px'
}
});
const selectorForNotResizedLayoutInFulllWidthEditor = '.fabric-editor--full-width-mode .ProseMirror > .layoutSectionView-content-wrap';
const selectorForNotResizedLayoutInFixedWidthEditor = '.ak-editor-content-area:not(.fabric-editor--full-width-mode) .ProseMirror > .layoutSectionView-content-wrap';
const selectorForResizedLayoutInFullOrFixedWidthEditor = '.ProseMirror .fabric-editor-breakout-mark .layoutSectionView-content-wrap';
const layoutResponsiveSelectedSelector = `&.selected, &:hover, &.selected.danger, &.${akEditorSelectedNodeClassName}:not(.danger)`;
const layoutSelectedSelector = `&.selected, [data-empty-layout='true'], &:hover, &.selected.danger [data-layout-section], &.${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
export const layoutColumnStylesAdvanced = 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]': {
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
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
[`@media screen and (max-width: ${gridMediumMaxWidth}px)`]: {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'[data-layout-column] + [data-layout-column]': {
margin: 0
}
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
[`> [data-layout-column].${akEditorSelectedNodeClassName}:not(.danger)`]: [
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
blanketSelectionStyles,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
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
export const layoutColumnResizeStyles = 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
export const layoutColumnStylesNotAdvanced = 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] + [data-layout-column]': {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
marginLeft: 8
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
[`@media screen and (max-width: ${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
export const layoutColumnResponsiveStyles = 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
export const layoutSectionStylesAdvanced = css({
// 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': {
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'
}
},
// Column resize divider: always in DOM, hidden via opacity by default
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
[`&.${layoutColumnDividerClassName}`]: {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
display: 'block !important',
flex: 'none',
opacity: 0,
transition: 'opacity 0.2s'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'& + [data-layout-column]': {
margin: 0
}
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'> [data-layout-column]': {
margin: 0
}
},
// On hover: fade in drag divider and hide the 1px separator
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
[`.ProseMirror .layoutSectionView-content-wrap:hover .layout-section-container [data-layout-section]`]: {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
[`> .ProseMirror-widget.${layoutColumnDividerClassName}`]: {
opacity: 1
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
[`> .ProseMirror-widget.${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
export const layoutSectionStylesNotAdvanced = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'.ProseMirror [data-layout-section]': {
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'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
[`& > .${layoutColumnDividerClassName}`]: {
flex: 'none'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
[`@media screen and (max-width: ${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
export const layoutSelectedStylesNotAdvanced = 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': {
// 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 ${"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)"
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
[`&.${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
borderSelectionStyles,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
blanketSelectionStyles,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
hideNativeBrowserTextSelectionStyles, {
'::after': {
backgroundColor: 'transparent'
}
}]
}
}
}
});
// TODO: ED-28075 - inline rowSeparatorBaseStyles to unblock Compiled CSS migration
const rowSeparatorBaseStyles = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'[data-layout-content]::before': {
content: "''",
borderTop: `1px solid ${"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
export const layoutSelectedStylesAdvanced = 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': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
[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 ${"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)"
}
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'&.selected.danger [data-layout-section]': {
backgroundColor: "var(--ds-background-danger, #FFECEB)",
boxShadow: `0 0 0 1px ${"var(--ds-border-danger, #E2483D)"}`,
borderRadius: "var(--ds-radius-small, 4px)"
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
[`&.${akEditorSelectedNodeClassName}:not(.danger) [data-layout-section]`]: {
boxShadow: `0 0 0 1px ${"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
blanketSelectionStyles,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
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
export const layoutSelectedStylesAdvancedFix = 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': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'&.selected.danger [data-layout-section]': {
boxShadow: `inset 0 0 0 1px ${"var(--ds-border-danger, #E2483D)"}`
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
[`&.${akEditorSelectedNodeClassName}:not(.danger) [data-layout-section]`]: {
boxShadow: `inset 0 0 0 1px ${"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
export const layoutResponsiveBaseStyles = css({
// chosen breakpoints in container queries are to make sure layout responsiveness in editor aligns with renderer
// not resized layout in full-width editor
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
[selectorForNotResizedLayoutInFulllWidthEditor]: {
// 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'
}
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
[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)': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-container-queries,@atlaskit/ui-styling-standard/no-unsafe-values
[`@container editor-area (max-width:724px)`]: rowSeparatorBaseStyles
}
}
},
// not resized layout in fixed-width editor
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
[selectorForNotResizedLayoutInFixedWidthEditor]: {
// 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'
}
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
[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)': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-container-queries,@atlaskit/ui-styling-standard/no-unsafe-values
[`@container editor-area (max-width:788px)`]: rowSeparatorBaseStyles
}
}
},
// resized layout in full/fixed-width editor
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
[selectorForResizedLayoutInFullOrFixedWidthEditor]: {
// 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'
}
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
[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)': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-container-queries,@atlaskit/ui-styling-standard/no-unsafe-values
[`@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
export const layoutResponsiveStylesForView = css({
// chosen breakpoints in container queries are to make sure layout responsiveness in editor aligns with renderer
// not resized layout in full-width editor
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
[selectorForNotResizedLayoutInFulllWidthEditor]: {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
[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)': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-container-queries,@atlaskit/ui-styling-standard/no-unsafe-values
[`@container editor-area (max-width:724px)`]: {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'[data-layout-content]::before': {
borderTop: 0
}
}
}
}
},
// not resized layout in fixed-width editor
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
[selectorForNotResizedLayoutInFixedWidthEditor]: {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
[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)': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-container-queries,@atlaskit/ui-styling-standard/no-unsafe-values
[`@container editor-area (max-width:788px)`]: {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'[data-layout-content]::before': {
borderTop: 0
}
}
}
}
},
// resized layout in full/fixed-width editor
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
[selectorForResizedLayoutInFullOrFixedWidthEditor]: {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
[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)': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-container-queries,@atlaskit/ui-styling-standard/no-unsafe-values
[`@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
export const layoutBaseStyles = 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)"} -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)"} 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
export const layoutBaseStylesWithTableExcerptsFix = 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
export const layoutBaseStylesAdvanced = 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
export const layoutBaseStylesFixesUnderNestedDnDFG = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ProseMirror [data-layout-section]': {
margin: `${"var(--ds-space-100, 8px)"} -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
export const layoutBaseStylesFixesUnderNestedDnDFGExcludingBodiedSync = 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)"} -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)"} -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
export const layoutSelectedStylesForViewAdvanced = 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-unsafe-values, @atlaskit/ui-styling-standard/no-nested-selectors
[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
}
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'&.selected.danger [data-layout-section]': {
boxShadow: `0 0 0 0 ${"var(--ds-border-danger, #E2483D)"}`
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values,@atlaskit/ui-styling-standard/no-nested-selectors
[`&.${akEditorSelectedNodeClassName}:not(.danger) [data-layout-section]`]: {
boxShadow: `0 0 0 0 ${"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
export const layoutSelectedStylesForViewNotAdvanced = 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
export const layoutStylesForView = 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
export const layoutColumnMartinTopFixesNew = 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
export const layoutColumnMartinTopFixesOld = 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
}
}
});