mirror of
https://github.com/artegoser/AnoPaper.git
synced 2024-11-05 20:43:57 +03:00
fix: collab editing in note edit
This commit is contained in:
parent
ac41dc7dd4
commit
cdbf75a332
5 changed files with 120 additions and 79 deletions
|
@ -20,21 +20,27 @@ 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">
|
||||
{note.name}
|
||||
</h2>
|
||||
<div className="justify-self-center lg:justify-self-end">
|
||||
{`${timestamp2text(note.time)} ${
|
||||
note.pub ? `| ${locals.PublicNote}` : `| ${locals.LocalNote}`
|
||||
}`}
|
||||
<>
|
||||
<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">
|
||||
{note.name}
|
||||
</h2>
|
||||
<div className="justify-self-center lg:justify-self-end">
|
||||
{`${timestamp2text(note.time)} ${
|
||||
note.pub ? `| ${locals.PublicNote}` : `| ${locals.LocalNote}`
|
||||
}`}
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md break-words">
|
||||
<RenderMarkdown>{note.text}</RenderMarkdown>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md break-words">
|
||||
<RenderMarkdown>{note.text}</RenderMarkdown>
|
||||
<div className="hidden">
|
||||
<input type="text" id="noteTextArea" />
|
||||
<input type="text" id="noteNameInput" />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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,
|
||||
};
|
||||
|
|
|
@ -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 (
|
||||
<div>
|
||||
|
@ -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() {
|
|||
</div>
|
||||
|
||||
<NotesAdditionalSettings
|
||||
onClick={(text) => {
|
||||
onClickAIComp={(text) => {
|
||||
localStorage.setItem("NoteText", text);
|
||||
setText(text);
|
||||
|
||||
if (settings.CollabEdit === true) {
|
||||
textUpdate(text, true);
|
||||
textUpdate(text);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue