WYSIWYG Editor - One Pager

Overview

What You See is What You Get (WYSIWYG) editing is an editing experience that displays how your content will render while you’re composing without the need to preview before sending. Instead of showing markdown syntax, it shows all formatting as it will appear when posted.

More details

Workflow & Pain Points

• Non-technical (or non-developer) users aren’t always familiar with markdown syntax

• WYSIWYG editors are very common place and available with most of our competitors (Slack, Teams)

• Enabling these less tech-savvy users to properly format their messages without needing to know the syntax or click the ‘preview’ button could save time and enable improved collaboration workflows

Functional Requirements

• This should be an optional feature at the system and user level. We don’t want to alienate our current audience who loves markdown, so we cannot force this on all users

• We will want to go through the Experimental/Beta stages for this since it would require extensive testing/dog-fooding

• Once this feature is GA, it could/should be the default setting for composing messages

Solution Proposal

Core functionality

• When WYSIWYG editing is enabled, the formatting control buttons in the message input should immediately apply the rendered formatting result rather than the mardown syntax

• Allow the use markdown syntax for shortcuts to formatting while in WYSIWYG mode (e.g. using ### for headings, we could automatically transform to the heading style when those characters are typed) - see how Jira/Confluence does this)

• Add code syntax highlighting, table formatting

• Enable this kind of editing in other areas where markdown editing is allowed (channel header, playbooks status updates, etc).

• Need to determine if/how we would offer this on mobile.

Configuration

• Offer a setting for admins to enable/disable this feature

• Offer a user setting for end-users to enable/disable this feature

Dev Estimates

Phase 1: Web app

Phase 2: Mobile app

Resources

• Productboard requests

• Initial design work

• Potential WYSIWYG libraries

  • Quill - Your powerful rich text editor

  • Tiptap - Dev Toolkit Editor Suite

FAQ 

What does WYSIWYG stand for?  

What You See is What You Get

Why consider this?

• Although Mattermost is all about ‘secure collaboration for technical teams’, we have recently been broadening our definition of what a technical user might be. Those using our software with security-conscious mindsets are highly technical in their own right, but not necessarily with code, CLIs, slash commands, or markdown syntax.

• Markdown has always been considered a ‘power user tool’. When given the choice, many regular users (e.g. non-developers) prefer WYSIWYG editing. Most mainstream text editing tools (Google Docs, Confluence, Notion, Slack, Teams) have set the expectation for a rich text editing experience

Does the current formatting toolbar suffice for the vast majority of use cases?

Is the lack of WYSIWYG editing a critical blocker for customer’s core workflows?

Is there enough recent evidence that this is a significant enough problem with top-tier customers?