Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208<script lang="ts"> import { untrack, type Component } from "svelte"; import type { SvelteHTMLElements } from "svelte/elements"; import { now as tidNow } from "@atcute/tid"; import type { Did } from "@atcute/lexicons/syntax"; import X from "$icon/x"; import { page } from "$app/state"; import { putComment } from "$lib/api/comment"; import { awaitIndexedOrSaved } from "$lib/api/awaitRecord"; import { createBobbinClient } from "$lib/api/client"; import { ensureEntitySubscription } from "$lib/api/graph"; import { getAuth } from "$lib/auth.svelte"; import AccountSelector from "$lib/components/auth/AccountSelector.svelte"; import Button from "$lib/components/ui/Button.svelte"; import ErrorAlert from "$lib/components/ui/Error.svelte"; import MarkdownEditor from "$lib/components/ui/MarkdownEditor.svelte"; import Separator from "$lib/components/ui/Separator.svelte"; import Spinner from "$lib/components/ui/Spinner.svelte"; import { renderMarkup, type MarkupContext } from "$lib/markup"; import { createAction } from "$lib/action.svelte"; import type { CommentRecord } from "$lib/api/comment"; import type { ThreadInput } from "$lib/components/comment/comments";
interface Props { subjectUri: string; subjectCid?: string; // when set, the comment strongRefs this parent comment (threaded reply) replyToUri?: string; replyToCid?: string; // required by the lexicon when the subject is a pull: which round this lands in pullRoundIdx?: number; authorDid: string; authorHandle: string; // reused on edit so the record keeps its identity; omitted when composing rkey?: string; createdAt?: string; body?: string; markup: MarkupContext; rows?: number; placeholder?: string; submitLabel: string; submitIcon: Component<SvelteHTMLElements["svg"]>; autofocus?: boolean; compact?: boolean; inset?: boolean; onsubmitted?: (submitted: ThreadInput) => void; oncancel?: () => void; }
let { subjectUri, subjectCid, replyToUri, replyToCid, pullRoundIdx, authorDid, authorHandle, rkey, createdAt, body: initialBody = "", markup, rows = 6, placeholder, submitLabel, submitIcon, autofocus = false, compact = false, inset = false, onsubmitted, oncancel }: Props = $props();
const auth = getAuth(); const accounts = $derived(auth?.accounts ?? []); // every comment surface already renders under the root layout, so the bobbin // endpoint is read from page data instead of threaded through each caller const bobbinUrl = $derived(page.data.publicConfig?.bobbinUrl as string | undefined);
let picked = $state<string | null>(null); const acting = $derived( accounts.find((account) => account.did === picked) ?? { did: authorDid, handle: authorHandle } );
let body = $state(untrack(() => initialBody)); let preview = $state(false);
const publish = createAction(async (event: SubmitEvent) => { event.preventDefault(); if (!auth?.currentDid || body.trim() === "") return; if (!subjectCid) throw new Error("Cannot comment: the subject record is missing a cid."); const agent = await auth.agentFor(acting.did as Did); const createdAtValue = createdAt ?? new Date().toISOString(); const targetRkey = rkey ?? tidNow(); const record: CommentRecord = { $type: "sh.tangled.feed.comment", subject: { uri: subjectUri, cid: subjectCid } as CommentRecord["subject"], body: { $type: "sh.tangled.markup.markdown", text: body }, createdAt: createdAtValue }; if (pullRoundIdx !== undefined) record.pullRoundIdx = pullRoundIdx; if (replyToUri && replyToCid) { record.replyTo = { uri: replyToUri, cid: replyToCid } as CommentRecord["replyTo"]; } const saved = await putComment(agent, targetRkey, record); if (bobbinUrl) { const ctx = createBobbinClient({ serviceUrl: bobbinUrl }); await awaitIndexedOrSaved(ctx, { uri: saved.uri, cid: saved.cid }); } // new comments subscribe the author to the entity; editing must not, the // commenter may have unsubscribed since if (rkey === undefined && bobbinUrl) { const ctx = createBobbinClient({ serviceUrl: bobbinUrl }); ensureEntitySubscription(agent, ctx, acting.did, subjectUri).catch((err) => { console.error("Failed to auto-subscribe via comment:", err); }); } // render markdown client-side so the optimistic comment matches a real one const bodyHtml = await renderMarkup(body, markup).catch(() => null); onsubmitted?.({ comment: { uri: saved.uri, cid: saved.cid, rkey: targetRkey, authorDid: acting.did, authorHandle: acting.handle, createdAt: createdAtValue, body, bodyHtml }, replyTo: replyToUri ?? null }); // keep the prefilled body when editing; reset when composing a fresh comment if (!rkey) { body = ""; preview = false; } }); const canSubmit = $derived(body.trim() !== "" && !publish.loading);</script>
{#snippet submit()} <Button type="submit" variant="primary" size={compact ? "small" : "regular"} icon={publish.loading ? Spinner : submitIcon} disabled={!canSubmit} > {submitLabel} </Button>{/snippet}
<form onsubmit={publish.run} class={["flex flex-col", !inset && "gap-xs"]}> <MarkdownEditor name="body" {rows} {placeholder} {markup} {autofocus} transparent bind:value={body} bind:preview disabled={publish.loading} {compact} {inset} trailing={compact && body.trim() !== "" ? submit : undefined} />
{#if inset} <Separator /> {/if}
<div class={["flex flex-col gap-xs", inset && "p-xs", compact && !publish.error && "hidden"]}> <ErrorAlert label={publish.error} />
{#if !compact} <div class="flex w-full items-center"> {#if !rkey} <AccountSelector {accounts} bind:value={() => acting.did, (did) => (picked = did)} label="Comment as" disabled={publish.loading} group="comment-editor" /> {/if} <div class="ml-auto flex flex-row gap-xs"> {#if oncancel} <Button type="button" variant="default" icon={X} disabled={publish.loading} onclick={oncancel} > Cancel </Button> {/if} {@render submit()} </div> </div> {/if} </div></form>