fix: toolbar flicker on navigation (#2352)

apps/client/src/features/editor/components/fixed-toolbar/fixed-toolbar.module.css

@@ -6,6 +6,7 @@
   z-index: 99;
   display: flex;
   align-items: center;
+  min-height: 45px;
   background: var(--mantine-color-body);
   border-bottom: 1px solid
     light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));

apps/client/src/features/editor/components/fixed-toolbar/fixed-toolbar.tsx

@@ -31,8 +31,6 @@ export const FixedToolbar: FC<FixedToolbarProps> = ({
   const workspace = useAtomValue(workspaceAtom);
   const isGenerativeAiEnabled = workspace?.settings?.ai?.generative === true;
 
-  if (!editor || !state) return null;
-
   return (
     <>
       <div
@@ -49,22 +47,26 @@ export const FixedToolbar: FC<FixedToolbarProps> = ({
               <div className={classes.divider} />
             </>
           )} */}
-          <BlockTypeGroup editor={editor} />
+          {editor && state && (
-          <div className={classes.divider} />
+            <>
-          <InlineMarksGroup editor={editor} state={state} />
+              <BlockTypeGroup editor={editor} />
-          <div className={classes.divider} />
+              <div className={classes.divider} />
-          <ColorGroup editor={editor} />
+              <InlineMarksGroup editor={editor} state={state} />
-          <div className={classes.divider} />
+              <div className={classes.divider} />
-          <ListsGroup editor={editor} state={state} />
+              <ColorGroup editor={editor} />
-          <div className={classes.divider} />
+              <div className={classes.divider} />
-          <AlignmentGroup editor={editor} />
+              <ListsGroup editor={editor} state={state} />
-          <div className={classes.divider} />
+              <div className={classes.divider} />
-          <MediaGroup editor={editor} templateMode={templateMode} />
+              <AlignmentGroup editor={editor} />
-          <div className={classes.divider} />
+              <div className={classes.divider} />
-          <QuickInsertsGroup editor={editor} />
+              <MediaGroup editor={editor} templateMode={templateMode} />
-          <MoreInsertsGroup editor={editor} templateMode={templateMode} />
+              <div className={classes.divider} />
-          <div className={classes.divider} />
+              <QuickInsertsGroup editor={editor} />
-          <HistoryGroup editor={editor} state={state} />
+              <MoreInsertsGroup editor={editor} templateMode={templateMode} />
+              <div className={classes.divider} />
+              <HistoryGroup editor={editor} state={state} />
+            </>
+          )}
         </div>
       </div>
       <div className={classes.spacer} aria-hidden />

apps/client/src/features/editor/page-editor.tsx

@@ -2,6 +2,7 @@ import "@/features/editor/styles/index.css";
 import React, {
   useCallback,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -100,11 +101,13 @@ export default function PageEditor({
   const { pageSlug } = useParams();
   const slugId = extractPageSlugId(pageSlug);
   const [socket] = useState(getCollabSocket);
+  const hasCollabToken = !!collabQuery?.token;
 
   useEffect(() => {
+    if (!hasCollabToken) return;
     acquireCollabSocket();
     return () => releaseCollabSocket();
-  }, []);
+  }, [hasCollabToken]);
 
   const handleStateless = ({ payload }: onStatelessParameters) => {
     try {
@@ -322,6 +325,16 @@ function CollabPageEditor({
     [pageId, editable, extensions],
   );
 
+  useLayoutEffect(() => {
+    if (editor && !editor.isDestroyed) {
+      // @ts-ignore
+      setEditor(editor);
+      // @ts-ignore
+      editor.storage.pageId = pageId;
+      editorRef.current = editor;
+    }
+  }, [editor, pageId, setEditor]);
+
   const editorIsEditable = useEditorState({
     editor,
     selector: (ctx) => {