CreaRack-SL

Editor Rich-Text del Cuaderno (TipTap)

Vista limpiaEditar
Funcionalidadactivecreado Fri May 08#cuaderno#notebook#tiptap#prosemirror#rich-text#react#astro#frontend

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

ComponenteRutaResponsabilidad
NoteEditorsrc/components/notebook/NoteEditor.tsxOrquestador principal del editor
Toolbarsrc/components/notebook/Toolbar.tsxBarra de herramientas fija superior
TableBubbleMenusrc/components/notebook/TableBubbleMenu.tsxMenú flotante contextual para tablas
SlashMenusrc/components/notebook/slashCommands.tsxPaleta 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):

TipoCSS forzado
ul nivel 1list-style-type: disc
ul nivel 2list-style-type: circle
ul nivel 3list-style-type: square
ollist-style-type: decimal
lidisplay: list-item (explícito contra el reset)
li::markercolor: 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

CommitCambio
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]]

Referenciado desde

Inicio
Yo