Opt-in alpha test for a new Stacks editor

TL;DR: We are testing our new open source Stacks editor that offers both Markdown and rich text input options. If you’re interested in testing it out and giving us feedback, you can opt in by visiting your preferences page and enabling the Stacks Editor. You can opt out at any time but it will take up to 10 minutes to revert to the old editor. Note, the new editor will only be active when drafting or editing answers on MSE or MSO during the alpha test.

About six months ago, our product teams and Community team began exploring whether we could bring to our public sites the Stacks rich text post editor that launched on Stack Overflow for Teams (or Teams) over the summer. We’ve been spending that time discussing the needs internally and also talking with some of our most highly-engaged users about the new editor - our Moderators and members of the Charcoal group - to understand what might need to change or be included to make using the new editor an easy change-over from the old editor.

Through this process, we’ve received dozens of answers with ideas for improvements, bugs that needed to be squashed, and UX confusion that needed to be ironed out. We’ve addressed many of the concerns these two groups mentioned and are ready to bring it to the larger community through an opt-in alpha test on MSE and MSO. We are asking for your constructive feedback to see where there’s room for improvement to make it into a tool both people who are comfortable with Markdown and those who may be more comfortable with rich text can use successfully.

Here's what the two views look like - you can click to view a larger image:

The test

The goal of this alpha test is to get an initial understanding of how well this new editor would be received and to also discover any concerns that would break workflows for users who like the current editor or prefer to work in Markdown. We also want to consider users who may not be familiar with Markdown, too, as they make up many of the users on our non-technical sites. This is the first public phase in a process where we hope to fully test and refine the editor so that, when it launches network-wide, people will find it easy to use and to be a major improvement over the current editor.

We understand that rich text entry is a difficult thing to get right and realize that it may take several months to find the right solutions before we can make this live network-wide - and that comes with the understanding that there may be unsurmountable issues - but we feel that working through this process with y’all will, at minimum, help improve the new editor experience on Teams and may end up with a great new editor for everyone to use.

This is part of a multi-part test that will look something like this:

• Initial release on Teams with feedback from highly-engaged users (e.g. Moderators) (Completed Summer 2020). The goal of this was to get feedback and get a good idea of how much we need to change the editor so that it will work for our public platform community. This allowed us to test many (though not all) of the features with a small group of people without impacting the public site.
• Testing on MSE and MSO through an opt-in alpha test. The goal here is to further refine and identify solutions that will help the new editor be openly adopted by users, primarily active members of the community.
• Usability testing sessions with users of several different experience levels. The goal here is to make sure that the features and UX we create after responding to our highly-engaged users is still transparent to others. We’ll watch how users of varying experience levels interact with the editor to identify and make additional improvements with the goal of an intuitive user experience that has sufficient guidance where needed.

As to a timeline, this is expected to take a while to work through. One of the benefits of the alpha test is that people can enable and disable it as they wish. For the rest of 2021 Q1, our plan is to leave the test running so that y’all can try it out in a more long-term way if you wish. While we’ll be fixing major bugs, we won’t be prioritizing new features or adjustments until we start digging into your feedback from this test and the feedback from the usability sessions in the second quarter of 2021. See a bit more on this in the giving feedback section below.

Assuming these tests go well and we find solutions that make post creation and editing easier than the current system, we’ll move into a gradual rollout phase, starting again with MSE and MSO and then to the sites with standard editing tools, reserving the sites with specialized editor add-ons for the end so that we can make sure that their tools work correctly upon launch.

Why are we working to bring a rich text editor to our sites?

While there have been some requests for a rich text entry option over the years (this one going all the way back to 2009), there’s never been much support for them from users - in fact, many of the requests get strong disagreement from other users. Markdown is a great tool and many users are or have grown accustomed to it - I admit to regularly trying to use Markdown in rich text spaces. That said, many of these requests have been to replace Markdown with rich text and that’s not something we want to do.

As a platform that is largely used by programmers, Markdown is generally a familiar format for many and they’re very comfortable using it, particularly now that we follow the CommonMark standards. For those who don’t know Markdown, we’ve expected them to learn and we give them some assistance but, in many cases, posts end up poorly formatted and need participation from the community to improve. Many of my edits on English Language Learners are purely to improve post formatting.

Additionally, our editor has been around since the beginning with few improvements in that time, so a major upgrade is in order and, in looking forward, we feel that a redesigned editor using Stacks will be more easily maintained and improved as we go forward.

Teams needed a rich text option

We have a great team who works to enhance the Teams product to meet the needs of companies and organizations who are using it for internal knowledge sharing. One frequent pain point from these users was the lack of a rich text editor - here’s a statement from Ham, one of the Teams developers:

We started building the new Stacks Editor as a response to feedback from our Stack Overflow for Teams customers. While Markdown has become a widespread and successful format for writing content - not only at Stack Exchange but across the web - some of our Teams customers told us that they’re not comfortable writing their content in Markdown. They didn’t know the syntax and faced a learning curve before they could start writing the way they wanted to. Writing questions and answers wasn’t as easy as they were used to from other places. For us it’s important to make contributing as easy as possible. Writing questions and answers should feel natural and come without a lot of friction.

This makes sense. Copy and pasting from a rich text editor like Google Docs or Word is much more common within a company where you may be transferring information from existing documentation to a Team, whereas much of our public site content is created from scratch. That said, it’s not unheard of to copy content in the form of quotes into posts, where a rich text detection feature would be helpful so that adding the Markdown manually wasn’t necessary.

The main driving force for the development of the new editor was to improve the experience of Teams for our existing users and give it a feature set that would attract additional users. That said, since many of the people using Teams are developer-centric groups, they also are often comfortable with Markdown, so we wanted to ensure that both options were available. More from Ham:

The new Stacks Editor tries to be the best of both worlds. If you’re happy with writing Markdown and liked the way the old editor helped you with that, the new editor will feel very familiar. You can write Markdown, use familiar keyboard shortcuts, upload images and more. If Markdown is not your strong suit, Stacks Editor allows you to switch over to the new rich text mode that allows you to write in a more WYSIWYG kind of fashion.

We still think that Markdown is the way to go, but we also see the benefits of a rich text editor for less technical users and/or network sites who may be more accustomed to a WYSIWYG style editing. With the new Stacks Editor, Markdown continues to be the leading format for your content and everything you write will be transformed and stored as Markdown at the end of the day.

So, our focus in building the new editor was to add the option of rich text but still maintain a Markdown focus because we love Markdown and think it’s a great experience for those who already know how to use it and is relatively simple to learn but we also want to simplify or improve the experience for people who may be copy-pasting into posts or who don’t know Markdown.

More than just rich text, we’re simplifying future work for development

The current editor has been around since 2008 and, while we’ve made changes along the way, it’s largely unchanged and now makes building new features difficult. Additionally, by adopting and improving the Teams editor on our public network, we’re simplifying future work on ask, answer and edit pages and maintaining similar features between Teams and the network. My final quote from Ham:

Our old editor has served us well for many years, but due to a number of issues (reverse-engineered code that is hard to work with, inadequate API for handling cross-browser issues, and bare-bones content-editable support) we are unable to use it as the base for any major upgrades. Additionally, there are many advantages from basing an editor on a modern foundation (like we have done here on top of prosemirror), which can take care of many of the nasty "content-editable" concerns and keep things safer and more cross-browser compatible.

Being around for so long, it has accumulated quite some cruft and has become hard to maintain and evolve the way we would love to. Over the past years we tried revamping the editor a couple of times only to find out that it would be too hard to do. When we started building the new editor for Teams, we knew this would be a good opportunity to greenfield a new editor overhaul that would ultimately benefit all our users across the network.

On top of this, we’re opening the editor up for everyone to use and contribute to. Like Stacks, the new editor is open sourced, so if you’re interested in how it’s built or want to contribute to improving it, you can find it on the Stacks-Editor repo.

Building editors is hard - particularly when dealing with rich text

I’ve learned the quirks of a variety of different editors over the years, whether it was BBCode on the forums I participated in, Wikitext on MediaWikis, Markdown here on Stack Exchange, or any of the various rich text or hybrid editors on the various platforms I’ve used (e.g. Jira, FreshDesk)… so I’m comfortable adapting to new styles, but I also find that some editors make assumptions that frustrate and confuse me and make me not want to use them any more. We want to avoid this frustration!

Because our focus is on Markdown, with the addition of special formatting for tables and spoilers, we’re able to limit what our rich text editor has to do - we’re not increasing which formatting options are available (e.g. colorful text or underlines) which is one way we’re working to keep our rich text implementation and the conversion between rich text and Markdown simple, easy-to-understand, and as frustration-free as we can.

The major changes

Other than the optional rich-text entry, there are a bunch of other changes, big and small, that you’ll see in this test. Below are some of the biggest ones including a brief overview of how rich text entry works. A lot of what’s written below was penned by Ben Kelly, who’s done a lot of work with Ham to get this editor going and is supremely knowledgeable of the features, so big thanks to him for that!

Rich text mode

This editing mode was designed to largely resemble traditional word processing software that many users are used to. However, we've added in some extra features:

• Markdown-style "input rules" for block level syntax
• Typing # , ## , etc creates a header; typing > creates a quote; * creates a list, and so on
• We’ve got inline input rules (bold, italics, inline code, etc.) on a list of things to investigate for a future release
• Link and image editing tools will allow editing link URLs for links and the addition of an image description and title for images.
• Intelligent copy/paste support - Pasting external content from e.g. Google Docs or code from your editor of choice will retain most of its existing formatting, provided that formatting is in Markdown.

Ultimately, the rich text editor is converted back to Markdown and should support everything you can do in Markdown, with some caveats:

• Pasting rich text from outside sources isn't perfect, especially with very complicated content
• What we can support in rich text mode is restricted by our backing Markdown implementation, so things like merged cells in tables or super/subscript aren’t supported, even when we do support the HTML (see next bullet).
• This is really more of a feature than a drawback. We <3 Markdown and are committed to supporting it first-class for the foreseeable future
• HTML support is HARD. We make no promises that any HTML written in Markdown mode will be editable in rich text mode
• We recommend using the equivalent commonmark syntax when available. We’re looking to extend our supported Markdown syntax so users won't need to type HTML anymore.
• Don't ask why HTML is hard. It's a long story that could be a blog post of its own.

The Markdown - rich text switcher

To allow for movement between rich text and Markdown modes, we’ve added a switch. When the dot is on the right (green background), you’re in Markdown mode; on the left (grey background), you’re in rich text mode. The current default for all users is Markdown but, after you use the editor, the system will remember your last-used option as your default. So, if you submit a post or edit while in Markdown view, you’ll see that the next time you open the editor; if you do so in rich text, that will be the view you have when you next use it. The default configuration for users can be changed per-site, so if a site feels that rich text makes more sense as their default, we can allow for that.

Preview is collapsed into the rich text view

Over the years we’ve gotten lots of questions about whether we could optimize the preview so that it didn’t take up so much space on the screen. If you’ve ever written long posts, you may be familiar with the feeling of doing a lot of scrolling to get from the end of a preview back to the edit window. With the new editor, you see the preview by using the Markdown toggle to switch between Markdown and rich text modes and, because the rich text preview is part of the editor, you can edit right in the preview rather than having to find the edit window again. This is a lot more convenient for mobile users, too, with their smaller screens where scrolling through even a short post can mean a lot of work.

Aaron, our Principal Product Designer for Design systems explains the value of an editable preview:

We think this is more than a layout issue. We could put these previews side by side, or toggle between them like GitHub does, but I think having a preview at all is something we can move beyond. Tiny sidenote: I worked on GitHub’s editor in 2016! We could explore alternatives like having a button that launches a full screen preview, but I think that’s wasted effort when we could be writing directly in the preview experience.

The web has matured past the point of requiring Markdown syntax and discrete previews. Why should any text editing offer a read-only preview state in 2021? Is writing, previewing, noticing a mistake, and moving back to the editor truly better than simply being able to edit the text? Would you accept this interaction model in your word processor? In Notion? In Google Docs? In Medium?

We feel this is a positive change for these and many other reasons but we do understand that it’s a big departure from the current format. Please take some time to see how this new workflow feels and let us know what you think and how we can improve this. I know that many of the prior requests have been for a side-by-side preview to cater to the wider screens that many people have, particularly as this matches many other Markdown editors. Unfortunately, this can be complicated on smaller screens, which would require different placement and it’s pretty common to have previews separate from the entry form, like with GitHub’s two-tab format.

We do have a few known issues here:

• While switching between modes does maintain your approximate scroll position, it doesn’t remember where your cursor was. Any time you switch, your cursor will move back to the top of the post rather than staying where you were.
• There’s no history when switching modes, so flipping between views will cause you to lose the ability to undo/redo the changes from the other view.
• Since the rich text preview will interpret your Markdown, any incorrect Markdown (MD) may be escaped out by the rich text editor. When you return to MD view, you will be able to fix these errors.

Syntax highlighting in Markdown mode

You’ll notice your Markdown experience is a bit less monotonous because it now responds to the Markdown you use by changing the text in the pane - headings will be larger, bold text will appear bold, as will italics, and links will be in blue and code will be in grey. I’ve found this really helpful in drafting posts as it identifies a lot of the Markdown errors I might have made, making it so I’m less likely to even need to look at the preview. This isn’t currently CommonMark compliant but we’re working on improving it.

Changes to formatting buttons

We’ve removed some buttons and added some new buttons to the ones available for formatting. Here’s what the formatting bar looks like now:

Removed:

• Undo/redo - these features still work with your standard key combinations but we’ve removed the buttons themselves - we’ve also improved undo/redo history support to be much more reliable overall.
• Stack Snippets (temporary) - We couldn't get Snippets built into the initial alpha test, so if you need to add a snippet to a post, you'll need to disable the alpha to do so.

Updated / New:

• Tables - this button will create a default three-row, two-column table and have special menu options when in rich text mode that allows adding/removing rows and columns.
• Headers - this button has been redesigned and moved to the first position.
• Inline code / code blocks / Stack snippets buttons - one piece of feedback from our early tests was that for rich text, we need to differentiate between inline code and code blocks but on Teams we reused the same icon for code blocks that we currently use for Stack Snippets - to allow all three options, we created new icons. Snippets are disabled for the alpha but you can see the new trio of buttons (left to right - inline code, code blocks, snippets)

We're planning to add keyboard shortcuts to the formatting buttons but they aren't part of this initial alpha test.

Markdown mode is your go-to for fine-tuning posts

Markdown mode will give you fuller control of your posts, as it already does. Here are a few places you’ll want to stick to MD when composing or editing posts:

• Adding a language to a code block for syntax highlighting purposes - while we’re looking to add this to rich text, for now it’ll require MD. The system will still auto-detect languages based on tags as it usually does but if you need to call out a specific language, you’ll need to use Markdown mode.
• Markup that requires HTML - we still support some HTML in posts but the rich text mode won’t create it, so if you need to include HTML in your posts for formatting such as subscript or superscript, you’ll need to enter Markdown mode for this.
• Spoilers - like HTML, they're supported but we don't have a button for it, so you'll need to use Markdown mode to add them.
• Creating complex lists - this is possible in rich text mode, but it’s not as intuitive as using Markdown, particularly in special cases such as lists with indented code blocks.
• Fine-tuning images - resizing or adding links to sources or full-sized images will need Markdown mode.

Inline text and image links are the norm

The image and link tools will now add images and links inline rather than in the bibliography format. While the latter will still work, you’ll have to create it manually. Right now, images don’t have their image plus link formatting but we’re working on getting that added in a future release.

How to participate

If you’d like to opt-in to the alpha test, visit your preferences page and opt in by enabling the Stacks Editor opt in option. At the outset the new editor will only be available on answers - you won’t see it on questions, profile pages, tag editing pages or any other editing forms around the site. Opting in is global, so if you opt in on MSE, you’ll also see the new editor if you’re on MSO. If you decide you’d like to opt out, you can do so in the same way, switching the slider on your preferences, though it may take up to ten minutes for the editors to return to normal.

Giving feedback

This feedback phase is an incredibly important part of this process so we really appreciate any of you who take the time to try the editor out. If you run into bugs, usability issues or if you think of features that would improve your experience with the new editor, please leave an answer here - one per answer - so that we can review and respond to each. Steps to reliably reproduce are always appreciated along with which browser/s you're experiencing the bug in, and especially so when it comes to obscure edge cases or subtle usability issues. Additionally, because this project is open sourced, for truly technical bugs, you can file them as an issue on the GitHub repo - if you feel comfortable with that - if we get reports filed in both places, we’ll link them.

Our plan is to transfer issues from our internal system to the GitHub repository and add any new ones that come up here so that anyone who’s interested can see what we’re working on and how we’re prioritizing this work.

While it’s great to hear your overall thoughts about the editor, if there’s too much in one post it can make responding difficult so try to keep each answer relatively concise. You’ll have until the end of the alpha to add the answers here. Once it’s over, we’ll let you know how best to give feedback.

Thanks

This project couldn’t have been possible without the work of so many people and they all deserve a ton of credit. In particular I’d like to recognize Ben Kelly, Ham Vocke, Aaron Shekey, Des Darilek and Adam Lear for all of the effort that they’ve put in. Additionally, to those who have taken the time to test and give feedback while the editor was in Teams only, thank you!

• I like this editor, I've been using it in SO for Teams for a while now. Tooltips are great. And thank you for giving us an option. – Ollie Jan 26 at 19:32
• This post is getting more answers than upvotes. Popular, you think? – Ollie Jan 26 at 20:41
• @Ollie sorry, my fault. I can only upvote it once... – Glorfindel Mod Jan 26 at 21:13
• "in many cases, posts end up poorly formatted" - I doubt that's the fault of markdown. Many askers are just too lazy to apply formatting or grammar. – Bergi Jan 27 at 0:14
• @Bergi I mean... that's a possibility... but I really don't think that everyone, network-wide, who fails to perfectly format posts are all just lazy. And, honestly, it's kinda uncharitable to assume that. I'd much rather give people more options to make their post look great and honor that's at least part of the problem. – Catija ModStaff Jan 27 at 0:55
• Watch the terminology around this. Searching for "Stacks Editor" in Google comes up with StackEdit, which isn't built by Stack Exchange. (Incidentally, it seems to be a much more feature-rich markdown editor which also solves many of the problems users have shared in answers below. Play around here) – Robotnik Jan 27 at 4:52
• On the sites which have mathjax enabled, the MathJax source will be shown in both views, right? Or does the rich text view actually show rendered MathJax? – Martin Jan 27 at 6:56
• @Robotnik we've come full circle. If you check out StackEdit's GitHub repo you can see how they built it on Stack Overflow's previous markdown engine. Personally, I'm not worried about the name. Ultimately, it's gonna become the editor component in our Stacks design system so people can find it there if they're looking for it. – Ham Vocke ModStaff Jan 27 at 8:35
• How about you use the official sandbox post for that @ouflak – Luuklag Jan 27 at 13:51
• "Why should any text editing offer a read-only preview state in 2021?" - arguably, WYSIABNQEUWYG editors that a lot of old forums had and that universally failed at anything more complicated than bold, italic and underline are exactly what the Internet has been moving away from. – Maciej Stachowski Jan 28 at 7:37
• @Catija "I think having a preview at all is something we can move beyond" Please, please no. Especially if there's still bugs to work out that wreck your formatting, nixing preview should be a nonstarter. – TylerH Jan 28 at 22:54
• @TylerH: I know what it is. It is a UI catastrophe. Every place that uses them generally also includes some additional means to try and make clear whether left or right means the feature is activated. Look how much text was spent in describing the feature that went into describing how to turn it on and off. Notice that it also changes color to help make clear when it is on. Compare that to an unambiguous check box that needs no explanation. The sliders suck. – JRE Jan 29 at 6:40
• @JRE .... So post a passionate posted about why a checkbox would be better rather than having your point of view forgotten, mouldering in the comments. The whole point of this is to try to get these things sorted out – Journeyman Geek Mod Jan 29 at 12:01
• Chiming in with others. This must be site specific. Killing the preview will introduce difficulties in Math.SE and other MathJax -using sites. I might manage myself, but others needing more complicated formulas and such are seriously hampered. I am also very worried about our new users who have not written thousands of pages of LaTeX like I have. They need the help of a preview pane. Typically they start with simpler pieces when the need to scroll much is not so pressing. – Jyrki - No Shog9 - No SE Feb 2 at 19:36
• @T.J.Crowder It's not active on SO, only on MSO and MSE. :) To answer your specific question, no, there's no limit. – Catija ModStaff Feb 10 at 13:58

Bug report opened on GH

Pressing Ctrl+H does not toggle Heading in Rich Text mode

• In the old editor, it would cycle between several Headings.
• In the Markdown mode of the new editor, it toggles between Heading1 and no heading.
• However, in the Rich Text editor, it only works one way. Pressing Ctrl+H for a second time opens the browser's history tab in Chrome.
• Nice find! We have concrete plans to extend the headings implementation, so I'll see if we can't work this in to the roadmap since it's a regression from the behavior of the old editor. Thanks for the report! – Ben Kelly ModStaff Jan 27 at 22:59
• FWIW, @Ben - H1 should really never be used in questions (the title becomes the H1) or answers here. There may be other contexts where that heading is appropriate, but it'd be nice if the editor guided folks toward H2 & H3 exclusively. – Shog9 Jan 28 at 6:15
• @ben as context: meta.stackexchange.com/a/214449/175002 – Pureferret Feb 3 at 11:55

Feature request opened on GH

Can we have the toolbar tooltips show the keyboard shortcut for inserting that element into a post, like the previous editor did, so it looks like this:

• Yes! This is currently planned, but the implementation needs a little more work. Thanks for the report! – Ben Kelly ModStaff Jan 27 at 23:13
• @BenKelly More of a request than a report, but thanks anyway ;) – Ollie Jan 27 at 23:15

Feature request opened on GH

On the phone it'd be nice not to have to horizontally scroll to be able to access all the edit buttons.

• Other than collapsing them into one or more dropdowns, we don't have much choice. I'll pass this feedback on to the designer on this project and see if we can't come up with some alternate solutions. Thanks for the report! – Ben Kelly ModStaff Jan 27 at 23:17
• @BenKelly if there is enough vertical space, maybe have two or more rows? – Paŭlo Ebermann Feb 2 at 18:30

Bug report opened on GH

In Rich Text mode, if you start the post with a code block, you can't get rid of it. The button looks to be a toggle but clicking it again doesn't help; you can't remove it by pressing the Delete key (on macOS; I guess it's the same for the Backspace key on Windows). The only way is to switch to Markdown mode. If you use the code block somewhere in the middle of the post, it is possible to delete it in Rich Text mode.

• Very similar to my answer. – Ollie Jan 26 at 20:39
• Yeah, I just noticed that. It's also similar to meta.stackexchange.com/a/360043/295232 – Glorfindel Mod Jan 26 at 20:40
• A workaround for this is to press Ctrl-backspace to get rid of it, I just found. – Ollie Jan 26 at 22:43
• Thanks for the report! We're seeing a few instances where blocks like these mess with cursor position. This class of bugs is firmly on our radar. – Ben Kelly ModStaff Jan 27 at 23:22

Bug report opened on GH

The following Markdown will produce two images next to each other, but the preview will show them under each other:

![enter image description here](https://i.stack.imgur.com/SQfjes.png)
![enter image description here](https://i.stack.imgur.com/E7aHes.png)


This is what the editor shows:

• I didn't even realise you could put images side by side at all. ._. – Journeyman Geek Mod Jan 30 at 13:08
• @BenKelly this is not exclusive to two images following each other, the same happens when your are in rich mode, insert an images, and type under it. The preview will show the text on a new line, while the rendered version will show the text on the same line as the image. Also see: meta.stackexchange.com/a/362260/361484 (deleted now, as it is mostly a dupe of this) – Luuklag Mar 18 at 15:08
• @BenKelly this is not exclusive to this alpha editor test, see meta.stackexchange.com/questions/362441/… It probably is a problem with how the preview works. – Luuklag Mar 23 at 8:07

As the editor currently exists, it allows image Markdown to be typed in rich text mode without any indication that the user is doing something which won't render correctly. This can be problematic.

Take this recent case from a Teams user posted to MSO (image in case the post doesn't stick around). They typed the Markdown for a post image (![image](...link...)) in the rich text mode of the editor, which lead them to believe that the preview just wasn't enabled for the editor. They failed to see that this editor was different than the one across the rest of Stack Exchange, and then were confused by why their (syntactically correct) Markdown image didn't render.

I'm proposing that there be some mechanism in place to guard against this; maybe some sort of warning for when valid markdown is detected in rich text mode. Another possibility would be to automatically translate that image markdown to the WSIWYG equivalent, just like the editor does when you type > for blockquote or #'s for a heading.

Feature request opened on GH

It's not obvious how to switch between modes on mobile/narrower screens

Would it be possible/desirable to have the mode switch on the left or bottom of the text input?

• Maybe have the mode switch fixed on the right side and the other buttons scrollable. – Cave Johnson Jan 29 at 3:28
• Thanks for the report. This issue is very similar to the one linked by @FranckDernoncourt. I'm follow up with our designers to see if we can't come up with a better long term solution to the horizontal scrolling – Ben Kelly ModStaff Jan 29 at 21:32

When having two tables in the rich text editor, selecting everything and pressing backspace only deletes one table, not everything selected.

To reproduce:

• Add two tables one after the other
• Select both tables with your mouse and hit backspace
• Using ctrl + a to select works as expected
• Oh, this is a strange one. Everything deletes as expected when selecting with CTRL+A, but not when selecting with a mouse. Thanks for the report! – Ben Kelly ModStaff Jan 26 at 22:08

Pressing Ctrl+Enter inserts a newline instead of saving the post. In the old editor, this provided a convenient way to save the post from the keyboard. Since one can enter a newline by simply pressing Enter, Ctrl+Enter has no other special functionality, Since the special functionality it has (leaving code blocks) is also handled by Shift+Enter (and could also be addressed in other ways), it would by ideal if Ctrl+Enter continued to save the post as it did previously.

• CTRL+Enter have now special feature, take a look here: meta.stackexchange.com/a/360070/915027 – Michał Lipok Jan 26 at 23:12
• Shift+enter also (perhaps counterintuitively?) exits a code block. That said, I think your idea would eliminate the need for either unintuitive key combination to be required to exit a code block. – Ryan M Jan 26 at 23:15
• Normally/usually Enter and SHIFT+Enter is used to add two different kind of new line, and CTRL+Enter for post message (or to add/jump to next page in "document" editors). Currently there is a problem with SHIFT+Enter (wondering how to describe the issue I notice) – Michał Lipok Jan 26 at 23:26
• SHIFT+Enter pasted between two lines makes editor unable to normally use KeyDown and KeyUp key’s to go up/down between the entered text. – Michał Lipok Jan 26 at 23:40
• In Rich Text Mode, Enter starts a new paragraph, while Ctrl+Enter is only a newline. This is pretty standard for rich text editing and follows how most text editing software does it. – Polygnome Jan 28 at 9:01
• @Polygnome That's not my experience. A lot of text-editing software uses Shift+Enter to enter a newline. Ctrl+Enter creates a page break in both Microsoft Word and Google Docs. – Ryan M Jan 28 at 9:07

In Markdown mode, Ctrl+K inserts single backticks (inline code) instead of creating a code block like the old editor.

In the old editor, the only time inline code will be used is when only part of a line is selected. However, when an entire line is selected, multiple lines are selected, or nothing is selected at all, a code block is created. Right now, the only way to turn some lines into a code block (other than doing it manually) is by clicking the toolbar button.

• I'm pretty sure this is status-bydesign. Ctrl+M used to insert an HTML/CSS/Javascript snippet; it inserts the code block in this new editor because those snippets don't exist anymore. – Ollie Jan 27 at 18:46
• @Ollie Yeah, you're right about Ctrl+M. I rarely use code snippets, so I didn't know that before. The only thing is that they said the code snippets are temporarily absent in the alpha test and I'm assuming it'll be re-added when the new editor goes live. I guess they're going to use a different keyboard shortcut for code snippets then. – 41686d6564 Jan 27 at 20:06
• You're right, yeah. So maybe status-planned then. – Ollie Jan 27 at 21:18
• Thanks for the report! We're likely going to revisit keyboard shortcuts for the different code types when adding in snippets. We tend to prefer not regressing behavior for these sorts of things, but that isn't a hard rule. Marking as "review" for now, until we decide on the final behavior. – Ben Kelly ModStaff Jan 27 at 23:02

Fine-tuning images: resizing or adding links to sources or full-sized images will need Markdown mode.

That'd be convenient to have a way to resize images in the non-Markdown mode, as I've seen many people resizing images by lowering the resolution instead of using the HTML to change the image's dimension (which is a bit of a pain to type).

• Thanks for the suggestion! We actually had a rough implementation of this really early on in the development cycle, but we removed it since there's no standards compliant way to set size attributes on an image in Commonmark (other than using html, which I prefer to avoid if possible). I'd love to get some sort of support for this use case in place though, so marking as "review" for now. – Ben Kelly ModStaff Jan 27 at 23:05
• @BenKelly It may be helpful to mention that, on public, unlike on Teams, the fact we upload to imgur allows for us to use imgur's resizing links - if you add certain letters to the URL, it will display the image in different sizes or formats. Since this is just a change to the URL rather than any sort of HTML, perhaps it might be easier to implement? Here's the list of letters that will change the image size - meta.stackexchange.com/questions/298818/… – Catija ModStaff Jan 27 at 23:15
• @Catija thanks the issue with these links is that they have images with lower resolution. – Franck Dernoncourt Jan 27 at 23:30
• @BenKelly that'd be very cool, thanks! – Franck Dernoncourt Jan 27 at 23:30
• @Catija thanks, got it, makes sense but I think it is preferable to display the image with the highest resolution but rescaled to a lower dimension – Franck Dernoncourt Jan 27 at 23:39
• Good to know - I guess I've been lucky. I don't tend to have issues with the resized images being legible on my end but I think I have heard that some do have issues with it. I don't have a great solution - but, as the person who's written our internal guide on using HTML to resize images on our Team - I know it can be janky to try and do manually. :D – Catija ModStaff Jan 27 at 23:41

Bug report opened on GH

When in Rich editor mode having an image at the end of your post makes the behaviour unpredictable.

If you press the down arrow to get to the end of your input field your cursor disappears. The only way to regain it is pressing the enter key until it pops back up.

• I'm able to reproduce this. I'm seeing a trend of errors regarding end of document content, so hopefully we can squash them in one fell swoop. Thanks for the report! – Ben Kelly ModStaff Jan 26 at 22:49

Feature request opened on GH

Blockquotes are rendered automatically in rich-text mode, but spoilers aren't.

• Thanks for the report! This is simply because we haven't registered a input rule for them yet. It should be a pretty quick feature to add though – Ben Kelly ModStaff Feb 8 at 19:36

Bug report opened on GH

Inserting a bulleted list trims digits if they are at the start of the list entry

If you want to make a bulleted list from text like this:

3 users need to foo the bar
then the bar becomes foo
4 bars have been foo'd


and you select the text, and press on the bulleted list button it turns into this:

• users need to foo the bar
• then the bar becomes foo
• bars have been foo'd

Removing part of the text you wanted to turn into a list.

If you manually add the - in front of the text you end up with this:

• 3 users need to foo the bar
• then the bar becomes foo
• 4 bars have been foo'd
• Nice find! This is due to the bullet list command being too "smart" (and it backfiring). The idea was that if you're already using an ordered list, the bullet list will replace it. In reality, it should really only do this if you have the ordered list markers on each line AND the marker is correct (e.g. 1. or 1)). There's some undefined behavior for what to do with nested lists, but I'm not so sure we're going to get that smart in handling the edge cases in markdown mode. Thanks for the report! – Ben Kelly ModStaff Apr 21 at 15:13
• Good you identified the cause @BenKelly. Good luck fixing it ;) – Luuklag Apr 21 at 17:37
• @BenKelly possibly related: meta.stackexchange.com/a/363589/361484 – Luuklag May 4 at 19:22

Pasting a text with a link in a table results in the text getting cut:

Markdown used in the demo:

| Column A | Column B |
| --- | --- |
|  | A margin call occurs when the value of an investor's  |
| [Federal call](https://www.investopedia.com/terms/f/federal-call.asp) | A federal call is a legally mandated margin call pursuant to Regulation T. Investors will receive a federal call when their margin account lacks sufficient equity to meet the initial margin requirement for new, or initial, purchases. |

A margin call occurs when the value of an investor's [margin account](https://www.investopedia.com/terms/m/marginaccount.asp) falls below the broker's required amount

fghj


Tested with Windows 7 SP1 x64 Ultimate and Google Chrome 88.0.4324.190 (Official Build) (64-bit).

• For me, it pastes the whole text but without the link. Surprisingly, when copying text with a link from the table and pasting it outside, the hyperlink is also lost in this case. Demo. – 41686d6564 Mar 3 at 5:43

Bug report opened on GH

Images aren’t shown as selected, e.g. in the following I selected from “Google Document” to “blah” and the image wasn’t shown as selected (tested on Chrome with native dark mode+Windows):

• Thanks for the report! I can reproduce this locally. Clicking an image shows it as "selected" (with a focus ring), but not when it is part of a cursor selection range – Ben Kelly ModStaff Jan 29 at 22:10

Toggling between modes causes italics within links to be changed like this:

This seems to have caused the red part to leak into the green one (See rev 20):

I had just deleted an extra space between 'to' and 'delete'.

When making the screen of my browser smaller, some other buttons (undo/redo) become visible and the Markdown label for the toggle switch becomes a logo:

The same happens on Safari on my iPhone (though I have to scroll the toolbar sidewards for the other buttons to become visible).

• This seems like odd behavior to me too. I understand logic of why it was done this way. They are hidden by default (intentionally) and only appear at smaller screen widths because it assumes you are on mobile at the small of a width, and thus would not have access to Mod-Z and Mod-Y keyboard shortcuts. That assumes everyone likes using those and if there's space available, and removes the options for people who might be browsing the site in desktop mode on their phone. Curious if there was some other reason why it was designed this way. – animuson ModStaff Jan 26 at 20:13
• This is the desired functionality. In the spirit of responsive design, we reduce the "Markdown" text to an image to provide more horizontal room for the rest of the toolbar and show the undo/redo buttons since the majority of the cases where the screen is this small are mobile/touchscreen devices. As you note, on very small screens there is a potential for the toolbar still being too big and needing some scrolling. – Ben Kelly ModStaff Jan 26 at 22:21
• I don't think adding new buttons is in keeping with "the spirit of responsive design". – Cody Gray Jan 29 at 0:45
• @BenKelly What about people on tablets, which have big screens, but no keyboard? – Paŭlo Ebermann Feb 2 at 17:45

A lot of elements, such as spoilers, tags, blockquotes etc., rendered immediately in the preview as soon as you finished typing them in the old editor. In this editor, I have to toggle between Markdown and Rich mode in order to get them to render. I get it in Markdown mode, since it’s supposed to show only Markdown, but it would be nice if they rendered immediately in Rich mode.

• I'm not quite sure I understand the issue being reported. We do support a few input rules where a limited amount of markdown typed in rich-text mode gets converted into a styled block (typing >  or #  for instance), but otherwise any text typed is just text. What behavior is it that you're seeing and what behavior is that that you are expecting to see? – Ben Kelly ModStaff Jan 29 at 21:23
• @BenKelly In Rich mode (the old editor's equivalent of a preview, I guess) spoilers, tags and a few others don't render immediately, like they did in the old editor's preview. Is Rich mode too different from that? – Ollie Jan 29 at 21:27

When adding a picture, you can click it in rich text mode, and a popup will appear (you may need to scroll due to this bug) where you can enter the image source, the image description and a title text. Similar to this related bug, the popup is displayed inside a <div draggable>, together with the picture. Since a mouse down or mouse up will be interpreted as a drag start or drag end, respectively, and moving the mouse while holding it down is interpreted as a drag action, it is difficult to select text within the popup or to place the cursor at a specific point.

• On Firefox, the drag always starts, no matter what you do. You can only focus a specific text box with your mouse, but beyond that you have to use your keyboard.
• On Chrome, you can actually use text boxes normally, but click-and-drag to select text is only possible if you’re clicking in the boundary of the text itself; clicking the padding of the text box still triggers the drag action. Double-clicks and triple-clicks work fine.

Example below. You can click the edit link, enable rich text mode, click the image, and try to adjust (or even read) the text in the image description and the title text (and the image source) using your mouse.

Example picture is 1000 years Old Thanjavur Brihadeeshwara Temple View at Sunrise from Wikimedia Commons; public domain.

• If I start drawing my mouse on the text, it works form me as expected, but it's still a bit annoying that even if it's one pixel off of the text (not the textbox), it starts dragging. – FZs Feb 10 at 14:50
• @FZs Ah, there’s a difference between Firefox and Chrome! On Firefox, it doesn’t work at all. – Sebastian Simon Feb 10 at 15:20
• Oh, yes, I used Chrome. – FZs Feb 10 at 15:25

Bug report opened on GH

When copy-pasting a post when Markdown is switched off, it’ll add plenty of new lines and some components such as tags are not copied properly. (tested on Chrome+Windows)

E.g., before copy (https://meta.stackexchange.com/a/360077/178179):

after copy:

• That might be hard to do as you are copying the rendered output which doesn't carry information about markdown code. It would be the same as trying to copy from the preview in the existing editor. A simple workaround would just be to turn on markdown mode before copying. – Cave Johnson Jan 27 at 17:42
• Thanks for the report! Some info about copy/paste that you didn't ask for, but I'll explain anyways: When copying into the clipboard we actually get the html representation of the content. On paste, we try to take that html representation, figure out what it maps to on our end and then add the correct nodes to the document structure. This is why copying from e.g. Google Docs tends to carry over the formatting on paste. As you can see with the pasted tag, we don't have this perfect quite yet, but we're working on it ;) – Ben Kelly ModStaff Jan 29 at 22:15
• @BenKelly thanks for the information! Getting some info on points we didn't raise is typically a great way to learn. – Franck Dernoncourt Jan 29 at 22:23

On Google Chrome on Android, one can't access the table menu to alter the table structure (add/del rows/cold).

Demo:

Tested on Android 10 with chrome 89.

• I can't reproduce this issue on Chrome 89 on Android. Can you provide reproduction steps? My repro steps are: 1) Rich text mode 2) Create table by tapping button 3) Tap table cell 4) Tap table button (can see menu) 5) Tap remove column or similar – Ben Kelly ModStaff Mar 16 at 15:23
• @BenKelly Demo: i.stack.imgur.com/ENIEY.gif using the same steps as yours – Franck Dernoncourt Mar 16 at 18:23
• Oh! You're in markdown mode. We only support the column/row commands in rich text mode currently. The reason being that it is so much simpler to manipulate nodes than it is plain text. – Ben Kelly ModStaff Mar 16 at 19:38
• @BenKelly got it, good catch! – Franck Dernoncourt Mar 16 at 19:39

It appears to be fixed, not sure about that status-planned tag

Extra sidebar in toolbar menu & incorrect SVG rendering in image upload modal

There's an annoying scrollbar on the new editor which appears even when there is no content in the textarea.

When you put a lot of content in it two scrollbars appear.

This can be sort of annoying. It appears that it can be fixed by setting the toggle button's height to 23px instead of the current 24px.

Specifically, here:

Oddly enough, I also ran across a bug when I tried to upload an image in this answer. It displayed something really quirky:

• We noticed this a couple of hours ago and are digging into what happened. Thanks for the report. :) – Catija ModStaff Apr 1 at 1:44
• @Catija Thanks for the update. I also ran across a quirky bug with the image upload. – Spectric Apr 1 at 1:46
• According to our design systems lead, that's our SVG imgur logo rendered as text. We'll... dig into that, too. Thanks! :D – Catija ModStaff Apr 1 at 1:49
• Thanks for the report! I've found the root of both issues and will have a fix deployed later today. The odd scrollbar is due to switching the toggle to use a new Stacks component (Stacks is our internal design system) and in this scenario, some dreaded legacy code is adding some margins that's causing the overflow we're seeing here. As for the image uploader, I added some fixes to mitigate potential XSS bugs (found by an eslint rule) and the sanitization was a little too eager in this cases... – Ben Kelly ModStaff Apr 1 at 14:50

Image in the table causes some periodic movement (Windows 7 SP1 x64 Ultimate + Google Chrome Version 88.0.4324.146 (Official Build) (64-bit)):

Markdown code:

| header 1 | header 2 | header 3 |
| --- | --- | --- |
| cell 1 | cell 2sd   sdf |  |
| sdfcell 3 | klkl<Bjjj![](https://i.stack.imgur.com/MIT9D.png) |  |
| cell 4sdf | cell 5 | cell 6 |
| cell 7 | cell 8 | cell 9 |

jk,
jk,

jk,jk,

• Oh, who doesn't like perodically moving tables? ;) Good catch! – FZs Feb 7 at 9:08
• Oh, fun... Thanks for the report! We'll look into it. – Ben Kelly ModStaff Feb 8 at 19:40

When inserting a new image via CTRL + V, directly upload + insert the image, as GitHub, Gmail, Outlook, etc. do (= no need to click on "add image").

Example in GitHub:

• This can be rather problematic for accidental image uploads. GitHub likely provides more support for deleting images. We do not. We will only ever delete images that contain sensitive information that shouldn't be in them, meaning users who accidentally upload things because e.g. they forgot it was in their clipboard are out of luck if we just auto-upload it without verification. – animuson ModStaff Jan 27 at 15:48
• Also you no longer need to wait for the upkoad to finish, you can just continue working on your draft. – Luuklag Jan 27 at 16:03
• @Luuklag thanks, I'll edit the feature request accordingly – Franck Dernoncourt Jan 27 at 16:05
• @animuson but as long as the post isn't submitted, the only way to see it is by guessing the URL, which is very very hard to do. And even if one see the uploaded image somehow, it can't be linked back to the one who uploaded it. Risk here is very mininal. – Shadow Wizard Wearing Mask V2 Jan 27 at 16:43
• @Shadow That doesn't mean people will not still write to us demanding it be removed, which we do not do. – animuson ModStaff Jan 27 at 16:51
• @animuson I can only assume the amount of people who write to you asking to add the ability to paste images is greater... and amount of people who want it and don't ask for it is much bigger. :) (the current paste works only for Chrome, and requires extra step - while not bad, people these days are spoiled) – Shadow Wizard Wearing Mask V2 Jan 27 at 17:00
• @Shadow This isn't requesting a feature for pasting or drag-and-drop to work in more places. It is asking for the image, once pasted, to automatically upload without any verification of the image to be uploaded (not requiring the user to click on the "Add picture" button after the paste). – animuson ModStaff Jan 27 at 17:13
• @Shadow I would say even if the amount of people asking for the feature is far greater, it's easier to ignore them. oops, I mean redirect them to MSE. But people asking to delete an image can be more problematic for SE staff especially if the image might contain sensitive information by mistake (GDPR and friends come to mind). I would still be against this feature request as long we can't delete uploaded images. – Dan Jan 27 at 17:28
• Fair point, @Dan – Shadow Wizard Wearing Mask V2 Jan 27 at 18:53
• @Dan GDPR and friends are exactly why SE should have some automated process to remove images, which would then make this feature more privacy friendly. – Franck Dernoncourt Jan 27 at 19:41
• I agree with @animuson on this. Instant upload with drag-and-drop is fine, IMO but not with Ctrl+V. One might accidentally paste something that they don't wish to have uploaded to "the web". Sure, one should be more careful when dealing with sensitive data because you can't trust what a form will do with texts/images once inserted, so it's arguably the user's fault, but still. – 41686d6564 Jan 27 at 20:26
• @animuson There's a middle to be split here. There's strong reasons why you wouldn't want to start uploading without a confirmation step. But you can still launch that confirmation dialogue directly on copy-paste/drag-drop from the text window (without needing the extra step of clicking an "add image" button). – E.P. Jan 28 at 12:03
• @E.P. That's how the editor behaves now, you can paste an image directly into the editor without the need to first click the add image button in the toolbar. And you get a confirmation showing you the image you pasted before uploading it to imgur – Dan Jan 29 at 14:40
• @Dan Yeah, I realized that after posting. I guess I'll leave my big d'ough there as a warning to others ¯\_(ツ)_/¯. – E.P. Jan 29 at 14:41
• I think it’s possible with the File API to create some fake Markdown like ![enter image description here](#image1) (or even a “reserved”, proper Imgur URL) which renders as the uploaded image, and only when hitting the Post button, the images are uploaded to Imgur. This, however, would break the workflow of copying an Imgur URL into a comment and discarding the post. Being able to delete Stack Exchange Imgur images would solve this problem and any GDPR problem in one fell swoop. – Sebastian Simon Feb 1 at 3:01

Looks like there is a bug if you post in both modes. That is, you start off posting in Markdown mode, then finish the post out of Markdown mode. Most notably, the text gets pushed into a code block by default. If you toggle the Markdown a bit back and forth, it seems to sort itself out....

EDIT: Ok I think I’ve figured out what’s going on and how to reproduce it. If you copy some text from a post that is in Markdown, and then paste that text into a post without Markdown, the pasted text will be in a code block of some kind with the word ‘plaintext’ off to the right.

All subsequent text is also captured in the ‘code block’. If you delete the code block, or toggle in and out of Markdown mode enough times, the block eventually gets rendered out of existance and the text looks correct.

[tag:feature-request][tag:mobile-chrome] This was copy/pasted from another post on this thread that had Markdown enabled to demonstrate what's happening.

• Yep, had a similar problem as well. meta.stackexchange.com/a/360137/172297 – Dan Feb 5 at 16:17
• I was about to report this. I'm guessing its auto-detecting 'code' and markdown looks code-like enough to trigger it. Switching to markdown to paste the text seemed to work though – Journeyman Geek Mod Feb 18 at 0:23
• @JourneymanGeek, Yes the work-around is 'easy' I suppose. But, as was explained in the comments to the other answer pointing out this issue, I think the vast majority of the human population expect to copy some text, and have that and only that pasted into whatever else they paste into. If they want to implement a paste special, even if they have that on by default (but allow for a paste-as-plain-text-option), fine. Otherwise it's a clear bug. – ouflak Feb 18 at 11:11
• Oh, I agree its a bug. Its also something likely to bite more experienced users in the ankle :D – Journeyman Geek Mod Feb 18 at 11:14

Seeing that the editor does exactly what you tell it to do, I've tagged this as FR, and not as a bug.

If you select part of your text to format it in bold the new editor wraps it in double asterixes (as is expected):

Here is some text to test with a **bold part** in it.

If I now select an overlapping part of text, say "test with a bold" and make that bold as well the editor wraps it in double asterixes again (as expected):

Here is some text to **test with a **bold** part** in it.

This now renders as:

Here is some text to test with a bold part in it.

Which is technically correct, but I think it would be more convenient if the result would simply be:

Here is some text to **test with a bold part** in it.

Which is similar to what text editors like MS Word do.

ps. This holds for the other buttons, like Italics and inline code as well.

Tables don't copy and paste from Google Docs

I attempted to copy and paste a table from Google Docs in the editor.

The editor brought it an as plain text.

• I'm pretty sure they won't paste from Office 365 either. Or a desktop word processor for that matter. I don't expect this to work from a Google Sheet either (checked it, and indeed it doesn't paste a table) but restricting to the Sheets format might be easier to implement. – rene Feb 18 at 16:39
• Duplicate of: meta.stackexchange.com/questions/360033/… ? – Luuklag Mar 6 at 10:18

DDon't double the first letter of the text.

FF Android.

Reproduction steps

• On Firefox on Android, start in either editor mode
• Type a single character, followed by any other character
• Note that the very first character appears twice
• This happens to the first character on any line
• Thanks for the report. I can reproduce on Firefox Focus on Android, but not FF 84 on Android. I've edited your post to include clearer reproduction instructions as well. – Ben Kelly ModStaff Jan 29 at 22:04
• @BenKelly Thanks for reviewing this. --- The exact version of my browser is: 85.0.0-beta.9 (Build #2015787947) - AC: 70.0.14, 0de6d8b65 - GV: 85.0-20210115192513 - AS: 67.2.0 (From Google Play Store). – Rob Jan 29 at 22:49
• I can no longer reproduce this on FF Focus on Android. I think it must have gotten fixed upstream. Marking as complete for now. – Ben Kelly ModStaff Mar 16 at 15:24

My entire answer was deleted when I went to edit the question

I have not used this editor much (maybe 2-3 answers), but I discovered a fatal flaw: when in markdown mode, my answer is wiped out a few seconds after I click edit on the question (which happens inline due to me having 2k+ rep). When the answer is in WYSIWYG mode, it simply wipes out what I have in code fences.

So far, this has only happened to me when I was answering a question. In this case, I was able to recover by refreshing the page to access the autosave. I posted my answer there, and the same thing happens to me when I am editing the answer then click to edit the question. It's not caused by an extension and there are no console errors.