@atlaskit/editor-core 208.3.5 → 208.4.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/editor-core
 
+## 208.4.0
+
+### Minor Changes
+
+- [#177117](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/177117)
+  [`49ae44aea25fc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/49ae44aea25fc) -
+  Add new styles for inline nodes for find and replace, include these in block node checks
+
+### Patch Changes
+
+- [#177523](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/177523)
+  [`1faed88065ff6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1faed88065ff6) -
+  refactor editor fullpage toolbar height in FullPageContentArea
+- Updated dependencies
+
+## 208.3.6
+
+### Patch Changes
+
+- [#165932](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/165932)
+  [`993d95ad7a45c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/993d95ad7a45c) -
+  migrated toolbar off dynamic styles to static styles behind experiment
+
 ## 208.3.5
 
 ### Patch Changes

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

@@ -0,0 +1,119 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MainToolbarForSecondChildWrapper = exports.MainToolbarForFirstChildWrapper = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
+var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _MainToolbar = require("./MainToolbar");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+// Pre-computed static styles for first- and second-child wrappers.
+// These contain no runtime logic and are safe for static-emotion mode.
+
+var firstChildStaticBase = (0, _react2.css)({
+  display: 'flex',
+  flexGrow: 1
+});
+
+// we can't avoid some kind of function call here, so we need to disable the rule
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+var firstChildStaticTwoLine = (0, _react2.css)({
+  '@media (max-width: 868px)': {
+    flex: '1 1 100%',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    height: 'var(--ak-editor-fullpage-toolbar-height)',
+    justifyContent: 'flex-end',
+    minWidth: 'fit-content'
+  }
+});
+var secondChildStaticBase = (0, _react2.css)({
+  minWidth: 'fit-content'
+});
+
+// we can't avoid some kind of function call here, so we need to disable the rule
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+var secondChildStaticTwoLine = (0, _react2.css)({
+  '@media (max-width: 868px)': {
+    display: 'flex',
+    flexGrow: 1,
+    flex: '1 1 100%',
+    margin: 'auto',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    height: 'var(--ak-editor-fullpage-toolbar-height)',
+    minWidth: 0
+  }
+});
+
+// ---------------- First child wrapper ----------------
+var FirstChildWrapperStatic = function FirstChildWrapperStatic(_ref) {
+  var twoLineEditorToolbar = _ref.twoLineEditorToolbar,
+    children = _ref.children,
+    role = _ref.role,
+    ariaLabel = _ref['aria-label'],
+    testId = _ref['data-testid'];
+  return (0, _react2.jsx)("div", {
+    css: [firstChildStaticBase, twoLineEditorToolbar && firstChildStaticTwoLine],
+    role: role,
+    "aria-label": ariaLabel,
+    "data-testid": testId
+  }, children);
+};
+var FirstChildWrapperDynamic = function FirstChildWrapperDynamic(_ref2) {
+  var twoLineEditorToolbar = _ref2.twoLineEditorToolbar,
+    children = _ref2.children,
+    role = _ref2.role,
+    ariaLabel = _ref2['aria-label'],
+    testId = _ref2['data-testid'];
+  return (0, _react2.jsx)("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage
+    css: (0, _MainToolbar.mainToolbarFirstChildStyle)(twoLineEditorToolbar),
+    role: role,
+    "aria-label": ariaLabel,
+    "data-testid": testId
+  }, children);
+};
+var MainToolbarForFirstChildWrapper = exports.MainToolbarForFirstChildWrapper = (0, _platformFeatureFlagsReact.componentWithCondition)(function () {
+  return (0, _expValEquals.expValEquals)('platform_editor_core_static_emotion_non_central', 'isEnabled', true);
+}, FirstChildWrapperStatic, FirstChildWrapperDynamic);
+
+// ---------------- Second child wrapper ----------------
+var SecondChildWrapperStatic = function SecondChildWrapperStatic(_ref3) {
+  var twoLineEditorToolbar = _ref3.twoLineEditorToolbar,
+    children = _ref3.children,
+    role = _ref3.role,
+    ariaLabel = _ref3['aria-label'],
+    testId = _ref3['data-testid'];
+  return (0, _react2.jsx)("div", {
+    css: [secondChildStaticBase, twoLineEditorToolbar && secondChildStaticTwoLine],
+    role: role,
+    "aria-label": ariaLabel,
+    "data-testid": testId
+  }, children);
+};
+var SecondChildWrapperDynamic = function SecondChildWrapperDynamic(_ref4) {
+  var twoLineEditorToolbar = _ref4.twoLineEditorToolbar,
+    children = _ref4.children,
+    role = _ref4.role,
+    ariaLabel = _ref4['aria-label'],
+    testId = _ref4['data-testid'];
+  return (0, _react2.jsx)("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage
+    css: (0, _MainToolbar.mainToolbarSecondChildStyle)(twoLineEditorToolbar),
+    role: role,
+    "aria-label": ariaLabel,
+    "data-testid": testId
+  }, children);
+};
+var MainToolbarForSecondChildWrapper = exports.MainToolbarForSecondChildWrapper = (0, _platformFeatureFlagsReact.componentWithCondition)(function () {
+  return (0, _expValEquals.expValEquals)('platform_editor_core_static_emotion_non_central', 'isEnabled', true);
+}, SecondChildWrapperStatic, SecondChildWrapperDynamic);

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

@@ -13,6 +13,7 @@ var _browser = require("@atlaskit/editor-common/browser");
 var _hooks = require("@atlaskit/editor-common/hooks");
 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 _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _getPrimaryToolbarComponents = require("../../Toolbar/getPrimaryToolbarComponents");
@@ -163,7 +164,11 @@ var FullPageEditor = exports.FullPageEditor = function FullPageEditor(props) {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
     className: "akEditor",
-    ref: wrapperElementRef
+    ref: wrapperElementRef,
+    style: {
+      // 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, {
     appearance: props.appearance,
     editorAPI: editorAPI,

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

@@ -46,8 +46,6 @@ var tableMarginFullWidthMode = 2;
 var akLayoutGutterOffset = 12;
 var SWOOP_ANIMATION = "0.5s ".concat(akEditorSwoopCubicBezier);
 var AK_NESTED_DND_GUTTER_OFFSET = 8;
-var FULL_PAGE_EDITOR_TOOLBAR_HEIGHT = "var(--ds-space-500, 40px)";
-var FULL_PAGE_EDITOR_TOOLBAR_HEIGHT_LIVE_PAGE = '2.188rem';
 var getTotalPadding = function getTotalPadding() {
   return (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2;
 };
@@ -220,18 +218,6 @@ var editorContentGutterStyle = function editorContentGutterStyle() {
 };
 
 // new styles
-var editorContentAreaNoToolbarLivePageJumpMitigation = (0, _react2.css)({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-  '.ak-editor-content-area-no-toolbar &': {
-    paddingTop: "calc(".concat("var(--ds-space-600, 48px)", " + ", FULL_PAGE_EDITOR_TOOLBAR_HEIGHT_LIVE_PAGE, " + 1px)")
-  }
-});
-var editorContentAreaNoToolbarControls = (0, _react2.css)({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-  '.ak-editor-content-area-no-toolbar &': {
-    paddingTop: "calc(".concat("var(--ds-space-600, 48px)", " + ", FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, " + 1px)")
-  }
-});
 var editorContentAreaNew = (0, _react2.css)({
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: '24px',
@@ -240,7 +226,7 @@ var editorContentAreaNew = (0, _react2.css)({
   '.ak-editor-content-area-no-toolbar &': {
     // When the toolbar is hidden, we don't want content to jump up
     // the extra 1px is to account for the border on the toolbar
-    paddingTop: "calc(".concat("var(--ds-space-600, 48px)", " + ", FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, " + 1px)")
+    paddingTop: "calc(".concat("var(--ds-space-600, 48px)", " + var(--ak-editor-fullpage-toolbar-height) + 1px)")
   },
   paddingBottom: "var(--ds-space-600, 48px)",
   height: 'calc( 100% - 105px )',
@@ -330,7 +316,7 @@ var editorContentGutterStyles = (0, _react2.css)({
 var contentAreaNew = (0, _react2.css)({
   display: 'flex',
   flexDirection: 'row',
-  height: "calc(100% - ".concat(FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, ")"),
+  height: "calc(100% - var(--ak-editor-fullpage-toolbar-height))",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
   '&.ak-editor-content-area-no-toolbar': {
     // The editor toolbar height is 1px off (from the border) -- so we need to add 1px to the height
@@ -342,12 +328,6 @@ var contentAreaNew = (0, _react2.css)({
   padding: 0,
   transition: "padding 0ms ".concat(akEditorSwoopCubicBezier)
 });
-var contentAreaHeightLivePageJumpMitigation = (0, _react2.css)({
-  height: "calc(100% - ".concat(FULL_PAGE_EDITOR_TOOLBAR_HEIGHT_LIVE_PAGE, ")")
-});
-var contentAreaHeightControls = (0, _react2.css)({
-  height: "calc(100% - ".concat(FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, ")")
-});
 var contentAreaHeightNoToolbar = (0, _react2.css)({
   height: '100%'
 });
@@ -404,9 +384,7 @@ var Content = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     return (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1');
   };
   return (0, _react2.jsx)("div", {
-    css: (0, _expValEquals.expValEquals)('platform_editor_core_static_emotion_non_central', 'isEnabled', true) ? [contentAreaNew, (0, _platformFeatureFlags.fg)('live_pages_content_jump_mitigation') && contentAreaHeightLivePageJumpMitigation, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1', {
-      exposure: true
-    }) && contentAreaHeightControls, props.isEditorToolbarHidden && contentAreaHeightNoToolbar] : [
+    css: (0, _expValEquals.expValEquals)('platform_editor_core_static_emotion_non_central', 'isEnabled', true) ? [contentAreaNew, props.isEditorToolbarHidden && contentAreaHeightNoToolbar] : [
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
     _StyledComponents.contentArea,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
@@ -432,9 +410,7 @@ var Content = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     editorView: props.editorView,
     editorDisabled: props.disabled
   }, (0, _react2.jsx)("div", {
-    css: (0, _expValEquals.expValEquals)('platform_editor_core_static_emotion_non_central', 'isEnabled', true) ? [editorContentAreaNew, editorContentAreaProsemirrorStyle, tableFullPageEditorStylesNew, (0, _platformFeatureFlags.fg)('live_pages_content_jump_mitigation') && editorContentAreaNoToolbarLivePageJumpMitigation, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1', {
-      exposure: true
-    }) && editorContentAreaNoToolbarControls, (0, _platformFeatureFlags.fg)('platform_editor_fix_table_width_inline_comment') ? fullWidthNonChromelessBreakoutBlockTableStyle : fullWidthModeBreakoutBlockTableStyle,
+    css: (0, _expValEquals.expValEquals)('platform_editor_core_static_emotion_non_central', 'isEnabled', true) ? [editorContentAreaNew, editorContentAreaProsemirrorStyle, tableFullPageEditorStylesNew, (0, _platformFeatureFlags.fg)('platform_editor_fix_table_width_inline_comment') ? fullWidthNonChromelessBreakoutBlockTableStyle : fullWidthModeBreakoutBlockTableStyle,
     // for breakout resizing, there's no need to restrict the width of codeblocks as they're always wrapped in a breakout mark
     (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_breakout_resizing', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_width_changes') ? editorContentAreaContainerStyleExcludeCodeBlockNew : editorContentAreaContainerStyleNew, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') && editorContentAreaContainerNestedDndStyle, !(0, _platformFeatureFlags.fg)('platform_editor_controls_no_toolbar_space') && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && contentAreaReducedHeaderSpace, !(0, _platformFeatureFlags.fg)('platform_editor_controls_no_toolbar_space') && props.isEditorToolbarHidden && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && contentAreaReservedPrimaryToolbarSpace] : (0, _toConsumableArray2.default)(editorContentAreaStyle({
       fullWidthMode: fullWidthMode,

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

@@ -17,7 +17,9 @@ var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _ToolbarPortal = require("../../Toolbar/ToolbarPortal");
 var _ToolbarWithSizeDetector = require("../../Toolbar/ToolbarWithSizeDetector");
 var _BeforeWrapper = require("./BeforeWrapper");
+var _CustomToolbarWrapper = require("./CustomToolbarWrapper");
 var _MainToolbar = require("./MainToolbar");
+var _MainToolbarWrapper = require("./MainToolbarWrapper");
 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); }
 /**
  * @jsxRuntime classic
@@ -130,18 +132,16 @@ var EditorToolbar = exports.EditorToolbar = /*#__PURE__*/_react.default.memo(fun
       isShortcutToFocusToolbar: isShortcutToFocusToolbar,
       handleEscape: handleEscape,
       intl: props.intl
-    }, (0, _react2.jsx)(ToolbarPortal, null, (0, _react2.jsx)("div", {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-      css: (0, _MainToolbar.mainToolbarStyle)(props.showKeyline || contextPanelWidth > 0, twoLineEditorToolbar),
+    }, (0, _react2.jsx)(ToolbarPortal, null, (0, _react2.jsx)(_MainToolbarWrapper.MainToolbarWrapper, {
+      showKeyline: props.showKeyline || contextPanelWidth > 0,
+      twoLineEditorToolbar: twoLineEditorToolbar,
       "data-testid": "ak-editor-main-toolbar"
-    }, (0, _react2.jsx)("div", {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-      css: (0, _MainToolbar.mainToolbarFirstChildStyle)(twoLineEditorToolbar),
+    }, (0, _react2.jsx)(_CustomToolbarWrapper.MainToolbarForFirstChildWrapper, {
+      twoLineEditorToolbar: twoLineEditorToolbar,
       role: "toolbar",
       "aria-label": props.intl.formatMessage(_messages.fullPageMessages.toolbarLabel)
-    }, shouldSplitToolbar ? customToolbar : nonCustomToolbar), (0, _react2.jsx)("div", {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-      css: (0, _MainToolbar.mainToolbarSecondChildStyle)(twoLineEditorToolbar),
+    }, shouldSplitToolbar ? customToolbar : nonCustomToolbar), (0, _react2.jsx)(_CustomToolbarWrapper.MainToolbarForSecondChildWrapper, {
+      twoLineEditorToolbar: twoLineEditorToolbar,
       "data-testid": "avatar-group-outside-plugin",
       role: "region",
       "aria-label": props.intl.formatMessage(_messages.fullPageMessages.pageActionsLabel)

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

@@ -0,0 +1,97 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MainToolbarWrapper = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _MainToolbar = require("./MainToolbar");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+// Base styles that don't depend on feature flags
+var baseToolbarStyles = (0, _react2.css)({
+  position: 'relative',
+  alignItems: 'center',
+  boxShadow: 'none',
+  borderBottom: "1px solid ".concat("var(--ds-border, #091E4224)"),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+  transition: "box-shadow 200ms ".concat(_editorSharedStyles.akEditorSwoopCubicBezier),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+  zIndex: _editorSharedStyles.akEditorFloatingDialogZIndex,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+  display: 'flex',
+  height: 'var(--ak-editor-fullpage-toolbar-height)',
+  flexShrink: 0,
+  backgroundColor: "var(--ds-surface, #FFFFFF)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '& object': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+    height: '0 !important'
+  }
+});
+var flexibleIconSize = (0, _react2.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '& span svg': {
+    maxWidth: '100%'
+  }
+});
+// box-shadow is overriden by the mainToolbar
+var mainToolbarWithKeyline = (0, _react2.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  boxShadow: "var(--ds-shadow-overflow, 0px 0px 8px #091E4228, 0px 0px 1px #091E421e)"
+});
+var mainToolbarTwoLineStyle = (0, _react2.css)((0, _defineProperty2.default)({}, "@media (max-width: ".concat(_MainToolbar.MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, "px)"), {
+  flexWrap: 'wrap',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  height: "calc(var(--ak-editor-fullpage-toolbar-height) * 2)"
+}));
+var MainToolbarWrapperNext = function MainToolbarWrapperNext(_ref) {
+  var showKeyline = _ref.showKeyline,
+    twoLineEditorToolbar = _ref.twoLineEditorToolbar,
+    children = _ref.children,
+    testId = _ref['data-testid'];
+  return (0, _react2.jsx)("div", {
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    css: [baseToolbarStyles, (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && flexibleIconSize, showKeyline && mainToolbarWithKeyline, twoLineEditorToolbar && mainToolbarTwoLineStyle],
+    "data-testid": testId
+  }, children);
+};
+
+/**
+ * Original version of the toolbar wrapper using dynamic styles
+ */
+var MainToolbarWrapperOld = function MainToolbarWrapperOld(_ref2) {
+  var showKeyline = _ref2.showKeyline,
+    twoLineEditorToolbar = _ref2.twoLineEditorToolbar,
+    children = _ref2.children,
+    testId = _ref2['data-testid'];
+  return (0, _react2.jsx)("div", {
+    css:
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
+    (0, _MainToolbar.mainToolbarStyle)(showKeyline, twoLineEditorToolbar),
+    "data-testid": testId
+  }, children);
+};
+
+/**
+ * Wrapper component for the main toolbar that handles feature flag based styling
+ * @example
+ * <MainToolbarWrapper showKeyline={true} twoLineEditorToolbar={false}>
+ *   <ToolbarContent />
+ * </MainToolbarWrapper>
+ */
+var MainToolbarWrapper = exports.MainToolbarWrapper = (0, _platformFeatureFlagsReact.componentWithCondition)(function () {
+  return (0, _expValEquals.expValEquals)('platform_editor_core_static_emotion_non_central', 'isEnabled', true);
+}, MainToolbarWrapperNext, MainToolbarWrapperOld);

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

@@ -126,11 +126,9 @@ var EditorContentContainer = /*#__PURE__*/_react.default.forwardRef(function (pr
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     _codeBlockStyles.codeBlockStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    !(0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') && _editorUGCTokenStyles.editorUGCTokensDefault, ((0, _platformFeatureFlags.fg)('platform-dst-jira-web-fonts') || (0, _platformFeatureFlags.fg)('confluence_typography_refreshed') || (0, _platformFeatureFlags.fg)('atlas_editor_typography_refreshed')) && (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') &&
+    !(0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') && _editorUGCTokenStyles.editorUGCTokensDefault, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') &&
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    _editorUGCTokenStyles.editorUGCTokensRefreshed, !((0, _platformFeatureFlags.fg)('platform-dst-jira-web-fonts') || (0, _platformFeatureFlags.fg)('confluence_typography_refreshed') || (0, _platformFeatureFlags.fg)('atlas_editor_typography_refreshed')) && (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') &&
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    _editorUGCTokenStyles.editorUGCTokensModernized,
+    _editorUGCTokenStyles.editorUGCTokensRefreshed,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     _blockTypeStyles.blocktypeStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
@@ -268,12 +266,10 @@ var EditorContentContainer = /*#__PURE__*/_react.default.forwardRef(function (pr
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     _smartCardStyles.linkingVisualRefreshV1Styles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    _dateStyles.dateVanillaStyles, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? (0, _platformFeatureFlags.fg)('platform-dst-jira-web-fonts') || (0, _platformFeatureFlags.fg)('confluence_typography_refreshed') || (0, _platformFeatureFlags.fg)('atlas_editor_typography_refreshed') ?
+    _dateStyles.dateVanillaStyles, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ?
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     _paragraphStyles.paragraphStylesUGCRefreshed :
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    _paragraphStyles.paragraphStylesUGCModernized :
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     _paragraphStyles.paragraphStylesOld,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     (0, _platformFeatureFlags.fg)('platform_editor_hyperlink_underline') ? _link.linkStyles : _link.linkStylesOld,

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

@@ -44,13 +44,23 @@ var findReplaceStylesNew = exports.findReplaceStylesNew = (0, _react.css)({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
     '[data-smart-link-container="true"], .loader-wrapper>div::after': {
       boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-subtler-pressed, #E2B203)", ",\n\t\t\tinset 0 0 0 5px ", "var(--ds-background-accent-yellow-subtler, #F8E6A0)", "\n\t\t\t")
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.loader-wrapper>a, .lozenge-wrapper, .editor-mention-primitive, .date-lozenger-container': {
+      boxShadow: "0px 0px 0px 4px ".concat("var(--ds-background-accent-yellow-subtler, #F8E6A0)", ", 0px 0px 0px 5px ", "var(--ds-background-accent-yellow-subtler-pressed, #E2B203)"),
+      borderRadius: '3px'
     }
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.search-match-selected.search-match-block': {
+  '.search-match-block.search-match-block-selected': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
     '[data-smart-link-container="true"], .loader-wrapper>div::after': {
       boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-subtler-pressed, #E2B203)", ",\n\t\t\tinset 0 0 0 4px ", "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)", "\n\t\t\t")
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.loader-wrapper>a, .lozenge-wrapper, .editor-mention-primitive, .date-lozenger-container': {
+      boxShadow: "0px 0px 0px 4px ".concat("var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)", ", 0px 0px 0px 5px ", "var(--ds-background-accent-yellow-subtler-pressed, #E2B203)"),
+      borderRadius: '3px'
     }
   },
   /** With node selection */
@@ -59,30 +69,49 @@ var findReplaceStylesNew = exports.findReplaceStylesNew = (0, _react.css)({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
     '.loader-wrapper>div::after': {
       boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-subtler-pressed, #E2B203)", ",\n\t\t\tinset 0 0 0 5px ", "var(--ds-background-accent-yellow-subtler, #F8E6A0)", ",\n\t\t\t0 0 0 1px ", "var(--ds-border-selected, #0C66E4)", "\n\t\t\t")
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.loader-wrapper>a, .lozenge-wrapper': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+      boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, #0C66E4)", ", 0px 0px 0px 4px ", "var(--ds-background-accent-yellow-subtler, #F8E6A0)", ", 0px 0px 0px 5px ", "var(--ds-background-accent-yellow-subtler-pressed, #E2B203)", " !important")
     }
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.search-match-selected.search-match-block.ak-editor-selected-node': {
+  '.search-match-block.search-match-block-selected.ak-editor-selected-node': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
     '[data-smart-link-container="true"], .loader-wrapper>div::after': {
       boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-subtler-pressed, #E2B203)", ",\n\t\t\tinset 0 0 0 4px ", "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)", ",\n\t\t\t0 0 0 1px ", "var(--ds-border-selected, #0C66E4)", "\n\t\t\t")
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.loader-wrapper>a, .lozenge-wrapper': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+      boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, #0C66E4)", ", 0px 0px 0px 4px ", "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)", ", 0px 0px 0px 5px ", "var(--ds-background-accent-yellow-subtler-pressed, #E2B203)", " !important")
     }
   },
   /** Dark mode */
-
   /** Without node selection */
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.search-match-block.search-match-dark': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
     '[data-smart-link-container="true"], .loader-wrapper>div::after': {
       boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-bolder, #946F00)", ",\n\t\t\tinset 0 0 0 5px ", "var(--ds-background-accent-yellow-bolder-pressed, #533F04)", "\n\t\t\t")
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.loader-wrapper>a, .lozenge-wrapper, .editor-mention-primitive, .date-lozenger-container': {
+      boxShadow: "0px 0px 0px 4px ".concat("var(--ds-background-accent-yellow-bolder-pressed, #533F04)", ", 0px 0px 0px 5px ", "var(--ds-background-accent-yellow-bolder, #946F00)"),
+      borderRadius: '3px'
     }
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.search-match-selected.search-match-block.search-match-dark': {
+  '.search-match-block.search-match-block-selected.search-match-dark': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
     '[data-smart-link-container="true"], .loader-wrapper>div::after': {
       boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-bolder, #946F00)", ",\n\t\t\tinset 0 0 0 4px ", "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)", "\n\t\t\t")
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.loader-wrapper>a, .lozenge-wrapper, .editor-mention-primitive, .date-lozenger-container': {
+      boxShadow: "0px 0px 0px 4px ".concat("var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)", ", 0px 0px 0px 5px ", "var(--ds-background-accent-yellow-bolder, #946F00)"),
+      borderRadius: '3px'
     }
   },
   /** With node selection */
@@ -91,13 +120,23 @@ var findReplaceStylesNew = exports.findReplaceStylesNew = (0, _react.css)({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
     '.loader-wrapper>div::after': {
       boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-bolder, #946F00)", ",\n\t\t\tinset 0 0 0 5px ", "var(--ds-background-accent-yellow-bolder-pressed, #533F04)", ",\n\t\t\t0 0 0 1px ", "var(--ds-border-selected, #0C66E4)", "\n\t\t\t")
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.loader-wrapper>a, .lozenge-wrapper': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+      boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, #0C66E4)", ", 0px 0px 0px 4px ", "var(--ds-background-accent-yellow-bolder-pressed, #533F04)", ", 0px 0px 0px 5px ", "var(--ds-background-accent-yellow-bolder, #946F00)", " !important")
     }
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.search-match-selected.search-match-block.search-match-dark.ak-editor-selected-node': {
+  '.search-match-block.search-match-block-selected.search-match-dark.ak-editor-selected-node': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
     '[data-smart-link-container="true"], .loader-wrapper>div::after': {
       boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-bolder, #946F00)", ",\n\t\t\tinset 0 0 0 4px ", "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)", ",\n\t\t\t0 0 0 1px ", "var(--ds-border-selected, #0C66E4)", "\n\t\t\t")
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '.loader-wrapper>a, .lozenge-wrapper': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+      boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, #0C66E4)", ", 0px 0px 0px 4px ", "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)", ", 0px 0px 0px 5px ", "var(--ds-background-accent-yellow-bolder, #946F00)", " !important")
     }
   }
 });

package/dist/cjs/version-wrapper.js

@@ -5,4 +5,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.version = exports.name = void 0;
 var name = exports.name = "@atlaskit/editor-core";
-var version = exports.version = "208.3.4";
+var version = exports.version = "208.3.6";

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

@@ -0,0 +1,103 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { mainToolbarFirstChildStyle, mainToolbarSecondChildStyle } from './MainToolbar';
+// Pre-computed static styles for first- and second-child wrappers.
+// These contain no runtime logic and are safe for static-emotion mode.
+
+const firstChildStaticBase = css({
+  display: 'flex',
+  flexGrow: 1
+});
+
+// we can't avoid some kind of function call here, so we need to disable the rule
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+const firstChildStaticTwoLine = css({
+  '@media (max-width: 868px)': {
+    flex: '1 1 100%',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    height: 'var(--ak-editor-fullpage-toolbar-height)',
+    justifyContent: 'flex-end',
+    minWidth: 'fit-content'
+  }
+});
+const secondChildStaticBase = css({
+  minWidth: 'fit-content'
+});
+
+// we can't avoid some kind of function call here, so we need to disable the rule
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+const secondChildStaticTwoLine = css({
+  '@media (max-width: 868px)': {
+    display: 'flex',
+    flexGrow: 1,
+    flex: '1 1 100%',
+    margin: 'auto',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    height: 'var(--ak-editor-fullpage-toolbar-height)',
+    minWidth: 0
+  }
+});
+
+// ---------------- First child wrapper ----------------
+const FirstChildWrapperStatic = ({
+  twoLineEditorToolbar,
+  children,
+  role,
+  'aria-label': ariaLabel,
+  'data-testid': testId
+}) => jsx("div", {
+  css: [firstChildStaticBase, twoLineEditorToolbar && firstChildStaticTwoLine],
+  role: role,
+  "aria-label": ariaLabel,
+  "data-testid": testId
+}, children);
+const FirstChildWrapperDynamic = ({
+  twoLineEditorToolbar,
+  children,
+  role,
+  'aria-label': ariaLabel,
+  'data-testid': testId
+}) => jsx("div", {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage
+  css: mainToolbarFirstChildStyle(twoLineEditorToolbar),
+  role: role,
+  "aria-label": ariaLabel,
+  "data-testid": testId
+}, children);
+export const MainToolbarForFirstChildWrapper = componentWithCondition(() => expValEquals('platform_editor_core_static_emotion_non_central', 'isEnabled', true), FirstChildWrapperStatic, FirstChildWrapperDynamic);
+
+// ---------------- Second child wrapper ----------------
+const SecondChildWrapperStatic = ({
+  twoLineEditorToolbar,
+  children,
+  role,
+  'aria-label': ariaLabel,
+  'data-testid': testId
+}) => jsx("div", {
+  css: [secondChildStaticBase, twoLineEditorToolbar && secondChildStaticTwoLine],
+  role: role,
+  "aria-label": ariaLabel,
+  "data-testid": testId
+}, children);
+const SecondChildWrapperDynamic = ({
+  twoLineEditorToolbar,
+  children,
+  role,
+  'aria-label': ariaLabel,
+  'data-testid': testId
+}) => jsx("div", {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage
+  css: mainToolbarSecondChildStyle(twoLineEditorToolbar),
+  role: role,
+  "aria-label": ariaLabel,
+  "data-testid": testId
+}, children);
+export const MainToolbarForSecondChildWrapper = componentWithCondition(() => expValEquals('platform_editor_core_static_emotion_non_central', 'isEnabled', true), SecondChildWrapperStatic, SecondChildWrapperDynamic);