@atlaskit/renderer
Version:
Renderer component
1,108 lines (1,100 loc) • 132 kB
JavaScript
/* eslint-disable @atlaskit/ui-styling-standard/no-important-styles, @atlaskit/ui-styling-standard/no-unsafe-selectors */
/* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values */
/* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values */
/**
* @jsxRuntime classic
* @jsx jsx
*/
// eslint-disable-next-line @typescript-eslint/consistent-type-imports, @atlaskit/ui-styling-standard/use-compiled -- emotion jsx pragma; go/DSP-18766
import { css, jsx } from '@emotion/react'; // oxlint-ignore @typescript-eslint/consistent-type-imports -- classic @jsx jsx factory + jsx.JSX.Element types
import { FullPagePadding } from './style';
import { fg } from '@atlaskit/platform-feature-flags';
import { RendererCssClassName } from '../../consts';
import { akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorFullPageNarrowBreakout, akEditorGutterPaddingReduced, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorMaxWidthLayoutWidth, akEditorGutterPadding, akEditorLineHeight, akEditorSelectedNodeClassName, akEditorShadowZIndex, akEditorStickyHeaderZIndex, akEditorTableCellMinWidth, akEditorTableNumberColumnWidth, blockNodesVerticalMargin, scaledBlockNodesVerticalMargin, gridMediumMaxWidth, akEditorFullPageDefaultFontSize, akEditorFullPageDenseFontSize } from '@atlaskit/editor-shared-styles';
import { INLINE_IMAGE_WRAPPER_CLASS_NAME } from '@atlaskit/editor-common/media-inline';
import { HeadingAnchorWrapperClassName } from '../../react/nodes/heading-anchor';
import { CodeBlockSharedCssClassName, DateSharedCssClassName, listItemCounterPadding, richMediaClassName, SmartCardSharedCssClassName, tableCellBorderWidth, tableCellMinWidth, tableCellPadding, tableMarginTop, TableSharedCssClassName, TaskDecisionSharedCssClassName } from '@atlaskit/editor-common/styles';
import { bulletListSelector, orderedListSelector } from '@atlaskit/adf-schema';
import { shadowClassNames, shadowObserverClassNames } from '@atlaskit/editor-common/ui';
import { getBrowserInfo } from '@atlaskit/editor-common/browser';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
import { isStickyScrollbarEnabled, isTableResizingEnabled } from '../../react/nodes/table';
import { SORTABLE_COLUMN_ICON_CLASSNAME } from '@atlaskit/editor-common/table';
import { LightWeightCodeBlockCssClassName } from '../../react/nodes/codeBlock/components/lightWeightCodeBlock';
import { editorUGCToken } from '@atlaskit/editor-common/ugc-tokens';
import { getBaseFontSize } from './get-base-font-size';
import { EmojiSharedCssClassName, defaultEmojiHeight, defaultDenseEmojiHeight, defaultInlineEmojiHeight, scaledEmojiHeightH1, scaledEmojiHeightH2, scaledEmojiHeightH3, scaledEmojiHeightH4, denseEmojiHeightH1, denseEmojiHeightH2, denseEmojiHeightH3, denseEmojiHeightH4 } from '@atlaskit/editor-common/emoji';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
import { BodiedSyncBlockSharedCssClassName, SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
const wrappedMediaBreakoutPoint = 410;
const TELEPOINTER_ID = 'ai-streaming-telepointer';
const tableShadowWidth = 32;
const LAYOUT_BREAKPOINT_RENDERER = 629;
// originally defined from packages/editor/editor-plugin-table/src/ui/common-styles.ts
// Temporarily ignoring the below the owning team can add the ticket number for the TODO. Context: https://atlassian.slack.com/archives/CPUEVD9MY/p1741565387326829
// eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
// TODO: tableRowHeight can be moved into `@atlaskit/editor-common/table`
const tableRowHeight = 44;
const isBackgroundClipBrowserFixNeeded = () => {
const browser = getBrowserInfo();
return browser.isGecko || browser.isIE || browser.isMac && browser.isChrome;
};
const baseFontStyle = css({
font: editorUGCToken('editor.font.body')
});
const fontSizeStyles = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.fabric-editor-font-size': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
"&[data-font-size='small']": {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
font: 'var(--ak-renderer-editor-font-small-text)'
}
},
// Apply font-size to the ::marker pseudo-element of list items that have a font-size mark.
// Targeting ::marker directly avoids setting font on the <li> itself, which would cascade
// into nested lists and compound the sizing at each nesting level.
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
"li:has(> .fabric-editor-font-size[data-font-size='small'])::marker": {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
font: 'var(--ak-renderer-editor-font-small-text)'
}
});
const originalBaseFontLineHeight = css({
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: '1.5rem'
});
// styles are copied from ./style.tsx
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/design-system/consistent-css-prop-usage
const baseStyles = css({
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
fontSize: 'var(--ak-renderer-base-font-size)',
color: "var(--ds-text, #292A2E)",
'--ak-editor--full-width-layout-width': `${akEditorFullWidthLayoutWidth}px`,
[`.${RendererCssClassName.DOCUMENT}::after`]: {
// we add a clearfix after ak-renderer-document in order to
// contain internal floats (such as media images that are "wrap-left")
// to just the renderer (and not spill outside of it)
content: '""',
visibility: 'hidden',
display: 'block',
height: 0,
clear: 'both'
},
[`.${RendererCssClassName.DOCUMENT}`]: {
// p, h3, and action items
[`.${INLINE_IMAGE_WRAPPER_CLASS_NAME}`]: {
height: '22px',
transform: `translateY(-2px)`
},
h1: {
[`> .mediaInlineView-content-wrap > .${INLINE_IMAGE_WRAPPER_CLASS_NAME},
> :is(a, span[data-mark-type='border']) .mediaInlineView-content-wrap > .${INLINE_IMAGE_WRAPPER_CLASS_NAME},
> .${INLINE_IMAGE_WRAPPER_CLASS_NAME},
> :is(a, span[data-mark-type='border']) .${INLINE_IMAGE_WRAPPER_CLASS_NAME}`]: {
height: '36px',
transform: `translateY(-3px)`
}
},
h2: {
[`> .mediaInlineView-content-wrap > .${INLINE_IMAGE_WRAPPER_CLASS_NAME},
> :is(a, span[data-mark-type='border']) .mediaInlineView-content-wrap > .${INLINE_IMAGE_WRAPPER_CLASS_NAME},
> .${INLINE_IMAGE_WRAPPER_CLASS_NAME},
> :is(a, span[data-mark-type='border']) .${INLINE_IMAGE_WRAPPER_CLASS_NAME}`]: {
height: '31px',
transform: `translateY(-3px)`
}
},
h3: {
[`> .mediaInlineView-content-wrap > .${INLINE_IMAGE_WRAPPER_CLASS_NAME},
> :is(a, span[data-mark-type='border']) .mediaInlineView-content-wrap > .${INLINE_IMAGE_WRAPPER_CLASS_NAME},
> .${INLINE_IMAGE_WRAPPER_CLASS_NAME},
> :is(a, span[data-mark-type='border']) .${INLINE_IMAGE_WRAPPER_CLASS_NAME}`]: {
height: '25px',
transform: `translateY(-2px)`
}
},
h4: {
[`> .mediaInlineView-content-wrap > .${INLINE_IMAGE_WRAPPER_CLASS_NAME},
> :is(a, span[data-mark-type='border']) .mediaInlineView-content-wrap > .${INLINE_IMAGE_WRAPPER_CLASS_NAME},
> .${INLINE_IMAGE_WRAPPER_CLASS_NAME},
> :is(a, span[data-mark-type='border']) .${INLINE_IMAGE_WRAPPER_CLASS_NAME}`]: {
height: '23px',
transform: `translateY(-2px)`
}
},
h5: {
[`> .mediaInlineView-content-wrap > .${INLINE_IMAGE_WRAPPER_CLASS_NAME},
> :is(a, span[data-mark-type='border']) .mediaInlineView-content-wrap > .${INLINE_IMAGE_WRAPPER_CLASS_NAME},
> .${INLINE_IMAGE_WRAPPER_CLASS_NAME},
> :is(a, span[data-mark-type='border']) .${INLINE_IMAGE_WRAPPER_CLASS_NAME}`]: {
height: '20px',
transform: `translateY(-2px)`
}
},
h6: {
[`> .mediaInlineView-content-wrap > .${INLINE_IMAGE_WRAPPER_CLASS_NAME},
> :is(a, span[data-mark-type='border']) .mediaInlineView-content-wrap > .${INLINE_IMAGE_WRAPPER_CLASS_NAME},
> .${INLINE_IMAGE_WRAPPER_CLASS_NAME},
> :is(a, span[data-mark-type='border']) .${INLINE_IMAGE_WRAPPER_CLASS_NAME}`]: {
height: '18px',
transform: `translateY(-2px)`
}
}
},
[`& span.akActionMark`]: {
color: "var(--ds-link, #1868DB)",
textDecoration: 'none',
cursor: 'pointer',
'&:hover': {
color: "var(--ds-link, #1868DB)",
textDecoration: 'underline'
},
'&:active': {
color: "var(--ds-link-pressed, #1558BC)"
}
},
'& span[data-placeholder]': {
color: "var(--ds-text-subtlest, #6B6E76)"
}
});
const headingAnchorStylesDuplicateAnchor = css({
'& h1, & h2, & h3, & h4, & h5, & h6': {
[`.${HeadingAnchorWrapperClassName}`]: {
position: 'absolute',
marginLeft: "var(--ds-space-075, 6px)",
button: {
paddingLeft: 0,
paddingRight: 0
},
/**
* Adds the visibility of the button when in focus through keyboard navigation.
*/
'button:focus': {
opacity: 1,
transform: 'none !important'
}
},
[`@media (hover: hover) and (pointer: fine)`]: {
[`.${HeadingAnchorWrapperClassName}`]: {
'> button': {
opacity: 0,
transform: 'translate(-8px, 0px)',
transitionProperty: 'opacity, transform',
transitionDuration: `${"var(--ds-duration-medium, 0.2s)"}, ${"var(--ds-duration-medium, 0.2s)"}`,
transitionTimingFunction: `${"var(--ds-easing-out-practical, ease)"}, ${"var(--ds-easing-out-practical, ease)"}`,
transitionDelay: '0s, 0s'
}
},
'&:hover': {
[`.${HeadingAnchorWrapperClassName} > button`]: {
opacity: 1,
transform: 'none !important'
}
}
}
},
'& h1': {
[`.${HeadingAnchorWrapperClassName}`]: {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: `${28 / 24}em`
}
},
'& h2': {
[`.${HeadingAnchorWrapperClassName}`]: {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: `${24 / 20}em`
}
},
'& h3': {
[`.${HeadingAnchorWrapperClassName}`]: {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: `${20 / 16}em`
}
},
'& h4': {
[`.${HeadingAnchorWrapperClassName}`]: {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: `${16 / 14}em`
}
},
'& h5': {
[`.${HeadingAnchorWrapperClassName}`]: {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: `${16 / 12}em`
}
},
'& h6': {
[`.${HeadingAnchorWrapperClassName}`]: {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: `${16 / 11}em`
}
}
});
const headingAnchorStyles = css({
'& .renderer-heading-wrapper': {
[`.${HeadingAnchorWrapperClassName}`]: {
marginLeft: "var(--ds-space-075, 6px)",
button: {
paddingLeft: 0,
paddingRight: 0
},
/**
* Adds the visibility of the button when in focus through keyboard navigation.
*/
'button:focus': {
opacity: 1,
transform: 'none !important'
}
},
[`@media (hover: hover) and (pointer: fine)`]: {
[`.${HeadingAnchorWrapperClassName}`]: {
'> button': {
opacity: 0,
transform: `translate(-8px, 0px)`,
transition: `opacity 0.2s ease 0s, transform 0.2s ease 0s`
}
},
'&:hover': {
[`.${HeadingAnchorWrapperClassName} > button`]: {
opacity: 1,
transform: 'none !important'
}
}
}
},
// Line-height for heading anchor based on heading level (via data-level attribute on .renderer-heading-wrapper)
'& .renderer-heading-wrapper[data-level="1"]': {
[`.${HeadingAnchorWrapperClassName}`]: {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: `${28 / 24}em`
}
},
'& .renderer-heading-wrapper[data-level="2"]': {
[`.${HeadingAnchorWrapperClassName}`]: {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: `${24 / 20}em`
}
},
'& .renderer-heading-wrapper[data-level="3"]': {
[`.${HeadingAnchorWrapperClassName}`]: {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: `${20 / 16}em`
}
},
'& .renderer-heading-wrapper[data-level="4"]': {
[`.${HeadingAnchorWrapperClassName}`]: {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: `${16 / 14}em`
}
},
'& .renderer-heading-wrapper[data-level="5"]': {
[`.${HeadingAnchorWrapperClassName}`]: {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: `${16 / 12}em`
}
},
'& .renderer-heading-wrapper[data-level="6"]': {
[`.${HeadingAnchorWrapperClassName}`]: {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: `${16 / 11}em`
}
}
});
const headingAnchorButtonFocusVisibleStyles = css({
[`.${HeadingAnchorWrapperClassName}`]: {
'button:focus-visible': {
outline: `2px solid ${"var(--ds-border-focused, #4688EC)"}`,
borderRadius: "var(--ds-radius-small, 3px)"
}
}
});
const akEditorBreakpointForSmallDevice = '1266px';
const responsiveBreakoutWidth = css({
'--ak-editor--breakout-container-without-gutter-width': `calc(100cqw - ${akEditorGutterPadding}px * 2)`,
// Corresponds to the legacyContentStyles from `@atlaskit/editor-core` meant to introduce responsive breakout width.
'--ak-editor--breakout-wide-layout-width': `${akEditorCalculatedWideLayoutWidthSmallViewport}px`,
[`@media (min-width: ${akEditorBreakpointForSmallDevice})`]: {
'--ak-editor--breakout-wide-layout-width': `${akEditorCalculatedWideLayoutWidth}px`
}
});
const responsiveBreakoutWidthFullWidth = css({
'--ak-editor--breakout-container-without-gutter-width': '100cqw',
// Corresponds to the legacyContentStyles from `@atlaskit/editor-core` meant to introduce responsive breakout width.
'--ak-editor--breakout-wide-layout-width': `${akEditorCalculatedWideLayoutWidthSmallViewport}px`,
[`@media (min-width: ${akEditorBreakpointForSmallDevice})`]: {
'--ak-editor--breakout-wide-layout-width': `${akEditorCalculatedWideLayoutWidth}px`
}
});
const responsiveBreakoutWidthWithReducedPadding = css({
'--ak-editor--breakout-container-without-gutter-width': `calc(100cqw - var(--ak-renderer--full-page-gutter) * 2)`,
// Corresponds to the legacyContentStyles from `@atlaskit/editor-core` meant to introduce responsive breakout width.
'--ak-editor--breakout-wide-layout-width': `${akEditorCalculatedWideLayoutWidthSmallViewport}px`,
[`@media (min-width: ${akEditorBreakpointForSmallDevice})`]: {
'--ak-editor--breakout-wide-layout-width': `${akEditorCalculatedWideLayoutWidth}px`
},
[`@media (max-width: ${akEditorFullPageNarrowBreakout}px)`]: {
'--ak-editor--breakout-container-without-gutter-width': `calc(100cqw - var(--ak-renderer--full-page-gutter) * 2)`
}
});
const hideHeadingCopyLinkWrapperStylesDuplicateAnchor = css({
'& h1, & h2, & h3, & h4, & h5, & h6': {
[`.${HeadingAnchorWrapperClassName}`]: {
'&:focus-within': {
opacity: 1
}
},
[`@media (hover: hover) and (pointer: fine)`]: {
[`.${HeadingAnchorWrapperClassName}`]: {
opacity: 0,
transition: `opacity 0.2s ease 0s`
},
'&:hover': {
[`.${HeadingAnchorWrapperClassName}`]: {
opacity: 1
}
}
}
}
});
const hideHeadingCopyLinkWrapperStyles = css({
'& .renderer-heading-wrapper': {
[`.${HeadingAnchorWrapperClassName}`]: {
'&:focus-within': {
opacity: 1
}
},
[`@media (hover: hover) and (pointer: fine)`]: {
[`.${HeadingAnchorWrapperClassName}`]: {
opacity: 0,
transition: `opacity 0.2s ease 0s`
},
'&:hover': {
[`.${HeadingAnchorWrapperClassName}`]: {
opacity: 1
}
}
}
}
});
const rendererFullPageStyles = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
maxWidth: `${akEditorDefaultLayoutWidth}px`,
margin: '0 auto',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
padding: `0 ${FullPagePadding}px`
});
const rendererFullPageStylesWithReducedPadding = css({
'--ak-renderer--full-page-gutter': `${FullPagePadding}px`,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
maxWidth: `${akEditorDefaultLayoutWidth}px`,
margin: '0 auto',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
padding: `0 var(--ak-renderer--full-page-gutter)`,
[`@media (max-width: ${akEditorFullPageNarrowBreakout}px)`]: {
'--ak-renderer--full-page-gutter': `${akEditorGutterPaddingReduced}px`
}
});
const oldRendererFullWidthStyles = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
maxWidth: `${akEditorFullWidthLayoutWidth}px`,
margin: `0 auto`,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
'.fabric-editor-breakout-mark:not([data-has-width="true"]), .ak-renderer-extension': {
width: '100% !important'
}
});
const rendererFullWidthStyles = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
maxWidth: `${akEditorFullWidthLayoutWidth}px`,
margin: `0 auto`,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
'.fabric-editor-breakout-mark:not([data-has-width="true"])': {
width: '100% !important'
}
});
const oldRendererMaxWidthStyles = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
maxWidth: `${akEditorMaxWidthLayoutWidth}px`,
margin: `0 auto`,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
'.fabric-editor-breakout-mark:not([data-has-width="true"]), .ak-renderer-extension': {
width: '100% !important'
}
});
const rendererMaxWidthStyles = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
maxWidth: `${akEditorMaxWidthLayoutWidth}px`,
margin: `0 auto`,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
'.fabric-editor-breakout-mark:not([data-has-width="true"])': {
width: '100% !important'
}
});
const rendererFullWidthStylesForTableResizing = css({
'.pm-table-container': {
width: '100% !important'
}
});
const rovoTelepointerStyles = css({
[`#${TELEPOINTER_ID}`]: {
display: 'inline-block',
position: 'relative',
width: '1.5px',
height: '24px',
backgroundColor: "var(--ds-background-brand-bold, #1868DB)",
marginLeft: "var(--ds-space-025, 2px)",
'&::after': {
content: '""',
position: 'absolute',
display: 'block',
top: 0,
left: 0,
width: '31.5px',
height: '15.5px',
borderRadius: `0px ${"var(--ds-space-050, 4px)"} ${"var(--ds-space-050, 4px)"} 0px`,
background:
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography, @atlaskit/design-system/ensure-design-token-usage
'linear-gradient(to right, #1868db 0px, #1868db 1.5px, transparent 1.5px) 0 0 / 100% 100% no-repeat, conic-gradient(from 270deg at 50% 50%, #1868db 0deg, #1868db 115deg, #fca700 115deg, #fca700 180deg, #bf63f3 180deg, #bf63f3 310deg, #82b536 310deg, #82b536 359.96deg, #1868db 360deg)'
},
'&::before': {
content: '"Rovo"',
position: 'absolute',
fontFamily: "var(--ds-font-family-body, \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
fontWeight: "var(--ds-font-weight-semibold, 600)",
color: "var(--ds-text-inverse, #FFFFFF)",
backgroundColor: "var(--ds-text, #292A2E)",
top: 1,
left: 1,
borderRadius: `0px ${"var(--ds-space-050, 4px)"} ${"var(--ds-space-050, 4px)"} 0px`,
zIndex: 1,
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
fontSize: '10px',
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
padding: '0.5px 2.5px',
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: 'initial'
}
}
});
const whitespaceSharedStyles = css({
wordWrap: 'break-word',
whiteSpace: 'pre-wrap'
});
const blockquoteSharedStyles = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'& blockquote': {
boxSizing: 'border-box',
color: 'inherit',
width: '100%',
display: 'inline-block',
paddingLeft: "var(--ds-space-200, 16px)",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
borderLeft: `${"var(--ds-border-width-selected, 2px)"} solid ${"var(--ds-border, #0B120E24)"}`,
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
margin: `${blockNodesVerticalMargin} 0 0 0`,
marginRight: 0,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
"[dir='rtl'] &": {
paddingLeft: 0,
paddingRight: "var(--ds-space-200, 16px)"
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
'&:first-child': {
marginTop: 0
},
'&::before': {
content: "''"
},
'&::after': {
content: 'none'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'& p': {
display: 'block'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
'& table, & table:last-child': {
display: 'inline-table'
},
// Workaround for overriding the inline-block display on last child of a blockquote set in CSS reset.
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
'> .code-block:last-child, >.mediaSingleView-content-wrap:last-child, >.mediaGroupView-content-wrap:last-child': {
display: 'block'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
'> .extensionView-content-wrap:last-child': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
display: 'block'
}
}
});
const headingsSharedStyles = css({
'& h1': {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
font: `var(--ak-renderer-editor-font-heading-h1)`,
marginBottom: 0,
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
marginTop: '1.45833em',
'& strong': {
// set all heading bold style to token font.weight.bold, as not matter what typography is used, the editorUGCToken will return the font weight 700
fontWeight: "var(--ds-font-weight-bold, 653)"
},
'&::before': {}
},
'& h2': {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
font: `var(--ak-renderer-editor-font-heading-h2)`,
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
marginTop: '1.4em',
marginBottom: 0,
'& strong': {
// set all heading bold style to token font.weight.bold, as not matter what typography is used, the editorUGCToken will return the font weight 700
fontWeight: "var(--ds-font-weight-bold, 653)"
}
},
'& h3': {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
font: `var(--ak-renderer-editor-font-heading-h3)`,
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
marginTop: '1.31249em',
marginBottom: 0,
'& strong': {
// set all heading bold style to token font.weight.bold, as not matter what typography is used, the editorUGCToken will return the font weight 700
fontWeight: "var(--ds-font-weight-bold, 653)"
}
},
'& h4': {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
font: `var(--ak-renderer-editor-font-heading-h4)`,
marginTop: "var(--ds-space-250, 20px)",
'& strong': {
// set all heading bold style to token font.weight.bold, as not matter what typography is used, the editorUGCToken will return the font weight 700
fontWeight: "var(--ds-font-weight-bold, 653)"
}
},
'& h5': {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
font: `var(--ak-renderer-editor-font-heading-h5)`,
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
marginTop: '1.45833em',
textTransform: 'none',
'& strong': {
// set all heading bold style to token font.weight.bold, as not matter what typography is used, the editorUGCToken will return the font weight 700
fontWeight: "var(--ds-font-weight-bold, 653)"
}
},
'& h6': {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
font: `var(--ak-renderer-editor-font-heading-h6)`,
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
marginTop: '1.59091em',
textTransform: 'none',
'& strong': {
// set all heading bold style to token font.weight.bold, as not matter what typography is used, the editorUGCToken will return the font weight 700
fontWeight: "var(--ds-font-weight-bold, 653)"
}
}
});
/**
* When the copy-link a11y fix is enabled, the heading copy-link button is a sibling of the heading
* text within `.renderer-heading-wrapper`. To ensure the button sits immediately after the last
* rendered character (including when the heading wraps), the heading itself needs to participate in
* inline layout.
*
* Since inline elements don't support vertical margins in normal flow, we migrate the UGC heading
* `marginTop` values (from `headingsSharedStyles`) onto the wrapper.
*/
const headingWrapperInlineFlowStyles = css({
// Ensure heading and copy-link button participate in inline flow so the button sits after the final wrapped line of text.
'& .renderer-heading-wrapper > h1, & .renderer-heading-wrapper > h2, & .renderer-heading-wrapper > h3, & .renderer-heading-wrapper > h4, & .renderer-heading-wrapper > h5, & .renderer-heading-wrapper > h6': {
display: 'inline'
},
[`& .renderer-heading-wrapper > .${HeadingAnchorWrapperClassName}`]: {
display: 'inline',
verticalAlign: 'baseline'
},
'& .renderer-heading-wrapper[data-level="1"]': {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
marginTop: '1.45833em'
},
'& .renderer-heading-wrapper[data-level="2"]': {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
marginTop: '1.4em'
},
'& .renderer-heading-wrapper[data-level="3"]': {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
marginTop: '1.31249em'
},
'& .renderer-heading-wrapper[data-level="4"]': {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
marginTop: '1.25em'
},
'& .renderer-heading-wrapper[data-level="5"]': {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
marginTop: '1.45833em'
},
'& .renderer-heading-wrapper[data-level="6"]': {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
marginTop: '1.59091em'
}
});
const headingWithAlignmentStylesDuplicateAnchor = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
'.fabric-editor-block-mark.fabric-editor-alignment:not(:first-child)': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
'> h1:first-child': {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
marginTop: '1.667em'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
' > h2:first-child': {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
marginTop: '1.8em'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
'> h3:first-child': {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
marginTop: '2em'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
'> h4:first-child': {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
marginTop: '1.357em'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
'> h5:first-child': {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
marginTop: '1.667em'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
'> h6:first-child': {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
marginTop: '1.455em'
}
},
// Set marginTop: 0 if alignment block is next to a gap cursor or widget that is first child
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
'.ProseMirror-gapcursor:first-child + .fabric-editor-block-mark.fabric-editor-alignment, .ProseMirror-widget:first-child + .fabric-editor-block-mark.fabric-editor-alignment, .ProseMirror-widget:first-child + .ProseMirror-widget:nth-child(2) + .fabric-editor-block-mark.fabric-editor-alignment': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
'> :is(h1, h2, h3, h4, h5, h6):first-child': {
marginTop: '0'
}
}
});
const headingWithAlignmentStyles = css({
// Center alignment for heading wrapper - flex container needs justify-content instead of text-align
'.fabric-editor-block-mark[data-align="center"] > .renderer-heading-wrapper': {
justifyContent: 'center'
},
// Right/end alignment for heading wrapper - flex container needs justify-content instead of text-align
'.fabric-editor-block-mark[data-align="end"] > .renderer-heading-wrapper': {
justifyContent: 'flex-end'
},
// Set marginTop: 0 if alignment block is next to a gap cursor or widget that is first child
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
'.ProseMirror-gapcursor:first-child + .fabric-editor-block-mark.fabric-editor-alignment, .ProseMirror-widget:first-child + .fabric-editor-block-mark.fabric-editor-alignment, .ProseMirror-widget:first-child + .ProseMirror-widget:nth-child(2) + .fabric-editor-block-mark.fabric-editor-alignment': {
// With inline headings, apply marginTop to the wrapper (not the h1-h6).
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
'> .renderer-heading-wrapper:first-child': {
marginTop: 0
}
}
});
const ruleSharedStyles = css({
'& hr': {
border: 'none',
backgroundColor: "var(--ds-border, #0B120E24)",
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
margin: `${akEditorLineHeight}em 0`,
height: '2px',
borderRadius: "var(--ds-radius-full, 9999px)"
}
});
// When cleaning up `platform_editor_content_mode_button_mvp` simplify the name/ use the other paragraph style name
const paragraphSharedStylesWithEditorUGC = css({
'& p': {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
font: `var(--ak-renderer-editor-font-normal-text)`,
marginTop: blockNodesVerticalMargin,
marginBottom: 0
}
});
const paragraphStylesUGCScaledMargin = css({
'& p': {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
font: `var(--ak-renderer-editor-font-normal-text)`,
marginTop: scaledBlockNodesVerticalMargin,
marginBottom: 0
}
});
const paragraphSharedStyles = css({
'& p': {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
fontSize: '1em',
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: akEditorLineHeight,
fontWeight: "var(--ds-font-weight-regular, 400)",
marginTop: blockNodesVerticalMargin,
marginBottom: 0,
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
letterSpacing: '-0.005em'
}
});
// When cleaning up `platform_editor_content_mode_button_mvp` simplify the name/ use the other paragraph style name
const paragraphSharedStyleScaledMargin = css({
'& p': {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
fontSize: '1em',
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: akEditorLineHeight,
fontWeight: "var(--ds-font-weight-regular, 400)",
marginTop: scaledBlockNodesVerticalMargin,
marginBottom: 0,
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
letterSpacing: '-0.005em'
}
});
const listsSharedStyles = css({
/* =============== INDENTATION SPACING ========= */
'ul, ol': {
boxSizing: 'border-box',
paddingLeft: `var(--ed--list--item-counter--padding, ${listItemCounterPadding}px)`
},
[`${orderedListSelector}, ${bulletListSelector}`]: {
/*
Ensures list item content adheres to the list's margin instead
of filling the entire block row. This is important to allow
clicking interactive elements which are floated next to a list.
For some history and context on this block, see PRs related to tickets.:
@see ED-6551 - original issue.
@see ED-7015 - follow up issue.
@see ED-7447 - flow-root change.
used to have display: 'table' in tag template style but not supported in object styles
removed display: 'table' as 'flow-root' is supported in latest browsers
@see https://css-tricks.com/display-flow-root/
*/
display: 'flow-root'
},
/* =============== INDENTATION AESTHETICS ========= */
/**
We support nested lists up to six levels deep.
**/
/* LEGACY LISTS */
'ul, ul ul ul ul': {
listStyleType: 'disc'
},
'ul ul, ul ul ul ul ul': {
listStyleType: 'circle'
},
'ul ul ul, ul ul ul ul ul ul': {
listStyleType: 'square'
},
'ol, ol ol ol ol': {
listStyleType: 'decimal'
},
'ol ol, ol ol ol ol ol': {
listStyleType: 'lower-alpha'
},
'ol ol ol, ol ol ol ol ol ol': {
listStyleType: 'lower-roman'
},
/* PREDICTABLE LISTS */
'ol[data-indent-level="1"], ol[data-indent-level="4"]': {
listStyleType: 'decimal'
},
'ol[data-indent-level="2"], ol[data-indent-level="5"]': {
listStyleType: 'lower-alpha'
},
'ol[data-indent-level="3"], ol[data-indent-level="6"]': {
listStyleType: 'lower-roman'
},
'ul[data-indent-level="1"], ul[data-indent-level="4"]': {
listStyleType: 'disc'
},
'ul[data-indent-level="2"], ul[data-indent-level="5"]': {
listStyleType: 'circle'
},
'ul[data-indent-level="3"], ul[data-indent-level="6"]': {
listStyleType: 'square'
}
});
/*
Firefox does not handle empty block element inside li tag.
If there is not block element inside li tag,
then firefox sets inherited height to li
However, if there is any block element and if it's empty
(or has empty inline element) then
firefox sets li tag height to zero.
More details at
https://product-fabric.atlassian.net/wiki/spaces/~455502413/pages/3149365890/ED-14110+Investigation
*/
const listsSharedStylesForGekko = css({
'ul, ol': {
'li p:empty, li p > span:empty': {
display: 'inline-block'
}
}
});
/**
* Hides list markers for "wrapper items" - list items that only contain nested lists with no other content.
* These wrapper items have no meaningful content themselves, only nested lists below.
* Applied when platform_editor_flexible_list_schema experiment is enabled.
*/
const listItemHiddenMarkerStyles = css({
// Hide markers and remove spacing for wrapper list items (items containing only nested lists)
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
'li:has(> ul:only-child), li:has(> ol:only-child)': {
listStyleType: 'none',
marginTop: 0,
marginBottom: 0
},
// Remove margin from nested lists inside wrapper list items to avoid double spacing
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
'li:has(> ul:only-child) > ul, li:has(> ol:only-child) > ol': {
marginTop: 0
},
// Remove top margin from nested taskLists not preceded by a sibling taskItem
'div[data-task-list-local-id] > div[data-task-list-local-id]': {
marginTop: 0
},
// Restore margin when a nested taskList follows a taskItem
'div[data-task-local-id] + div[data-task-list-local-id]': {
marginTop: "var(--ds-space-050, 4px)"
}
});
const indentationSharedStyles = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'.fabric-editor-indentation-mark': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
"&[data-level='1']": {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
marginLeft: '30px'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
"&[data-level='2']": {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
marginLeft: '60px'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
"&[data-level='3']": {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
marginLeft: '90px'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
"&[data-level='4']": {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
marginLeft: '120px'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
"&[data-level='5']": {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
marginLeft: '150px'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
"&[data-level='6']": {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
marginLeft: '180px'
}
}
});
const indentationSharedStylesWithMarginFix = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'.fabric-editor-indentation-mark': {
// Prevent marginTop of p:first-child overrode by batch.css
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
'p:first-child': {
marginTop: blockNodesVerticalMargin
}
}
});
const blockMarksSharedStylesDuplicateAnchor = css({
/**
* We need to remove margin-top from first item
* inside doc, tableCell, tableHeader, blockquote, etc.
*/
[`*:not(.fabric-editor-block-mark) >,
*:not(.fabric-editor-block-mark) >
div.fabric-editor-block-mark:first-of-type
:not(.fabric-editor-indentation-mark)
:not(.fabric-editor-alignment),
.fabric-editor-alignment:first-of-type:first-child,
.fabric-editor-font-size:first-of-type:first-child,
.ProseMirror .fabric-editor-indentation-mark:first-of-type:first-child`]: {
'p, h1, h2, h3, h4, h5, h6, .heading-wrapper': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
':first-child:not(style), style:first-child + *': {
marginTop: 0
}
}
}
});
const blockMarksSharedStyles = css({
/**
* We need to remove margin-top from first item
* inside doc, tableCell, tableHeader, blockquote, etc.
*/
[`*:not(.fabric-editor-block-mark) >,
*:not(.fabric-editor-block-mark) >
div.fabric-editor-block-mark:first-of-type
:not(.fabric-editor-indentation-mark)
:not(.fabric-editor-alignment),
.fabric-editor-alignment:first-of-type:first-child,
.fabric-editor-font-size:first-of-type:first-child,
.ProseMirror .fabric-editor-indentation-mark:first-of-type:first-child`]: {
'p, .heading-wrapper': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
':first-child:not(style), style:first-child + *': {
marginTop: 0
}
},
'.renderer-heading-wrapper': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
':first-child:not(style), style:first-child + *': {
'h1, h2, h3, h4, h5, h6': {
marginTop: 0
}
}
}
}
});
const codeMarkSharedStyles = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'.code': {
'--ds--code--bg-color': "var(--ds-background-neutral, #0515240F)",
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
fontSize: '0.875em',
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
fontFamily: "var(--ds-font-family-code, \"Atlassian Mono\", ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
fontWeight: "var(--ds-font-weight-regular, 400)",
backgroundColor: `var(--ds--code--bg-color,${"var(--ds-background-neutral, #0515240F)"})`,
color: "var(--ds-text, #292A2E)",
borderStyle: 'none',
borderRadius: "var(--ds-radius-small, 3px)",
display: 'inline',
padding: '2px 0.5ch',
boxDecorationBreak: 'clone',
overflow: 'auto',
overflowWrap: 'break-word',
whiteSpace: 'pre-wrap'
}
});
const extensionStyle = css({
// Sets fontSize of extensions to match base font size which scales with the renderer contentMode prop
// exceptions:
// - nested renderers - bodied extensions have nested renderers adopt the contentMode prop themselves so should not be touched
// - legacy status lozenge - some extensions use the .aui-lozenge class for a legacy status lozenge and is not designed to scale
// - .ak-renderer-extension .ak-renderer-document .ak-renderer-extension:not(:has(.ak-renderer-document)) :not(.aui-lozenge, .status-lozenge-span *)
// extensions inside extension documents (like ones with their own renderer) will need the font size to be applied again (e.g. TOC inside Excerpt, or TOC inside Page Properties inside LCM inside table)
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
'.ak-renderer-extension :not(.ak-renderer-extension .ak-renderer-document *, .aui-lozenge, .status-lozenge-span *), .ak-renderer-extension .ak-renderer-document .ak-renderer-extension:not(:has(.ak-renderer-document)) :not(.aui-lozenge, .status-lozenge-span *)': {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
fontSize: 'var(--ak-renderer-base-font-size)'
}
});
const oldExtensionAsInlineStyle = css({
[`.${RendererCssClassName.DOCUMENT} [data-as-inline="on"]`]: {
display: 'inline-block'
},
[`.${RendererCssClassName.DOCUMENT} .${RendererCssClassName.EXTENSION_AS_INLINE}`]: {
display: 'inline-block',
// use !important here because the current width has !important applied to it and it's not working when used in React style prop
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
width: 'auto !important',
marginTop: 0
},
[`.${RendererCssClassName.EXTENSION_AS_INLINE} .${RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER}`]: {
display: 'inline-block',
overflowX: 'visible',
containerType: 'normal'
},
[`.${RendererCssClassName.EXTENSION_AS_INLINE} .${RendererCssClassName.EXTENSION_INNER_WRAPPER}`]: {
display: 'inline-block'
}
});
const extensionAsInlineStyle = css({
[`.${RendererCssClassName.DOCUMENT} [data-as-inline="on"]`]: {
display: 'inline-block'
},
[`.${RendererCssClassName.DOCUMENT} .${RendererCssClassName.EXTENSION_AS_INLINE}`]: {
display: 'inline-block',
width: 'auto',
marginTop: 0
},
[`.${RendererCssClassName.EXTENSION_AS_INLINE} .${RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER}`]: {
display: 'inline-block',
overflowX: 'visible',
containerType: 'normal'
},
[`.${RendererCssClassName.EXTENSION_AS_INLINE} .${RendererCssClassName.EXTENSION_INNER_WRAPPER}`]: {
display: 'inline-block'
}
});
// Removes the blockNodesVerticalMargin styling for inline extensions, i.e. borderless excerpt-include
const inlineExtensionRendererMarginFix = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ak-renderer-document .inline-extension-renderer .ak-renderer-extension': {
marginTop: 0
}
});
const shadowSharedStyle = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
[`& .${shadowClassNames.RIGHT_SHADOW}::before, .${shadowClassNames.RIGHT_SHADOW}::after, .${shadowClassNames.LEFT_SHADOW}::before, .${shadowClassNames.LEFT_SHADOW}::after`]: {
display: 'none',
position: 'absolute',
pointerEvents: 'none',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
zIndex: akEditorShadowZIndex,
width: '8px',
content: "''",
height: 'calc(100%)'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
[`& .${shadowClassNames.RIGHT_SHADOW}, .${shadowClassNames.LEFT_SHADOW}`]: {
position: 'relative'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
[`& .${shadowClassNames.LEFT_SHADOW}::before`]: {
background: `linear-gradient( to left, transparent 0, ${"var(--ds-shadow-overflow-spread, #1E1F2129)"} 140% ), linear-gradient( to right, ${"var(--ds-shadow-overflow-perimeter, #1E1F211f)"} 0px, transparent 1px )`,
top: '0px',
left: 0,
display: 'block'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
[`& .${shadowClassNames.RIGHT_SHADOW}::after`]: {
background: `linear-gradient( to right, transparent 0, ${"var(--ds-shadow-overflow-spread, #1E1F2129)"} 140% ), linear-gradient( to left, ${"var(--ds-shadow-overflow-perimeter, #1E1F211f)"} 0px, transparent 1px )`,
right: '0px',
top: '0px',
display: 'block'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
[`& .${shadowObserverClassNames.SENTINEL_LEFT}`]: {
height: '100%',
width: '0px',
minWidth: '0px'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
[`& .${shadowObserverClassNames.SENTINEL_RIGHT}`]: {
height: '100%',
width: '0px',
minWidth: '0px'
}
});
const dateSharedStyle = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
[`.${DateSharedCssClassName.DATE_WRAPPER} span`]: {
whiteSpace: 'unset'
}
});
const textColorStyles = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'.fabric-text-color-mark': {
color: 'var(--custom-palette-color, inherit)'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'a .fabric-text-color-mark': {
color: 'unset'
}
});
const backgrou