Cuaderno: color de texto y tablas ajustables (filas/cols + edición contextual)

Cuaderno: color de texto y tablas ajustables

Commit fc380c8 (2026-05-08) — @Esquembri · Co-authored Claude Opus 4.7

Añade dos grupos de capacidades al editor de notas del módulo Cuaderno (CreaRack Workspace):

1. Color de texto — paleta de 9 colores aplicable a cualquier selección.
2. Tablas ajustables — inserción parametrizada + edición contextual en-línea.

Color de texto

Dependencias añadidas

Las extensiones se registran en NoteEditor.tsx tras las extensiones de tabla:

import { TextStyle, Color } from '@tiptap/extension-text-style';
// …
extensions: [
  // … otras extensiones …
  TextStyle,
  Color,
  Markdown.configure({ html: false, linkify: true, breaks: false }),
]

UX — Botón “A” en toolbar

• Botón A en la barra de herramientas; muestra un indicador de color activo: barra horizontal de 10×3 px bajo la letra, con el color activo o currentColor si no hay ninguno.
• Al pulsarlo abre un popover de paleta (role=“menu”) con 9 swatches de 24×24 px en grid 3 columnas.
• Primer swatch: reset (”×”), vuelve al color heredado llamando unsetColor().
• Los 8 colores disponibles:

• Cierra al seleccionar color, al pulsar Escape o al hacer clic fuera del toolbar (listener mousedown en window).

Estilos CSS relevantes

/* src/styles/tools.css */
.tb-popover-anchor { position: relative; display: inline-block; }
.tb-popover          { position: absolute; top: calc(100% + 4px); … z-index: 30; }
.tb-popover[role="menu"] { display: grid; grid-template-columns: repeat(3, 24px); gap: 6px; }
.tb-color-swatch     { width: 24px; height: 24px; border-radius: 4px; … }
.tb-color-swatch:hover { border-color: var(--fg); transform: scale(1.05); }

Tablas ajustables

Antes vs. después

Popover de inserción

• Botón ⊞ abre tb-popover tb-popover-table (role=“dialog”).
• Dos <input type="number"> para filas (1-20) y columnas (1-10).
• Botón “Insertar N×M” (label dinámico) ejecuta:

editor.chain().focus().insertTable({ rows, cols, withHeaderRow: true }).run();

• Cierra el popover al insertar, Escape o clic fuera.

Botones contextuales (solo cuando inTable === true)

Se detecta con editor.isActive('table'). Aparecen a continuación del separador:

El botón ✕ requiere confirmación del navegador antes de destruir la tabla.

Estilos CSS relevantes

.tb-popover-table { min-width: 200px; padding: 12px; }
.tb-popover-row   { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tb-popover-row label { display: flex; flex-direction: column; font-size: 0.72rem; … }
.tb-popover-row input { padding: 5px 8px; background: var(--bg-raised-2); … }

Gestión de foco y accesibilidad

• Todos los botones de toolbar usan onMouseDown={(e) => e.preventDefault()} para evitar que el editor pierda el foco al pulsar.
• El listener de cierre de popovers está montado en useEffect y se limpia correctamente al desmontar.
• Se usan atributos role="menu", role="menuitem", role="dialog" y aria-label en los popovers.

Archivos modificados

Véase también

• [[entity—cuaderno—component—toolbar]]
• [[workspace—que-es-workspace]]