{#if customChildren} {@render customChildren(d)} {:else if mode === 'default'} {@const outline = snippet.document.children .map((block, blockIndex) => ({ block, blockIndex })) .filter(({ block }) => block.type === 'heading') .map(({ block, blockIndex }) => ({ blockIndex, level: block.type === 'heading' ? block.level : 1, text: block.type === 'heading' ? block.children .map((i) => (i.type === 'text' ? i.text : '')) .join('') : '' })) .filter((e) => e.text.trim())} {@const warnings = collectWarnings(snippet)}

Outline

{#if outline.length === 0}

No headings yet

{:else}

{#each outline as entry (entry.blockIndex)}
1. H{entry.level} {entry.text}
{/each}

{/if}

Stats

Words

{wordCount}

Chars

{charCount}

Reading

{readingTimeMin} min

Suggestions {#if warnings.length > 0} {warnings.length} {/if}

{#if warnings.length === 0}

Nothing flagged

{:else}

{#each warnings as w (w.id)}
• {w.message}
{/each}

{/if}

{:else if mode === 'format'}

Marks

{#each [ { id: 'bold', label: 'B', title: 'Bold' }, { id: 'italic', label: 'I', title: 'Italic' }, { id: 'underline', label: 'U', title: 'Underline' }, { id: 'strike', label: 'S', title: 'Strikethrough' }, { id: 'code', label: '<>', title: 'Inline code' } ] as mark (mark.id)} e.preventDefault()} onclick={() => snippet.runCommand(mark.id)} > {mark.label} {/each}

Align

{#each [ { id: 'align-left', label: '⫷', title: 'Left' }, { id: 'align-center', label: '☰', title: 'Center' }, { id: 'align-right', label: '⫸', title: 'Right' }, { id: 'align-justify', label: '☷', title: 'Justify' } ] as a (a.id)} e.preventDefault()} onclick={() => snippet.runCommand(a.id)} > {a.label} {/each}

Link

e.preventDefault()} onclick={() => { const url = window.prompt('Link URL:'); if (url) snippet.insertLink(url); }} > Add link {#if snippet.canUnlink} e.preventDefault()} onclick={() => snippet.unlink()} > Remove {/if}

e.preventDefault()} onclick={() => snippet.runCommand('clear-formatting')} > Clear formatting

{:else if mode === 'image'} {@const block = imageBlockAtCaret(snippet)} {#if block}

Source

{block.src}

Alt text

{block.alt || '(missing)'}

{#if block.caption}

Caption

{block.caption}

{/if} {#if block.status}

Status

{block.status === 'pending' ? 'Uploading…' : 'Upload failed'}

{/if} {:else}

Place caret on an image to edit it.

{/if} {:else if mode === 'table'}

Rows

snippet.runCommand('insert-table-row')}>+ Row snippet.runCommand('delete-table-row')}>− Row

Columns

snippet.runCommand('insert-table-column')}>+ Col snippet.runCommand('delete-table-column')}>− Col

Headers

snippet.runCommand('toggle-table-header-row')}>Row header snippet.runCommand('toggle-table-header-column')}>Col header

Appearance

snippet.runCommand('toggle-table-striped')}>Striped snippet.runCommand('toggle-table-compact')}>Compact

Cell tone

{#each [ { id: 'table-cell-tone-default', label: 'Plain' }, { id: 'table-cell-tone-muted', label: 'Muted' }, { id: 'table-cell-tone-accent', label: 'Accent' } ] as t (t.id)} snippet.runCommand(t.id)} >{t.label} {/each}

{:else if mode === 'code'}

Language

{#each CODE_LANGUAGES as lang (lang.id)} snippet.setCodeLanguage(lang.id || undefined)} >{lang.label} {/each}

{:else if mode === 'list'}

List kind

snippet.runCommand('unordered-list')}>Bullet snippet.runCommand('ordered-list')}>Numbered snippet.runCommand('check-list')}>Check

Indent

snippet.runCommand('decrease-indent')}>⇤ Outdent snippet.runCommand('increase-indent')}>⇥ Indent

{/if}