Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
November 29, 2021 11:55 am GMT

The DEV editor - I give it but it is a good start!

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!

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~~
Works like a charm!

And that is it!

Currently no 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 + 2 for a heading 2 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!

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 anything you type will appear at the every end of the document.

Oh and the final problem, if the image take 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 and show the loading outside of the document instead of within it and 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.

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:

If this article gets 10 comments that say you want my dev.to editor turning into something more usable then I will turn it into a Chrome Extension / do something with it to make it usable and tidy it up.

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!


Original Link: https://dev.to/inhuofficial/the-dev-editor-i-give-it-but-it-is-a-good-start-4dh8

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To