tiptap-markdown/src/extensions/nodes/code-block.js

Edit markdown content in tiptap editor.

import { Node } from "@tiptap/core";


const CodeBlock = Node.create({
    name: 'codeBlock',
});

export default CodeBlock.extend({
    /**
     * @return {{markdown: MarkdownNodeSpec}}
     */
    addStorage() {
        return {
            markdown: {
                serialize(state, node) {
                    state.write("```" + (node.attrs.language || "") + "\n");
                    state.text(node.textContent, false);
                    state.ensureNewLine();
                    state.write("```");
                    state.closeBlock(node);
                },
                parse: {
                    setup(markdownit) {
                        markdownit.set({
                            langPrefix: this.options.languageClassPrefix ?? 'language-',
                        });
                    },
                    updateDOM(element) {
                        element.innerHTML = element.innerHTML.replace(/\n<\/code><\/pre>/g, '</code></pre>')
                    },
                },
            }
        }
    }
});