Invision Community 5: The all-new editor

[Matt Finger]

Invision Community 5 has a brand new editing experience powered by a lightweight, fast React text editor built for mobile and modern browsers.

The venerable CKEditor v4 at the core of our current editor is starting to show its age, so we wanted a clean slate with Invision Community v5 with an editor that was optimized for mobile use, easily extensible and had a feature set that would take us into the next era of Invision Community and beyond.

The obvious choice was to consider the latest version of CKEditor, but it didn't fit our needs as it wasn't easily extensible, external plug-ins would no longer be possible, and its large footprint would affect page speed scores and be painful to use with a mobile connection.

After a long search, we settled on Tiptap as the base for our editor. Written in React, loaded in chunks when needed for optimal performance and with many APIs and extensibility options, it was the perfect fit.

Aside from the technical improvements, the editor offers new tools and a great base for writing our own plugins. I'll walk you through the main features throughout this blog. If you want a more technical deep dive, then please see my development blog.

The Toolbar

The toolbar has been redesigned to put the most commonly used styles first, with the least used styles and functions into an ellipses menu. The new paragraph menu contains the header styles, as well as the code block. The plus menu adds lists, boxes and quotes. The benefit of this new compact menu is that it displays just the same on mobile. Currently, there are different editor styles for desktops, tablets and mobiles with some style buttons removed to save space. With Invision Community 5, this is no longer the case. Even the smallest display gets all the functionality.

 

 

Emojis & Icons

Emojis have become a great way to embellish writing and express emotion. The new emoji picker has been modernized with larger emojis and tooltips to showcase the emoji shortcodes.

The Icons tab, new for Invision Community 5, allows you to add Font Awesome Icons directly to your content.

Lastly, both the emoji selector and the shortcode suggestion dropdown support arrow-key navigation, so you don't have to move your hands from the keyboard to the mouse.

Content Boxes

The feature I'm personally most excited about is boxes.

The concept started as an abstraction of spoilers because sometimes you just want "a box" - a section that stands out from the rest of the content, something we do manually in our documentation and guides on this site. Each box has a tile and the following options:

• Expandable - You can mark a box as "expandable" which is functionally the same as a spoiler. One improvement is that expandable boxes use native HTML details and summary elements instead of plain Javascript animated divs.
• Colors - You can optionally keep it grey on grey like spoilers, but I think that's so boring! The colors automatically adjust to the theme colors, so it will look great in dark and light mode.
• Float (left/right/none) - You can make the box align to the left or right of other content just like you can for images
• Width - When the box is floated, you can set the width to big, medium or small.

Link Expansion

Invision Community has long expanded some links, such as YouTube, offering more context or even a mini-player where appropriate.

With Invision Community 5, we've added support for embedding dynamic link previews using site metadata. This is a preview of a topic on our forum.

For those unaware, the Open Graph (OG) Protocol is essentially a way webpages can specify a title, image, and description to be dynamically embedded on another platform. This is the underlying technology when you see the link preview in Meta, X, Slack, or iMessage.

Code Blocks and Inline Code

The new editor adds inline, syntax-highlighted code blocks and inline code. Both formats can be applied via the toolbar, or optionally, you can wrap text in a single backtick (`) to convert it to an inline code block or triple backticks (```) to convert it to a code block.

The code blocks also support numerous languages for syntax highlighting, including a new custom highlighter for the Invision HTML Template Syntax (Invision Community theme creators and application developers, you're welcome!)

Semantic Headings and Relative Sizes

Invision Community 5 adds a block selector with headings 1 through 6 in the new editor. It's possibly the most common request I hear so that people can use consistent styling rather than just big bold text in a paragraph tag. Semantic headings are also ideal for SEO and accessibility.

In addition to the block selector, you can create headings with the corresponding markdown shortcut. Consecutive pound signs (#) at the start of a line followed by a space (the number of pounds corresponds to the "level" of the heading). For example ### creates a Heading 3 (<h3/>) creates the heading for you.

Using clear header tags means screen readers and search engines can better understand your content as using absolute font sizes, such as 16px, can make it unclear what type of element is actually being used. Is it a heading or just a paragraph with large bold text?

Furthermore, you may want different sizes depending on the content and device type. Mobile devices may benefit from a large base font size. So we added percent-based font sizes which change the font size based on whatever the default would be for that block.

Further UX Improvements

The new editor in Invision Community 5 has several tangible improvements, including a mobile-first design.

In the current editor, some functionality was hidden behind modals and double clicks, which are either not obvious on mobile devices or not possible at all. The new editor no longer relies on modals and instead uses buttons and dropdown menus that work perfectly with mobile and other touch-based devices.

New Line Arrows

For block content, such as boxes, images and quotes, we've added the ability to create a new line before or after the block with the click of a button. This was an issue of frustration for mobile and touch devices where it was not always clear where the cursor was and a finger is a much less accurate aiming device!

Sticky Toolbar

Anyone who has authored a long piece of content knows the pain of scrolling up and down to get the toolbar in view. To make writing longer content less stressful, we've made the toolbar sticky so that it will always be fixed at the top of the editor after scrolling down.

Markdown Style Shortcuts

One common request is to support markdown in the editor. While we opted not to include full markdown support, the new editor recognizes many markdown-style formatting shortcuts.

Colors

A common challenge with rich text editors on sites with multiple themes is colors often need to consistently look right across all themes. This is even more important with Invision Community 5, as it has a native dark mode feature. For this reason, we opted to offer a reduced set of color options that all adapt dynamically to the theme. I mentioned this about box colors above, but this is also true of the font color. The difference in shade is slight, but it's very noticeable without it. Toggling between light and dark mode will never produce unreadable text.

We can't wait for you to try the new editor; it has already been very popular with our small testing group. Which feature are you most looking forward to trying?

View full blog entry

[Markus Jung]

Looks good. 🙂

Will it be possible to insert tables, at least with markdown?

[LaCollision]

Looks absolutely fantastic!

Thank you so much for all the work and research you have done ❤️ 

[aia]

H1 must be removed from this menu. Also, its insertion should not be triggered by just one "#" symbol (Markdown).

Each page must have a unique H1.

[Matt]

9 minutes ago, 13. said:

H1 must be removed from this menu. Also, its insertion should not be triggered by just one "#" symbol (Markdown).

Each page must have a unique H1.

Not always the case. I presume you mean for SEO purposes, but we've moved on a lot from the days where a two H1 tags would confuse the billion dollar AI driven company called Google.

Google: "Our systems do not have a problem with multiple H1 tags"
 

 

[Daniel F]

Multiple H1 tags on the same page are fine.

Quote

 

Question: Can we have a clear answer to the question how to handle headings and accessibility? I see a lot of multiple H1 (all but one are usually hidden) out there on the web. Everybody treats it differently. And stuff like the main tag?

John Mueller: So, this is a pretty common question and it’s pretty straightforward. Our systems don’t have a problem when it comes to multiple h1 headings on a page. That’s a fairly common pattern on the web. We use headings to better understand the context of different parts of a page.

 

[Matt]

[aia]

4 minutes ago, Matt said:

Not always the case. I presume you mean for SEO purposes, but we've moved on a lot from the days where a two H1 tags would confuse the billion dollar AI driven company called Google.

It's important not only for SEO but also for accessibility, especially for screen reader users.

The usage of more than one H1 tag is considered a bad practice for a reason, as highlighted even in MDN docs.

By the way, Google isn't the only search engine in the world. I know it's (almost) not the case in the US, but other countries also exist on this planet.

Edited May 15 by 13.

[Matt]

It's worth remembering that the same editor can be used for Pages.

[aia]

7 minutes ago, Matt said:

It's worth remembering that the same editor can be used for Pages.

It's worth remembering that its behavior could be adjusted for specific regions such as Pages, while global defaults could follow best practices.

[Dreadknux]

This is one of the more exciting features about IC5, and as a sort-of-power user the sticky toolbar and mobile considerations in particular are a godsend. Thanks for all your hard work, Matt!

I had a few questions about the new post editor;

1. Can we remove certain options from the post editor (for instance, I don't necessarily like the idea of my community's users being able to change the font size/style of their content, so being able to enable/disable certain toolbar buttons would be great for me)?

2. The boxes are great, but from a design perspective the box header area ("How to write JavaScript", for example) doesn't seem to stand out from the rest of the box content (and the padding seems a bit too much for my liking). Is there a chance of having a box header bgcolor implemented that's maybe a little darker/lighter than the box content background to make it pop (I can always use custom CSS to fix this myself but figured I'd ask if it was something that could be done out of the box)?

3. Will you be publishing a full FAQ/guide on what kind of markup code will be supported on this? One of the least desirable aspects of Invision V4 has been a lack of official documentation/glossaries regarding IPS template code and what is actually there for designers to use (making a custom theme has often been a matter of either accidentally finding out there is a 'native' CSS class for what I want a particular div to do, or creating new CSS classes myself and duplicating styles in ignorance), and it'd be a shame for me to ask end-users to guess what kind of markdown code works via trial and error. 😄

4. I like the idea that text colours change dynamically with light/dark theme - but is that only relating to the default IC5 theme, or will that also be the case for custom themes as well? I remember @Ehren's amazing walkthrough of the new theme editor a few months ago, and what seemed space-age to me was that changing a primary/secondary colour for a theme would also dynamically alter a container/button's text colour. Will post editor text colours work in the same way, or will I need to consider custom CSS classes to make a 'yellow' text colour readable on a similar-coloured post area background?

Thanks again!

[Matt]

Thanks! It's all @Matt Finger's hard work.

I'll let him answer these questions.

[Dreadknux]

Haha, I had meant to tag @Matt Finger but when I was typing my original post the mention function was going screwy! Thanks Matt (the other one)!

[Matt Finger]

2 hours ago, Dreadknux said:

1. Can we remove certain options from the post editor

We're discussing this internally still but there should be a way to restrict buttons by user and editor location in the final release

 

2 hours ago, Dreadknux said:

2. The boxes are great, but from a design perspective the box header area ("How to write JavaScript", for example) doesn't seem to stand out from the rest of the box content (and the padding seems a bit too much for my liking). Is there a chance of having a box header bgcolor implemented that's maybe a little darker/lighter than the box content background to make it pop?

That would be managed by the theme's CSS. We ended up keeping the background color the same once because a slightly darker/lighter color tended to look off in at least a few box color and dark/light mode combinations

 

2 hours ago, Dreadknux said:

3. Will you be publishing a full FAQ/guide on what kind of markdown code will be supported on this?

Probably not, but only because markdown code itself is not technically supported, rather we've included markdown style shortcuts. For example, if I pasted in "**some bold text**", it won't get converted to bold, it's only going to be converted after being typed out

 

2 hours ago, Dreadknux said:

4. I like the idea that text colours change dynamically with light/dark theme - but is that only relating to the default IC5 theme, or will that also be the case for custom themes as well?

Yes! It uses color-mix and other CSS tricks to consistently adapt to the different theme colors.

[Gary]

Simply amazing. Well done @Matt Finger. You’ve done a superb job mate. Can’t wait to use these new features.

[Claudia999]

If I‘m playing with Demo on https://tiptap.dev/ - there are tables (without Markdown) and Table of Content available. Will these functions also be available in the new IC5 editor?

[shahed]

Very nice and clean, I really like what I see. congratulation @Matt Finger and well done.

1 hour ago, Matt said:

It's worth remembering that the same editor can be used for Pages.

Paragraph and that really cool Box buttons. also markdown are something I like to see for expanding.

Is there a way to create button as well? having a button making like Invision 4 in admin panel would be nice.

[Matt Finger]

8 minutes ago, shahed said:

Is there a way to create button as well? having a button making like Invision 4 in admin panel would be nice.

Yes, we'll do a separate blog post, probably in the Developer Blog, but we created an editor plugin system with the ability to add and position new toolbar buttons.

[Matt]

25 minutes ago, Claudia999 said:

If I‘m playing with Demo on https://tiptap.dev/ - there are tables (without Markdown) and Table of Content available. Will these functions also be available in the new IC5 editor?

Not every function Tiptap supports will make it to our editor. It can do tables, but there's a lot of scaffold needed. We need UI to add/remove rows/columns etc. 

I'm sure it'll mature as 5.0 develops.

[Jimi Wikman]

Will we be able to use official extensions, or is the solution too customized so it will not be possible?

Will we by any chance be using TipTap for the Pages editor as well, as I see it has content sitebuilder capabilities?

[Jordan Miller]

This looks so cool! I can't wait to try out v5. Great job team. 👏

One question: will custom emojis be available in v5? My forum has a few hundred and almost every member of my community uses one in each post. Just curious. 🙂 

[Matt]

Yes. Custom emojis are still available. But only for you, no one else. 

[Jordan Miller]

8 minutes ago, Matt said:

Yes. Custom emojis are still available. But only for you, no one else. 

If y'all need any more alpha testers 🙃🙋🏼‍♂️

[Matt Finger]

5 hours ago, Jimi Wikman said:

Will we be able to use official extensions, or is the solution too customized so it will not be possible?

The short answer is no, but the full answer is yes (in theory) but you'll have to manually build them and then roll into an IPS Application to make sure the content type is supported on the back end. We'll address extending the editor in depth in a future blog so stay tuned if that's your thing!

[Teddy Rogers]

I assume there will be no issues with the new Tiptap editor quoting from existing content and tags within the forums?

Regarding "code blocks" and "inline code", what languages will be supported in IC5 and how can we add additional language support? Can we make suggestions now to include for release in IC5?

Edit... and a useful feature will be to have a button to copy to clipboard the code block...

https://www.danielmarkavis.co.uk/blog/copy-to-clipboard-from-a-tiptap-codeblock-component

Ted.

Edited May 16 by Teddy Rogers