DEV Community

loading...
Cover image for 7 new features, 51.3 new bugs added πŸ˜‹, the DEV.TO πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» editor [PART DEUX!]

7 new features, 51.3 new bugs added πŸ˜‹, the DEV.TO πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» editor [PART DEUX!]

inhuofficial profile image InHuOfficial ・8 min read

Welcome to the dev.to editor version 0.02! My attempt at creating an editor for dev.to to make writing articles easier!

If you didn't read my first post on this then take a couple of minutes to go play with that

All caught up? Great, let's see what improvements have been made!


Just let me play with it, I don't want to read!

Feeling impatient? I have a quick link to jump to the instructions for how to try it yourself just for you!

It is desktop only at the moment as it uses bookmarklets, on mobile you will just have to look at the pictures I am afraid until you get to a computer!

However if you do stick around I do have a load of pretty GIFs showing off some of the features!


Anyway, I bet you are wondering, what has changed in version 0.02?

The interface got a facelift!

Custom iconset designed in illustrator for dev.to

I designed a set of custom icons just for dev.to.

They are rough around the edges but overall I think the general aesthetic is pretty close to that of dev.to.

The new editor design using modern and simple icons for features

With regards to the modals and other interface items...they aren't styled yet! This is a long way from a polished product but hopefully you can see where this is going!

A complete code redesign

The original editor used a "wrap" function to wrap selected text in markdown.

Now this was fine for basic stuff like bold text **bold** but for more complex things it started getting a bit "janky" (yes, that is a technical term!)

So instead we now have a template based system with regions that can be replaced with user content.

Still a long way to go in tidying the code up but adding new markdown features is easy now.

The other thing that was (and still is to some extent) an issue was the way that changes were applied. There is no choice but to update the whole <textarea> which means a lot of focus management. However I have improved the way items are handled and introduced a "undo" feature, just in case things go very wrong!

New features

Oh there are loads of things:-

headings 2-6

adding headings demonstration

The issue I had previously was that headings were assigned to the numbers 2-4 and I couldn't add level 5 and 6 as I used those numbers for other features.

I now have a system where instead of Ctrl + {number}, you now press Ctrl + H and then immediately after the heading number you want.

This has freed up all of the number keys for other uses (still working on the keyboard shortcuts!

Why no heading level 1 I hear you ask? Accessibility.

Despite being allowed under HTML standards and WCAG multiple <h1>s are not ideal for screen reader users as it is not expected behaviour.

Further text decoration!

formatting text bold, italic, underlined and with a strikethrough demo

I had bold and italic text all worked out, but now I have added strikethrough and underline to make life even easier!

ordered and unordered lists

adding ordered lists demo

Adding an ordered list is simple now with automatic numbering!

It also removes white space between list items to keep everything clean!

I also added unordered lists for ease.

Tables!

This one I am particularly proud of.

Tables are annoying to create in Markdown.

With the editor you simply click the tables button and a popup asks how many rows and columns you want and then inserts the table for you.

Updating tables

adding a table and then adding 2 rows and then adding 2 columns using the editor demo

Even better, the editor lets you position your cursor within a table and then add rows or even add columns in a couple of clicks. As tables are unruly in Markdown this can really make a difference.

I have a further improvement for tables coming in version 0.03 to make them even easier!

Footnotes

Automatic footnotes in just one click1.

Liquid Tags

showing how to embed a tweet, a youtube video and a dev.to comment

The previous version handled a couple of liquid tags, such as jsFiddles and codepens.

This version can handle:

  1. jsfiddles
  2. codepens
  3. glitch
  4. Dev.to links to other articles
  5. Dev.to links to user profiles
  6. Dev.to links to tags
  7. Dev.to links to comments
  8. Dev.to links to podcasts
  9. Dev.to spoiler / collapsible section blocks
  10. Tweet Embeds
  11. Github Repo cards
  12. Github issues, PR and comment cards
  13. Github Gists
  14. YouTube video insertion
  15. Twitch video insertion
  16. Vimeo Video insertion
  17. Medium article links

There are still about 15 more liquid tags to add in but that is a decent start!

There is also some simple logic in place to select the correct parts from URLs that a liquid tag expects to see. (for example adding a card for a dev.to user only expects their username, the editor will strip that from a full URL for you)

Images!!!!!!

adding images with alt text prompts and image preview

This one was a fun one to implement. Instead of having to upload an image and then copy it where you want I built a whole interface for adding images.

Also to try and persuade people to be more mindful of accessibility I added an image preview and alt description screen where we prompt the user to enter a meaningful description of the image.

And above all else....it actually just places the image directly in the Markdown at your current cursor position, no more fiddling with copying the URL!

Obviously I hid the original dev.to image selection to keep the aesthetic consistent (I literally just positiond my editor over the top of it! An accessibility issue to solve later πŸ˜‹).

This made it really interesting as I had to upload to the dev.to API in the same way they do so that images are stored correctly and as if they were uploaded with the dev.to current editor.

Luckily their API is simple enough and once I figured out I had to grab and upload the authenticity_token with the image it all works as expected.

Accessibility Considerations

Now it still isn't fully accessible, but it is a lot better.

Preword on sticky keys....my key choice was dumb AF! - the "\" key is obviously very useful when writing if you want to escape anything, I will be changing this to another key / key sequence so it doesn't make the editor unusable!

sticky keys

The main thing I have created is a one-handed operation mode with sticky keys.

Pressing "\" on your keyboard puts sticky keys on temporarily (until an action is performed).

This allows you to press "\" and then press "o" separately to add an ordered list item for example. At this point sticky keys switches itself off so you can write freely.

However if you press "\" twice sticky keys is fixed on, meaning you could press o multiple times to set up an ordered list ready for populating.

You can always switch it off again by pressing "\" one more time!

One handed operation has a second benefit. When I get to the mobile version of the editor it becomes usable with shortcuts as we can set a sticky key instead of using Ctrl + {key} for shortcuts!

What else are you going to do for accessibility?

I also plan to allow toggling between different modes for the buttons for people who struggle with icon comprehension so that they use text instead.

I am going to fix the tooltips so they show when buttons are focused.

I am also going to make sure the editor buttons follow colour themes on the site as at the moment they only work on white theme!

Finally as I said I am going to make a mobile version of it with some clever text selection features that should make it usable for people with dexterity / accuracy issues!

OK it looks great, how can I use it?

At the moment the only way to use it is via a bookmarklet.

  1. drag the link in the fiddle to your bookmarks bar
  2. navigate to https://dev.to/new and click the bookmark you just added
  3. the editor will magically appear ready for you to experience all the bugs!
  4. Try out "Ctrl" + (B, I, E, L, Q, R, H (then 2-6), O and U) or click the buttons! Also with some features select text first (i.e. select some text, press "Ctrl" + "B" and it will be wrapped in ** to be bold...simples!)

Alternatively create a new bookmark, click "more" and paste the following code into the "URL" field and save the bookmark.

javascript:(function (){document.getElementsByTagName('head')[0].appendChild(document.createElement('script')).src='https://inhu.co/dev_to/experiments/bookmarklet/bookmarklet-v2.js?'+Math.random();}());
Enter fullscreen mode Exit fullscreen mode

I found a bug

I am really not surprised, it is all held together with bubblegum and sticky tape at the moment.

However I would really appreciate it if you could drop a comment letting me know what you found so I can see if I can fix it.

p.s. Chrome bugs only at the moment please, I will fix "the Fox" etc. later once the Chrome version is stable.

Bugs I am aware of:

  1. if you preview the page and then come back to the editor the editor is lost.
  2. If the editor is lost pressing the bookmark again causes a variety of bugs so you have to reload the page.
  3. tables can really go wrong if you accidentally select some text.
  4. editing items towards the top of the page cause the page to jump to the bottom due to replacing all the text.
  5. numerous "niggles" with strange positioning of focus indicator or weird behaviour with certain selections. Feel free to point out any you find just in case I missed some!

I am working on fixes for all of them!

Are you going to make this a plugin / extension?

I am indeed! As was suggested in the comments I am going to make it into a user script and then ultimately a chrome extension!

You can also consider creating a user script that can be used with tools like: chrome.google.com/webstore/detail/... .. it would be more convenient for many of us

Either that or if enough of you "@" ben and jess they may decide to implement this themselves as part of dev.to (so it should be a lot less buggy! 🀣).

Conclusion

As you can see it is a long way from finished but I am thoroughly enjoying the challenges this project is throwing at me.

I mean, I wrote this whole article using the editor and it was....well let's just say it was easier than remembering all the liquid tags but still not ideal with the preview bit breaking things 🀣.

It will probably be at least a month before I have something that is fully usable but I will keep putting updates up as I make improvements.

If you have made it this far then you deserve to know the next thing I am working on.....a live preview pane to the right that is synced to the editor pane (which will move over to the left). That is also a way to solve the "preview problem" in the short term πŸ˜‹.

Follow me if not having to switch backwards and forwards between panels excites you as much as it excites me!

inhuofficial image

  1. See, what did I tell you, a footnote! ↩

Discussion (21)

Collapse
citizen428 profile image
Michael Kohl

I'm not sure if you're using this already or if it helps you but there's a currently unused API endpoint that returns a list of all available Liquid tags:

github.com/forem/forem/blob/c842d1...

Collapse
inhuofficial profile image
InHuOfficial Author

Well I wish I had known that before, I’ve hard wired them all in now lol!

I will go have a fiddle with that anyway as it might be super useful for other stuff! Thanks.

Collapse
citizen428 profile image
Michael Kohl

It's really just a list of tag names though, no usage instructions or anything else. This started as a little experiment but alas so far we haven't gotten around to building a frontend for it. Cc @nickytonline , some good stuff in this post.

Thread Thread
inhuofficial profile image
InHuOfficial Author

Thanks, did you get chance to play with it as feedback from someone β€œthe the trenches” at DEV.to would be great!

Thread Thread
inhuofficial profile image
InHuOfficial Author

In fact hang fire, I might be able to push part 3 out later this week and that has even more toys!

Thread Thread
citizen428 profile image
Michael Kohl • Edited

Nice, looking forward to it. I'll give it a try though I'm not one for WYSIWYG editors myself.

Collapse
shahednasser profile image
Shahed Nasser

I didn't go through it all thoroughly but it looks nice! I suggest making it a chrome extension. I've created many extensions and can help out if you'd like (if this is an open-source project we can contribute to)

Collapse
inhuofficial profile image
InHuOfficial Author

When i Get it to 90-95% then I will defo open source it and the help would be appreciated!

I do plan on making it an extension and as I have never made an extension being able to "pick someone's brain" when things inevitably don't go as planned would be great! thanks!

Collapse
shahednasser profile image
Shahed Nasser

Sure, let me know if you need any help! I’ve worked on both Chrome and Firefox extensions and I know them in and out pretty well.

Collapse
12944qwerty profile image
12944qwerty

Suggestion:
Give the icons titles? Just a keyword or two for each icon when you hover over it.
Give buttons more aesthetic other than just fitting the color themes.

Also, undo/redo doesn't work very well. Not sure if it's how I'm testing it though.

Can't wait to see what the "?" button will do XD

Collapse
inhuofficial profile image
InHuOfficial Author

Icons do shown hints if you hover long enough, that is one I am defo working on!

Undo redo might need looking at, it is a crappy implementation that just saves the last change you made using the editor itself (so if you press Bold it will save it then) plus every 15 seconds it takes a snap shot. So probably not you it is my crappy code 🀣🀣

? Is just help - don’t get too excited about that one πŸ˜”πŸ˜œ

Collapse
12944qwerty profile image
12944qwerty

Hmm, couldn't you just use the title attribute of a tag instead of the title tag? As far as I know, the attribute works perfectly fine.

So I just tested the undo-redo again.... and it works. Until I click the text box again, where it resets to what it just was.

I'm still confused as to what sticky keys do... Not sure if I skipped a part of the reading in the first version or something...

Thread Thread
inhuofficial profile image
InHuOfficial Author

So the SVGs have a title - I will actually grab that and build a proper tooltip as there is a lot to consider such as it showing when a button is focused not just on hover (so that people who can only use a keyboard can read them too or people on touch devices. Unfortunately the title attribute won’t work for that.

Looks like a bug you found! Only 52 others to find and you found all the ones I know about 😜. Seriously though is good to know so I can look into it. Thanks!

Sticky keys is for one handed operation. So instead of pressing Ctrl + b you can press \ and THEN press b. It is a way of making the system more usable for people who only have use of one hand etc. Needs some work though as the \ key is useful for escaping characters and at the moment you can’t use it at all!

Collapse
geekie profile image
Geekie

Why doesn't DEV have an official visual editor anyway? I get it that everyone here has no problem with coding, but still a visual editor would make posting much more efficient. Remembering and typing the markdown code cost a lot of brain powder and calories!

Collapse
inhuofficial profile image
InHuOfficial Author

Don’t know to be honest, might be something to do with the forem model, might just be something they haven’t got to yet! A good question to ask with the #meta tag!

Collapse
inhuofficial profile image
InHuOfficial Author • Edited

I look forward to seeing what people who tried the first version think of the improvements (ignore the bugs....I said ignore the bugs 🀣🀣).

Collapse
12944qwerty profile image
12944qwerty

I can't remember what the first version looks like anymore :D
This version is absolutely great!

Collapse
andy profile image
Andy Zhao (he/him)

Really impressive work!! A WYSIWYG editor is super helpful, especially because not everyone is used to writing in Markdown.

Collapse
inhuofficial profile image
InHuOfficial Author • Edited

Thanks, for me the main thing wasn't the markdown but more the liquid tags. Plus I still like being able to press CTRL + B to bold some text, it just feels nicer!

Hopefully I get to push the next version this week which will have side-by-side preview and editor, but I have to admit I decided to go the hard route and write a markdown parser to HTML converter (rather than just grab a good one off the shelf!) and it really is not as easy as you would think so it might be a couple of weeks! 🀣

Collapse
khangnd profile image
Khang

This looks really nice, and the simplicity is just perfectly convenient.

Collapse
inhuofficial profile image
InHuOfficial Author

Thanks, if there is anything you want to see adding or any improvements you think of just let me know!

Forem Open with the Forem app