@atlaskit/editor-core 197.5.1 → 197.5.3

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/editor-core
 
+## 197.5.3
+
+### Patch Changes
+
+- [#138334](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/138334)
+  [`5bc7950824d2d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5bc7950824d2d) -
+  Removing dangerous and deprecated internal API
+
+## 197.5.2
+
+### Patch Changes
+
+- [#139334](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/139334)
+  [`30793649657c0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/30793649657c0) -
+  [HOT-111629] We had an incident where the last character disappears when hitting the enter key on
+  windows OS for Korean characters. Bumping to prosemirror-view@1.34.2 for the fix.
+- [#137474](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/137474)
+  [`7ca1c34ebf2d5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7ca1c34ebf2d5) -
+  make breakout to use css to fix SSR issue on live edit page
+
 ## 197.5.1
 
 ### Patch Changes

package/dist/cjs/composable-editor/editor-internal.js

@@ -12,7 +12,6 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _portal = require("@atlaskit/editor-common/portal");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _ErrorBoundary = _interopRequireDefault(require("../create-editor/ErrorBoundary"));
 var _featureFlagsFromProps = require("../create-editor/feature-flags-from-props");
 var _ReactEditorView = _interopRequireDefault(require("../create-editor/ReactEditorView"));
@@ -51,16 +50,6 @@ var EditorInternal = exports.EditorInternal = /*#__PURE__*/(0, _react.memo)(func
     onEditorDestroyed = _ref.onEditorDestroyed,
     preset = _ref.preset,
     AppearanceComponent = _ref.AppearanceComponent;
-  var setEditorApi = (0, _react.useCallback)(
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  function (api) {
-    if (!(0, _platformFeatureFlags.fg)('platform_editor_remove_editor_actions_workaround')) {
-      // This is an workaround to unblock Editor Lego Decoupling project, if you have questions ping us #cc-editor-lego
-      // We may clean up this code when EditorActions deprecation process starts
-      // @ts-expect-error 2339: Property '__EDITOR_INTERNALS_DO_NOT_USE__API' does not exist on type 'EditorActions<any>'.
-      editorActions.__EDITOR_INTERNALS_DO_NOT_USE__API = api;
-    }
-  }, [editorActions]);
   var overriddenEditorProps = _objectSpread(_objectSpread({}, props), {}, {
     onSave: props.onSave ? handleSave : undefined,
     // noop all analytic events, even if a handler is still passed.
@@ -104,7 +93,6 @@ var EditorInternal = exports.EditorInternal = /*#__PURE__*/(0, _react.memo)(func
     onEditorDestroyed: onEditorDestroyed,
     disabled: props.disabled,
     preset: preset,
-    setEditorApi: setEditorApi,
     render: function render(_ref2) {
       var _props$featureFlags, _props$featureFlags2;
       var editor = _ref2.editor,
@@ -155,7 +143,6 @@ var EditorInternal = exports.EditorInternal = /*#__PURE__*/(0, _react.memo)(func
 function ReactEditorViewContextWrapper(props) {
   var _props$editorProps$me, _props$editorProps$li;
   var setInternalEditorAPI = (0, _context.useSetPresetContext)();
-  var setExternalEditorAPI = props.setEditorApi;
 
   /**
    * We use the context to retrieve the editorAPI
@@ -169,8 +156,7 @@ function ReactEditorViewContextWrapper(props) {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   function (api) {
     setInternalEditorAPI === null || setInternalEditorAPI === void 0 || setInternalEditorAPI(api);
-    setExternalEditorAPI === null || setExternalEditorAPI === void 0 || setExternalEditorAPI(api);
-  }, [setInternalEditorAPI, setExternalEditorAPI]);
+  }, [setInternalEditorAPI]);
 
   // TODO: Remove these when we deprecate these props from editor-props - smartLinks is unfortunately still used in some places, we can sidestep this problem if we move everyone across to ComposableEditor and deprecate Editor
   var UNSAFE_cards = props.editorProps.UNSAFE_cards;

package/dist/cjs/create-editor/ReactEditorView.js

@@ -30,7 +30,6 @@ var _ufo = require("@atlaskit/editor-common/ufo");
 var _analytics2 = require("@atlaskit/editor-common/utils/analytics");
 var _state2 = require("@atlaskit/editor-prosemirror/state");
 var _view = require("@atlaskit/editor-prosemirror/view");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _eventDispatcher = require("../event-dispatcher");
 var _context = require("../presets/context");
 var _findChangedNodesFromTransaction = require("../utils/findChangedNodesFromTransaction");
@@ -558,10 +557,6 @@ var ReactEditorView = exports.ReactEditorView = /*#__PURE__*/function (_React$Co
     });
     var _api = _this.pluginInjectionAPI.api();
     (_props$setEditorApi = props.setEditorApi) === null || _props$setEditorApi === void 0 || _props$setEditorApi.call(props, _api);
-    if (props.editorProps.editorActions && !(0, _platformFeatureFlags.fg)('platform_editor_remove_editor_actions_workaround')) {
-      // @ts-expect-error
-      props.editorProps.editorActions.__EDITOR_INTERNALS_DO_NOT_USE__API = _api;
-    }
     _this.eventDispatcher = new _eventDispatcher.EventDispatcher();
     _this.dispatch = (0, _eventDispatcher.createDispatch)(_this.eventDispatcher);
     _this.errorReporter = (0, _createEditor.createErrorReporter)(props.editorProps.errorReporterHandler);

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

@@ -10,6 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _messages = require("@atlaskit/editor-common/messages");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _Addon = require("../../Addon");
 var _ContextPanel = require("../../ContextPanel");
 var _PluginSlot = _interopRequireDefault(require("../../PluginSlot"));
@@ -25,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;
+  var _contentAreaRef$curre, _contentAreaRef$curre2;
   var theme = (0, _react2.useTheme)();
   var fullWidthMode = props.appearance === 'full-width';
   var scrollContainerRef = (0, _react.useRef)(null);
@@ -52,7 +53,7 @@ var Content = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     props.isEditorToolbarHidden && _StyledComponents.contentAreaHeightNoToolbar],
     "data-testid": CONTENT_AREA_TEST_ID,
     ref: containerRef
-  }, (0, _react2.jsx)(_StyledComponents.ScrollContainer
+  }, (0, _platformFeatureFlags.fg)('platform_editor_breakout_use_css') ? (0, _react2.jsx)(_StyledComponents.ScrollContainerNext
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   , {
     className: "fabric-editor-popup-scroll-parent",
@@ -93,6 +94,47 @@ 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', 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.ScrollContainer = void 0;
+exports.sidebarArea = exports.fullPageEditorWrapper = exports.editorContentGutterStyle = exports.editorContentAreaStyle = exports.editorContentAreaHideContainer = exports.contentAreaHeightNoToolbar = exports.contentArea = exports.ScrollContainerNext = exports.ScrollContainer = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _adfSchema = require("@atlaskit/adf-schema");
@@ -41,10 +41,29 @@ 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)();

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

@@ -73,8 +73,11 @@ var placeholderStyles = exports.placeholderStyles = (0, _react2.css)({
     }
   }
 });
+
+// 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.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.ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n\t\tpointer-events: none;\n\t\topacity: 0.7;\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\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"])), (0, _editorSharedStyles.editorFontSize)({
+  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.ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n\t\tpointer-events: none;\n\t\topacity: 0.7;\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\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)({
     theme: props.theme
   }), _styles.whitespaceSharedStyles, _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, "var(--ds-border-focused, #8cf)", _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);
 };

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.5.1";
+var version = exports.version = "197.5.3";

package/dist/es2019/composable-editor/editor-internal.js

@@ -9,7 +9,6 @@ import { Fragment, memo, useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
 import { ACTION, ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
 import { usePortalProvider } from '@atlaskit/editor-common/portal';
-import { fg } from '@atlaskit/platform-feature-flags';
 import ErrorBoundary from '../create-editor/ErrorBoundary';
 import { createFeatureFlagsFromProps } from '../create-editor/feature-flags-from-props';
 import ReactEditorView from '../create-editor/ReactEditorView';
@@ -44,16 +43,6 @@ export const EditorInternal = /*#__PURE__*/memo(({
   AppearanceComponent
 }) => {
   var _props$performanceTra, _props$performanceTra2, _props$performanceTra3, _props$performanceTra4;
-  const setEditorApi = useCallback(
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  api => {
-    if (!fg('platform_editor_remove_editor_actions_workaround')) {
-      // This is an workaround to unblock Editor Lego Decoupling project, if you have questions ping us #cc-editor-lego
-      // We may clean up this code when EditorActions deprecation process starts
-      // @ts-expect-error 2339: Property '__EDITOR_INTERNALS_DO_NOT_USE__API' does not exist on type 'EditorActions<any>'.
-      editorActions.__EDITOR_INTERNALS_DO_NOT_USE__API = api;
-    }
-  }, [editorActions]);
   const overriddenEditorProps = {
     ...props,
     onSave: props.onSave ? handleSave : undefined,
@@ -95,7 +84,6 @@ export const EditorInternal = /*#__PURE__*/memo(({
     onEditorDestroyed: onEditorDestroyed,
     disabled: props.disabled,
     preset: preset,
-    setEditorApi: setEditorApi,
     render: ({
       editor,
       view,
@@ -147,9 +135,6 @@ export const EditorInternal = /*#__PURE__*/memo(({
 function ReactEditorViewContextWrapper(props) {
   var _props$editorProps$me, _props$editorProps$li, _props$editorProps$li2;
   const setInternalEditorAPI = useSetPresetContext();
-  const {
-    setEditorApi: setExternalEditorAPI
-  } = props;
 
   /**
    * We use the context to retrieve the editorAPI
@@ -163,8 +148,7 @@ function ReactEditorViewContextWrapper(props) {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   api => {
     setInternalEditorAPI === null || setInternalEditorAPI === void 0 ? void 0 : setInternalEditorAPI(api);
-    setExternalEditorAPI === null || setExternalEditorAPI === void 0 ? void 0 : setExternalEditorAPI(api);
-  }, [setInternalEditorAPI, setExternalEditorAPI]);
+  }, [setInternalEditorAPI]);
 
   // TODO: Remove these when we deprecate these props from editor-props - smartLinks is unfortunately still used in some places, we can sidestep this problem if we move everyone across to ComposableEditor and deprecate Editor
   const UNSAFE_cards = props.editorProps.UNSAFE_cards;

package/dist/es2019/create-editor/ReactEditorView.js

@@ -16,7 +16,6 @@ import { EditorExperience, ExperienceStore, RELIABILITY_INTERVAL } from '@atlask
 import { analyticsEventKey, getAnalyticsEventSeverity } from '@atlaskit/editor-common/utils/analytics';
 import { EditorState, Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { createDispatch, EventDispatcher } from '../event-dispatcher';
 import { EditorAPIContext } from '../presets/context';
 import { findChangedNodesFromTransaction } from '../utils/findChangedNodesFromTransaction';
@@ -557,10 +556,6 @@ export class ReactEditorView extends React.Component {
     });
     const _api = this.pluginInjectionAPI.api();
     (_props$setEditorApi = props.setEditorApi) === null || _props$setEditorApi === void 0 ? void 0 : _props$setEditorApi.call(props, _api);
-    if (props.editorProps.editorActions && !fg('platform_editor_remove_editor_actions_workaround')) {
-      // @ts-expect-error
-      props.editorProps.editorActions.__EDITOR_INTERNALS_DO_NOT_USE__API = _api;
-    }
     this.eventDispatcher = new EventDispatcher();
     this.dispatch = createDispatch(this.eventDispatcher);
     this.errorReporter = createErrorReporter(props.editorProps.errorReporterHandler);

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

@@ -9,13 +9,14 @@ import React, { useImperativeHandle, useRef } from 'react';
 import { jsx, useTheme } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { fullPageMessages as messages } from '@atlaskit/editor-common/messages';
+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, sidebarArea } from './StyledComponents';
+import { contentArea, contentAreaHeightNoToolbar, editorContentAreaStyle, editorContentGutterStyle, ScrollContainer, ScrollContainerNext, sidebarArea } from './StyledComponents';
 export const CONTENT_AREA_TEST_ID = 'ak-editor-fp-content-area';
 const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
-  var _contentAreaRef$curre;
+  var _contentAreaRef$curre, _contentAreaRef$curre2;
   const theme = useTheme();
   const fullWidthMode = props.appearance === 'full-width';
   const scrollContainerRef = useRef(null);
@@ -40,7 +41,7 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
     props.isEditorToolbarHidden && contentAreaHeightNoToolbar],
     "data-testid": CONTENT_AREA_TEST_ID,
     ref: containerRef
-  }, jsx(ScrollContainer
+  }, fg('platform_editor_breakout_use_css') ? jsx(ScrollContainerNext
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   , {
     className: "fabric-editor-popup-scroll-parent",
@@ -81,6 +82,47 @@ 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', 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,10 +32,29 @@ 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();

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

@@ -22,7 +22,7 @@ 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';
 import { placeholderTextStyles } from '@atlaskit/editor-plugins/placeholder-text/styles';
-import { akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorSelectedBorderColor, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, blockNodesVerticalMargin, editorFontSize, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
+import { akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorDefaultLayoutWidth, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorSelectedBorderColor, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, blockNodesVerticalMargin, editorFontSize, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
 import { N200, N30A, N500 } from '@atlaskit/theme/colors';
 import { useThemeObserver } from '@atlaskit/tokens';
 import { InlineNodeViewSharedStyles } from '../../nodeviews/getInlineNodeViewProducer.styles';
@@ -149,7 +149,39 @@ export const placeholderStyles = css({
     }
   }
 });
+
+// The breakpoint for small devices is 1266px, copied from getBreakpoint in platform/packages/editor/editor-common/src/ui/WidthProvider/index.tsx
+const akEditorBreakpointForSmallDevice = `1266px`;
 const contentStyles = props => css`
+	--ak-editor--default-gutter-padding: ${akEditorGutterPadding}px;
+	/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */
+	--ak-editor--large-gutter-padding: 52px;
+	--ak-editor--default-layout-width: ${akEditorDefaultLayoutWidth}px;
+	--ak-editor--full-width-layout-width: ${akEditorFullWidthLayoutWidth}px;
+	/* calculate editor line length, 100cqw is the editor container width */
+	--ak-editor--line-length: min(
+		calc(100cqw - var(--ak-editor--large-gutter-padding) * 2),
+		var(--ak-editor--default-layout-width)
+	);
+	--ak-editor--breakout-wide-layout-width: ${akEditorCalculatedWideLayoutWidthSmallViewport}px;
+	--ak-editor--breakout-full-page-guttering-padding: calc(
+		var(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)
+	);
+
+	.fabric-editor--full-width-mode {
+		--ak-editor--line-length: min(
+			calc(100cqw - var(--ak-editor--large-gutter-padding) * 2),
+			var(--ak-editor--full-width-layout-width)
+		);
+	}
+
+	/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */
+	@container editor-area (min-width: ${akEditorBreakpointForSmallDevice}) {
+		.ProseMirror {
+			--ak-editor--breakout-wide-layout-width: ${akEditorCalculatedWideLayoutWidth}px;
+		}
+	}
+
 	.ProseMirror {
 		outline: none;
 		font-size: ${editorFontSize({

package/dist/es2019/version-wrapper.js

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

package/dist/esm/composable-editor/editor-internal.js

@@ -13,7 +13,6 @@ import { Fragment, memo, useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
 import { ACTION, ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
 import { usePortalProvider } from '@atlaskit/editor-common/portal';
-import { fg } from '@atlaskit/platform-feature-flags';
 import ErrorBoundary from '../create-editor/ErrorBoundary';
 import { createFeatureFlagsFromProps } from '../create-editor/feature-flags-from-props';
 import ReactEditorView from '../create-editor/ReactEditorView';
@@ -47,16 +46,6 @@ export var EditorInternal = /*#__PURE__*/memo(function (_ref) {
     onEditorDestroyed = _ref.onEditorDestroyed,
     preset = _ref.preset,
     AppearanceComponent = _ref.AppearanceComponent;
-  var setEditorApi = useCallback(
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  function (api) {
-    if (!fg('platform_editor_remove_editor_actions_workaround')) {
-      // This is an workaround to unblock Editor Lego Decoupling project, if you have questions ping us #cc-editor-lego
-      // We may clean up this code when EditorActions deprecation process starts
-      // @ts-expect-error 2339: Property '__EDITOR_INTERNALS_DO_NOT_USE__API' does not exist on type 'EditorActions<any>'.
-      editorActions.__EDITOR_INTERNALS_DO_NOT_USE__API = api;
-    }
-  }, [editorActions]);
   var overriddenEditorProps = _objectSpread(_objectSpread({}, props), {}, {
     onSave: props.onSave ? handleSave : undefined,
     // noop all analytic events, even if a handler is still passed.
@@ -100,7 +89,6 @@ export var EditorInternal = /*#__PURE__*/memo(function (_ref) {
     onEditorDestroyed: onEditorDestroyed,
     disabled: props.disabled,
     preset: preset,
-    setEditorApi: setEditorApi,
     render: function render(_ref2) {
       var _props$featureFlags, _props$featureFlags2;
       var editor = _ref2.editor,
@@ -151,7 +139,6 @@ export var EditorInternal = /*#__PURE__*/memo(function (_ref) {
 function ReactEditorViewContextWrapper(props) {
   var _props$editorProps$me, _props$editorProps$li;
   var setInternalEditorAPI = useSetPresetContext();
-  var setExternalEditorAPI = props.setEditorApi;
 
   /**
    * We use the context to retrieve the editorAPI
@@ -165,8 +152,7 @@ function ReactEditorViewContextWrapper(props) {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   function (api) {
     setInternalEditorAPI === null || setInternalEditorAPI === void 0 || setInternalEditorAPI(api);
-    setExternalEditorAPI === null || setExternalEditorAPI === void 0 || setExternalEditorAPI(api);
-  }, [setInternalEditorAPI, setExternalEditorAPI]);
+  }, [setInternalEditorAPI]);
 
   // TODO: Remove these when we deprecate these props from editor-props - smartLinks is unfortunately still used in some places, we can sidestep this problem if we move everyone across to ComposableEditor and deprecate Editor
   var UNSAFE_cards = props.editorProps.UNSAFE_cards;

package/dist/esm/create-editor/ReactEditorView.js

@@ -27,7 +27,6 @@ import { EditorExperience, ExperienceStore, RELIABILITY_INTERVAL } from '@atlask
 import { analyticsEventKey, getAnalyticsEventSeverity } from '@atlaskit/editor-common/utils/analytics';
 import { EditorState, Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { createDispatch, EventDispatcher } from '../event-dispatcher';
 import { EditorAPIContext } from '../presets/context';
 import { findChangedNodesFromTransaction } from '../utils/findChangedNodesFromTransaction';
@@ -551,10 +550,6 @@ export var ReactEditorView = /*#__PURE__*/function (_React$Component) {
     });
     var _api = _this.pluginInjectionAPI.api();
     (_props$setEditorApi = props.setEditorApi) === null || _props$setEditorApi === void 0 || _props$setEditorApi.call(props, _api);
-    if (props.editorProps.editorActions && !fg('platform_editor_remove_editor_actions_workaround')) {
-      // @ts-expect-error
-      props.editorProps.editorActions.__EDITOR_INTERNALS_DO_NOT_USE__API = _api;
-    }
     _this.eventDispatcher = new EventDispatcher();
     _this.dispatch = createDispatch(_this.eventDispatcher);
     _this.errorReporter = createErrorReporter(props.editorProps.errorReporterHandler);

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

@@ -9,13 +9,14 @@ import React, { useImperativeHandle, useRef } from 'react';
 import { jsx, useTheme } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { fullPageMessages as messages } from '@atlaskit/editor-common/messages';
+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, sidebarArea } from './StyledComponents';
+import { contentArea, contentAreaHeightNoToolbar, editorContentAreaStyle, editorContentGutterStyle, ScrollContainer, ScrollContainerNext, 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;
+  var _contentAreaRef$curre, _contentAreaRef$curre2;
   var theme = useTheme();
   var fullWidthMode = props.appearance === 'full-width';
   var scrollContainerRef = useRef(null);
@@ -42,7 +43,7 @@ var Content = /*#__PURE__*/React.forwardRef(function (props, ref) {
     props.isEditorToolbarHidden && contentAreaHeightNoToolbar],
     "data-testid": CONTENT_AREA_TEST_ID,
     ref: containerRef
-  }, jsx(ScrollContainer
+  }, fg('platform_editor_breakout_use_css') ? jsx(ScrollContainerNext
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   , {
     className: "fabric-editor-popup-scroll-parent",
@@ -83,6 +84,47 @@ 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', 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,10 +36,29 @@ 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();

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

@@ -24,7 +24,7 @@ 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';
 import { placeholderTextStyles } from '@atlaskit/editor-plugins/placeholder-text/styles';
-import { akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorSelectedBorderColor, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, blockNodesVerticalMargin, editorFontSize, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
+import { akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorDefaultLayoutWidth, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorSelectedBorderColor, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, blockNodesVerticalMargin, editorFontSize, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
 import { N200, N30A, N500 } from '@atlaskit/theme/colors';
 import { useThemeObserver } from '@atlaskit/tokens';
 import { InlineNodeViewSharedStyles } from '../../nodeviews/getInlineNodeViewProducer.styles';
@@ -66,8 +66,11 @@ export var placeholderStyles = css({
     }
   }
 });
+
+// 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 css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\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.ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n\t\tpointer-events: none;\n\t\topacity: 0.7;\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\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"])), editorFontSize({
+  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\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.ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n\t\tpointer-events: none;\n\t\topacity: 0.7;\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\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"])), akEditorGutterPadding, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, akEditorCalculatedWideLayoutWidth, editorFontSize({
     theme: props.theme
   }), whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, shadowSharedStyle, InlineNodeViewSharedStyles, "var(--ds-border-focused, #8cf)", placeholderTextStyles, placeholderStyles, codeBlockStyles(), blocktypeStyles(), codeMarkSharedStyles(), textColorStyles, backgroundColorStyles(), listsStyles, ruleStyles(), mediaStyles, layoutStyles(props.viewMode), telepointerStyle, gapCursorStyles, panelStyles(), mentionsStyles, emojiStyles, tasksAndDecisionsStyles, gridStyles, linkStyles, blockMarksSharedStyles, dateSharedStyle, extensionStyles, expandStyles(), findReplaceStyles, textHighlightStyle, taskDecisionStyles, statusStyles, annotationSharedStyles(), smartCardStyles(), smartCardSharedStyles, dateStyles, embedCardStyles, unsupportedStyles, resizerStyles, aiPanelStyles(props.colorMode), MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT);
 };

package/dist/esm/version-wrapper.js

@@ -1,2 +1,2 @@
 export var name = "@atlaskit/editor-core";
-export var version = "197.5.1";
+export var version = "197.5.3";

package/dist/types/ui/Appearance/FullPage/StyledComponents.d.ts

@@ -11,6 +11,17 @@ export declare const ScrollContainer: import("react").ForwardRefExoticComponent<
     featureFlags?: import("@atlaskit/editor-common/types").FeatureFlags | undefined;
     viewMode?: "view" | "edit" | undefined;
 } | "accept" | "acceptCharset" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "mediaGroup" | "min" | "minLength" | "multiple" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "target" | "useMap" | "wmode" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contentEditable" | "contextMenu" | "draggable" | "lang" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ScrollContainerNext: import("react").ForwardRefExoticComponent<Pick<{
+    theme?: import("@emotion/react").Theme | undefined;
+    colorMode?: "light" | "dark" | undefined;
+    featureFlags?: import("@atlaskit/editor-common/types").FeatureFlags | undefined;
+    viewMode?: "view" | "edit" | undefined;
+} & import("react").HTMLProps<HTMLDivElement>, "headers" | "method" | "id" | "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "children" | "value" | "name" | "key" | "property" | "type" | "content" | "disabled" | "defaultValue" | "onChange" | "placeholder" | "media" | "list" | "width" | "open" | "accessKey" | "dir" | "className" | "role" | "start" | "action" | "step" | "wrap" | "color" | "height" | "translate" | "default" | "hidden" | keyof {
+    theme?: import("@emotion/react").Theme | undefined;
+    colorMode?: "light" | "dark" | undefined;
+    featureFlags?: import("@atlaskit/editor-common/types").FeatureFlags | undefined;
+    viewMode?: "view" | "edit" | undefined;
+} | "accept" | "acceptCharset" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "mediaGroup" | "min" | "minLength" | "multiple" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "target" | "useMap" | "wmode" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contentEditable" | "contextMenu" | "draggable" | "lang" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & import("react").RefAttributes<HTMLDivElement>>;
 export declare const contentArea: () => import("@emotion/react").SerializedStyles;
 export declare const contentAreaHeightNoToolbar: import("@emotion/react").SerializedStyles;
 export declare const sidebarArea: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/ui/Appearance/FullPage/StyledComponents.d.ts

@@ -11,6 +11,17 @@ export declare const ScrollContainer: import("react").ForwardRefExoticComponent<
     featureFlags?: import("@atlaskit/editor-common/types").FeatureFlags | undefined;
     viewMode?: "view" | "edit" | undefined;
 } | "accept" | "acceptCharset" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "mediaGroup" | "min" | "minLength" | "multiple" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "target" | "useMap" | "wmode" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contentEditable" | "contextMenu" | "draggable" | "lang" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ScrollContainerNext: import("react").ForwardRefExoticComponent<Pick<{
+    theme?: import("@emotion/react").Theme | undefined;
+    colorMode?: "light" | "dark" | undefined;
+    featureFlags?: import("@atlaskit/editor-common/types").FeatureFlags | undefined;
+    viewMode?: "view" | "edit" | undefined;
+} & import("react").HTMLProps<HTMLDivElement>, "headers" | "method" | "id" | "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "children" | "value" | "name" | "key" | "property" | "type" | "content" | "disabled" | "defaultValue" | "onChange" | "placeholder" | "media" | "list" | "width" | "open" | "accessKey" | "dir" | "className" | "role" | "start" | "action" | "step" | "wrap" | "color" | "height" | "translate" | "default" | "hidden" | keyof {
+    theme?: import("@emotion/react").Theme | undefined;
+    colorMode?: "light" | "dark" | undefined;
+    featureFlags?: import("@atlaskit/editor-common/types").FeatureFlags | undefined;
+    viewMode?: "view" | "edit" | undefined;
+} | "accept" | "acceptCharset" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "mediaGroup" | "min" | "minLength" | "multiple" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "target" | "useMap" | "wmode" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contentEditable" | "contextMenu" | "draggable" | "lang" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & import("react").RefAttributes<HTMLDivElement>>;
 export declare const contentArea: () => import("@emotion/react").SerializedStyles;
 export declare const contentAreaHeightNoToolbar: import("@emotion/react").SerializedStyles;
 export declare const sidebarArea: import("@emotion/react").SerializedStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "197.5.1",
+	"version": "197.5.3",
 	"description": "A package contains Atlassian editor core functionality",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -46,10 +46,10 @@
 		"@atlaskit/editor-common": "^89.0.0",
 		"@atlaskit/editor-json-transformer": "^8.18.0",
 		"@atlaskit/editor-plugins": "^4.4.0",
-		"@atlaskit/editor-prosemirror": "5.0.1",
+		"@atlaskit/editor-prosemirror": "6.0.0",
 		"@atlaskit/editor-shared-styles": "^2.13.0",
 		"@atlaskit/emoji": "^67.7.0",
-		"@atlaskit/icon": "^22.16.0",
+		"@atlaskit/icon": "^22.17.0",
 		"@atlaskit/media-card": "^78.2.0",
 		"@atlaskit/mention": "^23.2.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
@@ -79,13 +79,13 @@
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"devDependencies": {
-		"@af/editor-examples-helpers": "0.3.8",
+		"@af/editor-examples-helpers": "0.3.9",
 		"@af/editor-libra": "*",
 		"@af/visual-regression": "*",
 		"@atlaskit/adf-utils": "^19.8.0",
 		"@atlaskit/analytics-listeners": "^8.11.0",
-		"@atlaskit/collab-provider": "9.40.1",
-		"@atlaskit/editor-plugin-annotation": "1.19.5",
+		"@atlaskit/collab-provider": "9.40.2",
+		"@atlaskit/editor-plugin-annotation": "1.19.6",
 		"@atlaskit/editor-plugin-card": "^3.0.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^2.1.0",
 		"@atlaskit/editor-plugin-list": "^3.8.0",
@@ -188,9 +188,6 @@
 			"type": "boolean",
 			"referenceOnly": "true"
 		},
-		"platform_editor_remove_editor_actions_workaround": {
-			"type": "boolean"
-		},
 		"platform.editor.table.use-shared-state-hook": {
 			"type": "boolean",
 			"referenceOnly": true
@@ -261,6 +258,9 @@
 		},
 		"platform_editor_get_emoji_provider_from_config": {
 			"type": "boolean"
+		},
+		"platform_editor_breakout_use_css": {
+			"type": "boolean"
 		}
 	},
 	"stricter": {