@atlaskit/editor-core 191.0.8 → 191.1.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @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
+
+- [#66388](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/66388) [`1698d83da05f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1698d83da05f) - ED-21743: Extract find replace plugin from editor-core
+- Updated dependencies
+
 ## 191.0.8
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -133,6 +133,9 @@
         {
             "path": "../../editor-plugin-feedback-dialog/afm-cc/tsconfig.json"
         },
+        {
+            "path": "../../editor-plugin-find-replace/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../editor-plugin-floating-toolbar/afm-cc/tsconfig.json"
         },
@@ -277,9 +280,6 @@
         {
             "path": "../../../elements/task-decision/afm-cc/tsconfig.json"
         },
-        {
-            "path": "../../../design-system/textfield/afm-cc/tsconfig.json"
-        },
         {
             "path": "../../../design-system/theme/afm-cc/tsconfig.json"
         },

package/dist/cjs/plugins/index.js

@@ -10,12 +10,6 @@ Object.defineProperty(exports, "avatarGroupPlugin", {
     return _avatarGroup.default;
   }
 });
-Object.defineProperty(exports, "findReplacePlugin", {
-  enumerable: true,
-  get: function get() {
-    return _findReplace.default;
-  }
-});
 Object.defineProperty(exports, "jiraIssuePlugin", {
   enumerable: true,
   get: function get() {
@@ -23,5 +17,4 @@ Object.defineProperty(exports, "jiraIssuePlugin", {
   }
 });
 var _jiraIssue = _interopRequireDefault(require("./jira-issue"));
-var _findReplace = _interopRequireDefault(require("./find-replace"));
 var _avatarGroup = _interopRequireDefault(require("./avatar-group"));

package/dist/cjs/presets/universal.js

@@ -53,6 +53,7 @@ var _plugins = require("../plugins");
 var _editorPluginExtension = require("@atlaskit/editor-plugin-extension");
 var _editorPluginBeforePrimaryToolbar = require("@atlaskit/editor-plugin-before-primary-toolbar");
 var _editorPluginFeedbackDialog = require("@atlaskit/editor-plugin-feedback-dialog");
+var _editorPluginFindReplace = require("@atlaskit/editor-plugin-find-replace");
 var _utils = require("@atlaskit/editor-common/utils");
 var _isFullPage = require("../utils/is-full-page");
 var _default = require("./default");
@@ -397,7 +398,7 @@ function createUniversalPreset(appearance, props, featureFlags, prevAppearance,
       }]);
     }
     return builder;
-  }).maybeAdd(_plugins.findReplacePlugin, function (plugin, builder) {
+  }).maybeAdd(_editorPluginFindReplace.findReplacePlugin, function (plugin, builder) {
     if (props.allowFindReplace) {
       return builder.add([plugin, {
         takeFullWidth: !props.hideAvatarGroup && !!featureFlags.showAvatarGroupAsPlugin === false && !hasBeforePrimaryToolbar(props.primaryToolbarComponents),

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/ui/Appearance/FullPage/FullPageToolbar.js

@@ -70,7 +70,7 @@ var EditorToolbar = exports.EditorToolbar = /*#__PURE__*/_react.default.memo(fun
     featureFlags: props.featureFlags || {},
     editorAnalyticsAPI: editorAPI === null || editorAPI === void 0 || (_editorAPI$analytics = editorAPI.analytics) === null || _editorAPI$analytics === void 0 ? void 0 : _editorAPI$analytics.actions,
     editorAPI: editorAPI
-  }), editorAPI !== null && editorAPI !== void 0 && editorAPI.findReplace && twoLineEditorToolbar ? editorAPI === null || editorAPI === void 0 ? void 0 : editorAPI.findReplace.actions.getToolbar({
+  }), editorAPI !== null && editorAPI !== void 0 && editorAPI.findReplace && twoLineEditorToolbar ? editorAPI === null || editorAPI === void 0 ? void 0 : editorAPI.findReplace.actions.getToolbarButton({
     popupsBoundariesElement: props.popupsBoundariesElement,
     popupsMountPoint: props.popupsMountPoint,
     popupsScrollableElement: props.popupsScrollableElement,

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

@@ -23,7 +23,7 @@ var _panel = require("./panel");
 var _styles4 = require("@atlaskit/editor-plugin-placeholder-text/styles");
 var _extension = require("./extension");
 var _expand = require("./expand");
-var _styles5 = require("../../plugins/find-replace/styles");
+var _styles5 = require("@atlaskit/editor-plugin-find-replace/styles");
 var _tasksAndDecisions = require("./tasks-and-decisions");
 var _status = require("./status");
 var _date = require("./date");

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

package/dist/es2019/plugins/index.js

@@ -1,3 +1,2 @@
 export { default as jiraIssuePlugin } from './jira-issue';
-export { default as findReplacePlugin } from './find-replace';
 export { default as avatarGroupPlugin } from './avatar-group';

package/dist/es2019/presets/universal.js

@@ -39,10 +39,11 @@ import { dataConsumerPlugin } from '@atlaskit/editor-plugin-data-consumer';
 import { annotationPlugin } from '@atlaskit/editor-plugin-annotation';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { collabEditPlugin } from '@atlaskit/editor-plugin-collab-edit';
-import { avatarGroupPlugin, findReplacePlugin, jiraIssuePlugin } from '../plugins';
+import { avatarGroupPlugin, jiraIssuePlugin } from '../plugins';
 import { extensionPlugin } from '@atlaskit/editor-plugin-extension';
 import { beforePrimaryToolbarPlugin } from '@atlaskit/editor-plugin-before-primary-toolbar';
 import { feedbackDialogPlugin } from '@atlaskit/editor-plugin-feedback-dialog';
+import { findReplacePlugin } from '@atlaskit/editor-plugin-find-replace';
 import { shouldForceTracking } from '@atlaskit/editor-common/utils';
 import { isFullPage as fullPageCheck } from '../utils/is-full-page';
 import { createDefaultPreset } from './default';

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/ui/Appearance/FullPage/FullPageToolbar.js

@@ -56,7 +56,7 @@ export const EditorToolbar = /*#__PURE__*/React.memo(props => {
     featureFlags: props.featureFlags || {},
     editorAnalyticsAPI: editorAPI === null || editorAPI === void 0 ? void 0 : (_editorAPI$analytics = editorAPI.analytics) === null || _editorAPI$analytics === void 0 ? void 0 : _editorAPI$analytics.actions,
     editorAPI: editorAPI
-  }), editorAPI !== null && editorAPI !== void 0 && editorAPI.findReplace && twoLineEditorToolbar ? editorAPI === null || editorAPI === void 0 ? void 0 : editorAPI.findReplace.actions.getToolbar({
+  }), editorAPI !== null && editorAPI !== void 0 && editorAPI.findReplace && twoLineEditorToolbar ? editorAPI === null || editorAPI === void 0 ? void 0 : editorAPI.findReplace.actions.getToolbarButton({
     popupsBoundariesElement: props.popupsBoundariesElement,
     popupsMountPoint: props.popupsMountPoint,
     popupsScrollableElement: props.popupsScrollableElement,

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

@@ -16,7 +16,7 @@ import { placeholderTextStyles } from '@atlaskit/editor-plugin-placeholder-text/
 import { extensionStyles } from './extension';
 import { expandStyles } from './expand';
 import { MediaSharedClassNames } from '@atlaskit/editor-common/styles';
-import { findReplaceStyles } from '../../plugins/find-replace/styles';
+import { findReplaceStyles } from '@atlaskit/editor-plugin-find-replace/styles';
 import { taskDecisionStyles } from './tasks-and-decisions';
 import { statusStyles } from './status';
 import { dateStyles } from './date';

package/dist/es2019/version-wrapper.js

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

package/dist/esm/plugins/index.js

@@ -1,3 +1,2 @@
 export { default as jiraIssuePlugin } from './jira-issue';
-export { default as findReplacePlugin } from './find-replace';
 export { default as avatarGroupPlugin } from './avatar-group';

package/dist/esm/presets/universal.js

@@ -43,10 +43,11 @@ import { dataConsumerPlugin } from '@atlaskit/editor-plugin-data-consumer';
 import { annotationPlugin } from '@atlaskit/editor-plugin-annotation';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { collabEditPlugin } from '@atlaskit/editor-plugin-collab-edit';
-import { avatarGroupPlugin, findReplacePlugin, jiraIssuePlugin } from '../plugins';
+import { avatarGroupPlugin, jiraIssuePlugin } from '../plugins';
 import { extensionPlugin } from '@atlaskit/editor-plugin-extension';
 import { beforePrimaryToolbarPlugin } from '@atlaskit/editor-plugin-before-primary-toolbar';
 import { feedbackDialogPlugin } from '@atlaskit/editor-plugin-feedback-dialog';
+import { findReplacePlugin } from '@atlaskit/editor-plugin-find-replace';
 import { shouldForceTracking } from '@atlaskit/editor-common/utils';
 import { isFullPage as fullPageCheck } from '../utils/is-full-page';
 import { createDefaultPreset } from './default';

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/ui/Appearance/FullPage/FullPageToolbar.js

@@ -60,7 +60,7 @@ export var EditorToolbar = /*#__PURE__*/React.memo(function (props) {
     featureFlags: props.featureFlags || {},
     editorAnalyticsAPI: editorAPI === null || editorAPI === void 0 || (_editorAPI$analytics = editorAPI.analytics) === null || _editorAPI$analytics === void 0 ? void 0 : _editorAPI$analytics.actions,
     editorAPI: editorAPI
-  }), editorAPI !== null && editorAPI !== void 0 && editorAPI.findReplace && twoLineEditorToolbar ? editorAPI === null || editorAPI === void 0 ? void 0 : editorAPI.findReplace.actions.getToolbar({
+  }), editorAPI !== null && editorAPI !== void 0 && editorAPI.findReplace && twoLineEditorToolbar ? editorAPI === null || editorAPI === void 0 ? void 0 : editorAPI.findReplace.actions.getToolbarButton({
     popupsBoundariesElement: props.popupsBoundariesElement,
     popupsMountPoint: props.popupsMountPoint,
     popupsScrollableElement: props.popupsScrollableElement,

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

@@ -18,7 +18,7 @@ import { placeholderTextStyles } from '@atlaskit/editor-plugin-placeholder-text/
 import { extensionStyles } from './extension';
 import { expandStyles } from './expand';
 import { MediaSharedClassNames } from '@atlaskit/editor-common/styles';
-import { findReplaceStyles } from '../../plugins/find-replace/styles';
+import { findReplaceStyles } from '@atlaskit/editor-plugin-find-replace/styles';
 import { taskDecisionStyles } from './tasks-and-decisions';
 import { statusStyles } from './status';
 import { dateStyles } from './date';

package/dist/esm/version-wrapper.js

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

package/dist/types/plugins/index.d.ts

@@ -1,3 +1,2 @@
 export { default as jiraIssuePlugin } from './jira-issue';
-export { default as findReplacePlugin } from './find-replace';
 export { default as avatarGroupPlugin } from './avatar-group';

package/dist/types/types/editor-props.d.ts

@@ -17,7 +17,7 @@ import type { BlockTypePluginOptions } from '@atlaskit/editor-plugin-block-type'
 import type { CodeBlockOptions } from '@atlaskit/editor-plugin-code-block';
 import type { CollabEditOptions } from '@atlaskit/editor-common/collab';
 import type { DatePluginConfig } from '@atlaskit/editor-plugin-date';
-import type { FindReplaceOptions } from '../plugins/find-replace/types';
+import type { FindReplaceOptions } from '@atlaskit/editor-plugin-find-replace';
 import type { LayoutPluginOptions } from '@atlaskit/editor-plugin-layout';
 import type { MediaOptions, MediaState } from '@atlaskit/editor-plugin-media/types';
 import type { MentionPluginConfig } from '@atlaskit/editor-plugin-mentions';

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/plugins/index.d.ts

@@ -1,3 +1,2 @@
 export { default as jiraIssuePlugin } from './jira-issue';
-export { default as findReplacePlugin } from './find-replace';
 export { default as avatarGroupPlugin } from './avatar-group';

package/dist/types-ts4.5/types/editor-props.d.ts

@@ -17,7 +17,7 @@ import type { BlockTypePluginOptions } from '@atlaskit/editor-plugin-block-type'
 import type { CodeBlockOptions } from '@atlaskit/editor-plugin-code-block';
 import type { CollabEditOptions } from '@atlaskit/editor-common/collab';
 import type { DatePluginConfig } from '@atlaskit/editor-plugin-date';
-import type { FindReplaceOptions } from '../plugins/find-replace/types';
+import type { FindReplaceOptions } from '@atlaskit/editor-plugin-find-replace';
 import type { LayoutPluginOptions } from '@atlaskit/editor-plugin-layout';
 import type { MediaOptions, MediaState } from '@atlaskit/editor-plugin-media/types';
 import type { MentionPluginConfig } from '@atlaskit/editor-plugin-mentions';

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 {};