@atlaskit/renderer 114.3.0 → 114.3.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/renderer
 
+## 114.3.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 114.3.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 114.3.0
 
 ### Minor Changes

package/afm-cc/tsconfig.json

@@ -83,6 +83,9 @@
         {
             "path": "../../../platform/feature-flags/afm-cc/tsconfig.json"
         },
+        {
+            "path": "../../../platform/feature-flags-react/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../../react-ufo/atlaskit/afm-cc/tsconfig.json"
         },

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

@@ -10,13 +10,14 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _adfSchema = require("@atlaskit/adf-schema");
+var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
 var _templateObject;
 /**
  * @jsxRuntime classic
  * @jsx jsx
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-var MarkWrapper = function MarkWrapper(props) {
+var MarkWrapperOld = function MarkWrapperOld(props) {
   var styles = props['data-align'] ? // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
   (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\ttext-align: ", ";\n\t\t\t"])), _adfSchema.alignmentPositionMap[props['data-align']]) : '';
   return (0, _react2.jsx)("div", (0, _extends2.default)({
@@ -26,6 +27,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'] ? _adfSchema.alignmentPositionMap[props['data-align']] : undefined;
+  return (0, _react2.jsx)("div", (0, _extends2.default)({
+    style: {
+      textAlign: dataAlign
+    }
+    // Ignored via go/ees005
+    // eslint-disable-next-line react/jsx-props-no-spreading
+  }, props), props.children);
+};
+var MarkWrapper = (0, _platformFeatureFlagsReact.componentWithFG)('platform_editor_emotion_refactor_renderer', MarkWrapperNew, MarkWrapperOld);
 function Alignment(props) {
   return (0, _react2.jsx)(MarkWrapper
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766

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

@@ -5,12 +5,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _colors = require("@atlaskit/theme/colors");
 var _styles = require("@atlaskit/editor-common/styles");
 var _codeBlockButtonContainer = _interopRequireDefault(require("./codeBlockButtonContainer"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _templateObject;
 /**
  * @jsxRuntime classic
@@ -18,9 +20,32 @@ var _templateObject;
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 // 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 = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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(_colors.N20, ")"), _styles.CodeBlockSharedCssClassName.DS_CODEBLOCK, (0, _editorSharedStyles.relativeFontSizeToBase16)(14), (0, _editorSharedStyles.overflowShadow)({
+var codeBlockStyleOverridesOld = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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(_colors.N20, ")"), _styles.CodeBlockSharedCssClassName.DS_CODEBLOCK, (0, _editorSharedStyles.relativeFontSizeToBase16)(14), (0, _editorSharedStyles.overflowShadow)({
   leftCoverWidth: "var(--ds-space-300, 24px)"
 }));
+var codeBlockStyleOverridesNew = (0, _react.css)((0, _defineProperty2.default)({
+  tabSize: 4,
+  backgroundColor: "var(--ds-surface-raised, ".concat(_colors.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(_styles.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,
@@ -29,18 +54,16 @@ var CodeBlockContainer = function CodeBlockContainer(_ref) {
     setWrapLongLines = _ref.setWrapLongLines,
     text = _ref.text,
     wrapLongLines = _ref.wrapLongLines;
-  return (
+  return (0, _react.jsx)("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    (0, _react.jsx)("div", {
-      className: className,
-      css: codeBlockStyleOverrides
-    }, (0, _react.jsx)(_codeBlockButtonContainer.default, {
-      allowCopyToClipboard: allowCopyToClipboard,
-      allowWrapCodeBlock: allowWrapCodeBlock,
-      setWrapLongLines: setWrapLongLines,
-      text: text,
-      wrapLongLines: wrapLongLines
-    }), children)
-  );
+    className: className,
+    css: (0, _platformFeatureFlags.fg)('platform_editor_emotion_refactor_renderer') ? codeBlockStyleOverridesNew : codeBlockStyleOverridesOld
+  }, (0, _react.jsx)(_codeBlockButtonContainer.default, {
+    allowCopyToClipboard: allowCopyToClipboard,
+    allowWrapCodeBlock: allowWrapCodeBlock,
+    setWrapLongLines: setWrapLongLines,
+    text: text,
+    wrapLongLines: wrapLongLines
+  }), children);
 };
 var _default = exports.default = CodeBlockContainer;

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

@@ -7,13 +7,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getLightWeightCodeBlockStylesForRootRendererStyleSheet = exports.default = exports.LightWeightCodeBlockCssClassName = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _styles = require("@atlaskit/editor-common/styles");
-var _useBidiWarnings2 = require("../../../hooks/use-bidi-warnings");
+var _useBidiWarnings3 = require("../../../hooks/use-bidi-warnings");
 var _consts = require("../../../../consts");
+var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
 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
@@ -21,11 +26,119 @@ var _templateObject, _templateObject2;
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var codeBlockSharedStylesNew = (0, _react2.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPED, "\n\t\t> .").concat(_styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, "\n\t\t> .").concat(_styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT), {
+  marginRight: "var(--ds-space-100, 8px)",
+  code: {
+    display: 'block',
+    wordBreak: 'break-word',
+    whiteSpace: 'pre-wrap'
+  }
+}), ".".concat(_styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, "\n\t\t> .").concat(_styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT), {
+  display: 'flex',
+  flex: 1,
+  code: {
+    flexGrow: 1,
+    whiteSpace: 'pre'
+  }
+}), ".".concat(_styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
+  position: 'relative',
+  backgroundColor: "var(--ds-surface-raised, #FFFFFF)",
+  borderRadius: "var(--ds-border-radius, 3px)",
+  margin: "".concat(_editorSharedStyles.blockNodesVerticalMargin, " 0 0 0"),
+  fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
+  minWidth: "".concat(_editorSharedStyles.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(_styles.CodeBlockSharedCssClassName.CODEBLOCK_START), {
+  position: 'absolute',
+  visibility: 'hidden',
+  height: '1.5rem',
+  top: '0px',
+  left: '0px'
+}), "".concat(_styles.CodeBlockSharedCssClassName.CODEBLOCK_END), {
+  position: 'absolute',
+  visibility: 'hidden',
+  height: '1.5rem',
+  bottom: '0px',
+  right: '0px'
+}), ".".concat(_styles.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(_styles.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(_styles.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(_styles.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(_styles.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 = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\tcursor: text;\n\t}\n"])), _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER);
+var lightWeightCodeBlockStylesOld = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\tcursor: text;\n\t}\n"])), _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER);
+var lightWeightCodeBlockStylesNew = (0, _react2.css)((0, _defineProperty2.default)({}, ".".concat(_styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER), {
+  cursor: 'text'
+}));
 var LightWeightCodeBlockCssClassName = exports.LightWeightCodeBlockCssClassName = {
   CONTAINER: 'light-weight-code-block'
 };
+
+/**
+ * @private
+ * @deprecated styles are moved to RendererStyleContainer
+ */
 var getLightWeightCodeBlockStylesForRootRendererStyleSheet = exports.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
@@ -36,7 +149,7 @@ var getLightWeightCodeBlockStylesForRootRendererStyleSheet = exports.getLightWei
   // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
   return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t\t.", "\n\t\t\t> .", "\n\t\t\t.", " {\n\t\t\tmargin-top: ", ";\n\t\t}\n\t"])), _consts.RendererCssClassName.DOCUMENT, LightWeightCodeBlockCssClassName.CONTAINER, _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, _editorSharedStyles.blockNodesVerticalMargin);
 };
-var LightWeightCodeBlock = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+var LightWeightCodeBlockOld = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var text = _ref.text,
     _ref$codeBidiWarningT = _ref.codeBidiWarningTooltipEnabled,
     codeBidiWarningTooltipEnabled = _ref$codeBidiWarningT === void 0 ? true : _ref$codeBidiWarningT,
@@ -44,7 +157,7 @@ var LightWeightCodeBlock = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, r
   var textRows = (0, _react.useMemo)(function () {
     return (text !== null && text !== void 0 ? text : '').split('\n');
   }, [text]);
-  var _useBidiWarnings = (0, _useBidiWarnings2.useBidiWarnings)({
+  var _useBidiWarnings = (0, _useBidiWarnings3.useBidiWarnings)({
       enableWarningTooltip: codeBidiWarningTooltipEnabled
     }),
     renderBidiWarnings = _useBidiWarnings.renderBidiWarnings;
@@ -55,7 +168,53 @@ var LightWeightCodeBlock = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, r
     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: [(0, _styles.codeBlockSharedStyles)(), lightWeightCodeBlockStyles]
+    css: [(0, _styles.codeBlockSharedStyles)(), lightWeightCodeBlockStylesOld]
+  }, (0, _react2.jsx)("div", {
+    className: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER
+  }, (0, _react2.jsx)("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER
+  }, (0, _react2.jsx)("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: _styles.CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER
+  }, textRows.map(function (_, index) {
+    return (
+      // Ignored via go/ees005
+      // eslint-disable-next-line react/no-array-index-key
+      (0, _react2.jsx)("span", {
+        key: index
+      })
+    );
+  })), (0, _react2.jsx)("div", {
+    className: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT
+  }, (0, _react2.jsx)("code", null, renderBidiWarnings(text))))));
+});
+var LightWeightCodeBlockNew = /*#__PURE__*/(0, _react.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 = (0, _react.useMemo)(function () {
+    return (text !== null && text !== void 0 ? text : '').split('\n');
+  }, [text]);
+  var _useBidiWarnings2 = (0, _useBidiWarnings3.useBidiWarnings)({
+      enableWarningTooltip: codeBidiWarningTooltipEnabled
+    }),
+    renderBidiWarnings = _useBidiWarnings2.renderBidiWarnings;
+  var classNames = [LightWeightCodeBlockCssClassName.CONTAINER, className].join(' ');
+  var codeBlockBackgroundImage = (0, _editorSharedStyles.overflowShadow)({
+    leftCoverWidth: "var(--ds-space-300, 24px)"
+  });
+  return (0, _react2.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
+    }
   }, (0, _react2.jsx)("div", {
     className: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER
   }, (0, _react2.jsx)("div", {
@@ -76,4 +235,5 @@ var LightWeightCodeBlock = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, r
     className: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT
   }, (0, _react2.jsx)("code", null, renderBidiWarnings(text))))));
 });
+var LightWeightCodeBlock = (0, _platformFeatureFlagsReact.componentWithFG)('platform_editor_emotion_refactor_renderer', LightWeightCodeBlockNew, LightWeightCodeBlockOld);
 var _default = exports.default = LightWeightCodeBlock;

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

@@ -5,9 +5,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = LayoutSection;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _ui = require("@atlaskit/editor-common/ui");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -15,6 +17,21 @@ var _ui = require("@atlaskit/editor-common/ui");
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
+// localized styles, was from clearNextSiblingMarginTopStyle in @atlaskit/editor-common/ui
+var clearNextSiblingMarginTopStyleNew = (0, _react2.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 = (0, _react2.css)((0, _defineProperty2.default)({}, "+ .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 = (0, _react2.css)(
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
@@ -29,6 +46,6 @@ function LayoutSection(props) {
       flexBasis: "".concat(props.width, "%")
     }
   }, (0, _react2.jsx)(_ui.WidthProvider, null, (0, _react2.jsx)("div", {
-    css: layoutColumnClearMarginTopStyles
+    css: (0, _platformFeatureFlags.fg)('platform_editor_emotion_refactor_renderer') ? [clearNextSiblingMarginTopStyleNew, clearNextSiblingBlockMarkMarginTopStyleNew] : layoutColumnClearMarginTopStyles
   }), props.children));
 }

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

@@ -37,9 +37,10 @@ var _useInlineCommentsFilter = require("../../../ui/annotations/hooks/use-inline
 var _useInlineCommentSubscriber = require("../../../ui/annotations/hooks/use-inline-comment-subscriber");
 var _types = require("@atlaskit/editor-common/types");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
 var _excluded = ["marks", "mediaSingleElement", "isDrafting"],
   _excluded2 = ["marks", "mediaSingleElement", "isDrafting"];
-var _templateObject, _templateObject2;
+var _templateObject;
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -52,14 +53,32 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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; }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-// 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 linkStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tposition: absolute;\n\tbackground: transparent;\n\ttop: 0;\n\tright: 0;\n\tbottom: 0;\n\tleft: 0;\n\tcursor: pointer;\n\twidth: 100% !important;\n\theight: 100% !important;\n"])));
+var linkStyle = (0, _react2.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
-var borderStyle = function borderStyle(color, width) {
-  return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\tposition: absolute;\n\twidth: 100% !important;\n\theight: 100% !important;\n\tborder-radius: ", "px;\n\tbox-shadow: 0 0 0 ", "px ", ";\n"])), width, width, color);
+var borderStyleOld = function borderStyleOld(color, width) {
+  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tposition: absolute;\n\twidth: 100% !important;\n\theight: 100% !important;\n\tborder-radius: ", "px;\n\tbox-shadow: 0 0 0 ", "px ", ";\n"])), width, width, color);
 };
-var MediaBorder = function MediaBorder(_ref) {
+var borderStyleNew = (0, _react2.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'
+});
+var MediaBorderOld = function MediaBorderOld(_ref) {
   var _mark$attrs$color, _mark$attrs$size;
   var mark = _ref.mark,
     children = _ref.children;
@@ -75,15 +94,39 @@ var MediaBorder = function MediaBorder(_ref) {
     "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)
   }, (0, _react2.jsx)(_ui.MediaBorderGapFiller, {
     borderColor: borderColor
   }), children);
 };
-var MediaLink = function MediaLink(_ref2) {
+var MediaBorderNew = function MediaBorderNew(_ref2) {
+  var _mark$attrs$color2, _mark$attrs$size2;
   var mark = _ref2.mark,
-    children = _ref2.children,
-    onClick = _ref2.onClick;
+    children = _ref2.children;
+  if (!mark) {
+    return (0, _react2.jsx)(_react.Fragment, null, children);
+  }
+  var borderColor = (_mark$attrs$color2 = mark === null || mark === void 0 ? void 0 : mark.attrs.color) !== null && _mark$attrs$color2 !== void 0 ? _mark$attrs$color2 : '';
+  var borderWidth = (_mark$attrs$size2 = mark === null || mark === void 0 ? void 0 : mark.attrs.size) !== null && _mark$attrs$size2 !== void 0 ? _mark$attrs$size2 : 0;
+  var paletteColorValue = (0, _editorPalette.hexToEditorBorderPaletteColor)(borderColor) || borderColor;
+  return (0, _react2.jsx)("div", {
+    "data-mark-type": "border",
+    "data-color": borderColor,
+    "data-size": borderWidth,
+    css: borderStyleNew,
+    style: {
+      borderRadius: "".concat(borderWidth, "px"),
+      boxShadow: "0 0 0 ".concat(borderWidth, "px ").concat(paletteColorValue)
+    }
+  }, (0, _react2.jsx)(_ui.MediaBorderGapFiller, {
+    borderColor: borderColor
+  }), children);
+};
+var MediaBorder = (0, _platformFeatureFlagsReact.componentWithFG)('platform_editor_emotion_refactor_renderer', MediaBorderNew, MediaBorderOld);
+var MediaLink = function MediaLink(_ref3) {
+  var mark = _ref3.mark,
+    children = _ref3.children,
+    onClick = _ref3.onClick;
   if (!mark) {
     return (0, _react2.jsx)(_react.Fragment, null, children);
   }
@@ -96,9 +139,9 @@ var MediaLink = function MediaLink(_ref2) {
     css: linkStyle
   }, children);
 };
-var MediaAnnotation = function MediaAnnotation(_ref3) {
-  var mark = _ref3.mark,
-    children = _ref3.children;
+var MediaAnnotation = function MediaAnnotation(_ref4) {
+  var mark = _ref4.mark,
+    children = _ref4.children;
   if (!mark) {
     return (0, _react2.jsx)(_react.Fragment, null, children);
   }
@@ -116,10 +159,10 @@ var MediaAnnotation = function MediaAnnotation(_ref3) {
     useBlockLevel: true
   }, children);
 };
-var _MediaAnnotations = function MediaAnnotations(_ref4) {
-  var _ref4$marks = _ref4.marks,
-    marks = _ref4$marks === void 0 ? [] : _ref4$marks,
-    children = _ref4.children;
+var _MediaAnnotations = function MediaAnnotations(_ref5) {
+  var _ref5$marks = _ref5.marks,
+    marks = _ref5$marks === void 0 ? [] : _ref5$marks,
+    children = _ref5.children;
   // Early Exit
   if (marks.length === 0) {
     return (0, _react2.jsx)(_react.Fragment, null, children);
@@ -136,13 +179,13 @@ var _MediaAnnotations = function MediaAnnotations(_ref4) {
   }, children) : (0, _react2.jsx)(_react.Fragment, null, children)));
 };
 var CommentBadge = (0, _reactIntlNext.injectIntl)(_mediaSingle.CommentBadge);
-var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
+var CommentBadgeWrapper = function CommentBadgeWrapper(_ref6) {
   var _marks$map;
-  var marks = _ref5.marks,
-    mediaSingleElement = _ref5.mediaSingleElement,
-    _ref5$isDrafting = _ref5.isDrafting,
-    isDrafting = _ref5$isDrafting === void 0 ? false : _ref5$isDrafting,
-    rest = (0, _objectWithoutProperties2.default)(_ref5, _excluded);
+  var marks = _ref6.marks,
+    mediaSingleElement = _ref6.mediaSingleElement,
+    _ref6$isDrafting = _ref6.isDrafting,
+    isDrafting = _ref6$isDrafting === void 0 ? false : _ref6$isDrafting,
+    rest = (0, _objectWithoutProperties2.default)(_ref6, _excluded);
   var _useState = (0, _react.useState)('default'),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     status = _useState2[0],
@@ -219,13 +262,13 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
  * when clean up platform_editor_add_media_from_url feature flag
  */
 
-var CommentBadgeNextWrapper = function CommentBadgeNextWrapper(_ref6) {
+var CommentBadgeNextWrapper = function CommentBadgeNextWrapper(_ref7) {
   var _marks$map2;
-  var marks = _ref6.marks,
-    mediaSingleElement = _ref6.mediaSingleElement,
-    _ref6$isDrafting = _ref6.isDrafting,
-    isDrafting = _ref6$isDrafting === void 0 ? false : _ref6$isDrafting,
-    rest = (0, _objectWithoutProperties2.default)(_ref6, _excluded2);
+  var marks = _ref7.marks,
+    mediaSingleElement = _ref7.mediaSingleElement,
+    _ref7$isDrafting = _ref7.isDrafting,
+    isDrafting = _ref7$isDrafting === void 0 ? false : _ref7$isDrafting,
+    rest = (0, _objectWithoutProperties2.default)(_ref7, _excluded2);
   var _useState5 = (0, _react.useState)('default'),
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
     status = _useState6[0],
@@ -345,9 +388,9 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         mediaWidth: width,
         mediaHeight: height,
         useMinimumZIndex: true
-      }, function (_ref8) {
-        var badgeSize = _ref8.badgeSize,
-          visible = _ref8.visible;
+      }, function (_ref9) {
+        var badgeSize = _ref9.badgeSize,
+          visible = _ref9.visible;
         return (0, _react2.jsx)(_react.default.Fragment, null, (0, _platformFeatureFlags.fg)('platform_editor_hide_external_media_badge') ? visible && (0, _react2.jsx)(_mediaSingle.ExternalImageBadge, {
           badgeSize: badgeSize,
           type: _this.props.type,

package/dist/cjs/react/nodes/mediaSingle/index.js

@@ -14,7 +14,6 @@ var _reactIntlNext = require("react-intl-next");
 var _ui = require("@atlaskit/editor-common/ui");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _style = require("../../../ui/Renderer/style");
-var _styles = require("./styles");
 var _AnnotationRangeContext = require("../../../ui/annotations/contexts/AnnotationRangeContext");
 var _AnnotationHoverContext = require("../../../ui/annotations/contexts/AnnotationHoverContext");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -28,6 +27,14 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 
 var DEFAULT_WIDTH = 250;
 var DEFAULT_HEIGHT = 200;
+var uiMediaSingleBaseStyles = (0, _react2.css)({
+  transition: 'all 0.1s linear'
+});
+var uiMediaSingleLayoutStyles = (0, _react2.css)({
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+  marginLeft: '50%',
+  transform: 'translateX(-50%)'
+});
 var isMediaElement = function isMediaElement(media) {
   if (!media) {
     return false;
@@ -222,7 +229,7 @@ var MediaSingleWithChildren = function MediaSingleWithChildren(props) {
       featureFlags: featureFlags,
       mediaSingleElement: ref.current
     });
-    var uiMediaSingleStyles = layout === 'full-width' || layout === 'wide' ? [_styles.uiMediaSingleBaseStyles, _styles.uiMediaSingleLayoutStyles] : [_styles.uiMediaSingleBaseStyles];
+    var uiMediaSingleStyles = layout === 'full-width' || layout === 'wide' ? [uiMediaSingleBaseStyles, uiMediaSingleLayoutStyles] : [uiMediaSingleBaseStyles];
     return (0, _react2.jsx)(_ui.MediaSingle, {
       css: uiMediaSingleStyles,
       handleMediaSingleRef: ref,