@warkypublic/svelix 0.1.44 → 0.1.47

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

@@ -1,300 +1,237 @@
-<script lang="ts">
-  import { onMount, untrack, tick } from "svelte";
-  import type { Office365EditorProps } from "../types.js";
-  import { getExtFromFilename } from "../utils.js";
-  import { SvelteURLSearchParams } from "svelte/reactivity";
-
-  let {
-    value,
-    filename,
-    readonly = false,
-    wopiUrl,
-    officeOnlineUrl = "https://onenote.officeapps.live.com",
-    adminKey = "",
-    userid = 0,
-    username = "user",
-    headers,
-    onChange,
-    onSave,
-    insertText = $bindable(),
-    insertHtml = $bindable(),
-  }: Office365EditorProps = $props();
-
-  let frameEl = $state<HTMLIFrameElement | undefined>(undefined);
-  let formEl = $state<HTMLFormElement | undefined>(undefined);
-  let ready = $state(false);
-  let loading = $state(false);
-  let errmsg = $state("");
-  let editorActionUrl = $state("");
-
-  const editorId = `office365_${crypto.randomUUID().slice(0, 8)}`;
-  const fileId = `${untrack(() => userid)}_${crypto.randomUUID()}`;
-
-  // Mutable buffer — not reactive
-  let buffer: Blob | undefined = untrack(() => value);
-  let saveRequestComplete = true;
-  let signedToken = "";
-  let signedTokenTtl = 0;
-  let signedWopiSrc = "";
-
-  // ── Token ─────────────────────────────────────────────────────────────────────
-
-  async function fetchToken(
-    canWrite: boolean,
-  ): Promise<{ token: string; wopiSrc: string; ttl: number }> {
-    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,
-      ttl: Date.now() + (data.expires_in_seconds ?? 3600) * 1000,
-    };
-  }
-
-  // ── WOPI helpers ─────────────────────────────────────────────────────────────
-
-  async function fileExistsInWopi(token: string): Promise<boolean> {
-    const params = new SvelteURLSearchParams();
-    params.append("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);
-    const base = wopiUrl.replace(/\/$/, "");
-    const res = await fetch(`${base}/wopi/files/${fileId}/contents?${params}`, {
-      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);
-    const base = wopiUrl.replace(/\/$/, "");
-    const res = await fetch(`${base}/wopi/files/${fileId}/contents?${params}`, {
-      headers,
-      method: "GET",
-    });
-    if (res.ok) return res.blob();
-    return undefined;
-  }
-
-  // ── Discovery ────────────────────────────────────────────────────────────────
-  // Office Online uses extension-based action lookup (not MIME-type app names).
-  // urlsrc may contain optional placeholder blocks like <rs=xx> — strip them.
-
-  async function findEditorUrl(ext: string): Promise<string> {
-    const discoveryUrl = `${officeOnlineUrl.replace(/\/$/, "")}/hosting/discovery`;
-    const res = await fetch(discoveryUrl);
-    if (!res.ok) throw new Error(`Discovery failed: ${res.status}`);
-    const xml = await res.text();
-    const doc = new DOMParser().parseFromString(xml, "text/xml");
-    const actionName = readonly ? "view" : "edit";
-    const actionEl = doc.querySelector(
-      `action[name="${actionName}"][ext="${ext.toLowerCase()}"]`,
-    );
-    const urlsrc = actionEl?.getAttribute("urlsrc");
-    if (!urlsrc)
-      throw new Error(
-        `No Office Online editor for extension: ${ext} (action: ${actionName})`,
-      );
-    // Strip optional placeholder blocks, e.g. <rs=xx&dc=xx>
-    return urlsrc.replace(/<[^>]+>/g, "");
-  }
-
-  // ── Load ─────────────────────────────────────────────────────────────────────
-  // Office Online requires a form POST into the iframe (not iframe src assignment).
-
-  async function loadEditor(): Promise<void> {
-    if (!filename || !buffer) return;
-    errmsg = "";
-    loading = true;
-    ready = false;
-    insertText = undefined;
-    insertHtml = undefined;
-    try {
-      // 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, ttl } = await fetchToken(!readonly);
-      signedToken = token;
-      signedWopiSrc = wopiSrc;
-      signedTokenTtl = ttl;
-
-      const ext = getExtFromFilename(filename);
-      const actionUrl = await findEditorUrl(ext);
-      const sep = actionUrl.includes("?") ? "&" : "?";
-      editorActionUrl = `${actionUrl}${sep}WOPISrc=${encodeURIComponent(signedWopiSrc)}`;
-
-      // Flush reactive state so the form action attribute is updated before submit
-      await tick();
-      formEl?.submit();
-    } 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(),
-          }),
-          "*",
-        );
-        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 ────────────────────────────────────────────────────────────
-
-  function postPaste(mimetype: string, data: string): void {
-    if (!frameEl?.contentWindow) return;
-    frameEl.focus();
-    frameEl.contentWindow.postMessage(
-      JSON.stringify({
-        MessageId: "Action_Paste",
-        SendTime: Date.now(),
-        Values: { Mimetype: mimetype, Data: data },
-      }),
-      "*",
-    );
-  }
-
-  // ── Reactive reload ───────────────────────────────────────────────────────────
-
-  $effect(() => {
-    const v = value;
-    const f = filename;
-    void wopiUrl;
-    void officeOnlineUrl;
-
-    if (v !== undefined) buffer = v;
-    if (f && buffer) void loadEditor();
-  });
+<script lang="ts">import { onMount, untrack, tick } from "svelte";
+import { getExtFromFilename } from "../utils.js";
+import { SvelteURLSearchParams } from "svelte/reactivity";
+let { value, filename, readonly = false, wopiUrl, officeOnlineUrl = "https://onenote.officeapps.live.com", adminKey = "", userid = 0, username = "user", headers, onChange, onSave, insertText = $bindable(), insertHtml = $bindable() } = $props();
+let frameEl = $state(undefined);
+let formEl = $state(undefined);
+let ready = $state(false);
+let loading = $state(false);
+let errmsg = $state("");
+let editorActionUrl = $state("");
+const editorId = `office365_${crypto.randomUUID().slice(0, 8)}`;
+const fileId = `${untrack(() => userid)}_${crypto.randomUUID()}`;
+// Mutable buffer — not reactive
+let buffer = untrack(() => value);
+let saveRequestComplete = true;
+let signedToken = $state("");
+let signedTokenTtl = $state(0);
+let signedWopiSrc = "";
+// ── Token ─────────────────────────────────────────────────────────────────────
+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,
+		ttl: Date.now() + (data.expires_in_seconds ?? 3600) * 1e3
+	};
+}
+// ── WOPI helpers ─────────────────────────────────────────────────────────────
+async function fileExistsInWopi(token) {
+	const params = new SvelteURLSearchParams();
+	params.append("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);
+	const base = wopiUrl.replace(/\/$/, "");
+	const res = await fetch(`${base}/wopi/files/${fileId}/contents?${params}`, {
+		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);
+	const base = wopiUrl.replace(/\/$/, "");
+	const res = await fetch(`${base}/wopi/files/${fileId}/contents?${params}`, {
+		headers,
+		method: "GET"
+	});
+	if (res.ok) return res.blob();
+	return undefined;
+}
+// ── Discovery ────────────────────────────────────────────────────────────────
+// Office Online uses extension-based action lookup (not MIME-type app names).
+// urlsrc may contain optional placeholder blocks like <rs=xx> — strip them.
+async function findEditorUrl(ext) {
+	const discoveryUrl = `${officeOnlineUrl.replace(/\/$/, "")}/hosting/discovery`;
+	const res = await fetch(discoveryUrl);
+	if (!res.ok) throw new Error(`Discovery failed: ${res.status}`);
+	const xml = await res.text();
+	const doc = new DOMParser().parseFromString(xml, "text/xml");
+	const actionName = readonly ? "view" : "edit";
+	const actionEl = doc.querySelector(`action[name="${actionName}"][ext="${ext.toLowerCase()}"]`);
+	const urlsrc = actionEl?.getAttribute("urlsrc");
+	if (!urlsrc) throw new Error(`No Office Online editor for extension: ${ext} (action: ${actionName})`);
+	// Strip optional placeholder blocks, e.g. <rs=xx&dc=xx>
+	return urlsrc.replace(/<[^>]+>/g, "");
+}
+// ── Load ─────────────────────────────────────────────────────────────────────
+// Office Online requires a form POST into the iframe (not iframe src assignment).
+async function loadEditor() {
+	if (!filename || !buffer) return;
+	errmsg = "";
+	loading = true;
+	ready = false;
+	insertText = undefined;
+	insertHtml = undefined;
+	try {
+		// 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, ttl } = await fetchToken(!readonly);
+		signedToken = token;
+		signedWopiSrc = wopiSrc;
+		signedTokenTtl = ttl;
+		const ext = getExtFromFilename(filename);
+		const actionUrl = await findEditorUrl(ext);
+		const sep = actionUrl.includes("?") ? "&" : "?";
+		editorActionUrl = `${actionUrl}${sep}WOPISrc=${encodeURIComponent(signedWopiSrc)}`;
+		// Flush reactive state so the form action attribute is updated before submit
+		await tick();
+		formEl?.submit();
+	} 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()
+			}), "*");
+			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 ────────────────────────────────────────────────────────────
+function postPaste(mimetype, data) {
+	if (!frameEl?.contentWindow) return;
+	frameEl.focus();
+	frameEl.contentWindow.postMessage(JSON.stringify({
+		MessageId: "Action_Paste",
+		SendTime: Date.now(),
+		Values: {
+			Mimetype: mimetype,
+			Data: data
+		}
+	}), "*");
+}
+// ── Reactive reload ───────────────────────────────────────────────────────────
+$effect(() => {
+	const v = value;
+	const f = filename;
+	void wopiUrl;
+	void officeOnlineUrl;
+	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/PdfViewer.svelte

@@ -1,23 +1,17 @@
-<script lang="ts">
-  import type { ImageViewerProps } from '../types.js';
-
-  let { value, filename }: ImageViewerProps = $props();
-
-  let src = $state('');
-
-  $effect(() => {
-    if (!value) {
-      src = '';
-      return;
-    }
-
-    const url = URL.createObjectURL(value);
-    src = `${url}#toolbar=1&navpanes=0&scrollbar=1`;
-
-    return () => {
-      URL.revokeObjectURL(url);
-    };
-  });
+<script lang="ts">let { value, filename } = $props();
+let src = $state("");
+$effect(() => {
+	if (!value) {
+		src = "";
+		return;
+	}
+	const url = URL.createObjectURL(value);
+	src = `${url}#toolbar=1&navpanes=0&scrollbar=1`;
+	return () => {
+		URL.revokeObjectURL(url);
+	};
+});
+export {};
 </script>
 
 <div class="flex h-full w-full flex-col overflow-hidden bg-surface-50-950">