fix: Allow extending code-block-lowlight (#1917)

Use the extension name when initializing the
LowlightPlugin. In this way, several extensions
can make use of the same plugin

Co-authored-by: Enrique Alcantara <[email protected]>

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

@@ -16,7 +16,7 @@ export const CodeBlockLowlight = CodeBlock.extend<CodeBlockLowlightOptions>({
     return [
       ...this.parent?.() || [],
       LowlightPlugin({
-        name: 'codeBlock',
+        name: this.name,
         lowlight: this.options.lowlight,
       }),
     ]

tests/cypress/integration/extensions/codeBlockLowlight.spec.ts

@@ -0,0 +1,80 @@
+/// <reference types="cypress" />
+
+import {
+  CodeBlockLowlight,
+} from '@tiptap/extension-code-block-lowlight'
+import { Text } from '@tiptap/extension-text'
+import { Paragraph } from '@tiptap/extension-paragraph'
+import { Document } from '@tiptap/extension-document'
+import { Editor } from '@tiptap/core'
+import * as lowlight from 'lowlight'
+
+describe('code block highlight', () => {
+  let Frontmatter
+  const editorElClass = 'tiptap'
+  let editor: Editor
+
+  const createEditorEl = () => {
+    const editorEl = document.createElement('div')
+    editorEl.classList.add(editorElClass)
+
+    document.body.appendChild(editorEl)
+
+    return editorEl
+  }
+  const getEditorEl = () => document.querySelector(`.${editorElClass}`)
+
+  beforeEach(() => {
+    Frontmatter = CodeBlockLowlight
+      .configure({ lowlight })
+      .extend({
+        name: 'frontmatter',
+      })
+
+    editor = new Editor({
+      element: createEditorEl(),
+      extensions: [
+        Document,
+        Text,
+        Paragraph,
+        CodeBlockLowlight,
+        Frontmatter,
+      ],
+      content: {
+        type: 'doc',
+        content: [
+          {
+            type: 'codeBlock',
+            attrs: {
+              language: 'javascript',
+            },
+            content: [{
+              type: 'text',
+              text: 'alert("Hello world");',
+            }],
+          },
+          {
+            type: 'frontmatter',
+            attrs: {
+              language: 'yaml',
+            },
+            content: [{
+              type: 'text',
+              text: '---\ntitle: Page title\n---',
+            }],
+          },
+        ],
+      },
+    })
+  })
+
+  afterEach(() => {
+    editor.destroy()
+    getEditorEl()?.remove()
+  })
+
+  it('executes lowlight plugin in extensions that inherit from code-block-lowlight', () => {
+    expect(getEditorEl()?.querySelector('.language-javascript .hljs-string')).not.to.eq(null)
+    expect(getEditorEl()?.querySelector('.language-yaml .hljs-string')).not.to.eq(null)
+  })
+})