@atlaskit/editor-core 207.17.0 → 207.18.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @atlaskit/editor-core
 
+## 207.18.0
+
+### Minor Changes
+
+- [#166502](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/166502)
+  [`ea1ed63fc9615`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ea1ed63fc9615) -
+  ED-28032 add keyboard shortcuts for new resizing experience behind
+  platform_editor_breakout_resizing
+
+### Patch Changes
+
+- Updated dependencies
+
+## 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

package/afm-cc/tsconfig.json

@@ -4,7 +4,7 @@
         "declaration": true,
         "target": "es5",
         "composite": true,
-        "outDir": "../dist",
+        "outDir": "../../../../../confluence/tsDist/@atlaskit__editor-core",
         "rootDir": "../"
     },
     "include": [

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/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.17.0";
+var version = exports.version = "207.18.0";

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}
 

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

@@ -0,0 +1,201 @@
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+import { css } from '@emotion/react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export const statusStyles = 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 ${"var(--ds-border-danger, #E2483D)"}`
+      }
+    }
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export const statusStylesMixin_fg_platform_component_visual_refresh = 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 ${"var(--ds-border-selected, #0C66E4)"}`
+    }
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export const statusStylesMixin_without_fg_platform_component_visual_refresh = 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 ${"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
+export const vanillaStatusStyles = 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 - ${"var(--ds-space-100, 8px)"})`
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export const vanillaStatusStylesMixin_fg_platform_component_visual_refresh = 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
+export const vanillaStatusStylesMixin_without_fg_platform_component_visual_refresh = 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/es2019/version-wrapper.js

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

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

@@ -164,6 +164,7 @@ var Editor = /*#__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/esm/ui/Appearance/FullPage/StyledComponents.js

@@ -128,7 +128,7 @@ export var editorContentAreaStyle = function editorContentAreaStyle(_ref) {
   var layoutMaxWidth = _ref.layoutMaxWidth,
     fullWidthMode = _ref.fullWidthMode,
     isEditorToolbarHidden = _ref.isEditorToolbarHidden;
-  return [editorContentArea, !fullWidthMode && editorContentAreaWithLayoutWith(layoutMaxWidth), editorContentAreaContainerStyle()].concat(_toConsumableArray(fg('platform_editor_controls_no_toolbar_space') ? [] : [editorExperiment('platform_editor_controls', 'variant1') &&
+  return [editorContentArea, fg('platform_editor_fix_table_width_inline_comment') ? fullWidthNonChromelessBreakoutBlockTableStyle : fullWidthModeBreakoutBlockTableStyle, !fullWidthMode && editorContentAreaWithLayoutWith(layoutMaxWidth), editorContentAreaContainerStyle()].concat(_toConsumableArray(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
@@ -141,6 +141,40 @@ var editorContentAreaWithLayoutWith = function editorContentAreaWithLayoutWith(l
     maxWidth: "".concat(layoutMaxWidth + getTotalPadding(), "px")
   });
 };
+var 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'
+    }
+  }
+});
+var 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'
+    }
+  }
+});
 var editorContentArea = css({
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: '24px',
@@ -176,23 +210,7 @@ var 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 var editorContentGutterStyle = function editorContentGutterStyle() {

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

@@ -21,7 +21,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';
@@ -50,6 +49,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';
@@ -97,7 +97,7 @@ var akEditorBreakpointForSmallDevice = "1266px";
 
 // jest warning: JSDOM version (22) doesn't support the new @container CSS rule
 var contentStyles = function contentStyles() {
-  return css(_templateObject || (_templateObject = _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: ", "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"])), akEditorGutterPadding, akEditorGutterPaddingDynamic(), akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, akEditorCalculatedWideLayoutWidth, whitespaceStyles, indentationStyles, shadowStyles, InlineNodeViewSharedStyles, fg('platform_editor_hide_cursor_when_pm_hideselection') ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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, editorExperiment('platform_editor_advanced_code_blocks', true) ? css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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, placeholderStyles, editorExperiment('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, codeBlockStyles, !fg('platform_editor_typography_ugc') && editorUGCTokensDefault,
+  return css(_templateObject || (_templateObject = _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: ", "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"])), akEditorGutterPadding, akEditorGutterPaddingDynamic(), akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, akEditorCalculatedWideLayoutWidth, whitespaceStyles, indentationStyles, shadowStyles, InlineNodeViewSharedStyles, fg('platform_editor_hide_cursor_when_pm_hideselection') ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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, editorExperiment('platform_editor_advanced_code_blocks', true) ? css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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, placeholderStyles, editorExperiment('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, codeBlockStyles, !fg('platform_editor_typography_ugc') && editorUGCTokensDefault,
   // eslint-disable-next-line @atlaskit/platform/no-preconditioning
   fg('platform_editor_typography_ugc') && ( /* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */
   fg('platform-dst-jira-web-fonts') || fg('confluence_typography_refreshed') || fg('atlas_editor_typography_refreshed')) && editorUGCTokensRefreshed
@@ -113,7 +113,7 @@ var contentStyles = function contentStyles() {
     exposure: false
   }) && fg('platform-visual-refresh-icons') && vanillaDecisionIconWithVisualRefresh, editorExperiment('platform_editor_vanilla_dom', true, {
     exposure: false
-  }) && !fg('platform-visual-refresh-icons') && vanillaDecisionIconWithoutVisualRefresh, statusStyles, editorExperiment('platform_editor_vanilla_dom', true) ? vanillaStatusStyles() : null, annotationStyles, smartCardStyles, embedCardStyles, unsupportedStyles, resizerStyles, !fg('platform-visual-refresh-icons') ? css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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);
+  }) && !fg('platform-visual-refresh-icons') && vanillaDecisionIconWithoutVisualRefresh, statusStyles, 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, smartCardStyles, embedCardStyles, unsupportedStyles, resizerStyles, !fg('platform-visual-refresh-icons') ? css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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/esm/ui/EditorContentContainer/styles/statusStyles.js

@@ -0,0 +1,201 @@
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+import { css } from '@emotion/react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export var statusStyles = 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
+export var statusStylesMixin_fg_platform_component_visual_refresh = 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
+export var statusStylesMixin_without_fg_platform_component_visual_refresh = 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
+export var vanillaStatusStyles = 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
+export var vanillaStatusStylesMixin_fg_platform_component_visual_refresh = 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
+export var vanillaStatusStylesMixin_without_fg_platform_component_visual_refresh = 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/esm/version-wrapper.js

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

package/dist/types/ui/EditorContentContainer/styles/statusStyles.d.ts

@@ -0,0 +1,6 @@
+export declare const statusStyles: import("@emotion/react").SerializedStyles;
+export declare const statusStylesMixin_fg_platform_component_visual_refresh: import("@emotion/react").SerializedStyles;
+export declare const statusStylesMixin_without_fg_platform_component_visual_refresh: import("@emotion/react").SerializedStyles;
+export declare const vanillaStatusStyles: import("@emotion/react").SerializedStyles;
+export declare const vanillaStatusStylesMixin_fg_platform_component_visual_refresh: import("@emotion/react").SerializedStyles;
+export declare const vanillaStatusStylesMixin_without_fg_platform_component_visual_refresh: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/ui/EditorContentContainer/styles/statusStyles.d.ts

@@ -0,0 +1,6 @@
+export declare const statusStyles: import("@emotion/react").SerializedStyles;
+export declare const statusStylesMixin_fg_platform_component_visual_refresh: import("@emotion/react").SerializedStyles;
+export declare const statusStylesMixin_without_fg_platform_component_visual_refresh: import("@emotion/react").SerializedStyles;
+export declare const vanillaStatusStyles: import("@emotion/react").SerializedStyles;
+export declare const vanillaStatusStylesMixin_fg_platform_component_visual_refresh: import("@emotion/react").SerializedStyles;
+export declare const vanillaStatusStylesMixin_without_fg_platform_component_visual_refresh: import("@emotion/react").SerializedStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "207.17.0",
+	"version": "207.18.0",
 	"description": "A package contains Atlassian editor core functionality",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -596,10 +596,6 @@
 			"type": "boolean",
 			"referenceOnly": true
 		},
-		"platform_editor_controls_patch_analytics": {
-			"type": "boolean",
-			"referenceOnly": true
-		},
 		"platform_editor_refactor_view_more": {
 			"type": "boolean",
 			"referenceOnly": true
@@ -607,6 +603,9 @@
 		"confluence_team_presence_scroll_to_pointer": {
 			"type": "boolean"
 		},
+		"platform_editor_fix_table_width_inline_comment": {
+			"type": "boolean"
+		},
 		"platform_editor_interaction_api_refactor": {
 			"type": "boolean"
 		},
@@ -629,6 +628,9 @@
 		"atlas_editor_typography_refreshed": {
 			"type": "boolean"
 		},
+		"should-render-to-parent-should-be-true-editor": {
+			"type": "boolean"
+		},
 		"platform_editor_fix_floating_toolbar_focus": {
 			"type": "boolean"
 		}