ADR 2026-05-08 — Migración editor Cuaderno: TipTap → CodeMirror 6

Contexto

El módulo Cuaderno del Workspace usaba TipTap 3 como editor de notas con un paradigma WYSIWYG: el usuario veía texto formateado visualmente sin ver los markers Markdown. El almacenamiento ya era Markdown plano desde la iteración s54.

El usuario principal (Edu) expresó preferencia explícita por ver el Markdown fuente con los markers visibles (##, **, `, |…) y syntax highlighting por colores, al estilo Notepad++. El modelo WYSIWYG de TipTap es opuesto a este objetivo.

Decisión

Reemplazar TipTap 3 por CodeMirror 6 en modo source (sin preview WYSIWYG).

Author: @Esquembri + Claude Opus 4.7
Fecha efectiva: 2026-05-08
Commit: 56a111875b1061ffc9d0950277153e5ae22ad72a
Merge a main directo (push)

Alternativas descartadas

Alternativa	Razón de descarte
Mantener TipTap + añadir “source mode”	TipTap no tiene un modo source-first real; añadir preview inverso es workaround frágil
ProseMirror directo	Más bajo nivel aún; CodeMirror 6 tiene mejor soporte de lenguajes y Lezer ya incluye `lang-markdown`
Monaco Editor	Demasiado pesado para notas simples; orientado a código, no a Markdown
Marked + textarea raw	Sin highlighting; experiencia pobre

Consecuencias

Positivas

UX alineada con preferencia del usuario: markdown source con coloring.
Tema MD configurable funciona de verdad — TipTap ignoraba parcialmente los tokens de tema.
Menos superficie de bugs: TipTap tenía extensiones múltiples, algunas en versiones distintas.
Bundle significativamente más pequeño: eliminadas ~12 dependencias @tiptap/* + tiptap-markdown.
Export simplificado: el storage ya es Markdown plano, sin ghost editor intermedio.

Negativas / Trade-offs

Pérdida de slash menu / (no aplica en source mode).
Pérdida de bubble menu de tablas (las tablas son sintaxis Markdown pura).
Pérdida de color custom de palabras seleccionadas (era feature WYSIWYG).
Pérdida de resize drag & drop de tablas.
Compatibilidad legacy: notas con JSON TipTap de iteraciones pre-s54 se muestran como JSON crudo. Caso edge; se espera que el usuario las elimine.

Implementación

Componentes refactorizados

Componente	Cambio
`NoteEditor.tsx`	TipTap `Editor` → CodeMirror `EditorView` con `@codemirror/lang-markdown`
`Toolbar.tsx`	Comandos TipTap → manipulación de texto Markdown literal sobre `EditorView`
`ExportModal.tsx`	Simplificado: export directo del storage sin ghost editor
`ThemeConfigModal.tsx`	`applyTheme` dispara `CustomEvent cuaderno-theme-changed`
`codemirrorTheme.ts`	Nuevo — `HighlightStyle` Lezer con 9 elementos sintácticos leyendo CSS vars de `:root`

Integración del tema dinámico

ThemeConfigModal → CustomEvent("cuaderno-theme-changed")
                 → codemirrorTheme.ts reconfigura HighlightStyle
                 → EditorView relee CSS vars de :root

Deps

Añadidas: @codemirror/{state,view,language,lang-markdown,commands,search,autocomplete} + @lezer/highlight

Eliminadas: @tiptap/core, @tiptap/extension-bubble-menu, @tiptap/extension-color, @tiptap/extension-link, @tiptap/extension-placeholder, @tiptap/extension-table*, @tiptap/extension-task*, @tiptap/extension-text-style, @tiptap/pm, @tiptap/react, @tiptap/starter-kit, @tiptap/suggestion, tiptap-markdown

Estado

Aplicada y en producción desde 2026-05-08.

Véase también

[[feature—cuaderno—editor-markdown]]
[[workspace—que-es-workspace]]