Invision Community 5: The all-new editor

[PoC2]

Sticky Toolbar - excellent.

+1 for tables.

Will previous use of CKE spoiler code auto-update on upgrade to expandables or will previous posts remain legacy "spoiler"?

There are also various buttons I want my mods and admins to have access to but not general members, so restriction by group would be useful.

There's obviously a lot of work going into version 5.

[SoloInter]

21 hours ago, Matt Finger said:

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.

 

 

Thank for this "simple" thing who is really a MASTERCLASS

[Sonya*]

1 hour ago, PoC2 said:

restriction by group would be useful.

This is even mandatory to avoid large or colorful messages. Or even large and colorful.

[Matt Finger]

9 hours ago, Teddy Rogers said:

I assume there will be no issues with the new Tiptap editor quoting from existing content and tags within the forums?

You assume correctly

 

9 hours ago, Teddy Rogers said:

Regarding "code blocks" and "inline code", what languages will be supported in IC5 and how can we add additional language support? Can we make suggestions now to include for release in IC5?

Pretty much every common modern language is supported in IC5, almost 40 of them in total, though inline code doesn't support language highlighting.

 

5 hours ago, PoC2 said:

Will previous use of CKE spoiler code auto-update on upgrade to expandables or will previous posts remain legacy "spoiler"?

The spoilers will likely be auto-updated in the background after upgrade, however users won't know the difference as they are styled to look identical to expandable boxes. Also, the editor will recognize a spoiler and convert it to an expandable box when you open and edit content. On large sites with millions of posts, a bulk conversion during upgrade would just take way too long.

[Buttercup]

It looks great. Thank you @Matt Finger for all your hard work.

 

When is the release of IP5?

[Teddy Rogers]

7 hours ago, Matt Finger said:

Pretty much every common modern language is supported in IC5, almost 40 of them in total, though inline code doesn't support language highlighting.

Does it include any of the following languages:

• MASM
• FASM
• PureBasic

If not, is it possible to include at least MASM and PureBasic?

Any chance of seeing the current list?

Ted.

[Gary]

There is no release date confirmed for the next version yet.

[beats23]

Nice job.

I did not see these two previous features in the new editor.

Will this new editor still have the stock reply feature and the Source button for inputting code to the editor? I rely a lot on those two features.

[Mick23]

Love it! Awesome work!

[PoC2]

9 hours ago, beats23 said:

Will this new editor still have the stock reply feature and the Source button for inputting code to the editor? I rely a lot on those two features.

 

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

[Michael R]

Love it! Although I am concerned my members will write their entire posts in H1 😄

[Matt]

2 hours ago, PoC2 said:

 

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

Source mode isn't possible in v5 due to how modern editors manage text. It's not like the old days where it markup was thrown around it and called it good.

What do you need to do that requires source mode? With the new editor in v5 you can add new functionality (and button based styles) still.

7 minutes ago, Michael R said:

Love it! Although I am concerned my members will write their entire posts in H1 😄

Why would anyone do that?

[Matt]

11 hours ago, beats23 said:

Nice job.

I did not see these two previous features in the new editor.

Will this new editor still have the stock reply feature and the Source button for inputting code to the editor? I rely a lot on those two features.

As above, source mode has been removed. Modern editors (all of them) manage markup differently. If you added something the editor couldn't handle via HTML, then it would just remove the unsupported code when you hit edit.

Source mode was added back when we had BBCode and it was.. less than perfect in how it handled it, so it allowed admins to go in and edit it to fix it. Likewise, CKEditor was such a pain to write plugins for, it was easier to just say "oh, use source mode to add stuff". Tiptap is much easier to develop for.

What do you use source mode for?

[Kirill Gromov]

For example, I add a class to an embedded YouTube video to center it. The embedded block does not respond to the centering buttons from editor.

[Sonya*]

3 hours ago, Matt said:

What do you use source mode for?

For records in Pages.

• Tables
• Removing tags, that I cannot remove or repair other ways, like <abbr>-tags
• Adding styles like ipsButton or ipsMessage

[opentype]

I also use source mode all the time. Sometimes to inspect and clean up user posts, but like Sonya mostly for Pages articles. Custom classes, custom embeds …

[beats23]

4 hours ago, Matt said:

As above, source mode has been removed. Modern editors (all of them) manage markup differently. If you added something the editor couldn't handle via HTML, then it would just remove the unsupported code when you hit edit.

Source mode was added back when we had BBCode and it was.. less than perfect in how it handled it, so it allowed admins to go in and edit it to fix it. Likewise, CKEditor was such a pain to write plugins for, it was easier to just say "oh, use source mode to add stuff". Tiptap is much easier to develop for.

What do you use source mode for?

 

 I rely on the "source" button to input many iframe codes into all the places where the editor is used on my website. 

Example from the source button.

<p>
	<iframe allowfullscreen="true" allowtransparency="true" frameborder="0" scrolling="no" seamless="seamless" src="https://MYSITE.com/tutorials/learnhow/index.html" style="width:100%;height: 1200px"></iframe>
</p>

 

My website also relies on displaying a before-and-after photo slider. For it to display, the code has to be placed in the editor using the "source" button.

Example from the source button.

<div>
	<div class="ba-slider-element">
		<div class="ba-slider">
			<img alt="" src="https://cdn.webshopapp.com/shops/277197/files/388578586/frog-frog-52-the-lightweight-kids-bike.jpg">
			<div class="before-lable-1">
				<div class="before-lable-2">
					<div class="resize">
						<img alt="" src="https://cdn.webshopapp.com/shops/277197/files/388578586/frog-frog-52-the-lightweight-kids-bike.jpg">
						<div class="after-lable-1">
							&nbsp;
						</div>

						<div class="after-lable-2">
							&nbsp;
						</div>
					</div>

					<div class="handle">
						&nbsp;
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

 

Is it possible to input those codes above into a page using the new editor?

Will the "stock reply" option be implemented in the new editor?

[LaCollision]

5 hours ago, Matt said:

What do you need to do that requires source mode?

Very useful for copying entire formatted messages (bold, links, lists...), when pasting rich text is forbidden for members (and only admins are allowed to see the HTML source of the message).

[sound]

5 hours ago, Matt said:

What do you use source mode for?

as admin use it for the below

to embed cms blocks via the 'external embed' method

to embed 3rd party website embeds/iframes

not just for forum posts but for nearly all content items such as articles, events etc

 

[Vakarian96]

Will it also be possible to create and edit tables with the editor, i.e. will there be corresponding menu items in the editor to add or remove columns and rows so that every user can cope with them?

 

That would be very interesting for the page module.

Edited May 18 by Vakarian96

[PoC2]

Source Mode uses:

• Custom embed of videos that are custom sizes, like Vimeo 21:9 or whatever ratio we wish to use - doesn't work properly without source mode.
• HTML code clean-up in Pages (as already mentioned).
• Embedding Sketchfab 3D models or other 3rd party materials (e.g. Custom Google Map embedding), the use of  source mode for adding specific code for custom settings.

So many uses for source mode.

Not having it I consider a serious omission. More important than having a sticky toolbar.

[2TonWaffle]

Source mode was typically used in my case for iframe embeds from our podcast host to have the latest episodes show up within a post.

[David N.]

On 5/17/2024 at 12:53 PM, Matt said:

What do you use source mode for?

I use source mode all the time, mostly for Pages article. There are things that are easier to me to edit in HTML in a code editor like BBedit and then paste in the text editor in source mode. 

I would really, really miss source mode if it wasn't present in v5!! 

[David N.]

Sometimes the editor won't let me enter anything at all before or after a quote (maybe it's a bug?), and when that happens I can enter source mode for example to add a paragraph just so that I can type in my answer. 

[Marc Stridgen]

16 minutes ago, David N. said:

Sometimes the editor won't let me enter anything at all before or after a quote (maybe it's a bug?), and when that happens I can enter source mode for example to add a paragraph just so that I can type in my answer. 

Its an issue sorted on the new editor, with the "add new line" functionality