diff --git a/content/root.css b/content/root.css index ec90449..0a1285c 100644 --- a/content/root.css +++ b/content/root.css @@ -224,6 +224,21 @@ body { transition: opacity 0.3s; } +.edit-button { + background: none; + border: none; + cursor: pointer; + color: var(--timestamp-color); + padding: 2px 6px; + font-size: 12px; + opacity: 0; + transition: opacity 0.3s; +} + +.message:hover .edit-button { + opacity: 1; +} + .message:hover .delete-button { opacity: 1; } @@ -232,6 +247,10 @@ body { background: var(--timestamp-color); } +.edit-button:hover { + background: var(--timestamp-color); +} + .settings-icon, .users-icon, .theme-icon{ width: 24px; height: 24px; @@ -537,6 +556,11 @@ button.scroll:hover { opacity: 1; /* Always visible on mobile */ } + .edit-button { + padding: 8px 12px; + opacity: 1; /* Always visible on mobile */ + } + @media (orientation: landscape) { .messages-section { margin-top: 45px; diff --git a/content/root.js b/content/root.js index ff261e1..e5ec7cb 100644 --- a/content/root.js +++ b/content/root.js @@ -27,6 +27,41 @@ function toggleTheme() { localStorage.setItem("theme", newTheme); } +async function editMessage(messageId, content) { + const newContent = prompt("Edit message:", content); + if (newContent === null) { + return; + } + if (newContent === "") { + deleteMessage(messageId); + return; + } + if (newContent === content) { + return; + } + + try { + const response = await fetch("/messages", { + method: "PATCH", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + messageId: messageId, + messageContent: newContent, + }), + }); + + if (response.ok) { + updateMessagesInPlace(); + } else { + console.error("Failed to edit message"); + } + } catch (error) { + console.error("Error editing message:", error); + } +} + async function deleteMessage(messageId) { if (confirm("Delete this message?")) { try { @@ -201,12 +236,24 @@ async function loadMessages(forceUpdate = false, scrollLocation) { ); usernameDiv.innerHTML = username; compareUsername = usernameDiv.textContent; - let deleteHtml = ""; const embeddedContent = contentEmbedding( content, ); + let deleteHtml = ""; + let editHtml = ""; + + const parser = new DOMParser(); + const contentHtmlString = content; + const doc = parser.parseFromString( + contentHtmlString, + "text/html", + ); + const contentString = + doc.querySelector("span").textContent; + console.log(contentString); + if ( compareUsername === document.getElementById( @@ -215,10 +262,12 @@ async function loadMessages(forceUpdate = false, scrollLocation) { ) { deleteHtml = ``; + editHtml = + ``; } messageDiv.innerHTML = `