@atlaskit/editor-core 197.10.1 → 197.10.3

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-core
 
+## 197.10.3
+
+### Patch Changes
+
+- [#144122](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/144122)
+  [`5edb8d0467311`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5edb8d0467311) -
+  fix layout shift issue on first block node on SSR
+- Updated dependencies
+
+## 197.10.2
+
+### Patch Changes
+
+- [#144162](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/144162)
+  [`2b2233eed311a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2b2233eed311a) -
+  ED-24858: fixes layout shifts for tables under SSR
+
 ## 197.10.1
 
 ### Patch Changes

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

@@ -26,7 +26,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 
 var CONTENT_AREA_TEST_ID = exports.CONTENT_AREA_TEST_ID = 'ak-editor-fp-content-area';
 var Content = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var _contentAreaRef$curre, _contentAreaRef$curre2;
+  var _contentAreaRef$curre;
   var theme = (0, _react2.useTheme)();
   var fullWidthMode = props.appearance === 'full-width';
   var scrollContainerRef = (0, _react.useRef)(null);
@@ -46,14 +46,16 @@ var Content = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     };
   }, []);
   return (0, _react2.jsx)("div", {
-    css: [
+    css: [(0, _platformFeatureFlags.fg)('platform_editor_breakout_use_css') ?
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    _StyledComponents.contentAreaContainerTypeInlineSize :
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
     _StyledComponents.contentArea,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
     props.isEditorToolbarHidden && _StyledComponents.contentAreaHeightNoToolbar],
     "data-testid": CONTENT_AREA_TEST_ID,
     ref: containerRef
-  }, (0, _platformFeatureFlags.fg)('platform_editor_breakout_use_css') ? (0, _react2.jsx)(_StyledComponents.ScrollContainerNext
+  }, (0, _react2.jsx)(_StyledComponents.ScrollContainer
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   , {
     className: "fabric-editor-popup-scroll-parent",
@@ -94,47 +96,6 @@ var Content = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     containerElement: scrollContainerRef.current,
     dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
     wrapperElement: props.wrapperElement
-  }), props.editorDOMElement, !!props.customContentComponents && 'after' in props.customContentComponents ? props.customContentComponents.after : null)))) : (0, _react2.jsx)(_StyledComponents.ScrollContainer
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-  , {
-    className: "fabric-editor-popup-scroll-parent",
-    featureFlags: props.featureFlags,
-    ref: scrollContainerRef
-  }, (0, _react2.jsx)(_Addon.ClickAreaBlock, {
-    editorView: props.editorView,
-    editorDisabled: props.disabled
-  }, (0, _react2.jsx)("div", {
-    // 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, _StyledComponents.editorContentAreaStyle)({
-      fullWidthMode: fullWidthMode,
-      layoutMaxWidth: theme.layoutMaxWidth
-    }),
-    role: "region",
-    "aria-label": props.intl.formatMessage(_messages.fullPageMessages.editableContentLabel),
-    ref: contentAreaRef
-  }, (0, _react2.jsx)("div", {
-    // 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, _StyledComponents.editorContentGutterStyle)()
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    ,
-    className: ['ak-editor-content-area', 'appearance-full-page', fullWidthMode ? 'fabric-editor--full-width-mode' : ''].join(' '),
-    ref: contentAreaRef
-  }, !!props.customContentComponents && 'before' in props.customContentComponents ? props.customContentComponents.before : props.customContentComponents, (0, _react2.jsx)(_PluginSlot.default, {
-    editorView: props.editorView,
-    editorActions: props.editorActions,
-    eventDispatcher: props.eventDispatcher,
-    providerFactory: props.providerFactory,
-    appearance: props.appearance,
-    items: props.contentComponents,
-    pluginHooks: props.pluginHooks,
-    contentArea: (_contentAreaRef$curre2 = contentAreaRef.current) !== null && _contentAreaRef$curre2 !== void 0 ? _contentAreaRef$curre2 : undefined,
-    popupsMountPoint: props.popupsMountPoint,
-    popupsBoundariesElement: props.popupsBoundariesElement,
-    popupsScrollableElement: props.popupsScrollableElement,
-    disabled: !!props.disabled,
-    containerElement: scrollContainerRef.current,
-    dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
-    wrapperElement: props.wrapperElement
   }), props.editorDOMElement, !!props.customContentComponents && 'after' in props.customContentComponents ? props.customContentComponents.after : null)))), (0, _react2.jsx)("div", {
     css: _StyledComponents.sidebarArea
   }, props.contextPanel || (0, _react2.jsx)(_ContextPanel.ContextPanel, {

package/dist/cjs/ui/Appearance/FullPage/StyledComponents.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sidebarArea = exports.fullPageEditorWrapper = exports.editorContentGutterStyle = exports.editorContentAreaStyle = exports.editorContentAreaHideContainer = exports.contentAreaHeightNoToolbar = exports.contentArea = exports.ScrollContainerNext = exports.ScrollContainer = void 0;
+exports.sidebarArea = exports.fullPageEditorWrapper = exports.editorContentGutterStyle = exports.editorContentAreaStyle = exports.editorContentAreaHideContainer = exports.contentAreaHeightNoToolbar = exports.contentAreaContainerTypeInlineSize = exports.contentArea = exports.ScrollContainer = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _adfSchema = require("@atlaskit/adf-schema");
@@ -41,29 +41,10 @@ var scrollStyles = (0, _react.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
 _scrollbar.scrollbarStyles);
 
-// Added containerType and containerName to enable breakout plugin to calculate the width of the container
-var scrollStylesWitContainerType = (0, _react.css)({
-  flexGrow: 1,
-  height: '100%',
-  overflowY: 'scroll',
-  position: 'relative',
-  display: 'flex',
-  flexDirection: 'column',
-  scrollBehavior: 'smooth',
-  containerType: 'inline-size',
-  containerName: 'editor-area'
-},
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-_scrollbar.scrollbarStyles);
-
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var ScrollContainer = exports.ScrollContainer = (0, _ContentStyles.createEditorContentStyle)(scrollStyles);
 ScrollContainer.displayName = 'ScrollContainer';
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var ScrollContainerNext = exports.ScrollContainerNext = (0, _ContentStyles.createEditorContentStyle)(scrollStylesWitContainerType);
-ScrollContainerNext.displayName = 'ScrollContainer';
-
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var contentArea = exports.contentArea = function contentArea() {
   var editorToolbarHeight = (0, _editorSharedStyles.FULL_PAGE_EDITOR_TOOLBAR_HEIGHT)();
@@ -80,6 +61,24 @@ var contentArea = exports.contentArea = function contentArea() {
   });
 };
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var contentAreaContainerTypeInlineSize = exports.contentAreaContainerTypeInlineSize = function contentAreaContainerTypeInlineSize() {
+  var editorToolbarHeight = (0, _editorSharedStyles.FULL_PAGE_EDITOR_TOOLBAR_HEIGHT)();
+  return (0, _react.css)({
+    display: 'flex',
+    flexDirection: 'row',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    height: "calc(100% - ".concat(editorToolbarHeight, ")"),
+    boxSizing: 'border-box',
+    margin: 0,
+    padding: 0,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    transition: "padding 0ms ".concat(_editorSharedStyles.akEditorSwoopCubicBezier),
+    containerType: 'inline-size',
+    containerName: 'editor-area'
+  });
+};
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var contentAreaHeightNoToolbar = exports.contentAreaHeightNoToolbar = (0, _react.css)({
   height: '100%'

package/dist/cjs/ui/ContentStyles/index.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.placeholderStyles = exports.linkStyles = exports.default = exports.createEditorContentStyle = void 0;
+exports.placeholderStyles = exports.linkStyles = exports.fixBlockControlStylesSSR = exports.default = exports.createEditorContentStyle = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
@@ -14,6 +14,7 @@ var _collab = require("@atlaskit/editor-common/collab");
 var _emoji = require("@atlaskit/editor-common/emoji");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _mention = require("@atlaskit/editor-common/mention");
+var _panel = require("@atlaskit/editor-common/panel");
 var _selection = require("@atlaskit/editor-common/selection");
 var _styles = require("@atlaskit/editor-common/styles");
 var _styles2 = require("@atlaskit/editor-plugins/block-type/styles");
@@ -32,10 +33,10 @@ var _expand = require("./expand");
 var _extension = require("./extension");
 var _layout = require("./layout");
 var _media = require("./media");
-var _panel = require("./panel");
+var _panel2 = require("./panel");
 var _status = require("./status");
 var _tasksAndDecisions = require("./tasks-and-decisions");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 /* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
 /* eslint-disable react-hooks/rules-of-hooks */
 /* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- Requires manual remediation over time due to use of unsafe nested mixins */
@@ -73,13 +74,21 @@ var placeholderStyles = exports.placeholderStyles = (0, _react2.css)({
     }
   }
 });
+var firstBlockNodeStyles = (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\t> .", ",\n\t\t\t> .", ",\n\t\t\t> .", ",\n\t\t\t> div[data-task-list-local-id],\n\t\t> div[data-layout-section],\n\t\t> .", " {\n\t\t\t&:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t> hr:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n"])), _panel.PanelSharedCssClassName.prefix, _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, _styles.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _styles.expandClassNames.prefix);
+
+/**
+ * fix layout issue of first block node
+ */
+var fixBlockControlStylesSSR = exports.fixBlockControlStylesSSR = function fixBlockControlStylesSSR() {
+  return (0, _platformFeatureFlags.fg)('platform_editor_ssr_fix_block_controls') ? firstBlockNodeStyles : null;
+};
 
 // The breakpoint for small devices is 1266px, copied from getBreakpoint in platform/packages/editor/editor-common/src/ui/WidthProvider/index.tsx
 var akEditorBreakpointForSmallDevice = "1266px";
 var contentStyles = function contentStyles(props) {
-  return (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: 52px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (min-width: ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: ", "px;\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t}\n\n\t", "\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t", "\n\n\t", "\n\t", "\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n\t", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t// For FullPage only when inside a table\n\t// Related code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\t// In the \"editorContentAreaContainerStyle\" function\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar,\n\t.", " {\n\t\tpadding: 0;\n\t}\n\n\t/* Link icon in the Atlaskit package\n     is bigger than the others\n  */\n\t.hyperlink-open-link {\n\t\tsvg {\n\t\t\tmax-width: 18px;\n\t\t}\n\t\t&[href] {\n\t\t\tpadding: 0 4px;\n\t\t}\n\t}\n"])), _editorSharedStyles.akEditorGutterPadding, _editorSharedStyles.akEditorDefaultLayoutWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth, _editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, _editorSharedStyles.akEditorCalculatedWideLayoutWidth, (0, _editorSharedStyles.editorFontSize)({
+  return (0, _react2.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: 52px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (min-width: ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: ", "px;\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t}\n\n\t", "\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t", "\n\n\t", "\n\t", "\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n\t", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t// For FullPage only when inside a table\n\t// Related code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\t// In the \"editorContentAreaContainerStyle\" function\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar,\n\t.", " {\n\t\tpadding: 0;\n\t}\n\n\t/* Link icon in the Atlaskit package\n     is bigger than the others\n  */\n\t.hyperlink-open-link {\n\t\tsvg {\n\t\t\tmax-width: 18px;\n\t\t}\n\t\t&[href] {\n\t\t\tpadding: 0 4px;\n\t\t}\n\t}\n"])), _editorSharedStyles.akEditorGutterPadding, _editorSharedStyles.akEditorDefaultLayoutWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth, _editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, _editorSharedStyles.akEditorCalculatedWideLayoutWidth, (0, _editorSharedStyles.editorFontSize)({
     theme: props.theme
-  }), _styles.whitespaceSharedStyles, _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, (0, _platformFeatureFlags.fg)('editor_request_to_edit_task') ? null : (0, _react2.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n\t\t\t\t\tpointer-events: none;\n\t\t\t\t\topacity: 0.7;\n\t\t\t\t}\n\t\t\t"]))), "var(--ds-border-focused, #8cf)", (0, _platformFeatureFlags.fg)('platform_editor_mark_boundary_cursor') ? (0, _react2.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t"]))) : null, _styles5.placeholderTextStyles, placeholderStyles, (0, _codeBlock.codeBlockStyles)(), (0, _styles2.blocktypeStyles)(), (0, _styles.codeMarkSharedStyles)(), _styles.textColorStyles, (0, _styles.backgroundColorStyles)(), listsStyles, ruleStyles(), _media.mediaStyles, (0, _layout.layoutStyles)(props.viewMode), _collab.telepointerStyle, _selection.gapCursorStyles, (0, _panel.panelStyles)(), mentionsStyles, emojiStyles, _styles.tasksAndDecisionsStyles, _styles.gridStyles, linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _extension.extensionStyles, (0, _expand.expandStyles)(), _styles3.findReplaceStyles, _styles4.textHighlightStyle, _tasksAndDecisions.taskDecisionStyles, _status.statusStyles, (0, _styles.annotationSharedStyles)(), (0, _styles.smartCardStyles)(), _styles.smartCardSharedStyles, _date.dateStyles, _styles.embedCardStyles, _styles.unsupportedStyles, _styles.resizerStyles, (0, _aiPanels.aiPanelStyles)(props.colorMode), _styles.MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT);
+  }), _styles.whitespaceSharedStyles, _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, (0, _platformFeatureFlags.fg)('editor_request_to_edit_task') ? null : (0, _react2.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n\t\t\t\t\tpointer-events: none;\n\t\t\t\t\topacity: 0.7;\n\t\t\t\t}\n\t\t\t"]))), "var(--ds-border-focused, #8cf)", (0, _platformFeatureFlags.fg)('platform_editor_mark_boundary_cursor') ? (0, _react2.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t"]))) : null, _styles5.placeholderTextStyles, placeholderStyles, (0, _codeBlock.codeBlockStyles)(), (0, _styles2.blocktypeStyles)(), (0, _styles.codeMarkSharedStyles)(), _styles.textColorStyles, (0, _styles.backgroundColorStyles)(), listsStyles, ruleStyles(), _media.mediaStyles, (0, _layout.layoutStyles)(props.viewMode), _collab.telepointerStyle, _selection.gapCursorStyles, (0, _panel2.panelStyles)(), mentionsStyles, emojiStyles, _styles.tasksAndDecisionsStyles, _styles.gridStyles, linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _extension.extensionStyles, (0, _expand.expandStyles)(), _styles3.findReplaceStyles, _styles4.textHighlightStyle, _tasksAndDecisions.taskDecisionStyles, _status.statusStyles, (0, _styles.annotationSharedStyles)(), (0, _styles.smartCardStyles)(), _styles.smartCardSharedStyles, _date.dateStyles, _styles.embedCardStyles, _styles.unsupportedStyles, _styles.resizerStyles, (0, _aiPanels.aiPanelStyles)(props.colorMode), fixBlockControlStylesSSR(), _styles.MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT);
 };
 var createEditorContentStyle = exports.createEditorContentStyle = function createEditorContentStyle(styles) {
   return /*#__PURE__*/_react.default.forwardRef(function (props, ref) {

package/dist/cjs/version-wrapper.js

@@ -5,4 +5,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.version = exports.name = void 0;
 var name = exports.name = "@atlaskit/editor-core";
-var version = exports.version = "197.10.1";
+var version = exports.version = "197.10.3";

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

@@ -13,10 +13,10 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { ClickAreaBlock } from '../../Addon';
 import { ContextPanel } from '../../ContextPanel';
 import PluginSlot from '../../PluginSlot';
-import { contentArea, contentAreaHeightNoToolbar, editorContentAreaStyle, editorContentGutterStyle, ScrollContainer, ScrollContainerNext, sidebarArea } from './StyledComponents';
+import { contentArea, contentAreaContainerTypeInlineSize, contentAreaHeightNoToolbar, editorContentAreaStyle, editorContentGutterStyle, ScrollContainer, sidebarArea } from './StyledComponents';
 export const CONTENT_AREA_TEST_ID = 'ak-editor-fp-content-area';
 const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
-  var _contentAreaRef$curre, _contentAreaRef$curre2;
+  var _contentAreaRef$curre;
   const theme = useTheme();
   const fullWidthMode = props.appearance === 'full-width';
   const scrollContainerRef = useRef(null);
@@ -34,14 +34,16 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
     }
   }), []);
   return jsx("div", {
-    css: [
+    css: [fg('platform_editor_breakout_use_css') ?
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    contentAreaContainerTypeInlineSize :
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
     contentArea,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
     props.isEditorToolbarHidden && contentAreaHeightNoToolbar],
     "data-testid": CONTENT_AREA_TEST_ID,
     ref: containerRef
-  }, fg('platform_editor_breakout_use_css') ? jsx(ScrollContainerNext
+  }, jsx(ScrollContainer
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   , {
     className: "fabric-editor-popup-scroll-parent",
@@ -82,47 +84,6 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
     containerElement: scrollContainerRef.current,
     dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
     wrapperElement: props.wrapperElement
-  }), props.editorDOMElement, !!props.customContentComponents && 'after' in props.customContentComponents ? props.customContentComponents.after : null)))) : jsx(ScrollContainer
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-  , {
-    className: "fabric-editor-popup-scroll-parent",
-    featureFlags: props.featureFlags,
-    ref: scrollContainerRef
-  }, jsx(ClickAreaBlock, {
-    editorView: props.editorView,
-    editorDisabled: props.disabled
-  }, jsx("div", {
-    // 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: editorContentAreaStyle({
-      fullWidthMode,
-      layoutMaxWidth: theme.layoutMaxWidth
-    }),
-    role: "region",
-    "aria-label": props.intl.formatMessage(messages.editableContentLabel),
-    ref: contentAreaRef
-  }, jsx("div", {
-    // 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: editorContentGutterStyle()
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    ,
-    className: ['ak-editor-content-area', 'appearance-full-page', fullWidthMode ? 'fabric-editor--full-width-mode' : ''].join(' '),
-    ref: contentAreaRef
-  }, !!props.customContentComponents && 'before' in props.customContentComponents ? props.customContentComponents.before : props.customContentComponents, jsx(PluginSlot, {
-    editorView: props.editorView,
-    editorActions: props.editorActions,
-    eventDispatcher: props.eventDispatcher,
-    providerFactory: props.providerFactory,
-    appearance: props.appearance,
-    items: props.contentComponents,
-    pluginHooks: props.pluginHooks,
-    contentArea: (_contentAreaRef$curre2 = contentAreaRef.current) !== null && _contentAreaRef$curre2 !== void 0 ? _contentAreaRef$curre2 : undefined,
-    popupsMountPoint: props.popupsMountPoint,
-    popupsBoundariesElement: props.popupsBoundariesElement,
-    popupsScrollableElement: props.popupsScrollableElement,
-    disabled: !!props.disabled,
-    containerElement: scrollContainerRef.current,
-    dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
-    wrapperElement: props.wrapperElement
   }), props.editorDOMElement, !!props.customContentComponents && 'after' in props.customContentComponents ? props.customContentComponents.after : null)))), jsx("div", {
     css: sidebarArea
   }, props.contextPanel || jsx(ContextPanel, {

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

@@ -32,29 +32,10 @@ const scrollStyles = 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
 scrollbarStyles);
 
-// Added containerType and containerName to enable breakout plugin to calculate the width of the container
-const scrollStylesWitContainerType = css({
-  flexGrow: 1,
-  height: '100%',
-  overflowY: 'scroll',
-  position: 'relative',
-  display: 'flex',
-  flexDirection: 'column',
-  scrollBehavior: 'smooth',
-  containerType: 'inline-size',
-  containerName: 'editor-area'
-},
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-scrollbarStyles);
-
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const ScrollContainer = createEditorContentStyle(scrollStyles);
 ScrollContainer.displayName = 'ScrollContainer';
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const ScrollContainerNext = createEditorContentStyle(scrollStylesWitContainerType);
-ScrollContainerNext.displayName = 'ScrollContainer';
-
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const contentArea = () => {
   const editorToolbarHeight = FULL_PAGE_EDITOR_TOOLBAR_HEIGHT();
@@ -71,6 +52,24 @@ export const contentArea = () => {
   });
 };
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const contentAreaContainerTypeInlineSize = () => {
+  const editorToolbarHeight = FULL_PAGE_EDITOR_TOOLBAR_HEIGHT();
+  return css({
+    display: 'flex',
+    flexDirection: 'row',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    height: `calc(100% - ${editorToolbarHeight})`,
+    boxSizing: 'border-box',
+    margin: 0,
+    padding: 0,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    transition: `padding 0ms ${akEditorSwoopCubicBezier}`,
+    containerType: 'inline-size',
+    containerName: 'editor-area'
+  });
+};
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const contentAreaHeightNoToolbar = css({
   height: '100%'

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

@@ -16,8 +16,9 @@ import { telepointerStyle } from '@atlaskit/editor-common/collab';
 import { EmojiSharedCssClassName } from '@atlaskit/editor-common/emoji';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { MentionSharedCssClassName } from '@atlaskit/editor-common/mention';
+import { PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
 import { gapCursorStyles } from '@atlaskit/editor-common/selection';
-import { annotationSharedStyles, backgroundColorStyles, blockMarksSharedStyles, codeBlockInListSafariFix, codeMarkSharedStyles, dateSharedStyle, embedCardStyles, gridStyles, indentationSharedStyles, linkSharedStyle, listsSharedStyles, MediaSharedClassNames, paragraphSharedStyles, resizerStyles, ruleSharedStyles, shadowSharedStyle, SmartCardSharedCssClassName, smartCardSharedStyles, smartCardStyles, tasksAndDecisionsStyles, textColorStyles, unsupportedStyles, whitespaceSharedStyles } from '@atlaskit/editor-common/styles';
+import { annotationSharedStyles, backgroundColorStyles, blockMarksSharedStyles, codeBlockInListSafariFix, CodeBlockSharedCssClassName, codeMarkSharedStyles, dateSharedStyle, embedCardStyles, expandClassNames, gridStyles, indentationSharedStyles, linkSharedStyle, listsSharedStyles, MediaSharedClassNames, paragraphSharedStyles, resizerStyles, ruleSharedStyles, shadowSharedStyle, SmartCardSharedCssClassName, smartCardSharedStyles, smartCardStyles, tasksAndDecisionsStyles, textColorStyles, unsupportedStyles, whitespaceSharedStyles } from '@atlaskit/editor-common/styles';
 import { blocktypeStyles } from '@atlaskit/editor-plugins/block-type/styles';
 import { findReplaceStyles } from '@atlaskit/editor-plugins/find-replace/styles';
 import { textHighlightStyle } from '@atlaskit/editor-plugins/paste-options-toolbar/styles';
@@ -148,6 +149,31 @@ export const placeholderStyles = css({
     }
   }
 });
+const firstBlockNodeStyles = css`
+	.ProseMirror {
+		> .${PanelSharedCssClassName.prefix},
+			> .${CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER},
+			> .${SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER},
+			> div[data-task-list-local-id],
+		> div[data-layout-section],
+		> .${expandClassNames.prefix} {
+			&:first-child {
+				margin-top: 0;
+			}
+		}
+
+		> hr:first-of-type {
+			margin-top: 0;
+		}
+	}
+`;
+
+/**
+ * fix layout issue of first block node
+ */
+export const fixBlockControlStylesSSR = () => {
+  return fg('platform_editor_ssr_fix_block_controls') ? firstBlockNodeStyles : null;
+};
 
 // The breakpoint for small devices is 1266px, copied from getBreakpoint in platform/packages/editor/editor-common/src/ui/WidthProvider/index.tsx
 const akEditorBreakpointForSmallDevice = `1266px`;
@@ -262,6 +288,7 @@ const contentStyles = props => css`
   ${unsupportedStyles}
   ${resizerStyles}
   ${aiPanelStyles(props.colorMode)}
+  ${fixBlockControlStylesSSR()}
 
   .panelView-content-wrap {
 		box-sizing: border-box;

package/dist/es2019/version-wrapper.js

@@ -1,2 +1,2 @@
 export const name = "@atlaskit/editor-core";
-export const version = "197.10.1";
+export const version = "197.10.3";

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

@@ -13,10 +13,10 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { ClickAreaBlock } from '../../Addon';
 import { ContextPanel } from '../../ContextPanel';
 import PluginSlot from '../../PluginSlot';
-import { contentArea, contentAreaHeightNoToolbar, editorContentAreaStyle, editorContentGutterStyle, ScrollContainer, ScrollContainerNext, sidebarArea } from './StyledComponents';
+import { contentArea, contentAreaContainerTypeInlineSize, contentAreaHeightNoToolbar, editorContentAreaStyle, editorContentGutterStyle, ScrollContainer, sidebarArea } from './StyledComponents';
 export var CONTENT_AREA_TEST_ID = 'ak-editor-fp-content-area';
 var Content = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _contentAreaRef$curre, _contentAreaRef$curre2;
+  var _contentAreaRef$curre;
   var theme = useTheme();
   var fullWidthMode = props.appearance === 'full-width';
   var scrollContainerRef = useRef(null);
@@ -36,14 +36,16 @@ var Content = /*#__PURE__*/React.forwardRef(function (props, ref) {
     };
   }, []);
   return jsx("div", {
-    css: [
+    css: [fg('platform_editor_breakout_use_css') ?
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    contentAreaContainerTypeInlineSize :
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
     contentArea,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
     props.isEditorToolbarHidden && contentAreaHeightNoToolbar],
     "data-testid": CONTENT_AREA_TEST_ID,
     ref: containerRef
-  }, fg('platform_editor_breakout_use_css') ? jsx(ScrollContainerNext
+  }, jsx(ScrollContainer
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   , {
     className: "fabric-editor-popup-scroll-parent",
@@ -84,47 +86,6 @@ var Content = /*#__PURE__*/React.forwardRef(function (props, ref) {
     containerElement: scrollContainerRef.current,
     dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
     wrapperElement: props.wrapperElement
-  }), props.editorDOMElement, !!props.customContentComponents && 'after' in props.customContentComponents ? props.customContentComponents.after : null)))) : jsx(ScrollContainer
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-  , {
-    className: "fabric-editor-popup-scroll-parent",
-    featureFlags: props.featureFlags,
-    ref: scrollContainerRef
-  }, jsx(ClickAreaBlock, {
-    editorView: props.editorView,
-    editorDisabled: props.disabled
-  }, jsx("div", {
-    // 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: editorContentAreaStyle({
-      fullWidthMode: fullWidthMode,
-      layoutMaxWidth: theme.layoutMaxWidth
-    }),
-    role: "region",
-    "aria-label": props.intl.formatMessage(messages.editableContentLabel),
-    ref: contentAreaRef
-  }, jsx("div", {
-    // 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: editorContentGutterStyle()
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    ,
-    className: ['ak-editor-content-area', 'appearance-full-page', fullWidthMode ? 'fabric-editor--full-width-mode' : ''].join(' '),
-    ref: contentAreaRef
-  }, !!props.customContentComponents && 'before' in props.customContentComponents ? props.customContentComponents.before : props.customContentComponents, jsx(PluginSlot, {
-    editorView: props.editorView,
-    editorActions: props.editorActions,
-    eventDispatcher: props.eventDispatcher,
-    providerFactory: props.providerFactory,
-    appearance: props.appearance,
-    items: props.contentComponents,
-    pluginHooks: props.pluginHooks,
-    contentArea: (_contentAreaRef$curre2 = contentAreaRef.current) !== null && _contentAreaRef$curre2 !== void 0 ? _contentAreaRef$curre2 : undefined,
-    popupsMountPoint: props.popupsMountPoint,
-    popupsBoundariesElement: props.popupsBoundariesElement,
-    popupsScrollableElement: props.popupsScrollableElement,
-    disabled: !!props.disabled,
-    containerElement: scrollContainerRef.current,
-    dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
-    wrapperElement: props.wrapperElement
   }), props.editorDOMElement, !!props.customContentComponents && 'after' in props.customContentComponents ? props.customContentComponents.after : null)))), jsx("div", {
     css: sidebarArea
   }, props.contextPanel || jsx(ContextPanel, {

package/dist/esm/ui/Appearance/FullPage/StyledComponents.js

@@ -36,29 +36,10 @@ var scrollStyles = 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
 scrollbarStyles);
 
-// Added containerType and containerName to enable breakout plugin to calculate the width of the container
-var scrollStylesWitContainerType = css({
-  flexGrow: 1,
-  height: '100%',
-  overflowY: 'scroll',
-  position: 'relative',
-  display: 'flex',
-  flexDirection: 'column',
-  scrollBehavior: 'smooth',
-  containerType: 'inline-size',
-  containerName: 'editor-area'
-},
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-scrollbarStyles);
-
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var ScrollContainer = createEditorContentStyle(scrollStyles);
 ScrollContainer.displayName = 'ScrollContainer';
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var ScrollContainerNext = createEditorContentStyle(scrollStylesWitContainerType);
-ScrollContainerNext.displayName = 'ScrollContainer';
-
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var contentArea = function contentArea() {
   var editorToolbarHeight = FULL_PAGE_EDITOR_TOOLBAR_HEIGHT();
@@ -75,6 +56,24 @@ export var contentArea = function contentArea() {
   });
 };
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export var contentAreaContainerTypeInlineSize = function contentAreaContainerTypeInlineSize() {
+  var editorToolbarHeight = FULL_PAGE_EDITOR_TOOLBAR_HEIGHT();
+  return css({
+    display: 'flex',
+    flexDirection: 'row',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    height: "calc(100% - ".concat(editorToolbarHeight, ")"),
+    boxSizing: 'border-box',
+    margin: 0,
+    padding: 0,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    transition: "padding 0ms ".concat(akEditorSwoopCubicBezier),
+    containerType: 'inline-size',
+    containerName: 'editor-area'
+  });
+};
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var contentAreaHeightNoToolbar = css({
   height: '100%'