@atlaskit/editor-core 209.6.5 → 209.8.0

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @atlaskit/editor-core
 
+## 209.8.0
+
+### Minor Changes
+
+- [#199487](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/199487)
+  [`54098ba4cc83c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/54098ba4cc83c) -
+  Add support to render primary toolbar for both full page editor and comment editor using new
+  toolbar components. Includes rewrites of full page toolbar which removes JS width calculation
+
+### Patch Changes
+
+- [#199353](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/199353)
+  [`f2d4ca35574b8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f2d4ca35574b8) -
+  Internal changes to how border radius values are applied. No visual change.
+- Updated dependencies
+
+## 209.7.0
+
+### Minor Changes
+
+- [`4903edc4a60f8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4903edc4a60f8) -
+  [ux] Adds a configuration for media insert to allow for smart value input
+- [`13a1ad07bb39e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/13a1ad07bb39e) -
+  [ux] EDITOR-1146 | EDITOR-1176 Introduce `blockTaskItem` node to Renderer and Editor
+  `editor-plugin-tasks-and-decisions` which adopts the same code and functionality as the regular
+  `taskItem` except that it allows block content such as extensions to be inserted. This is to
+  facilitate TinyMCE migration which requires usage of the Legacy Content Extension.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 209.6.5
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -57,6 +57,12 @@
 		{
 			"path": "../../editor-shared-styles/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../editor-toolbar/afm-cc/tsconfig.json"
+		},
+		{
+			"path": "../../editor-toolbar-model/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../../elements/emoji/afm-cc/tsconfig.json"
 		},

package/afm-dev-agents/tsconfig.json

@@ -57,6 +57,12 @@
 		{
 			"path": "../../editor-shared-styles/afm-dev-agents/tsconfig.json"
 		},
+		{
+			"path": "../../editor-toolbar/afm-dev-agents/tsconfig.json"
+		},
+		{
+			"path": "../../editor-toolbar-model/afm-dev-agents/tsconfig.json"
+		},
 		{
 			"path": "../../../elements/emoji/afm-dev-agents/tsconfig.json"
 		},

package/afm-jira/tsconfig.json

@@ -57,6 +57,12 @@
 		{
 			"path": "../../editor-shared-styles/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../editor-toolbar/afm-jira/tsconfig.json"
+		},
+		{
+			"path": "../../editor-toolbar-model/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../../elements/emoji/afm-jira/tsconfig.json"
 		},

package/afm-post-office/tsconfig.json

@@ -57,6 +57,12 @@
 		{
 			"path": "../../editor-shared-styles/afm-post-office/tsconfig.json"
 		},
+		{
+			"path": "../../editor-toolbar/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../editor-toolbar-model/afm-post-office/tsconfig.json"
+		},
 		{
 			"path": "../../../elements/emoji/afm-post-office/tsconfig.json"
 		},

package/afm-rovo-extension/tsconfig.json

@@ -57,6 +57,12 @@
 		{
 			"path": "../../editor-shared-styles/afm-rovo-extension/tsconfig.json"
 		},
+		{
+			"path": "../../editor-toolbar/afm-rovo-extension/tsconfig.json"
+		},
+		{
+			"path": "../../editor-toolbar-model/afm-rovo-extension/tsconfig.json"
+		},
 		{
 			"path": "../../../elements/emoji/afm-rovo-extension/tsconfig.json"
 		},

package/afm-townsquare/tsconfig.json

@@ -57,6 +57,12 @@
 		{
 			"path": "../../editor-shared-styles/afm-townsquare/tsconfig.json"
 		},
+		{
+			"path": "../../editor-toolbar/afm-townsquare/tsconfig.json"
+		},
+		{
+			"path": "../../editor-toolbar-model/afm-townsquare/tsconfig.json"
+		},
 		{
 			"path": "../../../elements/emoji/afm-townsquare/tsconfig.json"
 		},

package/dist/cjs/index.js

@@ -34,6 +34,12 @@ Object.defineProperty(exports, "EditorContext", {
     return _EditorContext.default;
   }
 });
+Object.defineProperty(exports, "ReactEditorView", {
+  enumerable: true,
+  get: function get() {
+    return _ReactEditorView.ReactEditorView;
+  }
+});
 Object.defineProperty(exports, "ToolbarHelp", {
   enumerable: true,
   get: function get() {
@@ -70,6 +76,12 @@ Object.defineProperty(exports, "createFeatureFlagsFromProps", {
     return _featureFlagsFromProps.createFeatureFlagsFromProps;
   }
 });
+Object.defineProperty(exports, "getDefaultPresetOptionsFromEditorProps", {
+  enumerable: true,
+  get: function get() {
+    return _createPluginsList.getDefaultPresetOptionsFromEditorProps;
+  }
+});
 Object.defineProperty(exports, "getNodesCount", {
   enumerable: true,
   get: function get() {
@@ -113,4 +125,6 @@ var _getNodesCount = require("./utils/getNodesCount");
 var _measureEnum = _interopRequireDefault(require("./utils/performance/measure-enum"));
 var _featureFlagsFromProps = require("./utils/feature-flags-from-props");
 var _actions = _interopRequireDefault(require("./actions"));
-var _ContentStyles = require("./ui/ContentStyles");
+var _ContentStyles = require("./ui/ContentStyles");
+var _createPluginsList = require("./create-editor/create-plugins-list");
+var _ReactEditorView = require("./create-editor/ReactEditorView");

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

@@ -34,6 +34,7 @@ var _PluginSlot = _interopRequireDefault(require("../../PluginSlot"));
 var _getPrimaryToolbarComponents = require("../../Toolbar/getPrimaryToolbarComponents");
 var _ToolbarWithSizeDetector = require("../../Toolbar/ToolbarWithSizeDetector");
 var _WithFlash = _interopRequireDefault(require("../../WithFlash"));
+var _CommentToolbar = require("./CommentToolbar");
 var _Toolbar = require("./Toolbar");
 var _templateObject;
 /**
@@ -250,7 +251,10 @@ var CommentEditorWithIntl = exports.CommentEditorWithIntl = function CommentEdit
     editorAppearance: appearance,
     useStickyToolbar: useStickyToolbar,
     intl: intl
-  }, (0, _react2.jsx)(_ToolbarWithSizeDetector.ToolbarWithSizeDetector
+  }, (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc', 'isEnabled', true) ? (0, _react2.jsx)(_CommentToolbar.CommentToolbar, {
+    editorAPI: editorAPI,
+    editorView: editorView
+  }) : (0, _react2.jsx)(_ToolbarWithSizeDetector.ToolbarWithSizeDetector
   // Ignored via go/ees005
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   , {

package/dist/cjs/ui/Appearance/Comment/CommentToolbar.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CommentToolbar = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _toolbar2 = require("../../../utils/toolbar");
+var _Toolbar = require("../../Toolbar/Toolbar");
+/**
+ * Primary toolbar driven by components registered by `editor-plugin-toolbar`, introduced in `platform_editor_toolbar_aifc`.
+ */
+var CommentToolbar = exports.CommentToolbar = function CommentToolbar(_ref) {
+  var _editorAPI$toolbar;
+  var editorAPI = _ref.editorAPI,
+    editorView = _ref.editorView;
+  var components = editorAPI === null || editorAPI === void 0 || (_editorAPI$toolbar = editorAPI.toolbar) === null || _editorAPI$toolbar === void 0 ? void 0 : _editorAPI$toolbar.actions.getComponents();
+  var toolbar = components === null || components === void 0 ? void 0 : components.find(function (component) {
+    return component.key === _toolbar.TOOLBARS.PRIMARY_TOOLBAR;
+  });
+  if (!components || !(0, _toolbar2.isToolbar)(toolbar)) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_Toolbar.ToolbarNext, {
+    toolbar: toolbar,
+    components: components,
+    editorView: editorView
+  });
+};

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

@@ -15,10 +15,12 @@ var _ui = require("@atlaskit/editor-common/ui");
 var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _getPrimaryToolbarComponents = require("../../Toolbar/getPrimaryToolbarComponents");
 var _FullPageContentArea = require("./FullPageContentArea");
 var _FullPageToolbar = require("./FullPageToolbar");
+var _FullPageToolbarNext = require("./FullPageToolbarNext");
 var _getEditorViewModeSync = require("./getEditorViewModeSync");
 var _StyledComponents = require("./StyledComponents");
 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); }
@@ -169,7 +171,12 @@ var FullPageEditor = exports.FullPageEditor = function FullPageEditor(props) {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
       '--ak-editor-fullpage-toolbar-height': (0, _editorSharedStyles.FULL_PAGE_EDITOR_TOOLBAR_HEIGHT)()
     }
-  }, !isEditorToolbarHidden && (0, _react2.jsx)(_FullPageToolbar.FullPageToolbar, {
+  }, !isEditorToolbarHidden && ((0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc', 'isEnabled', true) ? (0, _react2.jsx)(_FullPageToolbarNext.FullPageToolbarNext, {
+    toolbarDockingPosition: toolbarDockingPosition !== null && toolbarDockingPosition !== void 0 ? toolbarDockingPosition : toolbarDocking,
+    beforeIcon: props.primaryToolbarIconBefore,
+    editorAPI: editorAPI,
+    editorView: props.editorView
+  }) : (0, _react2.jsx)(_FullPageToolbar.FullPageToolbar, {
     appearance: props.appearance,
     editorAPI: editorAPI,
     beforeIcon: props.primaryToolbarIconBefore,
@@ -196,7 +203,7 @@ var FullPageEditor = exports.FullPageEditor = function FullPageEditor(props) {
     providerFactory: props.providerFactory,
     showKeyline: showKeyline,
     featureFlags: props.featureFlags
-  }), (0, _react2.jsx)(_FullPageContentArea.FullPageContentArea, {
+  })), (0, _react2.jsx)(_FullPageContentArea.FullPageContentArea, {
     editorAPI: editorAPI,
     ref: scrollContentContainerRef,
     appearance: props.appearance,

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

@@ -0,0 +1,4 @@
+
+._n7zl7r9e{border-bottom:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
+._2hwxpxbi{margin-right:var(--ds-space-200,1pc)}
+._otyrpxbi{margin-bottom:var(--ds-space-200,1pc)}

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

@@ -0,0 +1,68 @@
+/* FullPageToolbarNext.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FullPageToolbarNext = void 0;
+require("./FullPageToolbarNext.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireDefault(require("react"));
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _toolbar2 = require("../../../utils/toolbar");
+var _Toolbar = require("../../Toolbar/Toolbar");
+var _ToolbarPortal = require("../../Toolbar/ToolbarPortal");
+var styles = {
+  mainToolbarIconBefore: "_19pkpxbi _2hwxpxbi _otyrpxbi",
+  mainToolbarWrapper: "_n7zl7r9e"
+};
+var MainToolbarWrapper = function MainToolbarWrapper(_ref) {
+  var children = _ref.children,
+    testId = _ref.testId;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": testId,
+    className: (0, _runtime.ax)([styles.mainToolbarWrapper])
+  }, children);
+};
+
+/**
+ * TODO: ED-28732 - This component is a work in progress, re-writing `FullPageToolbar` and is not yet complete.
+ *
+ * [ ] Add support for custom toolbar + splitting into two lines
+ *
+ * [ ] Add support for toolbar keyboard shortcuts
+ *
+ * [ ] Add support for toolbar analytics
+ *
+ * [ ] Add support for toolbar accessibility
+ *
+ * [ ] Add support for toolbar localization
+ */
+var FullPageToolbarNext = exports.FullPageToolbarNext = function FullPageToolbarNext(_ref2) {
+  var _editorAPI$toolbar, _useToolbarPortal;
+  var editorAPI = _ref2.editorAPI,
+    beforeIcon = _ref2.beforeIcon,
+    toolbarDockingPosition = _ref2.toolbarDockingPosition,
+    editorView = _ref2.editorView;
+  var components = editorAPI === null || editorAPI === void 0 || (_editorAPI$toolbar = editorAPI.toolbar) === null || _editorAPI$toolbar === void 0 ? void 0 : _editorAPI$toolbar.actions.getComponents();
+  var toolbar = components === null || components === void 0 ? void 0 : components.find(function (component) {
+    return component.key === _toolbar.TOOLBARS.PRIMARY_TOOLBAR;
+  });
+
+  // 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 : {
+      Portal: _react.default.Fragment
+    },
+    ToolbarPortal = _ref3.Portal;
+  return /*#__PURE__*/_react.default.createElement(ToolbarPortal, null, /*#__PURE__*/_react.default.createElement(MainToolbarWrapper, {
+    testId: "full-page-primary-toolbar"
+  }, 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, {
+    toolbar: toolbar,
+    components: components,
+    editorView: editorView
+  })));
+};

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

@@ -171,7 +171,7 @@ var akEditorBreakpointForSmallDevice = "1266px";
 var legacyContentStyles = function legacyContentStyles(props) {
   return (0, _react2.css)(_templateObject0 || (_templateObject0 = (0, _taggedTemplateLiteral2.default)(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t--ak-editor--breakout-fallback-width: calc(\n\t\t100cqw - var(--ak-editor--breakout-full-page-guttering-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\n\t\t/* in full width appearances it's not possible to rely on cqw because it doesn't account for the page scrollbar, which depends on users system settings */\n\t\t--ak-editor--breakout-fallback-width: 100%;\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", "\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: ", "px;\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t}\n\n\t.ProseMirror-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\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\t", "\n  /* Switch between the two icons based on the visual refresh feature gate */\n\t", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\t", "\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\tRelated code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\tIn 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, (0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), _editorSharedStyles.akEditorDefaultLayoutWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth, _editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, _editorSharedStyles.akEditorCalculatedWideLayoutWidth, (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? (0, _react2.css)(_templateObject1 || (_templateObject1 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t\t\t\t@container editor-area (max-width: ", "px) {\n\t\t\t\t\t--ak-editor--large-gutter-padding: ", "px;\n\t\t\t\t}\n\t\t\t"])), _editorSharedStyles.akEditorFullPageNarrowBreakout, _editorSharedStyles.akEditorGutterPaddingReduced) : null, (0, _editorSharedStyles.editorFontSize)({
     theme: props.theme
-  }), _styles.whitespaceSharedStyles, (0, _styles.paragraphSharedStyles)(props.typographyTheme), _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_hide_cursor_when_pm_hideselection') ? (0, _react2.css)(_templateObject10 || (_templateObject10 = (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)(_templateObject11 || (_templateObject11 = (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)", firstFloatingToolbarButtonStyles, _styles5.placeholderTextStyles, (0, _platformFeatureFlags.fg)('platform_editor_system_fake_text_highlight_colour') && _styles5.placeholderTextStyles_fg_platform_editor_system_fake_text_highlight_colour, placeholderStyles, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, (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), (0, _platformFeatureFlags.fg)('confluence_team_presence_scroll_to_pointer') ? _collab.telepointerStyle : _collab.telepointerStyleWithInitialOnly, _selection.gapCursorStyles, (0, _panel2.panelStyles)(), mentionsStyles, mentionNodeStyles, (0, _platformFeatureFlags.fg)('platform_editor_centre_mention_padding') && mentionNodeStylesMixin_fg_platform_editor_centre_mention_padding, (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_find_and_replace_improvements', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_find_and_replace_improvements_1') ? mentionsSelectionStylesWithSearchMatch : mentionSelectionStyles, (0, _platformFeatureFlags.fg)('platform_editor_fix_emoji_style_selectors') ? emojiStylesWithSelectorFixes : emojiStyles, _styles.tasksAndDecisionsStyles, _styles.gridStyles, linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _extension.extensionStyles, (0, _expand.expandStyles)(), (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? (0, _platformFeatureFlags.fg)('platform_editor_find_and_replace_improvements_1') ? _styles3.findReplaceStylesNewNoImportant : _styles3.findReplaceStylesNew : _styles3.findReplaceStyles, _styles4.textHighlightStyle, _tasksAndDecisions.taskDecisionStyles, _tasksAndDecisions.taskItemStyles, (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisions.taskDecisionIconWithVisualRefresh, !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisions.taskDecisionIconWithoutVisualRefresh, (0, _status.statusStyles)(), (0, _status.statusNodeStyles)(), (0, _styles.annotationSharedStyles)(), (0, _styles.smartCardStyles)(), (0, _styles.getSmartCardSharedStyles)(), _date.dateStyles, _date.dateNodeStyles, (0, _styles.embedCardStyles)(), _styles.unsupportedStyles, _styles.resizerStyles, (0, _styles.pragmaticResizerStyles)(), (0, _styles.pragmaticStylesLayoutFirstNodeResizeHandleFix)(), (0, _styles.pragmaticResizerStylesForTooltip)(), (0, _styles.pragmaticResizerStylesWithReducedEditorGutter)(), (0, _aiPanels.aiPanelStyles)(props.colorMode), firstBlockNodeStylesNew, (0, _platformFeatureFlags.fg)('platform_editor_vanilla_codebidi_warning') && _codeBidiWarning.codeBidiWarningStyles, _styles.MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT, !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ? (0, _react2.css)(_templateObject12 || (_templateObject12 = (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);
+  }), _styles.whitespaceSharedStyles, (0, _styles.paragraphSharedStyles)(props.typographyTheme), _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_hide_cursor_when_pm_hideselection') ? (0, _react2.css)(_templateObject10 || (_templateObject10 = (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)(_templateObject11 || (_templateObject11 = (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)", firstFloatingToolbarButtonStyles, _styles5.placeholderTextStyles, (0, _platformFeatureFlags.fg)('platform_editor_system_fake_text_highlight_colour') && _styles5.placeholderTextStyles_fg_platform_editor_system_fake_text_highlight_colour, placeholderStyles, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, (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), (0, _platformFeatureFlags.fg)('confluence_team_presence_scroll_to_pointer') ? _collab.telepointerStyle : _collab.telepointerStyleWithInitialOnly, _selection.gapCursorStyles, (0, _panel2.panelStyles)(), mentionsStyles, mentionNodeStyles, (0, _platformFeatureFlags.fg)('platform_editor_centre_mention_padding') && mentionNodeStylesMixin_fg_platform_editor_centre_mention_padding, (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_find_and_replace_improvements', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_find_and_replace_improvements_1') ? mentionsSelectionStylesWithSearchMatch : mentionSelectionStyles, (0, _platformFeatureFlags.fg)('platform_editor_fix_emoji_style_selectors') ? emojiStylesWithSelectorFixes : emojiStyles, _styles.tasksAndDecisionsStyles, _styles.gridStyles, linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _extension.extensionStyles, (0, _expand.expandStyles)(), (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? (0, _platformFeatureFlags.fg)('platform_editor_find_and_replace_improvements_1') ? _styles3.findReplaceStylesNewNoImportant : _styles3.findReplaceStylesNew : _styles3.findReplaceStyles, _styles4.textHighlightStyle, _tasksAndDecisions.taskDecisionStyles, (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_blocktaskitem_node', 'isEnabled', true) ? _tasksAndDecisions.taskItemStylesWithBlockTaskItem : _tasksAndDecisions.taskItemStyles, (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisions.taskDecisionIconWithVisualRefresh, !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisions.taskDecisionIconWithoutVisualRefresh, (0, _status.statusStyles)(), (0, _status.statusNodeStyles)(), (0, _styles.annotationSharedStyles)(), (0, _styles.smartCardStyles)(), (0, _styles.getSmartCardSharedStyles)(), _date.dateStyles, _date.dateNodeStyles, (0, _styles.embedCardStyles)(), _styles.unsupportedStyles, _styles.resizerStyles, (0, _styles.pragmaticResizerStyles)(), (0, _styles.pragmaticStylesLayoutFirstNodeResizeHandleFix)(), (0, _styles.pragmaticResizerStylesForTooltip)(), (0, _styles.pragmaticResizerStylesWithReducedEditorGutter)(), (0, _aiPanels.aiPanelStyles)(props.colorMode), firstBlockNodeStylesNew, (0, _platformFeatureFlags.fg)('platform_editor_vanilla_codebidi_warning') && _codeBidiWarning.codeBidiWarningStyles, _styles.MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT, !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ? (0, _react2.css)(_templateObject12 || (_templateObject12 = (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

@@ -120,7 +120,8 @@ var baseStatusStyles = (0, _react.css)({
     maxWidth: '100%',
     paddingInline: "var(--ds-space-050, 4px)",
     display: 'inline-flex',
-    borderRadius: '3px',
+    // eslint-disable-next-line @atlaskit/design-system/no-unsafe-design-token-usage
+    borderRadius: "var(--ds-border-radius-100, 3px)",
     blockSize: 'min-content',
     position: 'static',
     overflow: 'hidden',

package/dist/cjs/ui/ContentStyles/tasks-and-decisions.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.taskItemStyles = exports.taskDecisionStyles = exports.taskDecisionIconWithoutVisualRefresh = exports.taskDecisionIconWithVisualRefresh = void 0;
+exports.taskItemStylesWithBlockTaskItem = exports.taskItemStyles = exports.taskDecisionStyles = exports.taskDecisionIconWithoutVisualRefresh = exports.taskDecisionIconWithVisualRefresh = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _styles = require("@atlaskit/editor-common/styles");
@@ -349,4 +349,208 @@ var taskItemStyles = exports.taskItemStyles = (0, _react.css)((0, _definePropert
       transform: 'translate(-50%, -50%)'
     }
   }
+}));
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var taskItemStylesWithBlockTaskItem = exports.taskItemStylesWithBlockTaskItem = (0, _react.css)((0, _defineProperty2.default)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-name="taskItem"], [data-prosemirror-node-name="blockTaskItem"]': {
+    listStyle: 'none'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-name="taskItem"] [data-component="task-item-main"], [data-prosemirror-node-name="blockTaskItem"] [data-component="task-item-main"]': {
+    display: 'flex',
+    flexDirection: 'row',
+    position: 'relative'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-name="taskItem"] [data-component="placeholder"], [data-prosemirror-node-name="blockTaskItem"] [data-component="placeholder"]': {
+    position: 'absolute',
+    color: "var(--ds-text-subtlest, #626F86)",
+    margin: "0 0 0 calc(".concat("var(--ds-space-100, 8px)", " * 3)"),
+    pointerEvents: 'none',
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    maxWidth: 'calc(100% - 50px)',
+    display: 'none'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  "[data-prosemirror-node-name='taskItem']:has([data-empty]):not(:has([data-type-ahead])) [data-component='placeholder'], [data-prosemirror-node-name='blockTaskItem']:has([data-empty]):not(:has([data-type-ahead])) [data-component='placeholder']": {
+    display: 'block'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-name="taskItem"] [data-component="content"], [data-prosemirror-node-name="blockTaskItem"] [data-component="content"]': {
+    margin: 0,
+    wordWrap: 'break-word',
+    minWidth: 0,
+    flex: '1 1 auto'
+  },
+  // copied styles from packages/design-system/icon/src/components/icon-new.tsx
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-name="taskItem"] [data-component="checkbox-icon-wrap"], [data-prosemirror-node-name="blockTaskItem"] [data-component="checkbox-icon-wrap"]': {
+    display: 'inline-block',
+    boxSizing: 'border-box',
+    flexShrink: 0,
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: 1,
+    paddingInlineEnd: 'var(--ds--button--new-icon-padding-end, 0)',
+    paddingInlineStart: 'var(--ds--button--new-icon-padding-start, 0)'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-name="taskItem"] [data-component="checkbox-icon-wrap"] svg, [data-prosemirror-node-name="blockTaskItem"] [data-component="checkbox-icon-wrap"] svg': {
+    overflow: 'hidden',
+    pointerEvents: 'none',
+    color: 'currentColor',
+    verticalAlign: 'bottom',
+    width: "var(--ds-space-200, 16px)",
+    height: "var(--ds-space-200, 16px)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '[data-prosemirror-node-name="taskItem"] input[type=checkbox]:not(:checked) + span [data-component=checkbox-checked-icon], [data-prosemirror-node-name="blockTaskItem"] input[type=checkbox]:not(:checked) + span [data-component=checkbox-checked-icon]': {
+    display: 'none'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '[data-prosemirror-node-name="taskItem"] input[type=checkbox]:not(:checked) + span [data-component=checkbox-unchecked-icon], [data-prosemirror-node-name="blockTaskItem"] input[type=checkbox]:not(:checked) + span [data-component=checkbox-unchecked-icon]': {
+    display: 'inline'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-name="taskItem"] input[type=checkbox]:checked + span [data-component=checkbox-checked-icon], [data-prosemirror-node-name="blockTaskItem"] input[type=checkbox]:checked + span [data-component=checkbox-checked-icon]': {
+    display: 'inline'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-name="taskItem"] input[type=checkbox]:checked + span [data-component=checkbox-unchecked-icon], [data-prosemirror-node-name="blockTaskItem"] input[type=checkbox]:checked + span [data-component=checkbox-unchecked-icon]': {
+    display: 'none'
+  }
+}, "[data-prosemirror-node-name=\"taskItem\"] .".concat(_styles.TaskDecisionSharedCssClassName.TASK_CHECKBOX_CONTAINER, ", [data-prosemirror-node-name=\"blockTaskItem\"] .").concat(_styles.TaskDecisionSharedCssClassName.TASK_CHECKBOX_CONTAINER), {
+  flex: '0 0 24px',
+  width: '24px',
+  height: '24px',
+  position: 'relative',
+  alignSelf: 'start',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  "& > input[type='checkbox']": {
+    width: '16px',
+    height: '16px',
+    zIndex: 1,
+    cursor: 'pointer',
+    outline: 'none',
+    margin: 0,
+    opacity: 0,
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '&[disabled]': {
+      cursor: 'default'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '+ span': {
+      width: '24px',
+      height: '24px',
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '+ span > svg': {
+      boxSizing: 'border-box',
+      display: 'inline',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)',
+      maxWidth: 'unset',
+      maxHeight: 'unset',
+      position: 'absolute',
+      overflow: 'hidden',
+      color: "var(--ds-background-input, #FFFFFF)",
+      transition: 'color 0.2s ease-in-out, fill 0.2s ease-in-out',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+      'path:first-of-type': {
+        visibility: 'hidden'
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+      'rect:first-of-type': {
+        stroke: "var(--ds-border-input, #8590A2)",
+        strokeWidth: 1,
+        transition: 'stroke 0.2s ease-in-out'
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&:hover + span > svg': {
+      color: "var(--ds-background-input-hovered, #F7F8F9)",
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+      'rect:first-of-type': {
+        stroke: "var(--ds-border-input, #8590A2)"
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '&:checked:hover + span > svg': {
+      color: "var(--ds-background-selected-bold-hovered, #0055CC)",
+      fill: "var(--ds-icon-inverse, #FFFFFF)",
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+      'rect:first-of-type': {
+        stroke: "var(--ds-background-selected-bold-hovered, #0055CC)"
+      }
+    },
+    '&:checked': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+      '+ span > svg': {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+        'path:first-of-type': {
+          visibility: 'visible'
+        },
+        color: "var(--ds-background-selected-bold, #0C66E4)",
+        fill: "var(--ds-icon-inverse, #FFFFFF)",
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+        'rect:first-of-type': {
+          stroke: "var(--ds-background-selected-bold, #0C66E4)"
+        }
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '&:active + span > svg': {
+      color: "var(--ds-background-input-pressed, #FFFFFF)",
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+      'rect:first-of-type': {
+        stroke: "var(--ds-border, #091E4224)"
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '&:checked:active + span > svg': {
+      color: "var(--ds-background-input-pressed, #FFFFFF)",
+      fill: "var(--ds-icon-inverse, #FFFFFF)",
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+      'rect:first-of-type': {
+        stroke: "var(--ds-border, #091E4224)"
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '&:disabled + span > svg, &:disabled:hover + span > svg, &:disabled:focus + span > svg, &:disabled:active + span > svg': {
+      color: "var(--ds-background-disabled, #091E4208)",
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+      'rect:first-of-type': {
+        stroke: "var(--ds-background-disabled, #091E4208)"
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '&:disabled:checked + span > svg': {
+      fill: "var(--ds-icon-disabled, #091E424F)"
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '&:focus + span::after': {
+      position: 'absolute',
+      width: "var(--ds-space-200, 16px)",
+      height: "var(--ds-space-200, 16px)",
+      border: "2px solid ".concat("var(--ds-border-focused, #388BFF)"),
+      borderRadius: "var(--ds-space-050, 4px)",
+      content: "''",
+      display: 'block',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)'
+    }
+  }
 }));

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

@@ -223,6 +223,10 @@ var EditorContentContainer = /*#__PURE__*/_react.default.forwardRef(function (pr
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     _tasksAndDecisionsStyles.decisionStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_blocktaskitem_node', 'isEnabled', true) ?
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _tasksAndDecisionsStyles.taskItemStylesWithBlockTaskItem :
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     _tasksAndDecisionsStyles.taskItemStyles, (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') &&
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     _tasksAndDecisionsStyles.decisionIconWithVisualRefresh, !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') &&

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

@@ -11,7 +11,8 @@ var _react = require("@emotion/react");
 var findReplaceStyles = exports.findReplaceStyles = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.search-match': {
-    borderRadius: '3px',
+    // eslint-disable-next-line @atlaskit/design-system/no-unsafe-design-token-usage
+    borderRadius: "var(--ds-border-radius-100, 3px)",
     backgroundColor: "var(--ds-background-accent-teal-subtlest, #E7F9FF)",
     boxShadow: "var(--ds-shadow-raised, 0 1px 1px 0 rgba(9, 30, 66, 0.25), 0 0 1px 0 rgba(9, 30, 66, 0.31))".concat(", inset 0 0 0 1px ", "var(--ds-border-input, #8590A2)")
   },

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

@@ -52,7 +52,8 @@ var statusStyles = exports.statusStyles = (0, _react.css)({
     maxWidth: '100%',
     paddingInline: "var(--ds-space-050, 4px)",
     display: 'inline-flex',
-    borderRadius: '3px',
+    // eslint-disable-next-line @atlaskit/design-system/no-unsafe-design-token-usage
+    borderRadius: "var(--ds-border-radius-100, 3px)",
     blockSize: 'min-content',
     position: 'static',
     overflow: 'hidden',