@atlaskit/editor-core 219.5.0 → 219.6.0

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

@@ -14,7 +14,9 @@ var _react = _interopRequireDefault(require("react"));
 var _browser = require("@atlaskit/editor-common/browser");
 var _panel = require("@atlaskit/editor-common/panel");
 var _styles = require("@atlaskit/editor-common/styles");
+var _tableCellBackgroundForCompiled = require("@atlaskit/editor-common/table-cell-background-for-compiled");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _overflowShadowForCompiled = require("@atlaskit/editor-shared-styles/overflow-shadow-for-compiled");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
@@ -258,12 +260,14 @@ var 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: "",
@@ -301,6 +305,9 @@ var EditorContentContainerCompiled = exports.EditorContentContainerCompiled = /*
   var isChromeless = appearance === 'chromeless';
   var baseFontSize = (0, _getBaseFontSize.getBaseFontSize)(appearance, contentMode);
   var isDense = !!baseFontSize && baseFontSize !== _editorSharedStyles.akEditorFullPageDefaultFontSize;
+  var tableOverflowShadow = (0, _overflowShadowForCompiled.overflowShadowForCompiled)({
+    leftCoverWidth: "var(--ds-space-300, 24px)"
+  });
   var style = (0, _experiments.editorExperiment)('platform_editor_preview_panel_responsiveness', true, {
     exposure: true
   }) ? {
@@ -308,14 +315,16 @@ var EditorContentContainerCompiled = exports.EditorContentContainerCompiled = /*
       theme: {
         baseFontSize: baseFontSize
       }
-    }), "px")
+    }), "px"),
+    '--ak-editor--table-overflow-shadow': tableOverflowShadow
   } : {
     '--ak-editor-base-font-size': "".concat((0, _editorSharedStyles.editorFontSize)({
       theme: {
         baseFontSize: baseFontSize
       }
     }), "px"),
-    '--ak-editor--large-gutter-padding': "".concat((0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), "px")
+    '--ak-editor--large-gutter-padding': "".concat((0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), "px"),
+    '--ak-editor--table-overflow-shadow': tableOverflowShadow
   };
   var browser = (0, _browser.getBrowserInfo)();
   return /*#__PURE__*/_react.default.createElement("div", {
@@ -383,11 +392,7 @@ var EditorContentContainerCompiled = exports.EditorContentContainerCompiled = /*
     // 		: // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     // 			getDenseEmojiStyles(baseFontSize)
     // 	: undefined,
-    editorContentStyles.panelViewStyles, editorContentStyles.mediaGroupStyles, editorContentStyles.mediaAlignmentStyles, (0, _expValEquals.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, (0, _expValEquals.expValEquals)('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) && editorContentStyles.tableContentModeStyles, editorContentStyles.hyperLinkFloatingToolbarStyles, editorContentStyles.selectionToolbarAnimationStyles, (0, _experiments.editorExperiment)('platform_editor_block_menu', true) && editorContentStyles.blockquoteDangerStyles, (0, _experiments.editorExperiment)('platform_editor_block_menu', true) && editorContentStyles.textDangerStyles, (0, _experiments.editorExperiment)('platform_editor_block_menu', true) && editorContentStyles.listDangerStyles, (0, _experiments.editorExperiment)('platform_editor_block_menu', true) && editorContentStyles.dangerDateStyles, (0, _experiments.editorExperiment)('platform_editor_block_menu', true) && editorContentStyles.emojiDangerStyles, (0, _experiments.editorExperiment)('platform_editor_block_menu', true) && editorContentStyles.mentionDangerStyles, (0, _experiments.editorExperiment)('platform_editor_block_menu', true) && editorContentStyles.decisionDangerStyles, (0, _experiments.editorExperiment)('platform_editor_block_menu', true) && editorContentStyles.statusDangerStyles, (0, _experiments.editorExperiment)('platform_editor_block_menu', true) && editorContentStyles.dangerRuleStyles, (0, _experiments.editorExperiment)('platform_editor_block_menu', true) && editorContentStyles.mediaDangerStyles, (0, _experiments.editorExperiment)('platform_editor_block_menu', true) && editorContentStyles.nestedPanelDangerStyles, className]),
+    editorContentStyles.panelViewStyles, editorContentStyles.mediaGroupStyles, editorContentStyles.mediaAlignmentStyles, (0, _expValEquals.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, (0, _expValEquals.expValEquals)('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) && editorContentStyles.tableContentModeStyles, editorContentStyles.hyperLinkFloatingToolbarStyles, editorContentStyles.selectionToolbarAnimationStyles, (0, _experiments.editorExperiment)('platform_editor_block_menu', true) && editorContentStyles.blockquoteDangerStyles, (0, _experiments.editorExperiment)('platform_editor_block_menu', true) && editorContentStyles.textDangerStyles, (0, _experiments.editorExperiment)('platform_editor_block_menu', true) && editorContentStyles.listDangerStyles, (0, _experiments.editorExperiment)('platform_editor_block_menu', true) && editorContentStyles.dangerDateStyles, (0, _experiments.editorExperiment)('platform_editor_block_menu', true) && editorContentStyles.emojiDangerStyles, (0, _experiments.editorExperiment)('platform_editor_block_menu', true) && editorContentStyles.mentionDangerStyles, (0, _experiments.editorExperiment)('platform_editor_block_menu', true) && editorContentStyles.decisionDangerStyles, (0, _experiments.editorExperiment)('platform_editor_block_menu', true) && editorContentStyles.statusDangerStyles, (0, _experiments.editorExperiment)('platform_editor_block_menu', true) && editorContentStyles.dangerRuleStyles, (0, _experiments.editorExperiment)('platform_editor_block_menu', true) && editorContentStyles.mediaDangerStyles, (0, _experiments.editorExperiment)('platform_editor_block_menu', true) && editorContentStyles.nestedPanelDangerStyles, className]),
     ref: ref,
     "data-editor-scroll-container": isScrollable ? 'true' : undefined,
     "data-testid": "editor-content-container"
@@ -396,5 +401,5 @@ var EditorContentContainerCompiled = exports.EditorContentContainerCompiled = /*
     style: style,
     tabIndex: isScrollable ? 0 : undefined,
     role: isScrollable ? 'region' : undefined
-  }, children);
+  }, /*#__PURE__*/_react.default.createElement("style", null, _tableCellBackgroundForCompiled.tableCellBackgroundStyleOverrideForCompiled), children);
 });

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

@@ -23,12 +23,19 @@ function MountPluginHooks(_ref2) {
   if (!editorView) {
     return null;
   }
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, pluginHooks === null || pluginHooks === void 0 ? void 0 : pluginHooks.map(function (usePluginHook, key) {
+
+  // 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.default.createElement(_react.default.Fragment, null, pluginHooks === null || pluginHooks === void 0 ? void 0 : pluginHooks.map(function (usePluginHook, index) {
+    var pluginName = usePluginHook.pluginName;
     return /*#__PURE__*/_react.default.createElement(MountPluginHook
-    // Ignored via go/ees005
     // eslint-disable-next-line react/no-array-index-key
     , {
-      key: key,
+      key: pluginName !== null && pluginName !== void 0 ? pluginName : index,
       usePluginHook: usePluginHook,
       editorView: editorView,
       containerElement: containerElement

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

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

@@ -38,6 +38,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';
@@ -336,6 +337,10 @@ export function ReactEditorView(props) {
   // in-place-mutated `config.current` (contentComponents / toolbar
   // components from the rebuilt preset).
   const [, bumpConfigVersion] = useState(0);
+
+  // Preset reference last processed by the schema/API reconciliation below.
+  // Used to skip that work when reconfigure is called with the same preset.
+  const lastFilteredPresetRef = useRef(null);
   const reconfigureState = useCallback(props => {
     if (!viewRef.current) {
       return;
@@ -345,7 +350,44 @@ 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();
-    const editorPlugins = createPluginsList(props.preset, 'allowBlockType' in props.editorProps ? props.editorProps : {}, pluginInjectionAPI.current);
+
+    // 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.
+    const previousPluginNames = new Set(pluginInjectionAPI.current.getRegisteredPluginNames());
+    let 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')) {
+      const {
+        kept,
+        dropped
+      } = filterPluginsForReconfigure(editorPlugins, viewRef.current.state.schema, previousPluginNames);
+      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.
+      const keptPluginNames = new Set(editorPlugins.map(p => p === null || p === void 0 ? void 0 : p.name).filter(n => Boolean(n)));
+      const evictedFromApi = pluginInjectionAPI.current.retainPlugins(keptPluginNames);
+      if (dropped.length > 0 || evictedFromApi.length > 0) {
+        // eslint-disable-next-line no-console
+        console.warn('[reconfigureState] Cleanup summary:', {
+          dropped,
+          evictedFromApi
+        });
+      }
+      lastFilteredPresetRef.current = props.preset;
+    }
     config.current = processPluginsList(editorPlugins);
     if (expValEquals('platform_editor_appearance_shared_state', 'isEnabled', true)) {
       config.current.pmPlugins.push(...pluginInjectionAPI.current.getInternalPMPlugins());

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

@@ -53,7 +53,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.
+      const named = plugin.usePluginHook.bind(null);
+      named.pluginName = plugin.name;
+      acc.pluginHooks.push(named);
     }
     if (plugin.primaryToolbarComponent) {
       acc.primaryToolbarComponents.push(plugin.primaryToolbarComponent);

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

@@ -0,0 +1,35 @@
+/**
+ * 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) {
+  const availableNodeNames = new Set(Object.keys(schema.nodes));
+  const availableMarkNames = new Set(Object.keys(schema.marks));
+  const dropped = [];
+  const kept = editorPlugins.filter(plugin => {
+    if (!plugin) {
+      return false;
+    }
+    if (previousPluginNames.has(plugin.name)) {
+      return true;
+    }
+    const missingNodes = plugin.nodes ? plugin.nodes().map(n => n.name).filter(n => !availableNodeNames.has(n)) : [];
+    const missingMarks = plugin.marks ? plugin.marks().map(m => m.name).filter(m => !availableMarkNames.has(m)) : [];
+    if (missingNodes.length > 0 || missingMarks.length > 0) {
+      dropped.push({
+        name: plugin.name,
+        missingNodes,
+        missingMarks
+      });
+      return false;
+    }
+    return true;
+  });
+  return {
+    kept,
+    dropped
+  };
+}

package/dist/es2019/test-utils.js

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

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

@@ -55,17 +55,6 @@ const SecondChildWrapper = ({
     className: ax([styles.secondChildWrapperOneLine])
   }, children);
 };
-
-/**
- * Placeholder component that reserves the toolbar's space during hydration
- * to prevent layout shift when the actual toolbar renders.
- */
-const ToolbarPlaceholder = () => {
-  return /*#__PURE__*/React.createElement("div", {
-    "data-testid": "ak-editor-main-toolbar-placeholder",
-    className: ax([styles.toolbarPlaceholder])
-  });
-};
 const shouldShowToolbarContainer = (toolbar, customPrimaryToolbarComponents) => {
   return !!toolbar || !!customPrimaryToolbarComponents;
 };
@@ -119,40 +108,9 @@ export const FullPageToolbarNext = ({
   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, ({
-      width: ContextPanelWidth
-    }) => /*#__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, ({
     width: ContextPanelWidth
-  }) => /*#__PURE__*/React.createElement(ExcludeFromHydration, {
-    fallback: /*#__PURE__*/React.createElement(ToolbarPlaceholder, null)
-  }, /*#__PURE__*/React.createElement(ToolbarArrowKeyNavigationProvider, {
+  }) => /*#__PURE__*/React.createElement(ToolbarArrowKeyNavigationProvider, {
     editorView: editorView,
     childComponentSelector: "[data-testid='ak-editor-main-toolbar']",
     isShortcutToFocusToolbar: isShortcutToFocusToolbar,
@@ -163,7 +121,7 @@ export const FullPageToolbarNext = ({
     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,
@@ -171,10 +129,10 @@ export const FullPageToolbarNext = ({
     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))))));
 };