Introducing our new composer, making writing on Discourse easier than ever

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

[volanar]

Great news. Is there a feature on the roadmap that is already present in all rich editors? Colored text? Since markdown does not support colored text, this can be achieved using CSS add-ons. Alternatively, there may be other options that we are unaware of.

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

I think this may be the official bbcode plugin, I remember it had all sorts of stuff in it like color support and size

[alltiagocom]

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]

A user tried out some html code and it was not rendered in WYSIWYG mode - all that happened is that the html text was put in a box. When you switch back to markdown, you see the correct result in the preview panel. Is it supposed to show the results of the html or do you need to flip back to markdown for a preview? e.g.

---

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.

---

`

[renato (Renato Atilio)]

That’s intentional, complex HTML support is only done via the “passthrough” HTML block, as you saw. Writing HTML, although partially supported in elements like <kbd>, is not expected to be fully supported in the new editor in a visual way, hence the HTML editor.

That said, if we consider this 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>

The style gets stripped by the sanitizer, why not write it like this:

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

It’s not intentional, we have an internal task to improve this behavior in particular very soon.

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

I don’t think there is a plan for supporting a generic “wrap” node at least for now, what would that look like? Just a div?

Or is there a [wrap=something] you’re expecting to use with the new 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)]

This is working as intended, typed BBCode is intentionally escaped (= shown as text) if they’re not recognized/implemented yet, which is the case.

[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);
}