@atlaskit/editor-core 205.1.9 → 205.1.11

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-core
 
+## 205.1.11
+
+### Patch Changes
+
+- [#137153](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/137153)
+  [`105ebf2f4f54b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/105ebf2f4f54b) -
+  [ED-27125] This change is adding a feature gate to use the functional components for media nodes
+  which will resolve the bug of attachment duplication when copying and pasting.
+- Updated dependencies
+
+## 205.1.10
+
+### Patch Changes
+
+- [#137203](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/137203)
+  [`28c931f62e83e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/28c931f62e83e) -
+  Converts editor status node to vanilla js
+- Updated dependencies
+
 ## 205.1.9
 
 ### Patch Changes

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

@@ -146,7 +146,7 @@ var fixBlockControlStylesSSR = exports.fixBlockControlStylesSSR = function fixBl
 // The breakpoint for small devices is 1266px, copied from getBreakpoint in platform/packages/editor/editor-common/src/ui/WidthProvider/index.tsx
 var akEditorBreakpointForSmallDevice = "1266px";
 var contentStyles = function contentStyles(props) {
-  return (0, _react2.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: 52px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t.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: ", "px;\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t}\n\n\t", "\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\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\t", "\n\t", "\n\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t// For FullPage only when inside a table\n\t// Related code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\t// In the \"editorContentAreaContainerStyle\" function\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar,\n\t.", " {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n     is bigger than the others, new ADS icon does not have this issue\n  */\n\t", "\n"])), _editorSharedStyles.akEditorGutterPadding, _editorSharedStyles.akEditorDefaultLayoutWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth, _editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, _editorSharedStyles.akEditorCalculatedWideLayoutWidth, (0, _editorSharedStyles.editorFontSize)({
+  return (0, _react2.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: 52px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t.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: ", "px;\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t}\n\n\t", "\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\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\t", "\n\t", "\n\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t// For FullPage only when inside a table\n\t// Related code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\t// In the \"editorContentAreaContainerStyle\" function\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar,\n\t.", " {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n     is bigger than the others, new ADS icon does not have this issue\n  */\n\t", "\n"])), _editorSharedStyles.akEditorGutterPadding, _editorSharedStyles.akEditorDefaultLayoutWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth, _editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, _editorSharedStyles.akEditorCalculatedWideLayoutWidth, (0, _editorSharedStyles.editorFontSize)({
     theme: props.theme
   }), _styles.whitespaceSharedStyles, (0, _styles.paragraphSharedStyles)(props.typographyTheme), _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, (0, _platformFeatureFlags.fg)('editor_request_to_edit_task') ? null : (0, _react2.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n\t\t\t\t\tpointer-events: none;\n\t\t\t\t\topacity: 0.7;\n\t\t\t\t}\n\t\t\t"]))), (0, _platformFeatureFlags.fg)('platform_editor_hide_cursor_when_pm_hideselection') ? (0, _react2.css)(_templateObject12 || (_templateObject12 = (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)(_templateObject13 || (_templateObject13 = (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)", _styles5.placeholderTextStyles, placeholderStyles, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, (0, _codeBlock.codeBlockStyles)(), (0, _styles2.blocktypeStyles)(props.typographyTheme), (0, _styles.codeMarkSharedStyles)(), _styles.textColorStyles, (0, _styles.backgroundColorStyles)(), listsStyles, ruleStyles(), (0, _media.mediaStyles)(), (0, _layout.layoutStyles)(props.viewMode), _collab.telepointerStyle, _selection.gapCursorStyles, (0, _panel2.panelStyles)(), mentionsStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
     exposure: false
@@ -154,7 +154,7 @@ var contentStyles = function contentStyles(props) {
     exposure: false
   }) && vanillaSelectionStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
     exposure: false
-  }) ? emojiStyles : reactEmojiStyles, emojiStyles, _styles.tasksAndDecisionsStyles, _styles.gridStyles, linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _extension.extensionStyles, (0, _expand.expandStyles)(), _styles3.findReplaceStyles, _styles4.textHighlightStyle, _tasksAndDecisions.taskDecisionStyles, _status.statusStyles, (0, _styles.annotationSharedStyles)(), (0, _styles.smartCardStyles)(), (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? (0, _styles.getSmartCardSharedStyles)() : _styles.smartCardSharedStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true) ? _date.dateVanillaStyles : null, _date.dateStyles, (0, _styles.embedCardStyles)(), _styles.unsupportedStyles, _styles.resizerStyles, (0, _aiPanels.aiPanelStyles)(props.colorMode), fixBlockControlStylesSSR(), _styles.MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT, !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ? (0, _react2.css)(_templateObject14 || (_templateObject14 = (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);
+  }) ? emojiStyles : reactEmojiStyles, emojiStyles, _styles.tasksAndDecisionsStyles, _styles.gridStyles, linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _extension.extensionStyles, (0, _expand.expandStyles)(), _styles3.findReplaceStyles, _styles4.textHighlightStyle, _tasksAndDecisions.taskDecisionStyles, _status.statusStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true) ? _status.vanillaStatusStyles : null, (0, _styles.annotationSharedStyles)(), (0, _styles.smartCardStyles)(), (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? (0, _styles.getSmartCardSharedStyles)() : _styles.smartCardSharedStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true) ? _date.dateVanillaStyles : null, _date.dateStyles, (0, _styles.embedCardStyles)(), _styles.unsupportedStyles, _styles.resizerStyles, (0, _aiPanels.aiPanelStyles)(props.colorMode), fixBlockControlStylesSSR(), _styles.MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT, !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ? (0, _react2.css)(_templateObject14 || (_templateObject14 = (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 createEditorContentStyle = exports.createEditorContentStyle = function createEditorContentStyle(styles) {
   return /*#__PURE__*/_react.default.forwardRef(function (props, ref) {

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

@@ -4,13 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.statusStyles = void 0;
+exports.vanillaStatusStyles = exports.statusStyles = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _templateObject, _templateObject2, _templateObject3; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var _templateObject, _templateObject2, _templateObject3, _templateObject4; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
 var getVisualRefreshStatusStyles = function getVisualRefreshStatusStyles() {
   return (
@@ -20,6 +20,129 @@ var getVisualRefreshStatusStyles = function getVisualRefreshStatusStyles() {
     (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t&.", " .", " > span {\n\t\t\t\t\t", "\n\t\t\t\t}\n\t\t\t"])), _editorSharedStyles.akEditorSelectedNodeClassName, _styles.StatusSharedCssClassName.STATUS_LOZENGE, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]))
   );
 };
+var getStatusColors = function getStatusColors() {
+  return (0, _platformFeatureFlags.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'
+    }
+  }) : (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)"
+    }
+  });
+};
+var baseVanillaStatusStyles = (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-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/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var vanillaStatusStyles = exports.vanillaStatusStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t", "\n\t", "\n"])), baseVanillaStatusStyles, getStatusColors());
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var statusStyles = exports.statusStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t.", ",\n\t\t.", ",\n\t\t[data-layout-section] {\n\t\t.", " {\n\t\t\tmax-width: 100%;\n\t\t\tline-height: 0;\n\n\t\t\t> span {\n\t\t\t\twidth: 100%;\n\t\t\t}\n\t\t}\n\t}\n\t.", " {\n\t\t> span {\n\t\t\tcursor: pointer;\n\t\t\tline-height: 0; /* Prevent responsive layouts increasing height of container. */\n\t\t}\n\n\t\t", "\n\t}\n\n\t.danger {\n\t\t.", " > span {\n\t\t\tbackground-color: ", ";\n\t\t}\n\n\t\t.", ".", "\n\t\t\t.", "\n\t\t\t> span {\n\t\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\t}\n\t}\n"])), _styles.TableSharedCssClassName.TABLE_CELL_WRAPPER, _styles.TableSharedCssClassName.TABLE_HEADER_CELL_WRAPPER, _styles.StatusSharedCssClassName.STATUS_CONTAINER, _styles.StatusSharedCssClassName.STATUS_CONTAINER, getVisualRefreshStatusStyles(), _styles.StatusSharedCssClassName.STATUS_LOZENGE, _editorSharedStyles.akEditorDeleteBackgroundWithOpacity, _styles.StatusSharedCssClassName.STATUS_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.StatusSharedCssClassName.STATUS_LOZENGE, _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder);
+var statusStyles = exports.statusStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\t.", ",\n\t\t.", ",\n\t\t[data-layout-section] {\n\t\t.", " {\n\t\t\tmax-width: 100%;\n\t\t\tline-height: 0;\n\n\t\t\t> span {\n\t\t\t\twidth: 100%;\n\t\t\t}\n\t\t}\n\t}\n\t.", " {\n\t\t> span {\n\t\t\tcursor: pointer;\n\t\t\tline-height: 0; /* Prevent responsive layouts increasing height of container. */\n\t\t}\n\n\t\t", "\n\t}\n\n\t.danger {\n\t\t.", " > span {\n\t\t\tbackground-color: ", ";\n\t\t}\n\n\t\t.", ".", "\n\t\t\t.", "\n\t\t\t> span {\n\t\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\t}\n\t}\n"])), _styles.TableSharedCssClassName.TABLE_CELL_WRAPPER, _styles.TableSharedCssClassName.TABLE_HEADER_CELL_WRAPPER, _styles.StatusSharedCssClassName.STATUS_CONTAINER, _styles.StatusSharedCssClassName.STATUS_CONTAINER, getVisualRefreshStatusStyles(), _styles.StatusSharedCssClassName.STATUS_LOZENGE, _editorSharedStyles.akEditorDeleteBackgroundWithOpacity, _styles.StatusSharedCssClassName.STATUS_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.StatusSharedCssClassName.STATUS_LOZENGE, _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder);

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

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

@@ -35,7 +35,7 @@ import { extensionStyles } from './extension';
 import { layoutStyles } from './layout';
 import { mediaStyles } from './media';
 import { panelStyles } from './panel';
-import { statusStyles } from './status';
+import { statusStyles, vanillaStatusStyles } from './status';
 import { taskDecisionStyles } from './tasks-and-decisions';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const linkStyles = css`
@@ -435,6 +435,7 @@ const contentStyles = props => css`
   ${textHighlightStyle}
   ${taskDecisionStyles}
   ${statusStyles}
+  ${editorExperiment('platform_editor_vanilla_dom', true) ? vanillaStatusStyles : null}
   ${annotationSharedStyles()}
   ${smartCardStyles()}
   ${fg('platform-linking-visual-refresh-v1') ? getSmartCardSharedStyles() : smartCardSharedStyles}

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

@@ -3,7 +3,6 @@ import { css } from '@emotion/react';
 import { StatusSharedCssClassName, TableSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, akEditorSelectedBoldBoxShadow, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
-
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
 const getVisualRefreshStatusStyles = () =>
 // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
@@ -20,6 +19,130 @@ css`
 					${getSelectionStyles([SelectionStyle.BoxShadow])}
 				}
 			`;
+const getStatusColors = () => 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'
+  }
+}) : 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)"
+  }
+});
+const baseVanillaStatusStyles = css({
+  // 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/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const vanillaStatusStyles = css`
+	${baseVanillaStatusStyles}
+	${getStatusColors()}
+`;
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const statusStyles = css`

package/dist/es2019/version-wrapper.js

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

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

@@ -37,7 +37,7 @@ import { extensionStyles } from './extension';
 import { layoutStyles } from './layout';
 import { mediaStyles } from './media';
 import { panelStyles } from './panel';
-import { statusStyles } from './status';
+import { statusStyles, vanillaStatusStyles } from './status';
 import { taskDecisionStyles } from './tasks-and-decisions';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var linkStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\t", "\n\t}\n"])), linkSharedStyle);
@@ -138,7 +138,7 @@ export var fixBlockControlStylesSSR = function fixBlockControlStylesSSR() {
 // The breakpoint for small devices is 1266px, copied from getBreakpoint in platform/packages/editor/editor-common/src/ui/WidthProvider/index.tsx
 var akEditorBreakpointForSmallDevice = "1266px";
 var contentStyles = function contentStyles(props) {
-  return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: 52px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t.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: ", "px;\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t}\n\n\t", "\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\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\t", "\n\t", "\n\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t// For FullPage only when inside a table\n\t// Related code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\t// In the \"editorContentAreaContainerStyle\" function\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar,\n\t.", " {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n     is bigger than the others, new ADS icon does not have this issue\n  */\n\t", "\n"])), akEditorGutterPadding, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, akEditorCalculatedWideLayoutWidth, editorFontSize({
+  return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: 52px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t.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: ", "px;\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t}\n\n\t", "\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\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\t", "\n\t", "\n\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t// For FullPage only when inside a table\n\t// Related code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\t// In the \"editorContentAreaContainerStyle\" function\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar,\n\t.", " {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n     is bigger than the others, new ADS icon does not have this issue\n  */\n\t", "\n"])), akEditorGutterPadding, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, akEditorCalculatedWideLayoutWidth, editorFontSize({
     theme: props.theme
   }), whitespaceSharedStyles, paragraphSharedStyles(props.typographyTheme), listsSharedStyles, indentationSharedStyles, shadowSharedStyle, InlineNodeViewSharedStyles, fg('editor_request_to_edit_task') ? null : css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n\t\t\t\t.ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n\t\t\t\t\tpointer-events: none;\n\t\t\t\t\topacity: 0.7;\n\t\t\t\t}\n\t\t\t"]))), fg('platform_editor_hide_cursor_when_pm_hideselection') ? css(_templateObject12 || (_templateObject12 = _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(_templateObject13 || (_templateObject13 = _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, codeBlockStyles(), blocktypeStyles(props.typographyTheme), codeMarkSharedStyles(), textColorStyles, backgroundColorStyles(), listsStyles, ruleStyles(), mediaStyles(), layoutStyles(props.viewMode), telepointerStyle, gapCursorStyles, panelStyles(), mentionsStyles, editorExperiment('platform_editor_vanilla_dom', true, {
     exposure: false
@@ -146,7 +146,7 @@ var contentStyles = function contentStyles(props) {
     exposure: false
   }) && vanillaSelectionStyles, editorExperiment('platform_editor_vanilla_dom', true, {
     exposure: false
-  }) ? emojiStyles : reactEmojiStyles, emojiStyles, tasksAndDecisionsStyles, gridStyles, linkStyles, blockMarksSharedStyles, dateSharedStyle, extensionStyles, expandStyles(), findReplaceStyles, textHighlightStyle, taskDecisionStyles, statusStyles, annotationSharedStyles(), smartCardStyles(), fg('platform-linking-visual-refresh-v1') ? getSmartCardSharedStyles() : smartCardSharedStyles, editorExperiment('platform_editor_vanilla_dom', true) ? dateVanillaStyles : null, dateStyles, embedCardStyles(), unsupportedStyles, resizerStyles, aiPanelStyles(props.colorMode), fixBlockControlStylesSSR(), MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT, !fg('platform-visual-refresh-icons') ? css(_templateObject14 || (_templateObject14 = _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);
+  }) ? emojiStyles : reactEmojiStyles, emojiStyles, tasksAndDecisionsStyles, gridStyles, linkStyles, blockMarksSharedStyles, dateSharedStyle, extensionStyles, expandStyles(), findReplaceStyles, textHighlightStyle, taskDecisionStyles, statusStyles, editorExperiment('platform_editor_vanilla_dom', true) ? vanillaStatusStyles : null, annotationSharedStyles(), smartCardStyles(), fg('platform-linking-visual-refresh-v1') ? getSmartCardSharedStyles() : smartCardSharedStyles, editorExperiment('platform_editor_vanilla_dom', true) ? dateVanillaStyles : null, dateStyles, embedCardStyles(), unsupportedStyles, resizerStyles, aiPanelStyles(props.colorMode), fixBlockControlStylesSSR(), MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT, !fg('platform-visual-refresh-icons') ? css(_templateObject14 || (_templateObject14 = _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);
 };
 export var createEditorContentStyle = function createEditorContentStyle(styles) {
   return /*#__PURE__*/React.forwardRef(function (props, ref) {

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

@@ -1,11 +1,10 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { StatusSharedCssClassName, TableSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, akEditorSelectedBoldBoxShadow, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
-
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
 var getVisualRefreshStatusStyles = function getVisualRefreshStatusStyles() {
   return (
@@ -15,6 +14,129 @@ var getVisualRefreshStatusStyles = function getVisualRefreshStatusStyles() {
     css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t\t\t\t&.", " .", " > span {\n\t\t\t\t\t", "\n\t\t\t\t}\n\t\t\t"])), akEditorSelectedNodeClassName, StatusSharedCssClassName.STATUS_LOZENGE, getSelectionStyles([SelectionStyle.BoxShadow]))
   );
 };
+var getStatusColors = function getStatusColors() {
+  return 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'
+    }
+  }) : 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)"
+    }
+  });
+};
+var baseVanillaStatusStyles = css({
+  // 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/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export var vanillaStatusStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\t", "\n\t", "\n"])), baseVanillaStatusStyles, getStatusColors());
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var statusStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\t.", ",\n\t\t.", ",\n\t\t[data-layout-section] {\n\t\t.", " {\n\t\t\tmax-width: 100%;\n\t\t\tline-height: 0;\n\n\t\t\t> span {\n\t\t\t\twidth: 100%;\n\t\t\t}\n\t\t}\n\t}\n\t.", " {\n\t\t> span {\n\t\t\tcursor: pointer;\n\t\t\tline-height: 0; /* Prevent responsive layouts increasing height of container. */\n\t\t}\n\n\t\t", "\n\t}\n\n\t.danger {\n\t\t.", " > span {\n\t\t\tbackground-color: ", ";\n\t\t}\n\n\t\t.", ".", "\n\t\t\t.", "\n\t\t\t> span {\n\t\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\t}\n\t}\n"])), TableSharedCssClassName.TABLE_CELL_WRAPPER, TableSharedCssClassName.TABLE_HEADER_CELL_WRAPPER, StatusSharedCssClassName.STATUS_CONTAINER, StatusSharedCssClassName.STATUS_CONTAINER, getVisualRefreshStatusStyles(), StatusSharedCssClassName.STATUS_LOZENGE, akEditorDeleteBackgroundWithOpacity, StatusSharedCssClassName.STATUS_CONTAINER, akEditorSelectedNodeClassName, StatusSharedCssClassName.STATUS_LOZENGE, akEditorSelectedBorderSize, akEditorDeleteBorder);
+export var statusStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\t.", ",\n\t\t.", ",\n\t\t[data-layout-section] {\n\t\t.", " {\n\t\t\tmax-width: 100%;\n\t\t\tline-height: 0;\n\n\t\t\t> span {\n\t\t\t\twidth: 100%;\n\t\t\t}\n\t\t}\n\t}\n\t.", " {\n\t\t> span {\n\t\t\tcursor: pointer;\n\t\t\tline-height: 0; /* Prevent responsive layouts increasing height of container. */\n\t\t}\n\n\t\t", "\n\t}\n\n\t.danger {\n\t\t.", " > span {\n\t\t\tbackground-color: ", ";\n\t\t}\n\n\t\t.", ".", "\n\t\t\t.", "\n\t\t\t> span {\n\t\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\t}\n\t}\n"])), TableSharedCssClassName.TABLE_CELL_WRAPPER, TableSharedCssClassName.TABLE_HEADER_CELL_WRAPPER, StatusSharedCssClassName.STATUS_CONTAINER, StatusSharedCssClassName.STATUS_CONTAINER, getVisualRefreshStatusStyles(), StatusSharedCssClassName.STATUS_LOZENGE, akEditorDeleteBackgroundWithOpacity, StatusSharedCssClassName.STATUS_CONTAINER, akEditorSelectedNodeClassName, StatusSharedCssClassName.STATUS_LOZENGE, akEditorSelectedBorderSize, akEditorDeleteBorder);

package/dist/esm/version-wrapper.js

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

package/dist/types/ui/ContentStyles/status.d.ts

@@ -1 +1,2 @@
+export declare const vanillaStatusStyles: import("@emotion/react").SerializedStyles;
 export declare const statusStyles: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/ui/ContentStyles/status.d.ts

@@ -1 +1,2 @@
+export declare const vanillaStatusStyles: import("@emotion/react").SerializedStyles;
 export declare const statusStyles: import("@emotion/react").SerializedStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "205.1.9",
+	"version": "205.1.11",
 	"description": "A package contains Atlassian editor core functionality",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -88,7 +88,7 @@
 		"@af/visual-regression": "^1.3.0",
 		"@atlaskit/adf-utils": "^19.19.0",
 		"@atlaskit/analytics-listeners": "^9.0.0",
-		"@atlaskit/collab-provider": "^10.12.0",
+		"@atlaskit/collab-provider": "^10.13.0",
 		"@atlaskit/editor-plugin-annotation": "^2.2.0",
 		"@atlaskit/editor-plugin-card": "^5.4.0",
 		"@atlaskit/editor-plugin-list": "^4.2.0",
@@ -292,6 +292,10 @@
 			"type": "boolean",
 			"referenceOnly": true
 		},
+		"platform_editor_react18_phase2__media_single_jira": {
+			"type": "boolean",
+			"referenceOnly": true
+		},
 		"platform_editor_content_component_ignore_click": {
 			"type": "boolean"
 		},
@@ -603,6 +607,14 @@
 		"platform_editor_controls_sticky_controls": {
 			"type": "boolean",
 			"referenceOnly": true
+		},
+		"platform_editor_nested_tables_sticky_header_bug": {
+			"type": "boolean",
+			"referenceOnly": true
+		},
+		"platform_editor_number_column_sticky_header_broken": {
+			"type": "boolean",
+			"referenceOnly": true
 		}
 	},
 	"stricter": {