@atlaskit/editor-core 210.2.1 → 210.2.3

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-core
 
+## 210.2.3
+
+### Patch Changes
+
+- [`55a7e20e3fd4c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/55a7e20e3fd4c) -
+  [ux] ED-29050 add support for rendering custom primary toolbar components to new toolbar
+- [`4ef462fecb522`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4ef462fecb522) -
+  [ux] [ED-29003] Register loom component as a dropdown menu item in overflow menu
+- [`a2cd8c46a3e94`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a2cd8c46a3e94) -
+  EDITOR-1442 Bump adf-schema
+- Updated dependencies
+
+## 210.2.2
+
+### Patch Changes
+
+- [`d62dbf1995b2e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d62dbf1995b2e) -
+  [ux] ED-29080 Add danger styles for inline nodes and decision nodes when delete button in block
+  menu is hovered
+- Updated dependencies
+
 ## 210.2.1
 
 ### Patch Changes

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

@@ -785,4 +785,7 @@ function ReactEditorView(props) {
     editorAPI: editorAPI
   })) !== null && _props$render !== void 0 ? _props$render : editor : editor);
 }
+
+// Preserving exact type generated by TypeScript
+// eslint-disable-next-line @typescript-eslint/ban-types
 var _default = exports.default = (0, _reactIntlNext.injectIntl)(ReactEditorView);

package/dist/cjs/ui/Addon/click-area-helper.js

@@ -9,6 +9,7 @@ var _commands = require("@atlaskit/editor-common/commands");
 var _selection = require("@atlaskit/editor-common/selection");
 var _utils = require("@atlaskit/editor-common/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _contentComponentWrapper = require("./ClickAreaBlock/contentComponentWrapper");
 // we ignore all of the clicks made inside <div class="ak-editor-content-area" /> (but not clicks on the node itself)
 var insideContentArea = function insideContentArea(ref) {
@@ -46,7 +47,7 @@ var checkForModal = exports.checkForModal = function checkForModal(target) {
   return true;
 };
 var clickAreaClickHandler = exports.clickAreaClickHandler = function clickAreaClickHandler(view, event) {
-  var _view$hasFocus, _target$parentElement, _event$currentTarget;
+  var _view$hasFocus, _target$parentElement, _event$currentTarget, _event$currentTarget2;
   var isEditorFocused = !!(view !== null && view !== void 0 && (_view$hasFocus = view.hasFocus) !== null && _view$hasFocus !== void 0 && _view$hasFocus.call(view));
   if (!(event.target instanceof HTMLElement)) {
     return;
@@ -87,7 +88,8 @@ var clickAreaClickHandler = exports.clickAreaClickHandler = function clickAreaCl
   // This is a super workaround to find when events are coming from Confluence InlineComment modal
   // We don't own those components, so we can't change them
   var isEventComingFromInlineCommentPopup = Boolean((0, _utils.closestElement)(event.currentTarget, 'div[offset]')) || Boolean((0, _utils.closestElement)(target, 'div[offset]'));
-  var isButtonClicked = Boolean((0, _utils.closestElement)(event.currentTarget, 'button')) || Boolean((0, _utils.closestElement)(target, 'button')) || ((_event$currentTarget = event.currentTarget) === null || _event$currentTarget === void 0 ? void 0 : _event$currentTarget.nodeName) === 'BUTTON' || (target === null || target === void 0 ? void 0 : target.nodeName) === 'BUTTON';
+  var isAnchorButtonClicked = Boolean((0, _utils.closestElement)(event.currentTarget, 'a')) || Boolean((0, _utils.closestElement)(target, 'a')) || ((_event$currentTarget = event.currentTarget) === null || _event$currentTarget === void 0 ? void 0 : _event$currentTarget.nodeName) === 'A' || (target === null || target === void 0 ? void 0 : target.nodeName) === 'A';
+  var isButtonClicked = Boolean((0, _utils.closestElement)(event.currentTarget, 'button')) || Boolean((0, _utils.closestElement)(target, 'button')) || ((_event$currentTarget2 = event.currentTarget) === null || _event$currentTarget2 === void 0 ? void 0 : _event$currentTarget2.nodeName) === 'BUTTON' || (target === null || target === void 0 ? void 0 : target.nodeName) === 'BUTTON' || (0, _expValEquals.expValEquals)('platform_editor_toolbar_migrate_loom', 'isEnabled', true) && isAnchorButtonClicked;
   var isTargetInsideContentArea = Boolean(isTargetChildOfContentArea);
   var isBetweenContentAreaAndEditableContent = isTargetInsideContentArea && !isTargetInsideEditableArea;
 

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

@@ -189,7 +189,8 @@ var FullPageEditor = exports.FullPageEditor = function FullPageEditor(props) {
     popupsMountPoint: props.popupsMountPoint,
     popupsBoundariesElement: props.popupsBoundariesElement,
     popupsScrollableElement: props.popupsScrollableElement,
-    showKeyline: showKeyline
+    showKeyline: showKeyline,
+    customPrimaryToolbarComponents: props.customPrimaryToolbarComponents
   })) : (0, _react2.jsx)(_FullPageToolbar.FullPageToolbar, {
     appearance: props.appearance,
     editorAPI: editorAPI,

package/dist/cjs/ui/Appearance/FullPage/FullPageToolbarNext.compiled.css

@@ -1,7 +1,13 @@
 
 ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
 ._1rjc12x7{padding-block:var(--ds-space-075,6px)}
-._n7zl7r9e{border-bottom:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}._16qs9g9j{box-shadow:var(--ds-shadow-overflow,0 0 8px #091e4228,0 0 1px #091e421e)}
+._n7zl7r9e{border-bottom:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}._16jlkb7n{flex-grow:1}
+._16qs9g9j{box-shadow:var(--ds-shadow-overflow,0 0 8px #091e4228,0 0 1px #091e421e)}
 ._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
+._1bahesu3{justify-content:flex-end}
+._1e0c1txw{display:flex}
+._1ul91ns9{min-width:-moz-fit-content;min-width:fit-content}
 ._2hwxpxbi{margin-right:var(--ds-space-200,1pc)}
+._4cvr1h6o{align-items:center}
+._4t3izwfg{height:2pc}
 ._otyrpxbi{margin-bottom:var(--ds-space-200,1pc)}

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

@@ -13,6 +13,7 @@ var _reactIntlNext = require("react-intl-next");
 var _contextPanel = require("@atlaskit/editor-common/context-panel");
 var _toolbar = require("@atlaskit/editor-common/toolbar");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _toolbar2 = require("../../../utils/toolbar");
 var _Toolbar = require("../../Toolbar/Toolbar");
@@ -20,8 +21,14 @@ var _ToolbarPortal = require("../../Toolbar/ToolbarPortal");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var styles = {
   mainToolbarIconBefore: "_19pkpxbi _2hwxpxbi _otyrpxbi",
+  mainToolbarIconBeforeNew: "_4cvr1h6o _1e0c1txw",
   mainToolbarWrapper: "_1rjc12x7 _18zrutpp _n7zl7r9e",
-  mainToolbarWithKeyline: "_16qs9g9j"
+  mainToolbarNew: "_1e0c1txw _4t3izwfg",
+  mainToolbarWithKeyline: "_16qs9g9j",
+  customToolbarWrapperStyle: "_4cvr1h6o _1e0c1txw",
+  firstChildWrapperOneLine: "_1e0c1txw _16jlkb7n",
+  secondChildWrapperOneLine: "_1e0c1txw _1ul91ns9 _4cvr1h6o",
+  beforePrimaryToolbarComponents: "_1e0c1txw _16jlkb7n _1bahesu3 _4cvr1h6o"
 };
 var MainToolbarWrapper = function MainToolbarWrapper(_ref) {
   var children = _ref.children,
@@ -29,17 +36,32 @@ var MainToolbarWrapper = function MainToolbarWrapper(_ref) {
     showKeyline = _ref.showKeyline;
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-testid": testId,
-    className: (0, _runtime.ax)([styles.mainToolbarWrapper, showKeyline && styles.mainToolbarWithKeyline])
+    className: (0, _runtime.ax)([styles.mainToolbarWrapper, showKeyline && styles.mainToolbarWithKeyline, (0, _expValEquals.expValEquals)('platform_editor_toolbar_support_custom_components', 'isEnabled', true) && styles.mainToolbarNew])
   }, children);
 };
-var FullPageToolbarNext = exports.FullPageToolbarNext = function FullPageToolbarNext(_ref2) {
+var FirstChildWrapper = function FirstChildWrapper(_ref2) {
+  var children = _ref2.children;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": "main-toolbar-first-child-wrapper",
+    className: (0, _runtime.ax)([styles.firstChildWrapperOneLine])
+  }, children);
+};
+var SecondChildWrapper = function SecondChildWrapper(_ref3) {
+  var children = _ref3.children;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": "main-toolbar-second-child-wrapper",
+    className: (0, _runtime.ax)([styles.secondChildWrapperOneLine])
+  }, children);
+};
+var FullPageToolbarNext = exports.FullPageToolbarNext = function FullPageToolbarNext(_ref4) {
   var _editorAPI$toolbar, _useToolbarPortal;
-  var editorAPI = _ref2.editorAPI,
-    beforeIcon = _ref2.beforeIcon,
-    toolbarDockingPosition = _ref2.toolbarDockingPosition,
-    editorView = _ref2.editorView,
-    popupsMountPoint = _ref2.popupsMountPoint,
-    showKeyline = _ref2.showKeyline;
+  var editorAPI = _ref4.editorAPI,
+    beforeIcon = _ref4.beforeIcon,
+    toolbarDockingPosition = _ref4.toolbarDockingPosition,
+    editorView = _ref4.editorView,
+    popupsMountPoint = _ref4.popupsMountPoint,
+    showKeyline = _ref4.showKeyline,
+    customPrimaryToolbarComponents = _ref4.customPrimaryToolbarComponents;
   var components = editorAPI === null || editorAPI === void 0 || (_editorAPI$toolbar = editorAPI.toolbar) === null || _editorAPI$toolbar === void 0 ? void 0 : _editorAPI$toolbar.actions.getComponents();
   var intl = (0, _reactIntlNext.useIntl)();
   var toolbar = components === null || components === void 0 ? void 0 : components.find(function (component) {
@@ -48,10 +70,10 @@ var FullPageToolbarNext = exports.FullPageToolbarNext = function FullPageToolbar
 
   // When a toolbar portal context is provided, render the  toolbar inside a portal.
   // Otherwise fall back to a fragment just to avoid forking rendering logic.
-  var _ref3 = (_useToolbarPortal = (0, _ToolbarPortal.useToolbarPortal)()) !== null && _useToolbarPortal !== void 0 ? _useToolbarPortal : {
+  var _ref5 = (_useToolbarPortal = (0, _ToolbarPortal.useToolbarPortal)()) !== null && _useToolbarPortal !== void 0 ? _useToolbarPortal : {
       Portal: _react.default.Fragment
     },
-    ToolbarPortal = _ref3.Portal;
+    ToolbarPortal = _ref5.Portal;
   var hasToolbarPortal = ToolbarPortal !== _react.default.Fragment;
   var mountPoint = hasToolbarPortal ? undefined : popupsMountPoint;
   var isShortcutToFocusToolbarRaw = function isShortcutToFocusToolbarRaw(event) {
@@ -75,8 +97,8 @@ var FullPageToolbarNext = exports.FullPageToolbarNext = function FullPageToolbar
     event.stopPropagation();
   }, [editorView]);
   var handleEscape = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_toolbar_rerender_optimization_exp', 'isEnabled', true) ? handleEscapeMemoized : handleEscapeRaw;
-  return /*#__PURE__*/_react.default.createElement(_contextPanel.ContextPanelConsumer, null, function (_ref4) {
-    var ContextPanelWidth = _ref4.width;
+  return /*#__PURE__*/_react.default.createElement(_contextPanel.ContextPanelConsumer, null, function (_ref6) {
+    var ContextPanelWidth = _ref6.width;
     return /*#__PURE__*/_react.default.createElement(_uiMenu.ToolbarArrowKeyNavigationProvider, {
       editorView: editorView,
       childComponentSelector: "[data-testid='ak-editor-main-toolbar']",
@@ -87,8 +109,20 @@ var FullPageToolbarNext = exports.FullPageToolbarNext = function FullPageToolbar
       testId: "ak-editor-main-toolbar",
       showKeyline: showKeyline || ContextPanelWidth > 0
     }, beforeIcon && /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _runtime.ax)([styles.mainToolbarIconBefore])
-    }, beforeIcon), toolbarDockingPosition !== 'none' && components && (0, _toolbar2.isToolbar)(toolbar) && /*#__PURE__*/_react.default.createElement(_Toolbar.ToolbarNext, {
+      className: (0, _runtime.ax)([styles.mainToolbarIconBefore, (0, _expValEquals.expValEquals)('platform_editor_toolbar_support_custom_components', 'isEnabled', true) && styles.mainToolbarIconBeforeNew])
+    }, beforeIcon), (0, _expValEquals.expValEquals)('platform_editor_toolbar_support_custom_components', 'isEnabled', true) ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(FirstChildWrapper, null, toolbarDockingPosition !== 'none' && components && (0, _toolbar2.isToolbar)(toolbar) && /*#__PURE__*/_react.default.createElement(_Toolbar.ToolbarNext, {
+      toolbar: toolbar,
+      components: components,
+      editorView: editorView,
+      editorAPI: editorAPI,
+      popupsMountPoint: mountPoint,
+      editorAppearance: "full-page"
+    })), /*#__PURE__*/_react.default.createElement(SecondChildWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _runtime.ax)([styles.customToolbarWrapperStyle])
+    }, !!customPrimaryToolbarComponents && 'before' in customPrimaryToolbarComponents && /*#__PURE__*/_react.default.createElement("div", {
+      "data-testid": 'before-primary-toolbar-components-plugin',
+      className: (0, _runtime.ax)([styles.beforePrimaryToolbarComponents])
+    }, customPrimaryToolbarComponents.before), !!customPrimaryToolbarComponents && 'after' in customPrimaryToolbarComponents ? customPrimaryToolbarComponents.after : customPrimaryToolbarComponents))) : toolbarDockingPosition !== 'none' && components && (0, _toolbar2.isToolbar)(toolbar) && /*#__PURE__*/_react.default.createElement(_Toolbar.ToolbarNext, {
       toolbar: toolbar,
       components: components,
       editorView: editorView,

package/dist/cjs/ui/ContentStyles/ai-panels.js

@@ -84,8 +84,8 @@ var prismBorderStyles = function prismBorderStyles(colorMode, hover) {
     background: "conic-gradient(\n\t\t\t\t\t\t\t\tfrom var(--panel-gradient-angle, 270deg),\n\t\t\t\t\t\t\t\t".concat(aiPrismColor['prism.border.step.1'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], " 0%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.2'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], " 20%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.3'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], " 50%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.4'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], " 56%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.1'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], " 100%\n\t\t\t\t\t\t\t)")
   }));
 };
-
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Ignored via go/DSP-18766
-var aiPanelStyles = exports.aiPanelStyles = function aiPanelStyles(colorMode) {
+var aiPanelStyles = exports.aiPanelStyles = function aiPanelStyles(colorMode
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+) {
   return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t@property --panel-gradient-angle {\n\t\tsyntax: '<angle>';\n\t\tinitial-value: 270deg;\n\t\tinherits: false;\n\t}\n\n\tdiv[extensionType='com.atlassian.ai-blocks'] {\n\t\t/* This hides the label for the extension */\n\t\t.extension-label {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\t/* This styles the ai panel correctly when its just sitting on the page and there\n\t\tis no user interaction */\n\t\t.extension-container {\n\t\t\tposition: relative;\n\t\t\tbox-shadow: none;\n\t\t\toverflow: unset;\n\t\t\tbackground-color: ", " !important;\n\t\t\t&::before,\n\t\t\t&::after {\n\t\t\t\t", "\n\t\t\t}\n\t\t\t&.with-hover-border {\n\t\t\t\t&::before,\n\t\t\t\t&::after {\n\t\t\t\t\t", "\n\t\t\t\t}\n\t\t\t}\n\t\t\t& .with-margin-styles {\n\t\t\t\tbackground-color: ", " !important;\n\t\t\t\tborder-radius: ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t/* This styles the ai panel correctly when its streaming */\n\tdiv[extensionType='com.atlassian.ai-blocks']:has(.streaming) {\n\t\t.extension-container {\n\t\t\tbox-shadow: none;\n\t\t\toverflow: unset;\n\t\t\t", "\n\t\t\t&::before,\n\t\t\t&::after {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t}\n\n\t/* This styles the ai panel correctly when a user is hovering over the delete button in the floating panel */\n\tdiv[extensionType='com.atlassian.ai-blocks'].danger {\n\t\t.extension-container {\n\t\t\tbox-shadow: 0 0 0 1px ", ";\n\t\t}\n\t}\n\n\t/* This removes the margin from the action list when inside an ai panel */\n\tdiv[extensiontype='com.atlassian.ai-blocks'][extensionkey='ai-action-items-block:aiActionItemsBodiedExtension'] {\n\t\tdiv[data-node-type='actionList'] {\n\t\t\tmargin: 0 !important;\n\t\t}\n\t}\n"])), "var(--ds-surface, #FFFFFF)", prismBorderStyles(colorMode), prismBorderStyles(colorMode, true), "var(--ds-surface, #FFFFFF)", "var(--ds-border-radius-100, 3px)", prismBorderAnimationStyles, prismBorderStyles(colorMode), "var(--ds-border-danger, #E2483D)");
 };

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

@@ -76,5 +76,5 @@ var layoutResponsiveStyles = function layoutResponsiveStyles(viewMode) {
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
 var layoutStyles = exports.layoutStyles = function layoutStyles(viewMode) {
-  return (0, _react.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\t", "\n\t\t[data-layout-section] {\n\t\t\t/* Ignored via go/ees007\n\t\t\tTODO: Migrate away from gridSize\n\t\t\tRecommendation: Replace directly with 7px */\n\t\t\tmargin: ", " -", "px 0;\n\t\t\ttransition: border-color 0.3s ", ";\n\t\t\tcursor: ", ";\n\n\t\t\t/* Inner cursor located 26px from left */\n\t\t\t[data-layout-column] {\n\t\t\t\tflex: 1;\n\t\t\t\tposition: relative;\n\n\t\t\t\tmin-width: 0;\n\t\t\t\t/* disable 4 borders when in view mode and advanced layouts is on */\n\t\t\t\tborder: ", "px\n\t\t\t\t\tsolid ", ";\n\t\t\t\tborder-radius: 4px;\n\t\t\t\tpadding: ", "px\n\t\t\t\t\t", "px;\n\t\t\t\tbox-sizing: border-box;\n\n\t\t\t\t> div {\n\t\t\t\t\t", "\n\n\t\t\t\t\t> .embedCardView-content-wrap:first-of-type .rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .mediaSingleView-content-wrap:first-of-type .rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor.-right:first-child\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> style:first-child\n\t\t\t\t\t\t+ .ProseMirror-gapcursor.-right\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> .ProseMirror-gapcursor.-right:first-of-type\n\t\t\t\t\t\t+ .embedCardView-content-wrap\n\t\t\t\t\t\t.rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor:first-child\n\t\t\t\t\t\t+ span\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> style:first-child\n\t\t\t\t\t\t+ .ProseMirror-gapcursor\n\t\t\t\t\t\t+ span\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t/* Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down\n             and shrinking layout's node selectable area (leniency margin) */\n\t\t\t\t\t> [data-node-type='decisionList'] {\n\t\t\t\t\t\tli:first-of-type [data-decision-wrapper] {\n\t\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t/* Make the 'content' fill the entire height of the layout column to allow click\n           handler of layout section nodeview to target only data-layout-column */\n\t\t\t\t[data-layout-content] {\n\t\t\t\t\theight: 100%;\n\t\t\t\t\tcursor: text;\n\t\t\t\t\t.mediaGroupView-content-wrap {\n\t\t\t\t\t\tclear: both;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t", "\n\t\t}\n\n\t\t/* styles to support borders for layout */\n\t\t[data-layout-section],\n\t\t.layoutSectionView-content-wrap {\n\t\t\t", "\n\t\t}\n\t}\n\n\t", "\n\n\t/* hide separator when element is dragging on top of a layout column */\n\t[data-blocks-drop-target-container] ~ [data-layout-column] > [data-layout-content]::before {\n\t\tdisplay: none;\n\t}\n\n\t.fabric-editor--full-width-mode .ProseMirror {\n\t\t[data-layout-section] {\n\t\t\t.", " {\n\t\t\t\tmargin: 0 ", "px;\n\t\t\t}\n\t\t}\n\t}\n\n\t", "\n"])), layoutSectionStyles(), "var(--ds-space-100, 8px)", _editorSharedStyles.akLayoutGutterOffset + ((0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? AK_NESTED_DND_GUTTER_OFFSET : 0), _editorSharedStyles.akEditorSwoopCubicBezier, viewMode === 'view' ? 'default' : 'pointer', viewMode === 'view' || (0, _experiments.editorExperiment)('advanced_layouts', true) ? 0 : _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border, #091E4224)", _styles.LAYOUT_COLUMN_PADDING, _styles.LAYOUT_COLUMN_PADDING + ((0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? 8 : 0), firstNodeWithNotMarginTop(), layoutColumnStyles(), (0, _experiments.editorExperiment)('advanced_layouts', true) ? layoutWithSeparatorBorderStyles(viewMode) : layoutBorderStyles(viewMode), (0, _experiments.editorExperiment)('advanced_layouts', true) && layoutResponsiveStyles(viewMode), _types.TableCssClassName.TABLE_CONTAINER, "var(--ds-space-025, 2px)", (0, _experiments.editorExperiment)('advanced_layouts', false) && (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') && ".ak-editor-content-area.appearance-full-page .ProseMirror [data-layout-section] {\n\t\t\t\tmargin: ".concat("var(--ds-space-100, 8px)", " -", _editorSharedStyles.akLayoutGutterOffset + 8, "px 0;\n\t\t\t\t}"));
+  return (0, _react.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\t", "\n\t\t[data-layout-section] {\n\t\t\t/* Ignored via go/ees007\n\t\t\tTODO: Migrate away from gridSize\n\t\t\tRecommendation: Replace directly with 7px */\n\t\t\tmargin: ", " -", "px\n\t\t\t\t0;\n\t\t\ttransition: border-color 0.3s ", ";\n\t\t\tcursor: ", ";\n\n\t\t\t/* Inner cursor located 26px from left */\n\t\t\t[data-layout-column] {\n\t\t\t\tflex: 1;\n\t\t\t\tposition: relative;\n\n\t\t\t\tmin-width: 0;\n\t\t\t\t/* disable 4 borders when in view mode and advanced layouts is on */\n\t\t\t\tborder: ", "px\n\t\t\t\t\tsolid ", ";\n\t\t\t\tborder-radius: 4px;\n\t\t\t\tpadding: ", "px\n\t\t\t\t\t", "px;\n\t\t\t\tbox-sizing: border-box;\n\n\t\t\t\t> div {\n\t\t\t\t\t", "\n\n\t\t\t\t\t> .embedCardView-content-wrap:first-of-type .rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .mediaSingleView-content-wrap:first-of-type .rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor.-right:first-child\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> style:first-child\n\t\t\t\t\t\t+ .ProseMirror-gapcursor.-right\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> .ProseMirror-gapcursor.-right:first-of-type\n\t\t\t\t\t\t+ .embedCardView-content-wrap\n\t\t\t\t\t\t.rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor:first-child\n\t\t\t\t\t\t+ span\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> style:first-child\n\t\t\t\t\t\t+ .ProseMirror-gapcursor\n\t\t\t\t\t\t+ span\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t/* Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down\n             and shrinking layout's node selectable area (leniency margin) */\n\t\t\t\t\t> [data-node-type='decisionList'] {\n\t\t\t\t\t\tli:first-of-type [data-decision-wrapper] {\n\t\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t/* Make the 'content' fill the entire height of the layout column to allow click\n           handler of layout section nodeview to target only data-layout-column */\n\t\t\t\t[data-layout-content] {\n\t\t\t\t\theight: 100%;\n\t\t\t\t\tcursor: text;\n\t\t\t\t\t.mediaGroupView-content-wrap {\n\t\t\t\t\t\tclear: both;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t", "\n\t\t}\n\n\t\t/* styles to support borders for layout */\n\t\t[data-layout-section],\n\t\t.layoutSectionView-content-wrap {\n\t\t\t", "\n\t\t}\n\t}\n\n\t", "\n\n\t/* hide separator when element is dragging on top of a layout column */\n\t[data-blocks-drop-target-container] ~ [data-layout-column] > [data-layout-content]::before {\n\t\tdisplay: none;\n\t}\n\n\t.fabric-editor--full-width-mode .ProseMirror {\n\t\t[data-layout-section] {\n\t\t\t.", " {\n\t\t\t\tmargin: 0 ", "px;\n\t\t\t}\n\t\t}\n\t}\n\n\t", "\n"])), layoutSectionStyles(), "var(--ds-space-100, 8px)", _editorSharedStyles.akLayoutGutterOffset + ((0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? AK_NESTED_DND_GUTTER_OFFSET : 0), _editorSharedStyles.akEditorSwoopCubicBezier, viewMode === 'view' ? 'default' : 'pointer', viewMode === 'view' || (0, _experiments.editorExperiment)('advanced_layouts', true) ? 0 : _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border, #091E4224)", _styles.LAYOUT_COLUMN_PADDING, _styles.LAYOUT_COLUMN_PADDING + ((0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? 8 : 0), firstNodeWithNotMarginTop(), layoutColumnStyles(), (0, _experiments.editorExperiment)('advanced_layouts', true) ? layoutWithSeparatorBorderStyles(viewMode) : layoutBorderStyles(viewMode), (0, _experiments.editorExperiment)('advanced_layouts', true) && layoutResponsiveStyles(viewMode), _types.TableCssClassName.TABLE_CONTAINER, "var(--ds-space-025, 2px)", (0, _experiments.editorExperiment)('advanced_layouts', false) && (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') && ".ak-editor-content-area.appearance-full-page .ProseMirror [data-layout-section] {\n\t\t\t\tmargin: ".concat("var(--ds-space-100, 8px)", " -", _editorSharedStyles.akLayoutGutterOffset + 8, "px 0;\n\t\t\t\t}"));
 };

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

@@ -13,6 +13,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _expVal = require("@atlaskit/tmp-editor-statsig/expVal");
 var _tokens = require("@atlaskit/tokens");
 var _aiPanel = require("./styles/aiPanel");
 var _annotationStyles = require("./styles/annotationStyles");
@@ -239,7 +240,9 @@ var EditorContentContainer = /*#__PURE__*/_react.default.forwardRef(function (pr
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     _statusStyles.statusStylesMixin_without_fg_platform_component_visual_refresh,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    _annotationStyles.annotationStyles, (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_find_and_replace_improvements', 'isEnabled', true) ?
+    _annotationStyles.annotationStyles, (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) ?
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _smartCardStyles.smartCardStylesWithSearchMatchAndBlockMenuDangerStyles :
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     _smartCardStyles.smartCardStylesWithSearchMatch :
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
@@ -365,7 +368,23 @@ var EditorContentContainer = /*#__PURE__*/_react.default.forwardRef(function (pr
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     (0, _platformFeatureFlags.fg)('confluence_floating_toolbar_animation') && _selectionToolbarStyles.selectionToolbarAnimationStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    (0, _platformFeatureFlags.fg)('platform_editor_vanilla_codebidi_warning') && _codeBidiWarningStyles.codeBidiWarningStyles],
+    (0, _platformFeatureFlags.fg)('platform_editor_vanilla_codebidi_warning') && _codeBidiWarningStyles.codeBidiWarningStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    (0, _expVal.expValNoExposure)('platform_editor_block_menu', 'isEnabled', true) && [
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _dateStyles.dangerDateStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _emoji.emojiDangerStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _mentions.mentionDangerStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _tasksAndDecisionsStyles.decisionDangerStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _statusStyles.statusDangerStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _rule.dangerRuleStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _mediaStyles.mediaDangerStyles]],
     "data-editor-scroll-container": isScrollable ? 'true' : undefined,
     "data-testid": "editor-content-container"
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop

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

@@ -8,7 +8,7 @@ exports.annotationStyles = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _styles = require("@atlaskit/editor-common/styles");
-// eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
 var annotationStyles = exports.annotationStyles = (0, _react.css)({

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.blockMarksStyles = void 0;
 var _react = require("@emotion/react");
-// eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
 var blockMarksStyles = exports.blockMarksStyles = (0, _react.css)({

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

@@ -9,7 +9,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = require("@emotion/react");
 var _overflowShadowStyles = require("./overflowShadowStyles");
 var _selectionStyles = require("./selectionStyles");
-// eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
 
 var CodeBlockSharedCssClassName = exports.CodeBlockSharedCssClassName = {
   CODEBLOCK_CONTAINER: 'code-block',

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.codeMarkStyles = void 0;
 var _react = require("@emotion/react");
-// eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
 var codeMarkStyles = exports.codeMarkStyles = (0, _react.css)({

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

@@ -4,11 +4,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.dateVanillaStyles = exports.dateStyles = exports.DateSharedCssClassName = void 0;
+exports.dateVanillaStyles = exports.dateStyles = exports.dangerDateStyles = exports.DateSharedCssClassName = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _selectionStyles = require("./selectionStyles");
-// eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
 
 var DateSharedCssClassName = exports.DateSharedCssClassName = {
   DATE_WRAPPER: "date-lozenger-container",
@@ -48,4 +48,9 @@ _selectionStyles.boxShadowSelectionStyles,
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
 _selectionStyles.hideNativeBrowserTextSelectionStyles]))), '.danger', (0, _defineProperty2.default)({}, ".".concat(DateSharedCssClassName.DATE_CONTAINER, ".ak-editor-selected-node .").concat(DateSharedCssClassName.DATE_WRAPPER, " > span"), {
   boxShadow: "0 0 0 1px ".concat("var(--ds-border-danger, #E2483D)")
-})));
+})));
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var dangerDateStyles = exports.dangerDateStyles = (0, _react.css)((0, _defineProperty2.default)({}, ".".concat(DateSharedCssClassName.DATE_CONTAINER, ".ak-editor-selected-node.danger .").concat(DateSharedCssClassName.DATE_WRAPPER, " > span"),
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+[_selectionStyles.dangerBorderStyles]));

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.embedCardStyles = void 0;
 var _react = require("@emotion/react");
-// eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var embedCardStyles = exports.embedCardStyles = (0, _react.css)({

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.emojiStylesWithSelectorFixes = exports.emojiStyles = void 0;
+exports.emojiStylesWithSelectorFixes = exports.emojiStyles = exports.emojiDangerStyles = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _emoji = require("@atlaskit/editor-common/emoji");
@@ -57,4 +57,9 @@ _selectionStyles.blanketSelectionStyles,
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
 _selectionStyles.boxShadowSelectionStyles,
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-_selectionStyles.hideNativeBrowserTextSelectionStyles])));
+_selectionStyles.hideNativeBrowserTextSelectionStyles])));
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var emojiDangerStyles = exports.emojiDangerStyles = (0, _react.css)((0, _defineProperty2.default)({}, ".ProseMirror .".concat(_editorSharedStyles.akEditorSelectedNodeClassName, ".danger"), (0, _defineProperty2.default)({}, ".".concat(_emoji.EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE), [
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+[_selectionStyles.dangerBorderStyles, _selectionStyles.dangerBackgroundStyles]])));

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

@@ -10,7 +10,7 @@ var _react = require("@emotion/react");
 var _panel = require("@atlaskit/editor-common/panel");
 var _styles = require("@atlaskit/editor-common/styles");
 var _codeBlockStyles = require("./codeBlockStyles");
-// eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
 var firstBlockNodeStyles = exports.firstBlockNodeStyles = (0, _react.css)({

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.gridStyles = void 0;
 var _react = require("@emotion/react");
-// eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var gridStyles = exports.gridStyles = (0, _react.css)({

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.indentationStyles = void 0;
 var _react = require("@emotion/react");
-// eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var indentationStyles = exports.indentationStyles = (0, _react.css)({

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

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.listsStylesSafariFix = exports.listsStyles = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
-// eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
 
 // copied from packages/editor/editor-shared-styles/src/consts/consts.ts
 var akEditorLineHeight = 1.714;

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

@@ -4,14 +4,15 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.mediaStyles = exports.mediaGroupStyles = exports.mediaAlignmentStyles = void 0;
+exports.mediaStyles = exports.mediaGroupStyles = exports.mediaDangerStyles = exports.mediaAlignmentStyles = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _mediaInline = require("@atlaskit/editor-common/media-inline");
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _mediaCard = require("@atlaskit/media-card");
-var _ProseMirror, _css; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+var _selectionStyles = require("./selectionStyles");
+var _ProseMirror, _css; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
 var wrappedMediaBreakoutPoint = 410;
 
 /**
@@ -229,6 +230,14 @@ var mediaStyles = exports.mediaStyles = (0, _react.css)((_css = {
   boxShadow: 'none'
 })));
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var mediaDangerStyles = exports.mediaDangerStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': (0, _defineProperty2.default)({}, ".mediaInlineView-content-wrap.".concat(_editorSharedStyles.akEditorSelectedNodeClassName, ".danger .").concat(_mediaInline.INLINE_IMAGE_WRAPPER_CLASS_NAME),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+  [_selectionStyles.dangerBorderStyles])
+});
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
 var mediaGroupStyles = exports.mediaGroupStyles = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.mentionsStylesMixin_platform_editor_centre_mention_padding = exports.mentionsStyles = exports.mentionsSelectionStylesWithSearchMatch = exports.mentionsSelectionStyles = exports.mentionNodeStyles = void 0;
+exports.mentionsStylesMixin_platform_editor_centre_mention_padding = exports.mentionsStyles = exports.mentionsSelectionStylesWithSearchMatch = exports.mentionsSelectionStyles = exports.mentionNodeStyles = exports.mentionDangerStyles = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _mention = require("@atlaskit/editor-common/mention");
@@ -149,4 +149,16 @@ var mentionsSelectionStylesWithSearchMatch = exports.mentionsSelectionStylesWith
   [
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
   _selectionStyles.boxShadowSelectionStyles]
+}));
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var mentionDangerStyles = exports.mentionDangerStyles = (0, _react.css)((0, _defineProperty2.default)({}, ".".concat(_editorSharedStyles.akEditorSelectedNodeClassName, ":not(.search-match-block).danger"), {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '> .editor-mention-primitive, > .editor-mention-primitive.mention-self, > .editor-mention-primitive.mention-restricted':
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values,
+  [
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+  _selectionStyles.dangerBorderStyles,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+  _selectionStyles.dangerBackgroundStyles]
 }));

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.overflowShadowStyles = void 0;
 var _react = require("@emotion/react");
-// eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
 var overflowShadowStyles = exports.overflowShadowStyles = (0, _react.css)({

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.paragraphStylesUGCRefreshed = exports.paragraphStylesUGCModernized = exports.paragraphStylesOld = void 0;
 var _react = require("@emotion/react");
-// eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
 
 var blockNodesVerticalMargin = '0.75rem';
 

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

@@ -8,7 +8,7 @@ exports.resizerStyles = exports.resizerItemClassName = exports.resizerHoverZoneC
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-// eslint-disable-line
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
 
 var resizerItemClassName = exports.resizerItemClassName = 'resizer-item';
 var resizerHoverZoneClassName = exports.resizerHoverZoneClassName = 'resizer-hover-zone';

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ruleStyles = void 0;
+exports.ruleStyles = exports.dangerRuleStyles = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
@@ -26,4 +26,9 @@ var ruleStyles = exports.ruleStyles = (0, _react.css)((0, _defineProperty2.defau
 }, ".ProseMirror hr.".concat(_editorSharedStyles.akEditorSelectedNodeClassName), {
   outline: 'none',
   backgroundColor: "var(--ds-border-selected, #0C66E4)"
+}));
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var dangerRuleStyles = exports.dangerRuleStyles = (0, _react.css)((0, _defineProperty2.default)({}, ".ProseMirror hr.".concat(_editorSharedStyles.akEditorSelectedNodeClassName, ".danger"), {
+  backgroundColor: "var(--ds-border-danger, #E2483D)"
 }));

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

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.selectedNodeStyles = exports.hideSelectionStyles = exports.hideNativeBrowserTextSelectionStyles = exports.hideCursorWhenHideSelectionStyles = exports.boxShadowSelectionStyles = exports.borderSelectionStyles = exports.blanketSelectionStyles = exports.backgroundSelectionStyles = void 0;
+exports.selectedNodeStyles = exports.hideSelectionStyles = exports.hideNativeBrowserTextSelectionStyles = exports.hideCursorWhenHideSelectionStyles = exports.dangerBorderStyles = exports.dangerBackgroundStyles = exports.boxShadowSelectionStyles = exports.borderSelectionStyles = exports.blanketSelectionStyles = exports.backgroundSelectionStyles = void 0;
 var _react = require("@emotion/react");
-// eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
 
 // TODO: ED-28075 - refactor selection styles to unblock Compiled CSS migration
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
@@ -115,4 +115,14 @@ var selectedNodeStyles = exports.selectedNodeStyles = (0, _react.css)({
   '.ProseMirror-selectednode:empty': {
     outline: "2px solid ".concat("var(--ds-border-focused, #388BFF)")
   }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var dangerBorderStyles = exports.dangerBorderStyles = (0, _react.css)({
+  boxShadow: "0 0 0 1px ".concat("var(--ds-border-danger, #E2483D)")
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var dangerBackgroundStyles = exports.dangerBackgroundStyles = (0, _react.css)({
+  backgroundColor: "var(--ds-background-danger, #FFECEB)"
 });

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

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.shadowStyles = exports.shadowObserverClassNames = exports.shadowClassNames = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
-// eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
 
 var shadowClassNames = exports.shadowClassNames = {
   RIGHT_SHADOW: 'right-shadow',