@atlaskit/renderer
Version:
Renderer component
885 lines (877 loc) • 143 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.textHighlightPaddingStyles = exports.RendererStyleContainer = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = require("@emotion/react");
var _style = require("./style");
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _consts = require("../../consts");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _mediaInline = require("@atlaskit/editor-common/media-inline");
var _headingAnchor = require("../../react/nodes/heading-anchor");
var _styles = require("@atlaskit/editor-common/styles");
var _adfSchema = require("@atlaskit/adf-schema");
var _ui = require("@atlaskit/editor-common/ui");
var _browser = require("@atlaskit/editor-common/browser");
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
var _table = require("../../react/nodes/table");
var _table2 = require("@atlaskit/editor-common/table");
var _lightWeightCodeBlock = require("../../react/nodes/codeBlock/components/lightWeightCodeBlock");
var _ugcTokens = require("@atlaskit/editor-common/ugc-tokens");
var _getBaseFontSize = require("./get-base-font-size");
var _emoji = require("@atlaskit/editor-common/emoji");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
var _syncBlock = require("@atlaskit/editor-common/sync-block");
var _css9, _$concat3, _$concat6;
/* 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
// oxlint-ignore @typescript-eslint/consistent-type-imports -- classic @jsx jsx factory + jsx.JSX.Element types
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var wrappedMediaBreakoutPoint = 410;
var TELEPOINTER_ID = 'ai-streaming-telepointer';
var tableShadowWidth = 32;
var 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`
var tableRowHeight = 44;
var isBackgroundClipBrowserFixNeeded = function isBackgroundClipBrowserFixNeeded() {
var browser = (0, _browser.getBrowserInfo)();
return browser.isGecko || browser.isIE || browser.isMac && browser.isChrome;
};
var baseFontStyle = (0, _react.css)({
font: (0, _ugcTokens.editorUGCToken)('editor.font.body')
});
var fontSizeStyles = (0, _react.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)'
}
});
var originalBaseFontLineHeight = (0, _react.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
var baseStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
// 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': "".concat(_editorSharedStyles.akEditorFullWidthLayoutWidth, "px")
}, ".".concat(_consts.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'
}), ".".concat(_consts.RendererCssClassName.DOCUMENT), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_mediaInline.INLINE_IMAGE_WRAPPER_CLASS_NAME), {
height: '22px',
transform: "translateY(-2px)"
}), "h1", (0, _defineProperty2.default)({}, "> .mediaInlineView-content-wrap > .".concat(_mediaInline.INLINE_IMAGE_WRAPPER_CLASS_NAME, ",\n > :is(a, span[data-mark-type='border']) .mediaInlineView-content-wrap > .").concat(_mediaInline.INLINE_IMAGE_WRAPPER_CLASS_NAME, ",\n > .").concat(_mediaInline.INLINE_IMAGE_WRAPPER_CLASS_NAME, ",\n > :is(a, span[data-mark-type='border']) .").concat(_mediaInline.INLINE_IMAGE_WRAPPER_CLASS_NAME), {
height: '36px',
transform: "translateY(-3px)"
})), "h2", (0, _defineProperty2.default)({}, "> .mediaInlineView-content-wrap > .".concat(_mediaInline.INLINE_IMAGE_WRAPPER_CLASS_NAME, ",\n > :is(a, span[data-mark-type='border']) .mediaInlineView-content-wrap > .").concat(_mediaInline.INLINE_IMAGE_WRAPPER_CLASS_NAME, ",\n > .").concat(_mediaInline.INLINE_IMAGE_WRAPPER_CLASS_NAME, ",\n > :is(a, span[data-mark-type='border']) .").concat(_mediaInline.INLINE_IMAGE_WRAPPER_CLASS_NAME), {
height: '31px',
transform: "translateY(-3px)"
})), "h3", (0, _defineProperty2.default)({}, "> .mediaInlineView-content-wrap > .".concat(_mediaInline.INLINE_IMAGE_WRAPPER_CLASS_NAME, ",\n > :is(a, span[data-mark-type='border']) .mediaInlineView-content-wrap > .").concat(_mediaInline.INLINE_IMAGE_WRAPPER_CLASS_NAME, ",\n > .").concat(_mediaInline.INLINE_IMAGE_WRAPPER_CLASS_NAME, ",\n > :is(a, span[data-mark-type='border']) .").concat(_mediaInline.INLINE_IMAGE_WRAPPER_CLASS_NAME), {
height: '25px',
transform: "translateY(-2px)"
})), "h4", (0, _defineProperty2.default)({}, "> .mediaInlineView-content-wrap > .".concat(_mediaInline.INLINE_IMAGE_WRAPPER_CLASS_NAME, ",\n > :is(a, span[data-mark-type='border']) .mediaInlineView-content-wrap > .").concat(_mediaInline.INLINE_IMAGE_WRAPPER_CLASS_NAME, ",\n > .").concat(_mediaInline.INLINE_IMAGE_WRAPPER_CLASS_NAME, ",\n > :is(a, span[data-mark-type='border']) .").concat(_mediaInline.INLINE_IMAGE_WRAPPER_CLASS_NAME), {
height: '23px',
transform: "translateY(-2px)"
})), "h5", (0, _defineProperty2.default)({}, "> .mediaInlineView-content-wrap > .".concat(_mediaInline.INLINE_IMAGE_WRAPPER_CLASS_NAME, ",\n > :is(a, span[data-mark-type='border']) .mediaInlineView-content-wrap > .").concat(_mediaInline.INLINE_IMAGE_WRAPPER_CLASS_NAME, ",\n > .").concat(_mediaInline.INLINE_IMAGE_WRAPPER_CLASS_NAME, ",\n > :is(a, span[data-mark-type='border']) .").concat(_mediaInline.INLINE_IMAGE_WRAPPER_CLASS_NAME), {
height: '20px',
transform: "translateY(-2px)"
})), "h6", (0, _defineProperty2.default)({}, "> .mediaInlineView-content-wrap > .".concat(_mediaInline.INLINE_IMAGE_WRAPPER_CLASS_NAME, ",\n > :is(a, span[data-mark-type='border']) .mediaInlineView-content-wrap > .").concat(_mediaInline.INLINE_IMAGE_WRAPPER_CLASS_NAME, ",\n > .").concat(_mediaInline.INLINE_IMAGE_WRAPPER_CLASS_NAME, ",\n > :is(a, span[data-mark-type='border']) .").concat(_mediaInline.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)"
}));
var headingAnchorStylesDuplicateAnchor = (0, _react.css)({
'& h1, & h2, & h3, & h4, & h5, & h6': (0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_headingAnchor.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)", (0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
'> button': {
opacity: 0,
transform: 'translate(-8px, 0px)',
transitionProperty: 'opacity, transform',
transitionDuration: "var(--ds-duration-medium, 0.2s)".concat(", ", "var(--ds-duration-medium, 0.2s)"),
transitionTimingFunction: "var(--ds-easing-out-practical, ease)".concat(", ", "var(--ds-easing-out-practical, ease)"),
transitionDelay: '0s, 0s'
}
}), '&:hover', (0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName, " > button"), {
opacity: 1,
transform: 'none !important'
}))),
'& h1': (0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: "".concat(28 / 24, "em")
}),
'& h2': (0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: "".concat(24 / 20, "em")
}),
'& h3': (0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: "".concat(20 / 16, "em")
}),
'& h4': (0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: "".concat(16 / 14, "em")
}),
'& h5': (0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: "".concat(16 / 12, "em")
}),
'& h6': (0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: "".concat(16 / 11, "em")
})
});
var headingAnchorStyles = (0, _react.css)({
'& .renderer-heading-wrapper': (0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_headingAnchor.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)", (0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
'> button': {
opacity: 0,
transform: "translate(-8px, 0px)",
transition: "opacity 0.2s ease 0s, transform 0.2s ease 0s"
}
}), '&:hover', (0, _defineProperty2.default)({}, ".".concat(_headingAnchor.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"]': (0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: "".concat(28 / 24, "em")
}),
'& .renderer-heading-wrapper[data-level="2"]': (0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: "".concat(24 / 20, "em")
}),
'& .renderer-heading-wrapper[data-level="3"]': (0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: "".concat(20 / 16, "em")
}),
'& .renderer-heading-wrapper[data-level="4"]': (0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: "".concat(16 / 14, "em")
}),
'& .renderer-heading-wrapper[data-level="5"]': (0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: "".concat(16 / 12, "em")
}),
'& .renderer-heading-wrapper[data-level="6"]': (0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: "".concat(16 / 11, "em")
})
});
var headingAnchorButtonFocusVisibleStyles = (0, _react.css)((0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
'button:focus-visible': {
outline: "2px solid ".concat("var(--ds-border-focused, #4688EC)"),
borderRadius: "var(--ds-radius-small, 3px)"
}
}));
var akEditorBreakpointForSmallDevice = '1266px';
var responsiveBreakoutWidth = (0, _react.css)((0, _defineProperty2.default)({
'--ak-editor--breakout-container-without-gutter-width': "calc(100cqw - ".concat(_editorSharedStyles.akEditorGutterPadding, "px * 2)"),
// Corresponds to the legacyContentStyles from `@atlaskit/editor-core` meant to introduce responsive breakout width.
'--ak-editor--breakout-wide-layout-width': "".concat(_editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, "px")
}, "@media (min-width: ".concat(akEditorBreakpointForSmallDevice, ")"), {
'--ak-editor--breakout-wide-layout-width': "".concat(_editorSharedStyles.akEditorCalculatedWideLayoutWidth, "px")
}));
var responsiveBreakoutWidthFullWidth = (0, _react.css)((0, _defineProperty2.default)({
'--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': "".concat(_editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, "px")
}, "@media (min-width: ".concat(akEditorBreakpointForSmallDevice, ")"), {
'--ak-editor--breakout-wide-layout-width': "".concat(_editorSharedStyles.akEditorCalculatedWideLayoutWidth, "px")
}));
var responsiveBreakoutWidthWithReducedPadding = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)({
'--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': "".concat(_editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, "px")
}, "@media (min-width: ".concat(akEditorBreakpointForSmallDevice, ")"), {
'--ak-editor--breakout-wide-layout-width': "".concat(_editorSharedStyles.akEditorCalculatedWideLayoutWidth, "px")
}), "@media (max-width: ".concat(_editorSharedStyles.akEditorFullPageNarrowBreakout, "px)"), {
'--ak-editor--breakout-container-without-gutter-width': "calc(100cqw - var(--ak-renderer--full-page-gutter) * 2)"
}));
var hideHeadingCopyLinkWrapperStylesDuplicateAnchor = (0, _react.css)({
'& h1, & h2, & h3, & h4, & h5, & h6': (0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
'&:focus-within': {
opacity: 1
}
}), "@media (hover: hover) and (pointer: fine)", (0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
opacity: 0,
transition: "opacity 0.2s ease 0s"
}), '&:hover', (0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
opacity: 1
})))
});
var hideHeadingCopyLinkWrapperStyles = (0, _react.css)({
'& .renderer-heading-wrapper': (0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
'&:focus-within': {
opacity: 1
}
}), "@media (hover: hover) and (pointer: fine)", (0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
opacity: 0,
transition: "opacity 0.2s ease 0s"
}), '&:hover', (0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
opacity: 1
})))
});
var rendererFullPageStyles = (0, _react.css)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
maxWidth: "".concat(_editorSharedStyles.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 ".concat(_style.FullPagePadding, "px")
});
var rendererFullPageStylesWithReducedPadding = (0, _react.css)((0, _defineProperty2.default)({
'--ak-renderer--full-page-gutter': "".concat(_style.FullPagePadding, "px"),
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
maxWidth: "".concat(_editorSharedStyles.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: ".concat(_editorSharedStyles.akEditorFullPageNarrowBreakout, "px)"), {
'--ak-renderer--full-page-gutter': "".concat(_editorSharedStyles.akEditorGutterPaddingReduced, "px")
}));
var oldRendererFullWidthStyles = (0, _react.css)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
maxWidth: "".concat(_editorSharedStyles.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'
}
});
var rendererFullWidthStyles = (0, _react.css)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
maxWidth: "".concat(_editorSharedStyles.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'
}
});
var oldRendererMaxWidthStyles = (0, _react.css)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
maxWidth: "".concat(_editorSharedStyles.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'
}
});
var rendererMaxWidthStyles = (0, _react.css)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
maxWidth: "".concat(_editorSharedStyles.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'
}
});
var rendererFullWidthStylesForTableResizing = (0, _react.css)({
'.pm-table-container': {
width: '100% !important'
}
});
var rovoTelepointerStyles = (0, _react.css)((0, _defineProperty2.default)({}, "#".concat(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 ".concat("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 ".concat("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'
}
}));
var whitespaceSharedStyles = (0, _react.css)({
wordWrap: 'break-word',
whiteSpace: 'pre-wrap'
});
var blockquoteSharedStyles = (0, _react.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)".concat(" 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: "".concat(_editorSharedStyles.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'
}
}
});
var headingsSharedStyles = (0, _react.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.
*/
var headingWrapperInlineFlowStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
// 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 > .".concat(_headingAnchor.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'
}));
var headingWithAlignmentStylesDuplicateAnchor = (0, _react.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'
}
}
});
var headingWithAlignmentStyles = (0, _react.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
}
}
});
var ruleSharedStyles = (0, _react.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: "".concat(_editorSharedStyles.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
var paragraphSharedStylesWithEditorUGC = (0, _react.css)({
'& p': {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
font: "var(--ak-renderer-editor-font-normal-text)",
marginTop: _editorSharedStyles.blockNodesVerticalMargin,
marginBottom: 0
}
});
var paragraphStylesUGCScaledMargin = (0, _react.css)({
'& p': {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
font: "var(--ak-renderer-editor-font-normal-text)",
marginTop: _editorSharedStyles.scaledBlockNodesVerticalMargin,
marginBottom: 0
}
});
var paragraphSharedStyles = (0, _react.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: _editorSharedStyles.akEditorLineHeight,
fontWeight: "var(--ds-font-weight-regular, 400)",
marginTop: _editorSharedStyles.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
var paragraphSharedStyleScaledMargin = (0, _react.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: _editorSharedStyles.akEditorLineHeight,
fontWeight: "var(--ds-font-weight-regular, 400)",
marginTop: _editorSharedStyles.scaledBlockNodesVerticalMargin,
marginBottom: 0,
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
letterSpacing: '-0.005em'
}
});
var listsSharedStyles = (0, _react.css)((_css9 = {
/* =============== INDENTATION SPACING ========= */
'ul, ol': {
boxSizing: 'border-box',
paddingLeft: "var(--ed--list--item-counter--padding, ".concat(_styles.listItemCounterPadding, "px)")
}
}, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_css9, "".concat(_adfSchema.orderedListSelector, ", ").concat(_adfSchema.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'
}), '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'
}), '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'
}), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_css9, '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
*/
var listsSharedStylesForGekko = (0, _react.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.
*/
var listItemHiddenMarkerStyles = (0, _react.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)"
}
});
var indentationSharedStyles = (0, _react.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'
}
}
});
var indentationSharedStylesWithMarginFix = (0, _react.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: _editorSharedStyles.blockNodesVerticalMargin
}
}
});
var blockMarksSharedStylesDuplicateAnchor = (0, _react.css)((0, _defineProperty2.default)({}, "*:not(.fabric-editor-block-mark) >,\n \t*:not(.fabric-editor-block-mark) >\n div.fabric-editor-block-mark:first-of-type\n\t:not(.fabric-editor-indentation-mark)\n\t:not(.fabric-editor-alignment),\n \t.fabric-editor-alignment:first-of-type:first-child,\n \t.fabric-editor-font-size:first-of-type:first-child,\n \t.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
}
}
}));
var blockMarksSharedStyles = (0, _react.css)((0, _defineProperty2.default)({}, "*:not(.fabric-editor-block-mark) >,\n \t*:not(.fabric-editor-block-mark) >\n div.fabric-editor-block-mark:first-of-type\n\t:not(.fabric-editor-indentation-mark)\n\t:not(.fabric-editor-alignment),\n \t.fabric-editor-alignment:first-of-type:first-child,\n \t.fabric-editor-font-size:first-of-type:first-child,\n \t.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
}
}
}
}));
var codeMarkSharedStyles = (0, _react.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,".concat("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'
}
});
var extensionStyle = (0, _react.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)'
}
});
var oldExtensionAsInlineStyle = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_consts.RendererCssClassName.DOCUMENT, " [data-as-inline=\"on\"]"), {
display: 'inline-block'
}), ".".concat(_consts.RendererCssClassName.DOCUMENT, " .").concat(_consts.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
}), ".".concat(_consts.RendererCssClassName.EXTENSION_AS_INLINE, " .").concat(_consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER), {
display: 'inline-block',
overflowX: 'visible',
containerType: 'normal'
}), ".".concat(_consts.RendererCssClassName.EXTENSION_AS_INLINE, " .").concat(_consts.RendererCssClassName.EXTENSION_INNER_WRAPPER), {
display: 'inline-block'
}));
var extensionAsInlineStyle = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_consts.RendererCssClassName.DOCUMENT, " [data-as-inline=\"on\"]"), {
display: 'inline-block'
}), ".".concat(_consts.RendererCssClassName.DOCUMENT, " .").concat(_consts.RendererCssClassName.EXTENSION_AS_INLINE), {
display: 'inline-block',
width: 'auto',
marginTop: 0
}), ".".concat(_consts.RendererCssClassName.EXTENSION_AS_INLINE, " .").concat(_consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER), {
display: 'inline-block',
overflowX: 'visible',
containerType: 'normal'
}), ".".concat(_consts.RendererCssClassName.EXTENSION_AS_INLINE, " .").concat(_consts.RendererCssClassName.EXTENSION_INNER_WRAPPER), {
display: 'inline-block'
}));
// Removes the blockNodesVerticalMargin styling for inline extensions, i.e. borderless excerpt-include
var inlineExtensionRendererMarginFix = (0, _react.css)({
// eslint-disable-next-l