Update TipTap Extensions (#6785)

* Use bundle

* Code snippet correction + whitespace tidy-up

---------

Co-authored-by: leekelleher <[email protected]>

Author: erikjanwestendorp

15/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/extensions.md

@@ -45,7 +45,7 @@ import { UmbTiptapExtensionApiBase } from '@umbraco-cms/backoffice/tiptap';
 import { Highlight } from '@tiptap/extension-highlight';
 
 export default class UmbTiptapHighlightExtensionApi extends UmbTiptapExtensionApiBase {
-	getTiptapExtensions = () => [Highlight];
+    getTiptapExtensions = () => [Highlight];
 }
 ```
 
@@ -62,39 +62,37 @@ export default class UmbTiptapToolbarHighlightExtensionApi extends UmbTiptapTool
 }
 ```
 
-Once you have the above code in place, they can be referenced in the [package manifest](../../../../../extending/property-editors/package-manifest.md) file.
-
-{% code title="App_Plugins/MyTiptapExtension/umbraco-package.json" lineNumbers="true" %}
-```json
-{
-    "name": "My Tiptap Extension",
-    "version": "1.0.0",
-    "extensions": [
-        {
-            "type": "tiptapExtension",
-            "alias": "My.Tiptap.Highlight",
-            "name": "My Highlight Tiptap Extension",
-            "api": "/App_Plugins/MyTiptapExtension/highlight.tiptap-api.js",
-            "meta": {
-                "icon": "icon-thumbnail-list",
-                "label": "Highlight",
-                "group": "#tiptap_extGroup_formatting"
-            }
-        },
-        {
-            "type": "tiptapToolbarExtension",
-            "kind": "button",
-            "alias": "My.Tiptap.Toolbar.TaskList",
-            "name": "My Highlight Tiptap Toolbar Extension",
-            "api": "/App_Plugins/MyTiptapExtension/highlight.tiptap-toolbar-api.js",
-            "meta": {
-                "alias": "highlight",
-                "icon": "icon-brush",
-                "label": "Highlight"
-            }
+Once you have the above code in place, they can be referenced using a [bundle extension type](../../../../../customizing/extending-overview/extension-types/bundle.md).
+
+{% code title="manifests.ts" lineNumbers="true" %}
+```js
+export const manifests: Array<UmbExtensionManifest> = [
+    {
+        type: 'tiptapExtension',
+        kind: 'button',
+        alias: 'My Highlight Tiptap Extension',
+        name: 'My.Tiptap.Highlight',
+        api: () => import('./highlight.tiptap-api.js'),
+        meta:{
+            icon: "icon-thumbnail-list",
+            label: "Highlight",
+            group: "#tiptap_extGroup_formatting"
         }
-    ]
-}
+    },
+    {
+        type: 'tiptapToolbarExtension',
+        kind: 'button',
+        alias: 'My.Tiptap.Toolbar.Highlight',
+        name: 'My Highlight Tiptap Toolbar Extension',
+        js: () => import('./highlight.tiptap-toolbar-api.js'),
+        forExtensions: ["My.Tiptap.Highlight"],
+        meta:{
+            alias: "highlight",
+            icon: "icon-brush",
+            label: "Highlight"
+        }
+    }
+]
 ```
 {% endcode %}