@atlaskit/editor-core 207.6.1 → 207.8.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @atlaskit/editor-core
 
+## 207.8.0
+
+### Minor Changes
+
+- [#160606](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/160606)
+  [`cd15d7ce813fb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cd15d7ce813fb) -
+  [https://product-fabric.atlassian.net/browse/ED-27746](ED-27746) - rewrite editor paragraph CSS in
+  static emotion
+- [#160652](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/160652)
+  [`907e9afb86169`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/907e9afb86169) -
+  [https://product-fabric.atlassian.net/browse/ED-27746](ED-27746) - rewrite editor tasks and
+  decisions CSS in static emotion
+
+### Patch Changes
+
+- Updated dependencies
+
+## 207.7.0
+
+### Minor Changes
+
+- [#157354](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/157354)
+  [`5d67631c09a7f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5d67631c09a7f) -
+  [https://product-fabric.atlassian.net/browse/ED-27746](ED-27746) - rewrite editor code block CSS
+  in static emotion
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 207.6.1
 
 ### Patch Changes

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

@@ -4,15 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.placeholderStyles = exports.fixBlockControlStylesSSR = exports.default = void 0;
+exports.placeholderStyles = exports.default = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
-var _browser = require("@atlaskit/editor-common/browser");
 var _collab = require("@atlaskit/editor-common/collab");
 var _emoji = require("@atlaskit/editor-common/emoji");
 var _mention = require("@atlaskit/editor-common/mention");
-var _panel = require("@atlaskit/editor-common/panel");
 var _selection = require("@atlaskit/editor-common/selection");
 var _styles = require("@atlaskit/editor-common/styles");
 var _styles2 = require("@atlaskit/editor-plugins/block-type/styles");
@@ -26,24 +24,27 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _tokens = require("@atlaskit/tokens");
 var _getInlineNodeViewProducer = require("../../nodeviews/getInlineNodeViewProducer.styles");
-var _codeBlock = require("../ContentStyles/code-block");
 var _date = require("../ContentStyles/date");
 var _expand = require("../ContentStyles/expand");
 var _extension = require("../ContentStyles/extension");
-var _panel2 = require("../ContentStyles/panel");
+var _panel = require("../ContentStyles/panel");
 var _status = require("../ContentStyles/status");
 var _tasksAndDecisions = require("../ContentStyles/tasks-and-decisions");
 var _aiPanel = require("./styles/ai-panel");
 var _annotationStyles = require("./styles/annotationStyles");
 var _backgroundColorStyles = require("./styles/backgroundColorStyles");
+var _codeBlockStyles = require("./styles/codeBlockStyles");
 var _codeMarkStyles = require("./styles/codeMarkStyles");
 var _embedCardStyles = require("./styles/embedCardStyles");
+var _firstBlockNodeStyles = require("./styles/firstBlockNodeStyles");
 var _layout = require("./styles/layout");
 var _link = require("./styles/link");
 var _mediaStyles = require("./styles/mediaStyles");
+var _paragraphStyles = require("./styles/paragraphStyles");
 var _resizerStyles = require("./styles/resizerStyles");
 var _rule = require("./styles/rule");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+var _tasksAndDecisionsStyles = require("./styles/tasksAndDecisionsStyles");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 /* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
 /* eslint-disable react-hooks/rules-of-hooks */
 /* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- Requires manual remediation over time due to use of unsafe nested mixins */
@@ -98,7 +99,7 @@ var vanillaMentionsStyles = (0, _react2.css)({
 });
 var vanillaSelectionStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t.danger {\n\t\t.editor-mention-primitive {\n\t\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\t\tbackground-color: ", ";\n\t\t}\n\t}\n\n\t.", " > .editor-mention-primitive,\n\t.", " > .editor-mention-primitive.mention-self,\n\t.", " > .editor-mention-primitive.mention-restricted {\n\t\t", "\n\t\t/* need to specify dark text colour because personal mentions\n\t\t   (in dark blue) have white text by default */\n\t\tcolor: ", "\n\t}\n"])), _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackgroundWithOpacity, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Background]), "var(--ds-text-subtle, #44546F)");
 var mentionsStyles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\t&.", " [data-mention-id] > span {\n\t\t\t", "\n\n\t\t\t/* need to specify dark text colour because personal mentions\n\t\t (in dark blue) have white text by default */\n\t  color: ", ";\n\t\t}\n\t}\n\n\t.danger {\n\t\t.", ".", "\n\t\t\t> span\n\t\t\t> span\n\t\t\t> span {\n\t\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\t\tbackground-color: ", ";\n\t\t}\n\t\t.", " > span > span > span {\n\t\t\tbackground-color: ", ";\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n"])), _mention.MentionSharedCssClassName.MENTION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Background]), "var(--ds-text-subtle, #44546F)", _mention.MentionSharedCssClassName.MENTION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackgroundWithOpacity, ")"), _mention.MentionSharedCssClassName.MENTION_CONTAINER, "var(--ds-background-neutral, #091E420F)", "var(--ds-text-subtle, #44546F)");
-var listsStyles = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\tli {\n\t\t\tposition: relative;\n\n\t\t\t> p:not(:first-child) {\n\t\t\t\tmargin: ", " 0 0 0;\n\t\t\t}\n\n\t\t\t// In SSR the above rule will apply to all p tags because first-child would be a style tag.\n\t\t\t// The following rule resets the first p tag back to its original margin\n\t\t\t// defined in packages/editor/editor-common/src/styles/shared/paragraph.ts\n\t\t\t> style:first-child + p {\n\t\t\t\tmargin-top: ", ";\n\t\t\t}\n\t\t}\n\n\t\t&:not([data-node-type='decisionList']) > li,\n\t// This prevents https://product-fabric.atlassian.net/browse/ED-20924\n\t&:not(.", ") > li {\n\t\t\t", "\n\t\t}\n\t}\n"])), "var(--ds-space-050, 4px)", _editorSharedStyles.blockNodesVerticalMargin, _styles.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _browser.browser.safari ? _styles.codeBlockInListSafariFix : '');
+var listsStyles = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\tli {\n\t\t\tposition: relative;\n\n\t\t\t> p:not(:first-child) {\n\t\t\t\tmargin: ", " 0 0 0;\n\t\t\t}\n\n\t\t\t// In SSR the above rule will apply to all p tags because first-child would be a style tag.\n\t\t\t// The following rule resets the first p tag back to its original margin\n\t\t\t// defined in packages/editor/editor-common/src/styles/shared/paragraph.ts\n\t\t\t> style:first-child + p {\n\t\t\t\tmargin-top: ", ";\n\t\t\t}\n\t\t}\n\t}\n"])), "var(--ds-space-050, 4px)", _editorSharedStyles.blockNodesVerticalMargin);
 var reactEmojiStyles = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\tdisplay: inline-block;\n\n\t\t.", " {\n\t\t\tcursor: pointer;\n\n\t\t\t&.", " > span {\n\t\t\t\t/** needed for selection style to cover custom emoji image properly */\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t}\n\n\t\t&.", " {\n\t\t\t.", ", .", " {\n\t\t\t\tborder-radius: 2px;\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t}\n"])), _emoji.EmojiSharedCssClassName.EMOJI_CONTAINER, _emoji.EmojiSharedCssClassName.EMOJI_NODE, _emoji.EmojiSharedCssClassName.EMOJI_IMAGE, _editorSharedStyles.akEditorSelectedNodeClassName, _emoji.EmojiSharedCssClassName.EMOJI_SPRITE, _emoji.EmojiSharedCssClassName.EMOJI_IMAGE, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket, _editorSharedStyles.SelectionStyle.BoxShadow]));
 var emojiStyles = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n\t[data-prosemirror-node-view-type='vanilla'] {\n\t\t.", " {\n\t\t\tdisplay: inline-block;\n\t\t}\n\n\t\t.", ", .", " {\n\t\t\tbackground: no-repeat transparent;\n\t\t\tdisplay: inline-block;\n\t\t\theight: ", "px;\n\t\t\tmax-height: ", "px;\n\t\t\tcursor: pointer;\n\t\t\tvertical-align: middle;\n\t\t\tuser-select: all;\n\t\t}\n\n\t\t&.", " {\n\t\t\t.", ", .", " {\n\t\t\t\tborder-radius: 2px;\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t}\n"])), _emoji.EmojiSharedCssClassName.EMOJI_CONTAINER, _emoji.EmojiSharedCssClassName.EMOJI_SPRITE, _emoji.EmojiSharedCssClassName.EMOJI_IMAGE, _emoji.defaultEmojiHeight, _emoji.defaultEmojiHeight, _editorSharedStyles.akEditorSelectedNodeClassName, _emoji.EmojiSharedCssClassName.EMOJI_SPRITE, _emoji.EmojiSharedCssClassName.EMOJI_IMAGE, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket, _editorSharedStyles.SelectionStyle.BoxShadow]));
 
@@ -135,27 +136,19 @@ var placeholderWrapStyles = (0, _react2.css)({
     whiteSpace: 'nowrap'
   }
 });
-var firstBlockNodeStyles = (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\t> .", ",\n\t\t\t> .", ",\n\t\t\t> .", ",\n\t\t\t> div[data-task-list-local-id],\n\t\t> div[data-layout-section],\n\t\t> .", " {\n\t\t\t&:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t> hr:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n"])), _panel.PanelSharedCssClassName.prefix, _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, _styles.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _styles.expandClassNames.prefix);
-var firstBlockNodeStylesNew = (0, _react2.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\t> .", ",\n\t\t\t> .", ",\n\t\t\t> .", ",\n\t\t\t> div[data-task-list-local-id],\n\t\t> div[data-layout-section],\n\t\t> .", " {\n\t\t\t&:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t> hr:first-child,\n\t\t> .ProseMirror-widget:first-child + hr {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n"])), _panel.PanelSharedCssClassName.prefix, _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, _styles.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _styles.expandClassNames.prefix);
-var fixBlockControlStylesSSR = exports.fixBlockControlStylesSSR = function fixBlockControlStylesSSR() {
-  if ((0, _platformFeatureFlags.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
 var akEditorBreakpointForSmallDevice = "1266px";
 
 // jest warning: JSDOM version (22) doesn't support the new @container CSS rule
 var contentStyles = function contentStyles() {
-  return (0, _react2.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: var(--ak-editor-base-font-size);\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\t}\n\n\t", "\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t *    https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\n\t", "\n\n\t", "\n\n\t", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n  ", ";\n\n\t", "\n\n\t", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  // Switch between the two icons based on the visual refresh feature gate\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n\t", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t// For FullPage only when inside a table\n\t// Related code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\t// In the \"editorContentAreaContainerStyle\" function\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n\t is bigger than the others, new ADS icon does not have this issue\n  */\n\t", "\n"])), _editorSharedStyles.akEditorGutterPadding, (0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), _editorSharedStyles.akEditorDefaultLayoutWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth, _editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, _editorSharedStyles.akEditorCalculatedWideLayoutWidth, _styles.whitespaceSharedStyles, (0, _styles.paragraphSharedStyles)(), _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, (0, _platformFeatureFlags.fg)('editor_request_to_edit_task') ? null : (0, _react2.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n\t\t\t\t\tpointer-events: none;\n\t\t\t\t\topacity: 0.7;\n\t\t\t\t}\n\t\t\t"]))), (0, _platformFeatureFlags.fg)('platform_editor_hide_cursor_when_pm_hideselection') ? (0, _react2.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, (0, _experiments.editorExperiment)('platform_editor_advanced_code_blocks', true) ? (0, _react2.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, "var(--ds-border-focused, #8cf)", _styles5.placeholderTextStyles, placeholderStyles, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, (0, _codeBlock.codeBlockStyles)(), (0, _styles2.blocktypeStyles)(), _codeMarkStyles.codeMarkStyles, _styles.textColorStyles, _backgroundColorStyles.backgroundColorStyles, listsStyles, _rule.ruleStyles, _mediaStyles.mediaStyles, (0, _platformFeatureFlags.fg)('confluence_team_presence_scroll_to_pointer') ? _collab.telepointerStyle : _collab.telepointerStyleWithInitialOnly, _selection.gapCursorStyles, (0, _panel2.panelStyles)(), mentionsStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
+  return (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: var(--ak-editor-base-font-size);\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\t}\n\n\t", "\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t *    https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\n\t", "\n\n\t", "\n\n\t", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n  ", ";\n\n\t", "\n\n\t", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  // Switch between the two icons based on the visual refresh feature gate\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n\t", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t// For FullPage only when inside a table\n\t// Related code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\t// In the \"editorContentAreaContainerStyle\" function\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n\t is bigger than the others, new ADS icon does not have this issue\n  */\n\t", "\n"])), _editorSharedStyles.akEditorGutterPadding, (0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), _editorSharedStyles.akEditorDefaultLayoutWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth, _editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, _editorSharedStyles.akEditorCalculatedWideLayoutWidth, _styles.whitespaceSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, (0, _platformFeatureFlags.fg)('editor_request_to_edit_task') ? null : (0, _react2.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n\t\t\t\t\tpointer-events: none;\n\t\t\t\t\topacity: 0.7;\n\t\t\t\t}\n\t\t\t"]))), (0, _platformFeatureFlags.fg)('platform_editor_hide_cursor_when_pm_hideselection') ? (0, _react2.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, (0, _experiments.editorExperiment)('platform_editor_advanced_code_blocks', true) ? (0, _react2.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, "var(--ds-border-focused, #8cf)", _styles5.placeholderTextStyles, placeholderStyles, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, _codeBlockStyles.codeBlockStyles, (0, _styles2.blocktypeStyles)(), _codeMarkStyles.codeMarkStyles, _styles.textColorStyles, _backgroundColorStyles.backgroundColorStyles, listsStyles, _rule.ruleStyles, _mediaStyles.mediaStyles, (0, _platformFeatureFlags.fg)('confluence_team_presence_scroll_to_pointer') ? _collab.telepointerStyle : _collab.telepointerStyleWithInitialOnly, _selection.gapCursorStyles, (0, _panel.panelStyles)(), mentionsStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
     exposure: false
   }) && vanillaMentionsStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
     exposure: false
   }) && vanillaSelectionStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
     exposure: false
-  }) ? emojiStyles : reactEmojiStyles, emojiStyles, _styles.tasksAndDecisionsStyles, _styles.gridStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _extension.extensionStyles, (0, _expand.expandStyles)(), _styles3.findReplaceStyles, _styles4.textHighlightStyle, _tasksAndDecisions.taskDecisionStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
+  }) ? emojiStyles : reactEmojiStyles, emojiStyles, _tasksAndDecisionsStyles.tasksAndDecisionsStyles, _styles.gridStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _extension.extensionStyles, (0, _expand.expandStyles)(), _styles3.findReplaceStyles, _styles4.textHighlightStyle, _tasksAndDecisions.taskDecisionStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
     exposure: false
   }) && _tasksAndDecisions.vanillaTaskItemStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
     exposure: false
@@ -163,7 +156,7 @@ var contentStyles = function contentStyles() {
     exposure: false
   }) && (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisions.vanillaTaskDecisionIconWithVisualRefresh, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
     exposure: false
-  }) && !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisions.vanillaTaskDecisionIconWithoutVisualRefresh, _status.statusStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true) ? (0, _status.vanillaStatusStyles)() : null, _annotationStyles.annotationStyles, (0, _styles.smartCardStyles)(), (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? (0, _styles.getSmartCardSharedStyles)() : _styles.smartCardSharedStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true) ? _date.dateVanillaStyles : null, _date.dateStyles, _embedCardStyles.embedCardStyles, _styles.unsupportedStyles, _resizerStyles.resizerStyles, fixBlockControlStylesSSR(), !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ? (0, _react2.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.hyperlink-open-link {\n\t\t\t\t\tmin-width: 24px;\n\t\t\t\t\tsvg {\n\t\t\t\t\t\tmax-width: 18px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"]))) : null);
+  }) && !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisions.vanillaTaskDecisionIconWithoutVisualRefresh, _status.statusStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true) ? (0, _status.vanillaStatusStyles)() : null, _annotationStyles.annotationStyles, (0, _styles.smartCardStyles)(), (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? (0, _styles.getSmartCardSharedStyles)() : _styles.smartCardSharedStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true) ? _date.dateVanillaStyles : null, _date.dateStyles, _embedCardStyles.embedCardStyles, _styles.unsupportedStyles, _resizerStyles.resizerStyles, !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ? (0, _react2.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.hyperlink-open-link {\n\t\t\t\t\tmin-width: 24px;\n\t\t\t\t\tsvg {\n\t\t\t\t\t\tmax-width: 18px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"]))) : null);
 };
 var CommentEditorMargin = 14;
 
@@ -233,7 +226,13 @@ var EditorContentContainer = /*#__PURE__*/_react.default.forwardRef(function (pr
     ref: ref,
     css: [contentStyles(),
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    (0, _layout.layoutBaseStyles)(),
+    (0, _layout.layoutBaseStyles)(), (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? (0, _platformFeatureFlags.fg)('platform-dst-jira-web-fonts') || (0, _platformFeatureFlags.fg)('confluence_typography_refreshed') || (0, _platformFeatureFlags.fg)('atlas_editor_typography_refreshed') ?
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _paragraphStyles.paragraphStylesUGCRefreshed :
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _paragraphStyles.paragraphStylesUGCModernized :
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _paragraphStyles.paragraphStylesOld,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     (0, _platformFeatureFlags.fg)('platform_editor_hyperlink_underline') ? _link.linkStyles : _link.linkStylesOld, (0, _experiments.editorExperiment)('platform_editor_breakout_resizing', true) &&
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
@@ -243,7 +242,15 @@ var EditorContentContainer = /*#__PURE__*/_react.default.forwardRef(function (pr
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     colorMode === 'dark' && _aiPanel.aiPanelDarkStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    viewMode === 'view' && _layout.layoutViewStyles, isComment && commentEditorStyles, isFullPage && fullPageEditorStyles, (0, _platformFeatureFlags.fg)('platform_editor_ssr_fix_lists') && listLayoutShiftFix],
+    viewMode === 'view' && _layout.layoutViewStyles, isComment && commentEditorStyles, isFullPage && fullPageEditorStyles, (0, _platformFeatureFlags.fg)('platform_editor_ssr_fix_lists') && listLayoutShiftFix, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ?
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _codeBlockStyles.firstCodeBlockWithNoMargin :
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _codeBlockStyles.firstCodeBlockWithNoMarginOld, (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_6') ?
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _firstBlockNodeStyles.firstBlockNodeStyles :
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _firstBlockNodeStyles.firstBlockNodeStylesOld],
     "data-editor-scroll-container": isScrollable ? 'true' : undefined,
     "data-testid": "editor-content-container",
     style: {

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

@@ -0,0 +1,216 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.firstCodeBlockWithNoMarginOld = exports.firstCodeBlockWithNoMargin = exports.codeBlockStyles = exports.CodeBlockSharedCssClassName = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("@emotion/react");
+var _overflowShadowStyles = require("./overflowShadowStyles");
+var _selectionStyles = require("./selectionStyles");
+// eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+
+var CodeBlockSharedCssClassName = exports.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'
+};
+var fontSize14px = "".concat(14 / 16, "rem");
+var blockNodesVerticalMargin = '0.75rem';
+var gutterDangerOverlay = (0, _react.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
+var codeBlockStyles = exports.codeBlockStyles = (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)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPED, " > .").concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, " > .").concat(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'
+    }
+  }), ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, " > .").concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTENT), {
+    display: 'flex',
+    flex: 1,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    code: {
+      flexGrow: 1,
+      whiteSpace: 'pre'
+    }
+  }), ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
+    '--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: "".concat(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)'
+    }
+  }, ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_START), {
+    position: 'absolute',
+    visibility: 'hidden',
+    height: '1.5rem',
+    top: 0,
+    left: 0
+  }), ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_END), {
+    position: 'absolute',
+    visibility: 'hidden',
+    height: '1.5rem',
+    bottom: 0,
+    right: 0
+  }), ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER), [
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+  _overflowShadowStyles.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)".concat(" 100%,\n\t                         ", "var(--ds-space-300, 24px)", " 100%,\n\t                         ", "var(--ds-space-100, 8px)", " 100%,\n\t                         ", "var(--ds-space-100, 8px)", " 100%,\n\t                         ", "var(--ds-space-100, 8px)", " 100%,\n\t                         1px 100%,\n\t                         ", "var(--ds-space-100, 8px)", " 100%,\n\t                         1px 100%"),
+    backgroundPosition: "0 0,\n\t                             0 0,\n                               100% 0,\n                               100% 0,\n                               100% 0,\n                               100% 0,\n\t                             0 0,\n\t                             0 0",
+    // Be careful if refactoring this; it is needed to keep arrow key navigation in Firefox consistent with other browsers.
+    overflowY: 'hidden'
+  }]), ".".concat(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'
+  }), ".".concat(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'
+  }), ".".concat(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'
+    }
+  }), ".".concat(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 ".concat("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'
+  })), "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: "".concat(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
+    }
+  }), ".code-block.ak-editor-selected-node:not(.danger)", [
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+  _selectionStyles.boxShadowSelectionStyles,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+  _selectionStyles.blanketSelectionStyles,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+  _selectionStyles.hideNativeBrowserTextSelectionStyles]), '.danger.code-block', (0, _defineProperty2.default)((0, _defineProperty2.default)({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
+    boxShadow: "0 0 0 1px ".concat("var(--ds-border-danger, #E2483D)")
+  }, ".".concat(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]), ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTENT), {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    backgroundColor: "var(--ds-blanket-danger, #EF5C4814)"
+  })), '.danger .code-block', (0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(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]), ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTENT), {
+    backgroundColor: "var(--ds-blanket-danger, #EF5C4814)"
+  }))
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var firstCodeBlockWithNoMargin = exports.firstCodeBlockWithNoMargin = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.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
+var firstCodeBlockWithNoMarginOld = exports.firstCodeBlockWithNoMarginOld = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.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/cjs/ui/EditorContentContainer/styles/firstBlockNodeStyles.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.firstBlockNodeStylesOld = exports.firstBlockNodeStyles = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("@emotion/react");
+var _panel = require("@atlaskit/editor-common/panel");
+var _styles = require("@atlaskit/editor-common/styles");
+var _codeBlockStyles = require("./codeBlockStyles");
+// eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var firstBlockNodeStylesOld = exports.firstBlockNodeStylesOld = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "> .".concat(_panel.PanelSharedCssClassName.prefix, ", > .").concat(_codeBlockStyles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, ", > .").concat(_styles.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, ", > div[data-task-list-local-id], > div[data-layout-section], > .").concat(_styles.expandClassNames.prefix), {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:first-child': {
+      marginTop: 0
+    }
+  }), '> hr:first-of-type', {
+    marginTop: 0
+  })
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var firstBlockNodeStyles = exports.firstBlockNodeStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "> .".concat(_panel.PanelSharedCssClassName.prefix, ", > .").concat(_codeBlockStyles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, ", > .").concat(_styles.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, ", > div[data-task-list-local-id], > div[data-layout-section], > .").concat(_styles.expandClassNames.prefix), {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:first-child': {
+      marginTop: 0
+    }
+  }), '> hr:first-child, > .ProseMirror-widget:first-child + hr', {
+    marginTop: 0
+  })
+});

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.overflowShadowStyles = void 0;
+var _react = require("@emotion/react");
+// eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var overflowShadowStyles = exports.overflowShadowStyles = (0, _react.css)({
+  backgroundImage: "\n\t\tlinear-gradient(\n\t\t\tto right,\n\t\t\t".concat("var(--ds-background-neutral, #091E420F)", " ", "var(--ds-space-300, 24px)", ",\n\t\t\ttransparent ", "var(--ds-space-300, 24px)", "\n\t\t),\n\t\tlinear-gradient(\n\t\t\tto right,\n\t\t\t", "var(--ds-surface-raised, #FFFFFF)", " ", "var(--ds-space-300, 24px)", ",\n\t\t\ttransparent ", "var(--ds-space-300, 24px)", "\n\t\t),\n\t\tlinear-gradient(\n\t\t\tto left,\n\t\t\t", "var(--ds-background-neutral, #091E420F)", " ", "var(--ds-space-100, 8px)", ",\n\t\t\ttransparent ", "var(--ds-space-100, 8px)", "\n\t\t),\n\t\tlinear-gradient(\n\t\t\tto left,\n\t\t\t", "var(--ds-surface-raised, #FFFFFF)", " ", "var(--ds-space-100, 8px)", ",\n\t\t\ttransparent ", "var(--ds-space-100, 8px)", "\n\t\t),\n\t\tlinear-gradient(\n\t\t\tto left,\n\t\t\t", "var(--ds-shadow-overflow-spread, #091e4229)", " 0,\n\t\t\t", "var(--ds-UNSAFE-transparent, transparent)", "  ", "var(--ds-space-100, 8px)", "\n\t\t),\n\t\tlinear-gradient(\n\t\t\tto left,\n\t\t\t", "var(--ds-shadow-overflow-perimeter, #091e421f)", " 0,\n\t\t\t", "var(--ds-UNSAFE-transparent, transparent)", "  ", "var(--ds-space-100, 8px)", "\n\t\t),\n\t\tlinear-gradient(\n\t\t\tto right,\n\t\t\t", "var(--ds-shadow-overflow-spread, #091e4229)", " 0,\n\t\t\t", "var(--ds-UNSAFE-transparent, transparent)", "  ", "var(--ds-space-100, 8px)", "\n\t\t),\n\t\tlinear-gradient(\n\t\t\tto right,\n\t\t\t", "var(--ds-shadow-overflow-perimeter, #091e421f)", " 0,\n\t\t\t", "var(--ds-UNSAFE-transparent, transparent)", "  ", "var(--ds-space-100, 8px)", "\n\t\t)\n\t")
+});

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

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.paragraphStylesUGCRefreshed = exports.paragraphStylesUGCModernized = exports.paragraphStylesOld = void 0;
+var _react = require("@emotion/react");
+// eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+
+var blockNodesVerticalMargin = '0.75rem';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var paragraphStylesUGCRefreshed = exports.paragraphStylesUGCRefreshed = (0, _react.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
+var paragraphStylesUGCModernized = exports.paragraphStylesUGCModernized = (0, _react.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
+var paragraphStylesOld = exports.paragraphStylesOld = (0, _react.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'
+  }
+});

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

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.hideNativeBrowserTextSelectionStyles = exports.boxShadowSelectionStyles = exports.borderSelectionStyles = exports.blanketSelectionStyles = exports.backgroundSelectionStyles = void 0;
+var _react = require("@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
+var hideNativeBrowserTextSelectionStyles = exports.hideNativeBrowserTextSelectionStyles = (0, _react.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
+var borderSelectionStyles = exports.borderSelectionStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
+  border: "1px solid ".concat("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
+var boxShadowSelectionStyles = exports.boxShadowSelectionStyles = (0, _react.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 ".concat("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
+var backgroundSelectionStyles = exports.backgroundSelectionStyles = (0, _react.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
+var blanketSelectionStyles = exports.blanketSelectionStyles = (0, _react.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)"
+  }
+});