@atlaskit/editor-core 207.6.0 → 207.7.0

package/dist/cjs/version-wrapper.js

@@ -5,4 +5,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.version = exports.name = void 0;
 var name = exports.name = "@atlaskit/editor-core";
-var version = exports.version = "207.6.0";
+var version = exports.version = "207.7.0";

package/dist/es2019/ui/Appearance/FullPage/FullPage.js

@@ -83,7 +83,19 @@ export const FullPageEditor = props => {
     interactionState
   } = useFullPageEditorPluginsStates(editorAPI);
   const viewMode = getEditorViewMode(editorViewModeState, props.preset);
-  const hasHadInteraction = fg('platform_editor_interaction_api_refactor') ? (interactionState === null || interactionState === void 0 ? void 0 : interactionState.interactionState) !== 'hasNotHadInteraction' : Boolean(interactionState === null || interactionState === void 0 ? void 0 : interactionState.hasHadInteraction);
+
+  // Remove all this logic when platform_editor_interaction_api_refactor is cleaned up
+  let hasHadInteraction;
+  if (fg('platform_editor_interaction_api_refactor')) {
+    // Warning: this logic is a cluster-f but `hasHadInteraction` depends on undefined being allowed
+    // in which case no class will be rendered at all. In this way we only set `hasHadInteraction to
+    // boolean when interactionState is not undefined.
+    if (interactionState) {
+      hasHadInteraction = interactionState.interactionState !== 'hasNotHadInteraction';
+    }
+  } else {
+    hasHadInteraction = interactionState === null || interactionState === void 0 ? void 0 : interactionState.hasHadInteraction;
+  }
   let toolbarDocking = useSharedPluginStateSelector(editorAPI, 'selectionToolbar.toolbarDocking');
   if (!toolbarDocking && fg('platform_editor_controls_toolbar_ssr_fix')) {
     var _editorAPI$selectionT, _editorAPI$selectionT2, _editorAPI$selectionT3;

package/dist/es2019/ui/Appearance/FullPage/FullPageContentArea.js

@@ -61,8 +61,14 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
       return containerRef.current;
     }
   }), []);
+
+  // Remove entire `hasHadInteraction` logic and prop when 'platform_editor_interaction_api_refactor' is cleaned up
   let interactionClassName;
-  if (props.hasHadInteraction && fg('platform_editor_no_cursor_on_live_doc_init')) {
+  if (fg('platform_editor_interaction_api_refactor')) {
+    // no-op and do not add any classes
+  } else if (
+  // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+  props.hasHadInteraction !== undefined && fg('platform_editor_no_cursor_on_live_doc_init')) {
     interactionClassName = props.hasHadInteraction ? 'ak-editor-has-interaction' : 'ak-editor-no-interaction';
   }
   const shouldSetHiddenDataAttribute = () => {

package/dist/es2019/ui/ContentStyles/media.js

@@ -196,6 +196,7 @@ export const mediaStyles = () => css`
 		box-shadow: ${akEditorSelectedBoxShadow};
 	}
 
+	// Remove when cleaning up platform_editor_interaction_api_refactor
 	.ak-editor-no-interaction #newFileExperienceWrapper {
 		box-shadow: none;
 	}

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

@@ -9,13 +9,11 @@ import React from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx, useTheme } from '@emotion/react';
-import { browser } from '@atlaskit/editor-common/browser';
 import { telepointerStyle, telepointerStyleWithInitialOnly } from '@atlaskit/editor-common/collab';
 import { EmojiSharedCssClassName, defaultEmojiHeight } from '@atlaskit/editor-common/emoji';
 import { MentionSharedCssClassName } from '@atlaskit/editor-common/mention';
-import { PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
 import { gapCursorStyles } from '@atlaskit/editor-common/selection';
-import { CodeBlockSharedCssClassName, GRID_GUTTER, SmartCardSharedCssClassName, blockMarksSharedStyles, codeBlockInListSafariFix, dateSharedStyle, expandClassNames, getSmartCardSharedStyles, gridStyles, indentationSharedStyles, listsSharedStyles, paragraphSharedStyles, shadowSharedStyle, smartCardSharedStyles, smartCardStyles, tasksAndDecisionsStyles, textColorStyles, unsupportedStyles, whitespaceSharedStyles } from '@atlaskit/editor-common/styles';
+import { GRID_GUTTER, blockMarksSharedStyles, dateSharedStyle, getSmartCardSharedStyles, gridStyles, indentationSharedStyles, listsSharedStyles, paragraphSharedStyles, shadowSharedStyle, smartCardSharedStyles, smartCardStyles, tasksAndDecisionsStyles, textColorStyles, unsupportedStyles, whitespaceSharedStyles } from '@atlaskit/editor-common/styles';
 import { blocktypeStyles } from '@atlaskit/editor-plugins/block-type/styles';
 import { findReplaceStyles } from '@atlaskit/editor-plugins/find-replace/styles';
 import { textHighlightStyle } from '@atlaskit/editor-plugins/paste-options-toolbar/styles';
@@ -27,7 +25,6 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { useThemeObserver } from '@atlaskit/tokens';
 import { InlineNodeViewSharedStyles } from '../../nodeviews/getInlineNodeViewProducer.styles';
-import { codeBlockStyles } from '../ContentStyles/code-block';
 import { dateStyles, dateVanillaStyles } from '../ContentStyles/date';
 import { expandStyles } from '../ContentStyles/expand';
 import { extensionStyles } from '../ContentStyles/extension';
@@ -37,8 +34,10 @@ import { taskDecisionStyles, vanillaTaskDecisionIconWithoutVisualRefresh as vani
 import { aiPanelBaseStyles, aiPanelDarkStyles } from './styles/ai-panel';
 import { annotationStyles } from './styles/annotationStyles';
 import { backgroundColorStyles } from './styles/backgroundColorStyles';
+import { codeBlockStyles, firstCodeBlockWithNoMargin, firstCodeBlockWithNoMarginOld } from './styles/codeBlockStyles';
 import { codeMarkStyles } from './styles/codeMarkStyles';
 import { embedCardStyles } from './styles/embedCardStyles';
+import { firstBlockNodeStyles, firstBlockNodeStylesOld } from './styles/firstBlockNodeStyles';
 import { layoutBaseStyles, layoutViewStyles } from './styles/layout';
 import { linkStyles, linkStylesOld } from './styles/link';
 import { mediaStyles } from './styles/mediaStyles';
@@ -146,12 +145,6 @@ const listsStyles = css`
 				margin-top: ${blockNodesVerticalMargin};
 			}
 		}
-
-		&:not([data-node-type='decisionList']) > li,
-	// This prevents https://product-fabric.atlassian.net/browse/ED-20924
-	&:not(.${SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER}) > li {
-			${browser.safari ? codeBlockInListSafariFix : ''}
-		}
 	}
 `;
 const reactEmojiStyles = css`
@@ -233,49 +226,6 @@ const placeholderWrapStyles = css({
     whiteSpace: 'nowrap'
   }
 });
-const firstBlockNodeStyles = css`
-	.ProseMirror {
-		> .${PanelSharedCssClassName.prefix},
-			> .${CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER},
-			> .${SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER},
-			> div[data-task-list-local-id],
-		> div[data-layout-section],
-		> .${expandClassNames.prefix} {
-			&:first-child {
-				margin-top: 0;
-			}
-		}
-
-		> hr:first-of-type {
-			margin-top: 0;
-		}
-	}
-`;
-const firstBlockNodeStylesNew = css`
-	.ProseMirror {
-		> .${PanelSharedCssClassName.prefix},
-			> .${CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER},
-			> .${SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER},
-			> div[data-task-list-local-id],
-		> div[data-layout-section],
-		> .${expandClassNames.prefix} {
-			&:first-child {
-				margin-top: 0;
-			}
-		}
-
-		> hr:first-child,
-		> .ProseMirror-widget:first-child + hr {
-			margin-top: 0;
-		}
-	}
-`;
-export const fixBlockControlStylesSSR = () => {
-  if (fg('platform_editor_element_dnd_nested_fix_patch_6')) {
-    return firstBlockNodeStylesNew;
-  }
-  return firstBlockNodeStyles;
-};
 
 // The breakpoint for small devices is 1266px, copied from getBreakpoint in platform/packages/editor/editor-common/src/ui/WidthProvider/index.tsx
 const akEditorBreakpointForSmallDevice = `1266px`;
@@ -395,7 +345,7 @@ const contentStyles = () => css`
 
 	${editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null}
 
-  ${codeBlockStyles()}
+  ${codeBlockStyles}
 
   ${blocktypeStyles()}
 
@@ -487,8 +437,6 @@ const contentStyles = () => css`
 
   ${resizerStyles}
 
-  ${fixBlockControlStylesSSR()}
-
   .panelView-content-wrap {
 		box-sizing: border-box;
 	}
@@ -636,7 +584,15 @@ const EditorContentContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     colorMode === 'dark' && aiPanelDarkStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    viewMode === 'view' && layoutViewStyles, isComment && commentEditorStyles, isFullPage && fullPageEditorStyles, fg('platform_editor_ssr_fix_lists') && listLayoutShiftFix],
+    viewMode === 'view' && layoutViewStyles, isComment && commentEditorStyles, isFullPage && fullPageEditorStyles, fg('platform_editor_ssr_fix_lists') && listLayoutShiftFix, fg('platform_editor_nested_dnd_styles_changes') ?
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    firstCodeBlockWithNoMargin :
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    firstCodeBlockWithNoMarginOld, fg('platform_editor_element_dnd_nested_fix_patch_6') ?
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    firstBlockNodeStyles :
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    firstBlockNodeStylesOld],
     "data-editor-scroll-container": isScrollable ? 'true' : undefined,
     "data-testid": "editor-content-container",
     style: {

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

@@ -0,0 +1,266 @@
+import { css } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+
+import { overflowShadowStyles } from './overflowShadowStyles';
+import { blanketSelectionStyles, boxShadowSelectionStyles, hideNativeBrowserTextSelectionStyles } from './selectionStyles';
+export const CodeBlockSharedCssClassName = {
+  CODEBLOCK_CONTAINER: 'code-block',
+  CODEBLOCK_START: 'code-block--start',
+  CODEBLOCK_END: 'code-block--end',
+  CODEBLOCK_CONTENT_WRAPPER: 'code-block-content-wrapper',
+  CODEBLOCK_LINE_NUMBER_GUTTER: 'line-number-gutter',
+  CODEBLOCK_CONTENT: 'code-content',
+  DS_CODEBLOCK: '[data-ds--code--code-block]',
+  CODEBLOCK_CONTENT_WRAPPED: 'code-content--wrapped',
+  CODEBLOCK_CONTAINER_LINE_NUMBER_WIDGET: 'code-content__line-number--wrapped'
+};
+const fontSize14px = `${14 / 16}rem`;
+const blockNodesVerticalMargin = '0.75rem';
+const gutterDangerOverlay = css({
+  '&::after': {
+    height: '100%',
+    content: "''",
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    width: '24px',
+    backgroundColor: "var(--ds-blanket-danger, #EF5C4814)"
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export const codeBlockStyles = 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
+    [`.${CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPED} > .${CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER} > .${CodeBlockSharedCssClassName.CODEBLOCK_CONTENT}`]: {
+      marginRight: "var(--ds-space-100, 8px)",
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      code: {
+        display: 'block',
+        wordBreak: 'break-word',
+        whiteSpace: 'pre-wrap'
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+    [`.${CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER} > .${CodeBlockSharedCssClassName.CODEBLOCK_CONTENT}`]: {
+      display: 'flex',
+      flex: 1,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      code: {
+        flexGrow: 1,
+        whiteSpace: 'pre'
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+    [`.${CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER}`]: {
+      '--ds--code--bg-color': 'transparent',
+      position: 'relative',
+      backgroundColor: "var(--ds-surface-raised, #FFFFFF)",
+      borderRadius: "var(--ds-border-radius, 3px)",
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
+      margin: `${blockNodesVerticalMargin} 0 0 0`,
+      fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
+      minWidth: 48,
+      cursor: 'pointer',
+      clear: 'both',
+      // This is necessary to allow for arrow key navigation in/out of code blocks in Firefox.
+      whiteSpace: 'normal',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '.code-block-gutter-pseudo-element::before': {
+        content: 'attr(data-label)'
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+      [`.${CodeBlockSharedCssClassName.CODEBLOCK_START}`]: {
+        position: 'absolute',
+        visibility: 'hidden',
+        height: '1.5rem',
+        top: 0,
+        left: 0
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+      [`.${CodeBlockSharedCssClassName.CODEBLOCK_END}`]: {
+        position: 'absolute',
+        visibility: 'hidden',
+        height: '1.5rem',
+        bottom: 0,
+        right: 0
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+      [`.${CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER}`]: [
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+      overflowShadowStyles, {
+        position: 'relative',
+        backgroundColor: "var(--ds-background-neutral, #091E420F)",
+        display: 'flex',
+        borderRadius: "var(--ds-border-radius, 3px)",
+        width: '100%',
+        counterReset: 'line',
+        overflowX: 'auto',
+        backgroundRepeat: 'no-repeat',
+        backgroundAttachment: 'local, local, local, local, scroll, scroll, scroll, scroll',
+        backgroundSize: `${"var(--ds-space-300, 24px)"} 100%,
+	                         ${"var(--ds-space-300, 24px)"} 100%,
+	                         ${"var(--ds-space-100, 8px)"} 100%,
+	                         ${"var(--ds-space-100, 8px)"} 100%,
+	                         ${"var(--ds-space-100, 8px)"} 100%,
+	                         1px 100%,
+	                         ${"var(--ds-space-100, 8px)"} 100%,
+	                         1px 100%`,
+        backgroundPosition: `0 0,
+	                             0 0,
+                               100% 0,
+                               100% 0,
+                               100% 0,
+                               100% 0,
+	                             0 0,
+	                             0 0`,
+        // Be careful if refactoring this; it is needed to keep arrow key navigation in Firefox consistent with other browsers.
+        overflowY: 'hidden'
+      }],
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+      [`.${CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER}`]: {
+        backgroundColor: "var(--ds-background-neutral, #091E420F)",
+        position: 'relative',
+        width: 'var(--lineNumberGutterWidth, 2rem)',
+        padding: "var(--ds-space-100, 8px)",
+        flexShrink: 0,
+        // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+        fontSize: fontSize14px,
+        boxSizing: 'content-box'
+      },
+      // This is a fix of marker of list item with code block.
+      // The list item marker in Chrome is aligned by the baseline of the text,
+      // that's why we need to add a text (content: "1") to the line number gutter to align
+      // the list item marker with the text.
+      // Without it, the list item marker will be aligned by the bottom of the code block. */
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+      [`.${CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER}::before`]: {
+        content: "'1'",
+        visibility: 'hidden',
+        // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+        fontSize: fontSize14px,
+        // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+        lineHeight: '1.5rem'
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+      [`.${CodeBlockSharedCssClassName.CODEBLOCK_CONTENT}`]: {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+        code: {
+          tabSize: 4,
+          cursor: 'text',
+          color: "var(--ds-text, #172B4D)",
+          borderRadius: "var(--ds-border-radius, 3px)",
+          margin: "var(--ds-space-100, 8px)",
+          // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+          fontSize: fontSize14px,
+          // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+          lineHeight: '1.5rem'
+        }
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+      [`.${CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER_LINE_NUMBER_WIDGET}`]: {
+        pointerEvents: 'none',
+        userSelect: 'none',
+        width: 'var(--lineNumberGutterWidth, 2rem)',
+        left: 0,
+        position: 'absolute',
+        // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+        fontSize: fontSize14px,
+        padding: `0px ${"var(--ds-space-100, 8px)"}`,
+        // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+        lineHeight: '1.5rem',
+        textAlign: 'right',
+        color: "var(--ds-text-subtlest, #505F79)",
+        boxSizing: 'content-box'
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    li: {
+      // if same list item has multiple code blocks we need top margin for all but first
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '> .code-block': {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
+        margin: `${blockNodesVerticalMargin} 0 0 0`
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
+      '> .code-block:first-child, > .ProseMirror-gapcursor:first-child + .code-block': {
+        marginTop: 0
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
+      '> div:last-of-type.code-block, > pre:last-of-type.code-block': {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
+        marginBottom: blockNodesVerticalMargin
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values,@atlaskit/ui-styling-standard/no-imported-style-values
+    [`.code-block.ak-editor-selected-node:not(.danger)`]: [
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    boxShadowSelectionStyles,
+    // 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],
+    // Danger when top level node
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.danger.code-block': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
+      boxShadow: `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
+      [`.${CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER}`]: [{
+        backgroundColor: "var(--ds-background-danger, #FFECEB)",
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+        color: "var(--ds-text-danger, #AE2E24)"
+      }, gutterDangerOverlay],
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+      [`.${CodeBlockSharedCssClassName.CODEBLOCK_CONTENT}`]: {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+        backgroundColor: "var(--ds-blanket-danger, #EF5C4814)"
+      }
+    },
+    // Danger when nested node
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.danger .code-block': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+      [`.${CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER}`]: [{
+        backgroundColor: "var(--ds-background-danger, #FFECEB)",
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+        color: "var(--ds-text-danger, #AE2E24)"
+      }, gutterDangerOverlay],
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+      [`.${CodeBlockSharedCssClassName.CODEBLOCK_CONTENT}`]: {
+        backgroundColor: "var(--ds-blanket-danger, #EF5C4814)"
+      }
+    }
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export const firstCodeBlockWithNoMargin = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.ak-editor-panel__content': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
+      '> .code-block:first-child, > .ProseMirror-widget:first-child + .code-block, > .ProseMirror-widget:first-child + .ProseMirror-widget + .code-block': {
+        // eslint-disable-next-line @atlaskit/design-system/use-tokens-space,@atlaskit/ui-styling-standard/no-important-styles
+        margin: '0!important'
+      }
+    }
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export const firstCodeBlockWithNoMarginOld = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.ak-editor-panel__content': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
+      '> .code-block:first-child': {
+        // eslint-disable-next-line @atlaskit/design-system/use-tokens-space,@atlaskit/ui-styling-standard/no-important-styles
+        margin: '0!important'
+      }
+    }
+  }
+});

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

@@ -0,0 +1,41 @@
+import { css } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+
+import { PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
+import { expandClassNames, SmartCardSharedCssClassName } from '@atlaskit/editor-common/styles';
+import { CodeBlockSharedCssClassName } from './codeBlockStyles';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export const firstBlockNodeStylesOld = 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-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+    [`> .${PanelSharedCssClassName.prefix}, > .${CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER}, > .${SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER}, > div[data-task-list-local-id], > div[data-layout-section], > .${expandClassNames.prefix}`]: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+      '&:first-child': {
+        marginTop: 0
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
+    '> hr:first-of-type': {
+      marginTop: 0
+    }
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export const firstBlockNodeStyles = 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-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
+    [`> .${PanelSharedCssClassName.prefix}, > .${CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER}, > .${SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER}, > div[data-task-list-local-id], > div[data-layout-section], > .${expandClassNames.prefix}`]: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+      '&:first-child': {
+        marginTop: 0
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
+    '> hr:first-child, > .ProseMirror-widget:first-child + hr': {
+      marginTop: 0
+    }
+  }
+});

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

@@ -0,0 +1,47 @@
+import { css } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export const overflowShadowStyles = css({
+  backgroundImage: `
+		linear-gradient(
+			to right,
+			${"var(--ds-background-neutral, #091E420F)"} ${"var(--ds-space-300, 24px)"},
+			transparent ${"var(--ds-space-300, 24px)"}
+		),
+		linear-gradient(
+			to right,
+			${"var(--ds-surface-raised, #FFFFFF)"} ${"var(--ds-space-300, 24px)"},
+			transparent ${"var(--ds-space-300, 24px)"}
+		),
+		linear-gradient(
+			to left,
+			${"var(--ds-background-neutral, #091E420F)"} ${"var(--ds-space-100, 8px)"},
+			transparent ${"var(--ds-space-100, 8px)"}
+		),
+		linear-gradient(
+			to left,
+			${"var(--ds-surface-raised, #FFFFFF)"} ${"var(--ds-space-100, 8px)"},
+			transparent ${"var(--ds-space-100, 8px)"}
+		),
+		linear-gradient(
+			to left,
+			${"var(--ds-shadow-overflow-spread, #091e4229)"} 0,
+			${"var(--ds-UNSAFE-transparent, transparent)"}  ${"var(--ds-space-100, 8px)"}
+		),
+		linear-gradient(
+			to left,
+			${"var(--ds-shadow-overflow-perimeter, #091e421f)"} 0,
+			${"var(--ds-UNSAFE-transparent, transparent)"}  ${"var(--ds-space-100, 8px)"}
+		),
+		linear-gradient(
+			to right,
+			${"var(--ds-shadow-overflow-spread, #091e4229)"} 0,
+			${"var(--ds-UNSAFE-transparent, transparent)"}  ${"var(--ds-space-100, 8px)"}
+		),
+		linear-gradient(
+			to right,
+			${"var(--ds-shadow-overflow-perimeter, #091e421f)"} 0,
+			${"var(--ds-UNSAFE-transparent, transparent)"}  ${"var(--ds-space-100, 8px)"}
+		)
+	`
+});

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

@@ -0,0 +1,71 @@
+import { css } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+
+// TODO: ED-28075 - refactor selection styles to unblock Compiled CSS migration
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export const hideNativeBrowserTextSelectionStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '&::selection,*::selection': {
+    backgroundColor: 'transparent'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
+  '&::-moz-selection,*::-moz-selection': {
+    backgroundColor: 'transparent'
+  }
+});
+
+// TODO: ED-28075 - refactor selection styles to unblock Compiled CSS migration
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export const borderSelectionStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
+  border: `1px solid ${"var(--ds-border-selected, #0C66E4)"}`,
+  // Fixes ED-15246: Trello card is visible through a border of a table border
+  '&::after': {
+    height: '100%',
+    content: '"\\00a0"',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
+    background: "var(--ds-border-selected, #0C66E4)",
+    position: 'absolute',
+    right: -1,
+    top: 0,
+    bottom: 0,
+    width: 1,
+    border: 'none',
+    display: 'inline-block'
+  }
+});
+
+// TODO: ED-28075 - refactor selection styles to unblock Compiled CSS migration
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export const boxShadowSelectionStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
+  boxShadow: `0 0 0 1px ${"var(--ds-border-selected, #0C66E4)"}`,
+  borderColor: 'transparent'
+});
+
+// TODO: ED-28075 - refactor selection styles to unblock Compiled CSS migration
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export const backgroundSelectionStyles = css({
+  backgroundColor: "var(--ds-background-selected, #E9F2FF)"
+});
+
+// TODO: ED-28075 - refactor selection styles to unblock Compiled CSS migration
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export const blanketSelectionStyles = css({
+  position: 'relative',
+  // Fixes ED-9263, where emoji or inline card in panel makes selection go outside the panel
+  // in Safari. Looks like it's caused by user-select: all in the emoji element
+  '-webkit-user-select': 'text',
+  '&::before': {
+    position: 'absolute',
+    content: "''",
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    width: '100%',
+    pointerEvents: 'none',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
+    zIndex: 12,
+    backgroundColor: "var(--ds-blanket-selected, #388BFF14)"
+  }
+});

package/dist/es2019/version-wrapper.js

@@ -1,2 +1,2 @@
 export const name = "@atlaskit/editor-core";
-export const version = "207.6.0";
+export const version = "207.7.0";

package/dist/esm/ui/Appearance/FullPage/FullPage.js

@@ -90,7 +90,19 @@ export var FullPageEditor = function FullPageEditor(props) {
     primaryToolbarState = _useFullPageEditorPlu.primaryToolbarState,
     interactionState = _useFullPageEditorPlu.interactionState;
   var viewMode = getEditorViewMode(editorViewModeState, props.preset);
-  var hasHadInteraction = fg('platform_editor_interaction_api_refactor') ? (interactionState === null || interactionState === void 0 ? void 0 : interactionState.interactionState) !== 'hasNotHadInteraction' : Boolean(interactionState === null || interactionState === void 0 ? void 0 : interactionState.hasHadInteraction);
+
+  // Remove all this logic when platform_editor_interaction_api_refactor is cleaned up
+  var hasHadInteraction;
+  if (fg('platform_editor_interaction_api_refactor')) {
+    // Warning: this logic is a cluster-f but `hasHadInteraction` depends on undefined being allowed
+    // in which case no class will be rendered at all. In this way we only set `hasHadInteraction to
+    // boolean when interactionState is not undefined.
+    if (interactionState) {
+      hasHadInteraction = interactionState.interactionState !== 'hasNotHadInteraction';
+    }
+  } else {
+    hasHadInteraction = interactionState === null || interactionState === void 0 ? void 0 : interactionState.hasHadInteraction;
+  }
   var toolbarDocking = useSharedPluginStateSelector(editorAPI, 'selectionToolbar.toolbarDocking');
   if (!toolbarDocking && fg('platform_editor_controls_toolbar_ssr_fix')) {
     var _editorAPI$selectionT, _editorAPI$selectionT2;

package/dist/esm/ui/Appearance/FullPage/FullPageContentArea.js

@@ -66,8 +66,14 @@ var Content = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }
     };
   }, []);
+
+  // Remove entire `hasHadInteraction` logic and prop when 'platform_editor_interaction_api_refactor' is cleaned up
   var interactionClassName;
-  if (props.hasHadInteraction && fg('platform_editor_no_cursor_on_live_doc_init')) {
+  if (fg('platform_editor_interaction_api_refactor')) {
+    // no-op and do not add any classes
+  } else if (
+  // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+  props.hasHadInteraction !== undefined && fg('platform_editor_no_cursor_on_live_doc_init')) {
     interactionClassName = props.hasHadInteraction ? 'ak-editor-has-interaction' : 'ak-editor-no-interaction';
   }
   var shouldSetHiddenDataAttribute = function shouldSetHiddenDataAttribute() {