Editor de Markdown | Sutram Blog

O Editor de Markdown do Sutram permite criar e editar documentos de texto formatado diretamente no navegador. É um editor visual (WYSIWYG) onde você vê o resultado final enquanto edita, sem precisar conhecer a sintaxe markdown.

Criando um Arquivo Markdown

Navegue até uma pasta no seu projeto
Clique no menu ⋮ (três pontos) no canto superior direito
Selecione Adicionar Arquivo Markdown
Digite um nome para o arquivo
O editor abre automaticamente com o título já inserido

Nota: Esta opção só aparece dentro de pastas (não na raiz do projeto) e requer um plano PRO ou superior.

Editando um Arquivo Existente

Clique em qualquer arquivo .md na lista de conteúdo
Na visualização, clique no botão Editar ou no ícone de expandir
O editor abre com o conteúdo atual do arquivo

Importante: Para editar, você precisa fazer o "check-out" do arquivo. Isso reserva o arquivo para você, evitando que outras pessoas editem ao mesmo tempo.

Barra de Ferramentas

A barra de ferramentas fica no topo do editor. Cada botão aplica uma formatação específica.

Formatação de Texto

Botão	Nome	Comportamento
B	Negrito	Toggle - Clique uma vez para ativar, clique novamente para desativar. Funciona com texto selecionado ou na posição atual do cursor. Atalho: `Ctrl+B` (Windows) ou `Cmd+B` (Mac)
I	Itálico	Toggle - Funciona igual ao negrito. Atalho: `Ctrl+I` ou `Cmd+I`
S	Tachado	Toggle - Adiciona ou remove linha sobre o texto selecionado
`<>`	Código inline	Toggle - Formata o texto como código (fonte monoespaçada)

Títulos

Botão	Nome	Comportamento
H1	Título 1	Toggle - Transforma a linha atual em título grande. Se já for H1, volta a ser parágrafo normal
H2	Título 2	Toggle - Título médio. Se já for H2, volta a ser parágrafo
H3	Título 3	Toggle - Título pequeno. Se já for H3, volta a ser parágrafo

Dica: Posicione o cursor em qualquer linha e clique H1, H2 ou H3 para transformá-la em título.

Listas

Botão	Nome	Comportamento
•	Lista com marcadores	Toggle - Cria uma lista com pontos. Clique novamente para voltar a parágrafo
1.	Lista numerada	Toggle - Cria uma lista numerada automaticamente

Criando subitens: Dentro de uma lista, pressione Tab para criar um subitem (recuar) ou Shift+Tab para voltar ao nível anterior.

Blocos Especiais

Botão	Nome	Comportamento
"	Citação	Toggle - Cria um bloco de citação (com barra lateral). Útil para destacar trechos importantes
`[ ]`	Bloco de código	Inserção - Cria uma área para código com múltiplas linhas

Tabelas

O botão de tabela (ícone de grade) abre um menu dropdown com todas as opções para criar e editar tabelas.

Opção	Comportamento
Inserir tabela	Cria uma tabela 3x3 na posição do cursor
Adicionar linha acima	Insere uma nova linha acima da linha atual
Adicionar linha abaixo	Insere uma nova linha abaixo da linha atual
Adicionar coluna à esquerda	Insere uma nova coluna à esquerda da coluna atual
Adicionar coluna à direita	Insere uma nova coluna à direita da coluna atual
Excluir linha	Remove a linha onde o cursor está
Excluir coluna	Remove a coluna onde o cursor está
Excluir tabela	Remove a tabela inteira

Como usar tabelas:

Criar uma tabela: Clique no botão de tabela e selecione "Inserir tabela". Uma tabela 3x3 será criada.
Editar células: Clique em qualquer célula e digite o conteúdo. Use Tab para mover para a próxima célula ou Shift+Tab para voltar.
Adicionar linhas/colunas: Posicione o cursor na célula de referência, clique no botão de tabela e escolha onde adicionar (acima, abaixo, esquerda ou direita).
Excluir linhas/colunas: Posicione o cursor na linha ou coluna que deseja remover, clique no botão de tabela e escolha "Excluir linha" ou "Excluir coluna".
Excluir tabela inteira: Com o cursor em qualquer célula da tabela, clique no botão de tabela e escolha "Excluir tabela".

Dica: A primeira linha da tabela é automaticamente formatada como cabeçalho (texto em negrito com fundo destacado).

Links e Mídia

Botão	Nome	Comportamento
🔗 (globo)	Link externo	Inserção - Abre uma caixa para digitar uma URL. Cria um link clicável no texto
🔗 (corrente)	Link da web do projeto	Seleção - Mostra os links da web salvos na pasta atual para você escolher
🖼️ (paisagem)	Imagem de URL	Inserção - Abre uma caixa para colar o endereço de uma imagem da internet
🖼️ (pasta)	Imagem do projeto	Seleção - Mostra as imagens da pasta atual para você escolher e inserir
📹	Vídeo do projeto	Seleção - Mostra os links de vídeo da pasta atual (YouTube, Vimeo, etc.)
🎵	Áudio do projeto	Seleção - Mostra os links de áudio da pasta atual (SoundCloud, Spotify, etc.)

Como Inserir Links e Mídia

Link externo (URL qualquer):

Selecione o texto que será o link (opcional)
Clique no botão do globo
Digite ou cole a URL
Se não selecionou texto, digite o texto do link

Link da web do projeto:

Clique no botão da corrente
Uma lista mostra os links salvos na pasta
Clique no link desejado para inserir

Imagem do projeto:

Clique no botão da pasta com imagem
Uma lista mostra as imagens da pasta
Clique na imagem desejada para inserir

Vídeo ou áudio:

Clique no botão de vídeo ou áudio
Escolha da lista de mídias da pasta
O link é inserido no documento

Como Excluir Links e Mídia

Para remover um link, imagem, vídeo ou áudio inserido:

Posicione o cursor no final do link/mídia
Pressione Backspace (ou Delete) para apagar caractere por caractere
Ou selecione todo o elemento (clique e arraste) e pressione Delete ou Backspace

Dica: Para links de texto, você pode também selecionar o texto do link e simplesmente digitar algo novo para substituí-lo.

Salvamento Automático

O editor salva seu trabalho automaticamente a cada 60 segundos, desde que haja alterações não salvas. Você verá um indicador "Salvando..." brevemente quando isso acontecer.

Importante: O salvamento automático salva um rascunho. Para que outras pessoas vejam suas alterações, você precisa publicar o arquivo.

Publicando Alterações

Quando terminar de editar:

Clique no botão Finalizar Edição (canto superior direito)
O arquivo é publicado e liberado para outros usuários
Suas alterações ficam visíveis para toda a equipe

Nota: Se você sair do editor sem finalizar, suas alterações ficam salvas como rascunho, mas o arquivo permanece reservado para você (check-out).

Assistente de IA para Seções

O editor inclui um assistente de inteligência artificial que pode ajudar a melhorar, resumir ou expandir seções do seu documento. As ações de IA estão disponíveis em qualquer título (H1, H2, H3, etc.).

Como Acessar

Existem duas formas de acessar as ações de IA:

Clique direito em um título: Um menu de contexto aparece com as opções disponíveis
Botão no título: Ao passar o mouse sobre um título, um botão ⋮ aparece à direita. Clique nele para ver as opções

Ações Disponíveis

Ação	Descrição
Resumir Seção	Condensa o conteúdo da seção, mantendo os pontos principais
Expandir Seção	Adiciona mais detalhes e profundidade ao conteúdo existente
Melhorar Seção	Melhora a qualidade da escrita (clareza, fluidez, gramática)
Gerar Resumo Executivo	Cria um resumo de alto nível do documento (disponível apenas em títulos H1)
Excluir Seção	Remove a seção e todo seu conteúdo (não usa IA)

Fluxo de Uso

Escolha uma ação: Clique direito no título ou use o botão ⋮ e selecione a ação desejada
Aguarde o processamento: Um indicador de carregamento aparece enquanto a IA processa. Você pode cancelar a qualquer momento
Revise o resultado: Um painel de comparação mostra o texto original (à esquerda) e a sugestão da IA (à direita), lado a lado
Decida: Clique em Aplicar para aceitar a sugestão ou Cancelar para descartá-la

Nenhuma alteração é feita sem sua aprovação. Você sempre visualiza o resultado antes de aplicar.

Resumo Executivo (TLDR)

A ação "Gerar Resumo Executivo" funciona de forma diferente das demais:

Disponível apenas em títulos H1
Em vez de substituir o conteúdo, insere uma nova seção logo abaixo do H1
O título da seção é localizado no idioma do documento (ex: "Resumo Executivo (TLDR)" em português)

Excluir Seção

A exclusão de seção não usa IA e funciona assim:

Uma janela de confirmação mostra o conteúdo que será removido
Clique em Excluir Seção para confirmar ou Cancelar para manter

Atenção: A exclusão remove a seção inteira (título e todo conteúdo até o próximo título). Esta ação não pode ser desfeita diretamente — use o botão Desfazer (versão anterior) para restaurar o documento.

Botão Desfazer (Versão Anterior)

O botão Desfazer aparece quando existe uma versão anterior do arquivo. Clicar nele:

Restaura a versão anterior completa do arquivo
A versão atual vira o novo backup

Atenção: Este desfazer restaura o arquivo inteiro para a versão anterior, não apenas a última digitação. Para desfazer digitação recente, use Ctrl+Z (Windows) ou Cmd+Z (Mac).

Baixando o Arquivo

Na lista de conteúdo, clique no menu ⋮ do arquivo markdown para ver as opções:

Baixar: Baixa apenas o arquivo .md
Baixar com imagens: Baixa um arquivo ZIP contendo o markdown e todas as imagens do Sutram que estão no documento. Os links das imagens são convertidos para caminhos relativos, tornando o pacote portátil.

Nota: A opção "Baixar com imagens" só aparece para arquivos publicados. Se não houver imagens do Sutram no documento, uma mensagem informará que você deve usar a opção de download normal.

Atalhos de Teclado

Atalho	Ação
`Ctrl/Cmd + Z`	Desfazer última digitação
`Ctrl/Cmd + Shift + Z`	Refazer
`Ctrl/Cmd + B`	Negrito
`Ctrl/Cmd + I`	Itálico
`Enter`	Novo parágrafo
`Shift + Enter`	Quebra de linha (mesmo parágrafo)
`Tab`	Recuar item de lista
`Shift + Tab`	Remover recuo de item de lista

Modo Comentários

O editor de markdown inclui um modo de comentários integrado que permite visualizar, gerenciar e reposicionar marcadores de comentários enquanto edita o documento.

Dois Modos de Operação

O editor alterna entre dois modos:

Modo	Descrição
Edição (padrão)	Editor WYSIWYG Milkdown normal, sem marcadores visíveis
Comentários	Preview renderizado com overlay de comentários e painel lateral

Acessando o Modo Comentários

No editor, clique no botão Comentários no cabeçalho (ao lado do botão "Enviar")
O badge mostra a quantidade de comentários existentes (ex: "8")
O editor muda para o modo de visualização com os marcadores visíveis
Para voltar ao modo de edição, clique novamente no botão Comentários

Restrição: O modo comentários não está disponível em dispositivos móveis pequenos (viewport < 768px). Funciona em tablets (iPad, Android) e desktops. Um tooltip no botão desabilitado explica: "Use um computador desktop para gerenciar comentários".

Layout do Modo Comentários

┌─────────────────────────────────────────────────────────────────┐
│  ← Voltar         [💬 Comentários 8]    [Enviar]      │ Cabeçalho │
├─────────────────────────────────────┬───────────────────────────┤
│                                     │ 💬 3 comentários          │
│   Preview do Markdown               │ ─────────────────────────│
│   (somente leitura)                 │ ◉ Todos ○ Abertos ○ Resol.│
│                                     │ ─────────────────────────│
│        📍 Marcador 1                │ [1] João · 2h atrás       │
│                                     │     Verificar esta seção  │
│        📍 Marcador 2                │     "trecho do texto..."  │
│                                     │     [Ir para]             │
│                                     │ ─────────────────────────│
│                                     │ [2] Maria · 1d atrás  ✅  │
│                                     │     Corrigido             │
└─────────────────────────────────────┴───────────────────────────┘

Funcionalidades do Painel de Comentários

O painel lateral direito oferece:

Funcionalidade	Descrição
Filtros	Todos / Abertos / Resolvidos
Lista de comentários	Todos os comentários do documento com autor, data e preview do texto selecionado
Ir para	Rola a visualização até o marcador correspondente
Abrir thread	Clique no comentário para ver respostas e interagir

Resolvendo Comentários

No modo comentários, você pode resolver discussões diretamente:

Clique em um comentário no painel ou no marcador no documento
O modal de thread abre mostrando o comentário original e respostas
Clique em "Marcar como resolvido" para indicar que a questão foi tratada
O marcador muda de roxo (aberto) para verde (resolvido)
O comentário pode ser filtrado pela aba "Resolvidos"

Para reabrir um comentário resolvido, abra a thread e clique em "Reabrir".

Diferença entre Visualizador e Editor

Aspecto	Visualizador (Preview Modal)	Editor (Modo Comentários)
Criar comentários	✅ Seleciona texto para comentar	❌ Não disponível
Ver comentários	✅ Marcadores visíveis	✅ Marcadores visíveis
Resolver/Responder	✅ Via modal de thread	✅ Via modal de thread
Editar conteúdo	❌ Somente leitura	✅ No modo Edição

Fluxo recomendado:

Visualizador: Use para criar novos comentários (selecionar texto)
Editor - Modo Edição: Use para editar o conteúdo markdown
Editor - Modo Comentários: Use para revisar e resolver comentários existentes

Dicas Úteis

Organize com títulos: Use H1 para o título principal, H2 para seções e H3 para subseções. Isso facilita a leitura.
Salve regularmente: Embora haja salvamento automático, você pode clicar em "Finalizar Edição" a qualquer momento para publicar.
Aviso de saída: Se tentar sair da página com alterações não salvas, o navegador mostrará um aviso.
Imagens do projeto: Prefira usar imagens já enviadas ao projeto. Elas ficam armazenadas de forma segura e podem ser baixadas junto com o documento.
Links de mídia: Para vídeos e áudios, primeiro adicione o link na pasta usando "Adicionar link de vídeo" ou "Adicionar link de áudio", depois insira no documento.
Resolva antes de publicar: Antes de finalizar a edição, verifique no modo Comentários se há discussões abertas que precisam ser resolvidas ou respondidas.