From 54be0e570e24c4a7bbb772c8222cfeac2ba1ff38 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Enrique=20Alc=C3=A1ntara?=
 <enriquecastl@users.noreply.github.com>
Date: Tue, 21 Sep 2021 03:26:11 -0400
Subject: [PATCH] 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 <ealcantara@gitlab.com>
---
 .../src/code-block-lowlight.ts                |  2 +-
 .../extensions/codeBlockLowlight.spec.ts      | 80 +++++++++++++++++++
 2 files changed, 81 insertions(+), 1 deletion(-)
 create mode 100644 tests/cypress/integration/extensions/codeBlockLowlight.spec.ts

diff --git a/packages/extension-code-block-lowlight/src/code-block-lowlight.ts b/packages/extension-code-block-lowlight/src/code-block-lowlight.ts
index adb73639a63..86eadecd41c 100644
--- a/packages/extension-code-block-lowlight/src/code-block-lowlight.ts
+++ b/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,
       }),
     ]
diff --git a/tests/cypress/integration/extensions/codeBlockLowlight.spec.ts b/tests/cypress/integration/extensions/codeBlockLowlight.spec.ts
new file mode 100644
index 00000000000..e179ab372fa
--- /dev/null
+++ b/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)
+  })
+})