In Statamic 2.8 we released Bard, a block-based editor that lets you create your own custom blocks out of any other Statamic fieldtypes. It was built on MediumEditor, and it was one of our most popular features to date.
In Statamic 2.11, we rebuilt it on top of Scribe, a component built by The Guardian, designed to fix issues in ContentEditable, the very same source of issues we had been running into with MediumEditor. However, as luck would have it, even The Guardian couldn't fix contenteditable. In January The Guardian announced they would be leaving Scribe behind and moving onto greener pastures with ProseMirror.
We had hitched our wagon to the wrong package not once, but twice. My heart sank, knowing that we too would need to rewrite Bard for a third time. But we do what's right for the product, and that means not sitting on deprecated software and giving our users a subpar experience. So here we go, onwards into the future!
Enter ProseMirror and TipTap
We had long been eyeing ProseMirror as the ideal solution for Bard. The only reason we didn't use it in the beginning was the learning curve. It's very complex and requires a much more robust implement across a wider ranger of features, like dealing with document schemas, text selection ranges, wiring up buttons and controls, and so on. Both MediumEditor and Scribe had worked a lot of that out, letting us focus on the integrating with Statamic's custom fields sets, and UI experience.
As luck would have it — and now that the Statamic 3 control panel is running on Vue2 — we can take advantage of some great third-party components that have wrapped ProseMirror to make our task easier. We went with TipTap from the folks at Scrumpy, by far and large the most popular Vue + ProseMirror package (more than 3k Github stars at the time of writing). It's even a renderless component, which fit our component pattern perfectly.
So we can now proudly announce that Bard is a getting a big upgrade under the hood. It's behavior will be more consistent, the editing experience smoother, and the markup cleaner. Curious how?
How ProseMirror is different than ContentEditable
ContentEditable is a native web browser widget for editing rich text. It relies on the DOM for editing and rendering your content. In essence, it writes HTML by writing HTML in your element. If your markup breaks, your editor breaks. If you want to store meta data in your content, you're storing meta data in your content. There is no separation of content and your intended structure, which severely limits your ability to add features or make the component extensible.
ProseMirror instead stores structured and semantic data that then will render the HTML for you. This is much the same approach that Statamic takes to storing structured content so you can change your own HTML at will. This opens up a whole new world of possibilities of what we can do with Bard.
Okay cool so it works as intended, what else?
Of course, since we had Bard up on the lift we made a few "enhancements". Why not?
Fixed Toolbar Option
Bard has always had a floating/popup toolbar that appeared when you selected text. However, by hiding the controls, it wasn't always apparant that it had them. So now you can turn on the fixed toolbar, instead of or in addition to the floating one.
We'll now calculate the average reading time for your content, using 265 words per minute as the industry recognized standard.
If you've ever had an article you'd like to push live but wanted to tinker with the content in one of your sets (perhaps a code example, video embed that's still transcoding, etc), well now you can. Just flick that little switch and your set's content won't be rendered unless you explicity override it in your template.
Copy Pasta Sets
You can now copy & paste content and sets. It's dreamy.
A better fullscreen mode inspired by IA Writer, better typography, markdown style keyboard shortcuts, and other things I can't think of at the end of the day on Friday. You're going to love it.
Have a blessed Easter holiday weekend! See you next time.