2021-04-29 00:09:48 +00:00
|
|
|
import { CodeBlockLowlight } from '@tiptap/extension-code-block-lowlight';
|
2021-06-08 18:10:23 +00:00
|
|
|
import * as lowlight from 'lowlight';
|
2021-05-07 12:10:27 +00:00
|
|
|
import { defaultMarkdownSerializer } from 'prosemirror-markdown/src/to_markdown';
|
2021-04-13 12:11:32 +00:00
|
|
|
|
2021-06-03 03:09:45 +00:00
|
|
|
const extractLanguage = (element) => element.getAttribute('lang');
|
2021-04-13 12:11:32 +00:00
|
|
|
|
2021-05-07 12:10:27 +00:00
|
|
|
const ExtendedCodeBlockLowlight = CodeBlockLowlight.extend({
|
2021-04-29 00:09:48 +00:00
|
|
|
addAttributes() {
|
2021-04-13 12:11:32 +00:00
|
|
|
return {
|
2021-06-08 18:10:23 +00:00
|
|
|
language: {
|
|
|
|
default: null,
|
|
|
|
parseHTML: (element) => {
|
|
|
|
return {
|
|
|
|
language: extractLanguage(element),
|
|
|
|
};
|
|
|
|
},
|
|
|
|
},
|
2021-04-29 00:09:48 +00:00
|
|
|
/* `params` is the name of the attribute that
|
|
|
|
prosemirror-markdown uses to extract the language
|
|
|
|
of a codeblock.
|
|
|
|
https://github.com/ProseMirror/prosemirror-markdown/blob/master/src/to_markdown.js#L62
|
|
|
|
*/
|
|
|
|
params: {
|
|
|
|
parseHTML: (element) => {
|
|
|
|
return {
|
|
|
|
params: extractLanguage(element),
|
|
|
|
};
|
2021-04-13 12:11:32 +00:00
|
|
|
},
|
|
|
|
},
|
2021-06-08 18:10:23 +00:00
|
|
|
class: {
|
|
|
|
default: 'code highlight js-syntax-highlight',
|
|
|
|
},
|
2021-04-13 12:11:32 +00:00
|
|
|
};
|
2021-04-29 00:09:48 +00:00
|
|
|
},
|
2021-06-08 18:10:23 +00:00
|
|
|
renderHTML({ HTMLAttributes }) {
|
|
|
|
return ['pre', HTMLAttributes, ['code', {}, 0]];
|
|
|
|
},
|
|
|
|
}).configure({
|
|
|
|
lowlight,
|
2021-04-29 00:09:48 +00:00
|
|
|
});
|
2021-05-07 12:10:27 +00:00
|
|
|
|
|
|
|
export const tiptapExtension = ExtendedCodeBlockLowlight;
|
|
|
|
export const serializer = defaultMarkdownSerializer.nodes.code_block;
|