Finally DEV has an editor to make creating your MarkDown a little easier. I thought I would run it through its paces and see how much easier it makes things!

You can read the announcement here:

Feature update: Markdown Toolbar

Amy Lin for The DEV Team ・ Nov 29 '21

#meta #product #ux #changelog

So how does it stack up?

Keyboard shortcuts

**Bold Text**

CTRL + B - works like a charm!

_Italic Text_

CTRL + I - works beautifully!

Underlined Text

CTRL + U - works but then it opens "view source"!

[Hyperlinks](#)

CTRL + K - works but then it opens "search Google" in the search bar!

~~Strike Through~~

CTRL + Shift + X - Works like a charm again!

And that is it!

Currently no keyboard shortcuts (as far as I can tell) for ordered lists, unordered lists, headings, quotes, inline code, code blocks or images.

Hopefully those are in the works though as those are some of the things that are the most frustrating (a shortcut for codeblocks to include 6 backticks and place my cursor in the middle would be great for example!)

Usability

Being able to quickly make text bold etc. via keyboard shortcuts is great.

It doesn't matter if you write markdown fluently or not, it does save time being able to go back and fix formatting with Ctrl + B.

The undo queue is broken!

However there is a big problem, if you use a keyboard shortcut or press one of the buttons in the editor ribbon it doesn't get added to the undo queue!

In fact, the second you use any shortcut or ribbon button the undo queue gets broken, so pressing CTRL + Z no longer works!

This makes the editor frustrating when you make mistakes, but I am sure the fix will be straight forward!

It needs more keyboard commands!

The next thing is the limited keyboard commands. While I am so happy that I can embolden, underline etc. the things that take the time don't have keyboard shortcuts.

Ctrl + 4 for a heading level 4 would be great for example!

Luckily we can press Shift + Tab to get to the toolbar and do things from there.

Keyboard usability

So the question is, is the toolbar usable with a keyboard?

Yes, for the most part.

Once you are on the toolbar you can easily use the arrow keys to select the item you want and then press Enter.

The only problem is that once you select an item, such as a heading, the article writing section does not move your addition into view automatically.

In fact, when you Shift + Tab to the toolbar the editor scrolls to the top, which is very confusing.

This is nothing new so I cannot blame the editor for this, I had the same problems when I built a MarkDown editor for DEV.

And because the DEV (FOREM) team are up on accessibility there are decent focus indicators, labels on buttons etc. so at first glance it looks pretty accessible so that is a big thumbs up from me!

One MAJOR Issue I am not sure if it is new?

There is a keyboard trap on the editor, but I am not sure if this is new or not, hence why I have added it separately.

If you Tab into the tags section you can't get out of it again.

Pressing Esc should close the drop down or you should be able to tab out of it (and use arrow keys to select items like a normal <select>).

This is a major accessibility issue as there is no way to escape the drop down other than reloading the page or clicking outside it with a mouse (as far as I can tell)!

Where does it fall short?

There are a few features which are not quite there yet.

The broken undo queue

I mentioned this previous but it is such a pain I thought I would include it here too. If you accidentally delete a chunk of your content and press the wrong key after, you will not get it back!

<ol> and <ul>

The ordered list and unordered list buttons work great if you have a few items that you want to turn into a list, just select them all and press the relevant OL or UL button.

But where they missed a trick is that pressing that button should enable auto numbering or automatic insertion of - if I press Enter.

Maybe I just need to get use to writing a list and then going back and adding the numbering / - after using the editor.

Images uploader

Also the new image uploader is an awful implementation I am afraid to say (sorry DEV team, I do love you even if I am a critic!).

When testing it they obviously only wrote articles in a linear fashion (write article, add image, write more, add another image).

They didn't account for the fact that some people will add images after writing the article.

Currently when you add an image it inserts a temporary "loading image" MarkDown placeholder ![Uploading Image]().

Now if you type anything while this is showing all the text shows at the very beginning of the document.

Once it has finished uploading the image and changes the placeholder to the final image markdown, anything you type will appear at the very end of the document.

Oh and the final problem, if the image takes a while to upload and you change the ![Uploading Image]() placeholder, it doesn't get replaced!

This is awful for keyboard users.

I am sure the fix will be straight forward in that they should just:

• focus the alt text for the image after upload is complete
• show the loading outside of the document instead of within it
• only do the insert and moving focus position after the file has uploaded!

On top of that if you try and upload the same image (say you accidentally deleted the image markdown) straight away nothing happens.

This is even more confusing!

If this happens to you, upload a different image and then delete it and then reupload the actual image you want to upload, this fixes it.

It needs more features vs the "we wanted to keep it simple" argument.

A lot of people will try and defend the editor not having many features as they want to keep it simple. The DEV team even said that in their article.

I say that is a rubbish argument!

How difficult is it to have a button that says "launch advanced editor" that shows on the new post editor screen and then show all the buttons if someone wants them?

Then you can add as many features as you want and keep it simple for everyone else. Eventually this could be a user setting like the current rich editor vs plain editor.

I, for one, do not struggle with bold, italics etc. Those are easy in Markdown once you have learned them.

No, it is things like tables, remembering liquid tags, having to write numbers for ordered lists etc. that slow me down. Those are the things I want in an editor!

I know they are looking to change some liquid tags to all say "embed" or similar, but even then some have settings to remember etc. A button to insert them would be waaaay more useful than an editor for most people.

Conclusion

Look it is hard to criticise the DEV team, especially when this is a feature I wanted that much that I built my own.

But in this instance I feel like it isn't quite there yet and certainly wasn't ready for release.

It doesn't save much time.

While writing this article I just started writing markdown by hand and I think most people will end up doing the same (the editor is a good tool for learning basic markdown perhaps).

It takes too many steps to add headings, codeblocks etc. They need shortcuts!

With that being said, it does save time when reviewing the article, you can go back and make corrections quickly if you need to wrap something in **, for example.

But I can't help (without sounding too big headed) in thinking that they could have done better, considering I hacked an editor together in less than 2 days that is (ironically) more robust and has way more features.

My editor

Ah time for some shameless self promotion!

For now, if you write in the DEV editor my hacky solution using a bookmarklet is probably still better.

It has loads of issues (like if you preview the document then the editor disappears when you return to the editor page...I really need to work out how to sort that one!) but I still find it worth it for mid complexity documents.

And ironically it is has fewer issues than the native markdown toolbar (in fact if I fix the issue where it disappears when previewing it doesn't tend to go wrong much...despite the spaghetti code!)

Yet again, sounding big headed but the DEV team should really look at how I implemented things (not the code as it is awful, more the usability) such as:

• tables,
• auto numbering lists,
• liquid tags,
• and finally the file uploader!

Anyway, that is my big headed moment, I am off to read some CSS posts from @afif and @alvaromontoro so I can feel small brained again!

So here is my promise to you:

Finally: Let me know if you agree with my assessment of the editor. Am I being overly critical (probably), do you think it is useful as it is etc!

Final aside: I want to make it very clear that I love the fact the DEV team have added this and although the article is critical, overall it is a great addition and the work they are doing to improve the site is awesome! ❤🦄