@atlaskit/editor-core 219.4.1 → 219.5.1

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @atlaskit/editor-core
 
+## 219.5.1
+
+### Patch Changes
+
+- [`8db6f0336d199`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8db6f0336d199) -
+  Cleans up experiment platform_editor_toolbar_two_stage_hydration
+- Updated dependencies
+
+## 219.5.0
+
+### Minor Changes
+
+- [`5184c3aa86e89`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5184c3aa86e89) -
+  Pin the primary toolbar to the top while in Markdown Mode source or preview view, where the
+  floating toolbar would be useless (no PM selection to anchor to). Behind the new
+  `platform_editor_toolbar_mode_override` feature gate.
+  - `editor-plugin-toolbar`: adds `commands.setContextualFormattingModeOverride` and a
+    `contextualFormattingModeOverride` field on shared state. Any plugin can compose the command
+    onto its own transaction to push a runtime override.
+  - `editor-plugin-markdown-mode`: pushes the override on `setView` and on initial mount; uses the
+    current view to short-circuit `useIsToolbarDockedToTop` so the in-toolbar toggle renders in the
+    correct slot.
+  - `editor-plugin-selection-toolbar`: `PinButton` hides when the override forces `'always-pinned'`
+    (the toggle is meaningless in that state).
+  - `editor-core` (`FullPage.tsx`, `FullPageToolbarNext.tsx`): the primary-toolbar mount gate
+    consults the runtime override so the toolbar still mounts when the override is
+    `'always-pinned'`, even if the user's docking preference is `'none'`.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 219.4.1
 
 ### Patch Changes

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

@@ -80,14 +80,20 @@ var FullPageEditor = exports.FullPageEditor = function FullPageEditor(props) {
   var scrollContentContainerRef = (0, _react.useRef)(null);
   var showKeyline = useShowKeyline(scrollContentContainerRef);
   var editorAPI = props.editorAPI;
-  var state = (0, _hooks.useSharedPluginStateWithSelector)(editorAPI, ['primaryToolbar', 'interaction', 'editorViewMode'], function (states) {
-    var _states$primaryToolba, _states$interactionSt, _states$editorViewMod;
+  var state = (0, _hooks.useSharedPluginStateWithSelector)(editorAPI, ['primaryToolbar', 'interaction', 'editorViewMode', 'toolbar'], function (states) {
+    var _states$primaryToolba, _states$interactionSt, _states$editorViewMod, _states$toolbarState;
     return {
       primaryToolbarComponents: (_states$primaryToolba = states.primaryToolbarState) === null || _states$primaryToolba === void 0 ? void 0 : _states$primaryToolba.components,
       interactionState: (_states$interactionSt = states.interactionState) === null || _states$interactionSt === void 0 ? void 0 : _states$interactionSt.interactionState,
-      editorViewMode: (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode
+      editorViewMode: (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode,
+      contextualFormattingModeOverride: (_states$toolbarState = states.toolbarState) === null || _states$toolbarState === void 0 ? void 0 : _states$toolbarState.contextualFormattingModeOverride
     };
   });
+  // Markdown Mode forces `'always-pinned'` while in source / preview view
+  // (no PM selection to anchor a floating toolbar to). The user's docking
+  // pref alone is not enough to decide whether to mount the primary toolbar
+  // in that case — the override has to short-circuit the hide gate below.
+  var forcePrimaryToolbarPinned = state.contextualFormattingModeOverride === 'always-pinned' && (0, _platformFeatureFlags.fg)('platform_editor_toolbar_mode_override');
   var interactionState = state.interactionState;
   var primaryToolbarState = (0, _getPrimaryToolbarComponents.getPrimaryToolbarComponents)(editorAPI, state.primaryToolbarComponents);
   var hasHadInteraction = interactionState !== 'hasNotHadInteraction';
@@ -130,14 +136,14 @@ var FullPageEditor = exports.FullPageEditor = function FullPageEditor(props) {
   })) {
     if ((0, _platformFeatureFlags.fg)('platform_editor_use_preferences_plugin')) {
       // need to check if the toolbarDockingPosition is set to 'none' or 'top'
-      if (toolbarDockingPosition === 'none') {
+      if (toolbarDockingPosition === 'none' && !forcePrimaryToolbarPinned) {
         primaryToolbarComponents = [];
         if (!hasCustomComponents(customPrimaryToolbarComponents)) {
           isEditorToolbarHidden = true;
         }
       }
     } else {
-      if (toolbarDocking === 'none') {
+      if (toolbarDocking === 'none' && !forcePrimaryToolbarPinned) {
         primaryToolbarComponents = [];
         if (!hasCustomComponents(customPrimaryToolbarComponents)) {
           isEditorToolbarHidden = true;

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

@@ -13,8 +13,10 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactIntl = require("react-intl");
 var _contextPanel = require("@atlaskit/editor-common/context-panel");
 var _coreUtils = require("@atlaskit/editor-common/core-utils");
+var _hooks = require("@atlaskit/editor-common/hooks");
 var _toolbar = require("@atlaskit/editor-common/toolbar");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _toolbar2 = require("../../../utils/toolbar");
 var _ExcludeFromHydration = _interopRequireDefault(require("../../ExcludeFromHydration"));
@@ -59,17 +61,6 @@ var SecondChildWrapper = function SecondChildWrapper(_ref3) {
     className: (0, _runtime.ax)([styles.secondChildWrapperOneLine])
   }, children);
 };
-
-/**
- * Placeholder component that reserves the toolbar's space during hydration
- * to prevent layout shift when the actual toolbar renders.
- */
-var ToolbarPlaceholder = function ToolbarPlaceholder() {
-  return /*#__PURE__*/_react.default.createElement("div", {
-    "data-testid": "ak-editor-main-toolbar-placeholder",
-    className: (0, _runtime.ax)([styles.toolbarPlaceholder])
-  });
-};
 var shouldShowToolbarContainer = function shouldShowToolbarContainer(toolbar, customPrimaryToolbarComponents) {
   return !!toolbar || !!customPrimaryToolbarComponents;
 };
@@ -84,7 +75,12 @@ var FullPageToolbarNext = exports.FullPageToolbarNext = function FullPageToolbar
     customPrimaryToolbarComponents = _ref4.customPrimaryToolbarComponents,
     disabled = _ref4.disabled;
   var components = editorAPI === null || editorAPI === void 0 || (_editorAPI$toolbar = editorAPI.toolbar) === null || _editorAPI$toolbar === void 0 ? void 0 : _editorAPI$toolbar.actions.getComponents();
-  var contextualFormattingEnabled = editorAPI === null || editorAPI === void 0 || (_editorAPI$toolbar2 = editorAPI.toolbar) === null || _editorAPI$toolbar2 === void 0 ? void 0 : _editorAPI$toolbar2.actions.contextualFormattingMode();
+  var runtimeOverride = (0, _hooks.useSharedPluginStateWithSelector)(editorAPI, ['toolbar'], function (states) {
+    var _states$toolbarState;
+    return (_states$toolbarState = states.toolbarState) === null || _states$toolbarState === void 0 ? void 0 : _states$toolbarState.contextualFormattingModeOverride;
+  });
+  var effectiveRuntimeOverride = runtimeOverride !== undefined && (0, _platformFeatureFlags.fg)('platform_editor_toolbar_mode_override') ? runtimeOverride : undefined;
+  var contextualFormattingEnabled = effectiveRuntimeOverride !== null && effectiveRuntimeOverride !== void 0 ? effectiveRuntimeOverride : editorAPI === null || editorAPI === void 0 || (_editorAPI$toolbar2 = editorAPI.toolbar) === null || _editorAPI$toolbar2 === void 0 ? void 0 : _editorAPI$toolbar2.actions.contextualFormattingMode();
   var intl = (0, _reactIntl.useIntl)();
   var toolbar = components === null || components === void 0 ? void 0 : components.find(function (component) {
     return component.key === _toolbar.TOOLBARS.PRIMARY_TOOLBAR;
@@ -118,41 +114,9 @@ var FullPageToolbarNext = exports.FullPageToolbarNext = function FullPageToolbar
   if (!shouldShowToolbarContainer(toolbar, customPrimaryToolbarComponents)) {
     return /*#__PURE__*/_react.default.createElement(ToolbarPortal, null, null);
   }
-  if ((0, _expValEquals.expValEquals)('platform_editor_toolbar_two_stage_hydration', 'isEnabled', true)) {
-    return /*#__PURE__*/_react.default.createElement(_contextPanel.ContextPanelConsumer, null, function (_ref6) {
-      var ContextPanelWidth = _ref6.width;
-      return /*#__PURE__*/_react.default.createElement(_uiMenu.ToolbarArrowKeyNavigationProvider, {
-        editorView: editorView,
-        childComponentSelector: "[data-testid='ak-editor-main-toolbar']",
-        isShortcutToFocusToolbar: isShortcutToFocusToolbar,
-        handleEscape: handleEscape,
-        intl: intl
-      }, /*#__PURE__*/_react.default.createElement(ToolbarPortal, null, /*#__PURE__*/_react.default.createElement(MainToolbarWrapper, {
-        testId: "ak-editor-main-toolbar",
-        showKeyline: showKeyline || ContextPanelWidth > 0
-      }, beforeIcon && /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _runtime.ax)([styles.mainToolbarIconBefore, styles.mainToolbarIconBeforeNew])
-      }, beforeIcon), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(FirstChildWrapper, null, /*#__PURE__*/_react.default.createElement(_ExcludeFromHydration.default, null, primaryToolbarDockingConfigEnabled && components && (0, _toolbar2.isToolbar)(toolbar) && editorView && !(0, _coreUtils.isSSR)() && /*#__PURE__*/_react.default.createElement(_Toolbar.ToolbarNext, {
-        toolbar: toolbar,
-        components: components,
-        editorView: editorView,
-        editorAPI: editorAPI,
-        popupsMountPoint: mountPoint,
-        editorAppearance: "full-page",
-        isDisabled: disabled
-      }))), /*#__PURE__*/_react.default.createElement(SecondChildWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _runtime.ax)([styles.customToolbarWrapperStyle])
-      }, !!customPrimaryToolbarComponents && 'before' in customPrimaryToolbarComponents && /*#__PURE__*/_react.default.createElement("div", {
-        "data-testid": 'before-primary-toolbar-components-plugin',
-        className: (0, _runtime.ax)([styles.beforePrimaryToolbarComponents])
-      }, customPrimaryToolbarComponents.before), !!customPrimaryToolbarComponents && 'after' in customPrimaryToolbarComponents ? customPrimaryToolbarComponents.after : customPrimaryToolbarComponents)), /*#__PURE__*/_react.default.createElement(_ToolbarPortal.ToolbarPortalMountPoint, null)))));
-    });
-  }
-  return /*#__PURE__*/_react.default.createElement(_contextPanel.ContextPanelConsumer, null, function (_ref7) {
-    var ContextPanelWidth = _ref7.width;
-    return /*#__PURE__*/_react.default.createElement(_ExcludeFromHydration.default, {
-      fallback: /*#__PURE__*/_react.default.createElement(ToolbarPlaceholder, null)
-    }, /*#__PURE__*/_react.default.createElement(_uiMenu.ToolbarArrowKeyNavigationProvider, {
+  return /*#__PURE__*/_react.default.createElement(_contextPanel.ContextPanelConsumer, null, function (_ref6) {
+    var ContextPanelWidth = _ref6.width;
+    return /*#__PURE__*/_react.default.createElement(_uiMenu.ToolbarArrowKeyNavigationProvider, {
       editorView: editorView,
       childComponentSelector: "[data-testid='ak-editor-main-toolbar']",
       isShortcutToFocusToolbar: isShortcutToFocusToolbar,
@@ -163,7 +127,7 @@ var FullPageToolbarNext = exports.FullPageToolbarNext = function FullPageToolbar
       showKeyline: showKeyline || ContextPanelWidth > 0
     }, beforeIcon && /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _runtime.ax)([styles.mainToolbarIconBefore, styles.mainToolbarIconBeforeNew])
-    }, beforeIcon), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(FirstChildWrapper, null, primaryToolbarDockingConfigEnabled && components && (0, _toolbar2.isToolbar)(toolbar) && editorView && !(0, _coreUtils.isSSR)() && /*#__PURE__*/_react.default.createElement(_Toolbar.ToolbarNext, {
+    }, beforeIcon), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(FirstChildWrapper, null, /*#__PURE__*/_react.default.createElement(_ExcludeFromHydration.default, null, primaryToolbarDockingConfigEnabled && components && (0, _toolbar2.isToolbar)(toolbar) && editorView && !(0, _coreUtils.isSSR)() && /*#__PURE__*/_react.default.createElement(_Toolbar.ToolbarNext, {
       toolbar: toolbar,
       components: components,
       editorView: editorView,
@@ -171,11 +135,11 @@ var FullPageToolbarNext = exports.FullPageToolbarNext = function FullPageToolbar
       popupsMountPoint: mountPoint,
       editorAppearance: "full-page",
       isDisabled: disabled
-    })), /*#__PURE__*/_react.default.createElement(SecondChildWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
+    }))), /*#__PURE__*/_react.default.createElement(SecondChildWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _runtime.ax)([styles.customToolbarWrapperStyle])
     }, !!customPrimaryToolbarComponents && 'before' in customPrimaryToolbarComponents && /*#__PURE__*/_react.default.createElement("div", {
       "data-testid": 'before-primary-toolbar-components-plugin',
       className: (0, _runtime.ax)([styles.beforePrimaryToolbarComponents])
-    }, customPrimaryToolbarComponents.before), !!customPrimaryToolbarComponents && 'after' in customPrimaryToolbarComponents ? customPrimaryToolbarComponents.after : customPrimaryToolbarComponents)), /*#__PURE__*/_react.default.createElement(_ToolbarPortal.ToolbarPortalMountPoint, null))))));
+    }, customPrimaryToolbarComponents.before), !!customPrimaryToolbarComponents && 'after' in customPrimaryToolbarComponents ? customPrimaryToolbarComponents.after : customPrimaryToolbarComponents)), /*#__PURE__*/_react.default.createElement(_ToolbarPortal.ToolbarPortalMountPoint, null)))));
   });
 };