Maak kennis met onze nieuwe composer, waarmee schrijven op Discourse eenvoudiger is dan ooit tevoren

[lindsey (Lindsey Fogle)]

One of our major projects this year has been working on developing a new rich text editing mode for the composer, which makes writing on Discourse more familiar and intuitive. The new composer has been available here on Meta and as an experimental setting for some time, but we’re at the point where we’re excited to drop the experimental label and invite your community to try it out!

In this topic, we’ll share more about the composer, how it works, and how you can make it available in your community with just a couple clicks.

A new rich text editor for Discourse

The new rich text editor simplifies the writing experience for Discourse users, particularly those who are less tech-savvy or aren’t familiar or comfortable with writing in Markdown. The rich text editor supports Markdown, as well as other common keyboard shortcuts and toolbar formatting adjustments, but the formatting is rendered immediately for a WYSIWYG (“what you see is what you get”) experience similar to familiar tools like Google Docs and Notion.

The future of Markdown

We know that many Discourse users love the current Markdown composer and enjoys its predictable, straightforward writing experience. The new editor is a composer “mode” that sites alongside the existing Markdown mode, so and your members can choose the writing style that works best for you.

Most things you’ve been doing in the classic Markdown composer are now supported in the rich text editor, including:

• All basic formatting, supported in Markdown (**bold**), using common keyboard shortcuts (Command + B), and via toolbar icons.
  

  

• Support for advanced features like creating tables, creating polls, inserting date/time, adding hide details sections, adding blur spoiler sections, uploading file / image / video, rendering links as oneboxes, styling category / tag / user mentions, quoting content, and inserting footnotes.

• Dedicated link UI to visit, edit, copy, title, or remove links
  

  

• Dedicated image UI to resize, caption, or deleting images
  

  

However, there are some areas where we are still working, such as making it easier to edit tables and polls. We will continue to work toward feature parity between the composer modes, and encourage you to share Feature requests about which features and capabilities matter most to you to help us prioritize our work. In the meantime, you can always switch back to Markdown mode to take care of advanced needs.

How we built it

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.

Turning on the new composer

The rich editor is enabled by default for all communities . When you or your members open the composer, you’ll notice a toggle in the toolbar. This lets you switch between the classic Markdown-only mode and the new rich text editor.

---

Update: if you prefer your members to be shown the markdown composer by default:

@lindsey

We recently added a new setting that lets you control which editor is shown by default in your community: Choosing the default composer mode for your community

[volanar]

Geweldig nieuws. Zit er een functie op de roadmap die al aanwezig is in alle rich editors? Gekleurde tekst? Aangezien markdown geen gekleurde tekst ondersteunt, kan dit worden bereikt met CSS-add-ons. Als alternatief zijn er mogelijk andere opties waar wij niet van op de hoogte zijn.

[Jonathan5]

@lindsey

search for Rich editor. Check the setting to turn it on

Is there a setting for which editor is default after that? Thanks.

[sam (Sam Saffron)]

@Jonathan5

Is there a setting for which editor is default after that? Thanks.

Not yet, but we plan to add one.

[Kartoon]

When you press the “text size” button (which doesn’t appear to be here on this site but it’s on mine) you get this error

I also don’t see the “image UI” in the post?

[MarkDoerr]

@lindsey

Dedicated image UI to resize, caption, or deleting images

I’ve been anxiously waiting for the image scaling option and I love the simplicity of this!

[awesomerobot (Kris)]

@Kartoon

which doesn’t appear to be here on this site but it’s on mine

it’s a customization that would need to be updated to be compatible with the new editor, perhaps you’re using a theme component like Composer Button Bonanza ? (there are likely others)

@Kartoon

I also don’t see the “image UI” in the post?

have you updated Discourse recently? if so, you have to click on the image in the composer to see it

[sam (Sam Saffron)]

Ik denk dat dit de officiële bbcode-plugin is, ik herinner me dat er allerlei dingen in zaten, zoals kleur- en grootteondersteuning.

[alltiagocom (Tiago)]

My suggestions:

1. I like writing with markdown (maybe I just got used to it?), but when I use the markdown version, I’m not a fan of the new monospace font, so for me, it doesn’t make sense to include the rich editor in my community (since I will probably be the one who writes the most). That being said, this could be a setting a user could enable/disable. For example, if I disable it, I always get just the markdown version, so I keep the “normal” font (not the monospace). If I enable it, then I get what has been implemented. As an admin I can enable it for the community, but each user could enable/disable. Either that, or each user could decide what font to use in the markdown version.
2. I find it a bit distracting that when rich editor is enabled, the whole composer is resized and moved. Especially if I’m going to be using both versions interchangeably (I know I will), having the window resizing whenever I click the toggle, feels distracting to me. I understand that with the rich editor we don’t need the extra right preview pane, but still… maybe that space could be used for something else?
3. This is just a minor detail, but if the resizing will stay, it just feels weird that the composer is align to the middle of the page, but compared to the area of the topic, is not aligned and so it feels off to my eyes:

I’m still not convinced I will use this feature, to be honest. I can see how it can eventually be useful, but at the moment I always have that “itchy” feeling whenever I think of using it.

[JonLewit]

Een gebruiker heeft wat HTML-code geprobeerd en deze werd niet weergegeven in de WYSIWYG-modus - alles wat er gebeurde was dat de HTML-tekst in een vak werd geplaatst. Wanneer je terugschakelt naar markdown, zie je het juiste resultaat in het voorbeeldvenster. Moet het de resultaten van de HTML weergeven of moet je terugschakelen naar markdown voor een voorbeeld? bijv.

---

Wikiartikel in aanbouw

Sta de maker toe hieraan te werken zoals hij/zij in staat is. Je bent vrij om hulp of advies aan te bieden door te reageren, maar bewerk het alsjeblieft niet zonder toestemming.

---

`

[renato (Renato Atilio)]

Dat is opzettelijk, complexe HTML-ondersteuning gebeurt alleen via het “passthrough” HTML-blok, zoals je zag. Het schrijven van HTML, hoewel gedeeltelijk ondersteund in elementen zoals <kbd>, wordt niet verwacht volledig te worden ondersteund in de nieuwe editor op een visuele manier, vandaar de HTML-editor.

Dat gezegd hebbende, als we deze HTML overwegen.

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

De style wordt verwijderd door de sanitizer, waarom niet schrijven als dit:

---
## 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)]

Have been testing the new composer on our forum and really like it, but during testing have come across a strange behaviour I don’t know is intended or not.

When quoting someone using the old editor, the layout is fine and cursor appears under the quote:

However either using the new one by default or changing it during composing a reply, the cursor jumps automatically to the end of the quoted text:

If you type anything it counts towards the quote and trying to reply, the post error appears:

If this by default we can let our users know, just wanted to be sure if it’s the new behaviour when quoting users with the new editor.

Thanks.

[renato (Renato Atilio)]

Het is niet de bedoeling, we hebben een interne taak om dit gedrag zeer binnenkort te verbeteren.

[Don]

Hello Thanks, this is pretty cool

I’ve noticed that it didn’t support the wrap [wrap]Hello[/wrap] yet and I’ve got this message when try to use it.

Token type wrap_open not supported by Markdown parser

[renato (Renato Atilio)]

Ik denk niet dat er een plan is om een generieke “wrap”-node te ondersteunen, althans niet voorlopig. Hoe zou dat eruitzien? Gewoon een div?

Of is er een [wrap=iets] die je verwacht te gebruiken met de nieuwe composer?

[Ethsim2 (Ethan)]

where did you see this error message? My instance just drops the BBcode

---

@Don

[wrap]Hello[/wrap]

---

becomes

---

Hello

[Don]

We use some theme component like Discourse Icon and Discourse Stickers.

I think, I can make the sticker component without wrap because that is just for target and add some style to the sticker.

@Ethsim2

where did you see this error message?

Paste it to the Rich Text Editor side or switch from Markdown side if you pasted there.

[Ethsim2 (Ethan)]

@Don

@Ethsim2

where did you see this error message?

Paste it to the Rich Text Editor side or switch from Markdown side if you pasted there.

i don’t get the error, but the BBcode stays there. There’s no preview on desktop, when the rich text editor is selected

---

that was on Discourse commit hash latest-release +269

and

BBcode commit hash 1fbff6b1

[renato (Renato Atilio)]

Dit werkt zoals bedoeld, getypte BBCode wordt opzettelijk ontsnapt (= weergegeven als tekst) als ze nog niet worden herkend/geïmplementeerd, wat hier het geval is.

[Jagster (Jakke Lehtonen)]

@alltiagocom

I’m not a fan of the new monospace font

Would this work for you:

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