add language support to code blocks

docs/src/demos/Extensions/CodeBlock/index.spec.js

@@ -69,6 +69,16 @@ context('/api/extensions/code-block', () => {
     })
   })
 
+  it('should parse the language from a HTML code block', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.setContent('<pre><code class="language-css">body { display: none; }</code></pre>')
+
+      cy.get('.ProseMirror')
+        .find('pre>code.language-css')
+        .should('have.length', 1)
+    })
+  })
+
   it('should make a code block for js', () => {
     cy.get('.ProseMirror').then(([{ editor }]) => {
       editor.clearContent()

packages/extension-code-block/index.ts

@@ -26,7 +26,25 @@ export default new Node()
     defining: true,
     draggable: false,
     parseDOM: [
-      { tag: 'pre', preserveWhitespace: 'full' },
+      {
+        tag: 'pre',
+        preserveWhitespace: 'full',
+        getAttrs(dom) {
+          const code = (dom as HTMLElement).firstChild
+
+          if (!code) {
+            return null
+          }
+
+          const classAttribute = ((code as HTMLElement).getAttribute('class') as string)
+
+          if (!classAttribute) {
+            return null
+          }
+
+          return { language: classAttribute.replace(/^(language-)/, '') }
+        },
+      },
     ],
     toDOM: node => ['pre', ['code', { class: node.attrs.language && `language-${node.attrs.language}` }, 0]],
   }))