fix: fix lowlight decorations for vue 3

docs/src/demos/Examples/CodeBlockLanguage/index.vue

@@ -16,10 +16,10 @@ import Text from '@tiptap/extension-text'
 import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
 import CodeBlockComponent from './CodeBlockComponent'
 
-// install all highlight.js languages
+// load all highlight.js languages
-import 'lowlight'
+import lowlight from 'lowlight'
 
-// or install specific languages only
+// load specific languages only
 // import lowlight from 'lowlight/lib/core'
 // import javascript from 'highlight.js/lib/languages/javascript'
 // lowlight.registerLanguage('javascript', javascript)
@@ -41,11 +41,13 @@ export default {
         Document,
         Paragraph,
         Text,
-        CodeBlockLowlight.extend({
+        CodeBlockLowlight
-          addNodeView() {
+          .extend({
-            return VueNodeViewRenderer(CodeBlockComponent)
+            addNodeView() {
-          },
+              return VueNodeViewRenderer(CodeBlockComponent)
-        }),
+            },
+          })
+          .configure({ lowlight }),
       ],
       content: `
         <p>

docs/src/demos/Nodes/CodeBlockLowlight/index.vue

@@ -15,10 +15,10 @@ import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
 import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
 
-// install all highlight.js languages
+// load all highlight.js languages
-import 'lowlight'
+import lowlight from 'lowlight'
 
-// or install specific languages only
+// load specific languages only
 // import lowlight from 'lowlight/lib/core'
 // import javascript from 'highlight.js/lib/languages/javascript'
 // lowlight.registerLanguage('javascript', javascript)
@@ -40,7 +40,9 @@ export default {
         Document,
         Paragraph,
         Text,
-        CodeBlockLowlight,
+        CodeBlockLowlight.configure({
+          lowlight,
+        }),
       ],
       content: `
         <p>

packages/extension-code-block-lowlight/src/code-block-lowlight.ts

@@ -1,11 +1,24 @@
-import CodeBlock from '@tiptap/extension-code-block'
+import lowlight from 'lowlight/lib/core'
+import CodeBlock, { CodeBlockOptions } from '@tiptap/extension-code-block'
 import { LowlightPlugin } from './lowlight-plugin'
 
-export const CodeBlockLowlight = CodeBlock.extend({
+export interface CodeBlockLowlightOptions extends CodeBlockOptions {
+  lowlight: any,
+}
+
+export const CodeBlockLowlight = CodeBlock.extend<CodeBlockLowlightOptions>({
+  defaultOptions: {
+    ...CodeBlock.config.defaultOptions,
+    lowlight,
+  },
+
   addProseMirrorPlugins() {
     return [
       ...this.parentConfig.addProseMirrorPlugins?.() || [],
-      LowlightPlugin({ name: 'codeBlock' }),
+      LowlightPlugin({
+        name: 'codeBlock',
+        lowlight: this.options.lowlight,
+      }),
     ]
   },
 })

packages/extension-code-block-lowlight/src/lowlight-plugin.ts

@@ -2,7 +2,6 @@ import { Plugin, PluginKey } from 'prosemirror-state'
 import { Decoration, DecorationSet } from 'prosemirror-view'
 import { Node as ProsemirrorNode } from 'prosemirror-model'
 import { findChildren } from '@tiptap/core'
-import lowlight from 'lowlight/lib/core'
 
 function parseNodes(nodes: any[], className: string[] = []): { text: string, classes: string[] }[] {
   return nodes
@@ -26,7 +25,7 @@ function parseNodes(nodes: any[], className: string[] = []): { text: string, cla
     .flat()
 }
 
-function getDecorations({ doc, name }: { doc: ProsemirrorNode, name: string}) {
+function getDecorations({ doc, name, lowlight }: { doc: ProsemirrorNode, name: string, lowlight: any }) {
   const decorations: Decoration[] = []
 
   findChildren(doc, node => node.type.name === name)
@@ -58,12 +57,12 @@ function getDecorations({ doc, name }: { doc: ProsemirrorNode, name: string}) {
   return DecorationSet.create(doc, decorations)
 }
 
-export function LowlightPlugin({ name }: { name: string }) {
+export function LowlightPlugin({ name, lowlight }: { name: string, lowlight: any }) {
   return new Plugin({
     key: new PluginKey('lowlight'),
 
     state: {
-      init: (_, { doc }) => getDecorations({ doc, name }),
+      init: (_, { doc }) => getDecorations({ doc, name, lowlight }),
       apply: (transaction, decorationSet, oldState, newState) => {
         const oldNodeName = oldState.selection.$head.parent.type.name
         const newNodeName = newState.selection.$head.parent.type.name
@@ -95,7 +94,7 @@ export function LowlightPlugin({ name }: { name: string }) {
             })
           )
         ) {
-          return getDecorations({ doc: transaction.doc, name })
+          return getDecorations({ doc: transaction.doc, name, lowlight })
         }
 
         return decorationSet.map(transaction.mapping, transaction.doc)