Invision Community 5: The all-new editor

[aia]

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.

[Matt]

23 minutes ago, 13. said:

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

Our alpha testers who helped with feedback on this feature disagree. I don't agree that adding newlines before and after each box is a great idea. It'll lead to posts with extra whitespace if you forget to go back and remove them.

Keep those reasons for using source mode coming.

To re-iterate that we're not removing it because we've taken an Ivory Tower approach, it's just that it's not possible with modern editors (even CKEditor 5) due to how they see nodes/styles/marks.

Also, it's 2024 - if you need to embed JS and custom iFrames into a post, then perhaps we can find a better solution.

Pages will likely have more flexibility (although still no direct 'edit the source HTML of this editor').

[David N.]

11 minutes ago, Matt said:

Also, it's 2024 - if you need to embed JS and custom iFrames into a post, then perhaps we can find a better solution.

JS and iFrames are one thing, but what about, for example:

• HTML anchors (to add a link to an H2 further down the page)?
• Elements IDs and classes (for CSS)?
• Adding spans (for custom styling)?

Will these be possible in the new editor? 

I like to be able to style elements in specific ways, in Pages but also in the forum, for example: 

Or, for example: 

[aia]

16 minutes ago, Matt said:

I don't agree that adding newlines before and after each box is a great idea.

It seems you misinterpreted my suggestion. You 'don't agree' with something weird that you came up with yourself because I never said to do that. I would not agree with that either 

I only suggested adding one interactive area, which allows typing in the paragraph only upon interaction, and nothing like what you described. In this implementation, it does not have any of the drawbacks you imagined.

[Sonya*]

33 minutes ago, Matt said:

Also, it's 2024 - if you need to embed JS and custom iFrames into a post, then perhaps we can find a better solution.

You know that IPS embeds own links via iframes. External embeds for blocks as well. 🙃

I would be happy to find another solution either. Hate iframes. 

[aia]

33 minutes ago, David N. said:

• HTML anchors (to add a link to an H2 further down the page)?

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 

[G17 Media]

1 hour ago, Matt said:

Our alpha testers who helped with feedback on this feature disagree. I don't agree that adding newlines before and after each box is a great idea. It'll lead to posts with extra whitespace if you forget to go back and remove them.

 

The alpha testing group probably mostly consists of those who are at least experts or well-versed in using web technology and quick learners. @13.'s suggestion is probably more aligned with how I see normal users using it.

[Matt]

How about adding a line before?

[aia]

14 minutes ago, Matt said:

How about adding a line before?

Exactly the same as already implemented. My suggestion is for improvement, not replacement.

The main idea of the interactive area is to prevent people from getting stuck in a state where they are unable to add a new paragraph at all (which happens quite often in CKE now) or are forced to look for unintuitive buttons on other elements (as implemented in IC5).

When they can start typing into a paragraph with just one click in the same intuitive zone, regardless of the contents, they are no longer stuck. They can move blocks wherever they want after adding new paragraphs, etc.

Edited May 20 by 13.

[Matt Finger]

The issue with a region above and below block nodes is everything would be very spaced out, there isn't really much room between the top of the editor's content and the toolbar. You could say "space it out more", but then you'll either end up with really spaced content or an editor that isn't a wysiwyg. The arrows on the other hand, I'll admit that new users might not immediately recognize what they're for, but when they are in a situation needing a new line it becomes obvious.

 

Also, you can reposition the buttons on your own site with CSS to create these invisible regions if you really want, but we just found it more clunky than arrows in most cases.

[aia]

@Matt Finger, again, we're talking only about one region below the entire content (not "every block"), so everything you've mentioned is not relevant to the suggestion.

The implementation of the interactive area exactly as it was described in the suggestion will only improve UX and won't affect anything else in any way.

Edited May 20 by 13.

[Matt]

On 5/17/2024 at 9:35 AM, PoC2 said:

 

Source editing definitely a must for admins. Somethings we cannot embed without this functionality.

What do you need to embed, can you show us a screenshot?

15 minutes ago, 13. said:

we're talking only about one region below the entire content (not "every block"), so everything you've mentioned is not relevant to the suggestion.

I'm not even sure the functionality even exists in TipTap, or any other editor.

18 minutes ago, 13. said:

The implementation of the interactive area exactly as it was described in the suggestion will only improve UX and won't affect anything else in any way.

It's way too early to tell. We've not even released v5 yet, so making determinations about which method is better is premature.

[David N.]

I haven't received an answer to my earlier post in this thread, so I wanted to bring attention to it. Personally, I don't need to embed things per se, just to be able to give classes or id to HTML elements so that I can easily style them however I want. 

I also like to use an external code editor to edit the HTML so that I can easily for example do a "find and replace", then bring back the HTML code into my editor in Pages (all the time) or, more rarely, in the forum. 

Basically to me HTML source is a huge deal for Pages, not a huge deal for the forum if I can find other ways to style span elements to reach my goals. 

[Marc]

14 hours ago, David N. said:

I haven't received an answer to my earlier post in this thread, so I wanted to bring attention to it. Personally, I don't need to embed things per se, just to be able to give classes or id to HTML elements so that I can easily style them however I want. 

I also like to use an external code editor to edit the HTML so that I can easily for example do a "find and replace", then bring back the HTML code into my editor in Pages (all the time) or, more rarely, in the forum. 

Basically to me HTML source is a huge deal for Pages, not a huge deal for the forum if I can find other ways to style span elements to reach my goals. 

The question essentially there is "can I have full control over styling in code", and the answer to that would indeed be no. You're not going to do everything in the manner you have been by adding classes and IDs. You may however be able to paste things in, if you have been using an external editor to get things the way you want them to look. 

As has already been mentioned by my colleague above, i would really be best to wait till you an play with the new editor to see for yourself what you can do. You may find there are other ways to achieve what you are doing there, or be able to style things in a different manner. 

[David N.]

Being able to use full HTML and CSS for styling articles in Pages, at least for the admin, is one of the main criteria I used when I elected to switch to Invision Community to build my website, so if that's no longer available, that will be a HUGE step backwards, no matter how you slice it.

I understand that I'll have to play with the new editor to see how things are handled, but perhaps you can already answer a couple of questions: 

• Is there a way to create HTML anchor links? 
• Will it be possible to create custom HTML buttons the way I currently can, for example like this?
  

Edited May 21 by David N.

[Marc]

1 hour ago, David N. said:

Is there a way to create HTML anchor links? 

Not at present

1 hour ago, David N. said:

Will it be possible to create custom HTML buttons the way I currently can, for example like this?

These would be created via the plugin system

 

[UncrownedGuard]

These changes look really good!  

I am super happy to see the sticky toolbar and the embedding will be a great addition!  Plus, that means my custom Pages pages will now embed like everything else on the site.

I do have a question, will the embedding be editable in the editor?  Most importantly resizing things like YouTube embeds and potentially allowing users to make embedded links into squares, rectangles, etc?  Also, will this hopefully fix YouTube links posted via Zapier to be auto-embedded?

[Matt]

2 hours ago, David N. said:

Being able to use full HTML and CSS for styling articles in Pages, at least for the admin, is one of the main criteria I used when I elected to switch to Invision Community to build my website, so if that's no longer available, that will be a HUGE step backwards, no matter how you slice it.

I understand that I'll have to play with the new editor to see how things are handled, but perhaps you can already answer a couple of questions: 

• Is there a way to create HTML anchor links? 
• Will it be possible to create custom HTML buttons the way I currently can, for example like this?
  

With v5, you can probably save a lot of hassle and just use the backticks to generate inline code. Either way, applications have a framework to add new editor functionality, including buttons.
   

 

[Matt Finger]

5 hours ago, David N. said:

Is there a way to create HTML anchor links? 

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 🙂)

5 hours ago, David N. said:

Will it be possible to create custom HTML buttons the way I currently can, for example like this?

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.

[David N.]

1 minute ago, Matt Finger said:

there will be a global Table of Contents widget for which you can apply anchors to headings and box titles

Ok thanks, that's good news. 

1 minute ago, Matt Finger said:

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

Ok, good news also. Can I apply my own custom CSS to these elements?

[Matt Finger]

3 minutes ago, David N. said:

Can I apply my own custom CSS to these elements?

Of course!

[Dreadknux]

1 hour ago, 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 🙂)

Whaaaaaat Matt F coming in with the clutch MVP post of the thread!? That's awesome news, thanks for sharing/teasing!

On 5/20/2024 at 1:36 PM, 13. said:

@Matt Finger, again, we're talking only about one region below the entire content (not "every block"), so everything you've mentioned is not relevant to the suggestion.

The implementation of the interactive area exactly as it was described in the suggestion will only improve UX and won't affect anything else in any way.

Respectfully, I do not think your suggestion would really solve anything and in fact would make UX worse. Having extra space above/below the box area that is clickable-to-enable-text-input but is otherwise redundant will be super confusing to users, and would make the post editor not WYSIWYG compliant. Users need to see that what they're typing in the editor (and especially how it is presented in the editor) will be 100% accurate to how the post will appear on publish.

I would recommend waiting for V5 to come out and trying out the icon. While every user's experience will of course be different and there will likely be room for improvement in the UI, in my view I really do not think any user (no matter their level of experience) will miss these two clear icons sitting in the box area:

If a user is so inexperienced that you think they will not know what those buttons do, I will imagine the first thing said user would do is experiment and click those buttons to see what function they served. And there, problem solved.

My only suggestion regarding this topic is that, perhaps the arrow buttons should be permanently visible on the box in the post editor (at present in the V5 alpha those blue icons only appear if you hover your mouse over the box - and that's a scenario where I do believe that inexperienced users may have difficulty, as they may not think to hover over the box in order to reveal a solution they're looking for).

[Kirill Gromov]

1) Is the oembed format parsed as before? Can you center an embedded YouTube video?

2) Do mensions work as before? Is it possible to create a button to embed a record from a database?

[Omri Amos]

On 5/20/2024 at 12:24 PM, Matt said:

Our alpha testers who helped with feedback on this feature disagree

No disrespect but that's a stupid weird argument. Alpha testers are extremely tech savvy users, they don't represent the common users in any way.

[Matt]

No disrespect, but you've made several leaps of assumption. 😂

Our alpha testers are customers, some self-hosted, some with the cloud platform from all walks of life. They are not picked because they are tech savvy or knowledgable. They are picked because they are articulate, but beyond that they have no special skills. They are your peers.