Something went wrong. Try again.
Monorepo for Tangled tangled.org
Something went wrong. Try again.
Svelte
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071<script lang="ts"> import MessageSquarePlus from "$icon/message-square-plus"; import Reply from "$icon/reply"; import { type MarkupContext } from "$lib/markup"; import Card from "$lib/components/ui/Card.svelte"; import CommentEditor from "$lib/components/comment/CommentEditor.svelte"; import type { ThreadInput } from "$lib/components/comment/comments";
interface Props { subjectUri: string; subjectCid?: string; replyToUri?: string; replyToCid?: string; authorDid: string; authorHandle: string; markup: MarkupContext; // "thread" tucks the box into a comment card, matching its canvas background variant?: "default" | "thread"; autofocus?: boolean; onsubmitted?: (submitted: ThreadInput) => void; oncancel?: () => void; }
let { subjectUri, subjectCid, replyToUri, replyToCid, authorDid, authorHandle, markup, variant = "default", autofocus = false, onsubmitted, oncancel }: Props = $props();
const isThread = $derived(variant === "thread");</script>
{#snippet editor()} <CommentEditor {subjectUri} {subjectCid} {replyToUri} {replyToCid} {authorDid} {authorHandle} {markup} rows={isThread ? 4 : 6} placeholder={isThread ? "Write a reply. Markdown is supported." : "Add to the discussion. Markdown is supported."} submitLabel={isThread ? "Reply" : "Comment"} submitIcon={isThread ? Reply : MessageSquarePlus} {autofocus} {onsubmitted} {oncancel} />{/snippet}
{#if isThread} <div class="bg-background-default/50 p-4"> {@render editor()} </div>{:else} <Card padding="small" class="drop-shadow-xs"> {@render editor()} </Card>{/if}