@atlaskit/renderer 130.2.17 → 130.3.0

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

@@ -1,183 +1,14 @@
-import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
 import React from 'react';
-/* eslint-disable @typescript-eslint/consistent-type-imports, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic */
-import { jsx, css } from '@emotion/react';
-import TipIcon from '@atlaskit/icon/core/lightbulb';
 import { PanelType } from '@atlaskit/adf-schema';
+import { PanelInfoIcon, PanelSuccessIcon, PanelNoteIcon, PanelWarningIcon, PanelErrorIcon } from '@atlaskit/editor-common/icons';
 import { PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
-import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import EmojiIcon from '@atlaskit/icon/core/emoji';
+import TipIcon from '@atlaskit/icon/core/lightbulb';
+import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import EmojiItem from './emoji';
-import { PanelInfoIcon, PanelSuccessIcon, PanelNoteIcon, PanelWarningIcon, PanelErrorIcon } from '@atlaskit/editor-common/icons';
-import { akEditorCustomIconSize } from '@atlaskit/editor-shared-styles/consts';
-import { fg } from '@atlaskit/platform-feature-flags';
-// New custom icons are a little smaller than predefined icons.
-// To fix alignment issues with custom icons, vertical alignment is updated.
-const panelEmojiSpriteVerticalAlignment = -(8 * 3 - akEditorCustomIconSize) / 2;
-const panelEmojiImageVerticalAlignment = panelEmojiSpriteVerticalAlignment - 1;
-const blockNodesVerticalMargin = '0.75rem';
-const akEditorTableCellMinWidth = 48;
-const panelBaseStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '&.ak-editor-panel': {
-    borderRadius: "var(--ds-radius-small, 3px)",
-    margin: `${blockNodesVerticalMargin} 0 0`,
-    paddingTop: "var(--ds-space-100, 8px)",
-    paddingRight: "var(--ds-space-200, 16px)",
-    paddingBottom: "var(--ds-space-100, 8px)",
-    paddingLeft: "var(--ds-space-100, 8px)",
-    minWidth: `${akEditorTableCellMinWidth}px`,
-    display: 'flex',
-    position: 'relative',
-    alignItems: 'normal',
-    wordBreak: 'break-word',
-    backgroundColor: "var(--ds-background-accent-blue-subtlest, #E9F2FE)",
-    color: 'inherit',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '.ak-editor-panel__icon': {
-      flexShrink: 0,
-      height: "var(--ds-space-300, 24px)",
-      width: "var(--ds-space-300, 24px)",
-      boxSizing: 'content-box',
-      paddingRight: "var(--ds-space-100, 8px)",
-      textAlign: 'center',
-      userSelect: 'none',
-      MozUserSelect: 'none',
-      WebkitUserSelect: 'none',
-      MsUserSelect: 'none',
-      // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-      marginTop: '0.1em',
-      color: "var(--ds-icon-information, #357DE8)",
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-      '> span': {
-        verticalAlign: 'middle',
-        display: 'inline-flex'
-      },
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-      '.emoji-common-emoji-sprite': {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
-        verticalAlign: `${panelEmojiSpriteVerticalAlignment}px`
-      },
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-      '.emoji-common-emoji-image': {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
-        verticalAlign: `${panelEmojiImageVerticalAlignment}px`,
-        // Vertical align only works for inline-block elements in Firefox
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
-        '@-moz-document url-prefix()': {
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-          img: {
-            display: 'inline-block'
-          }
-        }
-      }
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '.ak-editor-panel__content': {
-      margin: `${"var(--ds-space-025, 2px)"} 0 ${"var(--ds-space-025, 2px)"}`,
-      flex: '1 0 0',
-      /*
-      https://ishadeed.com/article/min-max-css/#setting-min-width-to-zero-with-flexbox
-      The default value for min-width is auto, which is computed to zero. When an element is a flex item, the value of min-width doesn’t compute to zero. The minimum size of a flex item is equal to the size of its contents.
-      */
-      minWidth: 0
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '&[data-panel-type="note"]': {
-      backgroundColor: "var(--ds-background-accent-purple-subtlest, #F8EEFE)",
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-      '.ak-editor-panel__icon': {
-        color: "var(--ds-icon-discovery, #AF59E1)"
-      }
-    },
-    // 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-panel-type="tip"]': {
-      backgroundColor: "var(--ds-background-accent-green-subtlest, #DCFFF1)",
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-      '.ak-editor-panel__icon': {
-        color: "var(--ds-icon-success, #6A9A23)"
-      }
-    },
-    // 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-panel-type="warning"]': {
-      backgroundColor: "var(--ds-background-accent-yellow-subtlest, #FEF7C8)",
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-      '.ak-editor-panel__icon': {
-        color: "var(--ds-icon-warning, #E06C00)"
-      }
-    },
-    // 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-panel-type="error"]': {
-      backgroundColor: "var(--ds-background-accent-red-subtlest, #FFECEB)",
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-      '.ak-editor-panel__icon': {
-        color: "var(--ds-icon-danger, #C9372C)"
-      }
-    },
-    // 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-panel-type="success"]': {
-      backgroundColor: "var(--ds-background-accent-green-subtlest, #DCFFF1)",
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-      '.ak-editor-panel__icon': {
-        color: "var(--ds-icon-success, #6A9A23)"
-      }
-    }
-  }
-});
-const panelHasNoIconStyles = 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
-  '&.ak-editor-panel': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '&[data-panel-type="custom"]': {
-      paddingLeft: "var(--ds-space-150, 12px)",
-      paddingRight: "var(--ds-space-150, 12px)"
-    }
-  }
-});
-const panelNestedIconStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '&.ak-editor-panel__no-icon': {
-    paddingLeft: "var(--ds-space-150, 12px)",
-    paddingRight: "var(--ds-space-150, 12px)"
-  }
-});
-const nestedPanelStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.ak-editor-panel__content .ak-editor-panel': {
-    border: `${"var(--ds-border-width, 1px)"} solid ${"var(--ds-border, #0B120E24)"}`
-  }
-});
-const panelCustomBackground = 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
-  '&.ak-editor-panel': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '&[data-panel-type="custom"]': {
-      backgroundColor: 'var(--ak-renderer-panel-custom-bg-color)'
-    }
-  }
-});
-const PanelStyled = ({
-  backgroundColor,
-  hasIcon,
-  ...props
-}) => {
-  const customBackgroundColor = backgroundColor ? hexToEditorBackgroundPaletteColor(backgroundColor) || backgroundColor : undefined;
-  return jsx("div", _extends({
-    style:
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-    {
-      '--ak-renderer-panel-custom-bg-color': customBackgroundColor
-    },
-    css: [panelBaseStyles, !hasIcon && panelHasNoIconStyles, props['data-panel-type'] === PanelType.CUSTOM && backgroundColor && panelCustomBackground, fg('platform_editor_nested_dnd_styles_changes') && panelNestedIconStyles, nestedPanelStyles]
-    // Ignored via go/ees005
-    // eslint-disable-next-line react/jsx-props-no-spreading
-  }, props), props.children);
-};
-PanelStyled.displayName = 'PanelStyled';
+import { PanelStyledCompiled } from './panel-compiled';
+import { PanelStyledEmotion } from './panel-emotion';
 const panelIcons = {
   info: PanelInfoIcon,
   success: PanelSuccessIcon,
@@ -187,6 +18,7 @@ const panelIcons = {
   error: PanelErrorIcon,
   custom: EmojiIcon
 };
+const PanelStyledMigration = componentWithCondition(() => expValEquals('platform_editor_renderer_static_css', 'isEnabled', true), PanelStyledCompiled, PanelStyledEmotion);
 const Panel = props => {
   const {
     allowCustomPanels,
@@ -205,7 +37,7 @@ const Panel = props => {
   const getIcon = () => {
     if (panelType === PanelType.CUSTOM) {
       if (panelIcon && providers) {
-        return jsx(EmojiItem, {
+        return /*#__PURE__*/React.createElement(EmojiItem, {
           id: panelIconId,
           text: panelIconText,
           shortName: panelIcon,
@@ -215,7 +47,7 @@ const Panel = props => {
       return null;
     }
     const Icon = panelIcons[panelType];
-    return jsx(Icon, {
+    return /*#__PURE__*/React.createElement(Icon, {
       label: `${panelType} panel`
     });
   };
@@ -223,12 +55,12 @@ const Panel = props => {
   const renderIcon = () => {
     if (icon) {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      return jsx("div", {
+      return /*#__PURE__*/React.createElement("div", {
         className: PanelSharedCssClassName.icon
       }, icon);
     }
   };
-  return jsx(PanelStyled
+  return /*#__PURE__*/React.createElement(PanelStyledMigration
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   , {
     className: PanelSharedCssClassName.prefix,
@@ -240,7 +72,7 @@ const Panel = props => {
     "data-panel-icon-text": panelIconText,
     backgroundColor: panelColor,
     hasIcon: Boolean(icon)
-  }, renderIcon(), jsx("div", {
+  }, renderIcon(), /*#__PURE__*/React.createElement("div", {
     className: PanelSharedCssClassName.content
   }, children));
 };

package/dist/es2019/ui/Renderer/index.js

@@ -57,7 +57,7 @@ export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const TABLE_INFO_TIMEOUT = 10000;
 const RENDER_EVENT_SAMPLE_RATE = 0.2;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "0.0.0-development";
+const packageVersion = "130.2.18";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/esm/react/marks/link-compiled.compiled.css

@@ -0,0 +1,6 @@
+
+._syaz13af{color:var(--ds-link,#1868db)}._1bnx8stv:hover{text-decoration-line:underline}
+._30l313af:hover{color:var(--ds-link,#1868db)}
+._9oik1r31:hover{text-decoration-color:currentColor}
+._jf4cnqa1:hover{text-decoration-style:solid}
+._9h8h12zz:active{color:var(--ds-link-pressed,#1558bc)}

package/dist/esm/react/marks/link-compiled.js

@@ -0,0 +1,19 @@
+/* link-compiled.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./link-compiled.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+/**
+ * Compiled branch of the `platform_editor_static_css` experiment.
+ * Used via `componentWithCondition` in `link.tsx`.
+ *
+ * Cleanup: delete this file once the experiment has shipped.
+ */
+
+import LinkUrl from '@atlaskit/smart-card/link-url';
+var anchorStyles = null;
+export var LinkUrlCompiled = function LinkUrlCompiled(props) {
+  return /*#__PURE__*/React.createElement(LinkUrl, _extends({}, props, {
+    className: ax(["_syaz13af _9oik1r31 _1bnx8stv _jf4cnqa1 _30l313af _9h8h12zz"])
+  }));
+};

package/dist/esm/react/marks/link-emotion.js

@@ -0,0 +1,34 @@
+import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+/**
+ * Emotion branch of the `platform_editor_static_css` experiment.
+ * Used via `componentWithCondition` in `link.tsx`.
+ *
+ * Cleanup: delete this file once the experiment has shipped.
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- intentional: emotion fallback for compiled migration
+import { css, jsx } from '@emotion/react';
+import LinkUrl from '@atlaskit/smart-card/link-url';
+var anchorStyles = css({
+  color: "var(--ds-link, #1868DB)",
+  '&:hover': {
+    color: "var(--ds-link, #1868DB)",
+    textDecoration: 'underline'
+  },
+  '&:active': {
+    color: "var(--ds-link-pressed, #1558BC)"
+  }
+});
+export var LinkUrlEmotion = function LinkUrlEmotion(props) {
+  return (
+    // Ignored via go/ees005
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    jsx(LinkUrl, _extends({
+      css: anchorStyles
+    }, props))
+  );
+};

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

@@ -1,26 +1,19 @@
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
 import React, { Fragment } from 'react';
-/* eslint-disable @typescript-eslint/consistent-type-imports, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic */
-import { jsx, css } from '@emotion/react';
+import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
 import { getEventHandler } from '../../utils';
 import { PLATFORM, MODE } from '../../analytics/events';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
-import LinkUrl from '@atlaskit/smart-card/link-url';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
-var anchorStyles = css({
-  color: "var(--ds-link, #1868DB)",
-  '&:hover': {
-    color: "var(--ds-link, #1868DB)",
-    textDecoration: 'underline'
-  },
-  '&:active': {
-    color: "var(--ds-link-pressed, #1558BC)"
-  }
-});
+import { LinkUrlCompiled } from './link-compiled';
+import { LinkUrlEmotion } from './link-emotion';
+var LinkUrlMigration = componentWithCondition(function () {
+  return expValEquals('platform_editor_renderer_static_css', 'isEnabled', true);
+}, LinkUrlCompiled, LinkUrlEmotion);
+/**
+ * Render an ADF link mark in renderer.
+ */
 export default function Link(props) {
   var href = props.href,
     target = props.target,
@@ -49,7 +42,7 @@ export default function Link(props) {
   }
   var handler = getEventHandler(eventHandlers, 'link');
   if (isMediaLink) {
-    return jsx(Fragment, null, props.children);
+    return /*#__PURE__*/React.createElement(Fragment, null, props.children);
   }
   var analyticsData = {
     attributes: {
@@ -58,12 +51,11 @@ export default function Link(props) {
     // Below is added for the future implementation of Linking Platform namespaced analytic context
     location: 'renderer'
   };
-  return jsx(AnalyticsContext, {
+  return /*#__PURE__*/React.createElement(AnalyticsContext, {
     data: analyticsData
-  }, jsx(LinkUrl, _extends({
-    css: anchorStyles
-    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-    ,
+  }, /*#__PURE__*/React.createElement(LinkUrlMigration
+  // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+  , _extends({
     onClick: function onClick(e) {
       if (fireAnalyticsEvent) {
         fireAnalyticsEvent({

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

@@ -19,7 +19,8 @@ var BodiedExtension = function BodiedExtension(props) {
     parameters = props.parameters,
     extensionViewportSizes = props.extensionViewportSizes,
     localId = props.localId,
-    shouldDisplayExtensionAsInline = props.shouldDisplayExtensionAsInline;
+    shouldDisplayExtensionAsInline = props.shouldDisplayExtensionAsInline,
+    fireAnalyticsEvent = props.fireAnalyticsEvent;
   var _useAnalyticsEvents = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var removeOverflow = React.Children.toArray(children)
@@ -57,7 +58,8 @@ var BodiedExtension = function BodiedExtension(props) {
         // Return the content directly if it's a valid JSX.Element
         return renderExtension(result, layout, {
           isTopLevel: path.length < 1,
-          rendererAppearance: props.rendererAppearance
+          rendererAppearance: props.rendererAppearance,
+          fireAnalyticsEvent: fireAnalyticsEvent
         }, removeOverflow, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, undefined, localId, shouldDisplayExtensionAsInline, node);
       }
     } catch (_unused) {
@@ -68,7 +70,8 @@ var BodiedExtension = function BodiedExtension(props) {
     // Always return default content if anything goes wrong
     return renderExtension(children, layout, {
       isTopLevel: path.length < 1,
-      rendererAppearance: props.rendererAppearance
+      rendererAppearance: props.rendererAppearance,
+      fireAnalyticsEvent: fireAnalyticsEvent
     }, removeOverflow, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, undefined, localId, shouldDisplayExtensionAsInline, node);
   }))));
 };

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

@@ -6,7 +6,8 @@ import _extends from "@babel/runtime/helpers/extends";
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx, css } from '@emotion/react';
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import ExtensionRenderer from '../../ui/ExtensionRenderer';
 import { overflowShadow, WidthConsumer } from '@atlaskit/editor-common/ui';
 import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
@@ -38,6 +39,28 @@ var getViewportSize = function getViewportSize(extensionId, extensionViewportSiz
 var containerStyle = css({
   containerType: 'inline-size'
 });
+/**
+ * Fires an analytics event once on mount when a bodied extension is rendered as an inline element.
+ * The node is stored in a ref to avoid re-firing if the node reference changes.
+ */
+var FireExtensionAsInlineAnalytics = function FireExtensionAsInlineAnalytics(_ref) {
+  var fireAnalyticsEvent = _ref.fireAnalyticsEvent,
+    node = _ref.node;
+  var nodeRef = useRef(node);
+  useEffect(function () {
+    fireAnalyticsEvent({
+      action: ACTION.RENDERED,
+      actionSubject: ACTION_SUBJECT.EXTENSION_AS_INLINE,
+      actionSubjectId: ACTION_SUBJECT_ID.EXTENSION_BODIED,
+      attributes: {
+        extensionKey: nodeRef.current.extensionKey,
+        extensionType: nodeRef.current.extensionType
+      },
+      eventType: EVENT_TYPE.OPERATIONAL
+    });
+  }, [fireAnalyticsEvent]);
+  return null;
+};
 export var renderExtension = function renderExtension(content, layout) {
   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   var removeOverflow = arguments.length > 3 ? arguments[3] : undefined;
@@ -51,10 +74,11 @@ export var renderExtension = function renderExtension(content, layout) {
   var overflowContainerClass = !removeOverflow ? RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER : '';
 
   // by default, we assume the extension is at top level, (direct child of doc node)
-  var _ref = options || {},
-    _ref$isTopLevel = _ref.isTopLevel,
-    isTopLevel = _ref$isTopLevel === void 0 ? true : _ref$isTopLevel,
-    rendererAppearance = _ref.rendererAppearance;
+  var _ref2 = options || {},
+    _ref2$isTopLevel = _ref2.isTopLevel,
+    isTopLevel = _ref2$isTopLevel === void 0 ? true : _ref2$isTopLevel,
+    rendererAppearance = _ref2.rendererAppearance,
+    fireAnalyticsEvent = _ref2.fireAnalyticsEvent;
   // we should only use custom layout for full-page appearance
   var canUseCustomLayout = expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererAppearance === 'full-page' : true;
   var isCustomLayout = isTopLevel && ['wide', 'full-width'].includes(layout) && canUseCustomLayout;
@@ -69,6 +93,10 @@ export var renderExtension = function renderExtension(content, layout) {
   var extensionHeight = nodeHeight || viewportSize;
   var isInline = (shouldDisplayExtensionAsInline === null || shouldDisplayExtensionAsInline === void 0 ? void 0 : shouldDisplayExtensionAsInline(node)) && expValEquals('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true);
   var inlineClassName = isInline ? RendererCssClassName.EXTENSION_AS_INLINE : '';
+  var asInlineAnalytics = isInline && fireAnalyticsEvent && node && fg('platform_editor_render_inline_extension_analytics') ? jsx(FireExtensionAsInlineAnalytics, {
+    fireAnalyticsEvent: fireAnalyticsEvent,
+    node: node
+  }) : null;
   if (expValEquals('platform_editor_renderer_extension_width_fix', 'isEnabled', true)) {
     var extensionDiv = jsx("div", {
       ref: options.handleRef
@@ -92,14 +120,14 @@ export var renderExtension = function renderExtension(content, layout) {
       ,
       className: "".concat(RendererCssClassName.EXTENSION_INNER_WRAPPER, " ").concat(overflowContainerClass),
       css: [!isInsideOfInlineExtension && fg('platform_fix_macro_renders_in_layouts') && containerStyle]
-    }, content));
+    }, asInlineAnalytics, content));
     return centerAlignClass && expValEquals('platform_editor_flex_based_centering', 'isEnabled', true) ? jsx("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
       className: RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER + ' ' + RendererCssClassName.FLEX_CENTER_WRAPPER
     }, extensionDiv) : extensionDiv;
   }
-  return jsx(WidthConsumer, null, function (_ref2) {
-    var width = _ref2.width;
+  return jsx(WidthConsumer, null, function (_ref3) {
+    var width = _ref3.width;
     var extensionDiv = jsx("div", {
       ref: options.handleRef
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -121,7 +149,7 @@ export var renderExtension = function renderExtension(content, layout) {
       ,
       className: "".concat(RendererCssClassName.EXTENSION_INNER_WRAPPER, " ").concat(overflowContainerClass),
       css: [!isInsideOfInlineExtension && fg('platform_fix_macro_renders_in_layouts') && containerStyle]
-    }, content));
+    }, asInlineAnalytics, content));
     return centerAlignClass && expValEquals('platform_editor_flex_based_centering', 'isEnabled', true) ? jsx("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
       className: RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER + ' ' + RendererCssClassName.FLEX_CENTER_WRAPPER
@@ -146,8 +174,8 @@ var Extension = function Extension(props) {
   // eslint-disable-next-line react/jsx-props-no-spreading
   , _extends({}, props, {
     type: "extension"
-  }), function (_ref3) {
-    var result = _ref3.result;
+  }), function (_ref4) {
+    var result = _ref4.result;
     try {
       // Return the result directly if it's a valid JSX.Element
       if (result && /*#__PURE__*/React.isValidElement(result)) {

package/dist/esm/react/nodes/layoutColumn-compiled.compiled.css

@@ -0,0 +1,10 @@
+._12kpidpf [class*=image-wrap-]:has(+[class*=image-wrap-]){margin-top:0}
+._166hgrf3+.fabric-editor-block-mark>h4{margin-top:0!important}
+._19segrf3+.fabric-editor-block-mark>h1{margin-top:0!important}
+._1ki1grf3+.fabric-editor-block-mark>h2{margin-top:0!important}
+._1skbgrf3+*{margin-top:0!important}
+._1tihidpf [class*=image-wrap-]+[class*=image-wrap-]{margin-top:0}
+._7g1ogrf3+.fabric-editor-block-mark>h5{margin-top:0!important}
+._bmdegrf3+.fabric-editor-block-mark>h3{margin-top:0!important}
+._hgeogrf3+.fabric-editor-block-mark>p{margin-top:0!important}
+._sk2jgrf3+.fabric-editor-block-mark>h6{margin-top:0!important}

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

@@ -0,0 +1,31 @@
+/* layoutColumn-compiled.tsx generated by @compiled/babel-plugin v0.39.1 */
+/**
+ * Compiled branch of the `platform_editor_static_css` experiment.
+ * Used via `componentWithCondition` in `layoutColumn.tsx`.
+ *
+ * Cleanup: delete this file once the experiment has shipped.
+ */
+import "./layoutColumn-compiled.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import { WidthProvider } from '@atlaskit/editor-common/ui';
+import { fg } from '@atlaskit/platform-feature-flags';
+
+// localized styles, was from clearNextSiblingMarginTopStyle in @atlaskit/editor-common/ui
+var clearNextSiblingMarginTopStyle = null;
+var multipleWrappedImagesStyle = null;
+
+// localized styles, was from clearNextSiblingBlockMarkMarginTopStyle in @atlaskit/editor-common/ui
+var clearNextSiblingBlockMarkMarginTopStyle = null;
+export var LayoutSectionCompiled = function LayoutSectionCompiled(props) {
+  return /*#__PURE__*/React.createElement("div", {
+    "data-layout-column": true,
+    "data-column-width": props.width,
+    style: {
+      flexBasis: "".concat(props.width, "%")
+    },
+    className: ax([fg('platform_editor_fix_media_in_renderer') && "_1tihidpf _12kpidpf"])
+  }, /*#__PURE__*/React.createElement(WidthProvider, null, /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1skbgrf3", "_19segrf3 _1ki1grf3 _bmdegrf3 _166hgrf3 _7g1ogrf3 _sk2jgrf3 _hgeogrf3"])
+  }), props.children));
+};

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

@@ -0,0 +1,52 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+/**
+ * Emotion branch of the `platform_editor_static_css` experiment.
+ * Used via `componentWithCondition` in `layoutColumn.tsx`.
+ *
+ * Cleanup: delete this file once the experiment has shipped.
+ */
+import React from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- intentional: emotion fallback for compiled migration
+import { jsx, css } from '@emotion/react';
+import { WidthProvider } from '@atlaskit/editor-common/ui';
+import { fg } from '@atlaskit/platform-feature-flags';
+
+// localized styles, was from clearNextSiblingMarginTopStyle in @atlaskit/editor-common/ui
+var clearNextSiblingMarginTopStyle = 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'
+  }
+});
+var multipleWrappedImagesStyle = css({
+  // Given the first wrapped mediaSingle has 0 marginTop (see clearNextSiblingMarginTopStyle),
+  // update all wrapped mediaSingle inside layout to have 0 margin top unless they don't have sibling wrapped mediaSingle
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,  @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '& [class*="image-wrap-"] + [class*="image-wrap-"], & [class*="image-wrap-"]:has( + [class*="image-wrap-"])': {
+    marginTop: '0'
+  }
+});
+
+// localized styles, was from clearNextSiblingBlockMarkMarginTopStyle in @atlaskit/editor-common/ui
+var clearNextSiblingBlockMarkMarginTopStyle = 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'
+}));
+export var LayoutSectionEmotion = function LayoutSectionEmotion(props) {
+  return jsx("div", {
+    "data-layout-column": true,
+    "data-column-width": props.width,
+    style: {
+      flexBasis: "".concat(props.width, "%")
+    },
+    css: fg('platform_editor_fix_media_in_renderer') && multipleWrappedImagesStyle
+  }, jsx(WidthProvider, null, jsx("div", {
+    css: [clearNextSiblingMarginTopStyle, clearNextSiblingBlockMarkMarginTopStyle]
+  }), props.children));
+};