Back to Documentation

Markdown Editor

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

  1. Navegue até uma pasta no seu projeto
  2. Clique no menu ⋮ (três pontos) no canto superior direito
  3. Selecione Adicionar Arquivo Markdown
  4. Digite um nome para o arquivo
  5. 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

  1. Clique em qualquer arquivo .md na lista de conteúdo
  2. Na visualização, clique no botão Editar ou no ícone de expandir
  3. 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:

  1. Criar uma tabela: Clique no botão de tabela e selecione "Inserir tabela". Uma tabela 3x3 será criada.

  2. 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.

  3. 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).

  4. 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".

  5. 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):

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

Link da web do projeto:

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

Imagem do projeto:

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

Vídeo ou áudio:

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

Como Excluir Links e Mídia

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

  1. Posicione o cursor no final do link/mídia
  2. Pressione Backspace (ou Delete) para apagar caractere por caractere
  3. 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:

  1. Clique no botão Finalizar Edição (canto superior direito)
  2. O arquivo é publicado e liberado para outros usuários
  3. 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:

  1. Clique direito em um título: Um menu de contexto aparece com as opções disponíveis
  2. 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

  1. Escolha uma ação: Clique direito no título ou use o botão ⋮ e selecione a ação desejada
  2. Aguarde o processamento: Um indicador de carregamento aparece enquanto a IA processa. Você pode cancelar a qualquer momento
  3. Revise o resultado: Um painel de comparação mostra o texto original (à esquerda) e a sugestão da IA (à direita), lado a lado
  4. 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:

  1. Uma janela de confirmação mostra o conteúdo que será removido
  2. 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:

  1. Restaura a versão anterior completa do arquivo
  2. 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

  1. No editor, clique no botão Comentários no cabeçalho (ao lado do botão "Enviar")
  2. O badge mostra a quantidade de comentários existentes (ex: "8")
  3. O editor muda para o modo de visualização com os marcadores visíveis
  4. 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:

  1. Clique em um comentário no painel ou no marcador no documento
  2. O modal de thread abre mostrando o comentário original e respostas
  3. Clique em "Marcar como resolvido" para indicar que a questão foi tratada
  4. O marcador muda de roxo (aberto) para verde (resolvido)
  5. 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:

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

Dicas Úteis

  1. Organize com títulos: Use H1 para o título principal, H2 para seções e H3 para subseções. Isso facilita a leitura.

  2. Salve regularmente: Embora haja salvamento automático, você pode clicar em "Finalizar Edição" a qualquer momento para publicar.

  3. Aviso de saída: Se tentar sair da página com alterações não salvas, o navegador mostrará um aviso.

  4. Imagens do projeto: Prefira usar imagens já enviadas ao projeto. Elas ficam armazenadas de forma segura e podem ser baixadas junto com o documento.

  5. 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.

  6. 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.

Back to Documentation