@atlaskit/editor-core 191.0.9 → 191.1.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-core
 
+## 191.1.0
+
+### Minor Changes
+
+- [#64683](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/64683) [`79c9857b9edb`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/79c9857b9edb) - [ux] [EDF-73] - Added ability for products to toggle on two-line toolbar for comment editors
+
 ## 191.0.9
 
 ### Patch Changes

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

@@ -103,6 +103,7 @@ var Editor = /*#__PURE__*/function (_React$Component) {
         //Alt + F9 to reach first element in this main toolbar
         return event.altKey && (event.key === 'F9' || event.keyCode === 120);
       };
+      var isTwoLineToolbarEnabled = !!customPrimaryToolbarComponents && !!(featureFlags !== null && featureFlags !== void 0 && featureFlags.twoLineEditorToolbar);
       var handleEscape = function handleEscape(event) {
         if (!(editorView !== null && editorView !== void 0 && editorView.hasFocus())) {
           editorView === null || editorView === void 0 || editorView.focus();
@@ -117,7 +118,8 @@ var Editor = /*#__PURE__*/function (_React$Component) {
         className: "akEditor",
         ref: _this.wrapperElementRef
       }, (0, _react2.jsx)(_Toolbar2.MainToolbar, {
-        useStickyToolbar: useStickyToolbar
+        useStickyToolbar: useStickyToolbar,
+        twoLineEditorToolbar: isTwoLineToolbarEnabled
       }, (0, _react2.jsx)(_uiMenu.ToolbarArrowKeyNavigationProvider, {
         editorView: editorView,
         childComponentSelector: "[data-testid='ak-editor-main-toolbar']",
@@ -138,9 +140,10 @@ var Editor = /*#__PURE__*/function (_React$Component) {
         popupsScrollableElement: popupsScrollableElement,
         disabled: !!disabled,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-        containerElement: _this.containerElement
+        containerElement: _this.containerElement,
+        twoLineEditorToolbar: isTwoLineToolbarEnabled
       }), (0, _react2.jsx)("div", {
-        css: _Toolbar2.mainToolbarCustomComponentsSlotStyle
+        css: (0, _Toolbar2.mainToolbarCustomComponentsSlotStyle)(isTwoLineToolbarEnabled)
       }, customPrimaryToolbarComponents))), (0, _react2.jsx)(_Addon.ClickAreaBlock, {
         editorView: editorView,
         editorDisabled: disabled

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.mainToolbarCustomComponentsSlotStyle = exports.TableControlsPadding = exports.MainToolbar = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
@@ -18,7 +19,11 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var TableControlsPadding = exports.TableControlsPadding = 20;
-var mainToolbarWrapperStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  align-items: center;\n  padding: ", " ", " 0;\n  display: flex;\n  height: auto;\n  background-color: ", ";\n  box-shadow: none;\n  padding-left: ", ";\n\n  & > div {\n    > :first-child:not(style),\n    > style:first-child + * {\n      margin-left: 0;\n    }\n  }\n\n  .block-type-btn {\n    padding-left: 0;\n  }\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-surface, white)", "var(--ds-space-250, 20px)");
+var MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = 490;
+var mainToolbarWrapperStyle = function mainToolbarWrapperStyle() {
+  var isTwoLineEditorToolbar = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  align-items: center;\n  padding: ", " ", " 0;\n  display: flex;\n  height: auto;\n  background-color: ", ";\n  box-shadow: none;\n  padding-left: ", ";\n\n  & > div {\n    > :first-child:not(style),\n    > style:first-child + * {\n      margin-left: 0;\n    }\n    ", "\n  }\n\n  .block-type-btn {\n    padding-left: 0;\n  }\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-surface, white)", "var(--ds-space-250, 20px)", isTwoLineEditorToolbar && "\n        @media (max-width: ".concat(MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, "px) {\n          flex-direction: column-reverse;\n          align-items: end;\n          display: flex;\n          justify-content: flex-end;\n        }\n\n        //make this more explicit for a toolbar\n        > *:nth-child(1) {\n          @media (max-width: ").concat(MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, "px) {\n            > div:nth-child(2) {\n              justify-content: flex-end;\n              display: flex;\n            }\n          }\n        }\n    "));
+};
 var stickyToolbarWrapperStyle = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  /* stylelint-disable declaration-block-no-duplicate-properties */\n  position: relative;\n  position: sticky;\n  /* stylelint-enable declaration-block-no-duplicate-properties */\n  padding-bottom: ", ";\n  z-index: ", ";\n  transition: box-shadow ease-in-out 0.2s;\n  &.show-keyline {\n    box-shadow: 0 ", "px 0 0\n      ", ";\n  }\n"])), "var(--ds-space-100, 8px)", _editorSharedStyles.akEditorMenuZIndex, _editorSharedStyles.akEditorToolbarKeylineHeight, "var(--ds-border, ".concat(_colors.N30, ")"));
 var StickyToolbar = function StickyToolbar(props) {
   var _useState = (0, _react.useState)(0),
@@ -38,14 +43,14 @@ var StickyToolbar = function StickyToolbar(props) {
     }
   }, [props.externalToolbarRef, props.offsetTop]);
   return (0, _react2.jsx)("div", {
-    css: [mainToolbarWrapperStyle, stickyToolbarWrapperStyle, (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n          top: ", "px;\n        "])), top)],
+    css: [mainToolbarWrapperStyle(props.twoLineEditorToolbar), stickyToolbarWrapperStyle, (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n          top: ", "px;\n        "])), top)],
     "data-testid": "ak-editor-main-toolbar",
     className: 'show-keyline'
   }, props.children);
 };
 var FixedToolbar = function FixedToolbar(props) {
   return (0, _react2.jsx)("div", {
-    css: mainToolbarWrapperStyle,
+    css: mainToolbarWrapperStyle(props.twoLineEditorToolbar),
     "data-testid": "ak-editor-main-toolbar"
   }, props.children);
 };
@@ -79,10 +84,18 @@ var getStickyParameters = function getStickyParameters(configuration) {
 };
 var MainToolbar = exports.MainToolbar = function MainToolbar(_ref) {
   var useStickyToolbar = _ref.useStickyToolbar,
+    twoLineEditorToolbar = _ref.twoLineEditorToolbar,
     children = _ref.children;
   if (useStickyToolbar) {
-    return (0, _react2.jsx)(StickyToolbar, getStickyParameters(useStickyToolbar), children);
+    return (0, _react2.jsx)(StickyToolbar, (0, _extends2.default)({}, getStickyParameters(useStickyToolbar), {
+      twoLineEditorToolbar: twoLineEditorToolbar
+    }), children);
   }
-  return (0, _react2.jsx)(FixedToolbar, null, children);
+  return (0, _react2.jsx)(FixedToolbar, {
+    twoLineEditorToolbar: twoLineEditorToolbar
+  }, children);
 };
-var mainToolbarCustomComponentsSlotStyle = exports.mainToolbarCustomComponentsSlotStyle = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  flex-grow: 1;\n  padding-right: ", ";\n  > div {\n    display: flex;\n    flex-shrink: 0;\n  }\n"])), "var(--ds-space-250, 20px)");
+var mainToolbarCustomComponentsSlotStyle = exports.mainToolbarCustomComponentsSlotStyle = function mainToolbarCustomComponentsSlotStyle() {
+  var isTwoLineEditorToolbar = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  flex-grow: 1;\n  padding-right: ", ";\n  ", "\n  > div {\n    display: flex;\n    flex-shrink: 0;\n  }\n"])), "var(--ds-space-250, 20px)", isTwoLineEditorToolbar && "\n    @media (max-width: ".concat(MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, "px) {\n      {\n        padding-right: 0;\n      }\n    }\n  "));
+};

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

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

@@ -128,6 +128,7 @@ class Editor extends React.Component {
         //Alt + F9 to reach first element in this main toolbar
         return event.altKey && (event.key === 'F9' || event.keyCode === 120);
       };
+      const isTwoLineToolbarEnabled = !!customPrimaryToolbarComponents && !!(featureFlags !== null && featureFlags !== void 0 && featureFlags.twoLineEditorToolbar);
       const handleEscape = event => {
         if (!(editorView !== null && editorView !== void 0 && editorView.hasFocus())) {
           editorView === null || editorView === void 0 ? void 0 : editorView.focus();
@@ -144,7 +145,8 @@ class Editor extends React.Component {
         className: "akEditor",
         ref: this.wrapperElementRef
       }, jsx(MainToolbar, {
-        useStickyToolbar: useStickyToolbar
+        useStickyToolbar: useStickyToolbar,
+        twoLineEditorToolbar: isTwoLineToolbarEnabled
       }, jsx(ToolbarArrowKeyNavigationProvider, {
         editorView: editorView,
         childComponentSelector: "[data-testid='ak-editor-main-toolbar']",
@@ -165,9 +167,10 @@ class Editor extends React.Component {
         popupsScrollableElement: popupsScrollableElement,
         disabled: !!disabled,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-        containerElement: this.containerElement
+        containerElement: this.containerElement,
+        twoLineEditorToolbar: isTwoLineToolbarEnabled
       }), jsx("div", {
-        css: mainToolbarCustomComponentsSlotStyle
+        css: mainToolbarCustomComponentsSlotStyle(isTwoLineToolbarEnabled)
       }, customPrimaryToolbarComponents))), jsx(ClickAreaBlock, {
         editorView: editorView,
         editorDisabled: disabled

package/dist/es2019/ui/Appearance/Comment/Toolbar.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 
 import React, { useEffect, useState } from 'react';
@@ -5,7 +6,8 @@ import { css, jsx } from '@emotion/react';
 import { N30 } from '@atlaskit/theme/colors';
 import { akEditorToolbarKeylineHeight, akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
 export const TableControlsPadding = 20;
-const mainToolbarWrapperStyle = css`
+const MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = 490;
+const mainToolbarWrapperStyle = (isTwoLineEditorToolbar = false) => css`
   position: relative;
   align-items: center;
   padding: ${"var(--ds-space-100, 8px)"} ${"var(--ds-space-100, 8px)"} 0;
@@ -20,6 +22,24 @@ const mainToolbarWrapperStyle = css`
     > style:first-child + * {
       margin-left: 0;
     }
+    ${isTwoLineEditorToolbar && `
+        @media (max-width: ${MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT}px) {
+          flex-direction: column-reverse;
+          align-items: end;
+          display: flex;
+          justify-content: flex-end;
+        }
+
+        //make this more explicit for a toolbar
+        > *:nth-child(1) {
+          @media (max-width: ${MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT}px) {
+            > div:nth-child(2) {
+              justify-content: flex-end;
+              display: flex;
+            }
+          }
+        }
+    `}
   }
 
   .block-type-btn {
@@ -54,7 +74,7 @@ const StickyToolbar = props => {
     }
   }, [props.externalToolbarRef, props.offsetTop]);
   return jsx("div", {
-    css: [mainToolbarWrapperStyle, stickyToolbarWrapperStyle, css`
+    css: [mainToolbarWrapperStyle(props.twoLineEditorToolbar), stickyToolbarWrapperStyle, css`
           top: ${top}px;
         `],
     "data-testid": "ak-editor-main-toolbar",
@@ -62,7 +82,7 @@ const StickyToolbar = props => {
   }, props.children);
 };
 const FixedToolbar = props => jsx("div", {
-  css: mainToolbarWrapperStyle,
+  css: mainToolbarWrapperStyle(props.twoLineEditorToolbar),
   "data-testid": "ak-editor-main-toolbar"
 }, props.children);
 
@@ -95,19 +115,31 @@ const getStickyParameters = configuration => {
 };
 export const MainToolbar = ({
   useStickyToolbar,
+  twoLineEditorToolbar,
   children
 }) => {
   if (useStickyToolbar) {
-    return jsx(StickyToolbar, getStickyParameters(useStickyToolbar), children);
+    return jsx(StickyToolbar, _extends({}, getStickyParameters(useStickyToolbar), {
+      twoLineEditorToolbar: twoLineEditorToolbar
+    }), children);
   }
-  return jsx(FixedToolbar, null, children);
+  return jsx(FixedToolbar, {
+    twoLineEditorToolbar: twoLineEditorToolbar
+  }, children);
 };
-export const mainToolbarCustomComponentsSlotStyle = css`
+export const mainToolbarCustomComponentsSlotStyle = (isTwoLineEditorToolbar = false) => css`
   display: flex;
   justify-content: flex-end;
   align-items: center;
   flex-grow: 1;
   padding-right: ${"var(--ds-space-250, 20px)"};
+  ${isTwoLineEditorToolbar && `
+    @media (max-width: ${MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT}px) {
+      {
+        padding-right: 0;
+      }
+    }
+  `}
   > div {
     display: flex;
     flex-shrink: 0;

package/dist/es2019/version-wrapper.js

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

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

@@ -93,6 +93,7 @@ var Editor = /*#__PURE__*/function (_React$Component) {
         //Alt + F9 to reach first element in this main toolbar
         return event.altKey && (event.key === 'F9' || event.keyCode === 120);
       };
+      var isTwoLineToolbarEnabled = !!customPrimaryToolbarComponents && !!(featureFlags !== null && featureFlags !== void 0 && featureFlags.twoLineEditorToolbar);
       var handleEscape = function handleEscape(event) {
         if (!(editorView !== null && editorView !== void 0 && editorView.hasFocus())) {
           editorView === null || editorView === void 0 || editorView.focus();
@@ -107,7 +108,8 @@ var Editor = /*#__PURE__*/function (_React$Component) {
         className: "akEditor",
         ref: _this.wrapperElementRef
       }, jsx(MainToolbar, {
-        useStickyToolbar: useStickyToolbar
+        useStickyToolbar: useStickyToolbar,
+        twoLineEditorToolbar: isTwoLineToolbarEnabled
       }, jsx(ToolbarArrowKeyNavigationProvider, {
         editorView: editorView,
         childComponentSelector: "[data-testid='ak-editor-main-toolbar']",
@@ -128,9 +130,10 @@ var Editor = /*#__PURE__*/function (_React$Component) {
         popupsScrollableElement: popupsScrollableElement,
         disabled: !!disabled,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-        containerElement: _this.containerElement
+        containerElement: _this.containerElement,
+        twoLineEditorToolbar: isTwoLineToolbarEnabled
       }), jsx("div", {
-        css: mainToolbarCustomComponentsSlotStyle
+        css: mainToolbarCustomComponentsSlotStyle(isTwoLineToolbarEnabled)
       }, customPrimaryToolbarComponents))), jsx(ClickAreaBlock, {
         editorView: editorView,
         editorDisabled: disabled

package/dist/esm/ui/Appearance/Comment/Toolbar.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _typeof from "@babel/runtime/helpers/typeof";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
@@ -9,7 +10,11 @@ import { css, jsx } from '@emotion/react';
 import { N30 } from '@atlaskit/theme/colors';
 import { akEditorToolbarKeylineHeight, akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
 export var TableControlsPadding = 20;
-var mainToolbarWrapperStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  align-items: center;\n  padding: ", " ", " 0;\n  display: flex;\n  height: auto;\n  background-color: ", ";\n  box-shadow: none;\n  padding-left: ", ";\n\n  & > div {\n    > :first-child:not(style),\n    > style:first-child + * {\n      margin-left: 0;\n    }\n  }\n\n  .block-type-btn {\n    padding-left: 0;\n  }\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-surface, white)", "var(--ds-space-250, 20px)");
+var MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = 490;
+var mainToolbarWrapperStyle = function mainToolbarWrapperStyle() {
+  var isTwoLineEditorToolbar = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  align-items: center;\n  padding: ", " ", " 0;\n  display: flex;\n  height: auto;\n  background-color: ", ";\n  box-shadow: none;\n  padding-left: ", ";\n\n  & > div {\n    > :first-child:not(style),\n    > style:first-child + * {\n      margin-left: 0;\n    }\n    ", "\n  }\n\n  .block-type-btn {\n    padding-left: 0;\n  }\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-surface, white)", "var(--ds-space-250, 20px)", isTwoLineEditorToolbar && "\n        @media (max-width: ".concat(MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, "px) {\n          flex-direction: column-reverse;\n          align-items: end;\n          display: flex;\n          justify-content: flex-end;\n        }\n\n        //make this more explicit for a toolbar\n        > *:nth-child(1) {\n          @media (max-width: ").concat(MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, "px) {\n            > div:nth-child(2) {\n              justify-content: flex-end;\n              display: flex;\n            }\n          }\n        }\n    "));
+};
 var stickyToolbarWrapperStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  /* stylelint-disable declaration-block-no-duplicate-properties */\n  position: relative;\n  position: sticky;\n  /* stylelint-enable declaration-block-no-duplicate-properties */\n  padding-bottom: ", ";\n  z-index: ", ";\n  transition: box-shadow ease-in-out 0.2s;\n  &.show-keyline {\n    box-shadow: 0 ", "px 0 0\n      ", ";\n  }\n"])), "var(--ds-space-100, 8px)", akEditorMenuZIndex, akEditorToolbarKeylineHeight, "var(--ds-border, ".concat(N30, ")"));
 var StickyToolbar = function StickyToolbar(props) {
   var _useState = useState(0),
@@ -29,14 +34,14 @@ var StickyToolbar = function StickyToolbar(props) {
     }
   }, [props.externalToolbarRef, props.offsetTop]);
   return jsx("div", {
-    css: [mainToolbarWrapperStyle, stickyToolbarWrapperStyle, css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          top: ", "px;\n        "])), top)],
+    css: [mainToolbarWrapperStyle(props.twoLineEditorToolbar), stickyToolbarWrapperStyle, css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          top: ", "px;\n        "])), top)],
     "data-testid": "ak-editor-main-toolbar",
     className: 'show-keyline'
   }, props.children);
 };
 var FixedToolbar = function FixedToolbar(props) {
   return jsx("div", {
-    css: mainToolbarWrapperStyle,
+    css: mainToolbarWrapperStyle(props.twoLineEditorToolbar),
     "data-testid": "ak-editor-main-toolbar"
   }, props.children);
 };
@@ -70,10 +75,18 @@ var getStickyParameters = function getStickyParameters(configuration) {
 };
 export var MainToolbar = function MainToolbar(_ref) {
   var useStickyToolbar = _ref.useStickyToolbar,
+    twoLineEditorToolbar = _ref.twoLineEditorToolbar,
     children = _ref.children;
   if (useStickyToolbar) {
-    return jsx(StickyToolbar, getStickyParameters(useStickyToolbar), children);
+    return jsx(StickyToolbar, _extends({}, getStickyParameters(useStickyToolbar), {
+      twoLineEditorToolbar: twoLineEditorToolbar
+    }), children);
   }
-  return jsx(FixedToolbar, null, children);
+  return jsx(FixedToolbar, {
+    twoLineEditorToolbar: twoLineEditorToolbar
+  }, children);
 };
-export var mainToolbarCustomComponentsSlotStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  flex-grow: 1;\n  padding-right: ", ";\n  > div {\n    display: flex;\n    flex-shrink: 0;\n  }\n"])), "var(--ds-space-250, 20px)");
+export var mainToolbarCustomComponentsSlotStyle = function mainToolbarCustomComponentsSlotStyle() {
+  var isTwoLineEditorToolbar = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  flex-grow: 1;\n  padding-right: ", ";\n  ", "\n  > div {\n    display: flex;\n    flex-shrink: 0;\n  }\n"])), "var(--ds-space-250, 20px)", isTwoLineEditorToolbar && "\n    @media (max-width: ".concat(MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, "px) {\n      {\n        padding-right: 0;\n      }\n    }\n  "));
+};

package/dist/esm/version-wrapper.js

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

package/dist/types/ui/Appearance/Comment/Toolbar.d.ts

@@ -3,7 +3,8 @@ import type { UseStickyToolbarType } from '@atlaskit/editor-common/ui';
 export declare const TableControlsPadding = 20;
 type MainToolbarProps = {
     useStickyToolbar?: UseStickyToolbarType;
+    twoLineEditorToolbar?: boolean;
 };
 export declare const MainToolbar: React.FC<MainToolbarProps>;
-export declare const mainToolbarCustomComponentsSlotStyle: import("@emotion/react").SerializedStyles;
+export declare const mainToolbarCustomComponentsSlotStyle: (isTwoLineEditorToolbar?: boolean) => import("@emotion/react").SerializedStyles;
 export {};

package/dist/types-ts4.5/ui/Appearance/Comment/Toolbar.d.ts

@@ -3,7 +3,8 @@ import type { UseStickyToolbarType } from '@atlaskit/editor-common/ui';
 export declare const TableControlsPadding = 20;
 type MainToolbarProps = {
     useStickyToolbar?: UseStickyToolbarType;
+    twoLineEditorToolbar?: boolean;
 };
 export declare const MainToolbar: React.FC<MainToolbarProps>;
-export declare const mainToolbarCustomComponentsSlotStyle: import("@emotion/react").SerializedStyles;
+export declare const mainToolbarCustomComponentsSlotStyle: (isTwoLineEditorToolbar?: boolean) => import("@emotion/react").SerializedStyles;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-core",
-  "version": "191.0.9",
+  "version": "191.1.0",
   "description": "A package contains Atlassian editor core functionality",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -162,7 +162,7 @@
     "@atlaskit/analytics-listeners": "^8.9.0",
     "@atlaskit/checkbox": "^13.0.0",
     "@atlaskit/code": "^15.1.0",
-    "@atlaskit/collab-provider": "9.21.2",
+    "@atlaskit/collab-provider": "9.21.3",
     "@atlaskit/dropdown-menu": "^12.1.0",
     "@atlaskit/editor-extension-dropbox": "^0.4.0",
     "@atlaskit/editor-palette": "1.5.2",
@@ -184,7 +184,7 @@
     "@atlaskit/visual-regression": "*",
     "@atlassian/adf-schema-json": "^1.0.7",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
-    "@atlassian/editor-extension-link-create": "^1.1.0",
+    "@atlassian/editor-extension-link-create": "^1.2.0",
     "@atlassian/feature-flags-test-utils": "^0.1.1",
     "@atlassian/link-picker-plugins": "^24.0.0",
     "@atlassian/search-provider": "2.4.11",