diff --git a/docs/src/demos/Extensions/CodeBlock/index.spec.js b/docs/src/demos/Extensions/CodeBlock/index.spec.js index 657878a1..746605c0 100644 --- a/docs/src/demos/Extensions/CodeBlock/index.spec.js +++ b/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('
body { display: none; }')
+
+ 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()
diff --git a/packages/extension-code-block/index.ts b/packages/extension-code-block/index.ts
index ab2bf10a..66a670d1 100644
--- a/packages/extension-code-block/index.ts
+++ b/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]],
}))