You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
59 lines
3.5 KiB
59 lines
3.5 KiB
# Words Demo
|
|
|
|
La demo publica vive en `web/routes/uix/components/words/+page.svelte` y sigue
|
|
la plantilla bloqueada de UIX:
|
|
|
|
- Live, API, Morfo, Sema, Recipe y A11y.
|
|
- Stage permanente entre header y tabs.
|
|
- `MutationObserver` sobre `data-event`.
|
|
- Snippets Soma y Eidos reactivos.
|
|
- Controles visibles para documento, toolbar, estados Soma, size, variant y
|
|
color.
|
|
- Toolbar Eidos agrupado por familias/submenus en presets `minimal`,
|
|
`formatting`, `full` y `custom`.
|
|
- Import/export visible para JSON, texto, HTML limpio/import seguro y Markdown
|
|
con listas indentadas, find/replace regex/preserve-case/current-match/selection,
|
|
code blocks con highlighting runtime y tablas con formato de celda/tabla.
|
|
- API documentada para leer/actualizar `language` de code blocks desde snippets
|
|
(`currentCodeLanguage` / `setCodeLanguage`).
|
|
- Selector visual `Words.CodeLanguagePicker` dentro de los presets de toolbar
|
|
para cambiar el lenguaje del bloque `code` seleccionado.
|
|
- Tokens de syntax highlighting visibles desde `data-words-code-token` sin
|
|
contaminar el export HTML limpio.
|
|
- `SlashMenu` opcional visible en snippets Soma/Eidos: `/query` abre comandos
|
|
de bloque/lista/tabla anclados al caret y navegables por teclado.
|
|
- Tablas editables visibles en el preset `sample`, con toolbar y slash command
|
|
para insertar una tabla 2x2 canonica, botones de fila/columna, navegacion
|
|
por celdas con `Tab`/`Shift+Tab` y formato desde el submenu `Table`: header
|
|
row/column, alineacion horizontal, vertical align, tonos de celda, striped
|
|
rows y compact table. La demo tambien verifica formato inline dentro de
|
|
celdas desde el submenu de texto. El submenu `Table` se renderiza por
|
|
secciones rotuladas y con ancho acotado para evitar una matriz opaca de
|
|
iconos.
|
|
- Checklist interactiva: el marcador de cada item se puede clicar y
|
|
`Ctrl/Cmd+Enter` alterna el item actual.
|
|
- El snippet Soma refleja la misma capacidad con un `<select>` manual usando
|
|
`currentCodeLanguage` y `setCodeLanguage`, porque el picker visual pertenece a
|
|
Eidos.
|
|
- `BubbleMenu` contextual visible cuando hay seleccion de rango, compuesto con
|
|
los mismos `CommandButton` y `LinkEditor` del toolbar principal.
|
|
- Sema tab con reproduccion de los eventos Morfo sobre el stage real.
|
|
|
|
## Cobertura Live
|
|
|
|
| Area | Controles |
|
|
| -------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| Documento | `sample`, `empty`, `long` |
|
|
| Soma | placeholder, toolbar, orientation, bubble menu, slash menu, import/export, disabled, readonly, required, invalid, commitOnBlur, status |
|
|
| Eidos | `size: sm/md/lg`, `variant: surface/outline/ghost`, `color: full ColorRole` |
|
|
| Estado visible | blocks, words, selection, export, import, last commit |
|
|
|
|
## Notas
|
|
|
|
- No hay `data-*` inventados por la demo para pintar el editor; la receta lee
|
|
los attrs de Morfo/Soma.
|
|
- La seleccion se muestra como `none`, `collapsed` o `range`.
|
|
- El cambio de preset/import remonta el editor solo como reset explicito de la
|
|
demo; Soma ya sincroniza cambios externos de `value` y `selection` sin
|
|
depender de remount.
|