Performance: Fix bottleneck when a Tiptap editor appears on a document

src/Umbraco.Web.UI.Client/src/packages/tiptap/components/input-tiptap/input-tiptap.element.ts

@@ -1,3 +1,4 @@
+import UmbTiptapRichTextEssentialsExtensionApi from '../../extensions/core/rich-text-essentials.tiptap-api.js';
 import { Editor } from '../../externals.js';
 import { UmbTiptapRteContext } from '../../contexts/tiptap-rte.context.js';
 import type { AnyExtension } from '../../externals.js';
@@ -140,21 +141,23 @@ export class UmbInputTiptapElement extends UmbFormControlMixin<string, typeof Um
 
 		// Ensures that the "Rich Text Essentials" extension is always enabled. [LK]
 		if (!enabledExtensions.includes(TIPTAP_CORE_EXTENSION_ALIAS)) {
-			const { default: api } = await import('../../extensions/core/rich-text-essentials.tiptap-api.js');
-			this._extensions.push(new api(this));
+			this._extensions.push(new UmbTiptapRichTextEssentialsExtensionApi(this));
 		}
 
 		await new Promise<void>((resolve) => {
 			this.observe(umbExtensionsRegistry.byTypeAndAliases('tiptapExtension', enabledExtensions), async (manifests) => {
-				for (const manifest of manifests) {
-					if (manifest.api) {
+				const loaded = await Promise.all(
+					manifests.map(async (manifest) => {
+						if (!manifest.api) return null;
 						const extension = await loadManifestApi(manifest.api);
-						if (extension) {
-							const ext = new extension(this);
-							ext.manifest = manifest;
-							this._extensions.push(ext);
-						}
-					}
+						if (!extension) return null;
+						const ext = new extension(this);
+						ext.manifest = manifest;
+						return ext;
+					}),
+				);
+				for (const ext of loaded) {
+					if (ext) this._extensions.push(ext);
 				}
 				resolve();
 			});

src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/anchor/manifests.ts

@@ -1,11 +1,13 @@
+import UmbTiptapAnchorExtensionApi from './anchor.tiptap-api.js';
+import UmbTiptapToolbarAnchorExtensionApi from './anchor.tiptap-toolbar-api.js';
 import { UMB_TIPTAP_ANCHOR_MODAL_ALIAS } from './modals/constants.js';
 
 export const manifests: Array<UmbExtensionManifest> = [
 	{
 		type: 'tiptapExtension',
 		alias: 'Umb.Tiptap.Anchor',
 		name: 'Anchor Tiptap Extension',
-		api: () => import('./anchor.tiptap-api.js'),
+		api: UmbTiptapAnchorExtensionApi,
 		meta: {
 			icon: 'icon-anchor',
 			label: '#tiptap_anchor',
@@ -17,7 +19,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		kind: 'button',
 		alias: 'Umb.Tiptap.Toolbar.Anchor',
 		name: 'Anchor Tiptap Toolbar Extension',
-		api: () => import('./anchor.tiptap-toolbar-api.js'),
+		api: UmbTiptapToolbarAnchorExtensionApi,
 		forExtensions: ['Umb.Tiptap.Anchor'],
 		meta: {
 			alias: 'anchor',

src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/block/manifests.ts

@@ -1,3 +1,5 @@
+import UmbTiptapBlockElementApi from './block.tiptap-api.js';
+import UmbTiptapBlockPickerToolbarExtension from './block.tiptap-toolbar-api.js';
 import type { ManifestTiptapExtension } from '../tiptap.extension.js';
 import type { ManifestTiptapToolbarExtensionButtonKind } from '../tiptap-toolbar.extension.js';
 
@@ -6,7 +8,7 @@ export const manifests: Array<ManifestTiptapExtension | ManifestTiptapToolbarExt
 		type: 'tiptapExtension',
 		alias: 'Umb.Tiptap.Block',
 		name: 'Block Tiptap Extension',
-		api: () => import('./block.tiptap-api.js'),
+		api: UmbTiptapBlockElementApi,
 		meta: {
 			icon: 'icon-plugin',
 			label: 'Block',
@@ -18,7 +20,7 @@ export const manifests: Array<ManifestTiptapExtension | ManifestTiptapToolbarExt
 		kind: 'button',
 		alias: 'Umb.Tiptap.Toolbar.BlockPicker',
 		name: 'Block Picker Tiptap Extension Button',
-		api: () => import('./block.tiptap-toolbar-api.js'),
+		api: UmbTiptapBlockPickerToolbarExtension,
 		forExtensions: ['Umb.Tiptap.Block'],
 		meta: {
 			alias: 'umbblockpicker',

src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/blockquote/manifests.ts

@@ -1,9 +1,11 @@
+import UmbTiptapBlockquoteExtensionApi from './blockquote.tiptap-api.js';
+import UmbTiptapToolbarBlockquoteExtensionApi from './blockquote.tiptap-toolbar-api.js';
 export const manifests: Array<UmbExtensionManifest> = [
 	{
 		type: 'tiptapExtension',
 		alias: 'Umb.Tiptap.Blockquote',
 		name: 'Blockquote Tiptap Extension',
-		api: () => import('./blockquote.tiptap-api.js'),
+		api: UmbTiptapBlockquoteExtensionApi,
 		meta: {
 			icon: 'icon-blockquote',
 			label: 'Blockquote',
@@ -15,7 +17,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		kind: 'button',
 		alias: 'Umb.Tiptap.Toolbar.Blockquote',
 		name: 'Blockquote Tiptap Toolbar Extension',
-		api: () => import('./blockquote.tiptap-toolbar-api.js'),
+		api: UmbTiptapToolbarBlockquoteExtensionApi,
 		forExtensions: ['Umb.Tiptap.Blockquote'],
 		meta: {
 			alias: 'blockquote',

src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/bold/manifests.ts

@@ -1,9 +1,11 @@
+import UmbTiptapBoldExtensionApi from './bold.tiptap-api.js';
+import UmbTiptapToolbarBoldExtensionApi from './bold.tiptap-toolbar-api.js';
 export const manifests: Array<UmbExtensionManifest> = [
 	{
 		type: 'tiptapExtension',
 		alias: 'Umb.Tiptap.Bold',
 		name: 'Bold Tiptap Extension',
-		api: () => import('./bold.tiptap-api.js'),
+		api: UmbTiptapBoldExtensionApi,
 		meta: {
 			icon: 'icon-bold',
 			label: 'Bold',
@@ -15,7 +17,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		kind: 'button',
 		alias: 'Umb.Tiptap.Toolbar.Bold',
 		name: 'Bold Tiptap Toolbar Extension',
-		api: () => import('./bold.tiptap-toolbar-api.js'),
+		api: UmbTiptapToolbarBoldExtensionApi,
 		forExtensions: ['Umb.Tiptap.Bold'],
 		meta: {
 			alias: 'bold',

src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/bullet-list/manifests.ts

@@ -1,9 +1,11 @@
+import UmbTiptapBulletListExtensionApi from './bullet-list.tiptap-api.js';
+import UmbTiptapToolbarBulletListExtensionApi from './bullet-list.tiptap-toolbar-api.js';
 export const manifests: Array<UmbExtensionManifest> = [
 	{
 		type: 'tiptapExtension',
 		alias: 'Umb.Tiptap.BulletList',
 		name: 'Bullet List Tiptap Extension',
-		api: () => import('./bullet-list.tiptap-api.js'),
+		api: UmbTiptapBulletListExtensionApi,
 		meta: {
 			icon: 'icon-bulleted-list',
 			label: 'Bullet List',
@@ -15,7 +17,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		kind: 'button',
 		alias: 'Umb.Tiptap.Toolbar.BulletList',
 		name: 'Bullet List Tiptap Toolbar Extension',
-		api: () => import('./bullet-list.tiptap-toolbar-api.js'),
+		api: UmbTiptapToolbarBulletListExtensionApi,
 		forExtensions: ['Umb.Tiptap.BulletList'],
 		meta: {
 			alias: 'bulletList',

src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/character-map/manifests.ts

@@ -1,3 +1,4 @@
+import UmbTiptapToolbarCharacterMapExtensionApi from './character-map.tiptap-toolbar-api.js';
 import { UMB_TIPTAP_CHARACTER_MAP_MODAL_ALIAS } from './constants.js';
 
 export const manifests: Array<UmbExtensionManifest> = [
@@ -6,7 +7,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		kind: 'button',
 		alias: 'Umb.Tiptap.Toolbar.CharacterMap',
 		name: 'Character Map Tiptap Toolbar Extension',
-		api: () => import('./character-map.tiptap-toolbar-api.js'),
+		api: UmbTiptapToolbarCharacterMapExtensionApi,
 		meta: {
 			alias: 'umbCharacterMap',
 			icon: 'icon-omega',

src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/clear-formatting/manifests.ts

@@ -1,10 +1,11 @@
+import UmbTiptapToolbarClearFormattingExtensionApi from './clear-formatting.tiptap-toolbar-api.js';
 export const manifests: Array<UmbExtensionManifest> = [
 	{
 		type: 'tiptapToolbarExtension',
 		kind: 'button',
 		alias: 'Umb.Tiptap.Toolbar.ClearFormatting',
 		name: 'Clear Formatting Tiptap Toolbar Extension',
-		api: () => import('./clear-formatting.tiptap-toolbar-api.js'),
+		api: UmbTiptapToolbarClearFormattingExtensionApi,
 		meta: {
 			alias: 'clear-formatting',
 			icon: 'icon-clear-formatting',

src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/code-block/manifests.ts

@@ -1,9 +1,11 @@
+import UmbTiptapCodeBlockExtensionApi from './code-block.tiptap-api.js';
+import UmbTiptapToolbarCodeBlockExtensionApi from './code-block.tiptap-toolbar-api.js';
 export const manifests: Array<UmbExtensionManifest> = [
 	{
 		type: 'tiptapExtension',
 		alias: 'Umb.Tiptap.CodeBlock',
 		name: 'Code Block Tiptap Extension',
-		api: () => import('./code-block.tiptap-api.js'),
+		api: UmbTiptapCodeBlockExtensionApi,
 		meta: {
 			icon: 'icon-code',
 			label: 'Code Block',
@@ -15,7 +17,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		kind: 'button',
 		alias: 'Umb.Tiptap.Toolbar.CodeBlock',
 		name: 'Code Block Tiptap Toolbar Extension',
-		api: () => import('./code-block.tiptap-toolbar-api.js'),
+		api: UmbTiptapToolbarCodeBlockExtensionApi,
 		forExtensions: ['Umb.Tiptap.CodeBlock'],
 		meta: {
 			alias: 'codeBlock',

src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/core/manifests.ts

@@ -1,9 +1,10 @@
+import UmbTiptapRichTextEssentialsExtensionApi from './rich-text-essentials.tiptap-api.js';
 export const manifests: Array<UmbExtensionManifest> = [
 	{
 		type: 'tiptapExtension',
 		alias: 'Umb.Tiptap.RichTextEssentials',
 		name: 'Rich Text Essentials Tiptap Extension',
-		api: () => import('./rich-text-essentials.tiptap-api.js'),
+		api: UmbTiptapRichTextEssentialsExtensionApi,
 		weight: 1000,
 		meta: {
 			icon: 'icon-browser-window',

src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/embedded-media/manifests.ts

@@ -1,9 +1,11 @@
+import UmbTiptapEmbeddedMediaExtensionApi from './embedded-media.tiptap-api.js';
+import UmbTiptapToolbarEmbeddedMediaExtensionApi from './embedded-media.tiptap-toolbar-api.js';
 export const manifests: Array<UmbExtensionManifest> = [
 	{
 		type: 'tiptapExtension',
 		alias: 'Umb.Tiptap.Embed',
 		name: 'Embedded Media Tiptap Extension',
-		api: () => import('./embedded-media.tiptap-api.js'),
+		api: UmbTiptapEmbeddedMediaExtensionApi,
 		meta: {
 			icon: 'icon-embed',
 			label: '#general_embed',
@@ -15,7 +17,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		kind: 'button',
 		alias: 'Umb.Tiptap.Toolbar.EmbeddedMedia',
 		name: 'Embedded Media Tiptap Toolbar Extension',
-		api: () => import('./embedded-media.tiptap-toolbar-api.js'),
+		api: UmbTiptapToolbarEmbeddedMediaExtensionApi,
 		forExtensions: ['Umb.Tiptap.Embed'],
 		meta: {
 			alias: 'umbEmbeddedMedia',

src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/figure/manifests.ts

@@ -1,9 +1,10 @@
+import UmbTiptapFigureExtensionApi from './figure.tiptap-api.js';
 export const manifests: Array<UmbExtensionManifest> = [
 	{
 		type: 'tiptapExtension',
 		alias: 'Umb.Tiptap.Figure',
 		name: 'Figure Tiptap Extension',
-		api: () => import('./figure.tiptap-api.js'),
+		api: UmbTiptapFigureExtensionApi,
 		meta: {
 			icon: 'icon-frame',
 			label: 'Figure',

src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/font-family/manifests.ts

@@ -1,10 +1,11 @@
+import UmbTiptapToolbarFontFamilyExtensionApi from './font-family.tiptap-toolbar-api.js';
 export const manifests: Array<UmbExtensionManifest> = [
 	{
 		type: 'tiptapToolbarExtension',
 		kind: 'menu',
 		alias: 'Umb.Tiptap.Toolbar.FontFamily',
 		name: 'Font Family Tiptap Toolbar Extension',
-		api: () => import('./font-family.tiptap-toolbar-api.js'),
+		api: UmbTiptapToolbarFontFamilyExtensionApi,
 		forExtensions: ['Umb.Tiptap.HtmlAttributeStyle', 'Umb.Tiptap.HtmlTagSpan'],
 		items: [
 			{ label: 'Sans serif', appearance: { style: 'font-family: sans-serif;' }, data: 'sans-serif' },

src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/font-size/manifests.ts

@@ -1,10 +1,11 @@
+import UmbTiptapToolbarFontSizeExtensionApi from './font-size.tiptap-toolbar-api.js';
 export const manifests: Array<UmbExtensionManifest> = [
 	{
 		type: 'tiptapToolbarExtension',
 		kind: 'menu',
 		alias: 'Umb.Tiptap.Toolbar.FontSize',
 		name: 'Font Size Tiptap Toolbar Extension',
-		api: () => import('./font-size.tiptap-toolbar-api.js'),
+		api: UmbTiptapToolbarFontSizeExtensionApi,
 		forExtensions: ['Umb.Tiptap.HtmlAttributeStyle', 'Umb.Tiptap.HtmlTagSpan'],
 		items: [
 			{ label: '8pt', data: '8pt' },

src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/heading/manifests.ts

@@ -1,9 +1,16 @@
+import UmbTiptapHeadingExtensionApi from './heading.tiptap-api.js';
+import UmbTiptapToolbarHeading1ExtensionApi from './heading1.tiptap-toolbar-api.js';
+import UmbTiptapToolbarHeading2ExtensionApi from './heading2.tiptap-toolbar-api.js';
+import UmbTiptapToolbarHeading3ExtensionApi from './heading3.tiptap-toolbar-api.js';
+import UmbTiptapToolbarHeading4ExtensionApi from './heading4.tiptap-toolbar-api.js';
+import UmbTiptapToolbarHeading5ExtensionApi from './heading5.tiptap-toolbar-api.js';
+import UmbTiptapToolbarHeading6ExtensionApi from './heading6.tiptap-toolbar-api.js';
 export const manifests: Array<UmbExtensionManifest> = [
 	{
 		type: 'tiptapExtension',
 		alias: 'Umb.Tiptap.Heading',
 		name: 'Headings Tiptap Extension',
-		api: () => import('./heading.tiptap-api.js'),
+		api: UmbTiptapHeadingExtensionApi,
 		meta: {
 			icon: 'icon-heading',
 			label: 'Headings',
@@ -15,7 +22,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		kind: 'button',
 		alias: 'Umb.Tiptap.Toolbar.Heading1',
 		name: 'Heading 1 Tiptap Toolbar Extension',
-		api: () => import('./heading1.tiptap-toolbar-api.js'),
+		api: UmbTiptapToolbarHeading1ExtensionApi,
 		forExtensions: ['Umb.Tiptap.Heading'],
 		meta: {
 			alias: 'heading1',
@@ -28,7 +35,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		kind: 'button',
 		alias: 'Umb.Tiptap.Toolbar.Heading2',
 		name: 'Heading 2 Tiptap Toolbar Extension',
-		api: () => import('./heading2.tiptap-toolbar-api.js'),
+		api: UmbTiptapToolbarHeading2ExtensionApi,
 		forExtensions: ['Umb.Tiptap.Heading'],
 		meta: {
 			alias: 'heading2',
@@ -41,7 +48,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		kind: 'button',
 		alias: 'Umb.Tiptap.Toolbar.Heading3',
 		name: 'Heading 3 Tiptap Toolbar Extension',
-		api: () => import('./heading3.tiptap-toolbar-api.js'),
+		api: UmbTiptapToolbarHeading3ExtensionApi,
 		forExtensions: ['Umb.Tiptap.Heading'],
 		meta: {
 			alias: 'heading3',
@@ -54,7 +61,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		kind: 'button',
 		alias: 'Umb.Tiptap.Toolbar.Heading4',
 		name: 'Heading 4 Tiptap Toolbar Extension',
-		api: () => import('./heading4.tiptap-toolbar-api.js'),
+		api: UmbTiptapToolbarHeading4ExtensionApi,
 		forExtensions: ['Umb.Tiptap.Heading'],
 		meta: {
 			alias: 'heading4',
@@ -67,7 +74,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		kind: 'button',
 		alias: 'Umb.Tiptap.Toolbar.Heading5',
 		name: 'Heading 5 Tiptap Toolbar Extension',
-		api: () => import('./heading5.tiptap-toolbar-api.js'),
+		api: UmbTiptapToolbarHeading5ExtensionApi,
 		forExtensions: ['Umb.Tiptap.Heading'],
 		meta: {
 			alias: 'heading5',
@@ -80,7 +87,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		kind: 'button',
 		alias: 'Umb.Tiptap.Toolbar.Heading6',
 		name: 'Heading 6 Tiptap Toolbar Extension',
-		api: () => import('./heading6.tiptap-toolbar-api.js'),
+		api: UmbTiptapToolbarHeading6ExtensionApi,
 		forExtensions: ['Umb.Tiptap.Heading'],
 		meta: {
 			alias: 'heading6',

src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/horizontal-rule/manifests.ts

@@ -1,9 +1,11 @@
+import UmbTiptapHorizontalRuleExtensionApi from './horizontal-rule.tiptap-api.js';
+import UmbTiptapToolbarHorizontalRuleExtensionApi from './horizontal-rule.tiptap-toolbar-api.js';
 export const manifests: Array<UmbExtensionManifest> = [
 	{
 		type: 'tiptapExtension',
 		alias: 'Umb.Tiptap.HorizontalRule',
 		name: 'Horizontal Rule Tiptap Extension',
-		api: () => import('./horizontal-rule.tiptap-api.js'),
+		api: UmbTiptapHorizontalRuleExtensionApi,
 		meta: {
 			icon: 'icon-horizontal-rule',
 			label: 'Horizontal Rule',
@@ -15,7 +17,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		kind: 'button',
 		alias: 'Umb.Tiptap.Toolbar.HorizontalRule',
 		name: 'Horizontal Rule Tiptap Toolbar Extension',
-		api: () => import('./horizontal-rule.tiptap-toolbar-api.js'),
+		api: UmbTiptapToolbarHorizontalRuleExtensionApi,
 		forExtensions: ['Umb.Tiptap.HorizontalRule'],
 		meta: {
 			alias: 'horizontalRule',

src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/html-attr-class/manifests.ts

@@ -1,9 +1,10 @@
+import UmbTiptapHtmlAttributeClassExtensionApi from './html-attr-class.tiptap-api.js';
 export const manifests: Array<UmbExtensionManifest> = [
 	{
 		type: 'tiptapExtension',
 		alias: 'Umb.Tiptap.HtmlAttributeClass',
 		name: 'Class HTML Attribute Tiptap Extension',
-		api: () => import('./html-attr-class.tiptap-api.js'),
+		api: UmbTiptapHtmlAttributeClassExtensionApi,
 		meta: {
 			icon: 'icon-barcode',
 			label: '`class` attributes',

src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/html-attr-dataset/manifests.ts

@@ -1,9 +1,10 @@
+import UmbTiptapHtmlAttributeDatasetExtensionApi from './html-attr-dataset.tiptap-api.js';
 export const manifests: Array<UmbExtensionManifest> = [
 	{
 		type: 'tiptapExtension',
 		alias: 'Umb.Tiptap.HtmlAttributeDataset',
 		name: 'Dataset HTML Attribute Tiptap Extension',
-		api: () => import('./html-attr-dataset.tiptap-api.js'),
+		api: UmbTiptapHtmlAttributeDatasetExtensionApi,
 		meta: {
 			icon: 'icon-binarycode',
 			label: '`data-*` attributes',