(Psst - we also just brought it to the comment section! Read more here)
Hello, DEV community!
Today, I have a quick (but exciting!) update for those of you who write on DEV.
We now have a markdown toolbar in our editor!
We have always prided ourselves on minimalistic and concise design. When possible, we keep things simple and straightforward. Our editor is tricky, though. While we have gotten consistent feedback that our community appreciates the simplicity, we have also gotten requests for more instruction and guidance when writing, especially around markdown formatting syntaxes. Though the majority of our community members are familiar with markdown syntaxes, we certainly donβt want those who are not familiar with them feeling uncomfortable and unwelcome to share their experience on DEV.
To improve this, we are adding a little human touch to the editor with the introduction of the markdown toolbar. We believe the toolbar should give writers just enough guidance to have an enriched writing experience without formatting getting in the way of the writing itself. If you like keyboard shortcuts (such as cmd/ctrl+b to bold), we got you covered, too. In other words, we aim to remove the distractions you may encounter, so you can focus on writing. (Hint: we also have something exciting planned around simplifying liquid tags β¨)
We are also aware that our community enjoys learning about how our features come together. If that is your cup of tea, stay tuned! Our own wonderful Suzanne (Frontend Software Engineer @ Forem) will be sharing her experience developing the Toolbar.
Have you written a post yet?
Have you written a post since this update? Have you noticed the Toolbar? How do you like it? Are you a Toolbar user or do you prefer to type out syntaxes? If you havenβt used the Toolbar yet, I encourage you to check it out and let us know what you think!
If you have never written a post on DEV, consider this your personal invitation from me to start! Check out these ideas for your first DEV post from community member @andrewbaisden for your first DEV post.
Cover image screenshot by Suzanne Aitchison.
Follow me for Forem updates:
Top comments (15)
This is great!
I would love to see the next iteration include stuff like the liquid tags (although you said you were changing that) and tables from my editor for DEV (but made better) if this is now under active development!
7 new features, 51.3 new bugs added π, the DEV.TO π©βπ»π¨βπ» editor [PART DEUX!]
InHuOfficial γ» Apr 7 γ» 8 min read
If you can get those features in I can stop using my hacky workaround finally! π
What a welcomed addition! Great work! β€π¦
I just caught myself making a mock-disbelieving comment about your response @inhuofficial π Happy to see this has your seal of approval!
Oh don't worry, the arrogant super critical asshole in me has just released an article on the editor...you didn't think I could be nice for long did you? π€£
Feature update: Markdown toolbar - I give it βββ but it is a good start!
InHuOfficial γ» Nov 29 γ» 7 min read
I hope it is useful for the DEV team as you probably all know by now that the straight talking and criticism comes from a place of love (I hope π¨) and it is just my way of submitting issues and offering up my hacky editor as something for you to reference on how to perhaps fix some usability issues (if I may be so bold!) lol!
As always, thank you for all the hard work you all put in! β€β€
Awesome!
This toolbar is cool, the next step would be to make it a fully featured WYSIWYG!
I was about to write a super long comment on all the missing stuff, but guess what, @inhuofficial beat me to it and wrote a whole article on it! It has all the stuff I want to mention.
Some issues I found:
target="docs")preventDefaultI think)Feature requests:
"/'/*/_/<etc. should wrap the text in the right charactermark,center,abbr, etc.)Anyways great job, this will be pretty useful for people unfamilliar with markdown but for this to be useful to markdown pros you will need a few more features!
The fix for cmd+b was just merged github.com/forem/forem/pull/15509
For more elements, there's work to first normalize what elements we're allowing in which fields then we can look to the toolbar.
The new feature is really amazing, I just shared my first post using the markdown toolbar feature: data visualization with chartjs
The editor is really cool!!!
This is so amazing and thanks for the mention!
This is cool. Is it possible to add keyboard shortcuts? I would love Ctrl/Cmd-K for adding links to my Markdown posts.
Keyboard shortcuts are part of this feature. For example, highlight some text and type Cmd+k (on macOS). That will insert the Markdown syntax for links.
this will teach me to explore first, before typing a comment - thank you! :-D
I had to look up what to do, so it's all good. Happy exploring!
My bad! I should have mentioned that some keyboard shortcuts are also supported.
Have fun exploring!
This looks really great.
I have one question that is this markdown editor is open-source?
Yes it is. At present it's in the Forem codebase (which is open source).
Nice work! Will use it in my next post.