@atlaskit/editor-plugin-block-controls
Version:
Block controls plugin for @atlaskit/editor-core
493 lines (487 loc) • 34.6 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
/**
* @jsxRuntime classic
* @jsx jsx
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
import { css, Global, jsx } from '@emotion/react';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { ANCHOR_VARIABLE_NAME, DRAG_HANDLE_WIDTH, isCSSAnchorSupported, tableControlsSpacing } from '@atlaskit/editor-common/styles';
import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
import { akEditorBreakoutPadding, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorFullPageNarrowBreakout, akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced } from '@atlaskit/editor-shared-styles';
import { layers } from '@atlaskit/theme/constants';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
import { DRAG_HANDLE_MAX_WIDTH_PLUS_GAP } from './consts';
import { NODE_ANCHOR_ATTR_NAME } from './utils/dom-attr-name';
/**
* This anchor element selector disregards anchors that are solely utilized for size measurements,
* including those within table rows and media.
*/
var dragHandlerAnchorSelector = '[data-drag-handler-anchor-name]:not([data-drag-handler-node-type="tableRow"], [data-drag-handler-node-type="media"])';
/**
* Disregards anchors that can not have handles next to them, and so shouldn't have an extended hover zone
*/
var dragHandlerAnchorSelectorNext = "[".concat(NODE_ANCHOR_ATTR_NAME, "]:not([data-prosemirror-node-name=\"tableRow\"], [data-prosemirror-node-name=\"tableCell\"], [data-prosemirror-node-name=\"tableHeader\"], [data-prosemirror-node-name=\"media\"], [data-prosemirror-node-inline=\"true\"])");
/**
* Extended version that also excludes descendants of taskList.
* preventing the ::after hover zone from blocking checkbox inputs in blockTaskItem nodes.
*/
var dragHandlerAnchorSelectorWithTaskExclusion = "[".concat(NODE_ANCHOR_ATTR_NAME, "]:not([data-prosemirror-node-name=\"tableRow\"], [data-prosemirror-node-name=\"tableCell\"], [data-prosemirror-node-name=\"tableHeader\"], [data-prosemirror-node-name=\"media\"], [data-prosemirror-node-inline=\"true\"], [data-prosemirror-node-name=\"taskList\"] [").concat(NODE_ANCHOR_ATTR_NAME, "])");
var gutterPaddingWidth = function gutterPaddingWidth() {
return editorExperiment('platform_editor_controls', 'variant1') ? "".concat(akEditorGutterPaddingDynamic(), "px") : '100%';
};
var gutterPaddingLeft = function gutterPaddingLeft() {
return editorExperiment('platform_editor_controls', 'variant1') ? "-".concat(akEditorGutterPaddingDynamic(), "px") : '-100px';
};
var extendedHoverZone = function extendedHoverZone() {
return css(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ".block-ctrl-drag-preview ".concat(dragHandlerAnchorSelector, "::after"), {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
display: 'none !important'
}), '.ProseMirror', _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "&& ".concat(dragHandlerAnchorSelector, "::after"), {
content: '""',
position: 'absolute',
top: 0,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
left: "-".concat(DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, "px"),
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
width: "".concat(DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, "px"),
height: '100%',
cursor: 'default',
zIndex: 1
}), "&& [data-drag-handler-anchor-depth=\"0\"]".concat(dragHandlerAnchorSelector, "::after"), {
content: '""',
position: 'absolute',
top: 0,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
left: gutterPaddingLeft(),
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
width: gutterPaddingWidth(),
height: '100%',
cursor: 'default',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
zIndex: -1
}), "&& :is(.pm-table-cell-content-wrap, .pm-table-header-content-wrap) > ".concat(dragHandlerAnchorSelector, "::after"), {
content: '""',
position: 'absolute',
top: 0,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
left: 0,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
width: 0,
height: '100%',
cursor: 'default',
zIndex: 1
}), '&& [data-drag-handler-anchor-name][data-layout-column]::after', {
content: '""',
position: 'absolute',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
top: "".concat(-DRAG_HANDLE_WIDTH / 2, "px"),
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
left: 0,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
width: '100%',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
height: "".concat(DRAG_HANDLE_WIDTH, "px"),
cursor: 'default',
zIndex: 1
})), 'hr[data-drag-handler-anchor-name]', {
overflow: 'visible'
}), '[data-blocks-drag-handle-container="true"] + [data-drag-handler-anchor-depth="0"]::after', {
display: 'none'
}));
};
var extendedHoverZoneNext = function extendedHoverZoneNext() {
return css(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ".block-ctrl-drag-preview ".concat(expValEquals('platform_editor_unify_native_dnd_selectors', 'isEnabled', true) ? dragHandlerAnchorSelectorWithTaskExclusion : dragHandlerAnchorSelectorNext, "::after"), {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
display: 'none !important'
}), '.ProseMirror', _defineProperty(_defineProperty(_defineProperty({}, "&& ".concat(expValEquals('platform_editor_unify_native_dnd_selectors', 'isEnabled', true) ? dragHandlerAnchorSelectorWithTaskExclusion : dragHandlerAnchorSelectorNext, "::after"), {
content: '""',
position: 'absolute',
top: 0,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
left: "-".concat(DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, "px"),
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
width: "".concat(DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, "px"),
height: '100%',
cursor: 'default',
zIndex: 1
}), "&& ".concat(expValEquals('platform_editor_unify_native_dnd_selectors', 'isEnabled', true) ? dragHandlerAnchorSelectorWithTaskExclusion : dragHandlerAnchorSelectorNext, ":not([").concat(NODE_ANCHOR_ATTR_NAME, "] [").concat(NODE_ANCHOR_ATTR_NAME, "])::after"), {
content: '""',
position: 'absolute',
top: 0,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
left: gutterPaddingLeft(),
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
width: gutterPaddingWidth(),
height: '100%',
cursor: 'default',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
zIndex: -1
}), "&& :is(.pm-table-cell-content-wrap, .pm-table-header-content-wrap) > ".concat(expValEquals('platform_editor_unify_native_dnd_selectors', 'isEnabled', true) ? dragHandlerAnchorSelectorWithTaskExclusion : dragHandlerAnchorSelectorNext, "::after"), {
content: '""',
position: 'absolute',
top: 0,
left: 0,
width: 0,
height: '100%',
cursor: 'default',
zIndex: 1
})), 'hr[data-drag-handler-anchor-name]', {
overflow: 'visible'
}), "[data-blocks-drag-handle-container=\"true\"] + ".concat(expValEquals('platform_editor_unify_native_dnd_selectors', 'isEnabled', true) ? dragHandlerAnchorSelectorWithTaskExclusion : dragHandlerAnchorSelectorNext, ":not([").concat(NODE_ANCHOR_ATTR_NAME, "] [").concat(NODE_ANCHOR_ATTR_NAME, "])::after"), {
display: 'none'
}));
};
var layoutColumnExtendedHoverZone = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ProseMirror': _defineProperty({}, "&&& ".concat(expValEquals('platform_editor_unify_native_dnd_selectors', 'isEnabled', true) ? dragHandlerAnchorSelectorWithTaskExclusion : dragHandlerAnchorSelectorNext, "[data-layout-column]::after"), {
content: '""',
position: 'absolute',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
top: "".concat(-DRAG_HANDLE_WIDTH / 2, "px"),
left: 0,
width: '100%',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
height: "".concat(DRAG_HANDLE_WIDTH, "px"),
cursor: 'default',
zIndex: 1
})
});
var layoutColumnWithoutHoverZone = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ProseMirror': _defineProperty({}, "&&& ".concat(expValEquals('platform_editor_unify_native_dnd_selectors', 'isEnabled', true) ? dragHandlerAnchorSelectorWithTaskExclusion : dragHandlerAnchorSelectorNext, "[data-layout-column]::after"), {
display: 'none'
})
});
var extendHoverZoneReduced = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ProseMirror': _defineProperty({}, "&& [data-drag-handler-anchor-depth=\"0\"]".concat(dragHandlerAnchorSelector, "::after"), _defineProperty({}, "@container editor-area (max-width: ".concat(akEditorFullPageNarrowBreakout, "px)"), {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
left: "-".concat(akEditorGutterPaddingReduced, "px"),
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
width: "".concat(akEditorGutterPaddingReduced, "px")
}))
});
var extendHoverZoneReducedNext = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ProseMirror': _defineProperty({}, "> ".concat(expValEquals('platform_editor_unify_native_dnd_selectors', 'isEnabled', true) ? dragHandlerAnchorSelectorWithTaskExclusion : dragHandlerAnchorSelectorNext, "::after"), _defineProperty({}, "@container editor-area (max-width: ".concat(akEditorFullPageNarrowBreakout, "px)"), {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
left: "-".concat(akEditorGutterPaddingReduced, "px"),
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
width: "".concat(akEditorGutterPaddingReduced, "px")
}))
});
var extendedDragZone = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ProseMirror': _defineProperty({}, "&& [data-drag-handler-anchor-depth=\"0\"]".concat(dragHandlerAnchorSelector, "::after"), {
width: 'var(--ak-editor-max-container-width)',
left: "calc((100% - var(--ak-editor-max-container-width))/2)"
})
});
var extendedDragZoneNext = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ProseMirror': _defineProperty({}, "&& ".concat(expValEquals('platform_editor_unify_native_dnd_selectors', 'isEnabled', true) ? dragHandlerAnchorSelectorWithTaskExclusion : dragHandlerAnchorSelectorNext, ":not([").concat(NODE_ANCHOR_ATTR_NAME, "] [").concat(NODE_ANCHOR_ATTR_NAME, "])::after"), {
width: 'var(--ak-editor-max-container-width)',
left: "calc((100% - var(--ak-editor-max-container-width))/2)"
})
});
var paragraphWithTrailingBreakAsOnlyChild = '+ :is(p, h1, h2, h3, h4, h5, h6) > .ProseMirror-trailingBreak:only-child';
var indentatedParagraphWithTrailingBreakAsOnlyChild = '+ div.fabric-editor-indentation-mark > :is(p, h1, h2, h3, h4, h5, h6) > .ProseMirror-trailingBreak:only-child';
var paragraphWithPlaceholder = '+ p > .placeholder-decoration';
var dragHandleContainer = '.ProseMirror-widget[data-blocks-drag-handle-container="true"]';
var dragHandleSelector = 'button[data-testid="block-ctrl-drag-handle"]';
var dropTargetContainer = '.ProseMirror-widget[data-blocks-drop-target-container="true"]';
var dividerBodiedInCustomPanelWithNoIconSelector = '[data-panel-type].ak-editor-panel__no-icon .ProseMirror-widget:first-child + .ProseMirror-widget:nth-child(2) + hr, [data-panel-type] hr:first-child';
var withInlineNodeStyleSelectors = ["".concat(dragHandleContainer, ":has(").concat(paragraphWithTrailingBreakAsOnlyChild, ") ").concat(dragHandleSelector), "".concat(dragHandleContainer, ":has(").concat(indentatedParagraphWithTrailingBreakAsOnlyChild, ") ").concat(dragHandleSelector), "".concat(dragHandleContainer, ":has(").concat(paragraphWithPlaceholder, ") ").concat(dragHandleSelector)].join(', ');
var withFormatInLayoutStyleFixSelectors = ["".concat(dragHandleContainer, ":first-child + .fabric-editor-indentation-mark > p:first-child"), "".concat(dragHandleContainer, ":first-child + .fabric-editor-alignment > p:first-child"), "".concat(dragHandleContainer, ":first-child + .fabric-editor-font-size > p:first-child"), "".concat(dragHandleContainer, ":first-child + ").concat(dropTargetContainer, " + .fabric-editor-indentation-mark > p:first-child"), "".concat(dragHandleContainer, ":first-child + ").concat(dropTargetContainer, " + .fabric-editor-alignment > p:first-child"), "".concat(dragHandleContainer, ":first-child + ").concat(dropTargetContainer, " + .fabric-editor-font-size > p:first-child"), "".concat(dropTargetContainer, ":first-child + .fabric-editor-alignment > p:first-child"), "".concat(dropTargetContainer, ":first-child + .fabric-editor-indentation-mark > p:first-child"), "".concat(dropTargetContainer, ":first-child + .fabric-editor-font-size > p:first-child"), "".concat(dragHandleContainer, ":first-child + .fabric-editor-indentation-mark > :is(h1, h2, h3, h4, h5, h6):first-child"), "".concat(dragHandleContainer, ":first-child + .fabric-editor-font-size > :is(h1, h2, h3, h4, h5, h6):first-child")].join(', ');
/**
* Please do not change change transform to display:none, or visibility:hidden
* Otherwise it might break composition input for Chrome
* https://product-fabric.atlassian.net/browse/ED-24136
*/
var withInlineNodeStyle = css(_defineProperty({}, withInlineNodeStyleSelectors, {
transform: 'scale(0)'
}));
var legacyBreakoutWideLayoutStyle = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
'.ProseMirror-widget[data-blocks-drop-target-container="true"]': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
'--ak-editor--legacy-breakout-wide-layout-width': "".concat(akEditorCalculatedWideLayoutWidthSmallViewport, "px"),
'@media (width>=1280px)': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
'--ak-editor--legacy-breakout-wide-layout-width': "".concat(akEditorCalculatedWideLayoutWidth, "px")
}
}
});
var globalDnDStyle = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ProseMirror': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
'[data-layout-content]': {
userDrag: 'none'
}
}
});
var globalStyles = function globalStyles() {
return css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
'.ProseMirror-widget:first-child + *:not([data-panel-type], .code-block, [data-node-type="nestedExpand"], [data-node-type="expand"], [data-layout-section="true"], [data-prosemirror-node-name="bodiedSyncBlock"])': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
marginTop: '0 !important'
},
// Font-size wrapper is a div with no inherent margin — reach through to the content node inside.
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
'.ProseMirror-widget:first-child + .fabric-editor-font-size > :is(p, h1, h2, h3, h4, h5, h6):first-child, .ProseMirror-widget:first-child + .ProseMirror-widget + .fabric-editor-font-size > :is(p, h1, h2, h3, h4, h5, h6):first-child': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
marginTop: '0 !important'
}
});
};
var quickInsertStyles = function quickInsertStyles() {
return css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.blocks-quick-insert-button': {
backgroundColor: 'transparent',
top: "var(--top-override,8px)",
position: 'sticky',
boxSizing: 'border-box',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
height: "var(--ds-space-300, 24px)",
width: "var(--ds-space-300, 24px)",
border: 'none',
borderRadius: "var(--ds-radius-full, 9999px)",
zIndex: layers.card(),
outline: 'none',
cursor: 'pointer',
color: "var(--ds-icon-subtle, #505258)"
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
'[data-blocks-quick-insert-container]:has(~ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
'--top-override': "".concat(tableControlsSpacing, "px")
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
'[data-prosemirror-mark-name="breakout"]:has([data-blocks-quick-insert-container]):has(~ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
'--top-override': "".concat(tableControlsSpacing, "px")
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.blocks-quick-insert-button:hover': {
backgroundColor: "var(--ds-background-neutral-subtle-hovered, #0515240F)"
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.blocks-quick-insert-button:active': {
backgroundColor: "var(--ds-background-neutral-subtle-pressed, #0B120E24)"
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.blocks-quick-insert-button:focus': {
outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #4688EC)")
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.blocks-quick-insert-visible-container': {
transition: 'opacity 0.1s ease-in-out, visibility 0.1s ease-in-out',
opacity: 1,
visibility: 'visible'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.blocks-quick-insert-invisible-container': {
transition: 'opacity 0.1s ease-in-out, visibility 0.1s ease-in-out',
opacity: 0,
visibility: 'hidden'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.blocks-quick-insert-tooltip': {
zIndex: layers.tooltip(),
borderRadius: "var(--ds-radius-small, 4px)",
padding: "var(--ds-space-050, 4px)".concat(" 0"),
boxSizing: 'border-box',
maxWidth: '240px',
backgroundColor: "var(--ds-background-neutral-bold, #292A2E)",
color: "var(--ds-text-inverse, #FFFFFF)",
font: "var(--ds-font-body-small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
insetBlockStart: "var(--ds-space-0, 0px)",
insetInlineStart: "var(--ds-space-0, 0px)",
overflowWrap: 'break-word',
paddingBlockEnd: "var(--ds-space-025, 2px)",
paddingBlockStart: "var(--ds-space-025, 2px)",
paddingInlineEnd: "var(--ds-space-075, 6px)",
paddingInlineStart: "var(--ds-space-075, 6px)",
wordWrap: 'break-word',
pointerEvents: 'none',
userSelect: 'none',
// Based on: platform/packages/design-system/motion/src/entering/keyframes-motion.tsx
transition: 'opacity .1s ease-in-out, transform .1s ease-in-out, visibility .1s ease-in-out',
'@media (prefers-reduced-motion: reduce)': {
transition: 'none'
}
}
});
};
var topLevelNodeMarginStyles = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
'.ProseMirror': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
'> .ProseMirror-widget:first-child + .ProseMirror-gapcursor + *:not([data-layout-section="true"], [data-prosemirror-node-name="bodiedSyncBlock"]), > .ProseMirror-widget:first-child + *:not([data-layout-section="true"], [data-prosemirror-node-name="bodiedSyncBlock"])': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
marginTop: '0 !important'
},
// When a drop target widget is inserted during drag, the font-size wrapper is no longer
// adjacent to the first widget. Reach through the wrapper to zero the inner content margin.
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
'> .ProseMirror-widget:first-child + .ProseMirror-widget + .fabric-editor-font-size > :is(p, h1, h2, h3, h4, h5, h6):first-child, > .ProseMirror-widget:first-child + .ProseMirror-gapcursor + .fabric-editor-font-size > :is(p, h1, h2, h3, h4, h5, h6):first-child': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
marginTop: '0 !important'
}
}
});
var withDividerInPanelStyleFix = css(_defineProperty({}, "".concat(dividerBodiedInCustomPanelWithNoIconSelector), {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
marginTop: '0 !important'
}));
var withDeleteLinesStyleFix = css(_defineProperty({}, "p[data-drag-handler-anchor-name] ".concat(dragHandleContainer), {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
display: 'none !important'
}));
// Image dnd is broken in Firefox due to a previous fix for image caption https://product-fabric.atlassian.net/browse/ED-14034
// We could remove this fix if the previous issue is invalid
var withMediaSingleStyleFix = css(_defineProperty({}, '.ProseMirror.ua-firefox .mediaSingleView-content-wrap[data-drag-handler-node-type="mediaSingle"][data-drag-handler-anchor-name], .ProseMirror.ua-firefox [data-drag-handler-anchor-name][data-drag-handler-node-type] .mediaSingleView-content-wrap', {
userSelect: 'auto',
cursor: 'pointer'
}));
var withFormatInLayoutStyleFix = css(_defineProperty({}, "".concat(withFormatInLayoutStyleFixSelectors), {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
marginTop: '0 !important'
}));
var headingWithIndentationInLayoutStyleFix = css(_defineProperty({}, "".concat(dragHandleContainer, ":first-child + .fabric-editor-indentation-mark > :is(h1, h2, h3, h4, h5, h6):first-child"), {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
marginTop: '0 !important'
}));
var withRelativePosStyle = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ProseMirror': _defineProperty(_defineProperty({}, "&& ".concat(dragHandlerAnchorSelector), {
position: 'relative'
}), "&& ".concat(dragHandlerAnchorSelector, ":has(> .ProseMirror-trailingBreak:only-child)::before"), {
// Workaround to force safari to show the cursor on blank lines even when there is no content
// See: CONFCLOUD-80210
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
content: "\"".concat(ZERO_WIDTH_SPACE, "\"")
})
});
var withRelativePosStyleNext = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ProseMirror': _defineProperty(_defineProperty({}, "&& ".concat(dragHandlerAnchorSelectorNext), {
position: 'relative'
}), "&& ".concat(dragHandlerAnchorSelectorNext, ":has(> .ProseMirror-trailingBreak:only-child)::before"), {
// Workaround to force safari to show the cursor on blank lines even when there is no content
// See: CONFCLOUD-80210
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
content: "\"".concat(ZERO_WIDTH_SPACE, "\"")
})
});
var withAnchorNameZindexStyle = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ProseMirror': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
'&& [data-drag-handler-anchor-depth="0"][data-drag-handler-anchor-name]': {
zIndex: 1
}
}
});
var withAnchorNameZindexStyleNext = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ProseMirror': _defineProperty({}, "&& [".concat(NODE_ANCHOR_ATTR_NAME, "]:not([").concat(NODE_ANCHOR_ATTR_NAME, "] [").concat(NODE_ANCHOR_ATTR_NAME, "])"), {
zIndex: 1
})
});
// This style is used to define width for block card (with datasource) that does not have layout
// In full-width editor, block card has width of full-width layout
// In fixed-width editor, block card has width of wide layout
var blockCardWithoutLayout = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ak-editor-content-area.fabric-editor--full-width-mode .ProseMirror .ProseMirror-widget[data-blocks-drop-target-container="true"]': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
'--ak-editor-block-card-width': "min(calc(100cqw - ".concat(akEditorBreakoutPadding, "px), 1800px)")
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
'.ak-editor-content-area .ProseMirror .ProseMirror-widget[data-blocks-drop-target-container="true"]': {
'--ak-editor-block-card-width': 'max(var(--ak-editor--legacy-breakout-wide-layout-width), var(--ak-editor--line-length))'
}
});
var nextAnchorSelector = ['&[data-node-anchor]',
// adjacent sibling with anchor
'&:not([data-node-anchor]) [data-node-anchor]:first-of-type',
// first nested anchor inside adjacent sibling
'&.ProseMirror-widget + [data-node-anchor]',
// adjacent sibling with anchor (when next to a widget like gap cursor)
'&.ProseMirror-widget + :not([data-node-anchor]) [data-node-anchor]:first-of-type' // first nested anchor inside adjacent sibling (when next to a widget like gap cursor)
].join(', ');
var dragHandlerAnchorStyles = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ProseMirror': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'[data-testid="block-ctrl-decorator-widget"] + *': _defineProperty({}, "".concat(nextAnchorSelector), {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
anchorName: "var(".concat(ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
}),
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'[data-testid="block-ctrl-quick-insert-button"] + *': _defineProperty({}, "".concat(nextAnchorSelector), {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
anchorName: "var(".concat(ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
})
}
});
// Styles applied to nodes with anchors when dragging
var dragAnchorStyles = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ProseMirror': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
'[data-node-anchor]:not([data-node-anchor] [data-node-anchor])': {
// all top level nodes with anchor
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
anchorName: "var(".concat(ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
'[data-node-anchor]:has([data-blocks-drop-target-container]) [data-node-anchor]': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
anchorName: "var(".concat(ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'[data-prosemirror-node-name="media"][data-node-anchor]': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
anchorName: "var(".concat(ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
},
// first table row to avoid multiple anchors in table
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
'[data-prosemirror-node-name="table"] [data-prosemirror-node-name="tableRow"][data-node-anchor]:first-of-type': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
anchorName: "var(".concat(ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
}
}
});
export var GlobalStylesWrapper = function GlobalStylesWrapper(_ref) {
var api = _ref.api;
var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['blockControls'], function (states) {
var _states$blockControls;
return {
isDragging: (_states$blockControls = states.blockControlsState) === null || _states$blockControls === void 0 ? void 0 : _states$blockControls.isDragging
};
}),
isDraggingFromState = _useSharedPluginState.isDragging;
var isDragging = expValEquals('platform_editor_block_controls_perf_optimization', 'isEnabled', true) ? isDraggingFromState : false;
var shouldRenderAnchors = isCSSAnchorSupported() && expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true);
var toolbarFlagsEnabled = areToolbarFlagsEnabled(Boolean(api === null || api === void 0 ? void 0 : api.toolbar));
return jsx(Global
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
, {
styles: [globalStyles(), globalDnDStyle, expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? extendedHoverZoneNext() : extendedHoverZone(), isDragging && (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? extendedDragZoneNext : extendedDragZone), editorExperiment('platform_editor_preview_panel_responsiveness', true, {
exposure: true
}) ? expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? extendHoverZoneReducedNext : extendHoverZoneReduced : undefined,
// platform_editor_controls note: this allows drag handles to render on empty lines
toolbarFlagsEnabled ? undefined : withInlineNodeStyle, editorExperiment('platform_editor_block_control_optimise_render', true) ? quickInsertStyles : undefined, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? withRelativePosStyleNext : withRelativePosStyle, topLevelNodeMarginStyles, expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? withAnchorNameZindexStyleNext : withAnchorNameZindexStyle, expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && expValEquals('advanced_layouts', 'isEnabled', true) ? layoutColumnExtendedHoverZone : layoutColumnWithoutHoverZone, shouldRenderAnchors && (isDragging ? dragAnchorStyles : dragHandlerAnchorStyles)]
});
};