Teste o nosso novo compositor!

Estamos trabalhando em um novo modo de editor de rich text para nosso composer, para que seja mais fácil escrever no Discourse. Agora estamos prontos para começar a testá-lo e obter mais feedback de nossa comunidade sobre este recurso!

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

Este tópico servirá como um guia para testar o novo composer e um hub para rastrear feedback. Agradecemos antecipadamente por toda a sua ajuda! :sparkling_heart:

:gear: Usando o novo composer em sua comunidade

Ainda consideramos o composer experimental, mas você pode começar a usá-lo em sua comunidade habilitando a configuração rich editor:

:writing_hand: Conhecendo o novo composer

O novo composer é um editor de rich text que simplifica a experiência de escrita, especialmente para usuários não técnicos que não se sentem confortáveis com Markdown. Este editor ainda suporta Markdown, mas a formatação é renderizada imediatamente para uma experiência WYSIWYG (“o que você vê é o que você obtém”) que se assemelha a outras ferramentas de composição web modernas (como Notion ou Google Docs).

Para acessar o novo composer, clique no alternador na barra de ferramentas. Isso permitirá que você mude do modo atual apenas com Markdown para o novo editor de rich text. Você pode clicar no alternador novamente para voltar, se necessário.

toggle

O que você está testando hoje é a primeira versão do novo composer. Ele ainda não se destina a ser um substituto completo para o composer atual apenas com Markdown. Nós nos concentramos nos fundamentos primeiro, o que deve cobrir as necessidades da maioria dos usuários.

Por favor, revise as seções abaixo para entender o que é atualmente possível e o que ainda não está pronto no novo composer. Atualizaremos essas áreas ao longo do tempo à medida que o suporte se expandir!

:green_circle: Recursos suportados

Os seguintes recursos são suportados no novo composer:

  • Capacidade de adicionar título e definir categorias e tags
  • Editor de painel único quando no modo de editor de rich text (ou seja, sem painel de visualização)
  • Alternador para alternar entre os modos de editor apenas com Markdown e de rich text
  • Formatação básica [1] suportada em Markdown, atalhos de teclado e ícones da barra de ferramentas
  • Suporte a emoji
  • Conversão automática de Markdown para rich text ao colar texto simples (por exemplo, **negrito**negrito)
  • Conversão automática de emoticons (por exemplo, :):slight_smile: )
  • UI de imagem para redimensionar, legendar ou agrupar imagens adicionadas
  • UI de link para visitar, editar, copiar ou remover links adicionados e alterar seus títulos
  • UI de construtor de tabelas
  • UI de construtor de enquetes
  • Notas de rodapé
  • Suporte para menções e hashtags
  • HTML inline <html> [2]
  • Substituições tipográficas (por exemplo, ™ , → , ± )
  • Uploads de imagens
  • Anexos de arquivos
  • Citações de tópicos e chats
  • Ocultar detalhes
  • Spoiler de desfoque (com limitações, consulte a seção Recursos Ausentes)
  • Oneboxes
  • Autoconversão de regra horizontal (ou seja, digitar --- converte para regra horizontal)

:red_circle: Recursos ausentes

Os seguintes recursos que sabemos que estão faltando atualmente ou ainda não totalmente suportados no novo composer:

  • UI de tabela para adicionar ou remover colunas e linhas após criar a tabela
  • UI de enquete para editar enquetes criadas anteriormente
  • Suporte na barra de ferramentas para adicionar cabeçalhos
  • Suporte aprimorado para Spoiler de desfoque para adicionar desfoque a texto existente, suportar desfoque inline e facilitar a remoção do desfoque.
  • Qualquer outra coisa não explicitamente mencionada na seção de recursos suportados (por exemplo, suporte a diagramas Mermaid)

:mega: Testando e compartilhando seu feedback

Ao testar, você pode encontrar problemas onde o composer não se comporta como esperado. Quando isso acontecer, por favor, nos avise! Seu feedback é um ativo inestimável para nos ajudar a melhorar o novo composer para que ele esteja pronto para ser disponibilizado em sua comunidade.

Por favor, forneça etapas de reprodução específicas, informações sobre seu navegador / dispositivo e quaisquer capturas de tela ou gravações relevantes! Você também pode revisar nosso rastreador de problemas conhecidos abaixo para ver se alguém já relatou o que você está vendo. Manteremos essas seções atualizadas à medida que identificarmos e corrigirmos problemas.

Lembre-se, você sempre pode voltar ao modo apenas com Markdown usando o alternador se estiver encontrando um problema ao usar o novo composer.

:bug: Bugs

  • No Firefox, parece que você não consegue posicionar o cursor antes de uma menção quando ela inicia a postagem (é possível, mas visualmente pouco claro)

:art: Problemas de UX

  • Impedir certas formatações parciais em links para evitar estilização inesperada
  • Aplicar renderização visual / validação esperada para hashtags de categoria, tag e canal de chat
  • Aplicar renderização visual / validação esperada para menções de usuário e grupo
  • O cursor fica focado dentro da citação (em vez da linha abaixo) ao iniciar uma postagem com uma citação ou ao copiar / colar citações

:wrench: Melhorias de desenvolvimento

  • Melhorar o parsing de HTML inline (por exemplo, para <a>)

  1. Negrito, itálico, sublinhado (sem suporte na barra de ferramentas), tachado (apenas Markdown via ~~), links, citações em bloco, código, caixa de seleção (apenas Markdown via [ ]; suporte na barra de ferramentas em breve), listas com marcadores, listas numeradas ↩︎

  2. Alguns convertem para o Markdown mais próximo (por exemplo, s, strike, strong, b, em, i, code; u é especificamente não suportado porque não se converte em um sublinhado real); outros serão permitidos como nós “html_inline” (por exemplo, kbd, sup, sub, small, big, del, ins, mark) ↩︎

71 curtidas

Parece bom!

Existem alguns problemas com as tags de spoiler:

  1. Se você destacar algum texto e escolher “Ocultar Spoiler”, ele substitui o texto por “Este texto será ocultado”, perdendo o que você destacou.

  2. Spoilers em linha não estão funcionando, eles são colocados em uma nova linha.

  3. Não há como desativar um spoiler novamente.

11 curtidas

Obrigado Shaun, anotei no OP que temos mais trabalho a fazer em spoilers.

9 curtidas

Eu estava esperando por esse recurso e é incrível que o Discourse finalmente tenha dado esse passo :clap:

Apenas 1 coisa por enquanto: parece bizarro ter uma área de texto tão estreita para escrever nossa postagem.

Obviamente, eu estava muito acostumado com a visualização lado a lado do compositor e da prévia, mas isso agora parece… Estranho. Talvez eu só precise de tempo. Sim, provavelmente. :smile:

18 curtidas

Progresso fantástico! :heart:
A segunda coisa que notei é que o estilo atual não alterna visualmente (liga e desliga) na barra de ferramentas, embora permaneça em vigor. Seria realmente bom se o estilo atual fosse destacado até ser desativado.

É tudo por agora!

(Baseando meu feedback no tema cinza âmbar)

15 curtidas

Esses são bons pontos — no momento, temos focado principalmente no editor em si (onde você realmente digita), mas temos melhorias planejadas para o contêiner do compositor e a barra de ferramentas que devem resolver esses problemas.

10 curtidas

Um defeito um tanto estranho, mas quando o compositor está aberto, é isso que acontece com o indicador de resposta.

Testarei completamente quando estiver no desktop mais tarde, mas parece promissor.

4 curtidas

Finalmente chegou! :heart_eyes: Muito trabalho foi desdobrado; trabalho fantástico! Isso será um grande ponto positivo para usuários que não se sentem confortáveis com Markdown.

Problema de upload crítico:

Se você estiver carregando uma imagem e mudar para markdown, o markdown de upload não está aqui e gera um erro:
image

Inversamente, ao carregar a partir do markdown, e depois mudar para o novo editor, não há erro, mas a imagem não aparece.

12 curtidas

Eu me pergunto se deveríamos simplesmente bloquear a troca até que o upload seja concluído… podemos potencialmente converter placeholders entre editores, mas isso não parece tão útil.

11 curtidas

Sim, meus pensamentos são os mesmos. Bloquear parece uma boa ideia!
Ao carregar uma imagem grande com uma conexão lenta, não pude deixar de testar o interruptor até que estivesse pronto. :grinning_face_with_smiling_eyes:

11 curtidas

O novo design ficou ótimo. Adoro como o Discourse itera ao longo do tempo, experimenta novas ideias e envolve a comunidade.

Algumas observações subjetivas, se você estiver procurando por feedback:

  • O botão de alinhamento (esquerda/direita) é um ícone não convencional e um recurso que parece muito nichado. Como os ícones se quebram em duas linhas no celular, eu simplesmente removeria esse recurso. Da mesma forma, o recurso “inserir data” é avançado/nichado e poderia ser ocultado no menu :gear:. Dessa forma, os ícones restantes caberiam em uma única linha.
  • O recurso de upload de vídeo foi confuso para mim, mesmo como um usuário técnico. O que eu forneceria na caixa “fonte do vídeo”? Além disso, os botões ficam um pouco desorganizados visualmente (veja abaixo).
  • O botão “M” (alternando entre texto bruto e visualização) não revela seu propósito até que você clique nele. Há algum espaço sobrando na parte inferior do compositor entre os botões :wastebasket: e GIF, e acho que um botão de visualização faria mais sentido aqui. E você teria espaço para a palavra “visualização”.

8 curtidas

Esses são recursos que habilitamos no meta em algum momento, provavelmente para um experimento. Eles não estão disponíveis por padrão e podemos desativá-los ou colocá-los atrás da :gear:

Concordo com isso. Não tenho certeza por que sempre incluímos isso de forma tão proeminente no menu. Eu o uso o tempo todo, mas também uso frequentemente muitos recursos atrás do menu :gear:!

Concordo que, pelo menos, um texto de ajuda ao passar o mouse ajudaria na descoberta aqui.

No futuro, suspeito que queiramos usar o novo compositor por padrão e tornar a alternância para markdown o movimento de poder, que os usuários avançados saberão ou poderão descobrir.

9 curtidas

:megaphone: Estes itens de menu não estão realmente relacionados ao novo compositor, então não precisamos nos concentrar neles aqui. Se as pessoas tiverem mais feedback sobre os itens de menu, por favor, criem novos tópicos Feature ou façam uma pesquisa.

Dito isso:

  • Removi o botão “Inserir vídeo” aqui no meta, que é fornecido através do componente de tema Insert Video.

  • O botão “Alternar direção” depende da configuração do site support mixed text direction que manteremos habilitada no meta porque estamos testando ativamente a funcionalidade multilíngue atualmente.

  • No meta, também temos GIF e Ask AI, aos quais queremos permitir acesso proeminente.

6 curtidas

Parabéns equipe! Notei uma discrepância em relação ao oneboxing. Colar uma URL do navegador gera um onebox, mas digitá-la não. Até você voltar para ver a visualização do markdown, que aciona a geração.

teste: Colando da barra do navegador aqui: https://google.com/ Digitando aqui: https://google.com

6 curtidas

Pressionar Return no novo editor WYSIWYG cria uma quebra de linha dupla (uma quebra de parágrafo). Não gosto disso (embora eu ache que isso é subjetivo), mas especialmente não gosto disso para listas com marcadores/numeradas, onde há muito espaço entre os itens da lista.

  • isso

  • é

  • muito

  • espaço

13 curtidas

Você pode pressionar \u003ckbd\u003eshift\u003c/kbd\u003e + \u003ckbd\u003eenter\u003c/kbd\u003e para evitar a quebra dupla de linha, embora não funcione para listas.
Concordo que essa mudança de comportamento não deve ser o padrão.

7 curtidas

Ótimo trabalho, este é um passo na direção certa! No entanto, ainda tenho alguns problemas básicos de UX que gostaria que fossem resolvidos, mas entrarei nisso mais tarde.

O bom:
Adoro o novo modo de editor único, é muito legal e as imagens inline no compositor funcionam muito bem.
Mesmo sendo uma prévia, ainda funciona como eu esperaria, pessoalmente não notei nada faltando (além de --- que eu uso muito)

O ruim:
Botões espalhados por aqui é confuso, deveria haver um lugar para todos eles. Substitua o ícone de seta dupla para baixo por um X. Além disso, em vez de <<, talvez pudesse ser apenas arrastável no eixo Y para que possamos controlar seu tamanho em vez de apenas um ou fechado?

Eu ainda realmente não gosto da linha de ícones no topo e do menu de engrenagem “mais”, é confuso e difícil de usar. Lembro-me de ter havido um tópico sobre isso em algum grau, mas não consigo encontrá-lo.

No meu computador de trabalho (Windows Firefox) o botão de markdown está desalinhado.

image

Ainda ótimo, só queria que isso fosse consertado :+1:

Adicionado à nossa seção :art: Problemas de UX no OP para corrigir.

Este é um recurso ausente conhecido e algo que pretendemos adicionar suporte:

Estamos planejando melhorias para o contêiner e a barra de ferramentas do composer, mas no momento as mudanças são limitadas ao próprio editor. Podemos manter isso em mente para essas mudanças futuras.

Não consigo dizer por esta descrição ou captura de tela o que deu errado aqui exatamente - você poderia compartilhar mais alguns detalhes para que eu possa dar uma olhada?

5 curtidas

Pode ser apenas visual, mas pelo menos para mim parece que está um pouco alto demais.

1 curtida