From e24ce2af77338bc792b41e59148b9958297a8352 Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Sat, 26 Sep 2020 20:20:52 +0200
Subject: [PATCH] add language support to code blocks

---
 .../demos/Extensions/CodeBlock/index.spec.js  | 23 +++++++++++++++----
 packages/extension-code-block/index.ts        | 11 +++++++--
 2 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/docs/src/demos/Extensions/CodeBlock/index.spec.js b/docs/src/demos/Extensions/CodeBlock/index.spec.js
index 56585632..657878a1 100644
--- a/docs/src/demos/Extensions/CodeBlock/index.spec.js
+++ b/docs/src/demos/Extensions/CodeBlock/index.spec.js
@@ -59,9 +59,24 @@ context('/api/extensions/code-block', () => {
   })
 
   it('should make a code block from markdown shortcuts', () => {
-    cy.get('.ProseMirror')
-      .type('``` {enter}Code')
-      .find('pre')
-      .should('contain', 'Code')
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.clearContent()
+
+      cy.get('.ProseMirror')
+        .type('``` Code')
+        .find('pre>code')
+        .should('contain', 'Code')
+    })
+  })
+
+  it('should make a code block for js', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.clearContent()
+
+      cy.get('.ProseMirror')
+        .type('```js Code')
+        .find('pre>code.language-js')
+        .should('contain', 'Code')
+    })
   })
 })
diff --git a/packages/extension-code-block/index.ts b/packages/extension-code-block/index.ts
index c91740e1..ab2bf10a 100644
--- a/packages/extension-code-block/index.ts
+++ b/packages/extension-code-block/index.ts
@@ -9,9 +9,16 @@ declare module '@tiptap/core/src/Editor' {
   }
 }
 
+export const inputRegex = /^```(?<language>[a-z]*)? $/
+
 export default new Node()
   .name('code_block')
   .schema(() => ({
+    attrs: {
+      language: {
+        default: null,
+      },
+    },
     content: 'text*',
     marks: '',
     group: 'block',
@@ -21,7 +28,7 @@ export default new Node()
     parseDOM: [
       { tag: 'pre', preserveWhitespace: 'full' },
     ],
-    toDOM: () => ['pre', ['code', 0]],
+    toDOM: node => ['pre', ['code', { class: node.attrs.language && `language-${node.attrs.language}` }, 0]],
   }))
   .commands(({ name }) => ({
     codeBlock: attrs => ({ commands }) => {
@@ -32,6 +39,6 @@ export default new Node()
     'Shift-Control-\\': () => editor.codeBlock(),
   }))
   .inputRules(({ type }) => [
-    textblockTypeInputRule(/^```$/, type),
+    textblockTypeInputRule(inputRegex, type, ({ groups }: any) => groups),
   ])
   .create()