src/components/note.jsx

@@ -20,27 +20,21 @@ import { timestamp2text } from "./utils";
 
 function Note({ note }) {
   return (
-    <>
+    <div className="border border-blue-300 rounded-lg p-4">
-      <div className="border border-blue-300 rounded-lg p-4">
+      <div className="grid grid-cols-1 lg:grid-cols-2">
-        <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">
-          <h2 className="font-medium text-center lg:text-left leading-tight text-4xl mt-0 mb-2">
+          {note.name}
-            {note.name}
+        </h2>
-          </h2>
+        <div className="justify-self-center lg:justify-self-end">
-          <div className="justify-self-center lg:justify-self-end">
+          {`${timestamp2text(note.time)} ${
-            {`${timestamp2text(note.time)} ${
+            note.pub ? `| ${locals.PublicNote}` : `| ${locals.LocalNote}`
-              note.pub ? `| ${locals.PublicNote}` : `| ${locals.LocalNote}`
+          }`}
-            }`}
-          </div>
-        </div>
-        <div className="w-full md break-words">
-          <RenderMarkdown>{note.text}</RenderMarkdown>
         </div>
       </div>
-      <div className="hidden">
+      <div className="w-full md break-words">
-        <input type="text" id="noteTextArea" />
+        <RenderMarkdown>{note.text}</RenderMarkdown>
-        <input type="text" id="noteNameInput" />
       </div>
-    </>
+    </div>
   );
 }
 

src/components/settingsInputs.jsx

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

src/components/utils.js

@@ -48,70 +48,4 @@ async function getNetLocale(lang, fileName) {
   return (await (await fetch(`localisation/${lang}/${fileName}`)).text()) || "";
 }
 
-function nameUpdate(val) {
+export { timestamp2text, reRenderPage, localesProcess, getNetLocale };
-  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,11 +20,7 @@ import { ChevronDoubleRightIcon } from "@heroicons/react/24/outline";
 import { CheckBox } from "../components/checkbox";
 import { useState } from "react";
 import RenderMarkdown from "../components/markdown";
-import {
+import { timestamp2text } from "../components/utils";
-  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";
@@ -40,6 +36,26 @@ 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);
@@ -67,7 +83,29 @@ function CreateNote() {
     }
   }
 
-  collab_edit_init(setName, setText, false);
+  if (settings.CollabEdit === true) {
+    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>
@@ -91,7 +129,13 @@ 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}
       />
@@ -101,7 +145,13 @@ 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}
       />
@@ -150,12 +200,12 @@ function CreateNote() {
         </div>
 
         <NotesAdditionalSettings
-          onClickAIComp={(text) => {
+          onClick={(text) => {
             localStorage.setItem("NoteText", text);
             setText(text);
 
             if (settings.CollabEdit === true) {
-              textUpdate(text);
+              textUpdate(text, true);
             }
           }}
         />

src/pages/note.jsx

@@ -31,7 +31,6 @@ import {
   NoteTextArea,
   NotesAdditionalSettings,
 } from "../components/settingsInputs";
-import { collab_edit_init, nameUpdate, textUpdate } from "../components/utils";
 
 function NotePage() {
   let params = useParams();
@@ -43,8 +42,6 @@ function NotePage() {
   let [text, setText] = useState(note.text);
   let [name, setName] = useState(note.name);
 
-  collab_edit_init(setName, setText, false);
-
   return (
     <div className="">
       <ButtonWithIcon
@@ -59,26 +56,17 @@ function NotePage() {
           <>
             <NoteNameInput
               value={name}
-              onChange={(e) => {
+              onChange={(e) => setName(e.target.value)}
-                setName(e.target.value);
-                window.nameChanged = e.target.value;
-              }}
             />
             <NoteTextArea
               value={text}
-              onChange={(e) => {
+              onChange={(e) => setText(e.target.value)}
-                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}
-                onClickAIComp={(text) => {
+                onClick={(text) => {
                   setText(text);
-                  if (settings.CollabEdit === true) {
-                    textUpdate(text);
-                  }
                 }}
               />
             </div>
@@ -100,12 +88,8 @@ function NotePage() {
                 if (edit) {
                   notes[params.id].name = name;
                   notes[params.id].text = text;
+
                   localStorage.setObj("Notes", notes);
-                } else {
-                  if (settings.CollabEdit === true) {
-                    textUpdate(notes[params.id].text);
-                    nameUpdate(notes[params.id].name);
-                  }
                 }
 
                 setEdit(!edit);