We've been working on a major update for Vizy for some time, and we're thrilled to be able to release it today. It's packed full of goodies, so let's dive in!
Tiptap 2#
After 24 months in beta, Tiptap (opens new window) has finally reached its 2.0 release. We're thrilled for the team with all their hard work, and it feels good to reach that milestone of a solid release. We're looking forward to where Tiptap will go from here.
Tiptap is the underlying library that Vizy uses for its editor, which in turn extends Prosemirror (opens new window).
Custom buttons and extensions#
A big feature request was the ability to add your own buttons to the editor. Think being able to set some text as "lead" (slightly bigger text, usually at the start of an article), coloured text, and lots more. We've given it some good thought on the best way to implement it, and are happy to say it's now possible! You can create your own buttons and dropdowns, and even modify existing ones with Vizy's Plugin API.
This also includes being able to add Tiptap/Prosemirror extensions to the editor and schema for the more advanced use cases. This means you can easily define your own nodes and marks to do exactly what you want to do. With that, the possibilities are endless!
Get started with Extending Vizy.
User guides#
To guide you with the new possibilities of extendability, we've written up a few deep-dive user guides for Vizy, covering everything from the basics to more advanced behaviours. We'll be sure to add more examples as people ask for them!
Vizy inception#
Vizy 2.1 now makes it possible to use the same Vizy field within itself 😱. Previously, you needed to create a new Vizy field to be nested within the top-level field — even if you wanted the exact same blocks available. Now, you can use the same field as a child nested field, saving you from having lots of duplicate fields.
Nested fields are limited to 10 levels deep, so while it's not quite "infinite", that's plenty of levels to play with.
Keep in mind to use this responsibly for your editors' sake, as too many nested levels of fields will easily confuse content editors.
New nodes#
We've also taken the opportunity to add support for some new nodes for different types of content.
Table#
You're probably already familiar with good ol' Tables, which Vizy now supports. You can also easily add new columns and rows, and even split/merge cells.
Media Embed#
Include your external media with ease with the Media Embed node!
Using oembed data gathered from the provided URL, you'll be able to access information such as YouTube thumbnails, Twitter metadata, SoundCloud music, and lots more — each provider will be different.
iFrame#
Similar to the Media Embed node, you can also include external content with an <iframe> element. This is more for when you wish to embed content in its raw form, rather than embedded media.
Text style#
For the times when you need to wrap text with a <span>, you can with the TextStyle mark. There's not a native button for this but is vitally useful when using custom nodes, or using the editor config to define your custom buttons. With this mark, we can easily set custom attributes on text for all sorts of use cases.
Editor modes#
We've heard you loud and clear about wanting to ditch the WYSIWYG part of Vizy. Which is why we've added the concept of "Editor Modes".
Here, you can choose whether to allow "Blocks & Rich Text" (the current behaviour), "Rich Text Only" or "Blocks Only".
"Blocks Only" is perfect for for the times where you might just want to take advantage of a more performant Matrix field behaviour — no text or editor elements can be added — just Vizy Blocks.
Inversely, "Rich Text Only" makes this field a WYSIWYG-only editor.
Command Palette#
For all the power-users out there, we've added a Command Palette to the editor. Simply start typing "/" to have the palette shown for common nodes to pick from. It's all highly keyboard-driven as well, which is great for accessibility too.
Block type picker behaviour#
Another thing that some content editors have struggled with, is being able to know how to add new Vizy blocks to the editor. We've added the option to always show the block-picker when hovering over a new empty line, which we think will go a long way to help solve the confusion for users.
Plain text paste#
We all know some software can include a whole lot of garbled extra data when copy/pasting (looking at you Word 😠). Fortunately, Vizy handles that like a pro, with it's strict schema from Prosemirror. However, there's often the need to force pasting content as plain text — which, now you can!
Expand/Collapse all#
One more common request was being able to expand and collapse multiple Vizy Blocks at the same time. Toggle as much as you want!
Min/max blocks#
We've also introduced settings to control the minimum and maximum number of Vizy blocks a Vizy field can have. Not only that, but you can also configure these limits per block type.
Accessibility#
We've made accessibility a big focus of this release, ensuring that things are keyboard-driven, focus state is properly demonstrated, and keyboard shortcuts are in place for toggling content.
We've also improved the drag "ghost" for when reordering Vizy Blocks. They're much more minimal and get out of the way when you're trying to drag items above or below other blocks.
Wrap up#
Phew — we hope you enjoy all the new features in Vizy, and we're excited to continue growing the feature set into some more exciting new concepts like layout blocks and more. Vizy 2.1 (opens new window) is available on the plugin store.
As always, keep those suggestions coming through to our GitHub (opens new window).
Until next time!