Editors · Words

Words

Rich-text editor primitive with canonical JSON, contenteditable bridge, command toolbar, form serialization and semantic events. Morfo declares the editor parts and semantic events; Soma owns state, selection, input, links and history; Eidos only paints the emitted data contract.

parts{compiled.parts.order.length} events{events.length} sizes{sizes.length} colors{colors.length} apg textbox ↗

{#key documentRevision} (lastCommit = reason)} > {#snippet children({ selectedLink })} {#if showLinkEditor && toolbarChoice === 'none'} {/if} {placeholder} {#if showBubbleMenu} {#if showLinkEditor} {/if} {/if} {#if showStatus} {invalid ? 'Invalid content' : `${required ? 'Required editor' : 'Optional editor'} · ${wordCount} words · ${selectedLink ? selectedLink.href : lastCommit}`} {/if} {/snippet} {/key}

trace {#if trace.length === 0} focus the editor or use toolbar commands to see events {:else} {#each trace.slice(0, 3) as entry} {entry.event} · {entry.family}{entry.intent ? ' · ' + entry.intent : ''} {fmtTime(entry.at)} {/each} {/if} selection {selectionState} words {wordCount}

{#if tab === 'live'}

Controls

soma owns document, selection and input. eidos owns size, variant and color.

soma props · editor state

preset {#each presets as item} {/each} placeholder toolbar {#each toolbarChoices as item} {/each} toolbar orientation {#each orientations as item} {/each} export format {#each exportFormats as item} {/each} import format {#each importFormats as item} {/each} {#each ['disabled', 'readonly', 'required', 'invalid', 'commitOnBlur', 'linkEditor', 'bubbleMenu', 'status'] as key} {key} {#if key === 'disabled'} {disabled ? 'on' : 'off'} {:else if key === 'readonly'} {readonly ? 'on' : 'off'} {:else if key === 'required'} {required ? 'on' : 'off'} {:else if key === 'invalid'} {invalid ? 'on' : 'off'} {:else if key === 'commitOnBlur'} {commitOnBlur ? 'on' : 'off'} {:else if key === 'linkEditor'} {showLinkEditor ? 'shown' : 'hidden'} {:else if key === 'bubbleMenu'} {showBubbleMenu ? 'shown' : 'hidden'} {:else} {showStatus ? 'shown' : 'hidden'} {/if} {/each}

eidos props · visual treatment

size {#each sizes as item} {/each} variant {#each variants as item} {/each} color {#each colors as item} {/each}

Live document

blocks	{value.children.length}
words	{wordCount}
selection	{selectionState}
toolbar	{toolbarShape}
bubble menu	{bubbleState}
export	{exportFormat}
import	{importFeedback}
link editor	{showLinkEditor ? 'shown' : 'hidden'}
last commit	{lastCommit}

Document exchange

import draft apply import

soma export · {exportFormat} {exportFormat}

{exportPreview}

soma headless · document and commands svelte

{somaSnippet}

eidos visual · compound editor svelte

{eidosSnippet}

{/if} {#if tab === 'api'}

API surface

Prop / part	Owner	Default	Notes
value	soma	empty document	Canonical JSON document, bindable.
selection	soma	null	Document selection, bindable.
placeholder	soma	-	Used by Placeholder while empty.
name	soma	-	Enables HiddenInput JSON serialization.
disabled / readonly	soma	false	Disables editing or keeps read-only focus semantics.
required / invalid	soma	false	ARIA and recipe state, Field-compatible.
commitOnBlur	soma	true	Fires commit-content on blur.
onValueCommit	soma	-	Receives document and reason.
importContent	soma	json \| text \| html \| markdown	Snippet helper that replaces the document through the normalized engine.
exportContent	soma	json \| text \| html \| markdown	Snippet helper for clean export without DOM metadata.
Content	soma	required	contenteditable textbox surface.
toolbar	eidos	false	Optional property: false, true, minimal, formatting, full or custom command groups.
Toolbar / ToolbarGroup	soma	optional	Manual composition stays available for fully custom command layouts.
CommandButton	soma	optional	Runs command names and exposes active state.
BubbleMenu	soma/eidos	optional	Selection-anchored toolbar that appears only for text ranges and reuses command buttons.
ToolPopover	eidos	optional	Reusable toolbar tool shell: icon trigger, floating panel, close button and dismiss guard.
LinkEditor	soma/eidos	optional	Form part that applies or removes links against the current selection.
selectedLink	soma	null	Snippet state for the link under the current document selection.
insertLink / unlink	soma	helpers	Selection-aware commands exposed to custom toolbars and link forms.
HiddenInput / Status	soma	optional	Form serialization and polite status.
size	eidos	md	{sizes.join(' \| ')}
variant	eidos	surface	{variants.join(' \| ')}
color	eidos	primary	{colors.join(' \| ')}
reference row	audit	V1	React Aria/WAI-ARIA inform textbox + toolbar; Lexical informs editor model; Edra/Tiptap stays a benchmark, not a dependency.

{/if} {#if tab === 'morfo'}

Morfo contract

name	{wordsMorfo.name}
kebab	{wordsMorfo.kebab}
scope	{wordsMorfo.scope.join(' + ')}
apg	textbox
parts	{wordsMorfo.parts.length}
events	{wordsMorfo.events.length}

Parts overview

{#each partsList as part} {/each}

Part	Marker	Element	Role	Archetype	States	Optional
{part.kebab}	`[{part.marker}]`	<{part.defaultElement}>	{part.role ?? '-'}	{part.archetype ?? '-'}	{part.states?.join(' \| ') ?? '-'}	{part.optional ? 'yes' : 'no'}

{#each wordsMorfo.parts as rawPart} {@const partAny = rawPart as unknown as RawPart} {@const dataAttrs = compiled.contracts.dataAttrsByPart.get(partAny.kebab) ?? []} {@const ariaAttrs = partAny.aria ?? []} {@const keyboard = partAny.keyboard ?? []} {#if dataAttrs.length || ariaAttrs.length || keyboard.length}

{partAny.kebab}

{#if dataAttrs.length}

{#each dataAttrs as attr} {/each}

Data attr	Values	Source
{attr.attr}	{attr.values ? attr.values.join(' \| ') : '-'}	{'value' in attr ? describeValue((attr as { value?: unknown }).value) : '-'}

{/if} {#if ariaAttrs.length}

{#each ariaAttrs as attr} {/each}

ARIA attr	Source	Condition	Severity
{attr.attr}	{describeValue(attr.value)}	{describeCondition(attr.condition)}	{attr.severity ?? '-'}

{/if} {#if keyboard.length}

{#each keyboard as key} {/each}

Key	Action
{key.key}	{key.action}

{/if} {/if} {/each}

Events declaration

{#each wordsMorfo.events as event} {@const eventAny = event as unknown as RawEvent} {/each}

Name	Family	Verb	Sequence	Intent	Target	Prewrite	Commit
{eventAny.name}	{eventAny.semantic.family}	{eventAny.semantic.verb ?? '-'}	{eventAny.semantic.sequence ?? '-'}	{typeof eventAny.semantic.intent === 'string' ? eventAny.semantic.intent : describeValue(eventAny.semantic.intent)}	{describeTarget(eventAny.semantic.target)}	{eventAny.prewrite ? 'yes' : '-'}	{eventAny.commit ? 'yes' : '-'}

{/if} {#if tab === 'sema'}

sema · events + playback

Typing stays local until it commits; discrete focus, format, link, history, clear and invalid input actions emit semantic events.

{#each events as action} {/each}

Name	Family	Verb	Sequence	Intent	Target	Play
{action.name}	{action.semantic.family}	{action.semantic.verb ?? '-'}	{action.semantic.sequence ?? '-'}	{action.semantic.intent ?? '-'}	{action.target}

{/if} {#if tab === 'recipe'}

Eidos recipe

Selectors live in src/uix/eidos/components/words/words.css; public tokens are declared under THEME_BASE_RECIPE_TOKENS.words.

{#each recipeSelectors as row} {/each}

Selector	Source	Role
{row.selector}	{row.source}	{row.note}

{/if} {#if tab === 'a11y'}

Accessibility

Concern	Contract
Content	`role="textbox"`, `aria-multiline="true"` and contenteditable managed by Soma.
Toolbar	`role="toolbar"` with orientation propagated to ARIA.
Buttons	Command buttons are native buttons; toggle commands expose `aria-pressed`.
BubbleMenu	Contextual selection toolbar uses `role="toolbar"`, keeps focus from collapsing the editor selection on pointer down, and hides when no text range is available.
Link editor	Link editing is a native `form` inside a reusable tool popover; URL, apply, unlink and close controls stay keyboard reachable and operate on Soma selection state.
Readonly	Readonly keeps content focusable and sets `aria-readonly`.
Disabled	Disabled removes editing and prevents command execution.
Status	Status uses `role="status"` and `aria-live="polite"`.
Form	HiddenInput serializes the full JSON document when `name` is present.

Keyboard

{#each (wordsMorfo.parts.find((part) => part.kebab === 'content') as unknown as RawPart | undefined)?.keyboard ?? [] as key} {/each}

Key	Action
{key.key}	{key.action}

{/if}