fix: collab editing in note edit

src/components/note.jsx

@@ -20,6 +20,7 @@ import { timestamp2text } from "./utils";
 
 function Note({ note }) {
   return (
+    <>
       <div className="border border-blue-300 rounded-lg p-4">
         <div className="grid grid-cols-1 lg:grid-cols-2">
           <h2 className="font-medium text-center lg:text-left leading-tight text-4xl mt-0 mb-2">
@@ -35,6 +36,11 @@ function Note({ note }) {
           <RenderMarkdown>{note.text}</RenderMarkdown>
         </div>
       </div>
+      <div className="hidden">
+        <input type="text" id="noteTextArea" />
+        <input type="text" id="noteNameInput" />
+      </div>
+    </>
   );
 }
 

src/components/settingsInputs.jsx

@@ -123,6 +123,7 @@ function NoteNameInput({ value, onChange, preview = false }) {
       maxLength={64}
       defaultValue={value}
       onChange={onChange}
+      id="noteNameInput"
     />
   );
 }
@@ -147,7 +148,8 @@ function NoteTextArea({ value, onChange, preview = false }) {
 
 function NotesAdditionalSettings({
   noteText = localStorage.getItem("NoteText"),
-  onClick,
+  onClickAIComp,
+  onClickCollabEdit,
 }) {
   return (
     <>
@@ -164,13 +166,14 @@ function NotesAdditionalSettings({
                   let text = await Complete(noteText);
                   document.getElementById("noteTextArea").value = text;
 
-                  onClick(text);
+                  onClickAIComp(text);
                 }}
               />
             )}
             <SettingsCheckBox
               label={locals.CollabEdit}
               settingName="CollabEdit"
+              onClick={onClickCollabEdit}
             />
           </SettingsSection>
         </div>

src/components/utils.js

@@ -48,4 +48,70 @@ async function getNetLocale(lang, fileName) {
   return (await (await fetch(`localisation/${lang}/${fileName}`)).text()) || "";
 }
 
-export { timestamp2text, reRenderPage, localesProcess, getNetLocale };
+function nameUpdate(val) {
+  socket.emit("nameChanged", {
+    name: val,
+    room: settings.CollabEditPassword,
+  });
+  window.lastSocketUpdate = Date.now();
+}
+
+function textUpdate(val) {
+  socket.emit("textChanged", {
+    text: val,
+    room: settings.CollabEditPassword,
+  });
+  window.lastSocketUpdate = Date.now();
+}
+
+function collab_edit_init(setName, setText, saveToLocalStorage = true) {
+  if (settings.CollabEdit === true) {
+    if (!window.alreadyConnected) {
+      socket.emit("joinRoom", settings.CollabEditPassword);
+      window.alreadyConnected = true;
+      window.lastSocketUpdate = Date.now();
+      window.socketTimeout = 100;
+      window.nameChanged = false;
+      window.textChanged = false;
+
+      setInterval(() => {
+        if (window.nameChanged) {
+          nameUpdate(window.nameChanged);
+          window.nameChanged = false;
+        }
+
+        if (window.textChanged) {
+          textUpdate(window.textChanged);
+          window.textChanged = false;
+        }
+      }, window.socketTimeout);
+    }
+
+    socket.on("textChanged", (data) => {
+      setText(data.text);
+      if (saveToLocalStorage) localStorage.setItem("NoteText", data.text);
+      document.getElementById("noteTextArea").value = data.text;
+    });
+
+    socket.on("nameChanged", (data) => {
+      setName(data.name);
+      if (saveToLocalStorage) localStorage.setItem("NoteName", data.name);
+      document.getElementById("noteNameInput").value = data.name;
+    });
+
+    socket.on("roomJoined", () => {
+      nameUpdate(localStorage.getItem("NoteName"), true);
+      textUpdate(localStorage.getItem("NoteText"), true);
+    });
+  }
+}
+
+export {
+  timestamp2text,
+  reRenderPage,
+  localesProcess,
+  getNetLocale,
+  collab_edit_init,
+  nameUpdate,
+  textUpdate,
+};

src/pages/create.jsx

@@ -20,7 +20,11 @@ import { ChevronDoubleRightIcon } from "@heroicons/react/24/outline";
 import { CheckBox } from "../components/checkbox";
 import { useState } from "react";
 import RenderMarkdown from "../components/markdown";
-import { timestamp2text } from "../components/utils";
+import {
+  collab_edit_init,
+  timestamp2text,
+  textUpdate,
+} from "../components/utils";
 import rehypeRemark from "rehype-remark/lib";
 import ContentEditable from "react-contenteditable";
 import ReactDOMServer from "react-dom/server";
@@ -36,26 +40,6 @@ import {
   SettingsCheckBox,
 } from "../components/settingsInputs";
 
-function nameUpdate(val, force) {
-  if (Date.now() - window.lastSocketUpdate > window.socketTimeout || force) {
-    socket.emit("nameChanged", {
-      name: val,
-      room: settings.CollabEditPassword,
-    });
-    window.lastSocketUpdate = Date.now();
-  }
-}
-
-function textUpdate(val, force) {
-  if (Date.now() - window.lastSocketUpdate > window.socketTimeout || force) {
-    socket.emit("textChanged", {
-      text: val,
-      room: settings.CollabEditPassword,
-    });
-    window.lastSocketUpdate = Date.now();
-  }
-}
-
 function CreateNote() {
   const [preview, setPreview] = useState(false);
   const [publicState, setPublicState] = useState(settings.publicNote);
@@ -83,29 +67,7 @@ function CreateNote() {
     }
   }
 
-  if (settings.CollabEdit === true) {
+  collab_edit_init(setName, setText, false);
-    if (!window.alreadyConnected) {
-      socket.emit("joinRoom", settings.CollabEditPassword);
-      window.alreadyConnected = true;
-      window.lastSocketUpdate = Date.now();
-      window.socketTimeout = 100;
-    }
-
-    socket.on("textChanged", (data) => {
-      setText(data.text);
-      localStorage.setItem("NoteText", data.text);
-    });
-
-    socket.on("nameChanged", (data) => {
-      setName(data.name);
-      localStorage.setItem("NoteName", data.name);
-    });
-
-    socket.on("roomJoined", () => {
-      nameUpdate(localStorage.getItem("NoteName"), true);
-      textUpdate(localStorage.getItem("NoteText"), true);
-    });
-  }
 
   return (
     <div>
@@ -129,13 +91,7 @@ function CreateNote() {
         onChange={(e) => {
           setName(e.target.value);
           localStorage.setItem("NoteName", e.target.value);
-
+          window.nameChanged = e.target.value;
-          if (settings.CollabEdit === true) {
-            nameUpdate(e.target.value);
-            setTimeout(() => {
-              nameUpdate(e.target.value);
-            }, window.socketTimeout);
-          }
         }}
         preview={preview}
       />
@@ -145,13 +101,7 @@ function CreateNote() {
         onChange={(e) => {
           setText(e.target.value);
           localStorage.setItem("NoteText", e.target.value);
-
+          window.textChanged = e.target.value;
-          if (settings.CollabEdit === true) {
-            textUpdate(e.target.value);
-            setTimeout(() => {
-              textUpdate(e.target.value);
-            }, window.socketTimeout);
-          }
         }}
         preview={preview}
       />
@@ -200,12 +150,12 @@ function CreateNote() {
         </div>
 
         <NotesAdditionalSettings
-          onClick={(text) => {
+          onClickAIComp={(text) => {
             localStorage.setItem("NoteText", text);
             setText(text);
 
             if (settings.CollabEdit === true) {
-              textUpdate(text, true);
+              textUpdate(text);
             }
           }}
         />

src/pages/note.jsx

@@ -31,6 +31,7 @@ import {
   NoteTextArea,
   NotesAdditionalSettings,
 } from "../components/settingsInputs";
+import { collab_edit_init, nameUpdate, textUpdate } from "../components/utils";
 
 function NotePage() {
   let params = useParams();
@@ -42,6 +43,8 @@ function NotePage() {
   let [text, setText] = useState(note.text);
   let [name, setName] = useState(note.name);
 
+  collab_edit_init(setName, setText, false);
+
   return (
     <div className="">
       <ButtonWithIcon
@@ -56,17 +59,26 @@ function NotePage() {
           <>
             <NoteNameInput
               value={name}
-              onChange={(e) => setName(e.target.value)}
+              onChange={(e) => {
+                setName(e.target.value);
+                window.nameChanged = e.target.value;
+              }}
             />
             <NoteTextArea
               value={text}
-              onChange={(e) => setText(e.target.value)}
+              onChange={(e) => {
+                setText(e.target.value);
+                window.textChanged = e.target.value;
+              }}
             />
             <div className="grid grid-cols-1 lg:grid-cols-2 justify-items-center w-full">
               <NotesAdditionalSettings
                 noteText={text}
-                onClick={(text) => {
+                onClickAIComp={(text) => {
                   setText(text);
+                  if (settings.CollabEdit === true) {
+                    textUpdate(text);
+                  }
                 }}
               />
             </div>
@@ -85,10 +97,14 @@ function NotePage() {
               text={edit ? locals.Save : locals.Edit}
               icon={edit ? ArchiveBoxArrowDownIcon : PencilIcon}
               onClick={() => {
+                if (settings.CollabEdit === true) {
+                  textUpdate(notes[params.id].text);
+                  nameUpdate(notes[params.id].name);
+                }
+
                 if (edit) {
                   notes[params.id].name = name;
                   notes[params.id].text = text;
-
                   localStorage.setObj("Notes", notes);
                 }