feat: collaborative editing

index.js

@@ -17,6 +17,31 @@ if (!fs.existsSync("./notes")) {
   fs.mkdirSync("./notes");
 }
 
+io.on("connection", (socket) => {
+  socket.on("nameChanged", ({ name, room }) => {
+    socket.to(room).emit("nameChanged", {
+      name,
+    });
+  });
+
+  socket.on("textChanged", ({ text, room }) => {
+    socket.to(room).emit("textChanged", {
+      text,
+    });
+  });
+
+  socket.on("joinRoom", (room) => {
+    let rooms = Array.from(io.sockets.adapter.sids.get(socket.id));
+
+    for (let room of rooms) {
+      if (socket.id != room) {
+        socket.leave(room);
+      }
+    }
+    socket.join(room);
+  });
+});
+
 app.use(bodyParser.json());
 
 app.post("/publish", function (req, res) {

src/App.jsx

@@ -12,7 +12,6 @@ import PubNoteSafe from "./pages/pubNoteSafe";
 import RenderMarkdown from "./components/markdown";
 import socket from "./components/socket";
 import Settings from "./pages/settings";
-import Chat from "./pages/chat";
 import Locales from "./localisation/main";
 import { useState } from "react";
 
@@ -55,7 +54,6 @@ function App() {
           <Route path="/pubNotesSafe/:id" element={<PubNoteSafe />} />
           <Route path="/pubError" element={<PubError />} />
           <Route path="/settings" element={<Settings />} />
-          <Route path="/chat" element={<Chat />} />
           <Route
             path="/about"
             element={

src/localisation/en.js

@@ -43,6 +43,9 @@ let en = {
   NoNotesYet: "No notes yet",
   AIComplete: "Continue Note (AI)",
   AdditionalFeatures: "Additional features",
+  CollabEdit: "Collaborative editing",
+  Password: "Password",
+  CollabEditPassword: "Password for collaborative editing",
 };
 
 export default en;

src/localisation/ru.js

@@ -44,6 +44,9 @@ let ru = {
   NoNotesYet: "Заметок пока нет",
   AIComplete: "Продолжить заметку (ИИ)",
   AdditionalFeatures: "Дополнительные функции",
+  CollabEdit: "Совместное редактрование",
+  Password: "Пароль",
+  CollabEditPassword: "Пароль для совместного редактирования",
 };
 
 export default ru;

src/pages/create.jsx

@@ -22,6 +22,26 @@ import {
 import { inputStyle } from "../components/styles";
 import { Complete } from "../components/openai";
 
+function nameUpdate(e) {
+  if (Date.now() - window.lastSocketUpdate > window.socketTimeout) {
+    socket.emit("nameChanged", {
+      name: e.target.value,
+      room: settings.CollabEditPassword,
+    });
+    window.lastSocketUpdate = Date.now();
+  }
+}
+
+function textUpdate(e) {
+  if (Date.now() - window.lastSocketUpdate > window.socketTimeout) {
+    socket.emit("textChanged", {
+      text: e.target.value,
+      room: settings.CollabEditPassword,
+    });
+    window.lastSocketUpdate = Date.now();
+  }
+}
+
 function CreateNote() {
   const [preview, setPreview] = useState(false);
   const [publicState, setPublicState] = useState(settings.publicNote);
@@ -42,6 +62,32 @@ function CreateNote() {
     md = md.value.trim();
 
     localStorage.setItem("NoteText", md);
+
+    if (settings.CollabEdit === true) {
+      socket.emit("textChanged", {
+        text: md,
+        room: settings.CollabEditPassword,
+      });
+    }
+  }
+
+  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);
+    });
   }
 
   return (
@@ -73,6 +119,13 @@ function CreateNote() {
         onChange={(e) => {
           setName(e.target.value);
           localStorage.setItem("NoteName", e.target.value);
+
+          if (settings.CollabEdit === true) {
+            nameUpdate(e);
+            setTimeout(() => {
+              nameUpdate(e);
+            }, window.socketTimeout);
+          }
         }}
       />
       <textarea
@@ -87,6 +140,13 @@ function CreateNote() {
         onChange={(e) => {
           setText(e.target.value);
           localStorage.setItem("NoteText", e.target.value);
+
+          if (settings.CollabEdit === true) {
+            textUpdate(e);
+            setTimeout(() => {
+              textUpdate(e);
+            }, window.socketTimeout);
+          }
         }}
         value={localStorage.getItem("NoteText") || ""}
       ></textarea>
@@ -148,6 +208,10 @@ function CreateNote() {
                   }}
                 />
               )}
+              <SettingsCheckBox
+                label={locals.CollabEdit}
+                settingName="CollabEdit"
+              />
             </SettingsSection>
           </div>
         )}

src/pages/settings.jsx

@@ -51,6 +51,17 @@ function Settings() {
           label={locals.AdditionalFeatures}
           settingName="additionalFeatures"
         />
+
+        <SettingsCheckBox label={locals.CollabEdit} settingName="CollabEdit" />
+
+        <SettingsTextInput
+          placeholder={locals.Password}
+          label={locals.CollabEditPassword}
+          settingName="CollabEditPassword"
+          onChange={(e) => {
+            window.alreadyConnected = false;
+          }}
+        />
       </SettingsSection>
 
       <SettingsSection name={locals.Interface}>