Apresentamos nosso novo compositor, facilitando a escrita no Discourse como nunca antes

[lindsey (Lindsey Fogle)]

Um dos nossos principais projetos este ano foi desenvolver um novo modo de edição de texto rico para o compositor, tornando a escrita no Discourse mais familiar e intuitiva. O novo compositor já 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 a etiqueta experimental e convidar sua comunidade a experimentá-lo!

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

Um novo editor de texto rico para o Discourse

O novo editor de texto rico simplifica a experiência de escrita para os usuários do Discourse, especialmente aqueles com menos familiaridade tecnológica ou que não estão acostumados ou confortáveis escrevendo em Markdown. O editor de texto rico suporta Markdown, além de 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.

O futuro do Markdown

Sabemos que muitos usuários do Discourse amam o atual compositor Markdown e apreciam sua experiência de escrita previsível e direta. O novo editor é um “modo” de compositor que coexiste com o modo Markdown existente, permitindo que seus membros escolham o estilo de escrita que melhor funcione para eles.

A maioria das coisas que você fazia no clássico compositor Markdown agora é suportada no editor de texto rico, incluindo:

• Toda a formatação básica, suportada em Markdown (**negrito**), usando atalhos de teclado comuns (<kbd>Command</kbd> + <kbd>B</kbd>) e ícones da barra de ferramentas.
  

  

• Suporte a recursos avançados, como criar tabelas, criar enquetes, inserir data/hora, adicionar seções de detalhes ocultos, adicionar seções de spoiler desfocadas, fazer upload de arquivos/imagens/vídeos, renderizar links como oneboxes, estilizar menções a categorias/tags/usuários, citar conteúdo e inserir notas de rodapé.

• Interface dedicada para links, permitindo visitar, editar, copiar, definir título ou remover links
  

  

• Interface dedicada para imagens, permitindo redimensionar, adicionar legendas ou excluir imagens
  

  

No entanto, ainda há algumas áreas em que estamos trabalhando, como facilitar a edição de tabelas e enquetes. Continuaremos a buscar paridade de recursos entre os modos do compositor e incentivamos você a compartilhar solicitações de recursos na tag Contribute sobre quais funcionalidades e capacidades são mais importantes para você, ajudando-nos a priorizar nosso trabalho. Enquanto isso, você sempre pode alternar de volta para o modo Markdown para atender a necessidades avançadas.

Como construímos isso

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

Ativando o novo compositor

O editor rico está habilitado por padrão para todas as comunidades. Quando você ou seus membros abrirem o compositor, notará um interruptor na barra de ferramentas. Isso permite alternar entre o modo clássico apenas Markdown e o novo editor de texto rico.

---

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

@lindsey

Recentemente, adicionamos uma nova configuração que permite controlar qual editor é exibido por padrão em sua comunidade: Escolhendo o modo de compositor padrão para sua comunidade

[volanar]

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

[Jonathan5]

@lindsey

procure por Rich editor. Verifique a configuração para ativá-lo

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

[sam (Sam Saffron)]

@Jonathan5

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

Ainda não, mas planejamos adicionar uma.

[Kartoon]

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?

[MarkDoerr]

@lindsey

Interface de imagem dedicada para redimensionar, legendar ou excluir imagens

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

[awesomerobot (Kris)]

@Kartoon

o que não parece estar aqui neste site, mas está no meu

é 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)

@Kartoon

Eu também não vejo a “interface de imagem” na postagem?

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

[sam (Sam Saffron)]

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

[alltiagocom (Tiago)]

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.

[JonLewit]

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.

---

[renato (Renato Atilio)]

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

[TomoftheFog (Tom)]

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.

[renato (Renato Atilio)]

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

[Don]

Olá Obrigado, isso é muito legal

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

[renato (Renato Atilio)]

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?

[Ethsim2 (Ethan)]

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

---

@Don

[wrap]Hello[/wrap]

---

torna-se

---

Hello

[Don]

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.

@Ethsim2

onde você viu essa mensagem de erro?

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

[Ethsim2 (Ethan)]

@Don

@Ethsim2

onde você viu essa mensagem de erro?

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

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

[renato (Renato Atilio)]

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

[Jagster (Jakke Flemming)]

@alltiagocom

Eu não sou fã da nova fonte monoespaçada

Isso funcionaria para você:

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