Descripción
El Cuaderno es el módulo de notas personales del Workspace de CreaRack Pro. Permite a los usuarios (inicialmente Edu) crear, organizar y exportar notas en formato Markdown puro con resaltado de sintaxis estilo Notepad++.
Desde el commit 56a1118 (2026-05-08) el editor usa CodeMirror 6 en modo source, mostrando los markers Markdown visibles (##, **, `, |, etc.) con coloring por tokens Lezer. Reemplaza al editor WYSIWYG TipTap anterior.
Funcionalidades activas
| Capacidad | Detalle |
|---|---|
| Editor source Markdown | CodeMirror 6 + @codemirror/lang-markdown; markers visibles, sin preview |
| Syntax highlighting | HighlightStyle Lezer que lee CSS vars de :root; 9 elementos sintácticos temátizables |
| Toolbar | Comandos de manipulación de texto literal: Bold (**), H1 (# ), etc. operan sobre EditorView |
| Tema dinámico | ThemeConfigModal emite CustomEvent cuaderno-theme-changed; codemirrorTheme.ts reconfigura el HighlightStyle en caliente |
| Multi-pane | Layouts 1×1, 2×1, 1×2, 2×2, 3×1 |
| Sidebar | Duplicar / eliminar / pin / archivar notas |
| Auto-save | Debounce 1 segundo → localStorage |
| Hint contextual | Sugerencia según tipo de línea actual |
| Export | TXT / MD / HTML directo del storage (ya es Markdown plano) |
Capacidades eliminadas (respecto a TipTap)
- Slash menu
/— no tiene sentido en source mode. - Bubble menu de tablas — las tablas son sintaxis
|---|Markdown. - Color custom de palabras seleccionadas (era WYSIWYG-only).
- Resize drag & drop de tablas.
Storage y compatibilidad
- Formato: Markdown plano. Sin cambio de formato desde iteración s54.
- Notas legacy: notas con JSON TipTap interno (iteraciones anteriores a s54) se renderizan como JSON crudo en CodeMirror — caso edge esperado; el usuario puede eliminarlas.
Archivos principales
| Archivo | Rol |
|---|---|
src/components/notebook/NoteEditor.tsx | Componente React principal; monta EditorView de CodeMirror |
src/components/notebook/Toolbar.tsx | Comandos de toolbar sobre EditorView |
src/components/notebook/ExportModal.tsx | Export TXT/MD/HTML sin ghost editor |
src/components/notebook/ThemeConfigModal.tsx | Configuración de tema; emite cuaderno-theme-changed |
src/components/notebook/codemirrorTheme.ts | HighlightStyle Lezer con CSS vars |
Archivos eliminados
src/components/notebook/extensions.ts— TipTap TextStyle extension.src/components/notebook/slashCommands.ts— slash menu TipTap.src/components/notebook/TableBubbleMenu.tsx— bubble menu TipTap.
Dependencias
Añadidas
@codemirror/autocomplete ^6.20.2
@codemirror/commands ^6.10.3
@codemirror/lang-markdown ^6.5.0
@codemirror/language ^6.12.3
@codemirror/search ^6.7.0
@codemirror/state ^6.6.0
@codemirror/view ^6.42.1
@lezer/highlight ^1.2.3Eliminadas
@tiptap/core, @tiptap/extension-*, @tiptap/pm, @tiptap/react,
@tiptap/starter-kit, @tiptap/suggestion, tiptap-markdownMotivación de diseño
Edu prefiere ver markdown puro con markers visibles (
##,**,`, etc.) y syntax highlighting por colores, no WYSIWYG. — commit body
La decisión de arquitectura asociada está documentada en [[decision—20260508—tiptap-to-codemirror]].
Véase también
- [[decision—20260508—tiptap-to-codemirror]]
- [[workspace—que-es-workspace]]