@atlaskit/editor-core 193.21.0 → 193.23.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @atlaskit/editor-core
 
+## 193.23.0
+
+### Minor Changes
+
+-   [#101406](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/101406)
+    [`6daffd65aec4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6daffd65aec4) -
+    [ED-23298] Extract primary toolbar components to editor plugin to allow for custom ordering
+
+### Patch Changes
+
+-   [#102478](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/102478)
+    [`3378951608b0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3378951608b0) -
+    [ED-23332] Update adf-schema package to 36.10.1
+-   Updated dependencies
+
+## 193.22.0
+
+### Minor Changes
+
+-   [#103099](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/103099)
+    [`ab382e121799`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ab382e121799) -
+    [ux] [ED-23248] -
+
+    **@atlaskit/editor-core**: REVERT: Added optional profilecardProvider to Mention plugin in
+    universal composable editor **@atlaskit/editor-plugin-mentions**: REVERT: Made mentions render
+    with profile cards on click if the feature flag:
+    `platform.editor.mentions-in-editor-popup-on-click` is turned on
+
 ## 193.21.0
 
 ### Minor Changes

package/codemods/utils.ts

@@ -1,11 +1,11 @@
 import type {
   API,
   ASTPath,
+  default as core,
   FileInfo,
   ImportDeclaration,
   Options,
 } from 'jscodeshift';
-import type core from 'jscodeshift';
 import type { Collection } from 'jscodeshift/src/Collection';
 
 function hasImportDeclaration(

package/dist/cjs/presets/default.js

@@ -27,6 +27,7 @@ var _history = require("@atlaskit/editor-plugins/history");
 var _hyperlink = require("@atlaskit/editor-plugins/hyperlink");
 var _paste = require("@atlaskit/editor-plugins/paste");
 var _placeholder = require("@atlaskit/editor-plugins/placeholder");
+var _primaryToolbar = require("@atlaskit/editor-plugins/primary-toolbar");
 var _quickInsert = require("@atlaskit/editor-plugins/quick-insert");
 var _selection = require("@atlaskit/editor-plugins/selection");
 var _selectionToolbar = require("@atlaskit/editor-plugins/selection-toolbar");
@@ -53,7 +54,9 @@ function createDefaultPreset(options) {
     performanceTracking: options.performanceTracking
   }], Boolean(options.allowAnalyticsGASV3)).add(_betterTypeHistory.betterTypeHistoryPlugin).add([_paste.pastePlugin, _objectSpread({}, options === null || options === void 0 ? void 0 : options.paste)]).add(_clipboard.clipboardPlugin).add(_focus.focusPlugin).add(_composition.compositionPlugin).add([_contextIdentifier.contextIdentifierPlugin, {
     contextIdentifierProvider: options.contextIdentifierProvider
-  }]).add([_base.basePlugin, options.base]).add(_decorations.decorationsPlugin).add([_typeAhead.typeAheadPlugin, options.typeAhead]).maybeAdd(_history.historyPlugin, Boolean(isMobile || options.allowUndoRedoButtons)).maybeAdd(_undoRedo.undoRedoPlugin, Boolean((_options$featureFlags = (_options$featureFlags2 = options.featureFlags) === null || _options$featureFlags2 === void 0 ? void 0 : _options$featureFlags2.undoRedoButtons) !== null && _options$featureFlags !== void 0 ? _options$featureFlags : options.allowUndoRedoButtons)).add([_blockType.blockTypePlugin, options.blockType]).add(_clearMarksOnEmptyDoc.clearMarksOnEmptyDocPlugin).maybeAdd([_selectionToolbar.selectionToolbarPlugin, {
+  }]).add([_base.basePlugin, options.base]).add(_decorations.decorationsPlugin).add([_typeAhead.typeAheadPlugin, options.typeAhead]).maybeAdd(_history.historyPlugin, Boolean(isMobile || options.allowUndoRedoButtons)).maybeAdd(_primaryToolbar.primaryToolbarPlugin, function () {
+    return !!(0, _platformFeatureFlags.getBooleanFF)('platform.editor.primary-toolbar-ordering');
+  }).maybeAdd(_undoRedo.undoRedoPlugin, Boolean((_options$featureFlags = (_options$featureFlags2 = options.featureFlags) === null || _options$featureFlags2 === void 0 ? void 0 : _options$featureFlags2.undoRedoButtons) !== null && _options$featureFlags !== void 0 ? _options$featureFlags : options.allowUndoRedoButtons)).add([_blockType.blockTypePlugin, options.blockType]).add(_clearMarksOnEmptyDoc.clearMarksOnEmptyDocPlugin).maybeAdd([_selectionToolbar.selectionToolbarPlugin, {
     preferenceToolbarAboveSelection: false
   }], function () {
     if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.enable-selection-toolbar_ucdwd')) {

package/dist/cjs/presets/universal.js

@@ -71,7 +71,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * @returns a full featured preset configured according to the provided props - basis for create-plugins-list
  */
 function createUniversalPreset(appearance, props, featureFlags, prevAppearance, createAnalyticsEvent) {
-  var _featureFlags$lpLinkP, _props$media, _props$media2, _props$media3, _props$media4, _props$media5, _props$mention$insert, _props$mention, _props$mention2, _props$mention3, _props$collabEdit$EXP, _props$collabEdit, _props$linking, _props$linking2, _featureFlags$lpLinkP2, _props$linking3, _props$primaryToolbar;
+  var _featureFlags$lpLinkP, _props$media, _props$media2, _props$media3, _props$media4, _props$media5, _props$mention$insert, _props$mention, _props$mention2, _props$collabEdit$EXP, _props$collabEdit, _props$linking, _props$linking2, _featureFlags$lpLinkP2, _props$linking3, _props$primaryToolbar;
   var isMobile = appearance === 'mobile';
   var isComment = appearance === 'comment';
   var isChromeless = appearance === 'chromeless';
@@ -124,8 +124,7 @@ function createUniversalPreset(appearance, props, featureFlags, prevAppearance,
     sanitizePrivateContent: props.sanitizePrivateContent,
     insertDisplayName: (_props$mention$insert = (_props$mention = props.mention) === null || _props$mention === void 0 ? void 0 : _props$mention.insertDisplayName) !== null && _props$mention$insert !== void 0 ? _props$mention$insert : props.mentionInsertDisplayName,
     allowZeroWidthSpaceAfter: !isMobile,
-    HighlightComponent: (_props$mention2 = props.mention) === null || _props$mention2 === void 0 ? void 0 : _props$mention2.HighlightComponent,
-    profilecardProvider: (_props$mention3 = props.mention) === null || _props$mention3 === void 0 ? void 0 : _props$mention3.profilecardProvider
+    HighlightComponent: (_props$mention2 = props.mention) === null || _props$mention2 === void 0 ? void 0 : _props$mention2.HighlightComponent
   }], Boolean(props.mentionProvider)).maybeAdd(_emoji.emojiPlugin, Boolean(props.emojiProvider)).maybeAdd([_table.tablesPlugin, {
     tableOptions: !props.allowTables || typeof props.allowTables === 'boolean' ? {} : props.allowTables,
     tableResizingEnabled: ['full-page', 'full-width'].includes(appearance || ''),

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

@@ -103,7 +103,8 @@ var Editor = /*#__PURE__*/function (_React$Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderChrome", function (_ref) {
       var maxContentSize = _ref.maxContentSize,
-        mediaState = _ref.mediaState;
+        mediaState = _ref.mediaState,
+        primaryToolbarState = _ref.primaryToolbarState;
       var _this$props = _this.props,
         editorDOMElement = _this$props.editorDOMElement,
         editorView = _this$props.editorView,
@@ -113,7 +114,7 @@ var Editor = /*#__PURE__*/function (_React$Component) {
         contentComponents = _this$props.contentComponents,
         customContentComponents = _this$props.customContentComponents,
         customPrimaryToolbarComponents = _this$props.customPrimaryToolbarComponents,
-        primaryToolbarComponents = _this$props.primaryToolbarComponents,
+        primaryToolbarComponentsProp = _this$props.primaryToolbarComponents,
         customSecondaryToolbarComponents = _this$props.customSecondaryToolbarComponents,
         popupsMountPoint = _this$props.popupsMountPoint,
         popupsBoundariesElement = _this$props.popupsBoundariesElement,
@@ -143,6 +144,12 @@ var Editor = /*#__PURE__*/function (_React$Component) {
         event.preventDefault();
         event.stopPropagation();
       };
+      var primaryToolbarComponents = primaryToolbarComponentsProp;
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.primary-toolbar-ordering')) {
+        if (Array.isArray(primaryToolbarState === null || primaryToolbarState === void 0 ? void 0 : primaryToolbarState.components) && Array.isArray(primaryToolbarComponents)) {
+          primaryToolbarComponents = primaryToolbarState.components.concat(primaryToolbarComponents);
+        }
+      }
       return (0, _react2.jsx)(_WithFlash.default, {
         animate: maxContentSizeReached
       }, (0, _react2.jsx)("div", {
@@ -247,19 +254,22 @@ var Editor = /*#__PURE__*/function (_React$Component) {
 function RenderWithPluginState(_ref4) {
   var renderChrome = _ref4.renderChrome;
   var api = (0, _context.usePresetContext)();
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['media', 'maxContentSize']),
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['media', 'maxContentSize', 'primaryToolbar']),
     mediaState = _useSharedPluginState.mediaState,
-    maxContentSizeState = _useSharedPluginState.maxContentSizeState;
+    maxContentSizeState = _useSharedPluginState.maxContentSizeState,
+    primaryToolbarState = _useSharedPluginState.primaryToolbarState;
   return (0, _react2.jsx)(_react.Fragment, null, renderChrome({
     maxContentSize: maxContentSizeState,
-    mediaState: mediaState !== null && mediaState !== void 0 ? mediaState : undefined
+    mediaState: mediaState !== null && mediaState !== void 0 ? mediaState : undefined,
+    primaryToolbarState: primaryToolbarState
   }));
 }
 var EditorNext = function EditorNext(props) {
   var api = (0, _context.usePresetContext)();
-  var _useSharedPluginState2 = (0, _hooks.useSharedPluginState)(api, ['media', 'maxContentSize']),
+  var _useSharedPluginState2 = (0, _hooks.useSharedPluginState)(api, ['media', 'maxContentSize', 'primaryToolbar']),
     mediaState = _useSharedPluginState2.mediaState,
-    maxContentSizeState = _useSharedPluginState2.maxContentSizeState;
+    maxContentSizeState = _useSharedPluginState2.maxContentSizeState,
+    primaryToolbarState = _useSharedPluginState2.primaryToolbarState;
   var editorDOMElement = props.editorDOMElement,
     editorView = props.editorView,
     editorActions = props.editorActions,
@@ -268,7 +278,7 @@ var EditorNext = function EditorNext(props) {
     contentComponents = props.contentComponents,
     customContentComponents = props.customContentComponents,
     customPrimaryToolbarComponents = props.customPrimaryToolbarComponents,
-    primaryToolbarComponents = props.primaryToolbarComponents,
+    primaryToolbarComponentsProp = props.primaryToolbarComponents,
     customSecondaryToolbarComponents = props.customSecondaryToolbarComponents,
     popupsMountPoint = props.popupsMountPoint,
     popupsBoundariesElement = props.popupsBoundariesElement,
@@ -327,6 +337,12 @@ var EditorNext = function EditorNext(props) {
     event.preventDefault();
     event.stopPropagation();
   }, [editorView]);
+  var primaryToolbarComponents = primaryToolbarComponentsProp;
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.primary-toolbar-ordering')) {
+    if (Array.isArray(primaryToolbarState === null || primaryToolbarState === void 0 ? void 0 : primaryToolbarState.components) && Array.isArray(primaryToolbarComponents)) {
+      primaryToolbarComponents = primaryToolbarState.components.concat(primaryToolbarComponents);
+    }
+  }
   return (0, _react2.jsx)(_WithFlash.default, {
     animate: maxContentSizeReached
   }, (0, _react2.jsx)("div", {

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

@@ -12,6 +12,7 @@ var _react2 = require("@emotion/react");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _context = require("../../../presets/context");
 var _FullPageContentArea = require("./FullPageContentArea");
 var _FullPageToolbar = require("./FullPageToolbar");
@@ -57,8 +58,15 @@ var FullPageEditor = exports.FullPageEditor = function FullPageEditor(props) {
   var scrollContentContainerRef = (0, _react.useRef)(null);
   var showKeyline = useShowKeyline(scrollContentContainerRef);
   var editorAPI = (0, _context.usePresetContext)();
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(editorAPI, ['editorViewMode']),
-    editorViewModeState = _useSharedPluginState.editorViewModeState;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(editorAPI, ['editorViewMode', 'primaryToolbar']),
+    editorViewModeState = _useSharedPluginState.editorViewModeState,
+    primaryToolbarState = _useSharedPluginState.primaryToolbarState;
+  var primaryToolbarComponents = props.primaryToolbarComponents;
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.primary-toolbar-ordering')) {
+    if (Array.isArray(primaryToolbarState === null || primaryToolbarState === void 0 ? void 0 : primaryToolbarState.components) && Array.isArray(primaryToolbarComponents)) {
+      primaryToolbarComponents = primaryToolbarState.components.concat(primaryToolbarComponents);
+    }
+  }
   var isEditorToolbarHidden = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
   return (0, _react2.jsx)(_ui.ContextPanelWidthProvider, null, (0, _react2.jsx)("div", {
     css: _StyledComponents.fullPageEditorWrapper,
@@ -80,7 +88,7 @@ var FullPageEditor = exports.FullPageEditor = function FullPageEditor(props) {
     popupsBoundariesElement: props.popupsBoundariesElement,
     popupsMountPoint: props.popupsMountPoint,
     popupsScrollableElement: props.popupsScrollableElement,
-    primaryToolbarComponents: props.primaryToolbarComponents,
+    primaryToolbarComponents: primaryToolbarComponents,
     providerFactory: props.providerFactory,
     showKeyline: showKeyline,
     featureFlags: props.featureFlags,

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

package/dist/es2019/presets/default.js

@@ -20,6 +20,7 @@ import { historyPlugin } from '@atlaskit/editor-plugins/history';
 import { hyperlinkPlugin } from '@atlaskit/editor-plugins/hyperlink';
 import { pastePlugin } from '@atlaskit/editor-plugins/paste';
 import { placeholderPlugin } from '@atlaskit/editor-plugins/placeholder';
+import { primaryToolbarPlugin } from '@atlaskit/editor-plugins/primary-toolbar';
 import { quickInsertPlugin } from '@atlaskit/editor-plugins/quick-insert';
 import { selectionPlugin } from '@atlaskit/editor-plugins/selection';
 import { selectionToolbarPlugin } from '@atlaskit/editor-plugins/selection-toolbar';
@@ -30,7 +31,6 @@ import { undoRedoPlugin } from '@atlaskit/editor-plugins/undo-redo';
 import { unsupportedContentPlugin } from '@atlaskit/editor-plugins/unsupported-content';
 import { widthPlugin } from '@atlaskit/editor-plugins/width';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-
 // #endregion
 
 /**
@@ -47,7 +47,7 @@ export function createDefaultPreset(options) {
     ...(options === null || options === void 0 ? void 0 : options.paste)
   }]).add(clipboardPlugin).add(focusPlugin).add(compositionPlugin).add([contextIdentifierPlugin, {
     contextIdentifierProvider: options.contextIdentifierProvider
-  }]).add([basePlugin, options.base]).add(decorationsPlugin).add([typeAheadPlugin, options.typeAhead]).maybeAdd(historyPlugin, Boolean(isMobile || options.allowUndoRedoButtons)).maybeAdd(undoRedoPlugin, Boolean((_options$featureFlags = (_options$featureFlags2 = options.featureFlags) === null || _options$featureFlags2 === void 0 ? void 0 : _options$featureFlags2.undoRedoButtons) !== null && _options$featureFlags !== void 0 ? _options$featureFlags : options.allowUndoRedoButtons)).add([blockTypePlugin, options.blockType]).add(clearMarksOnEmptyDocPlugin).maybeAdd([selectionToolbarPlugin, {
+  }]).add([basePlugin, options.base]).add(decorationsPlugin).add([typeAheadPlugin, options.typeAhead]).maybeAdd(historyPlugin, Boolean(isMobile || options.allowUndoRedoButtons)).maybeAdd(primaryToolbarPlugin, () => !!getBooleanFF('platform.editor.primary-toolbar-ordering')).maybeAdd(undoRedoPlugin, Boolean((_options$featureFlags = (_options$featureFlags2 = options.featureFlags) === null || _options$featureFlags2 === void 0 ? void 0 : _options$featureFlags2.undoRedoButtons) !== null && _options$featureFlags !== void 0 ? _options$featureFlags : options.allowUndoRedoButtons)).add([blockTypePlugin, options.blockType]).add(clearMarksOnEmptyDocPlugin).maybeAdd([selectionToolbarPlugin, {
     preferenceToolbarAboveSelection: false
   }], () => {
     if (getBooleanFF('platform.editor.enable-selection-toolbar_ucdwd')) {

package/dist/es2019/presets/universal.js

@@ -59,7 +59,7 @@ import { createDefaultPreset } from './default';
  * @returns a full featured preset configured according to the provided props - basis for create-plugins-list
  */
 export default function createUniversalPreset(appearance, props, featureFlags, prevAppearance, createAnalyticsEvent) {
-  var _featureFlags$lpLinkP, _props$media, _props$media2, _props$media3, _props$media4, _props$media5, _props$mention$insert, _props$mention, _props$mention2, _props$mention3, _props$collabEdit$EXP, _props$collabEdit, _props$linking, _props$linking2, _featureFlags$lpLinkP2, _props$linking3, _props$primaryToolbar;
+  var _featureFlags$lpLinkP, _props$media, _props$media2, _props$media3, _props$media4, _props$media5, _props$mention$insert, _props$mention, _props$mention2, _props$collabEdit$EXP, _props$collabEdit, _props$linking, _props$linking2, _featureFlags$lpLinkP2, _props$linking3, _props$primaryToolbar;
   const isMobile = appearance === 'mobile';
   const isComment = appearance === 'comment';
   const isChromeless = appearance === 'chromeless';
@@ -113,8 +113,7 @@ export default function createUniversalPreset(appearance, props, featureFlags, p
     sanitizePrivateContent: props.sanitizePrivateContent,
     insertDisplayName: (_props$mention$insert = (_props$mention = props.mention) === null || _props$mention === void 0 ? void 0 : _props$mention.insertDisplayName) !== null && _props$mention$insert !== void 0 ? _props$mention$insert : props.mentionInsertDisplayName,
     allowZeroWidthSpaceAfter: !isMobile,
-    HighlightComponent: (_props$mention2 = props.mention) === null || _props$mention2 === void 0 ? void 0 : _props$mention2.HighlightComponent,
-    profilecardProvider: (_props$mention3 = props.mention) === null || _props$mention3 === void 0 ? void 0 : _props$mention3.profilecardProvider
+    HighlightComponent: (_props$mention2 = props.mention) === null || _props$mention2 === void 0 ? void 0 : _props$mention2.HighlightComponent
   }], Boolean(props.mentionProvider)).maybeAdd(emojiPlugin, Boolean(props.emojiProvider)).maybeAdd([tablesPlugin, {
     tableOptions: !props.allowTables || typeof props.allowTables === 'boolean' ? {} : props.allowTables,
     tableResizingEnabled: ['full-page', 'full-width'].includes(appearance || ''),

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

@@ -81,7 +81,8 @@ class Editor extends React.Component {
     });
     _defineProperty(this, "renderChrome", ({
       maxContentSize,
-      mediaState
+      mediaState,
+      primaryToolbarState
     }) => {
       const {
         editorDOMElement,
@@ -92,7 +93,7 @@ class Editor extends React.Component {
         contentComponents,
         customContentComponents,
         customPrimaryToolbarComponents,
-        primaryToolbarComponents,
+        primaryToolbarComponents: primaryToolbarComponentsProp,
         customSecondaryToolbarComponents,
         popupsMountPoint,
         popupsBoundariesElement,
@@ -122,6 +123,12 @@ class Editor extends React.Component {
         event.preventDefault();
         event.stopPropagation();
       };
+      let primaryToolbarComponents = primaryToolbarComponentsProp;
+      if (getBooleanFF('platform.editor.primary-toolbar-ordering')) {
+        if (Array.isArray(primaryToolbarState === null || primaryToolbarState === void 0 ? void 0 : primaryToolbarState.components) && Array.isArray(primaryToolbarComponents)) {
+          primaryToolbarComponents = primaryToolbarState.components.concat(primaryToolbarComponents);
+        }
+      }
       return jsx(WithFlash, {
         animate: maxContentSizeReached
       }, jsx("div", {
@@ -223,19 +230,22 @@ function RenderWithPluginState({
   const api = usePresetContext();
   const {
     mediaState,
-    maxContentSizeState
-  } = useSharedPluginState(api, ['media', 'maxContentSize']);
+    maxContentSizeState,
+    primaryToolbarState
+  } = useSharedPluginState(api, ['media', 'maxContentSize', 'primaryToolbar']);
   return jsx(Fragment, null, renderChrome({
     maxContentSize: maxContentSizeState,
-    mediaState: mediaState !== null && mediaState !== void 0 ? mediaState : undefined
+    mediaState: mediaState !== null && mediaState !== void 0 ? mediaState : undefined,
+    primaryToolbarState
   }));
 }
 const EditorNext = props => {
   const api = usePresetContext();
   const {
     mediaState,
-    maxContentSizeState
-  } = useSharedPluginState(api, ['media', 'maxContentSize']);
+    maxContentSizeState,
+    primaryToolbarState
+  } = useSharedPluginState(api, ['media', 'maxContentSize', 'primaryToolbar']);
   const {
     editorDOMElement,
     editorView,
@@ -245,7 +255,7 @@ const EditorNext = props => {
     contentComponents,
     customContentComponents,
     customPrimaryToolbarComponents,
-    primaryToolbarComponents,
+    primaryToolbarComponents: primaryToolbarComponentsProp,
     customSecondaryToolbarComponents,
     popupsMountPoint,
     popupsBoundariesElement,
@@ -297,6 +307,12 @@ const EditorNext = props => {
     event.preventDefault();
     event.stopPropagation();
   }, [editorView]);
+  let primaryToolbarComponents = primaryToolbarComponentsProp;
+  if (getBooleanFF('platform.editor.primary-toolbar-ordering')) {
+    if (Array.isArray(primaryToolbarState === null || primaryToolbarState === void 0 ? void 0 : primaryToolbarState.components) && Array.isArray(primaryToolbarComponents)) {
+      primaryToolbarComponents = primaryToolbarState.components.concat(primaryToolbarComponents);
+    }
+  }
   return jsx(WithFlash, {
     animate: maxContentSizeReached
   }, jsx("div", {

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

@@ -4,6 +4,7 @@ import { jsx } from '@emotion/react';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { ContextPanelWidthProvider } from '@atlaskit/editor-common/ui';
 import { browser } from '@atlaskit/editor-common/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { usePresetContext } from '../../../presets/context';
 import { FullPageContentArea } from './FullPageContentArea';
 import { FullPageToolbar } from './FullPageToolbar';
@@ -39,8 +40,15 @@ export const FullPageEditor = props => {
   const showKeyline = useShowKeyline(scrollContentContainerRef);
   const editorAPI = usePresetContext();
   const {
-    editorViewModeState
-  } = useSharedPluginState(editorAPI, ['editorViewMode']);
+    editorViewModeState,
+    primaryToolbarState
+  } = useSharedPluginState(editorAPI, ['editorViewMode', 'primaryToolbar']);
+  let primaryToolbarComponents = props.primaryToolbarComponents;
+  if (getBooleanFF('platform.editor.primary-toolbar-ordering')) {
+    if (Array.isArray(primaryToolbarState === null || primaryToolbarState === void 0 ? void 0 : primaryToolbarState.components) && Array.isArray(primaryToolbarComponents)) {
+      primaryToolbarComponents = primaryToolbarState.components.concat(primaryToolbarComponents);
+    }
+  }
   const isEditorToolbarHidden = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
   return jsx(ContextPanelWidthProvider, null, jsx("div", {
     css: fullPageEditorWrapper,
@@ -62,7 +70,7 @@ export const FullPageEditor = props => {
     popupsBoundariesElement: props.popupsBoundariesElement,
     popupsMountPoint: props.popupsMountPoint,
     popupsScrollableElement: props.popupsScrollableElement,
-    primaryToolbarComponents: props.primaryToolbarComponents,
+    primaryToolbarComponents: primaryToolbarComponents,
     providerFactory: props.providerFactory,
     showKeyline: showKeyline,
     featureFlags: props.featureFlags,

package/dist/es2019/version-wrapper.js

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

package/dist/esm/presets/default.js

@@ -23,6 +23,7 @@ import { historyPlugin } from '@atlaskit/editor-plugins/history';
 import { hyperlinkPlugin } from '@atlaskit/editor-plugins/hyperlink';
 import { pastePlugin } from '@atlaskit/editor-plugins/paste';
 import { placeholderPlugin } from '@atlaskit/editor-plugins/placeholder';
+import { primaryToolbarPlugin } from '@atlaskit/editor-plugins/primary-toolbar';
 import { quickInsertPlugin } from '@atlaskit/editor-plugins/quick-insert';
 import { selectionPlugin } from '@atlaskit/editor-plugins/selection';
 import { selectionToolbarPlugin } from '@atlaskit/editor-plugins/selection-toolbar';
@@ -33,7 +34,6 @@ import { undoRedoPlugin } from '@atlaskit/editor-plugins/undo-redo';
 import { unsupportedContentPlugin } from '@atlaskit/editor-plugins/unsupported-content';
 import { widthPlugin } from '@atlaskit/editor-plugins/width';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-
 // #endregion
 
 /**
@@ -48,7 +48,9 @@ export function createDefaultPreset(options) {
     performanceTracking: options.performanceTracking
   }], Boolean(options.allowAnalyticsGASV3)).add(betterTypeHistoryPlugin).add([pastePlugin, _objectSpread({}, options === null || options === void 0 ? void 0 : options.paste)]).add(clipboardPlugin).add(focusPlugin).add(compositionPlugin).add([contextIdentifierPlugin, {
     contextIdentifierProvider: options.contextIdentifierProvider
-  }]).add([basePlugin, options.base]).add(decorationsPlugin).add([typeAheadPlugin, options.typeAhead]).maybeAdd(historyPlugin, Boolean(isMobile || options.allowUndoRedoButtons)).maybeAdd(undoRedoPlugin, Boolean((_options$featureFlags = (_options$featureFlags2 = options.featureFlags) === null || _options$featureFlags2 === void 0 ? void 0 : _options$featureFlags2.undoRedoButtons) !== null && _options$featureFlags !== void 0 ? _options$featureFlags : options.allowUndoRedoButtons)).add([blockTypePlugin, options.blockType]).add(clearMarksOnEmptyDocPlugin).maybeAdd([selectionToolbarPlugin, {
+  }]).add([basePlugin, options.base]).add(decorationsPlugin).add([typeAheadPlugin, options.typeAhead]).maybeAdd(historyPlugin, Boolean(isMobile || options.allowUndoRedoButtons)).maybeAdd(primaryToolbarPlugin, function () {
+    return !!getBooleanFF('platform.editor.primary-toolbar-ordering');
+  }).maybeAdd(undoRedoPlugin, Boolean((_options$featureFlags = (_options$featureFlags2 = options.featureFlags) === null || _options$featureFlags2 === void 0 ? void 0 : _options$featureFlags2.undoRedoButtons) !== null && _options$featureFlags !== void 0 ? _options$featureFlags : options.allowUndoRedoButtons)).add([blockTypePlugin, options.blockType]).add(clearMarksOnEmptyDocPlugin).maybeAdd([selectionToolbarPlugin, {
     preferenceToolbarAboveSelection: false
   }], function () {
     if (getBooleanFF('platform.editor.enable-selection-toolbar_ucdwd')) {

package/dist/esm/presets/universal.js

@@ -63,7 +63,7 @@ import { createDefaultPreset } from './default';
  * @returns a full featured preset configured according to the provided props - basis for create-plugins-list
  */
 export default function createUniversalPreset(appearance, props, featureFlags, prevAppearance, createAnalyticsEvent) {
-  var _featureFlags$lpLinkP, _props$media, _props$media2, _props$media3, _props$media4, _props$media5, _props$mention$insert, _props$mention, _props$mention2, _props$mention3, _props$collabEdit$EXP, _props$collabEdit, _props$linking, _props$linking2, _featureFlags$lpLinkP2, _props$linking3, _props$primaryToolbar;
+  var _featureFlags$lpLinkP, _props$media, _props$media2, _props$media3, _props$media4, _props$media5, _props$mention$insert, _props$mention, _props$mention2, _props$collabEdit$EXP, _props$collabEdit, _props$linking, _props$linking2, _featureFlags$lpLinkP2, _props$linking3, _props$primaryToolbar;
   var isMobile = appearance === 'mobile';
   var isComment = appearance === 'comment';
   var isChromeless = appearance === 'chromeless';
@@ -116,8 +116,7 @@ export default function createUniversalPreset(appearance, props, featureFlags, p
     sanitizePrivateContent: props.sanitizePrivateContent,
     insertDisplayName: (_props$mention$insert = (_props$mention = props.mention) === null || _props$mention === void 0 ? void 0 : _props$mention.insertDisplayName) !== null && _props$mention$insert !== void 0 ? _props$mention$insert : props.mentionInsertDisplayName,
     allowZeroWidthSpaceAfter: !isMobile,
-    HighlightComponent: (_props$mention2 = props.mention) === null || _props$mention2 === void 0 ? void 0 : _props$mention2.HighlightComponent,
-    profilecardProvider: (_props$mention3 = props.mention) === null || _props$mention3 === void 0 ? void 0 : _props$mention3.profilecardProvider
+    HighlightComponent: (_props$mention2 = props.mention) === null || _props$mention2 === void 0 ? void 0 : _props$mention2.HighlightComponent
   }], Boolean(props.mentionProvider)).maybeAdd(emojiPlugin, Boolean(props.emojiProvider)).maybeAdd([tablesPlugin, {
     tableOptions: !props.allowTables || typeof props.allowTables === 'boolean' ? {} : props.allowTables,
     tableResizingEnabled: ['full-page', 'full-width'].includes(appearance || ''),

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

@@ -94,7 +94,8 @@ var Editor = /*#__PURE__*/function (_React$Component) {
     });
     _defineProperty(_assertThisInitialized(_this), "renderChrome", function (_ref) {
       var maxContentSize = _ref.maxContentSize,
-        mediaState = _ref.mediaState;
+        mediaState = _ref.mediaState,
+        primaryToolbarState = _ref.primaryToolbarState;
       var _this$props = _this.props,
         editorDOMElement = _this$props.editorDOMElement,
         editorView = _this$props.editorView,
@@ -104,7 +105,7 @@ var Editor = /*#__PURE__*/function (_React$Component) {
         contentComponents = _this$props.contentComponents,
         customContentComponents = _this$props.customContentComponents,
         customPrimaryToolbarComponents = _this$props.customPrimaryToolbarComponents,
-        primaryToolbarComponents = _this$props.primaryToolbarComponents,
+        primaryToolbarComponentsProp = _this$props.primaryToolbarComponents,
         customSecondaryToolbarComponents = _this$props.customSecondaryToolbarComponents,
         popupsMountPoint = _this$props.popupsMountPoint,
         popupsBoundariesElement = _this$props.popupsBoundariesElement,
@@ -134,6 +135,12 @@ var Editor = /*#__PURE__*/function (_React$Component) {
         event.preventDefault();
         event.stopPropagation();
       };
+      var primaryToolbarComponents = primaryToolbarComponentsProp;
+      if (getBooleanFF('platform.editor.primary-toolbar-ordering')) {
+        if (Array.isArray(primaryToolbarState === null || primaryToolbarState === void 0 ? void 0 : primaryToolbarState.components) && Array.isArray(primaryToolbarComponents)) {
+          primaryToolbarComponents = primaryToolbarState.components.concat(primaryToolbarComponents);
+        }
+      }
       return jsx(WithFlash, {
         animate: maxContentSizeReached
       }, jsx("div", {
@@ -238,19 +245,22 @@ _defineProperty(Editor, "displayName", 'CommentEditorAppearance');
 function RenderWithPluginState(_ref4) {
   var renderChrome = _ref4.renderChrome;
   var api = usePresetContext();
-  var _useSharedPluginState = useSharedPluginState(api, ['media', 'maxContentSize']),
+  var _useSharedPluginState = useSharedPluginState(api, ['media', 'maxContentSize', 'primaryToolbar']),
     mediaState = _useSharedPluginState.mediaState,
-    maxContentSizeState = _useSharedPluginState.maxContentSizeState;
+    maxContentSizeState = _useSharedPluginState.maxContentSizeState,
+    primaryToolbarState = _useSharedPluginState.primaryToolbarState;
   return jsx(Fragment, null, renderChrome({
     maxContentSize: maxContentSizeState,
-    mediaState: mediaState !== null && mediaState !== void 0 ? mediaState : undefined
+    mediaState: mediaState !== null && mediaState !== void 0 ? mediaState : undefined,
+    primaryToolbarState: primaryToolbarState
   }));
 }
 var EditorNext = function EditorNext(props) {
   var api = usePresetContext();
-  var _useSharedPluginState2 = useSharedPluginState(api, ['media', 'maxContentSize']),
+  var _useSharedPluginState2 = useSharedPluginState(api, ['media', 'maxContentSize', 'primaryToolbar']),
     mediaState = _useSharedPluginState2.mediaState,
-    maxContentSizeState = _useSharedPluginState2.maxContentSizeState;
+    maxContentSizeState = _useSharedPluginState2.maxContentSizeState,
+    primaryToolbarState = _useSharedPluginState2.primaryToolbarState;
   var editorDOMElement = props.editorDOMElement,
     editorView = props.editorView,
     editorActions = props.editorActions,
@@ -259,7 +269,7 @@ var EditorNext = function EditorNext(props) {
     contentComponents = props.contentComponents,
     customContentComponents = props.customContentComponents,
     customPrimaryToolbarComponents = props.customPrimaryToolbarComponents,
-    primaryToolbarComponents = props.primaryToolbarComponents,
+    primaryToolbarComponentsProp = props.primaryToolbarComponents,
     customSecondaryToolbarComponents = props.customSecondaryToolbarComponents,
     popupsMountPoint = props.popupsMountPoint,
     popupsBoundariesElement = props.popupsBoundariesElement,
@@ -318,6 +328,12 @@ var EditorNext = function EditorNext(props) {
     event.preventDefault();
     event.stopPropagation();
   }, [editorView]);
+  var primaryToolbarComponents = primaryToolbarComponentsProp;
+  if (getBooleanFF('platform.editor.primary-toolbar-ordering')) {
+    if (Array.isArray(primaryToolbarState === null || primaryToolbarState === void 0 ? void 0 : primaryToolbarState.components) && Array.isArray(primaryToolbarComponents)) {
+      primaryToolbarComponents = primaryToolbarState.components.concat(primaryToolbarComponents);
+    }
+  }
   return jsx(WithFlash, {
     animate: maxContentSizeReached
   }, jsx("div", {

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

@@ -5,6 +5,7 @@ import { jsx } from '@emotion/react';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { ContextPanelWidthProvider } from '@atlaskit/editor-common/ui';
 import { browser } from '@atlaskit/editor-common/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { usePresetContext } from '../../../presets/context';
 import { FullPageContentArea } from './FullPageContentArea';
 import { FullPageToolbar } from './FullPageToolbar';
@@ -46,8 +47,15 @@ export var FullPageEditor = function FullPageEditor(props) {
   var scrollContentContainerRef = useRef(null);
   var showKeyline = useShowKeyline(scrollContentContainerRef);
   var editorAPI = usePresetContext();
-  var _useSharedPluginState = useSharedPluginState(editorAPI, ['editorViewMode']),
-    editorViewModeState = _useSharedPluginState.editorViewModeState;
+  var _useSharedPluginState = useSharedPluginState(editorAPI, ['editorViewMode', 'primaryToolbar']),
+    editorViewModeState = _useSharedPluginState.editorViewModeState,
+    primaryToolbarState = _useSharedPluginState.primaryToolbarState;
+  var primaryToolbarComponents = props.primaryToolbarComponents;
+  if (getBooleanFF('platform.editor.primary-toolbar-ordering')) {
+    if (Array.isArray(primaryToolbarState === null || primaryToolbarState === void 0 ? void 0 : primaryToolbarState.components) && Array.isArray(primaryToolbarComponents)) {
+      primaryToolbarComponents = primaryToolbarState.components.concat(primaryToolbarComponents);
+    }
+  }
   var isEditorToolbarHidden = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
   return jsx(ContextPanelWidthProvider, null, jsx("div", {
     css: fullPageEditorWrapper,
@@ -69,7 +77,7 @@ export var FullPageEditor = function FullPageEditor(props) {
     popupsBoundariesElement: props.popupsBoundariesElement,
     popupsMountPoint: props.popupsMountPoint,
     popupsScrollableElement: props.popupsScrollableElement,
-    primaryToolbarComponents: props.primaryToolbarComponents,
+    primaryToolbarComponents: primaryToolbarComponents,
     providerFactory: props.providerFactory,
     showKeyline: showKeyline,
     featureFlags: props.featureFlags,

package/dist/esm/version-wrapper.js

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