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

On 4/21/2025 at 5:56 AM, riko said:

That is terrible. :)

Black text on a dark blue background, how am I supposed to read that? (Safari Version 18.4).

This is actually because the font colors from CKEditor4/IC4 have been preserved. Looks like the original blog post was edited to fix it but for some reason this topic wasn't updated in the process.

I shall log an issue for this so that we can address further.

• Inserting details/summary html code, that is normally hidden on a page, but with a click on the button, show in view. This way you can hide additional info to read on a page, what is normally hidden, so users can continue to read on the page, and only when that person is intressed in that additional information he clicks it open.

• Ability To add text to a div / class, that shows up as hoverover tooltip info.

Edited May 13, 20251 yr by Moestuin

On 5/31/2025 at 8:17 PM, My Sharona said:

Is it possible to add custom colors to the Editor?

I do believe it is possible to edit certain parts of the editor, having read through this entire thread once awhile back but, if someone could help me out here, it would be appreciated.

Not yet, but only because they need to be balanced and adjust contrast depending on whether you're viewing with light or dark mode.

I noticed that the new IC5 editor is a really good start but doesn't yet handle a few things when you copy and paste from standard HTML formatted posts created in Source mode in IPS4 to IC5:

• dl definition lists (it pastes them as paragraphs)

• table captions (pasted as paragraphs)

• emoji that are size formatted (28px) default to standard font-size when pasted.

• PRE tags get converted into a text box.

• text formatting elements including address, cite, abbreviation, dfn, kbd, samp, small elements

• div elements become paragraphs

• spoilers - the eyeball open/closed icon is broken

I noticed that if you simply paste the HTML and re-open the post afterwards, it does a good attempt at trying to format the raw source you previously pasted.

Edited June 6, 20251 yr by The Old Man

On 5/20/2024 at 11:02 AM, aia said:

Those elements are not intuitive for inexperienced users (i.e., almost all users).

It would be much more intuitive and easy to use if there were an area where users could click to start writing in a new empty paragraph. This area should always be placed right after the existing content in the editor:

If this is implemented, even inexperienced users won't get stuck in a state where they can't add a new line and don't know where to search for a button to do that.

I think your idea was never properly understood by the Invision team. I took/take it to mean that a placeholder is automatically created between quote blocks ready for text or other content. And if it is unutilized, the placeholder space is ignored/removed when the post is published. (Of course, this negates any need for buttons to insert lines.)

For many ordinary users, those mouseover buttons will not be readily understood (or even noticed). And the obscured button (below image) does not help. (Tested in both Firefox and Edge.) I think it is a stacking context problem, but the usual fixes did not work for me. (The same bug exists here at the Invision support forum too.)

Instead, I added some space below the quote block via a small piece of CSS. I think this is the better solution (adding space) rather than resolving the apparent stacking context problem.

/* Fix for Invision quote box overlap of 'add line' button */
.ipsQuote {
  margin: 15px 0 0 0;
}

Nothing like the solution you suggested, But it at least makes the button visible.

On 5/20/2024 at 12:18 PM, aia said:

Yup, a must-have feature. I implemented it myself in the current CKE, and I hope IC5 will allow doing it too. Or, even better, it will finally include it for all IC5 users 

I too created an anchor button in v4 - it was very useful.

By the way, why are there 'Insert line before/after' buttons displayed around the smiley, above, using the text editor when creating this post? If it is because Invision wish to have the option to add lines above/below images appearing within quote boxes, maybe the buttoms should not be applied to inline images. And as for other (block) images, I would expect @aia's solution of adding a placeholder space would work for them too.

On 5/21/2024 at 3:27 PM, Matt Finger said:

Not to contradict Marc, but there will be a global Table of Contents widget for which you can apply anchors to headings and box titles (stay tuned for more page builder updates 🙂)

Yes, in fact in a few minutes I was able to create a plugin for KBD elements

We're still getting docs together so please be patient but the development of supported buttons and content types is much more streamlined than in cke4.

Where do I find this information? Was documentation ever published?

Thanks.

Edited July 5, 20251 yr by Como

There should be an assistant to recreate the button functionality of 4.x, which creates the necessary code automatically in the background.

On 7/18/2025 at 8:15 AM, Stuart Silvester said:

Ok.

It would be more useful if you could tell us what problems you're having though (outside of HTML editing because, that has been discussed a lot already).

I do think there is a lot of room to improve the editor in terms of admin customisation.

For example, on my community (which is gaming focused), the spoiler tag is used very frequently (perhaps the most frequently) and so asking a user to find the Wrap Box, then figure out they need to hit a dropdown on that box and then select "Expandable" (which is not very clear it also means "Spoiler"), is quite inconvenient. There should be an ability for admins to allow this particular functionality to be a top-level button on the editor.

Similarly, I do not quite understand the rationale for options that feel very much secondary, like Text Size and Font Color to be assigned top-level buttons, while primary functions such as Quote Boxes are tucked away in a dropdown menu. I also don't get why the Code Block is nested under the Paragraph dropdown when it makes more sense to place it under the "plus"/"+" dropdown...

Just seems like the priorities in terms of editor button placement needs serious work. But I understand that every admin has a different need (although I'd be incredibly surprised to hear if 99% of communities don't use Quote Box enough for it to be handed a top-level placement), so I think a good improvement in this area would be a section in AdminCP where admins can re-arrange buttons as they see fit to best suit their community needs.

Just keep in mind those colours have to be safe for both light and dark mode. Which is why we went with the colours we have.

We also take on the feedback about the spoiler and code box, we may change these but keep in mind that we now have one editor for all devices so we don't want it to look like this on a mobile device.

Not even in the top 10.

6 minutes ago, Alex Duffy said:

How can we add some of the extensions for Tiptap on the cloud?
I need this Table of Contents for our documents.
https://tiptap.dev/docs/editor/extensions/functionality/table-of-contents

Matt did a post here which discusses how to extend the editor, that you may find helpful
https://invisioncommunity.com/forums/topic/480617-ic-5-editor-extension-javascript-framework/