@atlaskit/editor-core 207.16.0 → 207.17.1

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @atlaskit/editor-core
 
+## 207.17.1
+
+### Patch Changes
+
+- [#165113](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/165113)
+  [`867bcb05452bf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/867bcb05452bf) -
+  Cleaned up platform_editor_controls_patch_analytics and platform_editor_controls_patch_analytics_2
+- [#165779](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/165779)
+  [`3d472e56bc200`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3d472e56bc200) -
+  [ux] ED-27698: Fixed table width issue in inline comment table
+- [#167077](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/167077)
+  [`a2fd3756690cc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a2fd3756690cc) -
+  [ux] Migrate statusStyles to static CSS
+- Updated dependencies
+
+## 207.17.0
+
+### Minor Changes
+
+- [#167295](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/167295)
+  [`6c94765105520`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6c94765105520) -
+  [https://product-fabric.atlassian.net/browse/ED-28212](ED-28212) - the `validNode()` function from
+  @atlaskit/editor-core package will use memoization
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 207.16.0
 
 ### Minor Changes

package/dist/cjs/ui/Appearance/Chromeless.js

@@ -170,6 +170,7 @@ var Editor = exports.default = /*#__PURE__*/function (_React$Component) {
           minHeight: "".concat(minHeight, "px")
         })],
         "data-testid": "chromeless-editor",
+        id: "chromeless-editor",
         ref: function ref(_ref2) {
           return _this.containerElement = _ref2;
         }

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

@@ -136,7 +136,7 @@ var editorContentAreaStyle = exports.editorContentAreaStyle = function editorCon
   var layoutMaxWidth = _ref.layoutMaxWidth,
     fullWidthMode = _ref.fullWidthMode,
     isEditorToolbarHidden = _ref.isEditorToolbarHidden;
-  return [editorContentArea, !fullWidthMode && editorContentAreaWithLayoutWith(layoutMaxWidth), editorContentAreaContainerStyle()].concat((0, _toConsumableArray2.default)((0, _platformFeatureFlags.fg)('platform_editor_controls_no_toolbar_space') ? [] : [(0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') &&
+  return [editorContentArea, (0, _platformFeatureFlags.fg)('platform_editor_fix_table_width_inline_comment') ? fullWidthNonChromelessBreakoutBlockTableStyle : fullWidthModeBreakoutBlockTableStyle, !fullWidthMode && editorContentAreaWithLayoutWith(layoutMaxWidth), editorContentAreaContainerStyle()].concat((0, _toConsumableArray2.default)((0, _platformFeatureFlags.fg)('platform_editor_controls_no_toolbar_space') ? [] : [(0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') &&
   // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
   contentAreaReducedHeaderSpace, isEditorToolbarHidden && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') &&
   // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
@@ -149,6 +149,40 @@ var editorContentAreaWithLayoutWith = function editorContentAreaWithLayoutWith(l
     maxWidth: "".concat(layoutMaxWidth + getTotalPadding(), "px")
   });
 };
+var fullWidthModeBreakoutBlockTableStyle = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-1
+  '.fabric-editor--full-width-mode': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '.fabric-editor-breakout-mark, .extension-container.block, .pm-table-container': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+      width: '100% !important'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '.fabric-editor-breakout-mark': {
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+      marginLeft: 'unset !important',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+      transform: 'none !important'
+    }
+  }
+});
+var fullWidthNonChromelessBreakoutBlockTableStyle = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-1
+  '.fabric-editor--full-width-mode:not(:has(#chromeless-editor))': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '.fabric-editor-breakout-mark, .extension-container.block, .pm-table-container': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+      width: '100% !important'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '.fabric-editor-breakout-mark': {
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+      marginLeft: 'unset !important',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+      transform: 'none !important'
+    }
+  }
+});
 var editorContentArea = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: '24px',
@@ -184,23 +218,7 @@ var editorContentArea = (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
-_commonStyles.tableFullPageEditorStyles, {
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '.fabric-editor--full-width-mode': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '.fabric-editor-breakout-mark, .extension-container.block, .pm-table-container': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
-      width: '100% !important'
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '.fabric-editor-breakout-mark': {
-      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
-      marginLeft: 'unset !important',
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
-      transform: 'none !important'
-    }
-  }
-});
+_commonStyles.tableFullPageEditorStyles);
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var editorContentGutterStyle = exports.editorContentGutterStyle = function editorContentGutterStyle() {

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

@@ -18,7 +18,6 @@ var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _tokens = require("@atlaskit/tokens");
 var _extension = require("../ContentStyles/extension");
 var _panel = require("../ContentStyles/panel");
-var _status = require("../ContentStyles/status");
 var _aiPanel = require("./styles/aiPanel");
 var _annotationStyles = require("./styles/annotationStyles");
 var _backgroundColorStyles = require("./styles/backgroundColorStyles");
@@ -47,6 +46,7 @@ var _resizerStyles = require("./styles/resizerStyles");
 var _rule = require("./styles/rule");
 var _shadowStyles = require("./styles/shadowStyles");
 var _smartCardStyles = require("./styles/smartCardStyles");
+var _statusStyles = require("./styles/statusStyles");
 var _tasksAndDecisionsStyles = require("./styles/tasksAndDecisionsStyles");
 var _telepointerStyles = require("./styles/telepointerStyles");
 var _textColorStyles = require("./styles/textColorStyles");
@@ -103,7 +103,7 @@ var akEditorBreakpointForSmallDevice = "1266px";
 
 // jest warning: JSDOM version (22) doesn't support the new @container CSS rule
 var contentStyles = function contentStyles() {
-  return (0, _react2.css)(_templateObject || (_templateObject = (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: ", "px;\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.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\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 (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: var(--ak-editor-base-font-size);\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\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/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t *    https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\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.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\n\t", "\n\n\t", "\n\n\t", "\n\n\t", "\n\n\t", "\n\t", "\n  \t", "\n\n\n  \t", "\n\n\t", "\n\t", "\n\n\t", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  /* This needs to be after telepointer styles as some overlapping rules have equal specificity, and so the order is significant */\n  ", "\n\n  ", ";\n\n\t", "\n\n\t", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  // Switch between the two icons based on the visual refresh feature gate\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n\t.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\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n\t is bigger than the others, new ADS icon does not have this issue\n  */\n\t", "\n"])), _editorSharedStyles.akEditorGutterPadding, (0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), _editorSharedStyles.akEditorDefaultLayoutWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth, _editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, _editorSharedStyles.akEditorCalculatedWideLayoutWidth, _whitespaceStyles.whitespaceStyles, _indentationStyles.indentationStyles, _shadowStyles.shadowStyles, _inlineNodeViewSharedStyles.InlineNodeViewSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_hide_cursor_when_pm_hideselection') ? (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, (0, _experiments.editorExperiment)('platform_editor_advanced_code_blocks', true) ? (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, "var(--ds-border-focused, #8cf)", _placeholderTextStyles.placeholderTextStyles, placeholderStyles, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, _codeBlockStyles.codeBlockStyles, !(0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') && _editorUGCTokenStyles.editorUGCTokensDefault,
+  return (0, _react2.css)(_templateObject || (_templateObject = (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: ", "px;\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.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\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 (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: var(--ak-editor-base-font-size);\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\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/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t *    https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\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.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\n\t", "\n\n\t", "\n\n\t", "\n\n\t", "\n\n\t", "\n\t", "\n  \t", "\n\n\n  \t", "\n\n\t", "\n\t", "\n\n\t", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  /* This needs to be after telepointer styles as some overlapping rules have equal specificity, and so the order is significant */\n  ", "\n\n  ", ";\n\n\t", "\n\n\t", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  // Switch between the two icons based on the visual refresh feature gate\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n\t.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\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n\t is bigger than the others, new ADS icon does not have this issue\n  */\n\t", "\n"])), _editorSharedStyles.akEditorGutterPadding, (0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), _editorSharedStyles.akEditorDefaultLayoutWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth, _editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, _editorSharedStyles.akEditorCalculatedWideLayoutWidth, _whitespaceStyles.whitespaceStyles, _indentationStyles.indentationStyles, _shadowStyles.shadowStyles, _inlineNodeViewSharedStyles.InlineNodeViewSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_hide_cursor_when_pm_hideselection') ? (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, (0, _experiments.editorExperiment)('platform_editor_advanced_code_blocks', true) ? (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, "var(--ds-border-focused, #8cf)", _placeholderTextStyles.placeholderTextStyles, placeholderStyles, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, _codeBlockStyles.codeBlockStyles, !(0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') && _editorUGCTokenStyles.editorUGCTokensDefault,
   // eslint-disable-next-line @atlaskit/platform/no-preconditioning
   (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') && ( /* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */
   (0, _platformFeatureFlags.fg)('platform-dst-jira-web-fonts') || (0, _platformFeatureFlags.fg)('confluence_typography_refreshed') || (0, _platformFeatureFlags.fg)('atlas_editor_typography_refreshed')) && _editorUGCTokenStyles.editorUGCTokensRefreshed
@@ -119,7 +119,7 @@ var contentStyles = function contentStyles() {
     exposure: false
   }) && (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisionsStyles.vanillaDecisionIconWithVisualRefresh, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
     exposure: false
-  }) && !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisionsStyles.vanillaDecisionIconWithoutVisualRefresh, _status.statusStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true) ? (0, _status.vanillaStatusStyles)() : null, _annotationStyles.annotationStyles, _smartCardStyles.smartCardStyles, _embedCardStyles.embedCardStyles, _unsupportedStyles.unsupportedStyles, _resizerStyles.resizerStyles, !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ? (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.hyperlink-open-link {\n\t\t\t\t\tmin-width: 24px;\n\t\t\t\t\tsvg {\n\t\t\t\t\t\tmax-width: 18px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"]))) : null);
+  }) && !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisionsStyles.vanillaDecisionIconWithoutVisualRefresh, _statusStyles.statusStyles, (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && _statusStyles.statusStylesMixin_fg_platform_component_visual_refresh, !(0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && _statusStyles.statusStylesMixin_without_fg_platform_component_visual_refresh, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true) && _statusStyles.vanillaStatusStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true) && (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && _statusStyles.vanillaStatusStylesMixin_fg_platform_component_visual_refresh, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true) && !(0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && _statusStyles.vanillaStatusStylesMixin_without_fg_platform_component_visual_refresh, _annotationStyles.annotationStyles, _smartCardStyles.smartCardStyles, _embedCardStyles.embedCardStyles, _unsupportedStyles.unsupportedStyles, _resizerStyles.resizerStyles, !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ? (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.hyperlink-open-link {\n\t\t\t\t\tmin-width: 24px;\n\t\t\t\t\tsvg {\n\t\t\t\t\t\tmax-width: 18px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"]))) : null);
 };
 var CommentEditorMargin = 14;
 

package/dist/cjs/ui/EditorContentContainer/styles/statusStyles.js

@@ -0,0 +1,208 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.vanillaStatusStylesMixin_without_fg_platform_component_visual_refresh = exports.vanillaStatusStylesMixin_fg_platform_component_visual_refresh = exports.vanillaStatusStyles = exports.statusStylesMixin_without_fg_platform_component_visual_refresh = exports.statusStylesMixin_fg_platform_component_visual_refresh = exports.statusStyles = void 0;
+var _react = require("@emotion/react");
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var statusStyles = exports.statusStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.pm-table-cell-content-wrap, .pm-table-header-content-wrap, [data-layout-section]': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.statusView-content-wrap': {
+      maxWidth: '100%',
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+      lineHeight: 0,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '& > span': {
+        width: '100%'
+      }
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.statusView-content-wrap': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '& > span': {
+      cursor: 'pointer',
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+      lineHeight: 0 // Prevent responsive layouts increasing height of container.
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.danger': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.status-lozenge-span > span': {
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+      backgroundColor: 'rgba(255, 189, 173, 0.5)' // akEditorDeleteBackgroundWithOpacity
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.statusView-content-wrap.ak-editor-selected-node': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '.status-lozenge-span > span': {
+        boxShadow: "0 0 0 1px ".concat("var(--ds-border-danger, #E2483D)")
+      }
+    }
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var statusStylesMixin_fg_platform_component_visual_refresh = exports.statusStylesMixin_fg_platform_component_visual_refresh = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.statusView-content-wrap': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&.ak-editor-selected-node .status-lozenge-span > span': {
+      boxShadow: "0 0 0 2px ".concat("var(--ds-border-selected, #0C66E4)")
+    }
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var statusStylesMixin_without_fg_platform_component_visual_refresh = exports.statusStylesMixin_without_fg_platform_component_visual_refresh = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.statusView-content-wrap': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&.ak-editor-selected-node .status-lozenge-span > span': {
+      // getSelectionStyles([SelectionStyle.BoxShadow]);
+      boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, #0C66E4)"),
+      borderColor: 'transparent',
+      // hideNativeBrowserTextSelectionStyles
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '&::selection, & *::selection': {
+        backgroundColor: 'transparent'
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+      '&::-moz-selection, & *::-moz-selection': {
+        backgroundColor: 'transparent'
+      }
+    }
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var vanillaStatusStyles = exports.vanillaStatusStyles = (0, _react.css)({
+  // baseVanillaStatusStyles
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="status"] .lozenge-wrapper': {
+    backgroundColor: "var(--ds-background-neutral, #091E420F)",
+    maxWidth: '100%',
+    paddingInline: "var(--ds-space-050, 4px)",
+    display: 'inline-flex',
+    borderRadius: '3px',
+    blockSize: 'min-content',
+    position: 'static',
+    overflow: 'hidden',
+    boxSizing: 'border-box',
+    appearance: 'none',
+    border: 'none'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="status"] .lozenge-text': {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    fontSize: '11px',
+    fontStyle: 'normal',
+    fontFamily: "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+    fontWeight: "var(--ds-font-weight-bold, 700)",
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: '16px',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    textTransform: 'uppercase',
+    whiteSpace: 'nowrap',
+    maxWidth: "calc(200px - ".concat("var(--ds-space-100, 8px)", ")")
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var vanillaStatusStylesMixin_fg_platform_component_visual_refresh = exports.vanillaStatusStylesMixin_fg_platform_component_visual_refresh = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="status"] .lozenge-text': {
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+    color: '#292A2E'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="status"] > [data-color=neutral] > .lozenge-wrapper': {
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+    backgroundColor: '#DDDEE1'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="status"] > [data-color=purple] > .lozenge-wrapper': {
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+    backgroundColor: '#D8A0F7'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="status"] > [data-color=blue] > .lozenge-wrapper': {
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+    backgroundColor: '#8FB8F6'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="status"] > [data-color=yellow] > .lozenge-wrapper': {
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+    backgroundColor: '#F9C84E'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="status"] > [data-color=red] > .lozenge-wrapper': {
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+    backgroundColor: '#FD9891'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="status"] > [data-color=green] > .lozenge-wrapper': {
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+    backgroundColor: '#B3DF72'
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var vanillaStatusStylesMixin_without_fg_platform_component_visual_refresh = exports.vanillaStatusStylesMixin_without_fg_platform_component_visual_refresh = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="status"] > [data-color=neutral] .lozenge-wrapper': {
+    backgroundColor: "var(--ds-background-neutral, #091E420F)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="status"] > [data-color=neutral] .lozenge-text': {
+    color: "var(--ds-text-subtle, #44546F)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="status"] > [data-color=purple] .lozenge-wrapper': {
+    backgroundColor: "var(--ds-background-discovery, #F3F0FF)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="status"] > [data-color=purple] .lozenge-text': {
+    color: "var(--ds-text-discovery, #5E4DB2)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="status"] > [data-color=blue] .lozenge-wrapper': {
+    backgroundColor: "var(--ds-background-information, #E9F2FF)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="status"] > [data-color=blue] .lozenge-text': {
+    color: "var(--ds-text-information, #0055CC)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="status"] > [data-color=yellow] .lozenge-wrapper': {
+    backgroundColor: "var(--ds-background-warning, #FFF7D6)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="status"] > [data-color=yellow] .lozenge-text': {
+    color: "var(--ds-text-warning, #A54800)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="status"] > [data-color=red] .lozenge-wrapper': {
+    backgroundColor: "var(--ds-background-danger, #FFECEB)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="status"] > [data-color=red] .lozenge-text': {
+    color: "var(--ds-text-danger, #AE2E24)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="status"] > [data-color=green] .lozenge-wrapper': {
+    backgroundColor: "var(--ds-background-success, #DCFFF1)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="status"] > [data-color=green] .lozenge-text': {
+    color: "var(--ds-text-success, #216E4E)"
+  }
+});

package/dist/cjs/utils/validateNodes.js

@@ -4,9 +4,54 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.validateNodes = exports.validNode = void 0;
+var _model = require("@atlaskit/editor-prosemirror/model");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+// We don't want to use memoize from lodash, because we need to use WeakMap or WeakSet
+// to avoid memory leaks, but lodash allow to change the cache type only globally
+// like `memoize.Cache = WeakMap`, and we don't want to do that.
+// So we use our own cache implementation.
+var cache = new WeakSet();
+
+// See https://github.com/ProseMirror/prosemirror-model/blob/20d26c9843d6a69a1d417d937c401537ee0b2342/src/node.ts#L303
+function checkNode(node) {
+  if (cache.has(node)) {
+    return;
+  }
+
+  // @ts-expect-error - This is internal ProseMirror API, but we okay with it
+  node.type.checkContent(node.content);
+  // @ts-expect-error - This is internal ProseMirror API, but we okay with it
+  node.type.checkAttrs(node.attrs);
+  var copy = _model.Mark.none;
+  for (var i = 0; i < node.marks.length; i++) {
+    var mark = node.marks[i];
+    // @ts-expect-error - This is internal ProseMirror API, but we okay with it
+    mark.type.checkAttrs(mark.attrs);
+    copy = mark.addToSet(copy);
+  }
+  if (!_model.Mark.sameSet(copy, node.marks)) {
+    throw new RangeError("Invalid collection of marks for node ".concat(node.type.name, ": ").concat(node.marks.map(function (m) {
+      return m.type.name;
+    })));
+  }
+  node.content.forEach(function (node) {
+    return checkNode(node);
+  });
+
+  // The set value should be added in the end of the function,
+  // because any previous check can throw an error,
+  // and we don't want to add invalid node to the cache.
+  cache.add(node);
+}
 var validNode = exports.validNode = function validNode(node) {
   try {
-    node.check(); // this will throw an error if the node is invalid
+    if ((0, _experiments.editorExperiment)('platform_editor_memoized_node_check', true, {
+      exposure: true
+    })) {
+      checkNode(node);
+    } else {
+      node.check();
+    }
   } catch (error) {
     return false;
   }

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

package/dist/es2019/ui/Appearance/Chromeless.js

@@ -152,6 +152,7 @@ export default class Editor extends React.Component {
           minHeight: `${minHeight}px`
         })],
         "data-testid": "chromeless-editor",
+        id: "chromeless-editor",
         ref: ref => this.containerElement = ref
       }, jsx(EditorContainer
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766

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

@@ -122,7 +122,7 @@ export const editorContentAreaStyle = ({
   layoutMaxWidth,
   fullWidthMode,
   isEditorToolbarHidden
-}) => [editorContentArea, !fullWidthMode && editorContentAreaWithLayoutWith(layoutMaxWidth), editorContentAreaContainerStyle(), ...(fg('platform_editor_controls_no_toolbar_space') ? [] : [editorExperiment('platform_editor_controls', 'variant1') &&
+}) => [editorContentArea, fg('platform_editor_fix_table_width_inline_comment') ? fullWidthNonChromelessBreakoutBlockTableStyle : fullWidthModeBreakoutBlockTableStyle, !fullWidthMode && editorContentAreaWithLayoutWith(layoutMaxWidth), editorContentAreaContainerStyle(), ...(fg('platform_editor_controls_no_toolbar_space') ? [] : [editorExperiment('platform_editor_controls', 'variant1') &&
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
 contentAreaReducedHeaderSpace, isEditorToolbarHidden && editorExperiment('platform_editor_controls', 'variant1') &&
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
@@ -132,6 +132,40 @@ const editorContentAreaWithLayoutWith = layoutMaxWidth => css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   maxWidth: `${layoutMaxWidth + getTotalPadding()}px`
 });
+const fullWidthModeBreakoutBlockTableStyle = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-1
+  '.fabric-editor--full-width-mode': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '.fabric-editor-breakout-mark, .extension-container.block, .pm-table-container': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+      width: '100% !important'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '.fabric-editor-breakout-mark': {
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+      marginLeft: 'unset !important',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+      transform: 'none !important'
+    }
+  }
+});
+const fullWidthNonChromelessBreakoutBlockTableStyle = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-1
+  '.fabric-editor--full-width-mode:not(:has(#chromeless-editor))': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '.fabric-editor-breakout-mark, .extension-container.block, .pm-table-container': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+      width: '100% !important'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '.fabric-editor-breakout-mark': {
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+      marginLeft: 'unset !important',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+      transform: 'none !important'
+    }
+  }
+});
 const editorContentArea = css({
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: '24px',
@@ -171,23 +205,7 @@ const editorContentArea = 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
-tableFullPageEditorStyles, {
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '.fabric-editor--full-width-mode': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '.fabric-editor-breakout-mark, .extension-container.block, .pm-table-container': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
-      width: '100% !important'
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '.fabric-editor-breakout-mark': {
-      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
-      marginLeft: 'unset !important',
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
-      transform: 'none !important'
-    }
-  }
-});
+tableFullPageEditorStyles);
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const editorContentGutterStyle = () => {

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

@@ -19,7 +19,6 @@ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { useThemeObserver } from '@atlaskit/tokens';
 import { extensionStyles } from '../ContentStyles/extension';
 import { panelStyles } from '../ContentStyles/panel';
-import { statusStyles, vanillaStatusStyles } from '../ContentStyles/status';
 import { aiPanelBaseFirefoxStyles, aiPanelBaseStyles, aiPanelDarkFirefoxStyles, aiPanelDarkStyles } from './styles/aiPanel';
 import { annotationStyles } from './styles/annotationStyles';
 import { backgroundColorStyles } from './styles/backgroundColorStyles';
@@ -48,6 +47,7 @@ import { resizerStyles, pragmaticResizerStyles } from './styles/resizerStyles';
 import { ruleStyles } from './styles/rule';
 import { shadowStyles } from './styles/shadowStyles';
 import { linkingVisualRefreshV1Styles, smartCardStyles, smartLinksInLivePagesStyles, smartLinksInLivePagesStylesOld } from './styles/smartCardStyles';
+import { statusStyles, statusStylesMixin_fg_platform_component_visual_refresh, statusStylesMixin_without_fg_platform_component_visual_refresh, vanillaStatusStyles, vanillaStatusStylesMixin_fg_platform_component_visual_refresh, vanillaStatusStylesMixin_without_fg_platform_component_visual_refresh } from './styles/statusStyles';
 import { decisionStyles, tasksAndDecisionsStyles, vanillaDecisionIconWithoutVisualRefresh, vanillaDecisionIconWithVisualRefresh, vanillaDecisionStyles, vanillaTaskItemStyles } from './styles/tasksAndDecisionsStyles';
 import { telepointerColorAndCommonStyle, telepointerStyle, telepointerStyleWithInitialOnly } from './styles/telepointerStyles';
 import { textColorStyles } from './styles/textColorStyles';
@@ -282,7 +282,14 @@ fg('platform_editor_typography_ugc') && /* eslint-disable @atlaskit/platform/ens
 
   ${statusStyles}
 
-  ${editorExperiment('platform_editor_vanilla_dom', true) ? vanillaStatusStyles() : null}
+  ${fg('platform-component-visual-refresh') && statusStylesMixin_fg_platform_component_visual_refresh}
+  ${!fg('platform-component-visual-refresh') && statusStylesMixin_without_fg_platform_component_visual_refresh}
+
+  ${editorExperiment('platform_editor_vanilla_dom', true) && vanillaStatusStyles}
+
+  ${editorExperiment('platform_editor_vanilla_dom', true) && fg('platform-component-visual-refresh') && vanillaStatusStylesMixin_fg_platform_component_visual_refresh}
+
+  ${editorExperiment('platform_editor_vanilla_dom', true) && !fg('platform-component-visual-refresh') && vanillaStatusStylesMixin_without_fg_platform_component_visual_refresh}
 
   ${annotationStyles}