Test our new composer on Meta!

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 this mode out on Meta 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 tracking feedback. Thanks in advance for all your help! :sparkling_heart:

:writing_hand: Getting to know the new composer

The new composer is a rich text editor that simplifies the writing experience, particularly for non-technical users who are not comfortable with Markdown. This editor still supports Markdown, but formatting is rendered immediately for a WYSIWYG (“what you see is what you get”) experience that feels similar to other modern web composition tools (like Notion or Google Docs).

To access the new composer, click the toggle in the toolbar. This will let you switch from the current Markdown-only mode to the new rich text editor. You can click the toggle again to switch back, if needed.

toggle

What you’re testing today is the first version of the new composer. It is not yet intended to be a complete replacement for the current Markdown-only composer. We have focused on the basics first, which should cover most users’ needs.

Please review the sections below to understand what is currently possible and what’s not yet ready in the new composer. We will update these areas over time as support expands!

:green_circle: Supported features

The following features are supported in the new composer:

  • Ability to add title and set categories and tags
  • Single-pane editor when in rich text editor mode (i.e. no preview pane)
  • Toggle to switch between Markdown-only and rich text editor modes
  • Basic formatting [1] supported in Markdown, keyboard shortcuts, and toolbar icons
  • Emoji support
  • Auto-converting Markdown to rich text when pasting plain text (e.g., **bold**bold)
  • Auto-convert emoticons (e.g., :):slight_smile: )
  • Table builder UI
  • Poll builder UI
  • Support for mentions and hashtags
  • Inline HTML <tags> [2]
  • Typographer replacements (e.g., :trade_mark: , → , ± )
  • Image uploads
  • File attachments
  • Topic quotes
  • Hide Details
  • Blur Spoiler (with limitations, see Missing Features section)
  • Oneboxes
  • Horizontal rule autoconversion (i.e. typing --- converts to horizontal rule)

:red_circle: Missing features

The following features that we know are currently missing or not yet fully supported in the new composer:

  • Link UI to visit, edit, copy, or remove added links and change their titles
  • Image UI to resize, caption, or grid added images
  • Table UI to add or remove columns and rows after creating the table
  • Poll UI to edit previously created polls
  • Footnotes
  • Chat quotes
  • Tight list support (all lists are currently “loose”, meaning there’s extra padding between list items)
  • Improved Blur Spoiler support to add blur to existing text, support inline blur, and make it easier to remove blur.
  • Anything else not explicitly noted in the supported features section

:mega: Testing and sharing your feedback

As you test, you may run into issues where the composer does not behave as you expect. When that happens, please let us know! Your feedback is an invaluable asset to help us improve the new composer so that it’s ready to make available in your community.

Please provide specific reproduction steps, information about your browser / device, and any relevant screenshots or recordings! You can also review our known issue tracker below to see if someone has already reported what you’re seeing. We will keep these sections up to date as we identify and fix issues.

Remember, you can always switch back to Markdown-only mode using the toggle if you’re running into an issue using the new composer.

:bug: Bugs

  • Autocomplete and inputrules are converting mentions, hashtags, and emoji within inline code
  • On mobile Safari, problem with container positioning when keyboard is open and you tap out of and then back into the editor
  • On Firefox, can’t position cursor ahead of mention when it starts the post
  • When an emoji isn’t found in the emoji autofill (:), clicking more doesn’t work. it should open the full emoji picker, but it doesn’t. (desktop, chromium)
  • On Safari, the content after a bullet / number drops to a new row for the first few characters while typing

:art: UX issues

  • When focused in the composer, CMD+K should open Link UI instead of chat search
  • Increase the size of standalone emojis (i.e. emoji not surrounded by text)
  • Prevent underline on links
  • Apply expected visual rendering to valid category / tag hashtags
  • Improved handling of composer tips (or removal from rich text editor mode) to avoid overlapping with the composer pane
  • Mentions and hashtags don’t validate content
  • Toolbar tweaks for accessibility, indicating which formatting button is in an active state
  • Cursor is focused inside the quote (instead of the line below) when beginning a post with a quote or when copying / pasting quotes
  • If you leave and return to content in inline code formatting, you can’t escape the formatting (i.e. the new content you type will also be in inline code)
  • Caret (i.e. cursor) positioning after creating a full or inline onebox needs adjustment to improve writing flow
  • Add alt text to composer toggle between Markdown-only and rich text editor modes
  • When typing, auto-linkify text we think are links. Apply inline onebox (i.e. titled link) after cursor moves away from the link

:wrench: Dev improvements

  • Improve inline HTML parsing

  1. Bold, italic, underline (no toolbar support), strikethrough (Markdown-only via ~~ ), links, blockquotes, code, checkbox (Markdown-only via []; toolbar support coming soon), bullet lists, number lists ↩︎

  2. Some convert to closest Markdown (e.g., s, strike, strong, b, em, i, code; u is specifically unsupported because it does not cook to an actual underline); others will be allowed as “html_inline” nodes (e.g., kbd, sup, sub, small, big, del, ins, mark) ↩︎

46 Likes

Looking good!

There are some issues with spoiler tags:

  1. If you highlight some text and choose “Blur Spoiler”, it replaces the text with “This text will be blurred”, losing what you highlighted

  2. Inline spoilers aren’t working, it puts them on a new line

  3. No way to toggle a spoiler off again

10 Likes

Thanks Shaun, noted that in the OP that we have more work to do on spoilers.

8 Likes

I was waiting for this feature and it’s awesome Discourse finally made this step :clap:

Only 1 thing for now: it looks bizarre to have such a narrow textarea to write our post.

Obviously I was very much used to the side-to-side view of the composer and preview, but this now looks… Weird. Maybe I just need time tho. Yeah, probably. :smile:

11 Likes

Fantastic progress! :heart:

The second thing I noticed is that the current style doesn’t visually toggle on (and off) in the tool bar even though it remains in effect. It would be really nice if the current style was highlighted until toggled off.

That is all for now!

(Basing my feedback from grey amber theme)

12 Likes

These are good call outs — right now, we’ve been focused primarily on the editor itself (where you actually type), but we do have planned improvements to the composer container and toolbar which should address these issues.

9 Likes

A bit of a strange defect but when the composer is open this happens to the reply indicator.

Illl fully test when I’m on desktop later but it looks promising.

4 Likes

Finally here! :heart_eyes: That’s a lot of work unfolded; fantastic job! That will be a significant pro for users who are uncomfortable with Markdown.

Edgy upload issue:

If you’re uploading an image and switch to markdown, the upload markdown is not here and throws an error:
image

Reversely, uploading from markdown, then switching to the new editor doesn’t error, but the image doesn’t appear.

11 Likes

I wonder if we should just block switching until the upload is done… we can potentially convert placeholders between editors, but it doesn’t seem that useful.

9 Likes

Yes, my thoughts are the same. Blocking sounds like a good idea!
When uploading a big image with a slow connection, I could not help but test the switch until it’s done. :grinning_face_with_smiling_eyes:

9 Likes

New design looks great. I love how Discourse iterates over time, tries new ideas and involves the community.

Some subjective observations, if you’re looking for feedback:

  • The alignment button (left/right) is an unconventional icon, and a feature that seems very niche. Since the icons wrap onto two lines on mobile, I would simply remove this feature. Likewise, the “insert date” feature is advanced/niche and could be hidden within the :gear: menu. That way the remaining icons would all fit on a single line
  • The video upload feature was confusing for me, even as a technical user. What would I supply in the “video source” box? Also, the buttons get a bit jumbled visually (see below)
  • The “M” button (switching between raw text and preview) doesn’t reveal its purpose until you click it. There’s some spare space on the bottom of the composer between the :wastebasket: and GIF buttons and I think a preview button would make more sense down here. And you’d have room for the word “preview”

7 Likes

These are features we’ve enabled on meta at some point, probably for an experiment. They are not available by default and we could turn them off or stick them behind the :gear:

I agree with this. Not sure why we always include this so prominently in the menu. I use it all the time myself but I also frequently use alot of features behind the :gear: menu too!

Agree that at least mouseover helper text would help with discoverability here.

Down the road I suspect we’ll want to default to the new composer and make switching to markdown the power move, which power users will then know or be able to discover.

6 Likes

:megaphone: These menu items are not really related to the new composer so we don’t need to focus on them here. If folks have more feedback about the menu items, please start new Feature topics or do a search.

That said:

  • I removed the “Insert video” button here on meta, which is provided through the Insert Video theme component.

  • The “Toggle direction” button depends on the support mixed text direction site setting which we will keep enabled on meta because we are actively testing multilingual functionality currently.

  • On meta we also have GIF and Ask AI which we want to allow prominent access to.

3 Likes

Congrats team! I did notice a discrepancy around oneboxing. Pasting a url from the browser generates a onebox, but typing it out does not. Until you swap back to see the markdown preview which triggers it to generate.

test: Pasting from browser bar here: https://google.com/ Typing here: https://google.com

4 Likes

Pressing Return in the new WYSIWYG composer creates a double-line break (a paragraph break). I don’t like it (though I guess this is subjective), but I especially don’t like it for bulleted/numbered lists, where there’s a ton of space between list items.

  • this

  • is

  • too

  • much

7 Likes

You can do shift + enter to avoid the double-line break, though it doesn’t work for lists.
I agree this behavior change should not be the default.

4 Likes

Great work, this is a step in the right direction! However, I still have some basic UX issues which I wish were solved, but I’ll get into that later.

The good:
I love the new single-editor mode, it’s really cool and inline images in the composer work great.
Even though this is a preview it still works as I would expect, I haven’t noticed anything missing personally (besides --- which i use a lot)

The bad:
Buttons being all over the place here is confusing, there should be one place for all of them. Replace the double down arrow icon with an X. Also, instead of << possibly it could just be Y axis draggable so we can control its size isnstsd if just one or closed?

I still really dislike the row of icons at the top and the “more” gear menu, it’s cluttered and confusing to use. I remember there being a topic on it to some degree but I cannot find it.

On my work computer (windows firefox) the markdown button is offset.

image

Still great I just wish these were fixed :+1:

Added to our :art: UX issues secton in OP to fix.

This is a known missing feature and something we intend to add support for:

We are planning improvements to the composer container and toolbar, but right now the changes are limited to the editor itself. We can keep this in mind for those future changes though.

I can’t tell from this description or screenshot what’s gone wrong here exactly — could you share a few more details so I can take a look?

3 Likes

Could just be visual but at least to me it looks like it is too far up by a little bit.