Svelte UI components
Optional UI built for the demo site. Not exported from the npm package — copy from src/rich-text-editor/ or build your own toolbar.
In-repo only. The published
halka package is headless. These
components live in the repository for reference and the live demo.RichTextEditor
Full editor with toolbar, modals, find-replace bar, and footnote manager. Wires all plugins.
| Name | Type | Description |
|---|---|---|
content | string (bindable) | HTML content |
placeholder | string | Empty state placeholder |
onChange | (html) => void | Content change callback |
class | string | Wrapper class |
typescript
import RichTextEditor from '../rich-text-editor/RichTextEditor.svelte';
import '../rich-text-editor/styles.css';
<RichTextEditor bind:content={html} placeholder="Write…" />InlineEditor
Compact single-line-style editor for footnotes and dialogs. Uses HalkaEditor with inline mode.
| Name | Type | Description |
|---|---|---|
value | string (bindable) | HTML content |
onSave | () => void | Called on Enter / save button |
onCancel | () => void | Optional cancel handler |
prependToolbar | Snippet | Extra toolbar buttons |
- Used inside FootnoteManager for editing footnote bodies
- Enter saves, Escape cancels — configure via onSave/onCancel
- Not published to npm; copy from repo or use headless API with inline: true
typescript
import InlineEditor from '../rich-text-editor/InlineEditor.svelte';
<InlineEditor bind:value={html} onSave={save} onCancel={cancel} />Composition
RichTextEditor is built from:
- Toolbar.svelte — formatting, lists, table menu, find, clear actions
- FindReplace.svelte — find/replace panel bound to findReplacePlugin state
- FootnoteManager.svelte — footnote list and InlineEditor instances
- Image modal — insert/edit dialog with layout (inline in text / block on own line), alt text, and width/height/max-width sizing
- styles.css — editor chrome, toolbar, find highlight (::highlight)