@atlaskit/editor-core 225.0.0 → 226.0.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-core
 
+## 226.0.0
+
+### Major Changes
+
+- [`a39e0d152db0c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a39e0d152db0c) -
+  Remove the `UNSAFE_containLayout` prop from `EditorProps` and the `UNSAFE_outside` slot from
+  `BeforeAndAfterContentComponents`.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 225.0.0
 
 ### Patch Changes

package/dist/cjs/ui/Appearance/FullPage/FullPageContentArea-compiled.compiled.css

@@ -65,6 +65,7 @@
 ._n3tdidpf{padding-bottom:0}
 ._n3tdoahv{padding-bottom:var(--ds-space-600,3pc)}
 ._njlp131u{contain:layout style inline-size}
+._njlp3xnj{contain:layout size}
 ._ongaglyw .ProseMirror>h4{clear:none}
 ._otyr1wug{margin-bottom:auto}
 ._otyridpf{margin-bottom:0}

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

@@ -36,6 +36,13 @@ var AK_NESTED_DND_GUTTER_OFFSET = 8;
 var getTotalPadding = function getTotalPadding() {
   return (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2;
 };
+
+// Isolates the scroll container's layout and size from the rest of the page under
+// platform_editor_contain_layout. Because of contain: size wrapper
+// must take its height from the parent rather than from the contained content.
+var containLayoutStyles = {
+  wrapper: "_njlp3xnj _4t3i1osq"
+};
 var compiledStyles = {
   contentAreaWrapper: "_1bsb1osq _7cca15wb _1f38dez1 _njlp131u",
   sidebarArea: "_4t3i1osq _vchhusvi _1wpzesu3 _1hgw1wug _1t1q1if8 _uj9widpf _13hh1y6m",
@@ -97,15 +104,7 @@ var Content = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var isMarkdownModeExperimentEnabled = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('cc-markdown-mode', 'isEnabled', true);
   var shouldHideProseMirrorForMarkdownMode = isMarkdownModeExperimentEnabled && markdownPluginCurrentView !== 'preview' && markdownPluginCurrentIsMarkdownMode;
   var shouldHideScrollGutterForMarkdownMode = isMarkdownModeExperimentEnabled && markdownPluginCurrentIsMarkdownMode;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    "data-testid": CONTENT_AREA_TEST_ID,
-    ref: containerRef,
-    className: (0, _runtime.ax)([compiledStyles.contentAreaNew, props.isEditorToolbarHidden && compiledStyles.contentAreaHeightNoToolbar])
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    "data-testid": EDITOR_CONTAINER,
-    "data-editor-container": 'true',
-    className: (0, _runtime.ax)([compiledStyles.contentAreaWrapper, shouldHideProseMirrorForMarkdownMode && compiledStyles.markdownModeContainerBackgroundStyle])
-  }, !!props.customContentComponents && 'UNSAFE_outside' in props.customContentComponents ? (0, _contentComponentWrapper.contentComponentClickWrapper)(props.customContentComponents.UNSAFE_outside) : null, /*#__PURE__*/_react.default.createElement(_EditorContentContainer.default
+  var content = /*#__PURE__*/_react.default.createElement(_EditorContentContainer.default
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   , {
     className: "fabric-editor-popup-scroll-parent",
@@ -115,8 +114,7 @@ var Content = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     isScrollable: true,
     appearance: props.appearance,
     contentMode: props.contentMode,
-    useStandardNodeWidth: useStandardNodeWidth,
-    UNSAFE_containLayout: props.UNSAFE_containLayout
+    useStandardNodeWidth: useStandardNodeWidth
   }, /*#__PURE__*/_react.default.createElement(_ClickAreaBlock.ClickAreaBlock, {
     editorView: props.editorView,
     editorDisabled: props.disabled
@@ -175,7 +173,19 @@ var Content = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     },
     "data-vc": "scroll-gutter",
     className: (0, _runtime.ax)([shouldHideScrollGutterForMarkdownMode && compiledStyles.hideEditorScrollGutterStyle])
-  }))))))), /*#__PURE__*/_react.default.createElement("div", {
+  }))))));
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": CONTENT_AREA_TEST_ID,
+    ref: containerRef,
+    className: (0, _runtime.ax)([compiledStyles.contentAreaNew, props.isEditorToolbarHidden && compiledStyles.contentAreaHeightNoToolbar])
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": EDITOR_CONTAINER,
+    "data-editor-container": 'true',
+    className: (0, _runtime.ax)([compiledStyles.contentAreaWrapper, shouldHideProseMirrorForMarkdownMode && compiledStyles.markdownModeContainerBackgroundStyle])
+  }, props.UNSAFE_containLayout ? /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": "editor-contain-size-and-layout-wrapper",
+    className: (0, _runtime.ax)([containLayoutStyles.wrapper])
+  }, content) : content), /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _runtime.ax)([compiledStyles.sidebarArea])
   }, props.contextPanel || /*#__PURE__*/_react.default.createElement(_ContextPanel.ContextPanel, {
     editorAPI: props.editorAPI,

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

@@ -46,6 +46,14 @@ var AK_NESTED_DND_GUTTER_OFFSET = 8;
 var getTotalPadding = function getTotalPadding() {
   return (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2;
 };
+
+// Isolates the scroll container's layout and size from the rest of the page under
+// platform_editor_contain_layout. Because of contain: size wrapper
+// must take its height from the parent rather than from the contained content.
+var containStrictWrapperStyles = (0, _react2.css)({
+  contain: 'layout size',
+  height: '100%'
+});
 var editorContentAreaProsemirrorStyle = (0, _react2.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '& .ProseMirror': (0, _defineProperty2.default)((0, _defineProperty2.default)({
@@ -312,17 +320,7 @@ var Content = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var isMarkdownModeExperimentEnabled = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('cc-markdown-mode', 'isEnabled', true);
   var shouldHideProseMirrorForMarkdownMode = isMarkdownModeExperimentEnabled && markdownPluginCurrentView !== 'preview' && markdownPluginCurrentIsMarkdownMode;
   var shouldHideScrollGutterForMarkdownMode = isMarkdownModeExperimentEnabled && markdownPluginCurrentIsMarkdownMode;
-  return (0, _react2.jsx)("div", {
-    css: [contentAreaNew, props.isEditorToolbarHidden && contentAreaHeightNoToolbar],
-    "data-testid": CONTENT_AREA_TEST_ID,
-    ref: containerRef
-  }, (0, _react2.jsx)("div", {
-    css: [
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
-    _StyledComponents.contentAreaWrapper, shouldHideProseMirrorForMarkdownMode && markdownModeContainerBackgroundStyle],
-    "data-testid": EDITOR_CONTAINER,
-    "data-editor-container": 'true'
-  }, !!props.customContentComponents && 'UNSAFE_outside' in props.customContentComponents ? (0, _contentComponentWrapper.contentComponentClickWrapper)(props.customContentComponents.UNSAFE_outside) : null, (0, _react2.jsx)(_EditorContentContainer.default
+  var content = (0, _react2.jsx)(_EditorContentContainer.default
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   , {
     className: "fabric-editor-popup-scroll-parent",
@@ -332,8 +330,7 @@ var Content = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     isScrollable: true,
     appearance: props.appearance,
     contentMode: props.contentMode,
-    useStandardNodeWidth: useStandardNodeWidth,
-    UNSAFE_containLayout: props.UNSAFE_containLayout
+    useStandardNodeWidth: useStandardNodeWidth
   }, (0, _react2.jsx)(_ClickAreaBlock.default, {
     editorView: props.editorView,
     editorDisabled: props.disabled
@@ -401,7 +398,21 @@ var Content = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       paddingBottom: "".concat((_allowScrollGutter$gu2 = allowScrollGutter.gutterSize) !== null && _allowScrollGutter$gu2 !== void 0 ? _allowScrollGutter$gu2 : '120', "px")
     },
     "data-vc": "scroll-gutter"
-  }))))))), (0, _react2.jsx)("div", {
+  }))))));
+  return (0, _react2.jsx)("div", {
+    css: [contentAreaNew, props.isEditorToolbarHidden && contentAreaHeightNoToolbar],
+    "data-testid": CONTENT_AREA_TEST_ID,
+    ref: containerRef
+  }, (0, _react2.jsx)("div", {
+    css: [
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
+    _StyledComponents.contentAreaWrapper, shouldHideProseMirrorForMarkdownMode && markdownModeContainerBackgroundStyle],
+    "data-testid": EDITOR_CONTAINER,
+    "data-editor-container": 'true'
+  }, props.UNSAFE_containLayout ? (0, _react2.jsx)("div", {
+    "data-testid": "editor-contain-size-and-layout-wrapper",
+    css: containStrictWrapperStyles
+  }, content) : content), (0, _react2.jsx)("div", {
     css: _StyledComponents.sidebarArea
   }, props.contextPanel || (0, _react2.jsx)(_ContextPanel.ContextPanel, {
     editorAPI: props.editorAPI,

package/dist/cjs/ui/EditorContentContainer/EditorContentContainer-compiled.js

@@ -396,16 +396,14 @@ var EditorContentContainerCompiled = exports.EditorContentContainerCompiled = /*
   // root div in editor-internal.tsx and inherited via the CSS cascade — do not set it here.
   // For the legacy path, compute it from the Emotion theme as before.
   var style = _react.default.useMemo(function () {
-    return _objectSpread(_objectSpread(_objectSpread({}, props.UNSAFE_containLayout ? {
-      contain: 'strict'
-    } : {}), {}, {
+    return _objectSpread(_objectSpread({
       '--ak-editor--table-overflow-shadow': tableOverflowShadow
     }, _tableCellBackgroundForCompiled.tableCellBackgroundColorVariablesForCompiled), !(0, _experiments.editorExperiment)('platform_editor_preview_panel_responsiveness', true, {
       exposure: true
     }) && {
       '--ak-editor--large-gutter-padding': "".concat((0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), "px")
     });
-  }, [tableOverflowShadow, props.UNSAFE_containLayout]);
+  }, [tableOverflowShadow]);
   var browser = (0, _browser.getBrowserInfo)();
 
   // Evaluate the block-spacing experiment once per render.

package/dist/cjs/ui/EditorContentContainer/EditorContentContainer-emotion.js

@@ -141,9 +141,7 @@ var EditorContentContainerEmotion = exports.EditorContentContainerEmotion = /*#_
   // root div in editor-internal.tsx and inherited via the CSS cascade — do not set it here.
   // For the legacy path, compute it from the Emotion theme as before.
   var style = _react.default.useMemo(function () {
-    return _objectSpread(_objectSpread(_objectSpread({}, props.UNSAFE_containLayout ? {
-      contain: 'strict'
-    } : {}), !(0, _expValEquals.expValEquals)('platform_editor_core_non_ecc_static_css', 'isEnabled', true) && {
+    return _objectSpread(_objectSpread({}, !(0, _expValEquals.expValEquals)('platform_editor_core_non_ecc_static_css', 'isEnabled', true) && {
       '--ak-editor-base-font-size': "".concat((0, _editorSharedStyles.editorFontSize)({
         theme: theme
       }), "px")
@@ -152,7 +150,7 @@ var EditorContentContainerEmotion = exports.EditorContentContainerEmotion = /*#_
     }) && {
       '--ak-editor--large-gutter-padding': "".concat((0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), "px")
     });
-  }, [theme, props.UNSAFE_containLayout]);
+  }, [theme]);
   var browser = (0, _browser.getBrowserInfo)();
 
   // Evaluate the block-spacing experiment once per render.

package/dist/cjs/version-wrapper.js

@@ -6,4 +6,4 @@ Object.defineProperty(exports, "__esModule", {
 exports.version = exports.name = void 0;
 var name = exports.name = "@atlaskit/editor-core";
 // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-var version = exports.version = "224.4.4";
+var version = exports.version = "225.0.0";

package/dist/es2019/ui/Appearance/FullPage/FullPageContentArea-compiled.compiled.css

@@ -65,6 +65,7 @@
 ._n3tdidpf{padding-bottom:0}
 ._n3tdoahv{padding-bottom:var(--ds-space-600,3pc)}
 ._njlp131u{contain:layout style inline-size}
+._njlp3xnj{contain:layout size}
 ._ongaglyw .ProseMirror>h4{clear:none}
 ._otyr1wug{margin-bottom:auto}
 ._otyridpf{margin-bottom:0}

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

@@ -27,6 +27,13 @@ const akLayoutGutterOffset = 12;
 const SWOOP_ANIMATION = `0.5s ${akEditorSwoopCubicBezier}`;
 const AK_NESTED_DND_GUTTER_OFFSET = 8;
 const getTotalPadding = () => akEditorGutterPaddingDynamic() * 2;
+
+// Isolates the scroll container's layout and size from the rest of the page under
+// platform_editor_contain_layout. Because of contain: size wrapper
+// must take its height from the parent rather than from the contained content.
+const containLayoutStyles = {
+  wrapper: "_njlp3xnj _4t3i1osq"
+};
 const compiledStyles = {
   contentAreaWrapper: "_1bsb1osq _7cca15wb _1f38dez1 _njlp131u",
   sidebarArea: "_4t3i1osq _vchhusvi _1wpzesu3 _1hgw1wug _1t1q1if8 _uj9widpf _13hh1y6m",
@@ -86,15 +93,7 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
   const isMarkdownModeExperimentEnabled = expValEqualsNoExposure('cc-markdown-mode', 'isEnabled', true);
   const shouldHideProseMirrorForMarkdownMode = isMarkdownModeExperimentEnabled && markdownPluginCurrentView !== 'preview' && markdownPluginCurrentIsMarkdownMode;
   const shouldHideScrollGutterForMarkdownMode = isMarkdownModeExperimentEnabled && markdownPluginCurrentIsMarkdownMode;
-  return /*#__PURE__*/React.createElement("div", {
-    "data-testid": CONTENT_AREA_TEST_ID,
-    ref: containerRef,
-    className: ax([compiledStyles.contentAreaNew, props.isEditorToolbarHidden && compiledStyles.contentAreaHeightNoToolbar])
-  }, /*#__PURE__*/React.createElement("div", {
-    "data-testid": EDITOR_CONTAINER,
-    "data-editor-container": 'true',
-    className: ax([compiledStyles.contentAreaWrapper, shouldHideProseMirrorForMarkdownMode && compiledStyles.markdownModeContainerBackgroundStyle])
-  }, !!props.customContentComponents && 'UNSAFE_outside' in props.customContentComponents ? contentComponentClickWrapper(props.customContentComponents.UNSAFE_outside) : null, /*#__PURE__*/React.createElement(EditorContentContainer
+  const content = /*#__PURE__*/React.createElement(EditorContentContainer
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   , {
     className: "fabric-editor-popup-scroll-parent",
@@ -104,8 +103,7 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
     isScrollable: true,
     appearance: props.appearance,
     contentMode: props.contentMode,
-    useStandardNodeWidth: useStandardNodeWidth,
-    UNSAFE_containLayout: props.UNSAFE_containLayout
+    useStandardNodeWidth: useStandardNodeWidth
   }, /*#__PURE__*/React.createElement(ClickAreaBlock, {
     editorView: props.editorView,
     editorDisabled: props.disabled
@@ -164,7 +162,19 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
     },
     "data-vc": "scroll-gutter",
     className: ax([shouldHideScrollGutterForMarkdownMode && compiledStyles.hideEditorScrollGutterStyle])
-  }))))))), /*#__PURE__*/React.createElement("div", {
+  }))))));
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": CONTENT_AREA_TEST_ID,
+    ref: containerRef,
+    className: ax([compiledStyles.contentAreaNew, props.isEditorToolbarHidden && compiledStyles.contentAreaHeightNoToolbar])
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-testid": EDITOR_CONTAINER,
+    "data-editor-container": 'true',
+    className: ax([compiledStyles.contentAreaWrapper, shouldHideProseMirrorForMarkdownMode && compiledStyles.markdownModeContainerBackgroundStyle])
+  }, props.UNSAFE_containLayout ? /*#__PURE__*/React.createElement("div", {
+    "data-testid": "editor-contain-size-and-layout-wrapper",
+    className: ax([containLayoutStyles.wrapper])
+  }, content) : content), /*#__PURE__*/React.createElement("div", {
     className: ax([compiledStyles.sidebarArea])
   }, props.contextPanel || /*#__PURE__*/React.createElement(ContextPanel, {
     editorAPI: props.editorAPI,

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

@@ -33,6 +33,14 @@ const akLayoutGutterOffset = 12;
 const SWOOP_ANIMATION = `0.5s ${akEditorSwoopCubicBezier}`;
 const AK_NESTED_DND_GUTTER_OFFSET = 8;
 const getTotalPadding = () => akEditorGutterPaddingDynamic() * 2;
+
+// Isolates the scroll container's layout and size from the rest of the page under
+// platform_editor_contain_layout. Because of contain: size wrapper
+// must take its height from the parent rather than from the contained content.
+const containStrictWrapperStyles = css({
+  contain: 'layout size',
+  height: '100%'
+});
 const editorContentAreaProsemirrorStyle = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '& .ProseMirror': {
@@ -304,17 +312,7 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
   const isMarkdownModeExperimentEnabled = expValEqualsNoExposure('cc-markdown-mode', 'isEnabled', true);
   const shouldHideProseMirrorForMarkdownMode = isMarkdownModeExperimentEnabled && markdownPluginCurrentView !== 'preview' && markdownPluginCurrentIsMarkdownMode;
   const shouldHideScrollGutterForMarkdownMode = isMarkdownModeExperimentEnabled && markdownPluginCurrentIsMarkdownMode;
-  return jsx("div", {
-    css: [contentAreaNew, props.isEditorToolbarHidden && contentAreaHeightNoToolbar],
-    "data-testid": CONTENT_AREA_TEST_ID,
-    ref: containerRef
-  }, jsx("div", {
-    css: [
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
-    contentAreaWrapper, shouldHideProseMirrorForMarkdownMode && markdownModeContainerBackgroundStyle],
-    "data-testid": EDITOR_CONTAINER,
-    "data-editor-container": 'true'
-  }, !!props.customContentComponents && 'UNSAFE_outside' in props.customContentComponents ? contentComponentClickWrapper(props.customContentComponents.UNSAFE_outside) : null, jsx(EditorContentContainer
+  const content = jsx(EditorContentContainer
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   , {
     className: "fabric-editor-popup-scroll-parent",
@@ -324,8 +322,7 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
     isScrollable: true,
     appearance: props.appearance,
     contentMode: props.contentMode,
-    useStandardNodeWidth: useStandardNodeWidth,
-    UNSAFE_containLayout: props.UNSAFE_containLayout
+    useStandardNodeWidth: useStandardNodeWidth
   }, jsx(ClickAreaBlock, {
     editorView: props.editorView,
     editorDisabled: props.disabled
@@ -393,7 +390,21 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
       paddingBottom: `${(_allowScrollGutter$gu2 = allowScrollGutter.gutterSize) !== null && _allowScrollGutter$gu2 !== void 0 ? _allowScrollGutter$gu2 : '120'}px`
     },
     "data-vc": "scroll-gutter"
-  }))))))), jsx("div", {
+  }))))));
+  return jsx("div", {
+    css: [contentAreaNew, props.isEditorToolbarHidden && contentAreaHeightNoToolbar],
+    "data-testid": CONTENT_AREA_TEST_ID,
+    ref: containerRef
+  }, jsx("div", {
+    css: [
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
+    contentAreaWrapper, shouldHideProseMirrorForMarkdownMode && markdownModeContainerBackgroundStyle],
+    "data-testid": EDITOR_CONTAINER,
+    "data-editor-container": 'true'
+  }, props.UNSAFE_containLayout ? jsx("div", {
+    "data-testid": "editor-contain-size-and-layout-wrapper",
+    css: containStrictWrapperStyles
+  }, content) : content), jsx("div", {
     css: sidebarArea
   }, props.contextPanel || jsx(ContextPanel, {
     editorAPI: props.editorAPI,

package/dist/es2019/ui/EditorContentContainer/EditorContentContainer-compiled.js

@@ -450,9 +450,6 @@ export const EditorContentContainerCompiled = /*#__PURE__*/React.forwardRef((pro
   // root div in editor-internal.tsx and inherited via the CSS cascade — do not set it here.
   // For the legacy path, compute it from the Emotion theme as before.
   const style = React.useMemo(() => ({
-    ...(props.UNSAFE_containLayout ? {
-      contain: 'strict'
-    } : {}),
     '--ak-editor--table-overflow-shadow': tableOverflowShadow,
     ...tableCellBackgroundColorVariablesForCompiled,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
@@ -461,7 +458,7 @@ export const EditorContentContainerCompiled = /*#__PURE__*/React.forwardRef((pro
     }) && {
       '--ak-editor--large-gutter-padding': `${akEditorGutterPaddingDynamic()}px`
     })
-  }), [tableOverflowShadow, props.UNSAFE_containLayout]);
+  }), [tableOverflowShadow]);
   const browser = getBrowserInfo();
 
   // Evaluate the block-spacing experiment once per render.

package/dist/es2019/ui/EditorContentContainer/EditorContentContainer-emotion.js

@@ -140,9 +140,6 @@ export const EditorContentContainerEmotion = /*#__PURE__*/React.forwardRef((prop
   // root div in editor-internal.tsx and inherited via the CSS cascade — do not set it here.
   // For the legacy path, compute it from the Emotion theme as before.
   const style = React.useMemo(() => ({
-    ...(props.UNSAFE_containLayout ? {
-      contain: 'strict'
-    } : {}),
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     ...(!expValEquals('platform_editor_core_non_ecc_static_css', 'isEnabled', true) && {
       '--ak-editor-base-font-size': `${editorFontSize({
@@ -155,7 +152,7 @@ export const EditorContentContainerEmotion = /*#__PURE__*/React.forwardRef((prop
     }) && {
       '--ak-editor--large-gutter-padding': `${akEditorGutterPaddingDynamic()}px`
     })
-  }), [theme, props.UNSAFE_containLayout]);
+  }), [theme]);
   const browser = getBrowserInfo();
 
   // Evaluate the block-spacing experiment once per render.

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 = "224.4.4";
+export const version = "225.0.0";

package/dist/esm/ui/Appearance/FullPage/FullPageContentArea-compiled.compiled.css

@@ -65,6 +65,7 @@
 ._n3tdidpf{padding-bottom:0}
 ._n3tdoahv{padding-bottom:var(--ds-space-600,3pc)}
 ._njlp131u{contain:layout style inline-size}
+._njlp3xnj{contain:layout size}
 ._ongaglyw .ProseMirror>h4{clear:none}
 ._otyr1wug{margin-bottom:auto}
 ._otyridpf{margin-bottom:0}

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

@@ -29,6 +29,13 @@ var AK_NESTED_DND_GUTTER_OFFSET = 8;
 var getTotalPadding = function getTotalPadding() {
   return akEditorGutterPaddingDynamic() * 2;
 };
+
+// Isolates the scroll container's layout and size from the rest of the page under
+// platform_editor_contain_layout. Because of contain: size wrapper
+// must take its height from the parent rather than from the contained content.
+var containLayoutStyles = {
+  wrapper: "_njlp3xnj _4t3i1osq"
+};
 var compiledStyles = {
   contentAreaWrapper: "_1bsb1osq _7cca15wb _1f38dez1 _njlp131u",
   sidebarArea: "_4t3i1osq _vchhusvi _1wpzesu3 _1hgw1wug _1t1q1if8 _uj9widpf _13hh1y6m",
@@ -90,15 +97,7 @@ var Content = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var isMarkdownModeExperimentEnabled = expValEqualsNoExposure('cc-markdown-mode', 'isEnabled', true);
   var shouldHideProseMirrorForMarkdownMode = isMarkdownModeExperimentEnabled && markdownPluginCurrentView !== 'preview' && markdownPluginCurrentIsMarkdownMode;
   var shouldHideScrollGutterForMarkdownMode = isMarkdownModeExperimentEnabled && markdownPluginCurrentIsMarkdownMode;
-  return /*#__PURE__*/React.createElement("div", {
-    "data-testid": CONTENT_AREA_TEST_ID,
-    ref: containerRef,
-    className: ax([compiledStyles.contentAreaNew, props.isEditorToolbarHidden && compiledStyles.contentAreaHeightNoToolbar])
-  }, /*#__PURE__*/React.createElement("div", {
-    "data-testid": EDITOR_CONTAINER,
-    "data-editor-container": 'true',
-    className: ax([compiledStyles.contentAreaWrapper, shouldHideProseMirrorForMarkdownMode && compiledStyles.markdownModeContainerBackgroundStyle])
-  }, !!props.customContentComponents && 'UNSAFE_outside' in props.customContentComponents ? contentComponentClickWrapper(props.customContentComponents.UNSAFE_outside) : null, /*#__PURE__*/React.createElement(EditorContentContainer
+  var content = /*#__PURE__*/React.createElement(EditorContentContainer
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   , {
     className: "fabric-editor-popup-scroll-parent",
@@ -108,8 +107,7 @@ var Content = /*#__PURE__*/React.forwardRef(function (props, ref) {
     isScrollable: true,
     appearance: props.appearance,
     contentMode: props.contentMode,
-    useStandardNodeWidth: useStandardNodeWidth,
-    UNSAFE_containLayout: props.UNSAFE_containLayout
+    useStandardNodeWidth: useStandardNodeWidth
   }, /*#__PURE__*/React.createElement(ClickAreaBlock, {
     editorView: props.editorView,
     editorDisabled: props.disabled
@@ -168,7 +166,19 @@ var Content = /*#__PURE__*/React.forwardRef(function (props, ref) {
     },
     "data-vc": "scroll-gutter",
     className: ax([shouldHideScrollGutterForMarkdownMode && compiledStyles.hideEditorScrollGutterStyle])
-  }))))))), /*#__PURE__*/React.createElement("div", {
+  }))))));
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": CONTENT_AREA_TEST_ID,
+    ref: containerRef,
+    className: ax([compiledStyles.contentAreaNew, props.isEditorToolbarHidden && compiledStyles.contentAreaHeightNoToolbar])
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-testid": EDITOR_CONTAINER,
+    "data-editor-container": 'true',
+    className: ax([compiledStyles.contentAreaWrapper, shouldHideProseMirrorForMarkdownMode && compiledStyles.markdownModeContainerBackgroundStyle])
+  }, props.UNSAFE_containLayout ? /*#__PURE__*/React.createElement("div", {
+    "data-testid": "editor-contain-size-and-layout-wrapper",
+    className: ax([containLayoutStyles.wrapper])
+  }, content) : content), /*#__PURE__*/React.createElement("div", {
     className: ax([compiledStyles.sidebarArea])
   }, props.contextPanel || /*#__PURE__*/React.createElement(ContextPanel, {
     editorAPI: props.editorAPI,

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

@@ -36,6 +36,14 @@ var AK_NESTED_DND_GUTTER_OFFSET = 8;
 var getTotalPadding = function getTotalPadding() {
   return akEditorGutterPaddingDynamic() * 2;
 };
+
+// Isolates the scroll container's layout and size from the rest of the page under
+// platform_editor_contain_layout. Because of contain: size wrapper
+// must take its height from the parent rather than from the contained content.
+var containStrictWrapperStyles = css({
+  contain: 'layout size',
+  height: '100%'
+});
 var editorContentAreaProsemirrorStyle = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '& .ProseMirror': _defineProperty(_defineProperty({
@@ -302,17 +310,7 @@ var Content = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var isMarkdownModeExperimentEnabled = expValEqualsNoExposure('cc-markdown-mode', 'isEnabled', true);
   var shouldHideProseMirrorForMarkdownMode = isMarkdownModeExperimentEnabled && markdownPluginCurrentView !== 'preview' && markdownPluginCurrentIsMarkdownMode;
   var shouldHideScrollGutterForMarkdownMode = isMarkdownModeExperimentEnabled && markdownPluginCurrentIsMarkdownMode;
-  return jsx("div", {
-    css: [contentAreaNew, props.isEditorToolbarHidden && contentAreaHeightNoToolbar],
-    "data-testid": CONTENT_AREA_TEST_ID,
-    ref: containerRef
-  }, jsx("div", {
-    css: [
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
-    contentAreaWrapper, shouldHideProseMirrorForMarkdownMode && markdownModeContainerBackgroundStyle],
-    "data-testid": EDITOR_CONTAINER,
-    "data-editor-container": 'true'
-  }, !!props.customContentComponents && 'UNSAFE_outside' in props.customContentComponents ? contentComponentClickWrapper(props.customContentComponents.UNSAFE_outside) : null, jsx(EditorContentContainer
+  var content = jsx(EditorContentContainer
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   , {
     className: "fabric-editor-popup-scroll-parent",
@@ -322,8 +320,7 @@ var Content = /*#__PURE__*/React.forwardRef(function (props, ref) {
     isScrollable: true,
     appearance: props.appearance,
     contentMode: props.contentMode,
-    useStandardNodeWidth: useStandardNodeWidth,
-    UNSAFE_containLayout: props.UNSAFE_containLayout
+    useStandardNodeWidth: useStandardNodeWidth
   }, jsx(ClickAreaBlock, {
     editorView: props.editorView,
     editorDisabled: props.disabled
@@ -391,7 +388,21 @@ var Content = /*#__PURE__*/React.forwardRef(function (props, ref) {
       paddingBottom: "".concat((_allowScrollGutter$gu2 = allowScrollGutter.gutterSize) !== null && _allowScrollGutter$gu2 !== void 0 ? _allowScrollGutter$gu2 : '120', "px")
     },
     "data-vc": "scroll-gutter"
-  }))))))), jsx("div", {
+  }))))));
+  return jsx("div", {
+    css: [contentAreaNew, props.isEditorToolbarHidden && contentAreaHeightNoToolbar],
+    "data-testid": CONTENT_AREA_TEST_ID,
+    ref: containerRef
+  }, jsx("div", {
+    css: [
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
+    contentAreaWrapper, shouldHideProseMirrorForMarkdownMode && markdownModeContainerBackgroundStyle],
+    "data-testid": EDITOR_CONTAINER,
+    "data-editor-container": 'true'
+  }, props.UNSAFE_containLayout ? jsx("div", {
+    "data-testid": "editor-contain-size-and-layout-wrapper",
+    css: containStrictWrapperStyles
+  }, content) : content), jsx("div", {
     css: sidebarArea
   }, props.contextPanel || jsx(ContextPanel, {
     editorAPI: props.editorAPI,

package/dist/esm/ui/EditorContentContainer/EditorContentContainer-compiled.js

@@ -395,16 +395,14 @@ export var EditorContentContainerCompiled = /*#__PURE__*/React.forwardRef(functi
   // root div in editor-internal.tsx and inherited via the CSS cascade — do not set it here.
   // For the legacy path, compute it from the Emotion theme as before.
   var style = React.useMemo(function () {
-    return _objectSpread(_objectSpread(_objectSpread({}, props.UNSAFE_containLayout ? {
-      contain: 'strict'
-    } : {}), {}, {
+    return _objectSpread(_objectSpread({
       '--ak-editor--table-overflow-shadow': tableOverflowShadow
     }, tableCellBackgroundColorVariablesForCompiled), !editorExperiment('platform_editor_preview_panel_responsiveness', true, {
       exposure: true
     }) && {
       '--ak-editor--large-gutter-padding': "".concat(akEditorGutterPaddingDynamic(), "px")
     });
-  }, [tableOverflowShadow, props.UNSAFE_containLayout]);
+  }, [tableOverflowShadow]);
   var browser = getBrowserInfo();
 
   // Evaluate the block-spacing experiment once per render.

package/dist/esm/ui/EditorContentContainer/EditorContentContainer-emotion.js

@@ -138,9 +138,7 @@ export var EditorContentContainerEmotion = /*#__PURE__*/React.forwardRef(functio
   // root div in editor-internal.tsx and inherited via the CSS cascade — do not set it here.
   // For the legacy path, compute it from the Emotion theme as before.
   var style = React.useMemo(function () {
-    return _objectSpread(_objectSpread(_objectSpread({}, props.UNSAFE_containLayout ? {
-      contain: 'strict'
-    } : {}), !expValEquals('platform_editor_core_non_ecc_static_css', 'isEnabled', true) && {
+    return _objectSpread(_objectSpread({}, !expValEquals('platform_editor_core_non_ecc_static_css', 'isEnabled', true) && {
       '--ak-editor-base-font-size': "".concat(editorFontSize({
         theme: theme
       }), "px")
@@ -149,7 +147,7 @@ export var EditorContentContainerEmotion = /*#__PURE__*/React.forwardRef(functio
     }) && {
       '--ak-editor--large-gutter-padding': "".concat(akEditorGutterPaddingDynamic(), "px")
     });
-  }, [theme, props.UNSAFE_containLayout]);
+  }, [theme]);
   var browser = getBrowserInfo();
 
   // Evaluate the block-spacing experiment once per render.

package/dist/esm/version-wrapper.js

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

package/dist/types/types/editor-props.d.ts

@@ -43,7 +43,6 @@ export type PrimaryToolbarComponents = BeforeAndAfterToolbarComponents | ReactCo
 export type BeforeAndAfterContentComponents = {
     after: ReactComponents;
     before: ReactComponents;
-    UNSAFE_outside?: ReactComponents;
 };
 export type ContentComponents = BeforeAndAfterContentComponents | ReactComponents;
 interface EditorBaseProps {

package/dist/types/ui/EditorContentContainer/EditorContentContainer-compiled.d.ts

@@ -12,7 +12,6 @@ export type EditorContentContainerProps = {
     contentMode?: EditorContentMode;
     featureFlags?: FeatureFlags;
     isScrollable?: boolean;
-    UNSAFE_containLayout?: boolean;
     /**
      * When true, nodes maintain their standard width without negative margins
      * For when the drag handle is visible and the editor has limited space.

package/dist/types/ui/EditorContentContainer/EditorContentContainer-emotion.d.ts

@@ -11,7 +11,6 @@ export type EditorContentContainerProps = {
     contentMode?: EditorContentMode;
     featureFlags?: FeatureFlags;
     isScrollable?: boolean;
-    UNSAFE_containLayout?: boolean;
     /**
      * When true, nodes maintain their standard width without negative margins
      * For when the drag handle is visible and the editor has limited space.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "225.0.0",
+	"version": "226.0.0",
 	"description": "A package contains Atlassian editor core functionality",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -74,7 +74,7 @@
 		"@atlaskit/react-compiler-gating": "^0.2.0",
 		"@atlaskit/react-ufo": "^7.7.0",
 		"@atlaskit/task-decision": "^21.8.0",
-		"@atlaskit/tmp-editor-statsig": "^160.0.0",
+		"@atlaskit/tmp-editor-statsig": "^161.0.0",
 		"@atlaskit/tokens": "^16.8.0",
 		"@atlaskit/tooltip": "^24.2.0",
 		"@atlaskit/width-detector": "^7.1.0",
@@ -151,7 +151,7 @@
 		"@atlaskit/portal": "^6.3.0",
 		"@atlaskit/profilecard": "^26.19.0",
 		"@atlaskit/radio": "^10.1.0",
-		"@atlaskit/renderer": "^137.0.0",
+		"@atlaskit/renderer": "^137.1.0",
 		"@atlaskit/section-message": "^10.1.0",
 		"@atlaskit/spinner": "^20.3.0",
 		"@atlaskit/synchrony-test-helpers": "workspace:^",
@@ -165,7 +165,7 @@
 		"@atlassian/editor-rovo-bridge": "^14.0.0",
 		"@atlassian/experiment-test-utils": "^0.2.0",
 		"@atlassian/feature-flags-test-utils": "^1.2.0",
-		"@atlassian/search-client": "^2.15.0",
+		"@atlassian/search-client": "^2.16.0",
 		"@atlassian/search-provider": "^17.0.0",
 		"@atlassian/structured-docs-types": "workspace:^",
 		"@atlassian/testing-library": "^0.11.0",