line multi authors

2026-07-25 18:05:15 +02:00
parent 4c4c15495d
commit 1fcd6866f4
6 changed files with 158 additions and 77 deletions
@@ -0,0 +1,103 @@
+import { api } from "@rustpad/api";
+import { copyText } from "@rustpad/clipboard";
+import { prepareImageFile } from "@rustpad/image-upload";
+import { askConfirm } from "@rustpad/modal";
+import { getAuthToken } from "@rustpad/session";
+
+function escapeHtml(value) {
+  return String(value).replace(/[&<>"']/g, character => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#039;" }[character]));
+}
+
+function formatBytes(value) {
+  const bytes = Number(value) || 0;
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+function formatDate(value) {
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? "" : date.toLocaleString("pl-PL");
+}
+
+export function bindNoteFiles({ editor, endpoints, getAccessToken, canDelete, toast }) {
+  const dialog = document.querySelector("#files-dialog");
+  const list = document.querySelector("#files-list");
+  const input = document.querySelector("#file-input");
+  const footer = document.querySelector("#footer-files");
+
+  async function loadFiles({ open = false } = {}) {
+    try {
+      const files = await api(endpoints.list, { method: "PUT", body: JSON.stringify({ access_token: getAccessToken() || null }) });
+      const totalSize = files.reduce((sum, file) => sum + (Number(file.size_bytes) || 0), 0);
+      footer.textContent = `${files.length} ${files.length === 1 ? "file" : "files"} · ${formatBytes(totalSize)}`;
+      list.innerHTML = files.length ? files.map(file => `
+        <div class="file-row" data-file-row="${file.id}">
+          <div class="file-row-main">
+            <div class="file-name">${escapeHtml(file.filename)}</div>
+            <div class="file-meta">${formatBytes(file.size_bytes)} · ${escapeHtml(file.mime_type)}${file.created_at ? ` · ${formatDate(file.created_at)}` : ""} · <span class="file-flag${file.is_attached ? "" : " detached"}">${file.is_attached ? "in note" : "removed from content"}</span></div>
+          </div>
+          <div class="file-actions">
+            <button data-show-file-code="link" data-url="${escapeHtml(file.url)}" data-name="${escapeHtml(file.filename)}" data-mime="${escapeHtml(file.mime_type)}">Link</button>
+            <button data-show-file-code="markdown" data-url="${escapeHtml(file.url)}" data-name="${escapeHtml(file.filename)}" data-mime="${escapeHtml(file.mime_type)}">Markdown</button>
+            <button data-show-file-code="html" data-url="${escapeHtml(file.url)}" data-name="${escapeHtml(file.filename)}" data-mime="${escapeHtml(file.mime_type)}">HTML</button>
+            ${canDelete() ? `<button class="file-delete" data-delete-file="${file.id}" data-file-name="${escapeHtml(file.filename)}">Delete</button>` : ""}
+          </div>
+          <div class="file-code" hidden><textarea readonly aria-label="Generated file code"></textarea><button data-copy-generated>Copy</button></div>
+        </div>`).join("") : '<p class="dialog-copy">No files uploaded.</p>';
+      if (open && !dialog.open) dialog.showModal();
+    } catch (error) {
+      if (open) toast(error.message);
+    }
+  }
+
+  document.querySelector("#upload-button").addEventListener("click", () => input.click());
+  input.addEventListener("change", async event => {
+    let file = event.target.files[0];
+    if (!file) return;
+    if (file.type.startsWith("image/")) {
+      file = await prepareImageFile(file);
+      if (!file) { input.value = ""; return; }
+    }
+    const form = new FormData();
+    form.append("access_token", getAccessToken() || "");
+    form.append("file", file);
+    try {
+      const result = await api(endpoints.upload, { method: "POST", body: form, headers: {} });
+      const text = file.type.startsWith("image/") ? `![${file.name}](${result.url})` : `[${file.name}](${result.url})`;
+      editor.setRangeText(text, editor.selectionStart, editor.selectionEnd, "end");
+      editor.dispatchEvent(new Event("input", { bubbles: true }));
+      toast("File uploaded");
+      await loadFiles();
+    } catch (error) { toast(error.message); }
+    input.value = "";
+  });
+
+  document.querySelector("#files-button").addEventListener("click", () => loadFiles({ open: true }));
+  footer.addEventListener("click", () => loadFiles({ open: true }));
+  document.querySelector("#close-files").addEventListener("click", () => dialog.close());
+  list.addEventListener("click", async event => {
+    const showButton = event.target.closest("[data-show-file-code]");
+    if (showButton) {
+      const panel = showButton.closest(".file-row").querySelector(".file-code");
+      const output = panel.querySelector("textarea");
+      const absolute = new URL(showButton.dataset.url, location.origin).href;
+      let text = absolute;
+      if (showButton.dataset.showFileCode === "markdown") text = showButton.dataset.mime?.startsWith("image/") ? `![${showButton.dataset.name}](${absolute})` : `[${showButton.dataset.name}](${absolute})`;
+      if (showButton.dataset.showFileCode === "html") text = showButton.dataset.mime?.startsWith("image/") ? `<img src="${absolute}" alt="${showButton.dataset.name}">` : `<a href="${absolute}">${showButton.dataset.name}</a>`;
+      output.value = text; panel.hidden = false; output.focus(); output.select(); return;
+    }
+    const copyButton = event.target.closest("[data-copy-generated]");
+    if (copyButton) { try { await copyText(copyButton.closest(".file-code").querySelector("textarea").value); toast("Copied"); } catch (error) { toast(error.message); } return; }
+    const deleteButton = event.target.closest("[data-delete-file]");
+    if (!deleteButton) return;
+    if (!await askConfirm(`Delete file "${deleteButton.dataset.fileName}" permanently?`, { title: "Delete file", confirmText: "Delete", danger: true })) return;
+    try {
+      await api(endpoints.remove(deleteButton.dataset.deleteFile), { method: "DELETE", headers: getAuthToken() ? { Authorization: `Bearer ${getAuthToken()}` } : {}, body: JSON.stringify({ access_token: getAccessToken() || null }) });
+      toast("File deleted");
+      await loadFiles();
+    } catch (error) { toast(error.message); }
+  });
+
+  return { loadFiles };
+}