@atlaskit/renderer 114.3.0 → 114.3.2

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

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MarkComponent = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
@@ -24,15 +24,64 @@ var _templateObject;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- `AnnotationSharedCSSByState` is not object-safe
-var markStyles = function markStyles() {
+var markStylesOld = function markStylesOld() {
   return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tcolor: inherit;\n\tbackground-color: unset;\n\t-webkit-tap-highlight-color: transparent;\n\n\t&[data-mark-annotation-state='", "'] {\n\t\t", "\n\t\t", "\n\n\t\t&:focus,\n\t\t\t&[data-has-focus='true'] {\n\t\t\t", "\n\t\t}\n\t\t&[data-is-hovered='true']:not([data-has-focus='true']) {\n\t\t\t", "\n\t\t}\n\t}\n"])), _adfSchema.AnnotationMarkStates.ACTIVE, (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') ? (0, _styles.AnnotationSharedCSSByState)().common : '', (0, _styles.AnnotationSharedCSSByState)().blur, (0, _styles.AnnotationSharedCSSByState)().focus, (0, _platformFeatureFlags.fg)('confluence-frontend-comments-panel') ? (0, _styles.AnnotationSharedCSSByState)().hover : '');
 };
+var markStylesNew = (0, _react2.css)((0, _defineProperty2.default)({
+  color: 'inherit',
+  backgroundColor: 'unset',
+  WebkitTapHighlightColor: 'transparent'
+}, "&[data-mark-annotation-state='".concat(_adfSchema.AnnotationMarkStates.ACTIVE, "']"), {
+  // was from blur in AnnotationSharedCSSByState().blur
+  background: "var(--ds-background-accent-yellow-subtlest, #FFF7D6)",
+  borderBottom: "2px solid ".concat("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 ".concat("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'
+  }
+}));
+var markStylesNewWithInlineComments = (0, _react2.css)((0, _defineProperty2.default)({}, "&[data-mark-annotation-state='".concat(_adfSchema.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)"
+  }
+}));
+var markStylesNewWithCommentsPanel = (0, _react2.css)((0, _defineProperty2.default)({}, "&[data-mark-annotation-state='".concat(_adfSchema.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)"
+  }
+}));
 var isMobile = function 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);
 };
-var accessibilityStyles = function accessibilityStyles(startMarker, endMarker) {
+var accessibilityStylesOld = function accessibilityStylesOld(startMarker, endMarker) {
   return (0, _react2.css)({
     '&::before, &::after': {
       clipPath: 'inset(100%)',
@@ -53,6 +102,25 @@ var accessibilityStyles = function accessibilityStyles(startMarker, endMarker) {
     }
   });
 };
+var accessibilityStylesNew = (0, _react2.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)] '"
+  }
+});
 var MarkComponent = exports.MarkComponent = function MarkComponent(_ref) {
   var annotationParentIds = _ref.annotationParentIds,
     children = _ref.children,
@@ -124,21 +192,32 @@ var MarkComponent = exports.MarkComponent = function MarkComponent(_ref) {
   } : _objectSpread({
     'aria-details': annotationIds.join(', ')
   }, desktopAccessibilityAttributes);
-  var getAccessibilityStyles = function getAccessibilityStyles() {
+  var getAccessibilityStylesOld = function getAccessibilityStylesOld() {
     if (isMobile()) {
       return {};
     }
     if (state !== _adfSchema.AnnotationMarkStates.RESOLVED) {
       var startMarker = intl.formatMessage(_messages.inlineCommentMessages.contentRendererInlineCommentMarkerStart);
       var endMarker = intl.formatMessage(_messages.inlineCommentMessages.contentRendererInlineCommentMarkerEnd);
-      return accessibilityStyles(startMarker, endMarker);
+      return accessibilityStylesOld(startMarker, endMarker);
     } else {
       return {};
     }
   };
+  if ((0, _platformFeatureFlags.fg)('platform_editor_emotion_refactor_renderer')) {
+    return (0, _react2.jsx)(useBlockLevel ? 'div' : 'mark', _objectSpread(_objectSpread(_objectSpread((0, _defineProperty2.default)({
+      id: id
+    }, (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') ? 'onClickCapture' : 'onClick', onMarkClick), accessibility), overriddenData), !useBlockLevel && {
+      css: [markStylesNew, (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') && markStylesNewWithInlineComments, (0, _platformFeatureFlags.fg)('confluence-frontend-comments-panel') && markStylesNewWithCommentsPanel, !isMobile() && accessibilityStylesNew],
+      style: {
+        '--ak-renderer-annotation-startmarker': intl.formatMessage(_messages.inlineCommentMessages.contentRendererInlineCommentMarkerStart),
+        '--ak-renderer-annotation-endmarker': intl.formatMessage(_messages.inlineCommentMessages.contentRendererInlineCommentMarkerEnd)
+      }
+    }), children);
+  }
   return (0, _react2.jsx)(useBlockLevel ? 'div' : 'mark', _objectSpread(_objectSpread(_objectSpread((0, _defineProperty2.default)({
     id: id
   }, (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') ? 'onClickCapture' : 'onClick', onMarkClick), accessibility), overriddenData), !useBlockLevel && {
-    css: [markStyles, getAccessibilityStyles()]
+    css: [markStylesOld, getAccessibilityStylesOld()]
   }), children);
 };

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

@@ -7,7 +7,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';
-const MarkWrapper = props => {
+import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
+const MarkWrapperOld = props => {
   const styles = props['data-align'] ?
   // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
   css`
@@ -20,6 +21,17 @@ const MarkWrapper = props => {
     // eslint-disable-next-line react/jsx-props-no-spreading
   }, props), props.children);
 };
+const MarkWrapperNew = props => {
+  const 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);
+};
+const 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/es2019/react/nodes/codeBlock/components/codeBlockContainer.js

@@ -8,9 +8,10 @@ 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
-const codeBlockStyleOverrides = css`
+const codeBlockStyleOverridesOld = css`
 	tab-size: 4;
 	background-color: ${`var(--ds-surface-raised, ${N20})`};
 
@@ -43,6 +44,63 @@ const codeBlockStyleOverrides = css`
 			0 0;
 	}
 `;
+const codeBlockStyleOverridesNew = css({
+  tabSize: 4,
+  backgroundColor: `var(--ds-surface-raised, ${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
+    }
+  },
+  // 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
+  [`${CodeBlockSharedCssClassName.DS_CODEBLOCK}`]: {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    fontSize: `${14 / 16}rem`,
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: '1.5rem',
+    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)"}
+			)`,
+    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'
+  }
+});
 const CodeBlockContainer = ({
   allowCopyToClipboard,
   allowWrapCodeBlock,
@@ -52,18 +110,16 @@ const CodeBlockContainer = ({
   text,
   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/es2019/react/nodes/codeBlock/components/lightWeightCodeBlock.js

@@ -1,3 +1,6 @@
+/* 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
@@ -5,19 +8,163 @@
 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';
+const codeBlockSharedStylesNew = css({
+  [`.${CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPED}
+		> .${CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER}
+		> .${CodeBlockSharedCssClassName.CODEBLOCK_CONTENT}`]: {
+    marginRight: "var(--ds-space-100, 8px)",
+    code: {
+      display: 'block',
+      wordBreak: 'break-word',
+      whiteSpace: 'pre-wrap'
+    }
+  },
+  [`.${CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER}
+		> .${CodeBlockSharedCssClassName.CODEBLOCK_CONTENT}`]: {
+    display: 'flex',
+    flex: 1,
+    code: {
+      flexGrow: 1,
+      whiteSpace: 'pre'
+    }
+  },
+  [`.${CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER}`]: {
+    position: 'relative',
+    backgroundColor: "var(--ds-surface-raised, #FFFFFF)",
+    borderRadius: "var(--ds-border-radius, 3px)",
+    margin: `${blockNodesVerticalMargin} 0 0 0`,
+    fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
+    minWidth: `${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',
+    [`.${CodeBlockSharedCssClassName.CODEBLOCK_START}`]: {
+      position: 'absolute',
+      visibility: 'hidden',
+      height: '1.5rem',
+      top: '0px',
+      left: '0px'
+    },
+    [`${CodeBlockSharedCssClassName.CODEBLOCK_END}`]: {
+      position: 'absolute',
+      visibility: 'hidden',
+      height: '1.5rem',
+      bottom: '0px',
+      right: '0px'
+    },
+    [`.${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)"} 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'
+    },
+    [`.${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: `${14 / 16}rem`,
+      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.
+    [`.${CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER}::before`]: {
+      content: '"1"',
+      visibility: 'hidden',
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+      fontSize: `${14 / 16}rem`,
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+      lineHeight: '1.5rem'
+    },
+    [`.${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: `${14 / 16}rem`,
+        // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+        lineHeight: '1.5rem'
+      }
+    },
+    [`.${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: `${14 / 16}rem`,
+      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/design-system/no-css-tagged-template-expression, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-const lightWeightCodeBlockStyles = css`
+const lightWeightCodeBlockStylesOld = css`
 	.${CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER} {
 		cursor: text;
 	}
 `;
+const lightWeightCodeBlockStylesNew = css({
+  [`.${CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER}`]: {
+    cursor: 'text'
+  }
+});
 export const LightWeightCodeBlockCssClassName = {
   CONTAINER: 'light-weight-code-block'
 };
+
+/**
+ * @private
+ * @deprecated styles are moved to RendererStyleContainer
+ */
 export const 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
@@ -34,7 +181,7 @@ export const getLightWeightCodeBlockStylesForRootRendererStyleSheet = () => {
 		}
 	`;
 };
-const LightWeightCodeBlock = /*#__PURE__*/forwardRef(({
+const LightWeightCodeBlockOld = /*#__PURE__*/forwardRef(({
   text,
   codeBidiWarningTooltipEnabled = true,
   className
@@ -52,7 +199,49 @@ const LightWeightCodeBlock = /*#__PURE__*/forwardRef(({
     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((_, index) =>
+  // 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))))));
+});
+const LightWeightCodeBlockNew = /*#__PURE__*/forwardRef(({
+  text,
+  codeBidiWarningTooltipEnabled = true,
+  className
+}, ref) => {
+  const textRows = useMemo(() => (text !== null && text !== void 0 ? text : '').split('\n'), [text]);
+  const {
+    renderBidiWarnings
+  } = useBidiWarnings({
+    enableWarningTooltip: codeBidiWarningTooltipEnabled
+  });
+  const classNames = [LightWeightCodeBlockCssClassName.CONTAINER, className].join(' ');
+  const 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", {
@@ -70,4 +259,5 @@ const LightWeightCodeBlock = /*#__PURE__*/forwardRef(({
     className: CodeBlockSharedCssClassName.CODEBLOCK_CONTENT
   }, jsx("code", null, renderBidiWarnings(text))))));
 });
+const LightWeightCodeBlock = componentWithFG('platform_editor_emotion_refactor_renderer', LightWeightCodeBlockNew, LightWeightCodeBlockOld);
 export default LightWeightCodeBlock;

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

@@ -6,6 +6,32 @@ 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
+const 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
+const clearNextSiblingBlockMarkMarginTopStyleNew = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  [`+ .fabric-editor-block-mark > p,
+	  + .fabric-editor-block-mark > h1,
+	  + .fabric-editor-block-mark > h2,
+	  + .fabric-editor-block-mark > h3,
+	  + .fabric-editor-block-mark > h4,
+	  + .fabric-editor-block-mark > h5,
+	  + .fabric-editor-block-mark > h6
+	`]: {
+    // 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
 const layoutColumnClearMarginTopStyles = css(
@@ -21,6 +47,6 @@ export default function LayoutSection(props) {
       flexBasis: `${props.width}%`
     }
   }, jsx(WidthProvider, null, jsx("div", {
-    css: layoutColumnClearMarginTopStyles
+    css: fg('platform_editor_emotion_refactor_renderer') ? [clearNextSiblingMarginTopStyleNew, clearNextSiblingBlockMarkMarginTopStyleNew] : layoutColumnClearMarginTopStyles
   }), props.children));
 }

package/dist/es2019/react/nodes/media/index.js

@@ -28,28 +28,37 @@ import { useInlineCommentsFilter } from '../../../ui/annotations/hooks/use-inlin
 import { useInlineCommentSubscriberContext } from '../../../ui/annotations/hooks/use-inline-comment-subscriber';
 import { AnnotationUpdateEvent } from '@atlaskit/editor-common/types';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-const linkStyle = css`
-	position: absolute;
-	background: transparent;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-	cursor: pointer;
-	width: 100% !important;
-	height: 100% !important;
-`;
+import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
+const linkStyle = css({
+  position: 'absolute',
+  background: 'transparent',
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  cursor: 'pointer',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+  width: '100% !important',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+  height: '100% !important'
+});
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Ignored via go/DSP-18766
-const borderStyle = (color, width) => css`
+const borderStyleOld = (color, width) => css`
 	position: absolute;
 	width: 100% !important;
 	height: 100% !important;
 	border-radius: ${width}px;
 	box-shadow: 0 0 0 ${width}px ${color};
 `;
-const MediaBorder = ({
+const borderStyleNew = css({
+  position: 'absolute',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+  width: '100% !important',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+  height: '100% !important'
+});
+const MediaBorderOld = ({
   mark,
   children
 }) => {
@@ -66,11 +75,36 @@ const MediaBorder = ({
     "data-size": borderWidth
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
     ,
-    css: borderStyle(paletteColorValue, borderWidth)
+    css: borderStyleOld(paletteColorValue, borderWidth)
+  }, jsx(MediaBorderGapFiller, {
+    borderColor: borderColor
+  }), children);
+};
+const MediaBorderNew = ({
+  mark,
+  children
+}) => {
+  var _mark$attrs$color2, _mark$attrs$size2;
+  if (!mark) {
+    return jsx(Fragment, null, children);
+  }
+  const borderColor = (_mark$attrs$color2 = mark === null || mark === void 0 ? void 0 : mark.attrs.color) !== null && _mark$attrs$color2 !== void 0 ? _mark$attrs$color2 : '';
+  const borderWidth = (_mark$attrs$size2 = mark === null || mark === void 0 ? void 0 : mark.attrs.size) !== null && _mark$attrs$size2 !== void 0 ? _mark$attrs$size2 : 0;
+  const paletteColorValue = hexToEditorBorderPaletteColor(borderColor) || borderColor;
+  return jsx("div", {
+    "data-mark-type": "border",
+    "data-color": borderColor,
+    "data-size": borderWidth,
+    css: borderStyleNew,
+    style: {
+      borderRadius: `${borderWidth}px`,
+      boxShadow: `0 0 0 ${borderWidth}px ${paletteColorValue}`
+    }
   }, jsx(MediaBorderGapFiller, {
     borderColor: borderColor
   }), children);
 };
+const MediaBorder = componentWithFG('platform_editor_emotion_refactor_renderer', MediaBorderNew, MediaBorderOld);
 const MediaLink = ({
   mark,
   children,