DEV Community

Cover image for Feature update: Markdown toolbar
Amy Lin for The DEV Team

Posted on

Feature update: Markdown toolbar

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.

Discussion (15)

Collapse
inhuofficial profile image
InHuOfficial • Edited on

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!

If you can get those features in I can stop using my hacky workaround finally! πŸŽ‰

What a welcomed addition! Great work! β€πŸ¦„

Collapse
ellativity profile image
Ella (she/her/elle)

I just caught myself making a mock-disbelieving comment about your response @inhuofficial πŸ˜… Happy to see this has your seal of approval!

Collapse
inhuofficial profile image
InHuOfficial • Edited on

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? 🀣

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! ❀❀

Collapse
siddharthshyniben profile image
Siddharth

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:

  • The editor guide opens in the same page, so you may lose unsaved content (target="docs")
  • cmd b for bold opens up bookmarks on Firefox (this can be solved by preventDefault I think)
  • cmd i for italic opens up page info on Firefox

Feature requests:

  • Selecting text and pressing "/'/*/_/< etc. should wrap the text in the right character
  • Support adding more elements (mark, 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!

Collapse
jeremyf profile image
Jeremy Friesen

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.

Collapse
unclebigbay profile image
Unclebigbay

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!!!

Collapse
andrewbaisden profile image
Andrew Baisden

This is so amazing and thanks for the mention!

Collapse
andypiper profile image
Andy Piper

This is cool. Is it possible to add keyboard shortcuts? I would love Ctrl/Cmd-K for adding links to my Markdown posts.

Collapse
jeremyf profile image
Jeremy Friesen

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.

Collapse
andypiper profile image
Andy Piper

this will teach me to explore first, before typing a comment - thank you! :-D

Thread Thread
jeremyf profile image
Jeremy Friesen

I had to look up what to do, so it's all good. Happy exploring!

Collapse
amyatforem profile image
Amy Lin Author • Edited on

My bad! I should have mentioned that some keyboard shortcuts are also supported.

Have fun exploring!

Collapse
sachinchaurasiya profile image
Sachin Chaurasiya

This looks really great.
I have one question that is this markdown editor is open-source?

Collapse
jeremyf profile image
Jeremy Friesen

Yes it is. At present it's in the Forem codebase (which is open source).

Collapse
cerchie profile image
Lucia Cerchie

Nice work! Will use it in my next post.