Cuaderno — Editor Markdown con CodeMirror 6

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.3

Eliminadas

@tiptap/core, @tiptap/extension-*, @tiptap/pm, @tiptap/react,
@tiptap/starter-kit, @tiptap/suggestion, tiptap-markdown

Motivació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]]