Ibai

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

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.

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"
 
 

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.

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?

View full blog entry

If an account is already on the system, they wouldnt be able to register with that same account again, and it would also show them as logged in and banned unless they clear cache etc. Its just another facility to make it more inconvenient for spammers to spam on your community

Last night I used the PWA to access this site and got a 403 error. This site was down, but I had no way to refresh the page as the 403 page had been cached locally in the PWA. 
Please implement “pull to refresh”. It should be a little JS to easily add this to the PWA. 
 
Note: I did have to force quit the PWA this morning to reload the page with the 403 server down error. Not all users will know to do this and would be stuck. 
 
Also, the error page was from AWS Cloudfront CDN for this site. You should also configure custom error pages for your CDN so the error pages have a “reload” link to the page (and “pull to refresh” JS and no-cache response header).

It's quite a bad approach and should never be used in any reputable software. Unwanted styles/tags should always be stripped immediately when text is pasted into the editor, long before the message is sent to the database, not on the template side as it happens in this example.
This code is a temporary and ineffective workaround, not a solution.

As noted… I would highly suggest waiting for IPB 5. 😉

Hello Team,
When rich text is pasted into the editor, the text has style attributes like so (taken this example from this IC site and pasted into editor using color themes):
<p style="background-color:#ffffff; color:#2f3d4b; font-size:14px; text-align:start"> The pasted rich text displays fine on a white theme due to matching colors. However, on a dark theme, the pasted text displays in black on a white background (opaque).
To make this transparent and display pasted content as expected on any color theme using current theme's colors, we just have to get rid of the background, background-color and color attributes from the HTML.
Please eliminate the background, background-color and color attributes from the HTML of the pasted rich text which would resolve the issue and users will be able to paste rich text as-is on any color theme which will be a HUGE breakthrough! Eliminating these color attributes will retain all other formatting and displays text in current theme colors. Forcing to paste as plain text results in a bad UX as the users would be required to reformat the text all over if the formatting like headers, tabular data, bullet lists, font-sizes, bolds, italics, etc. are important.
Even if only the attribute "keys" are removed (background-color: , background: and color:), it results in markup like below and it works fine too.
<p style="#ffffff; #2f3d4b; font-size:14px; text-align:start"> The related topic is here -
Please confirm if this is added to your roadmap..

The product is real and it's coming.  I've been fortunate enough to play with the early alpha version and it's chugging along very nicely.  The new editor is sweet and the UI update is slick.  There are certain areas still under heavy development.  It's not ready for prime time yet, but I've seen many bugs squashed and lots of great polishing being done to the stuff they've already announced.  

I have moved this to our feedback forum for you, as unfortunately this isnt something I can think of a way around at present.

A user on my community brought this to my attention.  I think this may be intended behavior by Google chrome, but should be something reviewed for an overlay by IPS 
WebP images open in a new tab, and are not scrollable like JPG
Sample topic: 
 

Not at all. He is tapping away furiously at his keyboard as we speak 😄 
 

I too would like to see this addition.

Version 5 will require our new "Classic" license structure for use. The license will include all applications. The pricing is less than our previous license structure if you were to purchase all applications though. I can't seem to find the topic which there is a lot of discussion on this but essentially, this is our way of making self-hosting viable for the future. 
The Classic license is available in your Client Area already and you can upgrade your self-hosted license to it, if you desire. If you have had an active license with us, believe we even throw in a few extra months free as a thank you.

Hi IPB Team & Community ^_^
As images are essential part of forum topic it would be great if uploading of topic images and resizing would be more optimal
Right now it is quite hassle for first time user of website.

As admin or Moderator we all know how to upload image and resize but for first time user  it is quite unfriendly.

As user i have to first "choose files" then click on insert then i have to double click to resize it, if i just single click it do nothing as shown below.












Even if user able to figure out how to resize image, putting numerical value is kinda odd procedure 





However if we see at other forum software they made this process very user friendly as follows  
Simple "insert image" button on editor that show upload option









Automatic Blue resizing border around image once it is uploaded  that user can use to resize the images easily 





if there is any way we could customize editor to make image upload and resizing as above please also let me know.

We hope IPB team will take note on this and make it more optimized. 

Thanks 
Gill

So... Is that a yes, it will be available for self-hosted/classic? 🙂
I could not find any tags or mention of cloud-only / not for self hosted in the article (usually there is a very small fineprint in the bottom of the post). Does it mean it will be available for all customers?
 

I hope it is not exclusive to Cloud subscription, but for all customers. Spectacular addition.

Same thoughts. Looks great! Ads are a priority for me as well. I would love to see new and creative ways to monetize in v5. I don’t run any sites without monetization/ income, otherwise I would shut them all down. 

Very nice looking and nice features. 
 
Please keep in mind that many of us use advertisements as our main source of funding to keep our sites going. I don’t see much room for ads in any v5 snippets. 

That field name is Published, not Edited. IMO this is a bug, but you say its a feature.
 
 

These UI changes are looking really nice, fantastic work as always Ehren. Having you join the IPS design team is undoubtedly one of the most exciting things to happen and your work here is just proving that every day. Looking forward to seeing even more!
I'm also now interested in seeing some of the improvements to the UX that complement the UI changes - in particular the mobile topic/posting experience, which in V4 is currently quite miserable now when you compare the ease of posting on social media apps. Just this morning I tried to post a topic about a news story I read earlier, and it was a constant battle of scrolling up/down just to reach post editor toolbar icons that had been moved off-screen as my post got longer (some elements, like the GIF implementation and URL insertion, are pretty clunky as well).
Not knocking the V4 experience as I know it's a decade old at this point and originally designed to serve a desktop experience over mobile - but at the same time, I can see why many in my community prefer to post status updates when it's currently so difficult to quickly and easily post a topic or a post on the forum via their phones. 😅

Version 5 is a significant rewrite with numerous new features and breaking changes. It’s not just a new UI, so it won’t be possible to run multiple installations on the same database, sorry @WebCMS

Thanks Alex, I appreciate that! 
Thanks @shahed! 
 
The profile blocks will stretch so they’re all the same height. In testing, this has worked well, but we can always add a max-height to the boxes if they get too tall.
For the moment, “normal widgets” just collapse into a vertical column on mobile, so it’s just the profile ones which scroll. The normal widgets can vary a lot in height, so they might not work as smoothly in a carousel.