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!
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.
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!
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.,
:)
→)
- Table builder UI
- Poll builder UI
- Support for mentions and hashtags
- Inline HTML
<tags>
[2] - Typographer replacements (e.g.,
, → , ± )
- 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)
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
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.
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 (
:
), clickingmore
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
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 ininline 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
Dev improvements
- Improve inline HTML parsing
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 ↩︎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
) ↩︎