@atlaskit/editor-core 207.6.1 → 207.8.0

package/dist/cjs/ui/EditorContentContainer/styles/tasksAndDecisionsStyles.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tasksAndDecisionsStyles = exports.TaskDecisionSharedCssClassName = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("@emotion/react");
+// eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+
+var akEditorLineHeight = 1.714;
+var TaskDecisionSharedCssClassName = exports.TaskDecisionSharedCssClassName = {
+  DECISION_CONTAINER: 'decisionItemView-content-wrap',
+  TASK_CONTAINER: 'taskItemView-content-wrap',
+  TASK_ITEM: 'task-item',
+  TASK_CHECKBOX_CONTAINER: 'task-item-checkbox-wrap'
+};
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var tasksAndDecisionsStyles = exports.tasksAndDecisionsStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".taskItemView-content-wrap, .".concat(TaskDecisionSharedCssClassName.DECISION_CONTAINER), {
+    position: 'relative',
+    minWidth: 48
+  }), ".".concat(TaskDecisionSharedCssClassName.DECISION_CONTAINER), {
+    marginTop: 0
+  }), ".".concat(TaskDecisionSharedCssClassName.TASK_CONTAINER), {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    "span[contenteditable='false']": {
+      height: "".concat(akEditorLineHeight, "em")
+    }
+  }), ".".concat(TaskDecisionSharedCssClassName.TASK_ITEM), {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: akEditorLineHeight
+  }),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  'div[data-task-local-id]': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    "span[contenteditable='false']": {
+      height: "".concat(akEditorLineHeight, "em")
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    "span[contenteditable='false'] + div": {
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+      lineHeight: "".concat(akEditorLineHeight, "em")
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  'div[data-task-list-local-id]': {
+    margin: "var(--ds-space-150, 12px)".concat(" 0 0 0"),
+    // If task item is not first in the list then set margin top to 4px.
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    'div + div': {
+      marginTop: "var(--ds-space-050, 4px)"
+    }
+  },
+  // If task list is not first in the document then set margin top to 4px.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  'div[data-task-list-local-id] div[data-task-list-local-id]': {
+    marginTop: "var(--ds-space-050, 4px)",
+    marginLeft: "var(--ds-space-300, 24px)"
+  },
+  // When action list is inside panel
+  // 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
+    '> div[data-task-list-local-id]:first-child': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+      margin: '0 !important'
+    }
+  }
+});

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.1";
+var version = exports.version = "207.8.0";

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, shadowSharedStyle, smartCardSharedStyles, smartCardStyles, 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,13 +34,17 @@ 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';
+import { paragraphStylesOld, paragraphStylesUGCModernized, paragraphStylesUGCRefreshed } from './styles/paragraphStyles';
 import { resizerStyles, pragmaticResizerStyles } from './styles/resizerStyles';
 import { ruleStyles } from './styles/rule';
+import { tasksAndDecisionsStyles } from './styles/tasksAndDecisionsStyles';
 const vanillaMentionsStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '.editor-mention-primitive': {
@@ -146,12 +147,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 +228,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`;
@@ -326,8 +278,6 @@ const contentStyles = () => css`
 
 		${whitespaceSharedStyles};
 
-		${paragraphSharedStyles()};
-
 		${listsSharedStyles};
 
 		${indentationSharedStyles};
@@ -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;
 	}
@@ -626,7 +574,13 @@ const EditorContentContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
     ref: ref,
     css: [contentStyles(),
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    layoutBaseStyles(),
+    layoutBaseStyles(), fg('platform_editor_typography_ugc') ? fg('platform-dst-jira-web-fonts') || fg('confluence_typography_refreshed') || fg('atlas_editor_typography_refreshed') ?
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    paragraphStylesUGCRefreshed :
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    paragraphStylesUGCModernized :
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    paragraphStylesOld,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     fg('platform_editor_hyperlink_underline') ? linkStyles : linkStylesOld, editorExperiment('platform_editor_breakout_resizing', true) &&
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
@@ -636,7 +590,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/paragraphStyles.js

@@ -0,0 +1,47 @@
+import { css } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+
+const blockNodesVerticalMargin = '0.75rem';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export const paragraphStylesUGCRefreshed = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.ProseMirror p': {
+    // The `editor.font.body` token is used for the UGC typography theme.
+    // We don't use `editorUGCToken('editor.font.body')` here because we want to build this styles statically.
+    // See platform/packages/editor/editor-common/src/ugc-tokens/get-editor-ugc-token.tsx
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    font: 'normal 400 1em/1.714 "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
+    marginTop: blockNodesVerticalMargin,
+    marginBottom: 0
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export const paragraphStylesUGCModernized = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.ProseMirror p': {
+    // The `editor.font.body` token is used for the UGC typography theme.
+    // We don't use `editorUGCToken('editor.font.body')` here because we want to build this styles statically.
+    // See platform/packages/editor/editor-common/src/ugc-tokens/get-editor-ugc-token.tsx
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    font: 'normal 400 1em/1.714 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
+    marginTop: blockNodesVerticalMargin,
+    marginBottom: 0
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export const paragraphStylesOld = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.ProseMirror p': {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    fontSize: '1em',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: 1.714,
+    fontWeight: "var(--ds-font-weight-regular, 400)",
+    marginTop: blockNodesVerticalMargin,
+    marginBottom: 0,
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    letterSpacing: '-0.005em'
+  }
+});