diff --git a/src/uix/eidos/components/words/README.md b/src/uix/eidos/components/words/README.md index 38012b84c..5a2e7e4ba 100644 --- a/src/uix/eidos/components/words/README.md +++ b/src/uix/eidos/components/words/README.md @@ -62,13 +62,11 @@ rich-text ni wrapper visual reutilizable. - Link editing: implemented as a stable form part over Soma selection state. Contextual formatting uses `Words.BubbleMenu` anchored to the real DOM selection rect. -- HTML export and conservative safe HTML import are implemented in Soma. - Markdown import/export is implemented in Soma V1 with a conservative - zero-dependency parser. +- HTML and Markdown are export-only (lossy; no faithful inverse parser). + Import accepts JSON (validated) and plain text only. - Tables: canonical tables, row/column commands, Tab navigation, header - row/column toggles, cell alignment, vertical alignment, cell tone and table - striped/compact formatting are implemented; resizing and multi-cell - selection are deferred. + row/column toggles, cell alignment and vertical alignment are + implemented; resizing and multi-cell selection are deferred. - Images/collaboration: defer to V2 or ActiveApp-backed packs. - Demo scope signed by user on 2026-05-24 via "continua" after the Eidos/demo slice was proposed. @@ -152,9 +150,8 @@ rich-text ni wrapper visual reutilizable. - `Words` soporta tablas como contenido del editor, no como parte publica: Soma emite `table`, `table-row` y `table-cell` desde el render headless, Eidos pinta HTML nativo y la familia `table` agrupa estructura y formato: - filas/columnas, header row/column, alineacion horizontal, vertical align, - tono de celda, striped rows y compact table. La seleccion multi-celda y - resizing quedan fuera de este slice. + filas/columnas, header row/column, alineacion horizontal y vertical align. + La seleccion multi-celda y resizing quedan fuera de este slice. - El trigger del popover captura la seleccion DOM de `Words.Content` antes de mover foco al formulario. Esto evita que aplicar un enlace dependa del timing de `selectionchange` del navegador. @@ -287,13 +284,12 @@ Features implementadas en esta sesion: seguir escribiendo dentro de una celda produce inlines marcados. - **Formato de celda/tabla**: `setTextAlign` aplica sobre la celda activa cuando la seleccion esta dentro de una tabla. Tambien existen comandos para - `toggle-table-header-row`, `toggle-table-header-column`, - `table-cell-vertical-*`, `table-cell-tone-*`, `toggle-table-striped` y - `toggle-table-compact`, expuestos desde la familia `table`. + `toggle-table-header-row`, `toggle-table-header-column` y + `table-cell-vertical-*`, expuestos desde la familia `table`. - **Render/serializacion**: Soma renderiza HTML nativo con `data-words-node="table|table-row|table-cell"` y atributos de formato de - tabla/celda; HTML limpio preserva headers, tone, align y compact/striped. - Markdown importa/exporta pipe tables conservadoras. + celda (align, vertical); el HTML export preserva headers y alineacion. + Markdown exporta pipe tables conservadoras (export-only). - **Alcance diferido**: seleccion multi-celda y resizing quedan para V2. Tests: diff --git a/src/uix/eidos/components/words/words.css b/src/uix/eidos/components/words/words.css index 21da96247..0540ea534 100644 --- a/src/uix/eidos/components/words/words.css +++ b/src/uix/eidos/components/words/words.css @@ -1529,19 +1529,6 @@ font-size: var(--words-status-font-size); } -[data-words-toolbar-family-panel][data-family='table'] [data-command='table-cell-tone-muted'] { - background: color-mix(in srgb, var(--words-toolbar-bg) 86%, transparent); -} - -[data-words-toolbar-family-panel][data-family='table'] [data-command='table-cell-tone-accent'] { - background: color-mix(in srgb, var(--_words-accent-solid) 14%, var(--words-bg)); - color: var(--_words-accent-text); -} - -[data-words-toolbar-family-panel][data-family='table'] [data-command='table-cell-tone-default'] { - background: var(--words-bg); -} - [data-words-toolbar-family-section] { display: grid; gap: var(--button-gap-xs); @@ -1966,20 +1953,6 @@ background: var(--words-bg); } -/* Striped rows — bumped from a faint 70%-transparent overlay to a - solid toolbar-bg tint so the zebra is actually discernible against - the editor background. */ -[data-words-content] :where(table[data-words-table-striped] tr:nth-child(even) td), -[data-words-content] :where(table[data-words-table-striped] tr:nth-child(even) th) { - background: var(--words-toolbar-bg); -} - -[data-words-content] :where(table[data-words-table-compact] td), -[data-words-content] :where(table[data-words-table-compact] th) { - padding-block: calc(var(--words-code-py) * 0.5); - padding-inline: calc(var(--words-command-px) * 0.75); -} - [data-words-content] :where(td, th) { min-inline-size: calc(var(--_words-button-size) * 2); padding-block: var(--words-code-py); @@ -1990,13 +1963,13 @@ } /* Subtle hover for every body cell — lets the user know cells are - interactive (clickable to edit). Header rows opt out below. */ -[data-words-content] :where(table) tr:hover td:not([data-words-cell-header]) { + interactive (clickable to edit). Header cells render as and so + are naturally excluded. */ +[data-words-content] :where(table) tr:hover td { background: color-mix(in srgb, var(--_words-accent-solid) 5%, transparent); } -[data-words-content] :where(th), -[data-words-content] [data-words-cell-header] { +[data-words-content] :where(th) { background: color-mix(in srgb, var(--_words-accent-solid) 12%, var(--words-bg)); color: var(--words-heading-color); font-weight: var(--words-strong-font-weight); @@ -2005,18 +1978,6 @@ border-block-end-width: calc(var(--words-border-width) * 2); } -[data-words-content] [data-words-cell-tone='muted'] { - background: color-mix(in srgb, var(--words-toolbar-bg) 82%, transparent); -} - -/* Accent tone — was 14% solid with full accent-text recolor, which - read as "this cell is broken / special-cased random". Toned down to - 8% background and kept the inherited text color so the cell still - draws the eye without shouting. */ -[data-words-content] [data-words-cell-tone='accent'] { - background: color-mix(in srgb, var(--_words-accent-solid) 8%, var(--words-bg)); -} - [data-words-content] [data-words-cell-vertical='middle'] { vertical-align: middle; } @@ -2029,15 +1990,6 @@ background: color-mix(in srgb, var(--_words-accent-solid) 8%, transparent); } -[data-words-content] [data-words-node='table-cell'][data-words-cell-tone='muted']:focus-within { - background: color-mix(in srgb, var(--_words-accent-solid) 8%, var(--words-toolbar-bg)); -} - -[data-words-content] [data-words-node='table-cell'][data-words-cell-tone='accent']:focus-within, -[data-words-content] [data-words-node='table-cell'][data-words-cell-header]:focus-within { - background: color-mix(in srgb, var(--_words-accent-solid) 20%, var(--words-bg)); -} - /* ── Image (F3) ──────────────────────────────────────────────────────── */ [data-words-content] :where(figure[data-words-block='image']) {