@atlaskit/editor-core 207.19.5 → 207.20.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @atlaskit/editor-core
 
+## 207.20.0
+
+### Minor Changes
+
+- [#158546](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/158546)
+  [`b7fe4e6f226f3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b7fe4e6f226f3) -
+  ED-27284 use user preferences plugin in editor preset.
+
+### Patch Changes
+
+- [#171482](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/171482)
+  [`aaa3084f0ce5e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/aaa3084f0ce5e) - \*
+  I18n translations, see
+  [commit](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c5e33f6fd2cf86464047d15fc050a0759daa17a6)
+  - Add `platform_editor_disable_context_panel_animation`, see
+    [commit](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f5354e057194e15abfc9fa16aa288e42044d710c)
+- Updated dependencies
+
+## 207.19.6
+
+### Patch Changes
+
+- [#169535](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/169535)
+  [`275f3d6725a4e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/275f3d6725a4e) -
+  [ux] Hide plus and block control buttons when hovering over gutter space on the left and right
+- Updated dependencies
+
 ## 207.19.5
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -45,6 +45,9 @@
         {
             "path": "../../editor-plugin-quick-insert/afm-cc/tsconfig.json"
         },
+        {
+            "path": "../../editor-plugin-user-preferences/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../editor-plugins/afm-cc/tsconfig.json"
         },

package/dist/cjs/create-editor/ReactEditorView.js

@@ -117,7 +117,9 @@ function ReactEditorView(props) {
     fireAnalyticsEvent: handleAnalyticsEvent
   }));
   (0, _react.useLayoutEffect)(function () {
-    setEditorAPI(pluginInjectionAPI.current.api());
+    if (!(0, _platformFeatureFlags.fg)('platform_editor_setup_editorapi_sync')) {
+      setEditorAPI(pluginInjectionAPI.current.api());
+    }
   }, []);
   var createEditorState = (0, _react.useCallback)(function (options) {
     var _api$editorViewMode;
@@ -145,6 +147,9 @@ function ReactEditorView(props) {
     } else {
       config.current = (0, _createEditor.processPluginsList)((0, _createPluginsList.default)(options.props.preset, props.editorProps, pluginInjectionAPI.current));
       schema = (0, _createSchema.createSchema)(config.current);
+      if ((0, _platformFeatureFlags.fg)('platform_editor_setup_editorapi_sync')) {
+        setEditorAPI(pluginInjectionAPI.current.api());
+      }
     }
     var contentTransformerProvider = options.props.editorProps.contentTransformerProvider;
     var plugins = (0, _createEditor.createPMPlugins)({

package/dist/cjs/i18n/sl.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/* prettier-ignore */
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by Traduki 2.0.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+//Slovenian (Slovenia) [sl-SI]
+var _default = exports.default = {
+  'fabric.editor.chromeCollapsedPlaceholder': 'Vnesite nekaj …',
+  'fabric.editor.editorAssistiveLabel': 'Glavno področje za vsebino; začnite tipkati, da vnesete besedilo.',
+  'fabric.editor.headingLink.toolbarHelpTitle': 'Odpri pogovorno okno pomoči'
+};

package/dist/cjs/i18n/sr_RS.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/* prettier-ignore */
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by Traduki 2.0.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+//Serbian (Serbia) [sr-RS]
+var _default = exports.default = {
+  'fabric.editor.chromeCollapsedPlaceholder': 'Unesite tekst…',
+  'fabric.editor.editorAssistiveLabel': 'Glavna oblast za sadržaj, počnite da unosite tekst.',
+  'fabric.editor.headingLink.toolbarHelpTitle': 'Otvori dijalog pomoći'
+};

package/dist/cjs/presets/default.js

@@ -8,6 +8,7 @@ exports.createDefaultPreset = createDefaultPreset;
 exports.useDefaultPreset = useDefaultPreset;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _preset = require("@atlaskit/editor-common/preset");
+var _editorPluginUserPreferences = require("@atlaskit/editor-plugin-user-preferences");
 var _analytics = require("@atlaskit/editor-plugins/analytics");
 var _base = require("@atlaskit/editor-plugins/base");
 var _betterTypeHistory = require("@atlaskit/editor-plugins/better-type-history");
@@ -59,7 +60,13 @@ function createDefaultPreset(options) {
     performanceTracking: options.performanceTracking
   }], Boolean(options.allowAnalyticsGASV3)).add(_betterTypeHistory.betterTypeHistoryPlugin).add([_paste.pastePlugin, _objectSpread(_objectSpread({}, options === null || options === void 0 ? void 0 : options.paste), {}, {
     isFullPage: isFullPage
-  })]).add(_clipboard.clipboardPlugin).add(_focus.focusPlugin).maybeAdd(_interaction.interactionPlugin, Boolean(options === null || options === void 0 ? void 0 : options.__livePage) ? (0, _platformFeatureFlags.fg)('platform_editor_no_cursor_on_live_doc_init') : (0, _expValEquals.expValEquals)('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true)).add(_composition.compositionPlugin).add([_contextIdentifier.contextIdentifierPlugin, {
+  })]).add(_clipboard.clipboardPlugin).add(_focus.focusPlugin).maybeAdd([_editorPluginUserPreferences.userPreferencesPlugin, {
+    initialUserPreferences: {
+      toolbarDockingPosition: isFullPage ? 'none' : 'top'
+    }
+  }], function () {
+    return (0, _platformFeatureFlags.fg)('platform_editor_use_preferences_plugin');
+  }).maybeAdd(_interaction.interactionPlugin, Boolean(options === null || options === void 0 ? void 0 : options.__livePage) ? (0, _platformFeatureFlags.fg)('platform_editor_no_cursor_on_live_doc_init') : (0, _expValEquals.expValEquals)('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true)).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(options.allowUndoRedoButtons)).add([_primaryToolbar.primaryToolbarPlugin, {
     contextualFormattingEnabled: isFullPage

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

@@ -28,6 +28,7 @@ var _contentComponentWrapper = require("../../Addon/ClickAreaBlock/contentCompon
 var _ContentStyles = require("../../ContentStyles");
 var _EditorContentContainer = _interopRequireDefault(require("../../EditorContentContainer/EditorContentContainer"));
 var _PluginSlot = _interopRequireDefault(require("../../PluginSlot"));
+var _getPrimaryToolbarComponents = require("../../Toolbar/getPrimaryToolbarComponents");
 var _ToolbarWithSizeDetector = require("../../Toolbar/ToolbarWithSizeDetector");
 var _WithFlash = _interopRequireDefault(require("../../WithFlash"));
 var _Toolbar = require("./Toolbar");
@@ -116,8 +117,9 @@ var CommentEditorWithIntl = exports.CommentEditorWithIntl = function CommentEdit
   var editorAPI = props.editorAPI;
   var _useCommentEditorPlug = useCommentEditorPluginsStates(editorAPI),
     maxContentSizeState = _useCommentEditorPlug.maxContentSizeState,
-    primaryToolbarState = _useCommentEditorPlug.primaryToolbarState,
+    primaryToolbarHookState = _useCommentEditorPlug.primaryToolbarState,
     editorViewModeState = _useCommentEditorPlug.editorViewModeState;
+  var primaryToolbarState = (0, _getPrimaryToolbarComponents.getPrimaryToolbarComponents)(editorAPI, primaryToolbarHookState === null || primaryToolbarHookState === void 0 ? void 0 : primaryToolbarHookState.components);
   var _useSharedPluginState = (0, _hooks.useSharedPluginState)(editorAPI, ['media']),
     mediaState = _useSharedPluginState.mediaState;
   var intl = (0, _reactIntlNext.useIntl)();

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

@@ -15,6 +15,7 @@ var _ui = require("@atlaskit/editor-common/ui");
 var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _getPrimaryToolbarComponents = require("../../Toolbar/getPrimaryToolbarComponents");
 var _FullPageContentArea = require("./FullPageContentArea");
 var _FullPageToolbar = require("./FullPageToolbar");
 var _getEditorViewModeSync = require("./getEditorViewModeSync");
@@ -95,8 +96,9 @@ var FullPageEditor = exports.FullPageEditor = function FullPageEditor(props) {
   var editorAPI = props.editorAPI;
   var _useFullPageEditorPlu = useFullPageEditorPluginsStates(editorAPI),
     editorViewModeState = _useFullPageEditorPlu.editorViewModeState,
-    primaryToolbarState = _useFullPageEditorPlu.primaryToolbarState,
+    primaryToolbarHookState = _useFullPageEditorPlu.primaryToolbarState,
     interactionState = _useFullPageEditorPlu.interactionState;
+  var primaryToolbarState = (0, _getPrimaryToolbarComponents.getPrimaryToolbarComponents)(editorAPI, primaryToolbarHookState === null || primaryToolbarHookState === void 0 ? void 0 : primaryToolbarHookState.components);
   var viewMode = (0, _getEditorViewModeSync.getEditorViewMode)(editorViewModeState, props.preset);
 
   // Remove all this logic when platform_editor_interaction_api_refactor is cleaned up
@@ -111,8 +113,18 @@ var FullPageEditor = exports.FullPageEditor = function FullPageEditor(props) {
   } else {
     hasHadInteraction = interactionState === null || interactionState === void 0 ? void 0 : interactionState.hasHadInteraction;
   }
-  var toolbarDocking = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(editorAPI, 'selectionToolbar.toolbarDocking');
-  if (!toolbarDocking && (0, _platformFeatureFlags.fg)('platform_editor_controls_toolbar_ssr_fix')) {
+  var toolbarDocking = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(editorAPI, 'selectionToolbar.toolbarDocking', {
+    disabled: (0, _platformFeatureFlags.fg)('platform_editor_use_preferences_plugin')
+  });
+  var toolbarDockingPref = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(editorAPI, 'userPreferences.preferences.toolbarDockingPosition', {
+    disabled: !(0, _platformFeatureFlags.fg)('platform_editor_use_preferences_plugin')
+  });
+  if ((0, _platformFeatureFlags.fg)('platform_editor_use_preferences_plugin')) {
+    if (!toolbarDockingPref) {
+      var _editorAPI$userPrefer;
+      toolbarDockingPref = editorAPI === null || editorAPI === void 0 || (_editorAPI$userPrefer = editorAPI.userPreferences) === null || _editorAPI$userPrefer === void 0 || (_editorAPI$userPrefer = _editorAPI$userPrefer.sharedState.currentState()) === null || _editorAPI$userPrefer === void 0 ? void 0 : _editorAPI$userPrefer.preferences.toolbarDockingPosition;
+    }
+  } else if (!toolbarDocking && (0, _platformFeatureFlags.fg)('platform_editor_controls_toolbar_ssr_fix')) {
     var _editorAPI$selectionT, _editorAPI$selectionT2;
     // This is a workaround for the rendering issue with the selection toolbar
     // where using useSharedPluginStateSelector or useSharedPluginState the state are not
@@ -129,7 +141,15 @@ var FullPageEditor = exports.FullPageEditor = function FullPageEditor(props) {
   if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1', {
     exposure: true
   })) {
-    if ((0, _platformFeatureFlags.fg)('platform_editor_controls_toolbar_ssr_fix')) {
+    if ((0, _platformFeatureFlags.fg)('platform_editor_use_preferences_plugin')) {
+      // need to check if the toolbarDockingPref is set to 'none' or 'top'
+      if (toolbarDockingPref === 'none') {
+        primaryToolbarComponents = [];
+        if (!hasCustomComponents(customPrimaryToolbarComponents)) {
+          isEditorToolbarHidden = true;
+        }
+      }
+    } else if ((0, _platformFeatureFlags.fg)('platform_editor_controls_toolbar_ssr_fix')) {
       if (toolbarDocking === 'none') {
         primaryToolbarComponents = [];
         if (!hasCustomComponents(customPrimaryToolbarComponents)) {

package/dist/cjs/ui/Toolbar/getPrimaryToolbarComponents.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getPrimaryToolbarComponents = void 0;
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+// Primary toolbar doesn't actually use plugin state so the state selector doesn't update as intended
+// We need a proper API to deal with non-prosemirror based state in plugins but until then we can retrieve
+// the latest
+var getPrimaryToolbarComponents = exports.getPrimaryToolbarComponents = function getPrimaryToolbarComponents(editorAPI, components) {
+  if ((0, _platformFeatureFlags.fg)('platform_editor_setup_editorapi_sync')) {
+    var _editorAPI$primaryToo;
+    return {
+      components: components !== null && components !== void 0 ? components : editorAPI === null || editorAPI === void 0 || (_editorAPI$primaryToo = editorAPI.primaryToolbar) === null || _editorAPI$primaryToo === void 0 || (_editorAPI$primaryToo = _editorAPI$primaryToo.sharedState.currentState()) === null || _editorAPI$primaryToo === void 0 ? void 0 : _editorAPI$primaryToo.components
+    };
+  }
+  return {
+    components: components
+  };
+};

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

package/dist/es2019/create-editor/ReactEditorView.js

@@ -93,7 +93,9 @@ export function ReactEditorView(props) {
     fireAnalyticsEvent: handleAnalyticsEvent
   }));
   useLayoutEffect(() => {
-    setEditorAPI(pluginInjectionAPI.current.api());
+    if (!fg('platform_editor_setup_editorapi_sync')) {
+      setEditorAPI(pluginInjectionAPI.current.api());
+    }
   }, []);
   const createEditorState = useCallback(options => {
     var _api$editorViewMode;
@@ -121,6 +123,9 @@ export function ReactEditorView(props) {
     } else {
       config.current = processPluginsList(createPluginsList(options.props.preset, props.editorProps, pluginInjectionAPI.current));
       schema = createSchema(config.current);
+      if (fg('platform_editor_setup_editorapi_sync')) {
+        setEditorAPI(pluginInjectionAPI.current.api());
+      }
     }
     const {
       contentTransformerProvider

package/dist/es2019/i18n/sl.js

@@ -0,0 +1,13 @@
+/* prettier-ignore */
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by Traduki 2.0.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+//Slovenian (Slovenia) [sl-SI]
+export default {
+  'fabric.editor.chromeCollapsedPlaceholder': 'Vnesite nekaj …',
+  'fabric.editor.editorAssistiveLabel': 'Glavno področje za vsebino; začnite tipkati, da vnesete besedilo.',
+  'fabric.editor.headingLink.toolbarHelpTitle': 'Odpri pogovorno okno pomoči'
+};

package/dist/es2019/i18n/sr_RS.js

@@ -0,0 +1,13 @@
+/* prettier-ignore */
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by Traduki 2.0.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+//Serbian (Serbia) [sr-RS]
+export default {
+  'fabric.editor.chromeCollapsedPlaceholder': 'Unesite tekst…',
+  'fabric.editor.editorAssistiveLabel': 'Glavna oblast za sadržaj, počnite da unosite tekst.',
+  'fabric.editor.headingLink.toolbarHelpTitle': 'Otvori dijalog pomoći'
+};

package/dist/es2019/presets/default.js

@@ -1,6 +1,7 @@
 // #region Imports
 
 import { EditorPresetBuilder } from '@atlaskit/editor-common/preset';
+import { userPreferencesPlugin } from '@atlaskit/editor-plugin-user-preferences';
 import { analyticsPlugin } from '@atlaskit/editor-plugins/analytics';
 import { basePlugin } from '@atlaskit/editor-plugins/base';
 import { betterTypeHistoryPlugin } from '@atlaskit/editor-plugins/better-type-history';
@@ -52,7 +53,11 @@ export function createDefaultPreset(options) {
   }], Boolean(options.allowAnalyticsGASV3)).add(betterTypeHistoryPlugin).add([pastePlugin, {
     ...(options === null || options === void 0 ? void 0 : options.paste),
     isFullPage
-  }]).add(clipboardPlugin).add(focusPlugin).maybeAdd(interactionPlugin, Boolean(options === null || options === void 0 ? void 0 : options.__livePage) ? fg('platform_editor_no_cursor_on_live_doc_init') : expValEquals('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true)).add(compositionPlugin).add([contextIdentifierPlugin, {
+  }]).add(clipboardPlugin).add(focusPlugin).maybeAdd([userPreferencesPlugin, {
+    initialUserPreferences: {
+      toolbarDockingPosition: isFullPage ? 'none' : 'top'
+    }
+  }], () => fg('platform_editor_use_preferences_plugin')).maybeAdd(interactionPlugin, Boolean(options === null || options === void 0 ? void 0 : options.__livePage) ? fg('platform_editor_no_cursor_on_live_doc_init') : expValEquals('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true)).add(compositionPlugin).add([contextIdentifierPlugin, {
     contextIdentifierProvider: options.contextIdentifierProvider
   }]).add([basePlugin, options.base]).add(decorationsPlugin).add([typeAheadPlugin, options.typeAhead]).maybeAdd(historyPlugin, Boolean(options.allowUndoRedoButtons)).add([primaryToolbarPlugin, {
     contextualFormattingEnabled: isFullPage

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

@@ -27,6 +27,7 @@ import { contentComponentClickWrapper } from '../../Addon/ClickAreaBlock/content
 import { createEditorContentStyle } from '../../ContentStyles';
 import EditorContentContainer from '../../EditorContentContainer/EditorContentContainer';
 import PluginSlot from '../../PluginSlot';
+import { getPrimaryToolbarComponents } from '../../Toolbar/getPrimaryToolbarComponents';
 import { ToolbarWithSizeDetector as Toolbar } from '../../Toolbar/ToolbarWithSizeDetector';
 import WithFlash from '../../WithFlash';
 import { MainToolbar, mainToolbarCustomComponentsSlotStyle } from './Toolbar';
@@ -104,9 +105,10 @@ export const CommentEditorWithIntl = props => {
   } = props;
   const {
     maxContentSizeState,
-    primaryToolbarState,
+    primaryToolbarState: primaryToolbarHookState,
     editorViewModeState
   } = useCommentEditorPluginsStates(editorAPI);
+  const primaryToolbarState = getPrimaryToolbarComponents(editorAPI, primaryToolbarHookState === null || primaryToolbarHookState === void 0 ? void 0 : primaryToolbarHookState.components);
   const {
     mediaState
   } = useSharedPluginState(editorAPI, ['media']);

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

@@ -12,6 +12,7 @@ import { ContextPanelWidthProvider } from '@atlaskit/editor-common/ui';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { getPrimaryToolbarComponents } from '../../Toolbar/getPrimaryToolbarComponents';
 import { FullPageContentArea } from './FullPageContentArea';
 import { FullPageToolbar } from './FullPageToolbar';
 import { getEditorViewMode } from './getEditorViewModeSync';
@@ -77,9 +78,10 @@ export const FullPageEditor = props => {
   const editorAPI = props.editorAPI;
   const {
     editorViewModeState,
-    primaryToolbarState,
+    primaryToolbarState: primaryToolbarHookState,
     interactionState
   } = useFullPageEditorPluginsStates(editorAPI);
+  const primaryToolbarState = getPrimaryToolbarComponents(editorAPI, primaryToolbarHookState === null || primaryToolbarHookState === void 0 ? void 0 : primaryToolbarHookState.components);
   const viewMode = getEditorViewMode(editorViewModeState, props.preset);
 
   // Remove all this logic when platform_editor_interaction_api_refactor is cleaned up
@@ -94,8 +96,18 @@ export const FullPageEditor = props => {
   } else {
     hasHadInteraction = interactionState === null || interactionState === void 0 ? void 0 : interactionState.hasHadInteraction;
   }
-  let toolbarDocking = useSharedPluginStateSelector(editorAPI, 'selectionToolbar.toolbarDocking');
-  if (!toolbarDocking && fg('platform_editor_controls_toolbar_ssr_fix')) {
+  let toolbarDocking = useSharedPluginStateSelector(editorAPI, 'selectionToolbar.toolbarDocking', {
+    disabled: fg('platform_editor_use_preferences_plugin')
+  });
+  let toolbarDockingPref = useSharedPluginStateSelector(editorAPI, 'userPreferences.preferences.toolbarDockingPosition', {
+    disabled: !fg('platform_editor_use_preferences_plugin')
+  });
+  if (fg('platform_editor_use_preferences_plugin')) {
+    if (!toolbarDockingPref) {
+      var _editorAPI$userPrefer, _editorAPI$userPrefer2;
+      toolbarDockingPref = editorAPI === null || editorAPI === void 0 ? void 0 : (_editorAPI$userPrefer = editorAPI.userPreferences) === null || _editorAPI$userPrefer === void 0 ? void 0 : (_editorAPI$userPrefer2 = _editorAPI$userPrefer.sharedState.currentState()) === null || _editorAPI$userPrefer2 === void 0 ? void 0 : _editorAPI$userPrefer2.preferences.toolbarDockingPosition;
+    }
+  } else if (!toolbarDocking && fg('platform_editor_controls_toolbar_ssr_fix')) {
     var _editorAPI$selectionT, _editorAPI$selectionT2, _editorAPI$selectionT3;
     // This is a workaround for the rendering issue with the selection toolbar
     // where using useSharedPluginStateSelector or useSharedPluginState the state are not
@@ -114,7 +126,15 @@ export const FullPageEditor = props => {
   if (editorExperiment('platform_editor_controls', 'variant1', {
     exposure: true
   })) {
-    if (fg('platform_editor_controls_toolbar_ssr_fix')) {
+    if (fg('platform_editor_use_preferences_plugin')) {
+      // need to check if the toolbarDockingPref is set to 'none' or 'top'
+      if (toolbarDockingPref === 'none') {
+        primaryToolbarComponents = [];
+        if (!hasCustomComponents(customPrimaryToolbarComponents)) {
+          isEditorToolbarHidden = true;
+        }
+      }
+    } else if (fg('platform_editor_controls_toolbar_ssr_fix')) {
       if (toolbarDocking === 'none') {
         primaryToolbarComponents = [];
         if (!hasCustomComponents(customPrimaryToolbarComponents)) {

package/dist/es2019/ui/Toolbar/getPrimaryToolbarComponents.js

@@ -0,0 +1,16 @@
+import { fg } from '@atlaskit/platform-feature-flags';
+
+// Primary toolbar doesn't actually use plugin state so the state selector doesn't update as intended
+// We need a proper API to deal with non-prosemirror based state in plugins but until then we can retrieve
+// the latest
+export const getPrimaryToolbarComponents = (editorAPI, components) => {
+  if (fg('platform_editor_setup_editorapi_sync')) {
+    var _editorAPI$primaryToo, _editorAPI$primaryToo2;
+    return {
+      components: components !== null && components !== void 0 ? components : editorAPI === null || editorAPI === void 0 ? void 0 : (_editorAPI$primaryToo = editorAPI.primaryToolbar) === null || _editorAPI$primaryToo === void 0 ? void 0 : (_editorAPI$primaryToo2 = _editorAPI$primaryToo.sharedState.currentState()) === null || _editorAPI$primaryToo2 === void 0 ? void 0 : _editorAPI$primaryToo2.components
+    };
+  }
+  return {
+    components
+  };
+};

package/dist/es2019/version-wrapper.js

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

package/dist/esm/create-editor/ReactEditorView.js

@@ -107,7 +107,9 @@ export function ReactEditorView(props) {
     fireAnalyticsEvent: handleAnalyticsEvent
   }));
   useLayoutEffect(function () {
-    setEditorAPI(pluginInjectionAPI.current.api());
+    if (!fg('platform_editor_setup_editorapi_sync')) {
+      setEditorAPI(pluginInjectionAPI.current.api());
+    }
   }, []);
   var createEditorState = useCallback(function (options) {
     var _api$editorViewMode;
@@ -135,6 +137,9 @@ export function ReactEditorView(props) {
     } else {
       config.current = processPluginsList(createPluginsList(options.props.preset, props.editorProps, pluginInjectionAPI.current));
       schema = createSchema(config.current);
+      if (fg('platform_editor_setup_editorapi_sync')) {
+        setEditorAPI(pluginInjectionAPI.current.api());
+      }
     }
     var contentTransformerProvider = options.props.editorProps.contentTransformerProvider;
     var plugins = createPMPlugins({

package/dist/esm/i18n/sl.js

@@ -0,0 +1,13 @@
+/* prettier-ignore */
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by Traduki 2.0.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+//Slovenian (Slovenia) [sl-SI]
+export default {
+  'fabric.editor.chromeCollapsedPlaceholder': 'Vnesite nekaj …',
+  'fabric.editor.editorAssistiveLabel': 'Glavno področje za vsebino; začnite tipkati, da vnesete besedilo.',
+  'fabric.editor.headingLink.toolbarHelpTitle': 'Odpri pogovorno okno pomoči'
+};

package/dist/esm/i18n/sr_RS.js

@@ -0,0 +1,13 @@
+/* prettier-ignore */
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by Traduki 2.0.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+//Serbian (Serbia) [sr-RS]
+export default {
+  'fabric.editor.chromeCollapsedPlaceholder': 'Unesite tekst…',
+  'fabric.editor.editorAssistiveLabel': 'Glavna oblast za sadržaj, počnite da unosite tekst.',
+  'fabric.editor.headingLink.toolbarHelpTitle': 'Otvori dijalog pomoći'
+};

package/dist/esm/presets/default.js

@@ -4,6 +4,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 // #region Imports
 
 import { EditorPresetBuilder } from '@atlaskit/editor-common/preset';
+import { userPreferencesPlugin } from '@atlaskit/editor-plugin-user-preferences';
 import { analyticsPlugin } from '@atlaskit/editor-plugins/analytics';
 import { basePlugin } from '@atlaskit/editor-plugins/base';
 import { betterTypeHistoryPlugin } from '@atlaskit/editor-plugins/better-type-history';
@@ -54,7 +55,13 @@ export function createDefaultPreset(options) {
     performanceTracking: options.performanceTracking
   }], Boolean(options.allowAnalyticsGASV3)).add(betterTypeHistoryPlugin).add([pastePlugin, _objectSpread(_objectSpread({}, options === null || options === void 0 ? void 0 : options.paste), {}, {
     isFullPage: isFullPage
-  })]).add(clipboardPlugin).add(focusPlugin).maybeAdd(interactionPlugin, Boolean(options === null || options === void 0 ? void 0 : options.__livePage) ? fg('platform_editor_no_cursor_on_live_doc_init') : expValEquals('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true)).add(compositionPlugin).add([contextIdentifierPlugin, {
+  })]).add(clipboardPlugin).add(focusPlugin).maybeAdd([userPreferencesPlugin, {
+    initialUserPreferences: {
+      toolbarDockingPosition: isFullPage ? 'none' : 'top'
+    }
+  }], function () {
+    return fg('platform_editor_use_preferences_plugin');
+  }).maybeAdd(interactionPlugin, Boolean(options === null || options === void 0 ? void 0 : options.__livePage) ? fg('platform_editor_no_cursor_on_live_doc_init') : expValEquals('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true)).add(compositionPlugin).add([contextIdentifierPlugin, {
     contextIdentifierProvider: options.contextIdentifierProvider
   }]).add([basePlugin, options.base]).add(decorationsPlugin).add([typeAheadPlugin, options.typeAhead]).maybeAdd(historyPlugin, Boolean(options.allowUndoRedoButtons)).add([primaryToolbarPlugin, {
     contextualFormattingEnabled: isFullPage

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

@@ -28,6 +28,7 @@ import { contentComponentClickWrapper } from '../../Addon/ClickAreaBlock/content
 import { createEditorContentStyle } from '../../ContentStyles';
 import EditorContentContainer from '../../EditorContentContainer/EditorContentContainer';
 import PluginSlot from '../../PluginSlot';
+import { getPrimaryToolbarComponents } from '../../Toolbar/getPrimaryToolbarComponents';
 import { ToolbarWithSizeDetector as Toolbar } from '../../Toolbar/ToolbarWithSizeDetector';
 import WithFlash from '../../WithFlash';
 import { MainToolbar, mainToolbarCustomComponentsSlotStyle } from './Toolbar';
@@ -105,8 +106,9 @@ export var CommentEditorWithIntl = function CommentEditorWithIntl(props) {
   var editorAPI = props.editorAPI;
   var _useCommentEditorPlug = useCommentEditorPluginsStates(editorAPI),
     maxContentSizeState = _useCommentEditorPlug.maxContentSizeState,
-    primaryToolbarState = _useCommentEditorPlug.primaryToolbarState,
+    primaryToolbarHookState = _useCommentEditorPlug.primaryToolbarState,
     editorViewModeState = _useCommentEditorPlug.editorViewModeState;
+  var primaryToolbarState = getPrimaryToolbarComponents(editorAPI, primaryToolbarHookState === null || primaryToolbarHookState === void 0 ? void 0 : primaryToolbarHookState.components);
   var _useSharedPluginState = useSharedPluginState(editorAPI, ['media']),
     mediaState = _useSharedPluginState.mediaState;
   var intl = useIntl();

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

@@ -13,6 +13,7 @@ import { ContextPanelWidthProvider } from '@atlaskit/editor-common/ui';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { getPrimaryToolbarComponents } from '../../Toolbar/getPrimaryToolbarComponents';
 import { FullPageContentArea } from './FullPageContentArea';
 import { FullPageToolbar } from './FullPageToolbar';
 import { getEditorViewMode } from './getEditorViewModeSync';
@@ -85,8 +86,9 @@ export var FullPageEditor = function FullPageEditor(props) {
   var editorAPI = props.editorAPI;
   var _useFullPageEditorPlu = useFullPageEditorPluginsStates(editorAPI),
     editorViewModeState = _useFullPageEditorPlu.editorViewModeState,
-    primaryToolbarState = _useFullPageEditorPlu.primaryToolbarState,
+    primaryToolbarHookState = _useFullPageEditorPlu.primaryToolbarState,
     interactionState = _useFullPageEditorPlu.interactionState;
+  var primaryToolbarState = getPrimaryToolbarComponents(editorAPI, primaryToolbarHookState === null || primaryToolbarHookState === void 0 ? void 0 : primaryToolbarHookState.components);
   var viewMode = getEditorViewMode(editorViewModeState, props.preset);
 
   // Remove all this logic when platform_editor_interaction_api_refactor is cleaned up
@@ -101,8 +103,18 @@ export var FullPageEditor = function FullPageEditor(props) {
   } else {
     hasHadInteraction = interactionState === null || interactionState === void 0 ? void 0 : interactionState.hasHadInteraction;
   }
-  var toolbarDocking = useSharedPluginStateSelector(editorAPI, 'selectionToolbar.toolbarDocking');
-  if (!toolbarDocking && fg('platform_editor_controls_toolbar_ssr_fix')) {
+  var toolbarDocking = useSharedPluginStateSelector(editorAPI, 'selectionToolbar.toolbarDocking', {
+    disabled: fg('platform_editor_use_preferences_plugin')
+  });
+  var toolbarDockingPref = useSharedPluginStateSelector(editorAPI, 'userPreferences.preferences.toolbarDockingPosition', {
+    disabled: !fg('platform_editor_use_preferences_plugin')
+  });
+  if (fg('platform_editor_use_preferences_plugin')) {
+    if (!toolbarDockingPref) {
+      var _editorAPI$userPrefer;
+      toolbarDockingPref = editorAPI === null || editorAPI === void 0 || (_editorAPI$userPrefer = editorAPI.userPreferences) === null || _editorAPI$userPrefer === void 0 || (_editorAPI$userPrefer = _editorAPI$userPrefer.sharedState.currentState()) === null || _editorAPI$userPrefer === void 0 ? void 0 : _editorAPI$userPrefer.preferences.toolbarDockingPosition;
+    }
+  } else if (!toolbarDocking && fg('platform_editor_controls_toolbar_ssr_fix')) {
     var _editorAPI$selectionT, _editorAPI$selectionT2;
     // This is a workaround for the rendering issue with the selection toolbar
     // where using useSharedPluginStateSelector or useSharedPluginState the state are not
@@ -119,7 +131,15 @@ export var FullPageEditor = function FullPageEditor(props) {
   if (editorExperiment('platform_editor_controls', 'variant1', {
     exposure: true
   })) {
-    if (fg('platform_editor_controls_toolbar_ssr_fix')) {
+    if (fg('platform_editor_use_preferences_plugin')) {
+      // need to check if the toolbarDockingPref is set to 'none' or 'top'
+      if (toolbarDockingPref === 'none') {
+        primaryToolbarComponents = [];
+        if (!hasCustomComponents(customPrimaryToolbarComponents)) {
+          isEditorToolbarHidden = true;
+        }
+      }
+    } else if (fg('platform_editor_controls_toolbar_ssr_fix')) {
       if (toolbarDocking === 'none') {
         primaryToolbarComponents = [];
         if (!hasCustomComponents(customPrimaryToolbarComponents)) {

package/dist/esm/ui/Toolbar/getPrimaryToolbarComponents.js

@@ -0,0 +1,16 @@
+import { fg } from '@atlaskit/platform-feature-flags';
+
+// Primary toolbar doesn't actually use plugin state so the state selector doesn't update as intended
+// We need a proper API to deal with non-prosemirror based state in plugins but until then we can retrieve
+// the latest
+export var getPrimaryToolbarComponents = function getPrimaryToolbarComponents(editorAPI, components) {
+  if (fg('platform_editor_setup_editorapi_sync')) {
+    var _editorAPI$primaryToo;
+    return {
+      components: components !== null && components !== void 0 ? components : editorAPI === null || editorAPI === void 0 || (_editorAPI$primaryToo = editorAPI.primaryToolbar) === null || _editorAPI$primaryToo === void 0 || (_editorAPI$primaryToo = _editorAPI$primaryToo.sharedState.currentState()) === null || _editorAPI$primaryToo === void 0 ? void 0 : _editorAPI$primaryToo.components
+    };
+  }
+  return {
+    components: components
+  };
+};

package/dist/esm/version-wrapper.js

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