@atlaskit/renderer 114.3.0 → 114.3.2

package/dist/es2019/ui/annotations/draft/component.js

@@ -3,6 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
  * @jsxRuntime classic
  * @jsx jsx
  */
+
 import React, { Fragment } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
@@ -14,6 +15,7 @@ import { dataAttributes } from './dom';
 import { AnnotationSharedCSSByState } from '@atlaskit/editor-common/styles';
 import { segmentText } from '../../../react/utils/segment-text';
 import { renderTextSegments } from '../../../react/utils/render-text-segments';
+import { fg } from '@atlaskit/platform-feature-flags';
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
 const markStyles = () => css({
@@ -25,19 +27,38 @@ const markStyles = () => css({
 AnnotationSharedCSSByState().common,
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 AnnotationSharedCSSByState().focus);
+
+// Localized AnnotationSharedCSSByState().common and AnnotationSharedCSSByState().focus
+const markStylesNew = css({
+  color: 'inherit',
+  backgroundColor: 'unset',
+  WebkitTapHighlightColor: 'transparent',
+  borderBottom: '2px solid transparent',
+  cursor: 'pointer',
+  padding: '1px 0 2px',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '&:has(.card), &:has([data-inline-card])': {
+    padding: '5px 0 3px 0'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '&:has(.date-lozenger-container)': {
+    paddingTop: "var(--ds-space-025, 2px)"
+  },
+  background: "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)",
+  borderBottomColor: "var(--ds-border-accent-yellow, #B38600)",
+  boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #091E4226, 0px 0px 1px #091E424f)"
+});
 export const AnnotationDraft = ({
   draftPosition,
   children
 }) => {
-  return (
+  return jsx("mark", _extends({
+    "data-renderer-mark": true
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading
-    jsx("mark", _extends({
-      "data-renderer-mark": true
-    }, dataAttributes(draftPosition), {
-      css: markStyles
-    }), children)
-  );
+  }, dataAttributes(draftPosition), {
+    css: fg('platform_editor_emotion_refactor_renderer') ? markStylesNew : markStyles
+  }), children);
 };
 export const getAnnotationIndex = (annotationPosition, fragmentCount) => {
   if (annotationPosition === InsertDraftPosition.START) {

package/dist/es2019/ui/annotations/element/mark.js

@@ -11,9 +11,8 @@ import { AnnotationMarkStates } from '@atlaskit/adf-schema';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { useIntl } from 'react-intl-next';
 import { inlineCommentMessages } from '../../../messages';
-
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- `AnnotationSharedCSSByState` is not object-safe
-const markStyles = () => css`
+const markStylesOld = () => css`
 	color: inherit;
 	background-color: unset;
 	-webkit-tap-highlight-color: transparent;
@@ -31,12 +30,69 @@ const markStyles = () => css`
 		}
 	}
 `;
+const markStylesNew = css({
+  color: 'inherit',
+  backgroundColor: 'unset',
+  WebkitTapHighlightColor: 'transparent',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+  [`&[data-mark-annotation-state='${AnnotationMarkStates.ACTIVE}']`]: {
+    // was from blur in AnnotationSharedCSSByState().blur
+    background: "var(--ds-background-accent-yellow-subtlest, #FFF7D6)",
+    borderBottom: `2px solid ${"var(--ds-border-accent-yellow, #B38600)"}`,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&:focus, &[data-has-focus="true"]': {
+      background: "var(--ds-background-accent-yellow-subtler, #F8E6A0)",
+      borderBottom: `2px solid ${"var(--ds-border-accent-yellow, #B38600)"}`,
+      // TODO: DSP-4147 - Annotation shadow
+      boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #091E4226, 0px 0px 1px #091E424f)",
+      cursor: 'pointer'
+    }
+  }
+});
+const markStylesNewWithInlineComments = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+  [`&[data-mark-annotation-state='${AnnotationMarkStates.ACTIVE}']`]: {
+    // was from common in AnnotationSharedCSSByState().common
+    borderBottom: '2px solid transparent',
+    cursor: 'pointer',
+    padding: '1px 0 2px',
+    // it was under fg(annotations_align_editor_and_renderer_styles) from AnnotationSharedCSSByState().common, assume it's on as already rolled out
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:has(.card), &:has([data-inline-card])': {
+      padding: '5px 0 3px 0'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:has(.date-lozenger-container)': {
+      paddingTop: "var(--ds-space-025, 2px)"
+    },
+    // was from blur in AnnotationSharedCSSByState().blur
+    background: "var(--ds-background-accent-yellow-subtlest, #FFF7D6)",
+    borderBottomColor: "var(--ds-border-accent-yellow, #B38600)",
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&:focus, &[data-has-focus="true"]': {
+      background: "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)",
+      borderBottomColor: "var(--ds-border-accent-yellow, #B38600)",
+      boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #091E4226, 0px 0px 1px #091E424f)"
+    }
+  }
+});
+const markStylesNewWithCommentsPanel = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+  [`&[data-mark-annotation-state='${AnnotationMarkStates.ACTIVE}']`]: {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&[data-is-hovered="true"]:not([data-has-focus="true"])': {
+      background: "var(--ds-background-accent-yellow-subtlest-hovered, #F8E6A0)",
+      borderBottomColor: "var(--ds-border-accent-yellow, #B38600)",
+      boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #091E4226, 0px 0px 1px #091E424f)"
+    }
+  }
+});
 const isMobile = () => {
   // Ignored via go/ees005
   // eslint-disable-next-line require-unicode-regexp
   return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
 };
-const accessibilityStyles = (startMarker, endMarker) => css({
+const accessibilityStylesOld = (startMarker, endMarker) => css({
   '&::before, &::after': {
     clipPath: 'inset(100%)',
     clip: 'rect(1px, 1px, 1px, 1px)',
@@ -55,6 +111,25 @@ const accessibilityStyles = (startMarker, endMarker) => css({
     content: `' [${endMarker}] '`
   }
 });
+const accessibilityStylesNew = css({
+  '&::before, &::after': {
+    clipPath: 'inset(100%)',
+    clip: 'rect(1px, 1px, 1px, 1px)',
+    height: '1px',
+    overflow: 'hidden',
+    position: 'absolute',
+    whiteSpace: 'nowrap',
+    width: '1px'
+  },
+  '&::before': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+    content: `' [var(--ak-renderer-annotation-startmarker)] '`
+  },
+  '&::after': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+    content: `' [var(--ak-renderer-annotation-endmarker)] '`
+  }
+});
 export const MarkComponent = ({
   annotationParentIds,
   children,
@@ -127,25 +202,40 @@ export const MarkComponent = ({
     'aria-details': annotationIds.join(', '),
     ...desktopAccessibilityAttributes
   };
-  const getAccessibilityStyles = () => {
+  const getAccessibilityStylesOld = () => {
     if (isMobile()) {
       return {};
     }
     if (state !== AnnotationMarkStates.RESOLVED) {
       const startMarker = intl.formatMessage(inlineCommentMessages.contentRendererInlineCommentMarkerStart);
       const endMarker = intl.formatMessage(inlineCommentMessages.contentRendererInlineCommentMarkerEnd);
-      return accessibilityStyles(startMarker, endMarker);
+      return accessibilityStylesOld(startMarker, endMarker);
     } else {
       return {};
     }
   };
+  if (fg('platform_editor_emotion_refactor_renderer')) {
+    return jsx(useBlockLevel ? 'div' : 'mark', {
+      id,
+      [fg('editor_inline_comments_on_inline_nodes') ? 'onClickCapture' : 'onClick']: onMarkClick,
+      ...accessibility,
+      ...overriddenData,
+      ...(!useBlockLevel && {
+        css: [markStylesNew, fg('editor_inline_comments_on_inline_nodes') && markStylesNewWithInlineComments, fg('confluence-frontend-comments-panel') && markStylesNewWithCommentsPanel, !isMobile() && accessibilityStylesNew],
+        style: {
+          '--ak-renderer-annotation-startmarker': intl.formatMessage(inlineCommentMessages.contentRendererInlineCommentMarkerStart),
+          '--ak-renderer-annotation-endmarker': intl.formatMessage(inlineCommentMessages.contentRendererInlineCommentMarkerEnd)
+        }
+      })
+    }, children);
+  }
   return jsx(useBlockLevel ? 'div' : 'mark', {
     id,
     [fg('editor_inline_comments_on_inline_nodes') ? 'onClickCapture' : 'onClick']: onMarkClick,
     ...accessibility,
     ...overriddenData,
     ...(!useBlockLevel && {
-      css: [markStyles, getAccessibilityStyles()]
+      css: [markStylesOld, getAccessibilityStylesOld()]
     })
   }, children);
 };

package/dist/esm/react/marks/alignment.js

@@ -9,7 +9,8 @@ import React from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { alignmentPositionMap } from '@atlaskit/adf-schema';
-var MarkWrapper = function MarkWrapper(props) {
+import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
+var MarkWrapperOld = function MarkWrapperOld(props) {
   var styles = props['data-align'] ? // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
   css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\t\t\ttext-align: ", ";\n\t\t\t"])), alignmentPositionMap[props['data-align']]) : '';
   return jsx("div", _extends({
@@ -19,6 +20,17 @@ var MarkWrapper = function MarkWrapper(props) {
     // eslint-disable-next-line react/jsx-props-no-spreading
   }, props), props.children);
 };
+var MarkWrapperNew = function MarkWrapperNew(props) {
+  var dataAlign = props['data-align'] ? alignmentPositionMap[props['data-align']] : undefined;
+  return jsx("div", _extends({
+    style: {
+      textAlign: dataAlign
+    }
+    // Ignored via go/ees005
+    // eslint-disable-next-line react/jsx-props-no-spreading
+  }, props), props.children);
+};
+var MarkWrapper = componentWithFG('platform_editor_emotion_refactor_renderer', MarkWrapperNew, MarkWrapperOld);
 export default function Alignment(props) {
   return jsx(MarkWrapper
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766

package/dist/esm/react/nodes/codeBlock/components/codeBlockContainer.js

@@ -1,3 +1,4 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject;
 /**
@@ -10,11 +11,35 @@ import { overflowShadow, relativeFontSizeToBase16 } from '@atlaskit/editor-share
 import { N20 } from '@atlaskit/theme/colors';
 import { CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
 import CodeBlockButtonContainer from './codeBlockButtonContainer';
+import { fg } from '@atlaskit/platform-feature-flags';
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-var codeBlockStyleOverrides = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\ttab-size: 4;\n\tbackground-color: ", ";\n\n\t&:hover {\n\t\tbutton {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\n\tbutton {\n\t\topacity: 0;\n\t\ttransition: opacity 0.2s ease 0s;\n\t}\n\n\t", " {\n\t\tfont-size: ", ";\n\t\tline-height: 1.5rem;\n\t\tbackground-image: ", ";\n\t\tbackground-attachment: local, local, local, local, scroll, scroll, scroll, scroll;\n\t\tbackground-position:\n\t\t\t0 0,\n\t\t\t0 0,\n\t\t\t100% 0,\n\t\t\t100% 0,\n\t\t\t100% 0,\n\t\t\t100% 0,\n\t\t\t0 0,\n\t\t\t0 0;\n\t}\n"])), "var(--ds-surface-raised, ".concat(N20, ")"), CodeBlockSharedCssClassName.DS_CODEBLOCK, relativeFontSizeToBase16(14), overflowShadow({
+var codeBlockStyleOverridesOld = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\ttab-size: 4;\n\tbackground-color: ", ";\n\n\t&:hover {\n\t\tbutton {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\n\tbutton {\n\t\topacity: 0;\n\t\ttransition: opacity 0.2s ease 0s;\n\t}\n\n\t", " {\n\t\tfont-size: ", ";\n\t\tline-height: 1.5rem;\n\t\tbackground-image: ", ";\n\t\tbackground-attachment: local, local, local, local, scroll, scroll, scroll, scroll;\n\t\tbackground-position:\n\t\t\t0 0,\n\t\t\t0 0,\n\t\t\t100% 0,\n\t\t\t100% 0,\n\t\t\t100% 0,\n\t\t\t100% 0,\n\t\t\t0 0,\n\t\t\t0 0;\n\t}\n"])), "var(--ds-surface-raised, ".concat(N20, ")"), CodeBlockSharedCssClassName.DS_CODEBLOCK, relativeFontSizeToBase16(14), overflowShadow({
   leftCoverWidth: "var(--ds-space-300, 24px)"
 }));
+var codeBlockStyleOverridesNew = css(_defineProperty({
+  tabSize: 4,
+  backgroundColor: "var(--ds-surface-raised, ".concat(N20, ")"),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  button: {
+    opacity: 0,
+    transition: 'opacity 0.2s ease 0s'
+  },
+  '&:hover': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    button: {
+      opacity: 1
+    }
+  }
+}, "".concat(CodeBlockSharedCssClassName.DS_CODEBLOCK), {
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  fontSize: "".concat(14 / 16, "rem"),
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  lineHeight: '1.5rem',
+  backgroundImage: "linear-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\t),linear-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\t),linear-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\t),linear-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\t),linear-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\t),linear-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\t),linear-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\t),linear-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\t)"),
+  backgroundAttachment: 'local, local, local, local, scroll, scroll, scroll, scroll',
+  backgroundPosition: '0 0, 0 0, 100% 0, 100% 0, 100% 0, 100% 0, 0 0, 0 0'
+}));
 var CodeBlockContainer = function CodeBlockContainer(_ref) {
   var allowCopyToClipboard = _ref.allowCopyToClipboard,
     allowWrapCodeBlock = _ref.allowWrapCodeBlock,
@@ -23,18 +48,16 @@ var CodeBlockContainer = function CodeBlockContainer(_ref) {
     setWrapLongLines = _ref.setWrapLongLines,
     text = _ref.text,
     wrapLongLines = _ref.wrapLongLines;
-  return (
+  return jsx("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    jsx("div", {
-      className: className,
-      css: codeBlockStyleOverrides
-    }, jsx(CodeBlockButtonContainer, {
-      allowCopyToClipboard: allowCopyToClipboard,
-      allowWrapCodeBlock: allowWrapCodeBlock,
-      setWrapLongLines: setWrapLongLines,
-      text: text,
-      wrapLongLines: wrapLongLines
-    }), children)
-  );
+    className: className,
+    css: fg('platform_editor_emotion_refactor_renderer') ? codeBlockStyleOverridesNew : codeBlockStyleOverridesOld
+  }, jsx(CodeBlockButtonContainer, {
+    allowCopyToClipboard: allowCopyToClipboard,
+    allowWrapCodeBlock: allowWrapCodeBlock,
+    setWrapLongLines: setWrapLongLines,
+    text: text,
+    wrapLongLines: wrapLongLines
+  }), children);
 };
 export default CodeBlockContainer;

package/dist/esm/react/nodes/codeBlock/components/lightWeightCodeBlock.js

@@ -1,5 +1,9 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _templateObject, _templateObject2;
+/* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values */
+/* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-values */
+/* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors */
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -7,15 +11,124 @@ var _templateObject, _templateObject2;
 import React, { forwardRef, useMemo } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import { blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
+import { akEditorTableCellMinWidth, blockNodesVerticalMargin, overflowShadow } from '@atlaskit/editor-shared-styles';
 import { codeBlockSharedStyles, CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { useBidiWarnings } from '../../../hooks/use-bidi-warnings';
 import { RendererCssClassName } from '../../../../consts';
+import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
+var codeBlockSharedStylesNew = css(_defineProperty(_defineProperty(_defineProperty({}, ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPED, "\n\t\t> .").concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, "\n\t\t> .").concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTENT), {
+  marginRight: "var(--ds-space-100, 8px)",
+  code: {
+    display: 'block',
+    wordBreak: 'break-word',
+    whiteSpace: 'pre-wrap'
+  }
+}), ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, "\n\t\t> .").concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTENT), {
+  display: 'flex',
+  flex: 1,
+  code: {
+    flexGrow: 1,
+    whiteSpace: 'pre'
+  }
+}), ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+  position: 'relative',
+  backgroundColor: "var(--ds-surface-raised, #FFFFFF)",
+  borderRadius: "var(--ds-border-radius, 3px)",
+  margin: "".concat(blockNodesVerticalMargin, " 0 0 0"),
+  fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
+  minWidth: "".concat(akEditorTableCellMinWidth, "px"),
+  cursor: 'pointer',
+  clear: 'both',
+  '--ds--code--bg-color': 'transparent',
+  '.code-block-gutter-pseudo-element::before': {
+    content: '"attr(data-label)"'
+  },
+  /* This is necessary to allow for arrow key navigation in/out of code blocks in Firefox. */
+  whiteSpace: 'normal'
+}, ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_START), {
+  position: 'absolute',
+  visibility: 'hidden',
+  height: '1.5rem',
+  top: '0px',
+  left: '0px'
+}), "".concat(CodeBlockSharedCssClassName.CODEBLOCK_END), {
+  position: 'absolute',
+  visibility: 'hidden',
+  height: '1.5rem',
+  bottom: '0px',
+  right: '0px'
+}), ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER), {
+  position: 'relative',
+  backgroundColor: "var(--ds-background-neutral, #091E420F)",
+  display: 'flex',
+  borderRadius: "var(--ds-border-radius, 3px)",
+  width: '100%',
+  counterReset: 'line',
+  overflowX: 'auto',
+  backgroundImage: 'var(--ak-renderer-codeblock-content-wrapper-bg-img)',
+  backgroundRepeat: 'no-repeat',
+  backgroundAttachment: 'local, local, local, local, scroll, scroll, scroll, scroll',
+  backgroundSize: "var(--ds-space-300, 24px)".concat(" 100%,\n\t\t\t\t", "var(--ds-space-300, 24px)", " 100%,\n\t\t\t\t", "var(--ds-space-100, 8px)", " 100%,\n\t\t\t\t", "var(--ds-space-100, 8px)", " 100%,\n\t\t\t\t", "var(--ds-space-100, 8px)", " 100%,\n\t\t\t\t1px 100%,\n\t\t\t\t", "var(--ds-space-100, 8px)", " 100%,\n\t\t\t\t1px 100%"),
+  backgroundPosition: "0 0,\n\t\t\t\t0 0,\n\t\t\t\t100% 0,\n\t\t\t\t100% 0,\n\t\t\t\t100% 0,\n\t\t\t\t100% 0,\n\t\t\t\t0 0,\n\t\t\t\t0 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: "".concat(14 / 16, "rem"),
+  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: "".concat(14 / 16, "rem"),
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  lineHeight: '1.5rem'
+}), ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTENT), {
+  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: "".concat(14 / 16, "rem"),
+    // 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: "".concat(14 / 16, "rem"),
+  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'
+})));
+
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-var lightWeightCodeBlockStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t.", " {\n\t\tcursor: text;\n\t}\n"])), CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER);
+var lightWeightCodeBlockStylesOld = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t.", " {\n\t\tcursor: text;\n\t}\n"])), CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER);
+var lightWeightCodeBlockStylesNew = css(_defineProperty({}, ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER), {
+  cursor: 'text'
+}));
 export var LightWeightCodeBlockCssClassName = {
   CONTAINER: 'light-weight-code-block'
 };
+
+/**
+ * @private
+ * @deprecated styles are moved to RendererStyleContainer
+ */
 export var getLightWeightCodeBlockStylesForRootRendererStyleSheet = function getLightWeightCodeBlockStylesForRootRendererStyleSheet() {
   // We overwrite the rule that clears margin-top for first nested codeblocks, as
   // our lightweight codeblock dom structure will always nest the codeblock inside
@@ -26,7 +139,7 @@ export var getLightWeightCodeBlockStylesForRootRendererStyleSheet = function get
   // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
   return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t\t.", "\n\t\t\t> .", "\n\t\t\t.", " {\n\t\t\tmargin-top: ", ";\n\t\t}\n\t"])), RendererCssClassName.DOCUMENT, LightWeightCodeBlockCssClassName.CONTAINER, CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, blockNodesVerticalMargin);
 };
-var LightWeightCodeBlock = /*#__PURE__*/forwardRef(function (_ref, ref) {
+var LightWeightCodeBlockOld = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var text = _ref.text,
     _ref$codeBidiWarningT = _ref.codeBidiWarningTooltipEnabled,
     codeBidiWarningTooltipEnabled = _ref$codeBidiWarningT === void 0 ? true : _ref$codeBidiWarningT,
@@ -45,7 +158,53 @@ var LightWeightCodeBlock = /*#__PURE__*/forwardRef(function (_ref, ref) {
     ref: ref
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
     ,
-    css: [codeBlockSharedStyles(), lightWeightCodeBlockStyles]
+    css: [codeBlockSharedStyles(), lightWeightCodeBlockStylesOld]
+  }, jsx("div", {
+    className: CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER
+  }, jsx("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER
+  }, jsx("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER
+  }, textRows.map(function (_, index) {
+    return (
+      // Ignored via go/ees005
+      // eslint-disable-next-line react/no-array-index-key
+      jsx("span", {
+        key: index
+      })
+    );
+  })), jsx("div", {
+    className: CodeBlockSharedCssClassName.CODEBLOCK_CONTENT
+  }, jsx("code", null, renderBidiWarnings(text))))));
+});
+var LightWeightCodeBlockNew = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var text = _ref2.text,
+    _ref2$codeBidiWarning = _ref2.codeBidiWarningTooltipEnabled,
+    codeBidiWarningTooltipEnabled = _ref2$codeBidiWarning === void 0 ? true : _ref2$codeBidiWarning,
+    className = _ref2.className;
+  var textRows = useMemo(function () {
+    return (text !== null && text !== void 0 ? text : '').split('\n');
+  }, [text]);
+  var _useBidiWarnings2 = useBidiWarnings({
+      enableWarningTooltip: codeBidiWarningTooltipEnabled
+    }),
+    renderBidiWarnings = _useBidiWarnings2.renderBidiWarnings;
+  var classNames = [LightWeightCodeBlockCssClassName.CONTAINER, className].join(' ');
+  var codeBlockBackgroundImage = overflowShadow({
+    leftCoverWidth: "var(--ds-space-300, 24px)"
+  });
+  return jsx("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: classNames,
+    ref: ref
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    ,
+    css: [codeBlockSharedStylesNew, lightWeightCodeBlockStylesNew],
+    style: {
+      '--ak-renderer-codeblock-content-wrapper-bg-img': codeBlockBackgroundImage
+    }
   }, jsx("div", {
     className: CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER
   }, jsx("div", {
@@ -66,4 +225,5 @@ var LightWeightCodeBlock = /*#__PURE__*/forwardRef(function (_ref, ref) {
     className: CodeBlockSharedCssClassName.CODEBLOCK_CONTENT
   }, jsx("code", null, renderBidiWarnings(text))))));
 });
+var LightWeightCodeBlock = componentWithFG('platform_editor_emotion_refactor_renderer', LightWeightCodeBlockNew, LightWeightCodeBlockOld);
 export default LightWeightCodeBlock;

package/dist/esm/react/nodes/layoutColumn.js

@@ -1,3 +1,4 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -6,6 +7,22 @@ import React from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx, css } from '@emotion/react';
 import { WidthProvider, clearNextSiblingMarginTopStyle, clearNextSiblingBlockMarkMarginTopStyle } from '@atlaskit/editor-common/ui';
+import { fg } from '@atlaskit/platform-feature-flags';
+
+// localized styles, was from clearNextSiblingMarginTopStyle in @atlaskit/editor-common/ui
+var clearNextSiblingMarginTopStyleNew = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '& + *': {
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+    marginTop: '0 !important'
+  }
+});
+
+// localized styles, was from clearNextSiblingBlockMarkMarginTopStyle in @atlaskit/editor-common/ui
+var clearNextSiblingBlockMarkMarginTopStyleNew = css(_defineProperty({}, "+ .fabric-editor-block-mark > p,\n\t  + .fabric-editor-block-mark > h1,\n\t  + .fabric-editor-block-mark > h2,\n\t  + .fabric-editor-block-mark > h3,\n\t  + .fabric-editor-block-mark > h4,\n\t  + .fabric-editor-block-mark > h5,\n\t  + .fabric-editor-block-mark > h6\n\t", {
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+  marginTop: '0 !important'
+}));
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
 var layoutColumnClearMarginTopStyles = css(
@@ -21,6 +38,6 @@ export default function LayoutSection(props) {
       flexBasis: "".concat(props.width, "%")
     }
   }, jsx(WidthProvider, null, jsx("div", {
-    css: layoutColumnClearMarginTopStyles
+    css: fg('platform_editor_emotion_refactor_renderer') ? [clearNextSiblingMarginTopStyleNew, clearNextSiblingBlockMarkMarginTopStyleNew] : layoutColumnClearMarginTopStyles
   }), props.children));
 }