Hello team,

v5 is shaping up quite nicely!

I am still really disappointed about deprecating HTML support. This is really a major aspect of a CMS software I want to use for my website, and I need a way for me (and only me, the admin) to edit the HTML source of my articles and courses, even if that means doing it in the ACP instead of using the editor. Even if that means giving up on using the editor for these articles once I start customizing the HTML.

I use Invision Community to publish Articles and Courses and have used custom HTML in v4 for multiple reasons, including (but not limited to):

1. HTML anchors

First let me stress that I am aware of the TOC widget however I can’t use it because I don’t want the TOC to be in its own widget space at the top of the article or in the sidebar (where I place ads to monetize my site).

So in v4 I’ve designed my own TOC that is within the article (as is the case in most blogs/articles around the web), and I’m perfectly happy with it. Seems like with v5, I will be losing that capability, and that is worrisome.

Moreover I use HTML anchors outside the TOC, for example to link to a specific part of the article within the article itself, or somewhere else in the community. For example I may respond to someone in the forum and linking to a specific HTML anchor in an article. Seems like I will no longer be able to do that in v5 (unless I use the TOC widget which I don’t want to use).

For reference here’s what my TOC looks like — and I want to keep it that way:

2. Custom HTML boxes

I know I can use the boxes from the editor however it seems like I’d be limited in the design. For examples the boxes require a title, when I don’t need one. Here’s an example of a custom HTML box I’m using to highlight tips in my articles, and I was hoping I could create my own kind of custom boxes for my courses as well.

3. Custom buttons or custom HTML for styling text in unique ways

On our site we use custom styling for highlighting key commands to make them stand out. I have designed a custom Key-Command button for me (admin) and the moderators to use to highlight key commands in Articles, Courses or even in the forum. Unless I’m missing something, I don’t see a way to do this in v5? Here’s what it looks like:

… in conclusion

This high level of flexibility allowing me to use HTML to customize my content with nearly endless possibilities is what really attracted me to the Invision Community platform, and by now I’ve implemented it in my workflow. I am constantly thinking of new ways I could use custom HTML for future articles or courses I intend to publish. Having to give up on these features would be a huge step backward for my site.

Edited September 26Sep 26 by David N

Pretty please? 🙏🥺

Maybe a simple choice to use either the WYSWIG editor or a raw HTML editor like the one I can use in the Raw HTML widget (Page Editor) when creating new articles or courses?

I just realized that the Raw HTML editor does allow me to create anything I want on a new page (for example I can copy/paste my existing article HTML and I see my TOC - screenshot below), only I can’t use it in Articles or Courses.

On 9/26/2024 at 4:10 AM, David N said:

Unless I’m missing something, I don’t see a way to do this in v5?

Are you referring to something like this:

Press Tab or Shift + Tab

The new editor supports entering markdown which is great for formatting text using your keyboard.

You maybe be able to do your other stuff in markdown too or install a React component for customizing TipTap to do exactly what you want.

HTML source editing in areas designed for the new editor would be a really tough one and honestly not something we're likely to do.

These examples… ToC, kbd element, adding text anchors, etc… are all achievable with editor extensions, and you wouldn't even need to create a react component (which would require an entire extra react root and bulky js bundle). We're probably going to start getting dev guides out on this topic soon.

We understand that creating an app is more complicated up front than just writing the HTML, but if it's to execute repeated actions you'll definitely save time and minimize risk of error in the long run.

I have promotional topics that I use the HTML editor to display clickless tracking banners. This is another reduction of functionality that I’d rather not see happen.

What do you mean by tracking banners? If you’re talking about a script of some sort to track whether something’s been displayed, that’s honestly better off as a global listener.. via a theme hook or custom HTML block or something.

If you’re talking about a section of actual content, I’m 99% sure it’s possible via editor extensions.

6 hours ago, Matt F said:

These examples… ToC, kbd element, adding text anchors, etc… are all achievable with editor extensions, and you wouldn't even need to create a react component (which would require an entire extra react root and bulky js bundle). We're probably going to start getting dev guides out on this topic soon.

That is great news, thanks for replying. I can’t wait to read up your dev guides on how to achieve this (and I hope I can understand them).

If I can do a TOC, add anchors to HTML links and give custom classes to span elements so that I can custom style them with CSS then that would be all I need.

1 hour ago, Matt F said:

What do you mean by tracking banners? If you’re talking about a script of some sort to track whether something’s been displayed, that’s honestly better off as a global listener.. via a theme hook or custom HTML block or something.

If you’re talking about a section of actual content, I’m 99% sure it’s possible via editor extensions.

It’s part of my affiliate advertising. Clickless banners with HTML code from the affiliate are inserted into the post, so that the cookie is set for an impression when somebody views it.

It’s not the end of the world, but it does effect my ability to monetise my site, so I plan to stick with v4 for as long as I can.

On 10/1/2024 at 6:33 PM, Matt F said:

HTML source editing in areas designed for the new editor would be a really tough one and honestly not something we're likely to do.

These examples… ToC, kbd element, adding text anchors, etc… are all achievable with editor extensions, and you wouldn't even need to create a react component (which would require an entire extra react root and bulky js bundle). We're probably going to start getting dev guides out on this topic soon.

We understand that creating an app is more complicated up front than just writing the HTML, but if it's to execute repeated actions you'll definitely save time and minimize risk of error in the long run.

a quick couple of questions if I can

how will the v5 ‘articles’ be stored in the database, will they be stored in markdown format?

and what will happen to all our current articles will they be converted or kept as is?

thanks

8 hours ago, sound said:

a quick couple of questions if I can

how will the v5 ‘articles’ be stored in the database, will they be stored in markdown format?

and what will happen to all our current articles will they be converted or kept as is?

They will be stored as HTML that has had some light processing done (for things like dynamic file urls and the like). Since it is the same storage system as version 4, there isn’t any conversion needed for 5.

On 10/1/2024 at 12:33 PM, Matt F said:

HTML source editing in areas designed for the new editor would be a really tough one and honestly not something we're likely to do.

These examples… ToC, kbd element, adding text anchors, etc… are all achievable with editor extensions, and you wouldn't even need to create a react component (which would require an entire extra react root and bulky js bundle). We're probably going to start getting dev guides out on this topic soon.

I'm not sure who made the decision to move to a different editor Tiptap, but it was an unwise one, and you will see that when you look at how many clients continue to use version 4. To create their own unique work for the Guidelines, Privacy Policy, Offline Site, etc. pages, several communities use HTML editing. Furthermore, as the issue author highlighted in the first post, users of the Pages database for articles and other purposes will not be able to benefit from customized work, such as custom CSS classes.

Custom HTML Offline Page - Technical Problems - Invision Community

This is an example that won’t be available after updating to v5.

On 10/1/2024 at 12:33 PM, Matt F said:

We understand that creating an app is more complicated up front than just writing the HTML, but if it's to execute repeated actions you'll definitely save time and minimize risk of error in the long run.

You folks don't seem to realize how much work you are going to allocate to all of IPS's clients—not only the ones with the skills to make apps, but also the underprivileged who have no idea what they're doing and must pay developers to get what they need. Not to mention the amount of effort community administrators and owners have to do to switch to managing their communities without the use of an HTML editor after maybe using it for many years.

Also, not to mention the custom basic buttons that CkEditor providing that will not be an option any more.

Tiptap editor from writing blog posts, publishing news stories and collaborating with AI, Tiptap helps create content around the web.

Communities are not just blogs, news publishing, or social media platforms. This is why the editor for us must be more advanced like CkEditor with many available features that doesn’t require creating an app for them to achieve that.

CKEditor 5 demo - Rich Text Editor ready to use

With this Tiptap editor I cannot even do a basic copy and paste a table like I used to do with CkEditor.

Tiptap paste example:

CompanyContactCountryAlfreds FutterkisteMaria AndersGermanyCentro comercial MoctezumaFrancisco ChangMexicoErnst HandelRoland MendelAustriaIsland TradingHelen BennettUKLaughing Bacchus WinecellarsYoshi TannamuriCanadaMagazzini Alimentari RiunitiGiovanni RovelliItaly

CkEditor example:

This is but one illustration of the challenges you will provide to the owners, administrators, and members of communities.

@Matt Please don't misunderstand me when I said that you folks picking the Tiptab editor was unwise. Since you are creating this system for your clients to utilize, not for the benefit of others to see, please listen to them when you make mistakes. Myself and many of your clients adore IPS and will always support you.

13 minutes ago, Patrick said:

I'm not sure who made the decision to move to a different editor Tiptap, but it was an unwise one, and you will see that when you look at how many clients continue to use version 4. To create their own unique work for the Guidelines, Privacy Policy, Offline Site, etc. pages, several communities use HTML editing.

This decision was made after attempting to utilize CKEditor5, but there were a couple critical limitations

1. It would have cost a ridiculous fortune to use on distributed software because they changed their license structure from cke4. This is especially important when you consider the v4 pricing model assumed the cost was $0. Furthermore, despite the cost it came with very little support and assistance, whereas with Tiptap on the other hand we get direct access to their development team who have been very helpful

2. The demos on their site may look really pretty and work in a very snappy manner, but what they don’t show you is, just like most editors today, it requires manually bundling their source code such that extending it would be impossible on the front end. We also found it didn’t play nice with js bundlers and weren’t able to get the bundle size down to an acceptable level.

25 minutes ago, Patrick said:

Also, not to mention the custom basic buttons that CkEditor providing that will not be an option any more.

This ties into what I was saying about it being a custom bundled JS app in that CKEditor5 doesn’t really have the custom button/plugin marketplace CKEditor4 had. The short explanation is that they required extension of classes which only exist inside nested dependency modules to create plugins, so an externally loaded plugin wouldn’t really be able to extend the class. In CKEditor4, there was a global CKEDITOR variable which devs used to add toolbar buttons and do dev things.

With tiptap we are able to deliver extensibility and robustness.

50 minutes ago, Patrick said:

Communities are not just blogs, news publishing, or social media platforms. This is why the editor for us must be more advanced like CkEditor with many available features that doesn’t require creating an app for them to achieve that.

I’m not in agreement on this. Unlike blogs or news publishing, on a forum-based community, the majority of content comes from users who really don’t need or want hyper control over the exact post layout and HTML structure. More advanced things like v4 source mode are generally only something you want admins doing, but the stance we’ve come to is that feels very much like giving up on using the editor to achieve things the right way. In 2024, you shouldn’t need raw HTML in a finished CMS application…. it isn’t effectively managing your content if that’s the case.

1 hour ago, Patrick said:

Tiptap paste example:

CompanyContactCountryAlfreds FutterkisteMaria AndersGermanyCentro comercial MoctezumaFrancisco ChangMexicoErnst HandelRoland MendelAustriaIsland TradingHelen BennettUKLaughing Bacchus WinecellarsYoshi TannamuriCanadaMagazzini Alimentari RiunitiGiovanni RovelliItaly

CkEditor example:

You are correct that certain content structures are not going to be supported out of the box. That being said,

• We are going to be implementing table support in an early point release as it is such a commonly requested item

• There are a lot of features and quirks to consider with tables. We found CKEditor5’s solution had a lot of CSS and bloat which made it tricky to setup and have a very clunky feel in our software.

If I were to sum up our perspective on Invision Communtiy 5, we want to make it really easy to use really powerful, modern tools. This requires simplifying some areas and changing how others work, including the editor. Tiptap was chosen after weeks comparing and rigorously testing available options and it stood out as the best option to achieve our goal.

I understand the intention behind simplifying the editor and I also believe that removing HTML functionality for admins limits flexibility and creativity in managing content.

Many of us rely on custom HTML for advanced styling and features that are essential to our sites. Though editor extensions can help, they add complexity that the raw HTML editor avoided.

Allowing experienced admins the option to use HTML would balance both usability and customisation without compromising the platform's integrity. It would be great to see a compromise that accommodates these needs - but if Tiptap does not support it, I guess there is no way around it.

37 minutes ago, Mick79 said:

I understand the intention behind simplifying the editor and I also believe that removing HTML functionality for admins limits flexibility and creativity in managing content.

Many of us rely on custom HTML for advanced styling and features that are essential to our sites. Though editor extensions can help, they add complexity that the raw HTML editor avoided.

Allowing experienced admins the option to use HTML would balance both usability and customisation without compromising the platform's integrity. It would be great to see a compromise that accommodates these needs - but if Tiptap does not support it, I guess there is no way around it.

Yeah, so there are a few reasons

• From our perspective, source mode is kinda like giving up on using the editor. Yeah it enables you to do anything, but that also was the number 1 cause of the editor ending up in a broken state and needing to go in and edit HTML to fix it (or file a bug report/support ticket). We want to offer tools that just work, so that you and everyday users alike can simply use the editor's features without needing to give up and edit the source HTML

• We would like to implement modern features including realtime collaboration and AI. I don't want to get off track delving into the details on that but raw HTML editing doesn't play nicely with those features... Selection management and collision reconciliation become major concerns.

• Not only does tiptap not natively support it, neither did Ckeditor5. It's just a complicated thing to do the way editors work today because the HTML isn't the source of truth for the editor state. So it's not like we went in and decided to remove it, but rather it would have taken too much time writing loads of code to halfway emulate the way editors used to work. (Yes, I'm aware of the general HTML support ck5 plugin but from our experience it didn't work smoothly because it didn't properly distinguish between block and inline nodes. It also caused performance problems when you have a lot of levels of nesting)

I’ll just add a few thoughts and a little history on top of the excellent technical details Matt added above.

When we first approached v5 and the need for a new editor given that CKEditor 4 was end of life, no longer open source and only supported with a commercial license, we naturally went with CKEditor 5.

What happened with CKEditor 5?

Well, it wasn’t great. CKEditor 5, like TipTap, and all other modern editors had a very different way of parsing content. Instead of treating everything as strings, it wants to create nodes for each tag, which meant that HTML editing would be problematic. Matt spend a few months working on it and we got it into a finished state but there were a lot of issues. The first was that there was no easy way to add custom buttons without recompiling the JS, which made it impossible for a distributed piece of software. Secondly, the compiled JS was huge and it was taking 3-4 seconds for the editor to open. And finally, I became very uncomfortable with the direction of travel CKEditor was taking. They made it clear with recent blog posts that they only wanted open source projects to use CKEditor without a commercial license. Their open source version switched license types and forced a “Powered by CKEditor” icon on every editor at the bottom of the editing window. To remove this, and to use it in a commercial product you’d need a commercial license. I consider this fair. After all, the CKEditor developers should get paid for their work in paid software and clearly their current model of providing an open source product with an optional license wasn’t generated enough revenue.

We contacted them and enquired about a license that we could distribute, that did not use their cloud deployment/CDN and did not use any of their advanced plugins and we were quoted $35,000/year with basic support of a maximum of 24 support tickets a year.

So we were left with a bloated and slow implementation that could not allow for custom buttons that cost $35,000 every year with the risk of that price increasing year on year.

Even though we had it finished and working in v5, we knew we had to make a tough decision.

Enter TipTap

We did a lot of research into various editors. From fully functional editors such as TinyMCE to more raw editors such as Quill and just about everything in between. We wanted the best balance of ease of development, good support and speed. TipTap fit all those requirements when others did not. We bought an enterprise license which gives us access to their developers via Slack which has been really helpful. The cost of this license is about a third of CKEditor 5.

So what about HTML editing

Like CKEditor 5, and all modern editors, doesn’t think of input as merely a string to parse into blocks, but it looks at the document (the editor contents) as a tree of nodes. Each node is handled in a specific way, so you need to ensure all possible HTML tags are handled via extensions. This is great because it’s faster, more secure and arguably easier to write extensions to handle custom buttons and plugins but it also means the editor has no concept of ‘source mode’. There is no source, it’s an internal array of items. It is a common request but there is no clean solution at this time and none of the suggested workarounds actually work reliably.

However, we also felt it was important to take a step back and, as Matt said above, not just give up and add in a text area instead of an editor when you want ‘HTML editing’ because for one, most people do not not to compose a complicated post in a text area manually entering HTML tags. They want to edit the already created HTML in the editor, which isn’t easy. Clicking edit would destroy the contents as TipTap has no way to create a document tree for random HTML pasted in.

Part of this solution was to embrace the ease of which TipTap can add extensions. It is the reason we created the editor permissions framework to allow you (the admin) to have specific functionality that others do not get. It’s important to remember that v5.0.0 is the very start of the future for us. We have lots of plans to add more extensions, such as tables in minor point releases but we have to draw a line and say “this is fine for the first version”. If you are using source mode heavily and pasting in JS and tracking code, then let us know the specifics. I bet there’s an easy way to do it in v5 that doesn’t rely on your hand editing posts which is time consuming. It’s also likely that you won’t upgrade to v5 right away and watch how it develops as v4 will still be supported with bug fixes.

Hopefully you can see that TipTap is not just a second choice because CKEditor was expensive, it’s actually far superior in every way but also we didn’t just decide to remove HTML editing on a whim.

Let’s work together to build proper tools and not just give up and throw in a rough workaround.

2 hours ago, Matt said:

Secondly, the compiled JS was huge and it was taking 3-4 seconds for the editor to open.

Woltlab has CKEditor 5 and works very fast, loads instantly.

1 minute ago, Mat said:

Woltlab has CKEditor 5 and works very fast, loads instantly.

They are an open source product using the open source version. They wrote that blog one month after the version of CKEditor that requires attribution on every editor. If they have not added that, then they risk compliance issues - and CKEditor has a very active compliance department.

But as far as I can tell, they don’t have a source mode editing function.