Capitulo 5: Editor - Modos de Vista
Capitulo 5: Editor - Modos de Vista
< Volver al Indice del Tutorial
Spacecake usa dos motores de edicion completamente distintos para trabajar con markdown. Cada uno esta optimizado para un caso de uso diferente, y puedes cambiar entre ellos en cualquier momento sin perder datos.
Los Dos Motores
Lexical (Rich Mode / WYSIWYG)
Lexical es el motor que impulsa el modo WYSIWYG de Spacecake. En este modo, el markdown se renderiza visualmente mientras escribes. No ves los caracteres de marcado (#, **, ```), sino el resultado final: headings con su tamano real, texto en negrita renderizado, code blocks con syntax highlighting, etc.
Este es el modo por defecto al abrir cualquier archivo markdown en Spacecake.
CodeMirror (Source Mode)
CodeMirror es el motor del modo source. Aqui ves el markdown crudo tal como esta escrito en el archivo, con un preview en vivo al costado. Es el mismo editor que usan muchas herramientas de desarrollo para edicion de codigo.
Rich Mode en Detalle
En rich mode, los elementos de markdown son interactivos:
- Headings: se muestran con su tamano y peso visual real (h1 grande, h2 mediano, etc.)
- Code blocks: se renderizan como bloques editables con syntax highlighting completo via CodeMirror embebido
- Diagramas Mermaid: se renderizan como diagramas visuales, no como texto
- Checklists: las casillas de verificacion son clickeables para marcar y desmarcar items
- Tablas: se muestran como tablas HTML con bordes y celdas redimensionables
- Negrita, italica, links: se renderizan visualmente sin mostrar los caracteres de marcado
El editor WYSIWYG te da una experiencia similar a escribir en un procesador de texto, pero el archivo subyacente sigue siendo markdown puro.
Source Mode en Detalle
En source mode ves el markdown crudo con toda su sintaxis visible:
# Esto es un heading
Este es un parrafo con **negrita** y *italica*.
- [ ] Item pendiente
- [x] Item completadoEl preview en vivo te muestra como se vera el resultado al costado, permitiendote verificar el formato mientras escribes directamente en el markdown.
Toggle entre Modos
El cambio entre rich mode y source mode se hace con el boton de toggle en la toolbar del editor (view toggle button). Un click y cambias de vista instantaneamente.
El contenido es exactamente el mismo archivo markdown en ambos modos. No hay conversion, transformacion ni perdida de datos al cambiar. Puedes escribir en rich mode, cambiar a source mode para ajustar algo, y volver a rich mode sin problemas.
Cuando Usar Cada Modo
Usa Rich Mode cuando:
- Editas planes y specs: ver el formato final mientras escribes acelera la revision
- Escribes documentacion: la vista WYSIWYG te da feedback inmediato del resultado
- Tomas notas: la edicion visual es mas natural para texto libre
- Trabajas con checklists: poder hacer click en las casillas es mas rapido que editar
[ ]y[x] - Revisas diagramas Mermaid: ver el diagrama renderizado es mucho mas util que leer el codigo mermaid
Usa Source Mode cuando:
- El formato WYSIWYG no se ve bien: a veces el renderizado visual no refleja exactamente lo que esperas, y ver el markdown crudo te permite diagnosticar el problema
- Necesitas edicion precisa de markdown: controlar exactamente los caracteres de marcado
- Copias o pegas markdown crudo: es mas facil pegar markdown en source mode que en rich mode
- Debuggeas problemas de formato: ver la sintaxis real del archivo ayuda a encontrar errores
Sin Perdida de Datos
Un punto importante: ambos modos operan sobre el mismo archivo markdown. No existe una “version rich” y una “version source” del documento. Cuando cambias de modo, Spacecake simplemente cambia como presenta el contenido del archivo.
Esto significa que puedes alternar libremente entre modos durante una sesion de edicion sin preocuparte por inconsistencias o perdida de formato.