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.
mobile-toolbar.mp4
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.
Boxes.mp4
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.
text-menus.mp4
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.
sticky-toolbar.mp4
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.
markdown.mp4
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.
colors.mp4
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?
Our June release of Invision Community introduces several new improvements for your community to increase privacy controls and consent of personally identifiable information.
In today's digital age, privacy and the protection of personally identifiable information (PII) have become increasingly important. By incorporating improved privacy and PII data features into Invision Community, we are creating a more secure and inclusive environment within your community. In this blog post, we will take a quick look at what PII is, and the new features Invision Community has to improve privacy within your community.
What is PII?
PII, or personally identifiable information, refers to any data that can be used to identify, contact, or locate an individual member. When users sign up and visit your community, they may provide various types of PII, either voluntarily or as required by the platform's registration process. For example, an email address is required to complete the registration, and in some cases and IP address may be logged to authenticate a session, or to provide some context to the person posting content.
Invision Community introduced new data control tools in a previous release, so let's take a look at the improvements coming in our June release that improves cookie management, IP address management, PII data requests, and the right to be forgotten.
PII Data Request and Right to be Forgotten
Your members now have the ability to request their Personally Identifiable Information (PII) data directly from their account settings page. Upon submitting a request, administrators will receive a notification alerting them to the new inquiry, where they can choose to either approve or deny it.
If approved, the member will be notified and provided information on how to download their requested data.
Additionally, members now have the option to request account deletion. After submitting this request, they will receive a confirmation email to verify their intent. Once confirmed, the request is forwarded to administrators, who can then decide whether to approve or reject the account deletion.
IP Address Management
Invision Community has had tools to prune IP addresses within a timeframe for a while, but we have conducted a thorough evaluation of the data framework in Invision Community to ensure that all recorded IP addresses are systematically purged according to the designated timeframe.
Cookie Management
Empowering members to control which cookies are stored is an important aspect of fostering trust and security within an online community. By granting users the autonomy to manage cookie preferences, you demonstrate a commitment to respecting their privacy and protecting their personal data. This level of transparency not only helps build a strong sense of trust between the community and its members but also helps with compliance, ultimately contributing to a more engaging and responsible user experience.
The Invision Community cookie consent page has been revamped and now displays a list of essential cookies. Visitors have the option to opt out of non-essential cookies for a more customized browsing experience.
Additionally, we've introduced a new feature that allows for the inclusion of an optional third-party Cookie Description on the cookie consent page, further enhancing transparency and user control.
We trust that these enhancements to privacy and data collection practices will simplify compliance with various regulations and, most importantly, ensure that your community members feel secure and well-protected while engaging with your platform.
The features and changes presented here are available in the following packages:
Beginner
Creator
Creator Pro
Team
Business
Enterprise
These features are also available in the Invision Community Classic (self-hosted) product.
If you do not see your product or package listed, please contact us to talk about upgrading your Invision Community.
We love talking about our big new features, such as GraphQL and Live Topics, but we also like to shine a light on some of the smaller updates we've made to existing applications.
In this blog, I'll take you through a few changes to the Download app and an update on our various API integrations.
Downloads
After the success of the Events and Gallery refreshes, we've brought some of those changes over to the Downloads application.
Our Invision Community March '23 release will feature subtle theme updates to bring the Downloads app more in line with other applications. In addition, we have also added a grid mode for files. As in other areas of the platform, you can allow your members to choose their favourite view, which is remembered on subsequent visits.
A long-awaited request by our Marketplace Contributors was to delete their pending version updates. The good news is that our March release now allows this!
API News
Invision Community benefits from several API services, including REST, GraphQL and webhooks.
Our March release brings some improvements to GraphQL, including the ability to query for clubs and members. We have also enhanced the webhook for clubs which now returns information about the club itself.
While we're on the subject of webhooks, we have created a new webhook that is triggered via Downloads when a new pending version is approved.
I hope you find these updates useful. I'll be posting some more in our developer's blog on GraphQL, including some simple javascript examples to show you how easy it is to query for data and insert it into the templates without needing to edit templates.
