@atlaskit/editor-plugin-block-controls/dist/cjs/ui/global-styles.js

Block controls plugin for @atlaskit/editor-core

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.GlobalStylesWrapper = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = require("@emotion/react");
var _hooks = require("@atlaskit/editor-common/hooks");
var _styles = require("@atlaskit/editor-common/styles");
var _toolbarFlagCheck = require("@atlaskit/editor-common/toolbar-flag-check");
var _whitespace = require("@atlaskit/editor-common/whitespace");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _constants = require("@atlaskit/theme/constants");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
var _consts = require("./consts");
var _domAttrName = require("./utils/dom-attr-name");
/**
 * @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

/**
 * 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(_domAttrName.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(_domAttrName.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(_domAttrName.NODE_ANCHOR_ATTR_NAME, "])");
var gutterPaddingWidth = function gutterPaddingWidth() {
  return (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? "".concat((0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), "px") : '100%';
};
var gutterPaddingLeft = function gutterPaddingLeft() {
  return (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? "-".concat((0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), "px") : '-100px';
};
var extendedHoverZone = function extendedHoverZone() {
  return (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".block-ctrl-drag-preview ".concat(dragHandlerAnchorSelector, "::after"), {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
    display: 'none !important'
  }), '.ProseMirror', (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "&& ".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(_consts.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(_consts.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(-_styles.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(_styles.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 (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".block-ctrl-drag-preview ".concat((0, _expValEquals.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', (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "&& ".concat((0, _expValEquals.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(_consts.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(_consts.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, "px"),
    height: '100%',
    cursor: 'default',
    zIndex: 1
  }), "&& ".concat((0, _expValEquals.expValEquals)('platform_editor_unify_native_dnd_selectors', 'isEnabled', true) ? dragHandlerAnchorSelectorWithTaskExclusion : dragHandlerAnchorSelectorNext, ":not([").concat(_domAttrName.NODE_ANCHOR_ATTR_NAME, "] [").concat(_domAttrName.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((0, _expValEquals.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((0, _expValEquals.expValEquals)('platform_editor_unify_native_dnd_selectors', 'isEnabled', true) ? dragHandlerAnchorSelectorWithTaskExclusion : dragHandlerAnchorSelectorNext, ":not([").concat(_domAttrName.NODE_ANCHOR_ATTR_NAME, "] [").concat(_domAttrName.NODE_ANCHOR_ATTR_NAME, "])::after"), {
    display: 'none'
  }));
};
var layoutColumnExtendedHoverZone = (0, _react.css)({
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.ProseMirror': (0, _defineProperty2.default)({}, "&&& ".concat((0, _expValEquals.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(-_styles.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(_styles.DRAG_HANDLE_WIDTH, "px"),
    cursor: 'default',
    zIndex: 1
  })
});
var layoutColumnWithoutHoverZone = (0, _react.css)({
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.ProseMirror': (0, _defineProperty2.default)({}, "&&& ".concat((0, _expValEquals.expValEquals)('platform_editor_unify_native_dnd_selectors', 'isEnabled', true) ? dragHandlerAnchorSelectorWithTaskExclusion : dragHandlerAnchorSelectorNext, "[data-layout-column]::after"), {
    display: 'none'
  })
});
var extendHoverZoneReduced = (0, _react.css)({
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.ProseMirror': (0, _defineProperty2.default)({}, "&& [data-drag-handler-anchor-depth=\"0\"]".concat(dragHandlerAnchorSelector, "::after"), (0, _defineProperty2.default)({}, "@container editor-area (max-width: ".concat(_editorSharedStyles.akEditorFullPageNarrowBreakout, "px)"), {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
    left: "-".concat(_editorSharedStyles.akEditorGutterPaddingReduced, "px"),
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
    width: "".concat(_editorSharedStyles.akEditorGutterPaddingReduced, "px")
  }))
});
var extendHoverZoneReducedNext = (0, _react.css)({
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.ProseMirror': (0, _defineProperty2.default)({}, "> ".concat((0, _expValEquals.expValEquals)('platform_editor_unify_native_dnd_selectors', 'isEnabled', true) ? dragHandlerAnchorSelectorWithTaskExclusion : dragHandlerAnchorSelectorNext, "::after"), (0, _defineProperty2.default)({}, "@container editor-area (max-width: ".concat(_editorSharedStyles.akEditorFullPageNarrowBreakout, "px)"), {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
    left: "-".concat(_editorSharedStyles.akEditorGutterPaddingReduced, "px"),
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
    width: "".concat(_editorSharedStyles.akEditorGutterPaddingReduced, "px")
  }))
});
var extendedDragZone = (0, _react.css)({
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.ProseMirror': (0, _defineProperty2.default)({}, "&& [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 = (0, _react.css)({
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.ProseMirror': (0, _defineProperty2.default)({}, "&& ".concat((0, _expValEquals.expValEquals)('platform_editor_unify_native_dnd_selectors', 'isEnabled', true) ? dragHandlerAnchorSelectorWithTaskExclusion : dragHandlerAnchorSelectorNext, ":not([").concat(_domAttrName.NODE_ANCHOR_ATTR_NAME, "] [").concat(_domAttrName.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 = (0, _react.css)((0, _defineProperty2.default)({}, withInlineNodeStyleSelectors, {
  transform: 'scale(0)'
}));
var legacyBreakoutWideLayoutStyle = (0, _react.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(_editorSharedStyles.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(_editorSharedStyles.akEditorCalculatedWideLayoutWidth, "px")
    }
  }
});
var globalDnDStyle = (0, _react.css)({
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.ProseMirror': {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
    '[data-layout-content]': {
      userDrag: 'none'
    }
  }
});
var globalStyles = function globalStyles() {
  return (0, _react.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 (0, _react.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: _constants.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(_styles.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(_styles.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: _constants.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 = (0, _react.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 = (0, _react.css)((0, _defineProperty2.default)({}, "".concat(dividerBodiedInCustomPanelWithNoIconSelector), {
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
  marginTop: '0 !important'
}));
var withDeleteLinesStyleFix = (0, _react.css)((0, _defineProperty2.default)({}, "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 = (0, _react.css)((0, _defineProperty2.default)({}, '.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 = (0, _react.css)((0, _defineProperty2.default)({}, "".concat(withFormatInLayoutStyleFixSelectors), {
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
  marginTop: '0 !important'
}));
var headingWithIndentationInLayoutStyleFix = (0, _react.css)((0, _defineProperty2.default)({}, "".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 = (0, _react.css)({
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.ProseMirror': (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "&& ".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(_whitespace.ZERO_WIDTH_SPACE, "\"")
  })
});
var withRelativePosStyleNext = (0, _react.css)({
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.ProseMirror': (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "&& ".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(_whitespace.ZERO_WIDTH_SPACE, "\"")
  })
});
var withAnchorNameZindexStyle = (0, _react.css)({
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.ProseMirror': {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
    '&& [data-drag-handler-anchor-depth="0"][data-drag-handler-anchor-name]': {
      zIndex: 1
    }
  }
});
var withAnchorNameZindexStyleNext = (0, _react.css)({
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.ProseMirror': (0, _defineProperty2.default)({}, "&& [".concat(_domAttrName.NODE_ANCHOR_ATTR_NAME, "]:not([").concat(_domAttrName.NODE_ANCHOR_ATTR_NAME, "] [").concat(_domAttrName.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 = (0, _react.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(_editorSharedStyles.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 = (0, _react.css)({
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.ProseMirror': {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
    '[data-testid="block-ctrl-decorator-widget"] + *': (0, _defineProperty2.default)({}, "".concat(nextAnchorSelector), {
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
      anchorName: "var(".concat(_styles.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"] + *': (0, _defineProperty2.default)({}, "".concat(nextAnchorSelector), {
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
      anchorName: "var(".concat(_styles.ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
    })
  }
});

// Styles applied to nodes with anchors when dragging
var dragAnchorStyles = (0, _react.css)({
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.ProseMirror': {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @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(_styles.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(_styles.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(_styles.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(_styles.ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
    }
  }
});
var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWrapper(_ref) {
  var api = _ref.api;
  var _useSharedPluginState = (0, _hooks.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 = (0, _expValEquals.expValEquals)('platform_editor_block_controls_perf_optimization', 'isEnabled', true) ? isDraggingFromState : false;
  var shouldRenderAnchors = (0, _styles.isCSSAnchorSupported)() && (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true);
  var toolbarFlagsEnabled = (0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(api === null || api === void 0 ? void 0 : api.toolbar));
  return (0, _react.jsx)(_react.Global
  // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
  , {
    styles: [globalStyles(), globalDnDStyle, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? extendedHoverZoneNext() : extendedHoverZone(), isDragging && ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? extendedDragZoneNext : extendedDragZone), (0, _experiments.editorExperiment)('platform_editor_preview_panel_responsiveness', true, {
      exposure: true
    }) ? (0, _expValEquals.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, (0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true) ? quickInsertStyles : undefined, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, (0, _experiments.editorExperiment)('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? withRelativePosStyleNext : withRelativePosStyle, topLevelNodeMarginStyles, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? withAnchorNameZindexStyleNext : withAnchorNameZindexStyle, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && (0, _expValEquals.expValEquals)('advanced_layouts', 'isEnabled', true) ? layoutColumnExtendedHoverZone : layoutColumnWithoutHoverZone, shouldRenderAnchors && (isDragging ? dragAnchorStyles : dragHandlerAnchorStyles)]
  });
};