{#snippet children(d: DrawerSnippetProps)} {@const { modes, snippet, toggle: toggleDrawer } = d}

{#if d.open} {MODE_LABELS[modes[0]]} {#if modes.length > 1} {/if} {/if}

{#if d.open}

{#if customChildren} {@render customChildren(d)} {:else} {#each modes as mode, i (mode)} {@const panelOpen = isPanelOpen(mode, modes)}

{#if panelOpen}

{#if mode === 'default'} {@render defaultPanel(snippet)} {:else if mode === 'format'} {@render formatPanel(snippet)} {:else if mode === 'block'} {@render blockPanel(snippet)} {:else if mode === 'cell'} {@render cellPanel(snippet)} {:else if mode === 'row'} {@render rowPanel(snippet)} {:else if mode === 'table'} {@render tablePanel(snippet)} {:else if mode === 'list-item'} {@render listItemPanel(snippet)} {:else if mode === 'list'} {@render listPanel(snippet)} {:else if mode === 'code'} {@render codePanel(snippet)} {:else if mode === 'image'} {@render imagePanel(snippet)} {/if}

{/if}

{/each} {/if}

{/if} {/snippet} {#snippet defaultPanel(s: ProviderSnippetProps)} {@const wordCount = countWordsInText(s.plainText)} {@const charCount = s.plainText.length} {@const readingTimeMin = Math.max(1, Math.round(wordCount / 200))} {@const outline = s.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(s)}

Outline

{#if outline.length === 0}

No headings yet

{:else}

H{entry.level} {entry.text}

{/if}

Stats

Words: {wordCount}
Chars: {charCount}
Reading: {readingTimeMin} min

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

{#if warnings.length === 0}

Nothing flagged

{:else}

{w.message}

{/if}

{/snippet} {#snippet formatPanel(s: ProviderSnippetProps)}

{#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)} {/each}

Foreground

{#each COLOR_PRESETS as preset (preset)} {/each} { const v = (e.currentTarget as HTMLInputElement).value; s.applyCommand({ type: 'toggleMark', mark: `color:${v}` as never }); }} /> {#if currentParametricMark(s.activeMarks, 'color')} {/if}

Background

{#each COLOR_PRESETS as preset (preset)} {/each} { const v = (e.currentTarget as HTMLInputElement).value; s.applyCommand({ type: 'toggleMark', mark: `bgcolor:${v}` as never }); }} /> {#if currentParametricMark(s.activeMarks, 'bgcolor')} {/if}

{#if s.canUnlink} {/if}

{/snippet} {#snippet blockPanel(s: ProviderSnippetProps)}

Text 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)} {/each}

{/snippet} {#snippet cellPanel(s: ProviderSnippetProps)}

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)} {/each}

Vertical

{#each [ { id: 'table-cell-vertical-top', label: '⬆ Top' }, { id: 'table-cell-vertical-middle', label: '◆ Mid' }, { id: 'table-cell-vertical-bottom', label: '⬇ Bot' } ] as v (v.id)} {/each}

Text align

{#each [ { id: 'align-left', label: '⫷' }, { id: 'align-center', label: '☰' }, { id: 'align-right', label: '⫸' }, { id: 'align-justify', label: '☷' } ] as a (a.id)} {/each}

{/snippet} {#snippet rowPanel(s: ProviderSnippetProps)}

{/snippet} {#snippet tablePanel(s: ProviderSnippetProps)}

Columns

Appearance

{/snippet} {#snippet listItemPanel(s: ProviderSnippetProps)}

{/snippet} {#snippet listPanel(s: ProviderSnippetProps)}

Kind

{/snippet} {#snippet codePanel(s: ProviderSnippetProps)}

{#each CODE_LANGUAGES as lang (lang.id)} {/each}

{/snippet} {#snippet imagePanel(s: ProviderSnippetProps)} {@const block = imageBlockAtCaret(s)} {#if block}

Source

{block.src}

Alt

{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} {/snippet}