@atlaskit/editor-core 191.0.9 → 191.1.3

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-core
 
+## 191.1.3
+
+### Patch Changes
+
+- [#65788](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/65788) [`be744e423e9f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/be744e423e9f) - ED-21700 Extraction of avatar group plugin
+- [#67194](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/67194) [`37379761475c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/37379761475c) - [ED-21806] Skip changes from NCS and tinted transactions.
+- Updated dependencies
+
+## 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/afm-cc/tsconfig.json

@@ -28,12 +28,6 @@
         {
             "path": "../../../analytics/analytics-next/afm-cc/tsconfig.json"
         },
-        {
-            "path": "../../../design-system/avatar/afm-cc/tsconfig.json"
-        },
-        {
-            "path": "../../../design-system/avatar-group/afm-cc/tsconfig.json"
-        },
         {
             "path": "../../../design-system/button/afm-cc/tsconfig.json"
         },
@@ -52,6 +46,9 @@
         {
             "path": "../../editor-plugin-annotation/afm-cc/tsconfig.json"
         },
+        {
+            "path": "../../editor-plugin-avatar-group/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../editor-plugin-base/afm-cc/tsconfig.json"
         },

package/dist/cjs/plugins/index.js

@@ -4,17 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "avatarGroupPlugin", {
-  enumerable: true,
-  get: function get() {
-    return _avatarGroup.default;
-  }
-});
 Object.defineProperty(exports, "jiraIssuePlugin", {
   enumerable: true,
   get: function get() {
     return _jiraIssue.default;
   }
 });
-var _jiraIssue = _interopRequireDefault(require("./jira-issue"));
-var _avatarGroup = _interopRequireDefault(require("./avatar-group"));
+var _jiraIssue = _interopRequireDefault(require("./jira-issue"));

package/dist/cjs/presets/universal.js

@@ -49,6 +49,7 @@ var _editorPluginDataConsumer = require("@atlaskit/editor-plugin-data-consumer")
 var _editorPluginAnnotation = require("@atlaskit/editor-plugin-annotation");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _editorPluginCollabEdit = require("@atlaskit/editor-plugin-collab-edit");
+var _editorPluginAvatarGroup = require("@atlaskit/editor-plugin-avatar-group");
 var _plugins = require("../plugins");
 var _editorPluginExtension = require("@atlaskit/editor-plugin-extension");
 var _editorPluginBeforePrimaryToolbar = require("@atlaskit/editor-plugin-before-primary-toolbar");
@@ -386,19 +387,15 @@ function createUniversalPreset(appearance, props, featureFlags, prevAppearance,
       }]);
     }
     return builder;
-  }).maybeAdd(_plugins.avatarGroupPlugin, function (plugin, builder) {
-    if (!props.hideAvatarGroup && featureFlags.showAvatarGroupAsPlugin === true && !featureFlags.twoLineEditorToolbar) {
-      // Avatars are moved to Confluence codebase for Edit in Context
-      // When Edit in Context is enabled primaryToolbarComponents is undefined
-      // For more details please check
-      // https://hello.atlassian.net/wiki/spaces/PCG/pages/2851572180/Editor+toolbar+for+live+pages+and+edit+in+context+projects
-      return builder.add([plugin, {
-        collabEdit: props.collabEdit,
-        takeFullWidth: !hasBeforePrimaryToolbar(props.primaryToolbarComponents)
-      }]);
-    }
-    return builder;
-  }).maybeAdd(_editorPluginFindReplace.findReplacePlugin, function (plugin, builder) {
+  }).add([_editorPluginAvatarGroup.avatarGroupPlugin, {
+    // Avatars are moved to Confluence codebase for Edit in Context
+    // When Edit in Context is enabled primaryToolbarComponents is undefined
+    // For more details please check
+    // https://hello.atlassian.net/wiki/spaces/PCG/pages/2851572180/Editor+toolbar+for+live+pages+and+edit+in+context+projects
+    collabEdit: props.collabEdit,
+    takeFullWidth: !hasBeforePrimaryToolbar(props.primaryToolbarComponents),
+    showAvatarGroup: !props.hideAvatarGroup && featureFlags.showAvatarGroupAsPlugin === true && !featureFlags.twoLineEditorToolbar
+  }]).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/Addon/click-area-helper.js

@@ -7,6 +7,7 @@ exports.clickAreaClickHandler = exports.checkForModal = void 0;
 var _utils = require("@atlaskit/editor-common/utils");
 var _selection = require("@atlaskit/editor-common/selection");
 var _commands = require("@atlaskit/editor-common/commands");
+var _collab = require("@atlaskit/editor-common/collab");
 // we ignore all of the clicks made inside <div class="ak-editor-content-area" /> (but not clicks on the node itself)
 var insideContentArea = function insideContentArea(ref) {
   while (ref) {
@@ -101,6 +102,7 @@ var outsideProsemirrorEditorClickHandler = function outsideProsemirrorEditorClic
     (0, _commands.addParagraphAtEnd)(tr);
   }
   (0, _selection.setSelectionTopLevelBlocks)(tr, event, dom, view.posAtCoords.bind(view), isEditorFocused);
+  (0, _collab.tintDirtyTransaction)(tr);
   if (!tr.docChanged && !tr.selectionSet) {
     return;
   }

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

@@ -10,10 +10,9 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
-var _ui = _interopRequireDefault(require("../../../plugins/avatar-group/ui"));
 var _Toolbar = _interopRequireDefault(require("../../Toolbar"));
 var _MainToolbar = require("./MainToolbar");
-var _ui2 = require("@atlaskit/editor-common/ui");
+var _ui = require("@atlaskit/editor-common/ui");
 var _messages = require("@atlaskit/editor-common/messages");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _context = require("../../../presets/context");
@@ -23,7 +22,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 /** @jsx jsx */
 
 var EditorToolbar = exports.EditorToolbar = /*#__PURE__*/_react.default.memo(function (props) {
-  var _props$featureFlags, _props$customPrimaryT, _props$featureFlags2, _props$featureFlags3, _props$collabEdit, _props$collabEdit2, _props$collabEdit3, _editorAPI$analytics;
+  var _props$featureFlags, _props$customPrimaryT, _props$featureFlags2, _props$featureFlags3, _editorAPI$avatarGrou, _props$collabEdit, _props$collabEdit2, _props$collabEdit3;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     shouldSplitToolbar = _useState2[0],
@@ -56,20 +55,15 @@ var EditorToolbar = exports.EditorToolbar = /*#__PURE__*/_react.default.memo(fun
     css: _MainToolbar.customToolbarWrapperStyle
   }, twoLineEditorToolbar && !!props.customPrimaryToolbarComponents && 'before' in props.customPrimaryToolbarComponents ? (0, _react2.jsx)(_BeforeWrapper.BeforePrimaryToolbarWrapper, {
     beforePrimaryToolbarComponents: (_props$customPrimaryT = props.customPrimaryToolbarComponents) === null || _props$customPrimaryT === void 0 ? void 0 : _props$customPrimaryT.before
-  }) : null, props.hideAvatarGroup || (props === null || props === void 0 || (_props$featureFlags2 = props.featureFlags) === null || _props$featureFlags2 === void 0 ? void 0 : _props$featureFlags2.showAvatarGroupAsPlugin) === true && !((_props$featureFlags3 = props.featureFlags) !== null && _props$featureFlags3 !== void 0 && _props$featureFlags3.twoLineEditorToolbar) ? null :
-  // Avatars are moved to Confluence codebase for Edit in Context
+  }) : null, props.hideAvatarGroup || (props === null || props === void 0 || (_props$featureFlags2 = props.featureFlags) === null || _props$featureFlags2 === void 0 ? void 0 : _props$featureFlags2.showAvatarGroupAsPlugin) === true && !((_props$featureFlags3 = props.featureFlags) !== null && _props$featureFlags3 !== void 0 && _props$featureFlags3.twoLineEditorToolbar) ? null : // Avatars are moved to Confluence codebase for Edit in Context
   // When Edit in Context is enabled customPrimaryToolbarComponents is undefined
   // For more details please check
   // https://hello.atlassian.net/wiki/spaces/PCG/pages/2851572180/Editor+toolbar+for+live+pages+and+edit+in+context+projects
-  (0, _react2.jsx)(_ui.default, {
+  editorAPI === null || editorAPI === void 0 || (_editorAPI$avatarGrou = editorAPI.avatarGroup) === null || _editorAPI$avatarGrou === void 0 ? void 0 : _editorAPI$avatarGrou.actions.getToolbarItem({
     editorView: props.editorView,
-    eventDispatcher: props.eventDispatcher,
     inviteToEditComponent: (_props$collabEdit = props.collabEdit) === null || _props$collabEdit === void 0 ? void 0 : _props$collabEdit.inviteToEditComponent,
     inviteToEditHandler: (_props$collabEdit2 = props.collabEdit) === null || _props$collabEdit2 === void 0 ? void 0 : _props$collabEdit2.inviteToEditHandler,
-    isInviteToEditButtonSelected: (_props$collabEdit3 = props.collabEdit) === null || _props$collabEdit3 === void 0 ? void 0 : _props$collabEdit3.isInviteToEditButtonSelected,
-    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
+    isInviteToEditButtonSelected: (_props$collabEdit3 = props.collabEdit) === null || _props$collabEdit3 === void 0 ? void 0 : _props$collabEdit3.isInviteToEditButtonSelected
   }), 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,
@@ -103,7 +97,7 @@ var EditorToolbar = exports.EditorToolbar = /*#__PURE__*/_react.default.memo(fun
     event.preventDefault();
     event.stopPropagation();
   };
-  return (0, _react2.jsx)(_ui2.ContextPanelConsumer, null, function (_ref) {
+  return (0, _react2.jsx)(_ui.ContextPanelConsumer, null, function (_ref) {
     var contextPanelWidth = _ref.width;
     return (0, _react2.jsx)(_uiMenu.ToolbarArrowKeyNavigationProvider, {
       editorView: props.editorView,

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.3";

package/dist/es2019/plugins/index.js

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

package/dist/es2019/presets/universal.js

@@ -39,7 +39,8 @@ 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, jiraIssuePlugin } from '../plugins';
+import { avatarGroupPlugin } from '@atlaskit/editor-plugin-avatar-group';
+import { 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';
@@ -384,19 +385,15 @@ export default function createUniversalPreset(appearance, props, featureFlags, p
       }]);
     }
     return builder;
-  }).maybeAdd(avatarGroupPlugin, (plugin, builder) => {
-    if (!props.hideAvatarGroup && featureFlags.showAvatarGroupAsPlugin === true && !featureFlags.twoLineEditorToolbar) {
-      // Avatars are moved to Confluence codebase for Edit in Context
-      // When Edit in Context is enabled primaryToolbarComponents is undefined
-      // For more details please check
-      // https://hello.atlassian.net/wiki/spaces/PCG/pages/2851572180/Editor+toolbar+for+live+pages+and+edit+in+context+projects
-      return builder.add([plugin, {
-        collabEdit: props.collabEdit,
-        takeFullWidth: !hasBeforePrimaryToolbar(props.primaryToolbarComponents)
-      }]);
-    }
-    return builder;
-  }).maybeAdd(findReplacePlugin, (plugin, builder) => {
+  }).add([avatarGroupPlugin, {
+    // Avatars are moved to Confluence codebase for Edit in Context
+    // When Edit in Context is enabled primaryToolbarComponents is undefined
+    // For more details please check
+    // https://hello.atlassian.net/wiki/spaces/PCG/pages/2851572180/Editor+toolbar+for+live+pages+and+edit+in+context+projects
+    collabEdit: props.collabEdit,
+    takeFullWidth: !hasBeforePrimaryToolbar(props.primaryToolbarComponents),
+    showAvatarGroup: !props.hideAvatarGroup && featureFlags.showAvatarGroupAsPlugin === true && !featureFlags.twoLineEditorToolbar
+  }]).maybeAdd(findReplacePlugin, (plugin, builder) => {
     if (props.allowFindReplace) {
       return builder.add([plugin, {
         takeFullWidth: !props.hideAvatarGroup && !!featureFlags.showAvatarGroupAsPlugin === false && !hasBeforePrimaryToolbar(props.primaryToolbarComponents),

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

@@ -1,6 +1,7 @@
 import { closestElement } from '@atlaskit/editor-common/utils';
 import { setSelectionTopLevelBlocks } from '@atlaskit/editor-common/selection';
 import { addParagraphAtEnd } from '@atlaskit/editor-common/commands';
+import { tintDirtyTransaction } from '@atlaskit/editor-common/collab';
 
 // we ignore all of the clicks made inside <div class="ak-editor-content-area" /> (but not clicks on the node itself)
 const insideContentArea = ref => {
@@ -100,6 +101,7 @@ const outsideProsemirrorEditorClickHandler = (view, event) => {
     addParagraphAtEnd(tr);
   }
   setSelectionTopLevelBlocks(tr, event, dom, view.posAtCoords.bind(view), isEditorFocused);
+  tintDirtyTransaction(tr);
   if (!tr.docChanged && !tr.selectionSet) {
     return;
   }

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

@@ -3,7 +3,6 @@
 import React, { useState, useEffect } from 'react';
 import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
-import AvatarsWithPluginState from '../../../plugins/avatar-group/ui';
 import Toolbar from '../../Toolbar';
 import { mainToolbarStyle, mainToolbarIconBeforeStyle, mainToolbarFirstChildStyle, mainToolbarSecondChildStyle, nonCustomToolbarWrapperStyle, customToolbarWrapperStyle, MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT } from './MainToolbar';
 import { ContextPanelConsumer } from '@atlaskit/editor-common/ui';
@@ -12,7 +11,7 @@ import { ToolbarArrowKeyNavigationProvider } from '@atlaskit/editor-common/ui-me
 import { usePresetContext } from '../../../presets/context';
 import { BeforePrimaryToolbarWrapper } from './BeforeWrapper';
 export const EditorToolbar = /*#__PURE__*/React.memo(props => {
-  var _props$featureFlags, _props$customPrimaryT, _props$featureFlags2, _props$featureFlags3, _props$collabEdit, _props$collabEdit2, _props$collabEdit3, _editorAPI$analytics;
+  var _props$featureFlags, _props$customPrimaryT, _props$featureFlags2, _props$featureFlags3, _editorAPI$avatarGrou, _props$collabEdit, _props$collabEdit2, _props$collabEdit3;
   const [shouldSplitToolbar, setShouldSplitToolbar] = useState(false);
   const editorAPI = usePresetContext();
 
@@ -42,20 +41,15 @@ export const EditorToolbar = /*#__PURE__*/React.memo(props => {
     css: customToolbarWrapperStyle
   }, twoLineEditorToolbar && !!props.customPrimaryToolbarComponents && 'before' in props.customPrimaryToolbarComponents ? jsx(BeforePrimaryToolbarWrapper, {
     beforePrimaryToolbarComponents: (_props$customPrimaryT = props.customPrimaryToolbarComponents) === null || _props$customPrimaryT === void 0 ? void 0 : _props$customPrimaryT.before
-  }) : null, props.hideAvatarGroup || (props === null || props === void 0 ? void 0 : (_props$featureFlags2 = props.featureFlags) === null || _props$featureFlags2 === void 0 ? void 0 : _props$featureFlags2.showAvatarGroupAsPlugin) === true && !((_props$featureFlags3 = props.featureFlags) !== null && _props$featureFlags3 !== void 0 && _props$featureFlags3.twoLineEditorToolbar) ? null :
-  // Avatars are moved to Confluence codebase for Edit in Context
+  }) : null, props.hideAvatarGroup || (props === null || props === void 0 ? void 0 : (_props$featureFlags2 = props.featureFlags) === null || _props$featureFlags2 === void 0 ? void 0 : _props$featureFlags2.showAvatarGroupAsPlugin) === true && !((_props$featureFlags3 = props.featureFlags) !== null && _props$featureFlags3 !== void 0 && _props$featureFlags3.twoLineEditorToolbar) ? null : // Avatars are moved to Confluence codebase for Edit in Context
   // When Edit in Context is enabled customPrimaryToolbarComponents is undefined
   // For more details please check
   // https://hello.atlassian.net/wiki/spaces/PCG/pages/2851572180/Editor+toolbar+for+live+pages+and+edit+in+context+projects
-  jsx(AvatarsWithPluginState, {
+  editorAPI === null || editorAPI === void 0 ? void 0 : (_editorAPI$avatarGrou = editorAPI.avatarGroup) === null || _editorAPI$avatarGrou === void 0 ? void 0 : _editorAPI$avatarGrou.actions.getToolbarItem({
     editorView: props.editorView,
-    eventDispatcher: props.eventDispatcher,
     inviteToEditComponent: (_props$collabEdit = props.collabEdit) === null || _props$collabEdit === void 0 ? void 0 : _props$collabEdit.inviteToEditComponent,
     inviteToEditHandler: (_props$collabEdit2 = props.collabEdit) === null || _props$collabEdit2 === void 0 ? void 0 : _props$collabEdit2.inviteToEditHandler,
-    isInviteToEditButtonSelected: (_props$collabEdit3 = props.collabEdit) === null || _props$collabEdit3 === void 0 ? void 0 : _props$collabEdit3.isInviteToEditButtonSelected,
-    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
+    isInviteToEditButtonSelected: (_props$collabEdit3 = props.collabEdit) === null || _props$collabEdit3 === void 0 ? void 0 : _props$collabEdit3.isInviteToEditButtonSelected
   }), 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,

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.3";

package/dist/esm/plugins/index.js

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

package/dist/esm/presets/universal.js

@@ -43,7 +43,8 @@ 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, jiraIssuePlugin } from '../plugins';
+import { avatarGroupPlugin } from '@atlaskit/editor-plugin-avatar-group';
+import { 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';
@@ -378,19 +379,15 @@ export default function createUniversalPreset(appearance, props, featureFlags, p
       }]);
     }
     return builder;
-  }).maybeAdd(avatarGroupPlugin, function (plugin, builder) {
-    if (!props.hideAvatarGroup && featureFlags.showAvatarGroupAsPlugin === true && !featureFlags.twoLineEditorToolbar) {
-      // Avatars are moved to Confluence codebase for Edit in Context
-      // When Edit in Context is enabled primaryToolbarComponents is undefined
-      // For more details please check
-      // https://hello.atlassian.net/wiki/spaces/PCG/pages/2851572180/Editor+toolbar+for+live+pages+and+edit+in+context+projects
-      return builder.add([plugin, {
-        collabEdit: props.collabEdit,
-        takeFullWidth: !hasBeforePrimaryToolbar(props.primaryToolbarComponents)
-      }]);
-    }
-    return builder;
-  }).maybeAdd(findReplacePlugin, function (plugin, builder) {
+  }).add([avatarGroupPlugin, {
+    // Avatars are moved to Confluence codebase for Edit in Context
+    // When Edit in Context is enabled primaryToolbarComponents is undefined
+    // For more details please check
+    // https://hello.atlassian.net/wiki/spaces/PCG/pages/2851572180/Editor+toolbar+for+live+pages+and+edit+in+context+projects
+    collabEdit: props.collabEdit,
+    takeFullWidth: !hasBeforePrimaryToolbar(props.primaryToolbarComponents),
+    showAvatarGroup: !props.hideAvatarGroup && featureFlags.showAvatarGroupAsPlugin === true && !featureFlags.twoLineEditorToolbar
+  }]).maybeAdd(findReplacePlugin, function (plugin, builder) {
     if (props.allowFindReplace) {
       return builder.add([plugin, {
         takeFullWidth: !props.hideAvatarGroup && !!featureFlags.showAvatarGroupAsPlugin === false && !hasBeforePrimaryToolbar(props.primaryToolbarComponents),

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

@@ -1,6 +1,7 @@
 import { closestElement } from '@atlaskit/editor-common/utils';
 import { setSelectionTopLevelBlocks } from '@atlaskit/editor-common/selection';
 import { addParagraphAtEnd } from '@atlaskit/editor-common/commands';
+import { tintDirtyTransaction } from '@atlaskit/editor-common/collab';
 
 // we ignore all of the clicks made inside <div class="ak-editor-content-area" /> (but not clicks on the node itself)
 var insideContentArea = function insideContentArea(ref) {
@@ -96,6 +97,7 @@ var outsideProsemirrorEditorClickHandler = function outsideProsemirrorEditorClic
     addParagraphAtEnd(tr);
   }
   setSelectionTopLevelBlocks(tr, event, dom, view.posAtCoords.bind(view), isEditorFocused);
+  tintDirtyTransaction(tr);
   if (!tr.docChanged && !tr.selectionSet) {
     return;
   }

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