@warkypublic/svelix 0.1.44 → 0.1.47

package/dist/components/ContentEditor/subcomponents/CollaboraEditor.svelte

@@ -1,312 +1,247 @@
-<script lang="ts">
-  import { onMount, untrack } from "svelte";
-  import type { CollaboraEditorProps } from "../types.js";
-  import { getMimeFromExt, getExtFromFilename } from "../utils.js";
-  import { SvelteURLSearchParams } from "svelte/reactivity";
-
-  let {
-    value,
-    filename,
-    readonly = false,
-    wopiUrl,
-    discoverUrl,
-    adminKey = "",
-    userid = 0,
-    username = "user",
-    viewtype: _viewtype = "tabbed",
-    headers,
-    onChange,
-    onSave,
-    insertText = $bindable(),
-    insertHtml = $bindable(),
-  }: CollaboraEditorProps = $props();
-
-  let frameEl = $state<HTMLIFrameElement | undefined>(undefined);
-  let ready = $state(false);
-  let loading = $state(false);
-  let errmsg = $state("");
-
-  // Stable IDs for this editor instance — untrack prevents Svelte from treating
-  // these as reactive dependencies (they are intentional one-time reads).
-  const editorId = `collabora_${crypto.randomUUID().slice(0, 8)}`;
-  // const ext = untrack(() => (filename ? getExtFromFilename(filename) : ""));
-  const fileId = `${untrack(() => userid)}_${crypto.randomUUID()}`;
-
-  // Mutable buffer — not reactive; mirrors React's useRef<Blob>
-  let buffer: Blob | undefined = untrack(() => value);
-  let saveRequestComplete = true;
-  let signedToken = "";
-  let signedWopiSrc = "";
-
-  const contentType = $derived(
-    getMimeFromExt(filename ? getExtFromFilename(filename) : ""),
-  );
-
-  // ── WOPI helpers ────────────────────────────────────────────────────────────
-
-  async function fetchToken(
-    canWrite: boolean,
-  ): Promise<{ token: string; wopiSrc: string }> {
-    const base = wopiUrl.replace(/\/$/, "");
-    const reqHeaders: Record<string, string> = {
-      "Content-Type": "application/json",
-      ...headers,
-    };
-    if (adminKey) reqHeaders["X-API-Key"] = adminKey;
-    const res = await fetch(`${base}/api/tokens`, {
-      method: "POST",
-      headers: reqHeaders,
-      body: JSON.stringify({
-        resource_type: "file",
-        file_id: fileId,
-        user_id: String(userid),
-        user_name: username,
-        can_write: canWrite,
-        expires_in_seconds: 3600,
-      }),
-    });
-    if (!res.ok) throw new Error(`Token fetch failed: ${res.status}`);
-    const data = await res.json();
-    return { token: data.access_token, wopiSrc: data.wopi_src };
-  }
-
-  async function fileExistsInWopi(token: string): Promise<boolean> {
-    const params = new URLSearchParams({ access_token: token });
-    const base = wopiUrl.replace(/\/$/, "");
-    const res = await fetch(`${base}/wopi/files/${fileId}/contents?${params}`, {
-      headers,
-      method: "GET",
-    });
-    return res.ok;
-  }
-
-  async function uploadToWopi(blob: Blob, token: string): Promise<void> {
-    const params = new SvelteURLSearchParams();
-    params.append("access_token", token);
-    if (filename !== undefined) {
-      params.append("filename", filename);
-      params.append(
-        "contenttype",
-        getMimeFromExt(getExtFromFilename(filename)),
-      );
-    }
-    if (userid !== undefined) params.append("userid", String(userid));
-    if (username !== undefined) params.append("username", username);
-
-    const base = wopiUrl.replace(/\/$/, "");
-    const fullurl = `${base}/wopi/files/${fileId}/contents?${params.toString()}`;
-    const res = await fetch(fullurl, {
-      headers: { ...headers, "X-WOPI-Override": "PUT" },
-      method: "POST",
-      body: blob,
-    });
-    if (!res.ok) throw new Error(`WOPI upload failed: ${res.status}`);
-  }
-
-  async function downloadFromWopi(): Promise<Blob | undefined> {
-    const params = new SvelteURLSearchParams();
-    params.append("access_token", signedToken);
-    if (userid !== undefined) params.append("userid", String(userid));
-
-    const base = wopiUrl.replace(/\/$/, "");
-    const fullurl = `${base}/wopi/files/${fileId}/contents?${params.toString()}`;
-    const res = await fetch(fullurl, { headers, method: "GET" });
-    if (res.ok) return res.blob();
-    return undefined;
-  }
-
-  // ── Discovery ────────────────────────────────────────────────────────────────
-
-  async function findEditorUrl(mimeType: string): Promise<string> {
-    const res = await fetch(discoverUrl);
-    if (!res.ok) throw new Error(`Discovery request failed: ${res.status}`);
-    const xml = await res.text();
-    const doc = new DOMParser().parseFromString(xml, "text/xml");
-    const action = doc.querySelector(`app[name="${mimeType}"] action`);
-    const urlsrc = action?.getAttribute("urlsrc");
-    if (!urlsrc)
-      throw new Error(`No Collabora editor found for MIME type: ${mimeType}`);
-    const params = new URLSearchParams({
-      WOPISrc: signedWopiSrc,
-      access_token: signedToken,
-    });
-    return `${urlsrc}${params}`;
-  }
-
-  // ── Load ─────────────────────────────────────────────────────────────────────
-
-  async function loadEditor(): Promise<void> {
-    if (!filename || !buffer) return;
-    errmsg = "";
-    loading = true;
-    ready = false;
-    insertText = undefined;
-    insertHtml = undefined;
-    try {
-      try {
-        localStorage.setItem("WSDWelcomeDisabled", "true");
-      } catch {
-        /* unavailable */
-      }
-      // Always use a write token for the initial upload regardless of readonly
-      const { token: writeToken } = await fetchToken(true);
-      const exists = await fileExistsInWopi(writeToken);
-      if (!exists) await uploadToWopi(buffer, writeToken);
-
-      // Editor token respects readonly
-      const { token, wopiSrc } = await fetchToken(!readonly);
-      signedToken = token;
-      signedWopiSrc = wopiSrc;
-
-      const url = await findEditorUrl(contentType);
-      // Navigate iframe to Collabora — Collabora will fetch the file from WOPI
-      if (frameEl) frameEl.src = url;
-    } catch (e) {
-      errmsg = String(e);
-      loading = false;
-    }
-  }
-
-  // ── Save flow ─────────────────────────────────────────────────────────────────
-
-  function sendSaveAction(): Promise<void> {
-    return new Promise((resolve, reject) => {
-      if (!frameEl?.contentWindow) {
-        reject(new Error("No iframe"));
-        return;
-      }
-      saveRequestComplete = false;
-      frameEl.contentWindow.postMessage(
-        JSON.stringify({
-          MessageId: "Action_Save",
-          SendTime: Date.now(),
-          Values: {
-            Notify: true,
-            DontSaveIfUnmodified: false,
-            DontTerminateEdit: false,
-          },
-        }),
-        "*",
-      );
-      let cnt = 0;
-      const itv = setInterval(() => {
-        cnt++;
-        if (saveRequestComplete) {
-          clearInterval(itv);
-          resolve();
-        }
-        if (cnt > 60) {
-          clearInterval(itv);
-          reject(new Error("Save timeout after 30s"));
-        }
-      }, 500);
-    });
-  }
-
-  function handleSaveResponse(): void {
-    setTimeout(async () => {
-      try {
-        const blob = await downloadFromWopi();
-        if (blob) {
-          buffer = blob;
-          onChange?.(blob);
-        }
-      } catch (e) {
-        errmsg = `Could not retrieve saved file: ${e}`;
-      } finally {
-        saveRequestComplete = true;
-        onSave?.(buffer ?? new Blob([]));
-      }
-    }, 100);
-  }
-
-  // ── PostMessage handler ───────────────────────────────────────────────────────
-
-  function handlePostMessage(e: MessageEvent): void {
-    try {
-      const msg =
-        typeof e.data === "string"
-          ? JSON.parse(e.data)
-          : typeof e.data === "object"
-            ? e.data
-            : null;
-      if (!msg?.MessageId || !frameEl?.contentWindow) return;
-
-      const msgId: string = msg.MessageId;
-      const msgData = msg.Values;
-
-      if (msgId === "App_LoadingStatus" && msgData?.Status === "Frame_Ready") {
-        frameEl.contentWindow.postMessage(
-          JSON.stringify({
-            MessageId: "Host_PostmessageReady",
-            SendTime: Date.now(),
-          }),
-          "*",
-        );
-        frameEl.contentWindow.postMessage(
-          JSON.stringify({
-            MessageId: "Action_ChangeEditorMode",
-            SendTime: Date.now(),
-            Values: { Mode: readonly ? "view" : "edit" },
-          }),
-          "*",
-        );
-        ready = true;
-        loading = false;
-        insertText = (text: string) => postPaste("text/plain", text);
-        insertHtml = (html: string) => postPaste("text/html", html);
-        return;
-      }
-      if (msgId === "UI_Save") {
-        sendSaveAction();
-        return;
-      }
-      if (msgId === "Doc_ModifiedStatus" && msgData?.Modified) {
-        handleSaveResponse();
-        return;
-      }
-      if (msgId === "Action_Save_Resp" && msgData?.success) {
-        handleSaveResponse();
-      }
-    } catch {
-      // ignore malformed messages from other origins
-    }
-  }
-
-  onMount(() => {
-    window.addEventListener("message", handlePostMessage);
-    return () => window.removeEventListener("message", handlePostMessage);
-  });
-
-  // ── Insert actions (bound by parent via bind:insertText / bind:insertHtml) ────
-
-  function postPaste(mimetype: string, data: string): void {
-    if (!frameEl?.contentWindow) return;
-    // Restore focus to the iframe so Collabora has an active cursor position
-    frameEl.focus();
-    frameEl.contentWindow.postMessage(
-      JSON.stringify({
-        MessageId: "Action_Paste",
-        SendTime: Date.now(),
-        Values: { Mimetype: mimetype, Data: data },
-      }),
-      "*",
-    );
-  }
-
-  // ── Reactive reload ───────────────────────────────────────────────────────────
-
-  $effect(() => {
-    // Track value, filename and WOPI config as dependencies.
-    // Update buffer when value prop changes, then reload.
-    const v = value;
-    const f = filename;
-    void wopiUrl;
-    void discoverUrl;
-
-    if (v !== undefined) buffer = v;
-    if (f && buffer) void loadEditor();
-  });
+<script lang="ts">import { onMount, untrack } from "svelte";
+import { getMimeFromExt, getExtFromFilename } from "../utils.js";
+import { SvelteURLSearchParams } from "svelte/reactivity";
+let { value, filename, readonly = false, wopiUrl, discoverUrl, adminKey = "", userid = 0, username = "user", viewtype: _viewtype = "tabbed", headers, onChange, onSave, insertText = $bindable(), insertHtml = $bindable() } = $props();
+let frameEl = $state(undefined);
+let ready = $state(false);
+let loading = $state(false);
+let errmsg = $state("");
+// Stable IDs for this editor instance — untrack prevents Svelte from treating
+// these as reactive dependencies (they are intentional one-time reads).
+const editorId = `collabora_${crypto.randomUUID().slice(0, 8)}`;
+// const ext = untrack(() => (filename ? getExtFromFilename(filename) : ""));
+const fileId = `${untrack(() => userid)}_${crypto.randomUUID()}`;
+// Mutable buffer — not reactive; mirrors React's useRef<Blob>
+let buffer = untrack(() => value);
+let saveRequestComplete = true;
+let signedToken = "";
+let signedWopiSrc = "";
+const contentType = $derived(getMimeFromExt(filename ? getExtFromFilename(filename) : ""));
+// ── WOPI helpers ────────────────────────────────────────────────────────────
+async function fetchToken(canWrite) {
+	const base = wopiUrl.replace(/\/$/, "");
+	const reqHeaders = {
+		"Content-Type": "application/json",
+		...headers
+	};
+	if (adminKey) reqHeaders["X-API-Key"] = adminKey;
+	const res = await fetch(`${base}/api/tokens`, {
+		method: "POST",
+		headers: reqHeaders,
+		body: JSON.stringify({
+			resource_type: "file",
+			file_id: fileId,
+			user_id: String(userid),
+			user_name: username,
+			can_write: canWrite,
+			expires_in_seconds: 3600
+		})
+	});
+	if (!res.ok) throw new Error(`Token fetch failed: ${res.status}`);
+	const data = await res.json();
+	return {
+		token: data.access_token,
+		wopiSrc: data.wopi_src
+	};
+}
+async function fileExistsInWopi(token) {
+	const params = new URLSearchParams({ access_token: token });
+	const base = wopiUrl.replace(/\/$/, "");
+	const res = await fetch(`${base}/wopi/files/${fileId}/contents?${params}`, {
+		headers,
+		method: "GET"
+	});
+	return res.ok;
+}
+async function uploadToWopi(blob, token) {
+	const params = new SvelteURLSearchParams();
+	params.append("access_token", token);
+	if (filename !== undefined) {
+		params.append("filename", filename);
+		params.append("contenttype", getMimeFromExt(getExtFromFilename(filename)));
+	}
+	if (userid !== undefined) params.append("userid", String(userid));
+	if (username !== undefined) params.append("username", username);
+	const base = wopiUrl.replace(/\/$/, "");
+	const fullurl = `${base}/wopi/files/${fileId}/contents?${params.toString()}`;
+	const res = await fetch(fullurl, {
+		headers: {
+			...headers,
+			"X-WOPI-Override": "PUT"
+		},
+		method: "POST",
+		body: blob
+	});
+	if (!res.ok) throw new Error(`WOPI upload failed: ${res.status}`);
+}
+async function downloadFromWopi() {
+	const params = new SvelteURLSearchParams();
+	params.append("access_token", signedToken);
+	if (userid !== undefined) params.append("userid", String(userid));
+	const base = wopiUrl.replace(/\/$/, "");
+	const fullurl = `${base}/wopi/files/${fileId}/contents?${params.toString()}`;
+	const res = await fetch(fullurl, {
+		headers,
+		method: "GET"
+	});
+	if (res.ok) return res.blob();
+	return undefined;
+}
+// ── Discovery ────────────────────────────────────────────────────────────────
+async function findEditorUrl(mimeType) {
+	const res = await fetch(discoverUrl);
+	if (!res.ok) throw new Error(`Discovery request failed: ${res.status}`);
+	const xml = await res.text();
+	const doc = new DOMParser().parseFromString(xml, "text/xml");
+	const action = doc.querySelector(`app[name="${mimeType}"] action`);
+	const urlsrc = action?.getAttribute("urlsrc");
+	if (!urlsrc) throw new Error(`No Collabora editor found for MIME type: ${mimeType}`);
+	const params = new URLSearchParams({
+		WOPISrc: signedWopiSrc,
+		access_token: signedToken
+	});
+	return `${urlsrc}${params}`;
+}
+// ── Load ─────────────────────────────────────────────────────────────────────
+async function loadEditor() {
+	if (!filename || !buffer) return;
+	errmsg = "";
+	loading = true;
+	ready = false;
+	insertText = undefined;
+	insertHtml = undefined;
+	try {
+		try {
+			localStorage.setItem("WSDWelcomeDisabled", "true");
+		} catch {}
+		// Always use a write token for the initial upload regardless of readonly
+		const { token: writeToken } = await fetchToken(true);
+		const exists = await fileExistsInWopi(writeToken);
+		if (!exists) await uploadToWopi(buffer, writeToken);
+		// Editor token respects readonly
+		const { token, wopiSrc } = await fetchToken(!readonly);
+		signedToken = token;
+		signedWopiSrc = wopiSrc;
+		const url = await findEditorUrl(contentType);
+		// Navigate iframe to Collabora — Collabora will fetch the file from WOPI
+		if (frameEl) frameEl.src = url;
+	} catch (e) {
+		errmsg = String(e);
+		loading = false;
+	}
+}
+// ── Save flow ─────────────────────────────────────────────────────────────────
+function sendSaveAction() {
+	return new Promise((resolve, reject) => {
+		if (!frameEl?.contentWindow) {
+			reject(new Error("No iframe"));
+			return;
+		}
+		saveRequestComplete = false;
+		frameEl.contentWindow.postMessage(JSON.stringify({
+			MessageId: "Action_Save",
+			SendTime: Date.now(),
+			Values: {
+				Notify: true,
+				DontSaveIfUnmodified: false,
+				DontTerminateEdit: false
+			}
+		}), "*");
+		let cnt = 0;
+		const itv = setInterval(() => {
+			cnt++;
+			if (saveRequestComplete) {
+				clearInterval(itv);
+				resolve();
+			}
+			if (cnt > 60) {
+				clearInterval(itv);
+				reject(new Error("Save timeout after 30s"));
+			}
+		}, 500);
+	});
+}
+function handleSaveResponse() {
+	setTimeout(async () => {
+		try {
+			const blob = await downloadFromWopi();
+			if (blob) {
+				buffer = blob;
+				onChange?.(blob);
+			}
+		} catch (e) {
+			errmsg = `Could not retrieve saved file: ${e}`;
+		} finally {
+			saveRequestComplete = true;
+			onSave?.(buffer ?? new Blob([]));
+		}
+	}, 100);
+}
+// ── PostMessage handler ───────────────────────────────────────────────────────
+function handlePostMessage(e) {
+	try {
+		const msg = typeof e.data === "string" ? JSON.parse(e.data) : typeof e.data === "object" ? e.data : null;
+		if (!msg?.MessageId || !frameEl?.contentWindow) return;
+		const msgId = msg.MessageId;
+		const msgData = msg.Values;
+		if (msgId === "App_LoadingStatus" && msgData?.Status === "Frame_Ready") {
+			frameEl.contentWindow.postMessage(JSON.stringify({
+				MessageId: "Host_PostmessageReady",
+				SendTime: Date.now()
+			}), "*");
+			frameEl.contentWindow.postMessage(JSON.stringify({
+				MessageId: "Action_ChangeEditorMode",
+				SendTime: Date.now(),
+				Values: { Mode: readonly ? "view" : "edit" }
+			}), "*");
+			ready = true;
+			loading = false;
+			insertText = (text) => postPaste("text/plain", text);
+			insertHtml = (html) => postPaste("text/html", html);
+			return;
+		}
+		if (msgId === "UI_Save") {
+			sendSaveAction();
+			return;
+		}
+		if (msgId === "Doc_ModifiedStatus" && msgData?.Modified) {
+			handleSaveResponse();
+			return;
+		}
+		if (msgId === "Action_Save_Resp" && msgData?.success) {
+			handleSaveResponse();
+		}
+	} catch {}
+}
+onMount(() => {
+	window.addEventListener("message", handlePostMessage);
+	return () => window.removeEventListener("message", handlePostMessage);
+});
+// ── Insert actions (bound by parent via bind:insertText / bind:insertHtml) ────
+function postPaste(mimetype, data) {
+	if (!frameEl?.contentWindow) return;
+	// Restore focus to the iframe so Collabora has an active cursor position
+	frameEl.focus();
+	frameEl.contentWindow.postMessage(JSON.stringify({
+		MessageId: "Action_Paste",
+		SendTime: Date.now(),
+		Values: {
+			Mimetype: mimetype,
+			Data: data
+		}
+	}), "*");
+}
+// ── Reactive reload ───────────────────────────────────────────────────────────
+$effect(() => {
+	// Track value, filename and WOPI config as dependencies.
+	// Update buffer when value prop changes, then reload.
+	const v = value;
+	const f = filename;
+	void wopiUrl;
+	void discoverUrl;
+	if (v !== undefined) buffer = v;
+	if (f && buffer) void loadEditor();
+});
 </script>
 
 <div class="relative flex h-full w-full flex-1 flex-col overflow-hidden">

package/dist/components/ContentEditor/subcomponents/EmailViewer.svelte

@@ -1,6 +1,5 @@
-<script lang="ts">
-  import type { ImageViewerProps } from '../types.js';
-  let { value: _value, filename }: ImageViewerProps = $props();
+<script lang="ts">let { value: _value, filename } = $props();
+export {};
 </script>
 
 <div class="card p-4 text-surface-700-300">

package/dist/components/ContentEditor/subcomponents/ImageViewer.svelte

@@ -1,18 +1,17 @@
-<script lang="ts">
-  import type { ImageViewerProps } from '../types.js';
-  import IconAlertTriangle from '../../Icons/IconAlertTriangle.svelte';
-  let { value, filename }: ImageViewerProps = $props();
-
-  let src = $state('');
-  let err = $state(false);
-
-  $effect(() => {
-    if (!value) { src = ''; return; }
-    err = false;
-    const url = URL.createObjectURL(value);
-    src = url;
-    return () => URL.revokeObjectURL(url);
-  });
+<script lang="ts">import IconAlertTriangle from "../../Icons/IconAlertTriangle.svelte";
+let { value, filename } = $props();
+let src = $state("");
+let err = $state(false);
+$effect(() => {
+	if (!value) {
+		src = "";
+		return;
+	}
+	err = false;
+	const url = URL.createObjectURL(value);
+	src = url;
+	return () => URL.revokeObjectURL(url);
+});
 </script>
 
 <div class="relative flex h-full w-full items-center justify-center overflow-hidden bg-surface-50-950">