Editor Markdown com preview ao vivo e exportação

O que é

Esta feature adiciona autoria e revisão ao produto. O usuário pode abrir o documento atual em /editor/, editar Markdown com preview ao vivo, usar apoios de sintaxe e devolver o conteúdo atualizado ao reader.

Objetivo no produto

O objetivo é permitir ajustes rápidos no mesmo ambiente de leitura. Em vez de abrir outra ferramenta para pequenas correções, o usuário pode revisar, experimentar sintaxe, validar a renderização e baixar o resultado final.

Como o usuário usa

Abre um documento no reader.
Aciona o botão “Editor” ou o atalho E.
O app navega para /editor/ levando o Markdown atual via sessionStorage.
Edita em modo código, preview ou dividido.
Usa botões de formatação, atalhos, comandos com / e a referência Markdown.
Aplica as mudanças para voltar ao reader ou descarta para restaurar o original.
Se quiser, exporta como .md com nome derivado do H1 editado.

Valor entregue

reduz troca de contexto entre leitura e edição;
favorece revisão incremental;
apoia aprendizado e memorização de Markdown dentro do produto;
aproxima o preview do reader, incluindo código, tabelas, imagens, cores e Mermaid;
mantém um rascunho recuperável em storage local quando possível.

Subfeatures importantes

Preview ao vivo

O editor renderiza Markdown com marked, sanitiza o HTML, aplica highlight em blocos de código, renderiza diagramas Mermaid e aplica swatches em cores Markdown.

Evidências:

src/pages/editor.astro define a página dedicada do editor, o preview e a sincronização com debounce.
src/layouts/AppLayout.astro carrega marked, highlight.js e mermaid a partir de /vendor/ (auto-hospedados).
src/scripts/sanitize-html.js sanitiza o HTML renderizado e preserva checkboxes Markdown seguros.
src/scripts/markdown-color-swatches.js aplica amostras visuais em cores escritas no Markdown.

Apoio de escrita

O editor oferece inserções rápidas para padrões comuns de Markdown. A intenção não é ser um IDE completo, e sim reduzir o atrito em revisões e pequenas reescritas.

Evidências:

src/pages/editor.astro implementa botões para negrito, itálico, código, H2, link e lista.
src/pages/editor.astro implementa atalhos Ctrl/Cmd+B, Ctrl/Cmd+I, Ctrl/Cmd+K, Tab, Shift+Tab e continuação automática de listas, checklists, citações e listas numeradas.
src/pages/editor.astro implementa comandos de linha iniciados por /, com navegação por teclado e inserção no cursor.

Painel de referência e inserção

Há uma referência interna de exemplos de sintaxe com busca e inserção direta no cursor.

Evidências:

src/pages/editor.astro define o drawer de referência, a busca local e a lista de snippets.
A referência cobre H1, H2, negrito, itálico, link, lista, checklist, citação, bloco de código, tabela e Mermaid.

Layout responsivo

O editor funciona em três modos no desktop: código, dividido e preview. Em telas estreitas, o modo dividido é convertido para uma experiência por abas para evitar colunas comprimidas.

Evidências:

src/pages/editor.astro define os botões de layout e o redimensionamento do divisor no desktop.
src/pages/editor.astro aplica media queries para compactar a toolbar, ocultar o divisor e alternar entre código e preview em mobile.

Exportação

O usuário pode baixar o Markdown atual. O nome do arquivo é derivado do primeiro H1 editado quando disponível, com fallback para o título de origem.

Evidências:

src/pages/editor.astro expõe o botão de download e implementa o download via Blob.
src/pages/editor.astro deriva o título atual a partir do H1 antes de exportar ou aplicar.

Aplicar, descartar e recuperar

O editor mantém o Markdown original para permitir descarte explícito. Enquanto edita, salva rascunho em sessionStorage e espelha em localStorage quando possível para recuperação entre sessões.

Evidências:

src/scripts/reader/reader-core.js grava sanctuary:current-md e sanctuary:current-title quando carrega um documento.
src/pages/editor.astro lê o documento atual, salva rascunhos, aplica mudanças via sanctuary:pending-doc e recupera conteúdo de localStorage se a aba anterior foi fechada.

O que essa feature revela sobre o produto

O Sanctuary não quer apenas ajudar a consumir Markdown, mas também a aprendê-lo e refiná-lo. O editor dedicado aproxima o produto de um ambiente de trabalho individual para documentos.

Também há um sinal claro de posicionamento educacional: a referência e os comandos foram pensados para reduzir fricção de sintaxe, não só para acelerar usuários experientes.

Limitações e comportamento implícito

não existe persistência automática em arquivo local;
a edição afeta apenas o documento carregado na sessão;
os comandos são baseados em snippets e padrões de linha, não em compreensão estrutural profunda;
não há versionamento, diff ou histórico de alterações;
não há colaboração multiusuário;
o produto segue otimizado para revisão e ajustes editoriais, não para substituir um IDE.

Papel da feature no produto

Esta feature amplia o ciclo de uso do Sanctuary. O produto deixa de ser apenas o lugar onde se lê o documento e passa a ser também o lugar onde se faz a última milha: ajustar, validar visualmente, aprender sintaxe, aplicar no reader e exportar.