Editor Rich-Text del Cuaderno (TipTap)

Descripción

El Cuaderno es el módulo de notas estructuradas de CreaRack Pro. Su editor de contenido está construido sobre TipTap v3 (ProseMirror bajo el capó), expuesto a través del componente NoteEditor.tsx. Permite editar notas con formato enriquecido: texto, listas, tablas, tareas, bloques de código, comandos slash y más.

Componentes principales

Componente	Ruta	Responsabilidad
`NoteEditor`	`src/components/notebook/NoteEditor.tsx`	Orquestador principal del editor
`Toolbar`	`src/components/notebook/Toolbar.tsx`	Barra de herramientas fija superior
`TableBubbleMenu`	`src/components/notebook/TableBubbleMenu.tsx`	Menú flotante contextual para tablas
`SlashMenu`	`src/components/notebook/slashCommands.tsx`	Paleta de comandos `/` al estilo Notion

Extensiones TipTap activas

@tiptap/extension-bubble-menu        v3.23.1  (bump en commit 61ccda3)
@tiptap/extension-color              v3.23.1
@tiptap/extension-link               v3.22.5
@tiptap/extension-placeholder        v3.22.5
@tiptap/extension-table              (incluye Table, TableRow, TableCell, TableHeader)
tiptap-markdown                      (serialización Markdown ↔ TipTap)

Capacidades del editor (estado actual)

Listas

Corregidas en el commit 61ccda3 (marcadores anteriormente invisibles por reset CSS de Astro/Tailwind):

Tipo	CSS forzado
`ul` nivel 1	`list-style-type: disc`
`ul` nivel 2	`list-style-type: circle`
`ul` nivel 3	`list-style-type: square`
`ol`	`list-style-type: decimal`
`li`	`display: list-item` (explícito contra el reset)
`li::marker`	`color: var(--fg-muted)`

Las task lists ([data-type="taskList"]) quedan excluidas de estos estilos con :not([data-type="taskList"]) — usan display: flex y checkbox personalizado.

Tablas

Bubble menu flotante (TableBubbleMenu): aparece al posicionar el cursor en una tabla. Permite añadir/eliminar filas y columnas, alternar header row, fusionar/dividir celdas y eliminar la tabla.
Column resize drag & drop: handles visibles (.column-resize-handle) al hacer hover. Color var(--accent), opacidad 0→0.6 con transición.
table-layout: fixed para que el resize tenga efecto visual real.
.tableWrapper con overflow-x: auto para tablas anchas en viewport estrecho.
Celda seleccionada (.selectedCell): highlight azul semitransparente rgba(41,98,255,0.12).

Comandos slash

Activados escribiendo / en una línea vacía. Extensión personalizada en slashCommands.tsx.

Persistencia

Las notas se serializan a Markdown mediante tiptap-markdown y se persisten a través de la función onPersist inyectada en NoteEditor. La lógica de almacenamiento (Cloudflare D1 / API) es responsabilidad del consumidor del componente.

Historial de cambios relevantes

Commit	Cambio
`61ccda3` (2026-05-08)	Fix listas invisibles + TableBubbleMenu + resize visible de columnas

Notas de arquitectura

El editor vive íntegramente en el frontend (Astro + React islands). No hay server-side rendering de contenido TipTap.
Los estilos están centralizados en src/styles/tools.css bajo el scope .cuaderno-content. Esto facilita el aislamiento pero requiere especificidad manual contra los resets de Tailwind.
@tiptap/extension-bubble-menu pasa de optional a dependencia directa a partir de v3.23.1. Tenerlo en cuenta al actualizar el lockfile.

Véase también

[[entity—cuaderno—component—table-bubble-menu]]
[[workspace—que-es-workspace]]
[[crearack—conceptos—interfaz-general]]