GrahamTheDevThis is is just a proof of concept, if there is enough demand I will refine it and improve it but it suits my needs for now, hopefully it will make life easier for you too!
Introducing a "WYSIWYG" for dev.to
If you are new to dev.to and are about to write your first article you may find the editor a little bit confusing.
Liquid Tags, markdown etc. are not particularly friendly if you aren't used to using them.
Even if you are a veteran Markdown user, creating documents in dev.to can be laborious having to type everything by hand.
Well struggle no longer, I present to you dev-WYSIWYG! (I know this isn't technically a WYSIWYG but it was easier to call it that!)
It is a bookmarklet (currently pointed at my server but once the bugs are ironed out it will point to github) that gives you bold, italic, headings and more!
Even better, every command has a corresponding keyboard shortcut with Ctrl + Key Name
Keyboard commands:
Simply press Ctrl + the modifier key shown in the buttons.
For example for a codepen liquid tag (to display an inline codepen) press Ctrl + 5
Commands are:
- Ctrl +2: heading 2
- Ctrl +3: heading 3
- Ctrl +4: heading 4
- Ctrl +B: bold
- Ctrl +I: italic
- Ctrl +L: link
- Ctrl +K: inline code (backticks)
- Ctrl +Q: block quote
- Ctrl +R: horizontal rule
- Ctrl +0: Code Block (triple backticks)
- Ctrl +5: Inline Codepen
- Ctrl +6: Inline jsFiddle
- Ctrl +7: inline dev.to article link card
- Ctrl +8: inline dev.to user profile card
- Ctrl +9: inline dev.to comment card
If you are used to stackoverflow controls a lot of them are similar so it should be easy to pick up!
Behaviour
If you have text selected then it will use that text within whatever tags are being inserted.
If you have no text selected then it will enter some default text for you.
For certain items you will get prompts to fill in the key information. Please note that if you have selected some text the prompts may be ignored (I will tidy that up later).
Give it a try before using it.
The below fiddle allows you to try out the editor first in a fiddle to get used to it and see if it is "good enough" in it's current state for your needs.
Using it on dev.to
Once you have played with the fiddle and you like the editor, simply drag the link in the fiddle that says "dev.to WYSIWYG" to your bookmarks bar.
Then click the link when you are on the dev editor page (https://dev.to/new) and voila you have editor features and keyboard shortcuts!
Conclusion
Maybe people will hate it, but I already love the fact that I can just press Ctrl + B to make selected text bold.
There are still a few things to add such as ordered and unordered lists and <kbd> wrapping commands as I find those particularly annoying!
Anyway, let me know what you think and if you end up using it!
p.s. I advocate for accessibility all the time, at the moment this is not fully accessible and I am aware of that, once I have finalised the functions etc. I will make the adjustments needed (it is still usable as it is, just awkward).
