Destaque de sintaxe Markdown no editor de posts

[pipkin (Thijs)]

Seria difícil substituir o editor de posts padrão textarea por um realçador de sintaxe markdown?

Ou estou perdendo a opção em algum lugar?

Vocês já implementaram isso lindamente para CSS no editor de estilos de administração:

[Falco]

Isso já não é alcançado usando o bloco de código, que oferece destaque de sintaxe na área de visualização?

[pmusaraj (Penar Musaraj)]

Esta é uma ideia interessante, o objetivo seria ter realce de sintaxe na textarea (ou seja, o lado esquerdo do composer) para que você pudesse ver se está cometendo algum erro de sintaxe markdown. Sim, os blocos de código fazem o mesmo na pré-visualização, mas você não verá nenhum erro de markdown, por exemplo. E algum markdown complexo seria mais fácil de analisar, postar com muitas tabelas, uploads, links, cabeçalhos.

Não tenho certeza se é fácil fazer isso, no entanto. Nossas telas de administração usam o ACE Editor, e acho que não podemos simplesmente arrastar e soltar isso no composer de postagem.

[pipkin (Thijs)]

Sim, este é exatamente o meu caso de uso.

Ele dá um feedback muito direto sobre sua sintaxe: você não precisa olhar para o painel direito a cada segundo para verificar se não está cometendo erros triviais de sintaxe.

Isso daria um pouco mais de estrutura para aqueles que são menos aptos em Markdown (qualquer iniciante).

Claro, você ainda tem o HTML renderizado no lado direito da janela do editor.

Eu não veria desvantagens imediatas nisso, especialmente se for uma opção.

PS: Aparentemente, nem mesmo um realçador de sintaxe Markdown está instalado para blocos de código :

# A sintaxe do bloco de código Markdown...

...infelizmente...

- não é
- realçada

**nem um pouco**!

EDIT 2 horas depois: Corrigido por @pmusaraj

[pmusaraj (Penar Musaraj)]

Ah, boa observação! Parece que estamos sem alguns estilos para o realçador de markdown.

[Falco]

Usar um editor completo para “apenas” markdown não é um pouco demais?

Na minha opinião, usar um semi-wysiwyg de markdown está mais alinhado às necessidades do OP, como por exemplo https://ui.toast.com/tui-editor, Playground | Milkdown, etc.

[pipkin (Thijs)]

Esses dois ficam ótimos!

No entanto, eu poderia imaginar que o Milkdown mais simples seria mais adequado, já que não há problema se o editor der uma sensação mais de ‘tela subaquática’^[1], pois você já tem a pré-visualização à direita.

---

1. Sim, lembro vividamente do WordPerfect ↩︎

[pmusaraj (Penar Musaraj)]

Sim, qualquer um de ACE, TUI, Milkdown seria uma grande mudança, todos eles precisariam substituir o textarea por contenteditable. Vale a pena experimentar, com certeza, mas no núcleo é um grande projeto.

[pmusaraj (Penar Musaraj)]

PR está no ar com uma correção para a falta de realce de markdown: UX: Update highlight.js styles by pmusaraj · Pull Request #23999 · discourse/discourse · GitHub

[sam (Sam Saffron)]

Apenas para expandir, primeiro que isso é algo que eu realmente quero que o core suporte, mas também vale a pena expandir sobre a complexidade.

O core do Discourse usa muitas, muitas APIs diretamente contra o TEXTAREA, @menções, a barra de ferramentas insere coisas no TEXTAREA, uploads, cortar e colar imagens e mais.

Tudo isso não é abstraído e assume que está falando com um TEXTAREA. Adicionar um contenteditable diretamente lá significaria que ele também precisaria simular um TEXTAREA de forma adequada e muito precisa, algo que provavelmente falhará. Precisamos de uma quantidade razoável de trabalho para criar algum tipo de framework de provedor para que possamos substituir as coisas.

Veja também:

More advance editor should be here?

I have some exprence in taking notes of math in the Editor: StackEdit, while the discouse editor (what’s her name?) is my first forum editor that support markdown and mathjax at the same time with perfect preview, it seems that there are still have some space to make it more perfect, compare with StackEdit: a table of content guide of a rather length topic: in stackedit, we can just put a shortcode called [toc] to make a table of content with links the particial render of mathjax is also qu…

Who would prefer a standard wysiwyg to markdown?

I just saw an interview with Michael Pryor of trello: At one point he says: We added markdown in Trello which in retrospect, was a mistake because it’s a developer centric feature in a non developer focused product. We overcame it by adding guidance on how to use markdown within the app, but users sometimes still get confused. I’m curious to know what the feeling out there is about the use of markdown in Discourse. Am I the only one who thinks discourse would appeal to many more people i…

O Highlighter é certamente um ótimo primeiro passo nessa direção, pois você não precisa se preocupar com o mapeamento bidirecional de markdown para texto.

Pode haver algum hack ninja onde você pode esconder o TEXTAREA e, em seguida, renderizar um contenteditable sobre ele, transportando eventos para o original, mas mesmo isso exigiria uma reimplementação do posicionamento de @menção.

[pipkin (Thijs)]

@Quem preferiria um wysiwyg padrão ao markdown?

trello

Tenho que ser honesto aqui: agora que vi o editor do Trello, o Discourse parece um pouco anos 2000 na parte do editor:

Acho que esse tipo de coisa é importante.

Observação: Ele ainda aceita 100% a sintaxe Markdown.

[Tris20 (Tristan)]

@pipkin

Tenho que ser honesto aqui: agora que vi o editor do Trello, o Discourse parece um pouco anos 2000 no quesito editor:

Pessoalmente, não sou fã disso. É muito confuso. Adoro que o editor no Discourse seja visualmente limpo. Tudo o que realmente vejo é texto, e o conteúdo renderizado está ao lado, onde pertence.

Voltando ao ponto principal da realce de sintaxe, isso é algo que eu também adoraria ver. No mínimo, eu adoraria que # Títulos e ## Subtítulos fossem realçados de alguma forma. Não posso dizer quantas vezes procuro em minhas postagens mais longas, onde a prévia e o editor estão desalinhados, e levo uma eternidade para encontrar meu # título relacionado.

Para mim, apenas tornar os # Títulos em negrito, ou uma cor específica no lado do editor do compositor seria uma melhoria enorme.

[Jagster (Jakke Lehtonen)]

@Tris20

conteúdo renderizado está ao lado onde pertence

Está, não está?

Esses editores são feitos para desenvolvedores e programadores e são realmente confusos para os comuns.

Mas é o que é e está muito profundo no núcleo para mudar. Como a pergunta rascunhada

De qualquer forma — fora do tópico etc.

[angus (Angus McLeod)]

@sam

Precisamos de uma quantidade razoável de trabalho para criar algum tipo de framework de provedor para que possamos trocar as coisas.

Isso está mais perto de acontecer?

Contexto:

Rich Text Editor Plugin

Hey there @Rohail_Altaf, this will be a large and challenging job. I may be interested, however I have a few questions first. Will you be using this editor from day one of your community? Have you already used the markdown editor? Will you want to also use the markdown editor alongside this? Will you possibly want to use the markdown editor in the future? Could you elaborate on this a bit. How about: Interactive elements outside the composer that insert content into the composer (e.g. high…

[sam (Sam Saffron)]

Começamos a trabalhar nesta área, a @lindsey compartilhará informações à medida que avançarmos.

[nathank (Nathan Kershaw)]

É muito bom saber disso - usar markdown é ótimo para nossos usuários avançados, mas representa uma curva de aprendizado considerável para a maioria de nossos usuários menos experientes e ajudaria muito a tornar nossa comunidade mais acessível.

[angus (Angus McLeod)]

Olá @lindsey, não quero apressá-la de forma alguma, mas pensei em perguntar se você conseguiu compartilhar o seguinte:

1. Se as alterações incluirão interoperabilidade / um framework para permitir que plugins desenvolvam soluções de editor.

2. Relacionado a isso, se você está pensando em desenvolver seu próprio editor de rich text, por exemplo, em um plugin.

3. Uma ideia geral de qual cronograma você está considerando para 1 e/ou 2.

O contexto para mim é a abordagem e o cronograma deste projeto potencial

Rich Text Editor Plugin

Hello Discourse Developers! We’re looking for an experienced Discourse developer/agency to create a plugin that replaces the default Markdown editor with a WYSIWYG editor, preferably Quill or similar, for our community. Project Requirements: WYSIWYG Functionality: Replace the default Discourse Markdown editor with a WYSIWYG editor (Quill or similar). Feature Parity: The WYSIWYG editor should support all essential formatting options currently available in the native Markdown editor (bold, …

Eu e @Rohail_Altaf estamos tentando pensar em como abordar isso da melhor forma, especialmente em termos de cronograma. No entanto, entendo perfeitamente se você não puder compartilhar isso neste momento.

[lindsey (Lindsey Fogle)]

Olá Angus — desculpe pela demora, estivemos no retiro anual da nossa empresa em Tóquio!

Não posso responder com muitos detalhes agora, pois ainda estamos definindo os detalhes de implementação. Acho que teremos isso resolvido nas próximas semanas, pelo menos o suficiente para responder a essas perguntas, então entrarei em contato novamente assim que soubermos mais.

[sam (Sam Saffron)]

O Discourse agora está enviando um editor WYSIWYG experimental

Test our new composer!

We have been working on a new rich text editor mode for our composer so that it’s easier to write on Discourse. We’re now ready to start testing it out to get more feedback from our community on this feature! Our implementation builds upon the excellent ProseMirror and its non-core Markdown module, using the module’s schema, parsing, and serialization definitions as the base for further Discourse-specific features. This topic will serve as both a guide to testing the new composer and a hub for…

Essa infraestrutura também possibilita, a longo prazo, aplicar realce de sintaxe em markdown, caso queiramos seguir por esse caminho, embora se torne muito menos necessário com o novo editor.

Por exemplo, o novo editor agora permite que você aplique realce de sintaxe ao código enquanto o digita!