From cdbf75a332dd90cd5fd632300b5a80f3902b9ba9 Mon Sep 17 00:00:00 2001 From: Artemy Date: Tue, 2 May 2023 18:12:01 +0300 Subject: [PATCH] fix: collab editing in note edit --- src/components/note.jsx | 30 +++++++------ src/components/settingsInputs.jsx | 7 +++- src/components/utils.js | 68 +++++++++++++++++++++++++++++- src/pages/create.jsx | 70 +++++-------------------------- src/pages/note.jsx | 24 +++++++++-- 5 files changed, 120 insertions(+), 79 deletions(-) diff --git a/src/components/note.jsx b/src/components/note.jsx index 37148e1..c0f47e1 100644 --- a/src/components/note.jsx +++ b/src/components/note.jsx @@ -20,21 +20,27 @@ import { timestamp2text } from "./utils"; function Note({ note }) { return ( -
-
-

- {note.name} -

-
- {`${timestamp2text(note.time)} ${ - note.pub ? `| ${locals.PublicNote}` : `| ${locals.LocalNote}` - }`} + <> +
+
+

+ {note.name} +

+
+ {`${timestamp2text(note.time)} ${ + note.pub ? `| ${locals.PublicNote}` : `| ${locals.LocalNote}` + }`} +
+
+
+ {note.text}
-
- {note.text} +
+ +
-
+ ); } diff --git a/src/components/settingsInputs.jsx b/src/components/settingsInputs.jsx index 155c425..931384f 100644 --- a/src/components/settingsInputs.jsx +++ b/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); }} /> )}
diff --git a/src/components/utils.js b/src/components/utils.js index 88f672d..42c715c 100644 --- a/src/components/utils.js +++ b/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, +}; diff --git a/src/pages/create.jsx b/src/pages/create.jsx index 266149e..0fb1b97 100644 --- a/src/pages/create.jsx +++ b/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) { - 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); - }); - } + collab_edit_init(setName, setText, false); return (
@@ -129,13 +91,7 @@ function CreateNote() { onChange={(e) => { setName(e.target.value); localStorage.setItem("NoteName", e.target.value); - - if (settings.CollabEdit === true) { - nameUpdate(e.target.value); - setTimeout(() => { - nameUpdate(e.target.value); - }, window.socketTimeout); - } + window.nameChanged = e.target.value; }} preview={preview} /> @@ -145,13 +101,7 @@ function CreateNote() { onChange={(e) => { setText(e.target.value); localStorage.setItem("NoteText", e.target.value); - - if (settings.CollabEdit === true) { - textUpdate(e.target.value); - setTimeout(() => { - textUpdate(e.target.value); - }, window.socketTimeout); - } + window.textChanged = e.target.value; }} preview={preview} /> @@ -200,12 +150,12 @@ function CreateNote() {
{ + onClickAIComp={(text) => { localStorage.setItem("NoteText", text); setText(text); if (settings.CollabEdit === true) { - textUpdate(text, true); + textUpdate(text); } }} /> diff --git a/src/pages/note.jsx b/src/pages/note.jsx index 38c998a..5e2a2c1 100644 --- a/src/pages/note.jsx +++ b/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 (
setName(e.target.value)} + onChange={(e) => { + setName(e.target.value); + window.nameChanged = e.target.value; + }} /> setText(e.target.value)} + onChange={(e) => { + setText(e.target.value); + window.textChanged = e.target.value; + }} />
{ + onClickAIComp={(text) => { setText(text); + if (settings.CollabEdit === true) { + textUpdate(text); + } }} />
@@ -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); }