Um editor Markdown visual para o Standard Notes, com a nota guardada como Markdown puro

Também disponível em inglês: A visual Markdown editor for Standard Notes, with the note kept as plain Markdown.

Depois do cliente de API e do quadro Kanban, este é o terceiro plugin do conjunto: o StandardNotes-Milkdown, um editor Markdown visual para o Standard Notes, feito sobre o Milkdown Crepe.

A ideia é a mesma dos outros dois: a nota continua sendo texto puro. O plugin só muda a forma de editá-la, então a nota segue legível, pesquisável e exportável, e é criptografada de ponta a ponta como o resto dos seus dados.

A nota da imagem é a que o botão Add sample cria em uma nota vazia: um tour do que o editor sabe desenhar, com front matter, sumário, listas e tarefas, os cinco alertas, uma tabela, código, matemática, diagramas e uma imagem.

O que tem

Edição visual de todo o conjunto do Markdown sem ver o código-fonte: títulos, listas, listas de tarefas, tabelas, links, imagens, citações e blocos de código com realce de sintaxe. Uma barra flutuante sobre a seleção, um menu / e alças de arrastar adicionam e movem blocos.

Além disso:

Matemática com KaTeX, em fórmulas $inline$ e blocos $$.
Diagramas Mermaid: um bloco ```mermaid mostra uma pré-visualização ao vivo, enquanto a nota guarda o código. Os diagramas acompanham uma mudança de tema do app sem precisar reabrir a nota.
Uma linha [TOC] que desenha um sumário ao vivo, e um painel de estrutura com os títulos da nota para navegar em notas longas.
Localizar e substituir, com as ocorrências destacadas e uma contagem como 2/7.
Um modo foco, que escurece todos os blocos menos o do cursor.
Uma barra de formatação fixa opcional, no topo ou embaixo, com contagem de palavras e tempo de leitura.
Copy as Markdown, Print e Export as HTML na barra de ícones. A impressão mostra só a nota renderizada, e a exportação a salva como uma página própria.

Imagens enviadas, coladas ou soltas ficam embutidas na nota. Até 500 KB entram como estão, e as maiores são reduzidas e recomprimidas, já que a nota sincroniza com todos os dispositivos.

Três modos

A barra de ícones no topo alterna entre Visual, Split e Source. O Split põe o código Markdown ao lado do editor visual, lado a lado ou empilhados, e o Source é um painel CodeMirror simples para ajustes finos.

O modo Split. À esquerda, o código Markdown da nota, com o front matter, os títulos e a linha [TOC] como texto. À direita, a mesma nota desenhada pelo editor visual, com o sumário e a seção "Text and links". A barra de ícones mostra "310 words · 2 min"

A barra de ícones flutua no topo, centralizada, e se recolhe com o botão >, deixando só um pequeno < no canto para trazê-la de volta. As escolhas de layout são salvas com o editor na sua conta do Standard Notes. Em telas estreitas o Split empilha os painéis, e abaixo de 520 px as ações secundárias vão para um menu ....

A nota continua sendo Markdown

O corpo da nota é CommonMark mais GitHub Flavored Markdown: tabelas, listas de tarefas e texto riscado.

# Shopping

- [x] bread
- [ ] coffee

| Item  | Price |
| ----- | ----- |
| bread | 2.50  |

> [!NOTE]
> Everything stays in the note as plain text.

Energy: $E = mc^2$

```mermaid
graph LR
  Idea --> Draft --> Done
```

Nada é guardado fora da nota, então abrir a mesma nota com o editor nativo mostra o conteúdo idêntico. Abrir uma nota nunca a reescreve, e nada é salvo até você editar.

A primeira edição é onde o editor deixa sua marca: ele reescreve a nota inteira no formato que o editor visual produz. As mudanças visíveis são pequenas:

Marcadores de lista * viram -.
Títulos no estilo setext (Title sobre =====) viram # Title, e uma linha horizontal --- vira ***.
Tabelas são alinhadas com espaços e a linha de alinhamento é reescrita.
Links por referência viram links inline, e a definição [1]: url some.

O que o editor mantém exatamente como foi escrito é a lista que importa para notas importadas: front matter YAML e TOML, alertas do GitHub, [[wiki links]], notas de rodapé, HTML inline, matemática inline e a linha [TOC]. Notas vindas do GitHub, do Obsidian, do Jekyll ou do Hugo não são reescritas.

Um limite conhecido: o Crepe guarda a proporção de redimensionamento de uma imagem no texto alternativo, então redimensionar uma imagem que tem alt troca o alt pela proporção, por exemplo ![0.50](https://...).

Instalação

No Standard Notes (web ou desktop), abra Preferences, depois Plugins.
No fim da página, cole a URL abaixo em Install Custom Plugin:
```
https://esli.cafe/StandardNotes-Milkdown/ext.json
```
Crie uma nota, abra o menu Editor e escolha Milkdown.

O app consulta essa URL em busca de atualizações, então as novas versões chegam sozinhas. Funciona nos apps web, desktop e mobile e segue o tema selecionado no app.

Privacidade e peso

O editor não tem recursos de IA nem acesso à rede por conta própria. O único conteúdo remoto que ele carrega são as imagens ligadas por URL na nota, e o Mermaid desenha os diagramas no nível de segurança estrito.

O custo é o tamanho: o pacote principal tem cerca de 390 KB com gzip. O KaTeX, com cerca de 80 KB com gzip, carrega em um pacote próprio na abertura, o Mermaid só quando a nota tem um diagrama, e as linguagens dos blocos de código sob demanda.

Se o editor falhar ao renderizar, o texto bruto da nota continua disponível e editável em uma área de texto simples, e as edições ainda são salvas.

A versão atual é a v0.7.1, licença AGPL-3.0. O código está em github.com/Esl1h/StandardNotes-Milkdown. Foi construído sobre o editor-kit do Standard Notes e sobre o Milkdown, que tem licença MIT.