Apresentando nosso novo compositor, tornando a escrita no Discourse mais fácil do que nunca

Um dos nossos principais projetos este ano tem sido o desenvolvimento de um novo modo de edição de rich text para o compositor, que torna a escrita no Discourse mais familiar e intuitiva. O novo compositor está disponível aqui no Meta e como uma configuração experimental há algum tempo, mas chegamos ao ponto em que estamos animados para remover o rótulo experimental e convidar sua comunidade para experimentá-lo!

Neste tópico, compartilharemos mais sobre o compositor, como ele funciona e como você pode disponibilizá-lo em sua comunidade com apenas alguns cliques.

:writing_hand: Um novo editor de rich text para Discourse

O novo editor de rich text simplifica a experiência de escrita para usuários do Discourse, especialmente aqueles que são menos experientes em tecnologia ou não estão familiarizados ou confortáveis com a escrita em Markdown. O editor de rich text suporta Markdown, bem como outros atalhos de teclado comuns e ajustes de formatação na barra de ferramentas, mas a formatação é renderizada imediatamente para uma experiência WYSIWYG (“o que você vê é o que você obtém”), semelhante a ferramentas familiares como Google Docs e Notion.

:thought_balloon: O futuro do Markdown

Sabemos que muitos usuários do Discourse amam o compositor Markdown atual e apreciam sua experiência de escrita previsível e direta. O novo editor é um “modo” de compositor que fica ao lado do modo Markdown existente, para que você e seus membros possam escolher o estilo de escrita que funciona melhor para vocês.

A maioria das coisas que você tem feito no compositor Markdown clássico agora são suportadas no editor de rich text, incluindo:

  • Toda a formatação básica, suportada em Markdown (**negrito**), usando atalhos de teclado comuns (Command + B) e através de ícones na barra de ferramentas.

  • Suporte para recursos avançados como criação de tabelas, criação de enquetes, inserção de data/hora, adição de seções de ocultar detalhes, adição de seções de spoiler com desfoque, upload de arquivo/imagem/vídeo, renderização de links como oneboxes, estilização de menções de categoria/tag/usuário, citação de conteúdo e inserção de notas de rodapé.

  • UI de link dedicada para visitar, editar, copiar, titular ou remover links

  • UI de imagem dedicada para redimensionar, legendar ou excluir imagens

No entanto, há algumas áreas em que ainda estamos trabalhando, como facilitar a edição de tabelas e enquetes. Continuaremos a trabalhar para a paridade de recursos entre os modos do compositor e encorajamos você a compartilhar solicitações de Feature sobre quais recursos e capacidades são mais importantes para você, para nos ajudar a priorizar nosso trabalho. Enquanto isso, você sempre pode voltar ao modo Markdown para cuidar de necessidades avançadas.

:hammer: Como construímos

Nossa implementação se baseia no excelente ProseMirror e em seu módulo Markdown não principal, usando o esquema, análise e definições de serialização do módulo como base para recursos adicionais específicos do Discourse.

:gear: Ativando o novo compositor

O editor rico está ativado por padrão para todas as comunidades. Quando você ou seus membros abrirem o compositor, notarão um alternador na barra de ferramentas. Isso permite que você alterne entre o modo clássico somente Markdown e o novo editor de rich text.

CleanShot 2025-06-11 at 15.45.35


Atualização: se você prefere que seus membros vejam o compositor Markdown por padrão:

45 curtidas

Ótimas notícias. Existe algum recurso no roadmap que já esteja presente em todos os editores ricos? Texto colorido? Como o markdown não suporta texto colorido, isso pode ser alcançado usando add-ons de CSS. Alternativamente, pode haver outras opções que desconhecemos.

3 curtidas

Existe uma configuração para qual editor é o padrão depois disso? Obrigado.

4 curtidas

Ainda não, mas planejamos adicionar uma.

12 curtidas

Ao pressionar o botão “tamanho do texto” (que não parece estar aqui neste site, mas está no meu) você recebe este erro

Também não vejo a “UI de imagem” na postagem?

Estive esperando ansiosamente pela opção de dimensionamento de imagem e adoro a simplicidade disso!

8 curtidas

é uma personalização que precisaria ser atualizada para ser compatível com o novo editor, talvez você esteja usando um componente de tema como Composer Button Bonanza? (provavelmente existem outros)

você atualizou o Discourse recentemente? se sim, você tem que clicar na imagem no composer para vê-la

3 curtidas

Eu acho que este pode ser o plugin bbcode oficial, eu me lembro que ele tinha todo tipo de coisas nele como suporte a cores e tamanho

4 curtidas

Minhas sugestões:

  1. Gosto de escrever com markdown (talvez eu só tenha me acostumado?), mas quando uso a versão markdown, não gosto da nova fonte monoespaçada, então, para mim, não faz sentido incluir o editor rico na minha comunidade (já que provavelmente serei o que mais escreve). Dito isso, isso poderia ser uma configuração que um usuário poderia ativar/desativar. Por exemplo, se eu desativar, sempre recebo apenas a versão markdown, então mantenho a fonte “normal” (não a monoespaçada). Se eu ativar, então recebo o que foi implementado. Como administrador, posso ativá-lo para a comunidade, mas cada usuário pode ativar/desativar. Ou então, cada usuário poderia decidir qual fonte usar na versão markdown.
  2. Acho um pouco distrativo que, quando o editor rico está ativado, todo o compositor é redimensionado e movido. Especialmente se eu for usar ambas as versões de forma intercambiável (eu sei que vou), ter a janela redimensionada sempre que clico no alternador, me parece distrativo. Entendo que com o editor rico não precisamos do painel de visualização extra à direita, mas ainda assim… talvez esse espaço pudesse ser usado para outra coisa?
  3. Este é apenas um detalhe menor, mas se o redimensionamento for mantido, parece estranho que o compositor esteja alinhado ao meio da página, mas em comparação com a área do tópico, não está alinhado e, portanto, parece estranho aos meus olhos:

Ainda não estou convencido de que usarei este recurso, para ser honesto. Posso ver como ele pode eventualmente ser útil, mas no momento sempre tenho aquela sensação de “coceira” sempre que penso em usá-lo.

4 curtidas

Um usuário tentou usar um código HTML e ele não foi renderizado no modo WYSIWYG - tudo o que aconteceu foi que o texto HTML foi colocado em uma caixa. Ao voltar para o markdown, você vê o resultado correto no painel de visualização. Ele deveria mostrar os resultados do HTML ou você precisa voltar para o markdown para uma pré-visualização? por exemplo:


Artigo da Wiki em construção

Por favor, permita que o criador trabalhe nisso conforme puder. Sinta-se à vontade para oferecer ajuda ou conselhos respondendo, mas por favor, não edite sem permissão.


2 curtidas

Isso é intencional, o suporte complexo a HTML é feito apenas através do bloco HTML “passthrough”, como você viu. Escrever HTML, embora parcialmente suportado em elementos como <kbd>, não é esperado que seja totalmente suportado no novo editor de forma visual, daí o editor de HTML.

Dito isso, se considerarmos este HTML.

<hr>
<H2 style="color:red;">Wiki article under construction</H2>
<p> Please allow the creator to work on this as they are able.  You are free to offer help or advice by replying, but please do not edit it without permission.</p>
<hr>

O style é removido pelo sanitizer, por que não escrevê-lo assim:

---
## Wiki article under construction

Please allow the creator to work on this as they are able.  You are free to offer help or advice by replying, but please do not edit it without permission.
---
2 curtidas

Tenho testado o novo editor em nosso fórum e gostei muito, mas durante os testes encontrei um comportamento estranho que não sei se é intencional ou não.

Ao citar alguém usando o editor antigo, o layout fica bom e o cursor aparece abaixo da citação:

No entanto, ao usar o novo editor por padrão ou ao alterá-lo durante a composição de uma resposta, o cursor salta automaticamente para o final do texto citado:

Se você digitar algo, isso será contado como parte da citação e, ao tentar responder, o erro de postagem aparecerá:

Se isso for o padrão, podemos informar nossos usuários, apenas queria ter certeza se é o novo comportamento ao citar usuários com o novo editor.

Obrigado.

1 curtida

Não é intencional, temos uma tarefa interna para melhorar esse comportamento em particular.

3 curtidas

Olá :waving_hand: Obrigado, isso é muito legal :heart_eyes:

Notei que ainda não suportava a tag [wrap]Hello[/wrap] e recebi esta mensagem ao tentar usá-la.

Token type wrap_open not supported by Markdown parser

2 curtidas

Não acho que haja um plano para suportar um nó genérico de “wrap”, como seria? Apenas um div?

Ou existe um \[wrap=algo\] que você espera usar com o novo compositor?

2 curtidas

onde você viu essa mensagem de erro? Minha instância simplesmente descarta o BBcode



torna-se


Hello

Usamos alguns componentes de tema como Discourse Icon e Discourse Stickers.

Acho que posso fazer o componente de sticker sem wrapper, pois é apenas para o alvo e adicionar algum estilo ao sticker.

Cole no lado do Editor de Rich Text ou mude do lado do Markdown se você colou lá.

2 curtidas

eu não recebo o erro, mas o BBcode permanece lá. Não há pré-visualização na área de trabalho, quando o editor de rich text é selecionado



isso foi no hash de commit do Discourse último-release +269

e

hash de commit do BBcode 1fbff6b1

Isso está funcionando como pretendido, o BBCode digitado é intencionalmente escapado (= mostrado como texto) se não for reconhecido/implementado ainda, o que é o caso.

Isso funcionaria para você:

.d-editor-container .d-editor-textarea-wrapper textarea.d-editor-input {
    font-family: var(--font-family);
}

3 curtidas