@atlaskit/editor-core 221.2.0 → 221.3.0

package/dist/es2019/ui/Appearance/Comment/StickyToolbar-emotion.js

@@ -0,0 +1,128 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+/**
+ * Emotion fallback branch of the `platform_editor_core_non_ecc_static_css` experiment.
+ * Used via `componentWithCondition` in `Toolbar.tsx`.
+ *
+ * Cleanup: delete this file once the experiment has shipped.
+ */
+
+import { useEffect, useState } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- intentional: emotion fallback for compiled migration
+import { css, jsx } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+const MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = 490;
+const akEditorMenuZIndex = 500;
+const akEditorToolbarKeylineHeight = 2;
+const mainToolbarWrapperStyleNew = css({
+  position: 'relative',
+  alignItems: 'center',
+  padding: `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-100, 8px)"} 0`,
+  display: 'flex',
+  height: 'auto',
+  backgroundColor: "var(--ds-surface, #FFFFFF)",
+  boxShadow: 'none',
+  paddingLeft: "var(--ds-space-250, 20px)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '> div': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '> div:first-of-type:not(style), > style:first-of-type + *': {
+      marginLeft: 0
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '.block-type-btn': {
+    paddingLeft: 0
+  }
+});
+const mainToolbarWithPadding = css({
+  padding: `${"var(--ds-space-100, 8px)"}`
+});
+const mainToolbarTwoLineStylesNew = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '& > div': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+    [`@media (max-width: ${MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT}px)`]: {
+      flexDirection: 'column-reverse',
+      alignItems: 'end',
+      display: 'flex',
+      justifyContent: 'flex-end'
+    },
+    /* make this more explicit for a toolbar */
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '> div:first-of-type': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+      [`@media (max-width: ${MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT}px)`]: {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+        '> div:nth-of-type(2)': {
+          justifyContent: 'flex-end',
+          display: 'flex'
+        }
+      }
+    }
+  }
+});
+const mainToolbarWrapperStylesVisualRefresh = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  'span svg': {
+    maxWidth: '100%'
+  }
+});
+const mainToolbarWithRadiusStyle = css({
+  borderRadius: `${"var(--ds-radius-small, 3px)"} ${"var(--ds-radius-small, 3px)"} 0 0`
+});
+const mainToolbarRadius = css({
+  borderRadius: `${"var(--ds-radius-medium, 6px)"} ${"var(--ds-radius-medium, 6px)"} 0 0`
+});
+const editorModernisationToolbarStyle = css({
+  borderRadius: `${"var(--ds-radius-xlarge, 12px)"} ${"var(--ds-radius-xlarge, 12px)"} 0 0`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '&.show-keyline': {
+    boxShadow: 'none'
+  }
+});
+const stickyToolbarWrapperStyleNew = css({
+  position: 'sticky',
+  paddingBottom: "var(--ds-space-100, 8px)",
+  zIndex: akEditorMenuZIndex,
+  transition: 'box-shadow ease-in-out 0.2s',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '&.show-keyline': {
+    boxShadow: `0 ${akEditorToolbarKeylineHeight}px 0 0 ${"var(--ds-background-accent-gray-subtlest, #F0F1F2)"}`
+  }
+});
+export const StickyToolbarEmotion = props => {
+  const [top, setTop] = useState(0);
+
+  // ED-15802: if externalToolbarRef is passed in, set top to externalToolbarRef?.current?.clientHeight
+  // else if offsetTop is a number set top to offsetTop
+  // otherwise top is 0 as initial state
+  useEffect(() => {
+    var _props$externalToolba, _props$externalToolba2;
+    if ((_props$externalToolba = props.externalToolbarRef) !== null && _props$externalToolba !== void 0 && (_props$externalToolba2 = _props$externalToolba.current) !== null && _props$externalToolba2 !== void 0 && _props$externalToolba2.clientHeight) {
+      setTop(props.externalToolbarRef.current.clientHeight);
+    } else {
+      setTop(props.offsetTop || 0);
+    }
+  }, [props.externalToolbarRef, props.offsetTop]);
+  const wrapperStyle = {
+    top: `${top}px`
+  };
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/prefer-primitives
+    jsx("div", {
+      css: [mainToolbarWrapperStyleNew, props.twoLineEditorToolbar && mainToolbarTwoLineStylesNew, mainToolbarWrapperStylesVisualRefresh, stickyToolbarWrapperStyleNew, props.isNewToolbarEnabled && mainToolbarWithPadding, expValEquals('platform_editor_comment_editor_border_radius', 'isEnabled', true) && mainToolbarRadius, !expValEquals('platform_editor_comment_editor_border_radius', 'isEnabled', true) && fg('platform_editor_comments_border_radius') && mainToolbarWithRadiusStyle, props.isEditorModernisationEnabled && editorModernisationToolbarStyle]
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/enforce-style-prop -- top is computed dynamically from externalToolbarRef height / offsetTop and cannot be a static css value
+      ,
+      style: wrapperStyle,
+      "data-testid": "ak-editor-main-toolbar"
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
+      className: 'show-keyline'
+    }, props.children)
+  );
+};

package/dist/es2019/ui/Appearance/Comment/Toolbar.js

@@ -1,136 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-import React, { useEffect, useState } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic
-import { css, jsx } from '@emotion/react';
-import { fg } from '@atlaskit/platform-feature-flags';
+import React from 'react';
+import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-const MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = 490;
-const akEditorMenuZIndex = 500;
-const akEditorToolbarKeylineHeight = 2;
-const mainToolbarWrapperStyleNew = css({
-  position: 'relative',
-  alignItems: 'center',
-  padding: `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-100, 8px)"} 0`,
-  display: 'flex',
-  height: 'auto',
-  backgroundColor: "var(--ds-surface, #FFFFFF)",
-  boxShadow: 'none',
-  paddingLeft: "var(--ds-space-250, 20px)",
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '> div': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-    '> div:first-of-type:not(style), > style:first-of-type + *': {
-      marginLeft: 0
-    }
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-  '.block-type-btn': {
-    paddingLeft: 0
-  }
-});
-
-/** keep default padding for entire toolbar */
-const mainToolbarWithoutLeftPadding = css({
-  padding: `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-100, 8px)"} 0`
-});
-const mainToolbarWithPadding = css({
-  padding: `${"var(--ds-space-100, 8px)"}`
-});
-const mainToolbarTwoLineStylesNew = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '& > div': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
-    [`@media (max-width: ${MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT}px)`]: {
-      flexDirection: 'column-reverse',
-      alignItems: 'end',
-      display: 'flex',
-      justifyContent: 'flex-end'
-    },
-    /* make this more explicit for a toolbar */
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-    '> div:first-of-type': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
-      [`@media (max-width: ${MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT}px)`]: {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-        '> div:nth-of-type(2)': {
-          justifyContent: 'flex-end',
-          display: 'flex'
-        }
-      }
-    }
-  }
-});
-const mainToolbarWrapperStylesVisualRefresh = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  'span svg': {
-    maxWidth: '100%'
-  }
-});
-const mainToolbarWithRadiusStyle = css({
-  borderRadius: `${"var(--ds-radius-small, 3px)"} ${"var(--ds-radius-small, 3px)"} 0 0`
-});
-const mainToolbarRadius = css({
-  borderRadius: `${"var(--ds-radius-medium, 6px)"} ${"var(--ds-radius-medium, 6px)"} 0 0`
-});
-const editorModernisationToolbarStyle = css({
-  borderRadius: `${"var(--ds-radius-xlarge, 12px)"} ${"var(--ds-radius-xlarge, 12px)"} 0 0`,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '&.show-keyline': {
-    boxShadow: 'none'
-  }
-});
-const stickyToolbarWrapperStyleNew = css({
-  position: 'sticky',
-  paddingBottom: "var(--ds-space-100, 8px)",
-  zIndex: akEditorMenuZIndex,
-  transition: 'box-shadow ease-in-out 0.2s',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '&.show-keyline': {
-    boxShadow: `0 ${akEditorToolbarKeylineHeight}px 0 0 ${"var(--ds-background-accent-gray-subtlest, #F0F1F2)"}`
-  }
-});
-const StickyToolbar = props => {
-  const [top, setTop] = useState(0);
-
-  // ED-15802: if externalToolbarRef is passed in, set top to externalToolbarRef?.current?.clientHeight
-  // else if offsetTop is a number set top to offsetTop
-  // otherwise top is 0 as initial state
-  useEffect(() => {
-    var _props$externalToolba, _props$externalToolba2;
-    if ((_props$externalToolba = props.externalToolbarRef) !== null && _props$externalToolba !== void 0 && (_props$externalToolba2 = _props$externalToolba.current) !== null && _props$externalToolba2 !== void 0 && _props$externalToolba2.clientHeight) {
-      setTop(props.externalToolbarRef.current.clientHeight);
-    } else {
-      setTop(props.offsetTop || 0);
-    }
-  }, [props.externalToolbarRef, props.offsetTop]);
-  return (
-    // eslint-disable-next-line @atlaskit/design-system/prefer-primitives
-    jsx("div", {
-      css: [mainToolbarWrapperStyleNew, props.twoLineEditorToolbar && mainToolbarTwoLineStylesNew, mainToolbarWrapperStylesVisualRefresh, stickyToolbarWrapperStyleNew, props.isNewToolbarEnabled && mainToolbarWithPadding, expValEquals('platform_editor_comment_editor_border_radius', 'isEnabled', true) && mainToolbarRadius, !expValEquals('platform_editor_comment_editor_border_radius', 'isEnabled', true) && fg('platform_editor_comments_border_radius') && mainToolbarWithRadiusStyle, props.isEditorModernisationEnabled && editorModernisationToolbarStyle]
-      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-      ,
-      style: {
-        top: `${top}px`
-      },
-      "data-testid": "ak-editor-main-toolbar"
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      ,
-      className: 'show-keyline'
-    }, props.children)
-  );
-};
-const FixedToolbar = props =>
-// eslint-disable-next-line @atlaskit/design-system/prefer-primitives
-jsx("div", {
-  css: [mainToolbarWrapperStyleNew, props.twoLineEditorToolbar && mainToolbarTwoLineStylesNew, mainToolbarWrapperStylesVisualRefresh, props.isNewToolbarEnabled && mainToolbarWithoutLeftPadding, !expValEquals('platform_editor_comment_editor_border_radius', 'isEnabled', true) && fg('platform_editor_comments_border_radius') && mainToolbarWithRadiusStyle, expValEquals('platform_editor_comment_editor_border_radius', 'isEnabled', true) && mainToolbarRadius, props.isEditorModernisationEnabled && editorModernisationToolbarStyle],
-  "data-testid": "ak-editor-main-toolbar"
-}, props.children);
+import { FixedToolbarCompiled } from './FixedToolbar-compiled';
+import { FixedToolbarEmotion } from './FixedToolbar-emotion';
+import { StickyToolbarCompiled } from './StickyToolbar-compiled';
+import { StickyToolbarEmotion } from './StickyToolbar-emotion';
+const StickyToolbarMigration = componentWithCondition(() => expValEquals('platform_editor_core_non_ecc_static_css', 'isEnabled', true), StickyToolbarCompiled, StickyToolbarEmotion);
+const FixedToolbarMigration = componentWithCondition(() => expValEquals('platform_editor_core_non_ecc_static_css', 'isEnabled', true), FixedToolbarCompiled, FixedToolbarEmotion);
 
 /**
  * ED-15802: Scenarios when a sticky bar is used:
@@ -167,7 +44,7 @@ export const MainToolbar = ({
   isNewToolbarEnabled
 }) => {
   if (useStickyToolbar) {
-    return jsx(StickyToolbar
+    return /*#__PURE__*/React.createElement(StickyToolbarMigration
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading
     , _extends({}, getStickyParameters(useStickyToolbar), {
@@ -176,7 +53,7 @@ export const MainToolbar = ({
       isNewToolbarEnabled: isNewToolbarEnabled
     }), children);
   }
-  return jsx(FixedToolbar, {
+  return /*#__PURE__*/React.createElement(FixedToolbarMigration, {
     isEditorModernisationEnabled: isEditorModernisationEnabled,
     twoLineEditorToolbar: twoLineEditorToolbar,
     isNewToolbarEnabled: isNewToolbarEnabled

package/dist/es2019/ui/Appearance/FullPage/FullPageContentArea.js

@@ -63,6 +63,15 @@ const hideEditorContentAreaProsemirrorWithAttributeStyle = css({
     display: 'none'
   }
 });
+const hideEditorContentAreaScrollGutterWithAttributeStyle = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '&[data-markdown-mode-hide-scroll-gutter="true"] > .ak-editor-content-area > [data-vc="scroll-gutter"]': {
+    display: 'none'
+  }
+});
+const hideEditorScrollGutterStyle = css({
+  display: 'none'
+});
 const fullWidthNonChromelessBreakoutBlockTableStyle = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-1
   '.fabric-editor--full-width-mode:not(:has(#chromeless-editor))': {
@@ -222,6 +231,38 @@ const contentAreaHeightNoToolbar = css({
 const markdownModeContainerBackgroundStyle = css({
   backgroundColor: "var(--ds-surface-sunken, #F8F8F8)"
 });
+const markdownModeContentAreaStyle = css({
+  boxSizing: 'border-box',
+  height: '100%',
+  margin: 0,
+  maxWidth: 'none',
+  minWidth: 0,
+  paddingBottom: 0,
+  paddingTop: 0,
+  width: '100%',
+  // The markdown source view is rendered through PluginSlot. Stretch those
+  // intermediate wrappers so its in-flow footer can sit at the bottom without
+  // overlaying the CodeMirror scrollbar.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '> .ak-editor-content-area': {
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+    minHeight: 0,
+    minWidth: 0,
+    padding: 0,
+    width: '100%'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '> .ak-editor-content-area > [data-testid="plugins-components-wrapper"]': {
+    display: 'flex',
+    flex: '1 1 auto',
+    minHeight: 0,
+    minWidth: 0,
+    width: '100%'
+  }
+});
 export const CONTENT_AREA_TEST_ID = 'ak-editor-fp-content-area';
 // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export const EDITOR_CONTAINER = 'ak-editor-container';
@@ -258,7 +299,10 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
     var _states$markdownModeS2;
     return (_states$markdownModeS2 = states.markdownModeState) === null || _states$markdownModeS2 === void 0 ? void 0 : _states$markdownModeS2.isMarkdownMode;
   });
-  const shouldHideProseMirrorForMarkdownMode = expValEqualsNoExposure('cc-markdown-mode', 'isEnabled', true) && markdownPluginCurrentView !== 'preview' && markdownPluginCurrentIsMarkdownMode;
+  const isMarkdownModeExperimentEnabled = expValEqualsNoExposure('cc-markdown-mode', 'isEnabled', true);
+  const shouldHideProseMirrorForMarkdownMode = isMarkdownModeExperimentEnabled && markdownPluginCurrentView !== 'preview' && markdownPluginCurrentIsMarkdownMode;
+  const shouldHideScrollGutterForMarkdownMode = isMarkdownModeExperimentEnabled && markdownPluginCurrentIsMarkdownMode;
+  const shouldUseMarkdownModeMvpLayout = shouldHideProseMirrorForMarkdownMode && fg('platform_editor_md_mvp_layout');
   return jsx("div", {
     css: [contentAreaNew, props.isEditorToolbarHidden && contentAreaHeightNoToolbar],
     "data-testid": CONTENT_AREA_TEST_ID,
@@ -266,7 +310,7 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
   }, jsx("div", {
     css: [
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
-    contentAreaWrapper, shouldHideProseMirrorForMarkdownMode && fg('platform_editor_md_mvp_layout') && markdownModeContainerBackgroundStyle],
+    contentAreaWrapper, shouldUseMarkdownModeMvpLayout && markdownModeContainerBackgroundStyle],
     "data-testid": EDITOR_CONTAINER,
     "data-editor-container": 'true'
   }, jsx(EditorContentContainer
@@ -285,10 +329,11 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
     editorDisabled: props.disabled
   }, jsx("div", {
     "data-markdown-mode-hide-prosemirror": shouldHideProseMirrorForMarkdownMode ? 'true' : undefined,
+    "data-markdown-mode-hide-scroll-gutter": shouldHideScrollGutterForMarkdownMode ? 'true' : undefined,
     css: [editorContentAreaNew, editorContentAreaProsemirrorStyle,
     // EDITOR-6558: hide ProseMirror when the markdown-mode plugin
     // reports a non-WYSIWYG view.
-    shouldHideProseMirrorForMarkdownMode && hideEditorContentAreaProsemirrorWithAttributeStyle, tableFullPageEditorStylesNew, fullWidthNonChromelessBreakoutBlockTableStyle,
+    shouldHideProseMirrorForMarkdownMode && hideEditorContentAreaProsemirrorWithAttributeStyle, shouldHideScrollGutterForMarkdownMode && hideEditorContentAreaScrollGutterWithAttributeStyle, shouldUseMarkdownModeMvpLayout && markdownModeContentAreaStyle, tableFullPageEditorStylesNew, fullWidthNonChromelessBreakoutBlockTableStyle,
     // for breakout resizing, there's no need to restrict the width of codeblocks as they're always wrapped in a breakout mark
     expValEqualsNoExposure('platform_editor_breakout_resizing', 'isEnabled', true) ? editorContentAreaContainerStyleExcludeCodeBlockNew : editorContentAreaContainerStyleNew, fg('platform_editor_nested_dnd_styles_changes') && editorContentAreaContainerNestedDndStyle, !fg('platform_editor_controls_no_toolbar_space') && editorExperiment('platform_editor_controls', 'variant1') && contentAreaReducedHeaderSpace, !fg('platform_editor_controls_no_toolbar_space') && props.isEditorToolbarHidden && editorExperiment('platform_editor_controls', 'variant1') && contentAreaReservedPrimaryToolbarSpace],
     style: {
@@ -333,6 +378,7 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
     wrapperElement: props.wrapperElement
   }), props.editorDOMElement, !!props.customContentComponents && 'after' in props.customContentComponents ? contentComponentClickWrapper(props.customContentComponents.after) : null, allowScrollGutter && (editorExperiment('platform_editor_blocks', true) ? jsx("div", {
     id: "editor-scroll-gutter",
+    css: shouldHideScrollGutterForMarkdownMode && hideEditorScrollGutterStyle,
     style: {
       paddingBottom: `${(_allowScrollGutter$gu = allowScrollGutter.gutterSize) !== null && _allowScrollGutter$gu !== void 0 ? _allowScrollGutter$gu : '120'}px`
     },
@@ -340,6 +386,7 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
     "data-editor-scroll-gutter": "true"
   }) : jsx("div", {
     id: "editor-scroll-gutter",
+    css: shouldHideScrollGutterForMarkdownMode && hideEditorScrollGutterStyle,
     style: {
       paddingBottom: `${(_allowScrollGutter$gu2 = allowScrollGutter.gutterSize) !== null && _allowScrollGutter$gu2 !== void 0 ? _allowScrollGutter$gu2 : '120'}px`
     },

package/dist/es2019/ui/Toolbar/ToolbarComponentsWrapper-compiled.compiled.css

@@ -0,0 +1,2 @@
+._1e0c1txw{display:flex}
+@media (max-width:0px){._1hm21yb4{justify-content:space-between}}

package/dist/es2019/ui/Toolbar/ToolbarComponentsWrapper-compiled.js

@@ -0,0 +1,20 @@
+/* ToolbarComponentsWrapper-compiled.tsx generated by @compiled/babel-plugin v0.39.1 */
+/**
+ * Compiled branch of the `platform_editor_core_non_ecc_static_css` experiment.
+ * Used via `componentWithCondition` in `ToolbarInner.tsx`.
+ *
+ * Cleanup: delete this file once the experiment has shipped.
+ */
+import "./ToolbarComponentsWrapper-compiled.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+const toolbarComponentsWrapperCompiledStyles = {
+  root: "_1e0c1txw _1hm21yb4"
+};
+export const ToolbarComponentsWrapperCompiled = ({
+  children,
+  'data-vc': dataVc
+}) => /*#__PURE__*/React.createElement("div", {
+  "data-vc": dataVc,
+  className: ax([toolbarComponentsWrapperCompiledStyles.root])
+}, children);

package/dist/es2019/ui/Toolbar/ToolbarComponentsWrapper-emotion.js

@@ -0,0 +1,28 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+/**
+ * Emotion fallback branch of the `platform_editor_core_non_ecc_static_css` experiment.
+ * Used via `componentWithCondition` in `ToolbarInner.tsx`.
+ *
+ * Cleanup: delete this file once the experiment has shipped.
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- intentional: emotion fallback for compiled migration
+import { css, jsx } from '@emotion/react';
+import { akEditorMobileMaxWidth } from '@atlaskit/editor-shared-styles';
+const toolbarComponentsWrapperEmotionStyles = css({
+  display: 'flex',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+  [`@media (max-width: ${akEditorMobileMaxWidth}px)`]: {
+    justifyContent: 'space-between'
+  }
+});
+export const ToolbarComponentsWrapperEmotion = ({
+  children,
+  'data-vc': dataVc
+}) => jsx("div", {
+  css: toolbarComponentsWrapperEmotionStyles,
+  "data-vc": dataVc
+}, children);

package/dist/es2019/ui/Toolbar/ToolbarInner.js

@@ -1,21 +1,11 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
 import React from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic
-import { css, jsx } from '@emotion/react';
 import isEqual from 'lodash/isEqual';
 import { isSSR } from '@atlaskit/editor-common/core-utils';
-import { akEditorMobileMaxWidth } from '@atlaskit/editor-shared-styles';
-const toolbarComponentsWrapper = css({
-  display: 'flex',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  [`@media (max-width: ${akEditorMobileMaxWidth}px)`]: {
-    justifyContent: 'space-between'
-  }
-});
+import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { ToolbarComponentsWrapperCompiled } from './ToolbarComponentsWrapper-compiled';
+import { ToolbarComponentsWrapperEmotion } from './ToolbarComponentsWrapper-emotion';
+const ToolbarComponentsWrapperMigration = componentWithCondition(() => expValEquals('platform_editor_core_non_ecc_static_css', 'isEnabled', true), ToolbarComponentsWrapperCompiled, ToolbarComponentsWrapperEmotion);
 
 // Ignored via go/ees005
 // eslint-disable-next-line @repo/internal/react/no-class-components
@@ -48,8 +38,7 @@ export class ToolbarInner extends React.Component {
       // Hiding toolbar in SSR until the dependency of screen width is resolved in SSR environment.
       return null;
     }
-    return jsx("div", {
-      css: toolbarComponentsWrapper,
+    return /*#__PURE__*/React.createElement(ToolbarComponentsWrapperMigration, {
       "data-vc": "toolbar-inner"
     }, items.map((component, key) => {
       const element = component({

package/dist/es2019/ui/Toolbar/ToolbarSizeDetectorWrapper-compiled.compiled.css

@@ -0,0 +1,2 @@
+._1bsb1osq{width:100%}
+._kqswh2mm{position:relative}

package/dist/es2019/ui/Toolbar/ToolbarSizeDetectorWrapper-compiled.js

@@ -0,0 +1,20 @@
+/* ToolbarSizeDetectorWrapper-compiled.tsx generated by @compiled/babel-plugin v0.39.1 */
+/**
+ * Compiled branch of the `platform_editor_core_non_ecc_static_css` experiment.
+ * Used via `componentWithCondition` in `ToolbarWithSizeDetector.tsx`.
+ *
+ * Cleanup: delete this file once the experiment has shipped.
+ */
+import "./ToolbarSizeDetectorWrapper-compiled.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+const toolbarSizeDetectorWrapperCompiledStyles = {
+  root: "_1bsb1osq _kqswh2mm"
+};
+export const ToolbarSizeDetectorWrapperCompiled = ({
+  children,
+  style
+}) => /*#__PURE__*/React.createElement("div", {
+  style: style,
+  className: ax([toolbarSizeDetectorWrapperCompiledStyles.root])
+}, children);

package/dist/es2019/ui/Toolbar/ToolbarSizeDetectorWrapper-emotion.js

@@ -0,0 +1,24 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+/**
+ * Emotion fallback branch of the `platform_editor_core_non_ecc_static_css` experiment.
+ * Used via `componentWithCondition` in `ToolbarWithSizeDetector.tsx`.
+ *
+ * Cleanup: delete this file once the experiment has shipped.
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- intentional: emotion fallback for compiled migration
+import { css, jsx } from '@emotion/react';
+const toolbarSizeDetectorWrapperEmotionStyles = css({
+  width: '100%',
+  position: 'relative'
+});
+export const ToolbarSizeDetectorWrapperEmotion = ({
+  children,
+  style
+}) => jsx("div", {
+  css: toolbarSizeDetectorWrapperEmotionStyles,
+  style: style
+}, children);

package/dist/es2019/ui/Toolbar/ToolbarWithSizeDetector.js

@@ -1,23 +1,17 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
 import React, { useMemo } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic
-import { css, jsx } from '@emotion/react';
 import { isSSR } from '@atlaskit/editor-common/core-utils';
 import { ToolbarSize } from '@atlaskit/editor-common/types';
+import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { WidthObserver } from '@atlaskit/width-detector';
 import { isFullPage } from '../../utils/is-full-page';
 import { useElementWidth } from './hooks';
 import { Toolbar } from './Toolbar';
 import { toolbarSizeToWidth, widthToToolbarSize } from './toolbar-size';
-const toolbar = css({
-  width: '100%',
-  position: 'relative'
-});
+import { ToolbarSizeDetectorWrapperCompiled } from './ToolbarSizeDetectorWrapper-compiled';
+import { ToolbarSizeDetectorWrapperEmotion } from './ToolbarSizeDetectorWrapper-emotion';
+const ToolbarSizeDetectorWrapperMigration = componentWithCondition(() => expValEquals('platform_editor_core_non_ecc_static_css', 'isEnabled', true), ToolbarSizeDetectorWrapperCompiled, ToolbarSizeDetectorWrapperEmotion);
 export const ToolbarWithSizeDetector = props => {
   const ref = React.useRef(null);
   const [width, setWidth] = React.useState(undefined);
@@ -40,14 +34,19 @@ export const ToolbarWithSizeDetector = props => {
       return isPreviewPanelResponsivenessEnabled ? 'fit-content' : '254px';
     }
   }, [props.appearance, props.hasMinWidth, props.twoLineEditorToolbar]);
-  return jsx("div", {
-    css: toolbar,
-    style: {
-      minWidth: minWidthValue
-    }
-  }, jsx(WidthObserver, {
+  const memoizedWrapperStyle = useMemo(() => ({
+    minWidth: minWidthValue
+  }), [minWidthValue]);
+  const wrapperStyle = expValEquals('platform_editor_core_non_ecc_static_css', 'isEnabled', true) ? memoizedWrapperStyle : {
+    minWidth: minWidthValue
+  };
+  return /*#__PURE__*/React.createElement(ToolbarSizeDetectorWrapperMigration
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- minWidth is computed dynamically from props.hasMinWidth, props.appearance, props.twoLineEditorToolbar, and the platform_editor_preview_panel_responsiveness experiment, so it cannot be expressed as a static css value.
+  , {
+    style: wrapperStyle
+  }, /*#__PURE__*/React.createElement(WidthObserver, {
     setWidth: setWidth
-  }), props.editorView && toolbarSize ? jsx(Toolbar, {
+  }), props.editorView && toolbarSize ? /*#__PURE__*/React.createElement(Toolbar, {
     toolbarSize: toolbarSize,
     items: props.items,
     editorView: props.editorView,
@@ -63,7 +62,7 @@ export const ToolbarWithSizeDetector = props => {
     containerElement: props.containerElement,
     hasMinWidth: props.hasMinWidth,
     twoLineEditorToolbar: props.twoLineEditorToolbar
-  }) : jsx("div", {
+  }) : /*#__PURE__*/React.createElement("div", {
     ref: ref
   }));
 };

package/dist/es2019/version-wrapper.js

@@ -1,3 +1,3 @@
 export const name = "@atlaskit/editor-core";
 // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-export const version = "221.1.3";
+export const version = "221.2.1";

package/dist/esm/ui/Appearance/Comment/FixedToolbar-compiled.compiled.css

@@ -0,0 +1,20 @@
+
+._2rko12c2{border-radius:var(--ds-radius-medium,6px) var(--ds-radius-medium,6px) 0 0}
+._2rko15b0{border-radius:var(--ds-radius-xlarge,9pt) var(--ds-radius-xlarge,9pt) 0 0}
+._2rko1cku{border-radius:var(--ds-radius-small,3px) var(--ds-radius-small,3px) 0 0}._10ytglyw.show-keyline{box-shadow:none}
+._16qsglyw{box-shadow:none}
+._19bvu2gc{padding-left:var(--ds-space-100,8px)}
+._19bvv47k{padding-left:var(--ds-space-250,20px)}
+._1cuzidpf .block-type-btn{padding-left:0}
+._1e0c1txw{display:flex}
+._1khpidpf >div>div:first-of-type:not(style){margin-left:0}
+._3pwj1osq span svg{max-width:100%}
+._4cvr1h6o{align-items:center}
+._4t3i1wug{height:auto}
+._bfhkvuon{background-color:var(--ds-surface,#fff)}
+._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
+._kqswh2mm{position:relative}
+._lg5oidpf >div>style:first-of-type+*{margin-left:0}
+._n3tdidpf{padding-bottom:0}
+._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
+@media (max-width:490px){._1q27esu3>div>div:first-of-type>div:nth-of-type(2){justify-content:flex-end}._16ec1txw>div>div:first-of-type>div:nth-of-type(2){display:flex}._1uq61sxn>div{flex-direction:column-reverse}._cnpmh9n0>div{align-items:end}._1djy1txw>div{display:flex}._17mgesu3>div{justify-content:flex-end}}