CreaRack-SL

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

Vista limpiaEditar
ADRactivecreado Fri May 08#cuaderno#workspace#editor#codemirror#tiptap#markdown#react#refactor

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

AlternativaRazó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 directoMás bajo nivel aún; CodeMirror 6 tiene mejor soporte de lenguajes y Lezer ya incluye lang-markdown
Monaco EditorDemasiado pesado para notas simples; orientado a código, no a Markdown
Marked + textarea rawSin 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

ComponenteCambio
NoteEditor.tsxTipTap Editor → CodeMirror EditorView con @codemirror/lang-markdown
Toolbar.tsxComandos TipTap → manipulación de texto Markdown literal sobre EditorView
ExportModal.tsxSimplificado: export directo del storage sin ghost editor
ThemeConfigModal.tsxapplyTheme dispara CustomEvent cuaderno-theme-changed
codemirrorTheme.tsNuevo — 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]]

Referenciado desde

Inicio
Yo