@atlaskit/editor-core 233.0.2 → 234.0.0

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

@@ -1,325 +0,0 @@
-/* eslint-disable @atlaskit/ui-styling-standard/use-compiled,
-	@repo/internal/deprecations/deprecation-ticket-required,
-	@atlaskit/ui-styling-standard/no-exported-styles */
-
-import { css, keyframes } from '@emotion/react';
-import { BodiedSyncBlockSharedCssClassName, SyncBlockSharedCssClassName, SyncBlockLabelSharedCssClassName, SyncBlockStateCssClassName } from '@atlaskit/editor-common/sync-block';
-/**
- * @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 syncBlockStylesBase = css({
-  '@property --angle': {
-    syntax: '"<angle>"',
-    initialValue: '0deg',
-    inherits: 'false'
-  },
-  // 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-values, @atlaskit/ui-styling-standard/no-imported-style-values
-    [`.${SyncBlockSharedCssClassName.prefix}, .${BodiedSyncBlockSharedCssClassName.prefix}`]: {
-      position: 'relative',
-      cursor: 'pointer',
-      borderRadius: "var(--ds-radius-small, 3px)",
-      marginBottom: 0,
-      marginTop: "var(--ds-space-075, 6px)",
-      paddingBlock: "var(--ds-space-150, 12px)",
-      color: 'inherit',
-      /* Hover state */
-      '&:hover': {
-        // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-        boxShadow: `0px 0px 0px 1px ${"var(--ds-border, #0B120E24)"}`,
-        transition: 'box-shadow 200ms ease-in',
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
-        [`.${SyncBlockLabelSharedCssClassName.labelClassName}`]: {
-          opacity: 1,
-          visibility: 'visible',
-          transition: 'opacity 200ms ease-in, visibility 200ms ease-in'
-        }
-      },
-      /* Selection state when cursor inside sync block */
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
-      [`&.${BodiedSyncBlockSharedCssClassName.selectionInside}`]: {
-        boxShadow: `0 0 0 1px ${"var(--ds-border, #0B120E24)"}`,
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
-        [`.${SyncBlockLabelSharedCssClassName.labelClassName}`]: {
-          opacity: 1,
-          visibility: 'visible'
-        }
-      },
-      /* Node selection state */
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-      '&.ak-editor-selected-node': {
-        boxShadow: `0 0 0 1px var(--ak-editor-sync-block-selected-border-color, ${"var(--ds-border-focused, #4688EC)"})`,
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
-        [`.${SyncBlockLabelSharedCssClassName.labelClassName}`]: {
-          opacity: 1,
-          visibility: 'visible',
-          backgroundColor: `var(--ak-editor-sync-block-selected-label-background-color, ${"var(--ds-background-selected, #E9F2FE)"})`,
-          top: '-14px',
-          paddingBottom: "var(--ds-space-050, 4px)",
-          paddingTop: "var(--ds-space-050, 4px)",
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-          '> span': {
-            // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
-            color: `${"var(--ds-text-selected, #1868DB)"} !important`
-          }
-        }
-      },
-      /* Danger state */
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-      '&.danger': {
-        boxShadow: `0 0 0 1px ${"var(--ds-border-danger, #E2483D)"}`,
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-        '.ak-editor-panel__icon': {
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
-          color: `${"var(--ds-icon-danger, #C9372C)"} !important`
-        },
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
-        [`.${SyncBlockLabelSharedCssClassName.labelClassName}`]: {
-          backgroundColor: "var(--ds-background-danger, #FFECEB)",
-          top: '-14px',
-          paddingBottom: "var(--ds-space-050, 4px)",
-          paddingTop: "var(--ds-space-050, 4px)",
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-          '> span': {
-            // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
-            color: `${"var(--ds-text-danger, #AE2E24)"} !important`
-          }
-        }
-      },
-      /* Node disabled state */
-      // 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, @atlaskit/ui-styling-standard/no-imported-style-values
-      [`&.${SyncBlockStateCssClassName.disabledClassName}`]: {
-        backgroundColor: "var(--ds-background-disabled, #0515240F)",
-        boxShadow: `0 0 0 1px ${"var(--ds-border-disabled, #0515240F)"}`,
-        userSelect: 'none',
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values,  @atlaskit/ui-styling-standard/no-imported-style-values
-        [`.${SyncBlockLabelSharedCssClassName.labelClassName}`]: {
-          backgroundColor: "var(--ds-surface, #FFFFFF)",
-          '&::before': {
-            border: 'none'
-          }
-        }
-      },
-      /* Creation loading state */
-      // 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, @atlaskit/ui-styling-standard/no-imported-style-values
-      [`&.${SyncBlockStateCssClassName.creationLoadingClassName}`]: {
-        animation: `${keyframes({
-          from: {
-            '--angle': '0deg'
-          },
-          to: {
-            '--angle': '360deg'
-          }
-        })} 2s linear infinite`,
-        border: '1px solid transparent',
-        background: `linear-gradient(${"var(--ds-surface, #FFFFFF)"}, ${"var(--ds-surface, #FFFFFF)"}) padding-box, conic-gradient(from var(--angle), #1868DB, ${"var(--ds-background-accent-purple-subtlest-pressed, #E3BDFA)"}, #3279E0, #1868DB) border-box`,
-        backgroundClip: 'padding-box, border-box',
-        boxShadow: 'none',
-        transition: 'boxShadow 200ms ease-in',
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values,  @atlaskit/ui-styling-standard/no-imported-style-values
-        [`.${SyncBlockLabelSharedCssClassName.labelClassName}`]: {
-          display: 'none'
-        }
-      },
-      /* Error state */
-      /* In error state sync block should have disabled background colour */
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
-      [`:has(.${SyncBlockSharedCssClassName.error})`]: {
-        backgroundColor: "var(--ds-background-disabled, #0515240F)"
-      },
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
-      [`:has(.${SyncBlockSharedCssClassName.loading})`]: {
-        boxShadow: `0 0 0 1px ${"var(--ds-border, #0B120E24)"}`,
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
-        [`.${SyncBlockLabelSharedCssClassName.labelClassName}`]: {
-          opacity: 0,
-          visibility: 'hidden'
-        }
-      },
-      /* Live doc view mode state */
-      // 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, @atlaskit/ui-styling-standard/no-imported-style-values
-      [`&.${SyncBlockStateCssClassName.viewModeClassName}`]: {
-        boxShadow: 'none',
-        backgroundColor: 'unset',
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
-        [`.${SyncBlockLabelSharedCssClassName.labelClassName}`]: {
-          opacity: 0,
-          visibility: 'hidden'
-        }
-      },
-      /* Dragging state */
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
-      [`&.${SyncBlockStateCssClassName.draggingClassName}`]: {
-        boxShadow: `0 0 0 1px ${"var(--ds-border, #0B120E24)"}`,
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
-        [`.${SyncBlockLabelSharedCssClassName.labelClassName}`]: {
-          opacity: 1,
-          visibility: 'visible'
-        }
-      },
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
-      [`.${BodiedSyncBlockSharedCssClassName.content}`]: {
-        paddingTop: 0,
-        paddingBottom: 0,
-        // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-        paddingLeft: '19px',
-        // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-        paddingRight: '18px',
-        cursor: 'text'
-      },
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
-      [`.${SyncBlockSharedCssClassName.renderer}`]: {
-        paddingTop: 0,
-        paddingBottom: 0,
-        // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-        paddingLeft: '19px',
-        // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-        paddingRight: '18px'
-      }
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
-    [`.${BodiedSyncBlockSharedCssClassName.content}`]: {
-      // First child node that has drag handle widget next to it is overridden with marginTop: 0, see globalStyles in editor-plugin-block-controls/src/ui/global-styles.tsx
-      // Hence we set marginTop: 0 when by default to avoid flickering when hovering on and off the first node
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
-      '> :nth-child(1 of :not(style, .ProseMirror-gapcursor, .ProseMirror-widget, span))': {
-        marginTop: 0
-      }
-    },
-    // 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, @atlaskit/ui-styling-standard/no-imported-style-values
-    [`.${SyncBlockSharedCssClassName.renderer}`]: {
-      // First child node in bodiedSyncBlock is overridden with marginTop: 0, hence apply the same style to syncBlock for consistency
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
-      '.ak-renderer-document > :first-child': {
-        marginTop: 0
-      }
-    }
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
-  [`.${SyncBlockLabelSharedCssClassName.labelClassName}`]: {
-    borderRadius: "var(--ds-radius-small, 3px)",
-    position: 'absolute',
-    gap: "var(--ds-space-050, 4px)",
-    justifyContent: 'center',
-    alignItems: 'center',
-    display: 'flex',
-    opacity: 0,
-    visibility: 'hidden',
-    boxShadow: 'none',
-    zIndex: 1,
-    paddingLeft: "var(--ds-space-100, 8px)",
-    paddingRight: "var(--ds-space-100, 8px)",
-    top: '-10px',
-    right: "var(--ds-space-150, 12px)",
-    backgroundColor: "var(--ds-surface, #FFFFFF)",
-    maxWidth: '140px'
-  }
-});
-
-// Export the default styles with negative margins (original behavior)
-/**
- * @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
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/volt-strict-mode/no-multiple-exports
-export const syncBlockStyles = 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-values, @atlaskit/ui-styling-standard/no-imported-style-values
-    [`.${SyncBlockSharedCssClassName.prefix}, .${BodiedSyncBlockSharedCssClassName.prefix}`]: {
-      marginRight: `-19px`,
-      marginLeft: `-19px`
-    }
-  }
-});
-/**
- * @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
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/volt-strict-mode/no-multiple-exports
-export const syncBlockOverflowStyles = 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-values, @atlaskit/ui-styling-standard/no-imported-style-values
-    [`.${BodiedSyncBlockSharedCssClassName.content}`]: {
-      // Contain floated elements (wrap-left/wrap-right) within synced block borders
-      // Use display: flow-root to create a block formatting context without clipping other content e.g. telepointers
-      display: 'flow-root'
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
-    [`.${SyncBlockSharedCssClassName.renderer}`]: {
-      // Contain floated elements (wrap-left/wrap-right) within synced block borders
-      // Use display: flow-root to create a block formatting context without clipping other content e.g. telepointers
-      display: 'flow-root'
-    }
-  }
-});
-
-// Styles for text selection in reference 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
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/volt-strict-mode/no-multiple-exports
-export const syncBlockTextSelectionStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
-  [`.${SyncBlockSharedCssClassName.renderer}`]: {
-    // Show text cursor to indicate content is selectable
-    cursor: 'text',
-    // Remove browser focus outline on the contentEditable renderer wrapper
-    outline: 'none',
-    // Hide the blinking insertion caret. contentEditable="true" is set on
-    // the renderer to enable text selection, but the content is read-only.
-    caretColor: 'transparent',
-    // Override cursor: pointer set by the editor's layout styles on
-    // [data-layout-section] elements rendered inside the sync block content.
-    // Without this, layout nodes inside reference sync blocks show a pointer
-    // cursor instead of a text cursor.
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '[data-layout-section]': {
-      cursor: 'text'
-    }
-  },
-  // Suppress ProseMirror's selected-node box-shadow and backgroundColor on emojis inside
-  // the contentEditable renderer wrapper. PM applies .ak-editor-selected-node
-  // to inline nodes within contentEditable regions.
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
-  [`.ProseMirror .ak-editor-selected-node .${SyncBlockSharedCssClassName.renderer}`]: {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    'span[data-emoji-id], span[data-emoji-id] span': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
-      boxShadow: 'none !important',
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-      '&::before': {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
-        backgroundColor: 'transparent !important'
-      }
-    }
-  }
-});
-/**
- * @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
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/volt-strict-mode/no-multiple-exports
-export const syncBlockFirstNodeStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
-  [`.ProseMirror > .fabric-editor-breakout-mark:first-child`]: {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
-    [`.${SyncBlockSharedCssClassName.prefix}, .${BodiedSyncBlockSharedCssClassName.prefix}`]: {
-      marginTop: 0
-    }
-  }
-});