If no draft exists, insert initial value

apps/app/src/components/PageEditor/PageEditor.tsx

@@ -46,6 +46,7 @@ import {
 } from '~/stores/ui';
 import { useEditingUsers } from '~/stores/use-editing-users';
 import { useNextThemes } from '~/stores/use-next-themes';
+import { useCurrentPageYjsData } from '~/stores/yjs';
 import loggerFactory from '~/utils/logger';
 
 import { EditorNavbar } from './EditorNavbar';
@@ -107,9 +108,12 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
   const { data: editorSettings } = useEditorSettings();
   const { mutate: mutateIsGrantNormalized } = useSWRxCurrentGrantData(currentPage?._id);
   const { data: user } = useCurrentUser();
+  const { data: yjsData } = useCurrentPageYjsData();
   const { onEditorsUpdated } = useEditingUsers();
   const onConflict = useConflictResolver();
 
+  console.log('yjsData', yjsData);
+
   const { data: rendererOptions } = usePreviewOptions();
 
   const { mutate: mutateResolvedTheme } = useResolvedThemeForEditor();
@@ -149,7 +153,10 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
     // set to ref
     initialValueRef.current = initialValue;
   }, [initialValue]);
-  const [markdownToPreview, setMarkdownToPreview] = useState<string>(initialValue);
+
+  const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(GlobalCodeMirrorEditorKey.MAIN);
+
+  const [markdownToPreview, setMarkdownToPreview] = useState<string>(codeMirrorEditor?.getDoc() ?? '');
   const setMarkdownPreviewWithDebounce = useMemo(() => debounce(100, throttle(150, (value: string) => {
     setMarkdownToPreview(value);
   })), []);
@@ -159,8 +166,6 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
   }, [setMarkdownPreviewWithDebounce]);
 
 
-  const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(GlobalCodeMirrorEditorKey.MAIN);
-
   const { scrollEditorHandler, scrollPreviewHandler } = useScrollSync(GlobalCodeMirrorEditorKey.MAIN, previewRef);
 
   const scrollEditorHandlerThrottle = useMemo(() => throttle(25, scrollEditorHandler), [scrollEditorHandler]);
@@ -353,6 +358,7 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
       <div className={`flex-expand-horiz ${props.visibility ? '' : 'd-none'}`}>
         <div className="page-editor-editor-container flex-expand-vert border-end">
           <CodeMirrorEditorMain
+            hasYjsDraft={yjsData?.hasYjsDraft ?? false}
             isEditorMode={editorMode === EditorMode.Editor}
             onChange={markdownChangedHandler}
             onSave={saveWithShortcut}

apps/app/src/interfaces/yjs.ts

@@ -1,4 +1,5 @@
 export type CurrentPageYjsData = {
+  hasYjsDraft?: boolean,
   hasRevisionBodyDiff?: boolean,
   awarenessStateSize?: number,
 }

apps/app/src/server/service/page/index.ts

@@ -4456,6 +4456,7 @@ class PageService implements IPageService {
     const hasRevisionBodyDiff = await this.hasRevisionBodyDiff(pageId, yjsDraft);
 
     return {
+      hasYjsDraft: yjsDraft != null,
       hasRevisionBodyDiff,
       awarenessStateSize: currentYdoc?.awareness.states.size,
     };

apps/app/src/server/service/yjs-connection-manager.ts

@@ -48,7 +48,7 @@ class YjsConnectionManager {
     return this.instance;
   }
 
-  public async handleYDocSync(pageId: string, initialValue: string): Promise<void> {
+  public async handleYDocSync(pageId: string, initialValue?: string): Promise<void> {
     const currentYdoc = this.getCurrentYdoc(pageId);
     if (currentYdoc == null) {
       return;
@@ -62,7 +62,7 @@ class YjsConnectionManager {
     const persistedCodeMirrorText = persistedYdoc.getText('codemirror').toString();
     const currentCodeMirrorText = currentYdoc.getText('codemirror').toString();
 
-    if (persistedCodeMirrorText === '' && currentCodeMirrorText === '') {
+    if (persistedCodeMirrorText === '' && currentCodeMirrorText === '' && initialValue != null) {
       currentYdoc.getText('codemirror').insert(0, initialValue);
     }
 

packages/editor/src/components/CodeMirrorEditorMain.tsx

@@ -22,18 +22,19 @@ type Props = CodeMirrorEditorProps & {
   pageId?: string,
   initialValue?: string,
   isEditorMode: boolean,
+  hasYjsDraft: boolean,
   onEditorsUpdated?: (userList: IUserHasId[]) => void,
 }
 
 export const CodeMirrorEditorMain = (props: Props): JSX.Element => {
   const {
-    user, pageId, initialValue, isEditorMode,
+    user, pageId, initialValue, isEditorMode, hasYjsDraft,
     onSave, onEditorsUpdated, ...otherProps
   } = props;
 
   const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(GlobalCodeMirrorEditorKey.MAIN);
 
-  useCollaborativeEditorMode(isEditorMode, user, pageId, initialValue, onEditorsUpdated, codeMirrorEditor);
+  useCollaborativeEditorMode(isEditorMode, hasYjsDraft, user, pageId, initialValue, onEditorsUpdated, codeMirrorEditor);
 
   // setup additional extensions
   useEffect(() => {

packages/editor/src/stores/use-collaborative-editor-mode.ts

@@ -19,6 +19,7 @@ type UserLocalState = {
 
 export const useCollaborativeEditorMode = (
     isEnabled: boolean,
+    hasDraft: boolean,
     user?: IUserHasId,
     pageId?: string,
     initialValue?: string,
@@ -92,7 +93,9 @@ export const useCollaborativeEditorMode = (
 
     socketIOProvider.on('sync', (isSync: boolean) => {
       if (isSync) {
-        socket.emit(GlobalSocketEventName.YDocSync, { pageId, initialValue });
+        // If no draft exists, insert initial value
+        socket.emit(GlobalSocketEventName.YDocSync, { pageId, initialValue: hasDraft ? undefined : initialValue });
+
         const userList: IUserHasId[] = Array.from(socketIOProvider.awareness.states.values(), value => value.user.user && value.user.user);
         onEditorsUpdated(userList);
       }
@@ -108,7 +111,7 @@ export const useCollaborativeEditorMode = (
     });
 
     setProvider(socketIOProvider);
-  }, [initialValue, onEditorsUpdated, pageId, provider, socket, user, ydoc]);
+  }, [hasDraft, initialValue, onEditorsUpdated, pageId, provider, socket, user, ydoc]);
 
   // Setup Ydoc Extensions
   useEffect(() => {