@atlaskit/editor-core 219.5.0 → 219.6.0

package/dist/es2019/ui/EditorContentContainer/EditorContentContainer-compiled.js

@@ -11,8 +11,10 @@ import { getBrowserInfo } from '@atlaskit/editor-common/browser';
 // TODO: add back tableSharedStyle when migrate table styles
 // import { richMediaClassName, tableSharedStyle } from '@atlaskit/editor-common/styles';
 import { PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
-import { AnnotationSharedClassNames, richMediaClassName, expandClassNames, SmartCardSharedCssClassName, CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
-import { akEditorFullPageDefaultFontSize, akEditorFullPageDenseFontSize, akEditorGutterPaddingDynamic, editorFontSize } from '@atlaskit/editor-shared-styles';
+import { AnnotationSharedClassNames, richMediaClassName, expandClassNames, SmartCardSharedCssClassName, CodeBlockSharedCssClassName, tableCellBorderWidth, tableCellMinWidth } from '@atlaskit/editor-common/styles';
+import { tableCellBackgroundStyleOverrideForCompiled } from '@atlaskit/editor-common/table-cell-background-for-compiled';
+import { akEditorFullPageDefaultFontSize, akEditorFullPageDenseFontSize, akEditorGutterPaddingDynamic, akEditorTableNumberColumnWidth, editorFontSize } from '@atlaskit/editor-shared-styles';
+import { overflowShadowForCompiled } from '@atlaskit/editor-shared-styles/overflow-shadow-for-compiled';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
@@ -310,12 +312,14 @@ const editorContentStyles = {
   syncBlockOverflowStyles: "",
   syncBlockStyles: "",
   syncBlockStylesBase: "",
-  tableCommentEditorStyles: "",
-  tableContainerStyles: "",
-  tableContentModeStyles: "",
-  tableEmptyRowStyles: "",
-  tableLayoutFixes: "",
-  tableLayoutFixesWithFontSize: "",
+  tableCommentEditorStyles: "_s9qz1mok _1quk1aqn _1tb2idpf _8vyeidpf _1igzolhs _ux48glyw _giavsm61 _axu71ibz",
+  tableContainerStyles: "_18ml1osq _9e5g1wug _uwd31osq _12wgusvi _nnhzewfl _1gbz1osq _10va1osq _lkzl1n9t _1mca1wug",
+  tableContentModeStyles: "_1lxan7od _11a2n7od _19iin7od _1vpzn7od _l6b9n7od _9v33vi1l _poet1ris _9loxvi1l _1dsv1wug _r83tvi1l _cbmx261p",
+  tableEmptyRowStyles: "_1rgmmh6f _u0mgmh6f",
+  tableLayoutFixes: "_1f5xidpf _28dsidpf _f30jidpf _jr291hrf",
+  tableLayoutFixesWithFontSize: "_1f5xidpf _156tidpf _f30jidpf _jr291hrf",
+  tableSharedStyle: "_ad1u99ee _9d0e7qp0 _1mml7qp0 _1u4a1ule _1w721ule _1gr6t94y _ihzat94y _zi6e1vmz _1uln1vmz _wqm3stnw _1o0wstnw _1aho1ejb _uqg71ejb _g971h2mm _fzt6usvi _1nd8idpf _1j1lidpf _e364idpf _7vb2pzf8 _5cdi6z83 _kc8l11ss _9vqg11ss _up97ia51 _jz731rb6 _13ax1rb6 _b7zl1rb6 _10kw1rb6 _1u451rb6 _1gep1rb6 _14oi1rb6 _3yki1rb6 _185t1rb6 _13heu2gc _1uj1u2gc _1ssuu2gc _lqdju2gc _1waku2gc _1nzzu2gc _7xl8ckbl _1jykckbl _1m6qckbl _sellckbl _11t9ckbl _866vckbl _1dlzi7a9 _irzhi7a9 _15t1i7a9 _1ivxi7a9 _16k4i7a9 _1vo6i7a9 _q0zvjp4b _1junjp4b _ixm7jp4b _17dpjp4b _dzhmjp4b _15pyjp4b _dj9oidpf _8zz2idpf _1hwbidpf _1lxyidpf _yqeuidpf _mzo1idpf _9ex2idpf _1805idpf _1iphidpf _qkm8idpf _17v9idpf _4p8kidpf _6o4midpf _1edridpf _5908idpf _1d63idpf _1j36idpf _hlqnidpf _gw0eutpp _1n42utpp _762vutpp _g62yutpp _1y9hutpp _bjiqutpp _5dtjutpp _dclrutpp _1j94utpp _5o16utpp _946yutpp _1kffutpp _13bnglyw _1ekgglyw _nvt3glyw _v91rcfaq _byukcfaq _4oczcfaq _17xf1j28 _6ggl1j28 _wxs41j28 _1h3k1j28 _1e811j28 _w9wp1j28 _3aim1n9t _xsax1n9t _1hz91n9t _vqlp1x4e _1a0i1x4e _m5f81x4e _12j81osq _135a1osq _vkob1osq _dujf1wug _jr3h1wug _1ei91wug _kq5rusvi _31x2usvi _pavrusvi _14jm1ntv _1rfm1ntv _100i1ntv _1ciasm61 _5gm1sm61 _t176sm61 _1az4vuon _1mdwvuon _9l08vuon _vrwbysee _nwuhysee _1qxuysee _go9a1e5h _ktc91e5h _lr001e5h _komfhp5a _1lj5hp5a _96m3hp5a _s2681tsb _15bz1tsb _1skp1tsb _iley2lzm _ay9u2lzm _8zqr2lzm _qxl3i8nm _3gtki8nm _1nu9i8nm _lezgi8nm _1574i8nm _1yd8i8nm _ywut18tx _cee918tx _17h918tx _1esgtoke _1q0atoke _4waqtoke _1syri8nm _pvtri8nm _12jli8nm _dbl6pzf8 _4e711hrf _1hy1bokp _1bxo1ea5",
+  tableSharedStyleBackgroundClipFix: "_m6yo1u8q _19il1u8q _10gj1u8q _tbd61u8q _12ly1u8q _1l071u8q",
   taskItemCheckboxStyles: "",
   taskItemStyles: "",
   taskItemStylesWithBlockTaskItem: "",
@@ -356,6 +360,9 @@ export const EditorContentContainerCompiled = /*#__PURE__*/React.forwardRef((pro
   const isChromeless = appearance === 'chromeless';
   const baseFontSize = getBaseFontSize(appearance, contentMode);
   const isDense = !!baseFontSize && baseFontSize !== akEditorFullPageDefaultFontSize;
+  const tableOverflowShadow = overflowShadowForCompiled({
+    leftCoverWidth: "var(--ds-space-300, 24px)"
+  });
   const style = editorExperiment('platform_editor_preview_panel_responsiveness', true, {
     exposure: true
   }) ? {
@@ -363,14 +370,16 @@ export const EditorContentContainerCompiled = /*#__PURE__*/React.forwardRef((pro
       theme: {
         baseFontSize
       }
-    })}px`
+    })}px`,
+    '--ak-editor--table-overflow-shadow': tableOverflowShadow
   } : {
     '--ak-editor-base-font-size': `${editorFontSize({
       theme: {
         baseFontSize
       }
     })}px`,
-    '--ak-editor--large-gutter-padding': `${akEditorGutterPaddingDynamic()}px`
+    '--ak-editor--large-gutter-padding': `${akEditorGutterPaddingDynamic()}px`,
+    '--ak-editor--table-overflow-shadow': tableOverflowShadow
   };
   const browser = getBrowserInfo();
   return /*#__PURE__*/React.createElement("div", {
@@ -438,11 +447,7 @@ export const EditorContentContainerCompiled = /*#__PURE__*/React.forwardRef((pro
     // 		: // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     // 			getDenseEmojiStyles(baseFontSize)
     // 	: undefined,
-    editorContentStyles.panelViewStyles, editorContentStyles.mediaGroupStyles, editorContentStyles.mediaAlignmentStyles, expValEquals('platform_editor_small_font_size', 'isEnabled', true) ? editorContentStyles.tableLayoutFixesWithFontSize : editorContentStyles.tableLayoutFixes, editorContentStyles.tableContainerStyles,
-    // eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
-    // TODO: it was from "import { tableSharedStyle } from '@atlaskit/editor-common/styles';"
-    // tableSharedStyle(),
-    editorContentStyles.tableEmptyRowStyles, expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) && editorContentStyles.tableContentModeStyles, editorContentStyles.hyperLinkFloatingToolbarStyles, editorContentStyles.selectionToolbarAnimationStyles, editorExperiment('platform_editor_block_menu', true) && editorContentStyles.blockquoteDangerStyles, editorExperiment('platform_editor_block_menu', true) && editorContentStyles.textDangerStyles, editorExperiment('platform_editor_block_menu', true) && editorContentStyles.listDangerStyles, editorExperiment('platform_editor_block_menu', true) && editorContentStyles.dangerDateStyles, editorExperiment('platform_editor_block_menu', true) && editorContentStyles.emojiDangerStyles, editorExperiment('platform_editor_block_menu', true) && editorContentStyles.mentionDangerStyles, editorExperiment('platform_editor_block_menu', true) && editorContentStyles.decisionDangerStyles, editorExperiment('platform_editor_block_menu', true) && editorContentStyles.statusDangerStyles, editorExperiment('platform_editor_block_menu', true) && editorContentStyles.dangerRuleStyles, editorExperiment('platform_editor_block_menu', true) && editorContentStyles.mediaDangerStyles, editorExperiment('platform_editor_block_menu', true) && editorContentStyles.nestedPanelDangerStyles, className]),
+    editorContentStyles.panelViewStyles, editorContentStyles.mediaGroupStyles, editorContentStyles.mediaAlignmentStyles, expValEquals('platform_editor_small_font_size', 'isEnabled', true) ? editorContentStyles.tableLayoutFixesWithFontSize : editorContentStyles.tableLayoutFixes, editorContentStyles.tableContainerStyles, editorContentStyles.tableSharedStyle, (browser.gecko || browser.ie || browser.mac && browser.chrome) && editorContentStyles.tableSharedStyleBackgroundClipFix, editorContentStyles.tableEmptyRowStyles, expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) && editorContentStyles.tableContentModeStyles, editorContentStyles.hyperLinkFloatingToolbarStyles, editorContentStyles.selectionToolbarAnimationStyles, editorExperiment('platform_editor_block_menu', true) && editorContentStyles.blockquoteDangerStyles, editorExperiment('platform_editor_block_menu', true) && editorContentStyles.textDangerStyles, editorExperiment('platform_editor_block_menu', true) && editorContentStyles.listDangerStyles, editorExperiment('platform_editor_block_menu', true) && editorContentStyles.dangerDateStyles, editorExperiment('platform_editor_block_menu', true) && editorContentStyles.emojiDangerStyles, editorExperiment('platform_editor_block_menu', true) && editorContentStyles.mentionDangerStyles, editorExperiment('platform_editor_block_menu', true) && editorContentStyles.decisionDangerStyles, editorExperiment('platform_editor_block_menu', true) && editorContentStyles.statusDangerStyles, editorExperiment('platform_editor_block_menu', true) && editorContentStyles.dangerRuleStyles, editorExperiment('platform_editor_block_menu', true) && editorContentStyles.mediaDangerStyles, editorExperiment('platform_editor_block_menu', true) && editorContentStyles.nestedPanelDangerStyles, className]),
     ref: ref,
     "data-editor-scroll-container": isScrollable ? 'true' : undefined,
     "data-testid": "editor-content-container"
@@ -451,5 +456,5 @@ export const EditorContentContainerCompiled = /*#__PURE__*/React.forwardRef((pro
     style: style,
     tabIndex: isScrollable ? 0 : undefined,
     role: isScrollable ? 'region' : undefined
-  }, children);
+  }, /*#__PURE__*/React.createElement("style", null, tableCellBackgroundStyleOverrideForCompiled), children);
 });

package/dist/es2019/ui/PluginSlot/mount-plugin-hooks.js

@@ -18,13 +18,22 @@ export function MountPluginHooks({
   if (!editorView) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, pluginHooks === null || pluginHooks === void 0 ? void 0 : pluginHooks.map((usePluginHook, key) => /*#__PURE__*/React.createElement(MountPluginHook
-  // Ignored via go/ees005
-  // eslint-disable-next-line react/no-array-index-key
-  , {
-    key: key,
-    usePluginHook: usePluginHook,
-    editorView: editorView,
-    containerElement: containerElement
-  })));
+
+  // Key each fiber by the plugin name carried on the hook function (set by
+  // `processPluginsList`). This keeps fibers stable across `reconfigureState`
+  // calls that change the plugin set — keying by array index would let React
+  // reuse the same fiber for a different `usePluginHook`, which calls a
+  // different sequence of hooks (Rules of Hooks violation).
+  // Falls back to the array index for any hook that wasn't annotated.
+  return /*#__PURE__*/React.createElement(React.Fragment, null, pluginHooks === null || pluginHooks === void 0 ? void 0 : pluginHooks.map((usePluginHook, index) => {
+    const pluginName = usePluginHook.pluginName;
+    return /*#__PURE__*/React.createElement(MountPluginHook
+    // eslint-disable-next-line react/no-array-index-key
+    , {
+      key: pluginName !== null && pluginName !== void 0 ? pluginName : index,
+      usePluginHook: usePluginHook,
+      editorView: editorView,
+      containerElement: containerElement
+    });
+  }));
 }

package/dist/es2019/version-wrapper.js

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

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

@@ -46,6 +46,7 @@ import { PROSEMIRROR_RENDERED_DEGRADED_SEVERITY_THRESHOLD, PROSEMIRROR_RENDERED_
 import { createErrorReporter, createPMPlugins, processPluginsList } from './create-editor';
 import createPluginsList from './create-plugins-list';
 import { createSchema } from './create-schema';
+import { filterPluginsForReconfigure } from './filter-plugins-for-reconfigure';
 import { editorMessages } from './messages';
 import { focusEditorElement } from './ReactEditorView/focusEditorElement';
 import { getUAPrefix } from './ReactEditorView/getUAPrefix';
@@ -353,6 +354,10 @@ export function ReactEditorView(props) {
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     bumpConfigVersion = _useState2[1];
+
+  // Preset reference last processed by the schema/API reconciliation below.
+  // Used to skip that work when reconfigure is called with the same preset.
+  var lastFilteredPresetRef = useRef(null);
   var reconfigureState = useCallback(function (props) {
     if (!viewRef.current) {
       return;
@@ -362,7 +367,47 @@ export function ReactEditorView(props) {
     // so we blur here to stop ProseMirror from trying to apply selection to detached nodes or
     // nodes that haven't been re-rendered to the document yet.
     blur();
+
+    // Snapshot plugin names registered before createPluginsList runs, so
+    // we can tell which plugins are newly added by the new preset vs.
+    // which ones already coexisted with the current schema.
+    var previousPluginNames = new Set(pluginInjectionAPI.current.getRegisteredPluginNames());
     var editorPlugins = createPluginsList(props.preset, 'allowBlockType' in props.editorProps ? props.editorProps : {}, pluginInjectionAPI.current);
+
+    // `state.reconfigure` keeps the original schema, so switching presets
+    // can leave the editor inconsistent in two ways:
+    //   1. The new preset may add plugins that reference schema nodes or
+    //      marks the original schema doesn't have.
+    //   2. Plugins registered by a previous preset can linger in the
+    //      injection API even when the new preset doesn't re-register
+    //      them, so listeners still fire against a state that no longer
+    //      has their pmPlugin.
+    if (lastFilteredPresetRef.current !== props.preset && fg('platform_editor_reconfigure_filter_plugins')) {
+      var _filterPluginsForReco = filterPluginsForReconfigure(editorPlugins, viewRef.current.state.schema, previousPluginNames),
+        kept = _filterPluginsForReco.kept,
+        dropped = _filterPluginsForReco.dropped;
+      editorPlugins = kept;
+
+      // Reconcile the injection API with the post-filter plugin set.
+      // This evicts both the plugins we just dropped above (re-registered
+      // by createPluginsList but no longer in editorPlugins) AND any
+      // plugin from a previous preset that the new preset doesn't
+      // re-register.
+      var keptPluginNames = new Set(editorPlugins.map(function (p) {
+        return p === null || p === void 0 ? void 0 : p.name;
+      }).filter(function (n) {
+        return Boolean(n);
+      }));
+      var evictedFromApi = pluginInjectionAPI.current.retainPlugins(keptPluginNames);
+      if (dropped.length > 0 || evictedFromApi.length > 0) {
+        // eslint-disable-next-line no-console
+        console.warn('[reconfigureState] Cleanup summary:', {
+          dropped: dropped,
+          evictedFromApi: evictedFromApi
+        });
+      }
+      lastFilteredPresetRef.current = props.preset;
+    }
     config.current = processPluginsList(editorPlugins);
     if (expValEquals('platform_editor_appearance_shared_state', 'isEnabled', true)) {
       var _config$current$pmPlu2;

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

@@ -61,7 +61,12 @@ export function processPluginsList(plugins) {
       acc.contentComponents.push(plugin.contentComponent);
     }
     if (plugin.usePluginHook) {
-      acc.pluginHooks.push(plugin.usePluginHook);
+      // Wrap with .bind(null) so we can annotate the function with the
+      // plugin name without mutating the plugin's original hook reference.
+      // MountPluginHooks reads `pluginName` to derive a stable React key.
+      var named = plugin.usePluginHook.bind(null);
+      named.pluginName = plugin.name;
+      acc.pluginHooks.push(named);
     }
     if (plugin.primaryToolbarComponent) {
       acc.primaryToolbarComponents.push(plugin.primaryToolbarComponent);

package/dist/esm/create-editor/filter-plugins-for-reconfigure.js

@@ -0,0 +1,43 @@
+/**
+ * Used by `reconfigureState` to drop plugins from a freshly-built preset that
+ * declare schema nodes/marks the current schema doesn't have. Plugins already
+ * present before this reconfigure are kept untouched: they have demonstrably
+ * coexisted with the schema (e.g. tests that mock a stripped-down schema), so
+ * removing them now would be a regression.
+ */
+export function filterPluginsForReconfigure(editorPlugins, schema, previousPluginNames) {
+  var availableNodeNames = new Set(Object.keys(schema.nodes));
+  var availableMarkNames = new Set(Object.keys(schema.marks));
+  var dropped = [];
+  var kept = editorPlugins.filter(function (plugin) {
+    if (!plugin) {
+      return false;
+    }
+    if (previousPluginNames.has(plugin.name)) {
+      return true;
+    }
+    var missingNodes = plugin.nodes ? plugin.nodes().map(function (n) {
+      return n.name;
+    }).filter(function (n) {
+      return !availableNodeNames.has(n);
+    }) : [];
+    var missingMarks = plugin.marks ? plugin.marks().map(function (m) {
+      return m.name;
+    }).filter(function (m) {
+      return !availableMarkNames.has(m);
+    }) : [];
+    if (missingNodes.length > 0 || missingMarks.length > 0) {
+      dropped.push({
+        name: plugin.name,
+        missingNodes: missingNodes,
+        missingMarks: missingMarks
+      });
+      return false;
+    }
+    return true;
+  });
+  return {
+    kept: kept,
+    dropped: dropped
+  };
+}

package/dist/esm/test-utils.js

@@ -50,7 +50,9 @@ function lightProcessPluginsList(editorPlugins) {
       acc.contentComponents.push(editorPlugin.contentComponent);
     }
     if (editorPlugin.usePluginHook) {
-      acc.pluginHooks.push(editorPlugin.usePluginHook);
+      var named = editorPlugin.usePluginHook.bind(null);
+      named.pluginName = editorPlugin.name;
+      acc.pluginHooks.push(named);
     }
     if (editorPlugin.onEditorViewStateUpdated) {
       acc.onEditorViewStateUpdatedCallbacks.push(editorPlugin.onEditorViewStateUpdated);

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

@@ -52,17 +52,6 @@ var SecondChildWrapper = function SecondChildWrapper(_ref3) {
     className: 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.createElement("div", {
-    "data-testid": "ak-editor-main-toolbar-placeholder",
-    className: ax([styles.toolbarPlaceholder])
-  });
-};
 var shouldShowToolbarContainer = function shouldShowToolbarContainer(toolbar, customPrimaryToolbarComponents) {
   return !!toolbar || !!customPrimaryToolbarComponents;
 };
@@ -116,41 +105,9 @@ export var FullPageToolbarNext = function FullPageToolbarNext(_ref4) {
   if (!shouldShowToolbarContainer(toolbar, customPrimaryToolbarComponents)) {
     return /*#__PURE__*/React.createElement(ToolbarPortal, null, null);
   }
-  if (expValEquals('platform_editor_toolbar_two_stage_hydration', 'isEnabled', true)) {
-    return /*#__PURE__*/React.createElement(ContextPanelConsumer, null, function (_ref6) {
-      var ContextPanelWidth = _ref6.width;
-      return /*#__PURE__*/React.createElement(ToolbarArrowKeyNavigationProvider, {
-        editorView: editorView,
-        childComponentSelector: "[data-testid='ak-editor-main-toolbar']",
-        isShortcutToFocusToolbar: isShortcutToFocusToolbar,
-        handleEscape: handleEscape,
-        intl: intl
-      }, /*#__PURE__*/React.createElement(ToolbarPortal, null, /*#__PURE__*/React.createElement(MainToolbarWrapper, {
-        testId: "ak-editor-main-toolbar",
-        showKeyline: showKeyline || ContextPanelWidth > 0
-      }, beforeIcon && /*#__PURE__*/React.createElement("div", {
-        className: ax([styles.mainToolbarIconBefore, styles.mainToolbarIconBeforeNew])
-      }, beforeIcon), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FirstChildWrapper, null, /*#__PURE__*/React.createElement(ExcludeFromHydration, null, primaryToolbarDockingConfigEnabled && components && isToolbar(toolbar) && editorView && !isSSR() && /*#__PURE__*/React.createElement(ToolbarNext, {
-        toolbar: toolbar,
-        components: components,
-        editorView: editorView,
-        editorAPI: editorAPI,
-        popupsMountPoint: mountPoint,
-        editorAppearance: "full-page",
-        isDisabled: disabled
-      }))), /*#__PURE__*/React.createElement(SecondChildWrapper, null, /*#__PURE__*/React.createElement("div", {
-        className: ax([styles.customToolbarWrapperStyle])
-      }, !!customPrimaryToolbarComponents && 'before' in customPrimaryToolbarComponents && /*#__PURE__*/React.createElement("div", {
-        "data-testid": 'before-primary-toolbar-components-plugin',
-        className: ax([styles.beforePrimaryToolbarComponents])
-      }, customPrimaryToolbarComponents.before), !!customPrimaryToolbarComponents && 'after' in customPrimaryToolbarComponents ? customPrimaryToolbarComponents.after : customPrimaryToolbarComponents)), /*#__PURE__*/React.createElement(ToolbarPortalMountPoint, null)))));
-    });
-  }
-  return /*#__PURE__*/React.createElement(ContextPanelConsumer, null, function (_ref7) {
-    var ContextPanelWidth = _ref7.width;
-    return /*#__PURE__*/React.createElement(ExcludeFromHydration, {
-      fallback: /*#__PURE__*/React.createElement(ToolbarPlaceholder, null)
-    }, /*#__PURE__*/React.createElement(ToolbarArrowKeyNavigationProvider, {
+  return /*#__PURE__*/React.createElement(ContextPanelConsumer, null, function (_ref6) {
+    var ContextPanelWidth = _ref6.width;
+    return /*#__PURE__*/React.createElement(ToolbarArrowKeyNavigationProvider, {
       editorView: editorView,
       childComponentSelector: "[data-testid='ak-editor-main-toolbar']",
       isShortcutToFocusToolbar: isShortcutToFocusToolbar,
@@ -161,7 +118,7 @@ export var FullPageToolbarNext = function FullPageToolbarNext(_ref4) {
       showKeyline: showKeyline || ContextPanelWidth > 0
     }, beforeIcon && /*#__PURE__*/React.createElement("div", {
       className: ax([styles.mainToolbarIconBefore, styles.mainToolbarIconBeforeNew])
-    }, beforeIcon), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FirstChildWrapper, null, primaryToolbarDockingConfigEnabled && components && isToolbar(toolbar) && editorView && !isSSR() && /*#__PURE__*/React.createElement(ToolbarNext, {
+    }, beforeIcon), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FirstChildWrapper, null, /*#__PURE__*/React.createElement(ExcludeFromHydration, null, primaryToolbarDockingConfigEnabled && components && isToolbar(toolbar) && editorView && !isSSR() && /*#__PURE__*/React.createElement(ToolbarNext, {
       toolbar: toolbar,
       components: components,
       editorView: editorView,
@@ -169,11 +126,11 @@ export var FullPageToolbarNext = function FullPageToolbarNext(_ref4) {
       popupsMountPoint: mountPoint,
       editorAppearance: "full-page",
       isDisabled: disabled
-    })), /*#__PURE__*/React.createElement(SecondChildWrapper, null, /*#__PURE__*/React.createElement("div", {
+    }))), /*#__PURE__*/React.createElement(SecondChildWrapper, null, /*#__PURE__*/React.createElement("div", {
       className: ax([styles.customToolbarWrapperStyle])
     }, !!customPrimaryToolbarComponents && 'before' in customPrimaryToolbarComponents && /*#__PURE__*/React.createElement("div", {
       "data-testid": 'before-primary-toolbar-components-plugin',
       className: ax([styles.beforePrimaryToolbarComponents])
-    }, customPrimaryToolbarComponents.before), !!customPrimaryToolbarComponents && 'after' in customPrimaryToolbarComponents ? customPrimaryToolbarComponents.after : customPrimaryToolbarComponents)), /*#__PURE__*/React.createElement(ToolbarPortalMountPoint, null))))));
+    }, customPrimaryToolbarComponents.before), !!customPrimaryToolbarComponents && 'after' in customPrimaryToolbarComponents ? customPrimaryToolbarComponents.after : customPrimaryToolbarComponents)), /*#__PURE__*/React.createElement(ToolbarPortalMountPoint, null)))));
   });
 };