@atlaskit/editor-core 233.0.2 → 234.0.1

package/dist/es2019/ui/EditorContentContainer/styles/layout.js

@@ -1,886 +0,0 @@
-/* eslint-disable @atlaskit/volt-strict-mode/no-multiple-exports */
-/* eslint-disable @atlaskit/ui-styling-standard/use-compiled,
-	@repo/internal/deprecations/deprecation-ticket-required,
-	@atlaskit/ui-styling-standard/no-exported-styles */
-
-import { css } from '@emotion/react';
-import { blanketSelectionStyles, borderSelectionStyles, hideNativeBrowserTextSelectionStyles } from './selectionStyles';
-const gridMediumMaxWidth = 1024;
-const akEditorSelectedNodeClassName = 'ak-editor-selected-node';
-
-// Class names for the column resize divider widget — must stay in sync with main.ts in editor-plugin-layout
-const layoutColumnDividerClassName = 'layout-column-divider';
-const layoutColumnDividerRailClassName = 'layout-column-divider-rail';
-const layoutColumnDividerThumbClassName = 'layout-column-divider-thumb';
-
-/**
- * Styles for the column resize divider widget DOM elements.
- * Mirrors the pm-breakout-resize-handle-* pattern from resizerStyles.ts.
- * Applied only when advanced_layouts experiment is on.
- */
-/**
- * @deprecated This style has been migrated to Compiled CSS, under experiment platform_editor_core_static_css
- * If you need to make changes here, also update the corresponding style in
- * packages/editor/editor-core/src/ui/EditorContentContainer/EditorContentContainer-compiled.tsx
- * See EDITOR-7600 for more details: https://hello.jira.atlassian.cloud/jira/browse/EDITOR-7600
- */
-export const layoutColumnDividerStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
-  [`.${layoutColumnDividerClassName}`]: {
-    // Negative margin removes the applied 'gap' from the parent's flex box
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-    marginInline: '-15px 0px',
-    flexShrink: 0,
-    boxSizing: 'content-box',
-    cursor: 'col-resize',
-    position: 'relative',
-    zIndex: 2,
-    alignSelf: 'stretch',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
-    [`&:hover .${layoutColumnDividerRailClassName}`]: {
-      background: "var(--ds-background-selected, #E9F2FE)"
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
-    [`&:hover .${layoutColumnDividerThumbClassName}`]: {
-      background: "var(--ds-border-focused, #4688EC)"
-    }
-  },
-  // Rail and thumb styles intentionally mirror the breakout resize handle
-  // (see .pm-breakout-resize-handle-rail and .pm-breakout-resize-handle-thumb in resizerStyles.ts).
-  // If updating these styles, consider keeping both in sync.
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
-  [`.${layoutColumnDividerRailClassName}`]: {
-    width: 7,
-    height: '100%',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: "var(--ds-radius-small, 4px)",
-    transition: 'background-color 0.2s',
-    pointerEvents: 'none'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
-  [`.${layoutColumnDividerThumbClassName}`]: {
-    minWidth: 3,
-    height: 'clamp(27px, calc(100% - 32px), 96px)',
-    background: "var(--ds-border, #0B120E24)",
-    borderRadius: "var(--ds-radius-medium, 6px)",
-    pointerEvents: 'none',
-    position: 'sticky',
-    top: "var(--ds-space-150, 12px)",
-    bottom: "var(--ds-space-150, 12px)"
-  }
-});
-/**
- * Override divider marginInline for nested drag-and-drop,
- * since the layout section/column spacing changes.
- */
-/**
- * @deprecated This style has been migrated to Compiled CSS, under experiment platform_editor_core_static_css
- * If you need to make changes here, also update the corresponding style in
- * packages/editor/editor-core/src/ui/EditorContentContainer/EditorContentContainer-compiled.tsx
- * See EDITOR-7600 for more details: https://hello.jira.atlassian.cloud/jira/browse/EDITOR-7600
- */
-export const layoutColumnDividerStylesNestedDnD = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
-  [`.${layoutColumnDividerClassName}`]: {
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-    marginInline: '0 -7px'
-  }
-});
-const selectorForNotResizedLayoutInFulllWidthEditor = '.fabric-editor--full-width-mode .ProseMirror > .layoutSectionView-content-wrap';
-const selectorForNotResizedLayoutInFixedWidthEditor = '.ak-editor-content-area:not(.fabric-editor--full-width-mode) .ProseMirror > .layoutSectionView-content-wrap';
-const selectorForResizedLayoutInFullOrFixedWidthEditor = '.ProseMirror .fabric-editor-breakout-mark .layoutSectionView-content-wrap';
-const layoutResponsiveSelectedSelector = `&.selected, &:hover, &.selected.danger, &.${akEditorSelectedNodeClassName}:not(.danger)`;
-const layoutSelectedSelector = `&.selected, [data-empty-layout='true'], &:hover, &.selected.danger [data-layout-section], &.${akEditorSelectedNodeClassName}:not(.danger) [data-layout-section]`;
-
-/**
- * Layout columns styles when advanced layouts experiment is on
- */
-/**
- * @deprecated This style has been migrated to Compiled CSS, under experiment platform_editor_core_static_css
- * If you need to make changes here, also update the corresponding style in
- * packages/editor/editor-core/src/ui/EditorContentContainer/EditorContentContainer-compiled.tsx
- * See EDITOR-7600 for more details: https://hello.jira.atlassian.cloud/jira/browse/EDITOR-7600
- */
-export const layoutColumnStylesAdvanced = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.ProseMirror [data-layout-section]': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '> [data-layout-column]': {
-      margin: '0 4px'
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
-    '> [data-layout-column]:first-of-type': {
-      marginLeft: 0
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
-    '> [data-layout-column]:last-of-type': {
-      marginRight: 0
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
-    [`@media screen and (max-width: ${gridMediumMaxWidth}px)`]: {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-      '[data-layout-column] + [data-layout-column]': {
-        margin: 0
-      }
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
-    [`> [data-layout-column].${akEditorSelectedNodeClassName}:not(.danger)`]: [
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    blanketSelectionStyles,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    hideNativeBrowserTextSelectionStyles, {
-      // layout column selection shorter after layout border has been removed
-      '::before': {
-        width: 'calc(100% - 8px)',
-        left: 4,
-        borderRadius: "var(--ds-radius-small, 3px)"
-      }
-    }]
-  }
-});
-
-/**
- * Layout column resize styles.
- */
-/**
- * @deprecated This style has been migrated to Compiled CSS, under experiment platform_editor_core_static_css
- * If you need to make changes here, also update the corresponding style in
- * packages/editor/editor-core/src/ui/EditorContentContainer/EditorContentContainer-compiled.tsx
- * See EDITOR-7600 for more details: https://hello.jira.atlassian.cloud/jira/browse/EDITOR-7600
- */
-export const layoutColumnResizeStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.ProseMirror [data-layout-section]': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '> [data-layout-column][style*="--column-width"]': {
-      // Support CSS custom property for smooth resizing during drag
-      // When --column-resize-width is set, use it; otherwise fall back to the original flex-basis
-      // Using attribute selector for higher specificity than inline styles
-      flexBasis: 'var(--column-resize-width, var(--column-width))',
-      // Also ensure flex-grow and flex-shrink are reset when using custom width
-      flex: 'var(--column-resize-flex, 1)'
-    }
-  }
-});
-
-/**
- * Layout columns styles when advanced layouts experiment is off
- */
-/**
- * @deprecated This style has been migrated to Compiled CSS, under experiment platform_editor_core_static_css
- * If you need to make changes here, also update the corresponding style in
- * packages/editor/editor-core/src/ui/EditorContentContainer/EditorContentContainer-compiled.tsx
- * See EDITOR-7600 for more details: https://hello.jira.atlassian.cloud/jira/browse/EDITOR-7600
- */
-export const layoutColumnStylesNotAdvanced = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.ProseMirror [data-layout-section]': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '[data-layout-column] + [data-layout-column]': {
-      // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-      marginLeft: 8
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
-    [`@media screen and (max-width: ${gridMediumMaxWidth}px)`]: {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-      '[data-layout-column] + [data-layout-column]': {
-        marginLeft: 0
-      }
-    }
-  }
-});
-
-/**
- * Responsive styles for layout columns when advanced layouts experiment is on
- */
-/**
- * @deprecated This style has been migrated to Compiled CSS, under experiment platform_editor_core_static_css
- * If you need to make changes here, also update the corresponding style in
- * packages/editor/editor-core/src/ui/EditorContentContainer/EditorContentContainer-compiled.tsx
- * See EDITOR-7600 for more details: https://hello.jira.atlassian.cloud/jira/browse/EDITOR-7600
- */
-export const layoutColumnResponsiveStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.ProseMirror [data-layout-section]': {
-    display: 'flex',
-    flexDirection: 'row',
-    gap: "var(--ds-space-100, 8px)",
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '& > *': {
-      flex: 1,
-      minWidth: 0
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '& > .unsupportedBlockView-content-wrap': {
-      minWidth: 'initial'
-    }
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '.layout-section-container': {
-    containerType: 'inline-size',
-    containerName: 'layout-area'
-  }
-});
-
-/**
- * Layout section styles when advanced layouts experiment is on
- */
-export const layoutDragHandleWrapperStylesLegacy = css({
-  // Legacy tooltips are portalled, so flattening every div does not affect their surface.
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.ProseMirror .layout-section-container [data-layout-section] > .ProseMirror-widget[data-blocks-drag-handle-container] div': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
-    display: 'contents !important'
-  }
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
-/**
- * @deprecated This style has been migrated to Compiled CSS, under experiment platform_editor_core_static_css
- * If you need to make changes here, also update the corresponding style in
- * packages/editor/editor-core/src/ui/EditorContentContainer/EditorContentContainer-compiled.tsx
- * See EDITOR-7600 for more details: https://hello.jira.atlassian.cloud/jira/browse/EDITOR-7600
- */
-export const layoutSectionStylesAdvanced = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.ProseMirror .layout-section-container [data-layout-section]': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '> .ProseMirror-widget': {
-      flex: 'none',
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
-      display: 'contents !important',
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-      '&[data-blocks-drop-target-container]': {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
-        display: 'block !important',
-        margin: "var(--ds-space-negative-050, -4px)",
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-        '[data-drop-target-for-element]': {
-          position: 'absolute'
-        }
-      },
-      // Column resize divider: always in DOM, hidden via opacity by default
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
-      [`&.${layoutColumnDividerClassName}`]: {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
-        display: 'block !important',
-        flex: 'none',
-        opacity: 0,
-        transition: 'opacity 0.2s'
-      },
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-      '& + [data-layout-column]': {
-        margin: 0
-      }
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '> [data-layout-column]': {
-      margin: 0
-    }
-  },
-  // On hover: fade in drag divider and hide the 1px separator
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
-  [`.ProseMirror .layoutSectionView-content-wrap:hover .layout-section-container [data-layout-section]`]: {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
-    [`> .ProseMirror-widget.${layoutColumnDividerClassName}`]: {
-      opacity: 1
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
-    [`> .ProseMirror-widget.${layoutColumnDividerClassName} ~ [data-layout-column] [data-layout-content]::before`]: {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
-      display: 'none !important'
-    }
-  }
-});
-
-/**
- * Layout section styles when advanced layouts experiment is off
- */
-/**
- * @deprecated This style has been migrated to Compiled CSS, under experiment platform_editor_core_static_css
- * If you need to make changes here, also update the corresponding style in
- * packages/editor/editor-core/src/ui/EditorContentContainer/EditorContentContainer-compiled.tsx
- * See EDITOR-7600 for more details: https://hello.jira.atlassian.cloud/jira/browse/EDITOR-7600
- */
-export const layoutSectionStylesNotAdvanced = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '.ProseMirror [data-layout-section]': {
-    position: 'relative',
-    display: 'flex',
-    flexDirection: 'row',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '& > *': {
-      flex: 1,
-      minWidth: 0
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '& > .unsupportedBlockView-content-wrap': {
-      minWidth: 'initial'
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
-    [`& > .${layoutColumnDividerClassName}`]: {
-      flex: 'none'
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    [`@media screen and (max-width: ${gridMediumMaxWidth}px)`]: {
-      flexDirection: 'column'
-    }
-  }
-});
-
-/**
- * Selected styles for layout when advanced layouts experiment is off
- */
-// TODO: DSP-4441 - Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.
-//       This is because the default state already uses the same token and, as such, the hover style won't change anything.
-//       https://product-fabric.atlassian.net/browse/DSP-4441
-/**
- * @deprecated This style has been migrated to Compiled CSS, under experiment platform_editor_core_static_css
- * If you need to make changes here, also update the corresponding style in
- * packages/editor/editor-core/src/ui/EditorContentContainer/EditorContentContainer-compiled.tsx
- * See EDITOR-7600 for more details: https://hello.jira.atlassian.cloud/jira/browse/EDITOR-7600
- */
-export const layoutSelectedStylesNotAdvanced = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.ProseMirror': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '[data-layout-section], .layoutSectionView-content-wrap': {
-      // Shows the border when cursor is inside a layout
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-      '&.selected [data-layout-column], &:hover [data-layout-column]': {
-        border: `1px solid ${"var(--ds-border, #0B120E24)"}`
-      },
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-      '&.selected.danger [data-layout-column]': {
-        backgroundColor: "var(--ds-background-danger, #FFECEB)",
-        borderColor: "var(--ds-border-danger, #E2483D)"
-      },
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
-      [`&.${akEditorSelectedNodeClassName}:not(.danger)`]: {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
-        '[data-layout-column]': [
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-        borderSelectionStyles,
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-        blanketSelectionStyles,
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-        hideNativeBrowserTextSelectionStyles, {
-          '::after': {
-            backgroundColor: 'transparent'
-          }
-        }]
-      }
-    }
-  }
-});
-
-// TODO: ED-28075 - inline rowSeparatorBaseStyles to unblock Compiled CSS migration
-const rowSeparatorBaseStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '[data-layout-content]::before': {
-    content: "''",
-    borderTop: `1px solid ${"var(--ds-border, #0B120E24)"}`,
-    position: 'absolute',
-    width: 'calc(100% - 32px)',
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-    marginTop: -13,
-    // clear styles for column separator
-    borderLeft: 'unset',
-    marginLeft: 'unset',
-    height: 'unset'
-  }
-});
-
-/**
- * Selected styles for layout when advanced layouts experiment is on
- */
-/**
- * @deprecated This style has been migrated to Compiled CSS, under experiment platform_editor_core_static_css
- * If you need to make changes here, also update the corresponding style in
- * packages/editor/editor-core/src/ui/EditorContentContainer/EditorContentContainer-compiled.tsx
- * See EDITOR-7600 for more details: https://hello.jira.atlassian.cloud/jira/browse/EDITOR-7600
- */
-export const layoutSelectedStylesAdvanced = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.ProseMirror': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '[data-layout-section], .layoutSectionView-content-wrap': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
-      [layoutSelectedSelector]: {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-        '[data-layout-column]:not(:first-of-type) [data-layout-content]::before': {
-          content: "''",
-          borderLeft: `1px solid ${"var(--ds-border, #0B120E24)"}`,
-          position: 'absolute',
-          height: 'calc(100% - 24px)',
-          // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-          marginLeft: -25
-        },
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-        '[data-layout-column]:is([data-valign="middle"], [data-valign="bottom"]):not(:first-of-type) [data-layout-content]::before': {
-          top: "var(--ds-space-150, 12px)"
-        }
-      },
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-      '&.selected.danger [data-layout-section]': {
-        backgroundColor: "var(--ds-background-danger, #FFECEB)",
-        boxShadow: `0 0 0 1px ${"var(--ds-border-danger, #E2483D)"}`,
-        borderRadius: "var(--ds-radius-small, 4px)"
-      },
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
-      [`&.${akEditorSelectedNodeClassName}:not(.danger) [data-layout-section]`]: {
-        boxShadow: `0 0 0 1px ${"var(--ds-border-selected, #1868DB)"}`,
-        borderRadius: "var(--ds-radius-small, 4px)",
-        backgroundColor: "var(--ds-background-selected, #E9F2FE)",
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
-        '[data-layout-column]': [
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-        blanketSelectionStyles,
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-        hideNativeBrowserTextSelectionStyles, {
-          border: 0,
-          '::before': {
-            backgroundColor: 'transparent'
-          }
-        }]
-      }
-    }
-  }
-});
-
-// Fix for layoutSelectedStylesAdvanced that addresses an issue where the delete indicator
-// sometimes doesn't appear when inside a synced block.
-// Separated as a distinct style to allow feature-gating without affecting module-level styles.
-// This prevents style inconsistencies before the feature flag is initialized.
-/**
- * @deprecated This style has been migrated to Compiled CSS, under experiment platform_editor_core_static_css
- * If you need to make changes here, also update the corresponding style in
- * packages/editor/editor-core/src/ui/EditorContentContainer/EditorContentContainer-compiled.tsx
- * See EDITOR-7600 for more details: https://hello.jira.atlassian.cloud/jira/browse/EDITOR-7600
- */
-export const layoutSelectedStylesAdvancedFix = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.ProseMirror': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '[data-layout-section], .layoutSectionView-content-wrap': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-      '&.selected.danger [data-layout-section]': {
-        boxShadow: `inset 0 0 0 1px ${"var(--ds-border-danger, #E2483D)"}`
-      },
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
-      [`&.${akEditorSelectedNodeClassName}:not(.danger) [data-layout-section]`]: {
-        boxShadow: `inset 0 0 0 1px ${"var(--ds-border-selected, #1868DB)"}`
-      }
-    }
-  }
-});
-
-/**
- * Base responsive styles for layout
- */
-// jest warning: JSDOM version (22) doesn't support the new @container CSS rule
-/**
- * @deprecated This style has been migrated to Compiled CSS, under experiment platform_editor_core_static_css
- * If you need to make changes here, also update the corresponding style in
- * packages/editor/editor-core/src/ui/EditorContentContainer/EditorContentContainer-compiled.tsx
- * See EDITOR-7600 for more details: https://hello.jira.atlassian.cloud/jira/browse/EDITOR-7600
- */
-export const layoutResponsiveBaseStyles = css({
-  // chosen breakpoints in container queries are to make sure layout responsiveness in editor aligns with renderer
-  // not resized layout in full-width editor
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
-  [selectorForNotResizedLayoutInFulllWidthEditor]: {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '[data-layout-section]': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-container-queries
-      '@container editor-area (max-width:724px)': {
-        flexDirection: 'column'
-      }
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
-    [layoutResponsiveSelectedSelector]: {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
-      '[data-layout-column]:not(:first-of-type)': {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-container-queries,@atlaskit/ui-styling-standard/no-unsafe-values
-        [`@container editor-area (max-width:724px)`]: rowSeparatorBaseStyles
-      }
-    }
-  },
-  // not resized layout in fixed-width editor
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
-  [selectorForNotResizedLayoutInFixedWidthEditor]: {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '[data-layout-section]': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-container-queries
-      '@container editor-area (max-width:788px)': {
-        flexDirection: 'column'
-      }
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
-    [layoutResponsiveSelectedSelector]: {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
-      '[data-layout-column]:not(:first-of-type)': {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-container-queries,@atlaskit/ui-styling-standard/no-unsafe-values
-        [`@container editor-area (max-width:788px)`]: rowSeparatorBaseStyles
-      }
-    }
-  },
-  // resized layout in full/fixed-width editor
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
-  [selectorForResizedLayoutInFullOrFixedWidthEditor]: {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '[data-layout-section]': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-container-queries
-      '@container editor-area (max-width:820px)': {
-        flexDirection: 'column'
-      }
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
-    [layoutResponsiveSelectedSelector]: {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
-      '[data-layout-column]:not(:first-of-type)': {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-container-queries,@atlaskit/ui-styling-standard/no-unsafe-values
-        [`@container editor-area (max-width:820px)`]: rowSeparatorBaseStyles
-      }
-    }
-  }
-});
-
-/**
- * Responsive styles for layout in view mode
- */
-/**
- * @deprecated This style has been migrated to Compiled CSS, under experiment platform_editor_core_static_css
- * If you need to make changes here, also update the corresponding style in
- * packages/editor/editor-core/src/ui/EditorContentContainer/EditorContentContainer-compiled.tsx
- * See EDITOR-7600 for more details: https://hello.jira.atlassian.cloud/jira/browse/EDITOR-7600
- */
-export const layoutResponsiveStylesForView = css({
-  // chosen breakpoints in container queries are to make sure layout responsiveness in editor aligns with renderer
-  // not resized layout in full-width editor
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
-  [selectorForNotResizedLayoutInFulllWidthEditor]: {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
-    [layoutResponsiveSelectedSelector]: {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
-      '[data-layout-column]:not(:first-of-type)': {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-container-queries,@atlaskit/ui-styling-standard/no-unsafe-values
-        [`@container editor-area (max-width:724px)`]: {
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-          '[data-layout-content]::before': {
-            borderTop: 0
-          }
-        }
-      }
-    }
-  },
-  // not resized layout in fixed-width editor
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
-  [selectorForNotResizedLayoutInFixedWidthEditor]: {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
-    [layoutResponsiveSelectedSelector]: {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
-      '[data-layout-column]:not(:first-of-type)': {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-container-queries,@atlaskit/ui-styling-standard/no-unsafe-values
-        [`@container editor-area (max-width:788px)`]: {
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-          '[data-layout-content]::before': {
-            borderTop: 0
-          }
-        }
-      }
-    }
-  },
-  // resized layout in full/fixed-width editor
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
-  [selectorForResizedLayoutInFullOrFixedWidthEditor]: {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
-    [layoutResponsiveSelectedSelector]: {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
-      '[data-layout-column]:not(:first-of-type)': {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-container-queries,@atlaskit/ui-styling-standard/no-unsafe-values
-        [`@container editor-area (max-width:820px)`]: {
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-          '[data-layout-content]::before': {
-            borderTop: 0
-          }
-        }
-      }
-    }
-  }
-});
-
-/**
- * Base styles for layout
- */
-/**
- * @deprecated This style has been migrated to Compiled CSS, under experiment platform_editor_core_static_css
- * If you need to make changes here, also update the corresponding style in
- * packages/editor/editor-core/src/ui/EditorContentContainer/EditorContentContainer-compiled.tsx
- * See EDITOR-7600 for more details: https://hello.jira.atlassian.cloud/jira/browse/EDITOR-7600
- */
-export const layoutBaseStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-nested-selectors
-  '.ProseMirror': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '[data-layout-section]': {
-      margin: `${"var(--ds-space-100, 8px)"} -12px 0`,
-      transition: 'border-color 0.3s cubic-bezier(0.15, 1, 0.3, 1)',
-      cursor: 'pointer',
-      // Inner cursor located 26px from left
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-      '[data-layout-column]': {
-        flex: 1,
-        position: 'relative',
-        minWidth: 0,
-        /* disable 4 borders when in view mode and advanced layouts is on */
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-        border: `${"var(--ds-border-width, 1px)"} solid ${"var(--ds-border, #0B120E24)"}`,
-        borderRadius: "var(--ds-radius-small, 4px)",
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-        padding: "var(--ds-space-150, 12px)",
-        boxSizing: 'border-box',
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-        '> div': {
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-          '.pm-table-container': {
-            // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
-            width: '100% !important'
-          },
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-          '> .embedCardView-content-wrap:first-of-type .rich-media-item': {
-            marginTop: 0
-          },
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-          '> .mediaSingleView-content-wrap:first-of-type .rich-media-item': {
-            marginTop: 0
-          },
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-          '> .ProseMirror-gapcursor.-right:first-child + .mediaSingleView-content-wrap .rich-media-item, > style:first-child + .ProseMirror-gapcursor.-right + .mediaSingleView-content-wrap .rich-media-item, > .ProseMirror-gapcursor.-right:first-of-type + .embedCardView-content-wrap .rich-media-item': {
-            marginTop: 0
-          },
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-          '> .ProseMirror-gapcursor:first-child + span + .mediaSingleView-content-wrap .rich-media-item, > style:first-child + .ProseMirror-gapcursor + span + .mediaSingleView-content-wrap .rich-media-item': {
-            marginTop: 0
-          },
-          // Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down and shrinking layout's node selectable area (leniency margin)
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-          "> [data-node-type='decisionList']": {
-            // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-            'li:first-of-type [data-decision-wrapper]': {
-              marginTop: 0
-            }
-          }
-        },
-        // Make the 'content' fill the entire height of the layout column to allow click handler of layout section nodeview to target only data-layout-column
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-        '[data-layout-content]': {
-          height: '100%',
-          cursor: 'text',
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-          '.mediaGroupView-content-wrap': {
-            clear: 'both'
-          }
-        },
-        // Keep the editable content wrapper stretched so blank column space remains a text hit area.
-        // Apply vertical alignment to the wrapper contents rather than shrinking the wrapper itself.
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-        '&[data-valign="middle"] > [data-layout-content], &[data-valign="bottom"] > [data-layout-content]': {
-          display: 'flex',
-          flexDirection: 'column'
-        },
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-        '&[data-valign="middle"] > [data-layout-content]': {
-          justifyContent: 'center'
-        },
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-        '&[data-valign="bottom"] > [data-layout-content]': {
-          justifyContent: 'flex-end'
-        }
-      }
-    }
-  },
-  // hide separator when element is dragging on top of a layout column
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '[data-blocks-drop-target-container] ~ [data-layout-column] > [data-layout-content]::before': {
-    display: 'none'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.fabric-editor--full-width-mode .ProseMirror': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '[data-layout-section]': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-      '.pm-table-container': {
-        margin: '0 2px'
-      }
-    }
-  }
-});
-
-/**
- * Base styles overrides for layout columns when advanced layouts experiment is on
- */
-/**
- * @deprecated This style has been migrated to Compiled CSS, under experiment platform_editor_core_static_css
- * If you need to make changes here, also update the corresponding style in
- * packages/editor/editor-core/src/ui/EditorContentContainer/EditorContentContainer-compiled.tsx
- * See EDITOR-7600 for more details: https://hello.jira.atlassian.cloud/jira/browse/EDITOR-7600
- */
-export const layoutBaseStylesAdvanced = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.ProseMirror [data-layout-section] [data-layout-column]': {
-    border: 0
-  }
-});
-
-/**
- * Spacing overrides for nested drag-and-drop
- */
-// TODO: EDF-123 - Migrate away from gridSize
-// Recommendation: Replace directly with 7px
-// Ignored via go/ees007
-/**
- * @deprecated This style has been migrated to Compiled CSS, under experiment platform_editor_core_static_css
- * If you need to make changes here, also update the corresponding style in
- * packages/editor/editor-core/src/ui/EditorContentContainer/EditorContentContainer-compiled.tsx
- * See EDITOR-7600 for more details: https://hello.jira.atlassian.cloud/jira/browse/EDITOR-7600
- */
-export const layoutBaseStylesNestedDnd = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.ProseMirror [data-layout-section]': {
-    margin: `${"var(--ds-space-100, 8px)"} -20px 0`
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.ProseMirror [data-layout-section] [data-layout-column]': {
-    padding: '12px 20px'
-  }
-});
-
-/**
- * Spacing overrides for nested drag-and-drop,
- * excluding layouts inside bodied sync blocks
- */
-/**
- * @deprecated This style has been migrated to Compiled CSS, under experiment platform_editor_core_static_css
- * If you need to make changes here, also update the corresponding style in
- * packages/editor/editor-core/src/ui/EditorContentContainer/EditorContentContainer-compiled.tsx
- * See EDITOR-7600 for more details: https://hello.jira.atlassian.cloud/jira/browse/EDITOR-7600
- */
-export const layoutBaseStylesNestedDndExcludingBodiedSync = css({
-  // Apply -20px margin to all sections
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.ProseMirror [data-layout-section]': {
-    margin: `${"var(--ds-space-100, 8px)"} -20px 0`
-  },
-  // Reset to default margin when inside bodied sync block
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.ProseMirror [data-prosemirror-node-name="bodiedSyncBlock"] [data-layout-section]': {
-    margin: `${"var(--ds-space-100, 8px)"} -12px 0`
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.ProseMirror [data-layout-section] [data-layout-column]': {
-    padding: '12px 20px'
-  }
-});
-
-/**
- * Layout in view mode styles for selected state when advanced layouts experiment is on.
- */
-/**
- * @deprecated This style has been migrated to Compiled CSS, under experiment platform_editor_core_static_css
- * If you need to make changes here, also update the corresponding style in
- * packages/editor/editor-core/src/ui/EditorContentContainer/EditorContentContainer-compiled.tsx
- * See EDITOR-7600 for more details: https://hello.jira.atlassian.cloud/jira/browse/EDITOR-7600
- */
-export const layoutSelectedStylesForViewAdvanced = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.ProseMirror': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-nested-selectors
-    '[data-layout-section], .layoutSectionView-content-wrap': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-nested-selectors
-      [layoutSelectedSelector]: {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-        '[data-layout-column]:not(:first-of-type) [data-layout-content]::before': {
-          borderLeft: 0
-        }
-      },
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-      '&.selected.danger [data-layout-section]': {
-        boxShadow: `0 0 0 0 ${"var(--ds-border-danger, #E2483D)"}`
-      },
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values,@atlaskit/ui-styling-standard/no-nested-selectors
-      [`&.${akEditorSelectedNodeClassName}:not(.danger) [data-layout-section]`]: {
-        boxShadow: `0 0 0 0 ${"var(--ds-border-selected, #1868DB)"}`
-      }
-    }
-  }
-});
-
-/**
- * Layout in view mode styles for selected state when advanced layouts experiment is off.
- */
-/**
- * @deprecated This style has been migrated to Compiled CSS, under experiment platform_editor_core_static_css
- * If you need to make changes here, also update the corresponding style in
- * packages/editor/editor-core/src/ui/EditorContentContainer/EditorContentContainer-compiled.tsx
- * See EDITOR-7600 for more details: https://hello.jira.atlassian.cloud/jira/browse/EDITOR-7600
- */
-export const layoutSelectedStylesForViewNotAdvanced = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.ProseMirror': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-nested-selectors
-    '[data-layout-section], .layoutSectionView-content-wrap': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-      '&.selected [data-layout-column], &:hover [data-layout-column]': {
-        border: 0
-      }
-    }
-  }
-});
-
-/*
- * Layout in view mode styles, overrides over layout base styles
- */
-/**
- * @deprecated This style has been migrated to Compiled CSS, under experiment platform_editor_core_static_css
- * If you need to make changes here, also update the corresponding style in
- * packages/editor/editor-core/src/ui/EditorContentContainer/EditorContentContainer-compiled.tsx
- * See EDITOR-7600 for more details: https://hello.jira.atlassian.cloud/jira/browse/EDITOR-7600
- */
-export const layoutStylesForView = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.ProseMirror': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '[data-layout-section]': {
-      cursor: 'default',
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-      '[data-layout-column]': {
-        border: 0
-      }
-    }
-  }
-});
-
-/*
- * marginTop fixes for nested drag-and-drop
- */
-/**
- * @deprecated This style has been migrated to Compiled CSS, under experiment platform_editor_core_static_css
- * If you need to make changes here, also update the corresponding style in
- * packages/editor/editor-core/src/ui/EditorContentContainer/EditorContentContainer-compiled.tsx
- * See EDITOR-7600 for more details: https://hello.jira.atlassian.cloud/jira/browse/EDITOR-7600
- */
-export const layoutColumnMartinTopFixes = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.ProseMirror [data-layout-section] [data-layout-column] > div': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-    '> :nth-child(1 of :not(style, .ProseMirror-gapcursor, .ProseMirror-widget, span))': {
-      marginTop: 0
-    }
-  }
-});