typeahead?.refresh()}
			onclick={() => typeahead?.refresh()}
			onscroll={() => typeahead?.refresh()}
			onfocus={() => void loadMarkup().catch(() => {})}
			onblur={() => typeahead?.close()}
			class={classes.field()}
		/>
		{#if trailing}
			<div class="shrink-0">
				{@render trailing()}
			</div>
		{/if}
		{#if preview}
			<div
				bind:this={pane}
				onscroll={handlePreviewScroll}
				class="absolute inset-0 flex flex-col overflow-y-auto"
			>
				<Pending>
					{#snippet failed()}
						<div
							class="px-2.5 py-xs typography-paragraph-small text-foreground-subtle italic"
							data-preview-ready
						>
							Could not render preview.
						</div>
					{/snippet}
					{@const html = await rendered}
					<div
						class="markup px-2.5 py-xs"
						data-preview-ready
						use:codeblockToolbars={html}
						use:mermaidDiagrams={html}
						{@attach alignPreview}
						{@attach localImages(html)}
					>
						
						{@html html}
					</div>
				</Pending>
			</div>
		{/if}
	</div>

{#if !compact && toolbar}
		<div class={classes.toolbar()}>
			<div
				bind:this={toolRow}
				role="toolbar"
				aria-label="Formatting"
				aria-controls={textareaId}
				class="flex min-w-0 flex-1 items-center gap-xs overflow-x-clip [overflow-clip-margin:var(--spacing-2xs)]"
			>
				{#each TOOLBAR as item (item.label)}
					<div
						bind:this={toolEls[item.label]}
						class={shown(item.label) ? "flex" : "hidden"}
					>
						{#if item.tool}
							{@render toolButton(item.tool)}
						{:else}
							<Tooltip content="List" disabled={listOpen}>
								<Dropdown
									variant="button"
									buttonVariant="ghost"
									size="mini"
									label="List"
									disabled={disabled || preview}
									onOpenChange={(open) => (listOpen = open)}
								>
									{#snippet trigger()}
										<List class="size-3 shrink-0" aria-hidden="true" />
										<ChevronDown class="size-3 shrink-0" aria-hidden="true" />
									{/snippet}
									{@render listItems()}
								</Dropdown>
							</Tooltip>
						{/if}
					</div>
				{/each}
				{#if overflowed.length > 0}
					<div bind:this={moreEl} class="flex">
						<MoreMenu
							label="More formatting"
							size="mini"
							align="left"
							disabled={disabled || preview}
						>
							{#each overflowed as item (item.label)}
								{#if item.tool}
									{@const tool = item.tool}
									<DropdownItem icon={tool.icon} onclick={() => activate(tool)}>
										{tool.label}
									</DropdownItem>
								{:else}
									{@render listItems()}
								{/if}
							{/each}
						</MoreMenu>
					</div>
				{/if}
			</div>
			<div class="flex shrink-0 items-center gap-xs px-xs">
				<label
					for={previewId}
					class="flex items-center gap-1.5 typography-paragraph-regular"
				>
					<Eye class="size-3.5 shrink-0" aria-hidden="true" />
					<span class="max-sm:sr-only">Preview</span>
				</label>
				<Toggle
					id={previewId}
					bind:checked={preview}
					disabled={disabled || (!preview && !hasContent)}
				/>
			</div>
		</div>
	{/if}
</div>

{#if owner}
	<input
		type="file"
		accept="image/*"
		multiple
		hidden
		bind:this={fileInput}
		onchange={handleFiles}
	/>
	<ErrorAlert label={imageError} class="mt-xs" />
{/if}