Developers love GitHub's markdown editor and there's a reason for that. It effortlessly enables us to write simple text and have it transform to rich media.
It feels that it has all the right features without in-your-way bells and whistles.
This is the editor I wanted to have since forever 🙌
Today, we are proud to present to you Marksmith. The GitHub-style markdown editor for Ruby on Rails. It supports ActiveStorage and has a few powerhouse features like preview-panel and helper, toolbar, and list-continuation.
Seamless markdown editing
I feel that the best way to write markdown is in plain-text. I've used those "markdown wysiwyg" editors like EasyMDE but they just don't feel natural. I think in text, so I want to write text. Let me just write it like that.
That's why Marksmith's interface is a plain textarea where you write plain text. No distractions or any fancy post processing.
It also features GitHub's markdown-toolbar-element which will help those who need to quickly change the styling.
Quick Preview
Once I finish writing the markdown I usually click the preview button to see what it would look like and if the body is valid. Marksmith has a built-in preview pane which will render the markdown as HTML.
Marksmith comes with a marksmithed helper which will render that content on your show page or other places with the same HTML that you see in your Preview pane.
This renderer is easily customizable and extendable in your own app.
ActiveStorage integration
One of the things I do in editors is to embed media and more often images. Marksmith comes integrated with Rails' amazing ActiveStorage framework for storing files.
Drag-and-drop files or click the dedicated button to attach files. Images will automatically be formatted as a markdown image and other files will be attached as a link.
List continuation
One nice thing I love about GitHub's editor is the list continuation feature. When writing lists, after I click return, I expect that the editor will go on the next line and add a new list item. 🙌 Marksmith does that!
Media Library
One request we get very often is the ability to inject images that have previously been uploaded by users, thus not duplicating that content.
Marksmith seamlessly integrates with Avo and will feature an "Add from gallery" button to enable that.
Thanks
I'd like to thank Jeremy Smith for pointing me toward GitHub's toolbar element and other packages and for providing the code for the ActiveStorage integration ❤️
Also, thank you Jose Farias. I used the release script and some of the patterns he used to package hotwire_combobox.
Try it today
Marksmith is available on GitHub as an MIT gem. It's an engine that hooks up in any Rails app quickly and integrates beautifully with Avo.
https://github.com/avo-hq/marksmith
Comments open on HN.
This was written in a Marksmith field on Avo ❤️
