Supporting style tag in ProseMirror

1

I’ve tried to extend the prosemirror schema to add support for the style tag. But the tag is not working in the editor, so a span tag is added. I’ve tried to do it with iFrame and it worked. The issue is with style.

How should I do it? Here is the schema node that I used. BTW I am using kend-editor, which has prosemirror, so I’m not sure if it’s related to kendo, but I think it’s connected to how Prosemirror works.


const style: NodeSpec = {
    content: 'text*',
    group: 'block',
    selectable: false,
    parseDOM: [
        {
            tag: 'style', // Match <style> tags in the HTML
            getAttrs(dom) {
                return { content: dom.innerHTML }; // Store the CSS content
            },
        },
    ],
    toDOM(node) {
        console.log('Style Node', node)
        return ['style', 0, node.textContent]; // Serialize it back as <style> tag with content
    },
};
2

This is definitely not going to work. A node with a hole (0) for its content should not also try to render its content.

But I’m not sure how you are intending this kind of node to work. The user definitely won’t be able to edit it, since <style> tags aren’t visible in the browser. Is this really something that you want to include as part of the document?

3

In my case, I have an HTML document ( including HTML, body, and style tags) and users can modify text and add styling, but the initial styles should be applied to the document.

At this moment, it renders the content, I see something like this. Where the CSS code you see is in span

image
image402×233 3.14 KB

p.s. I don’t see my toDOM called. I am using EditorUtils.createDocument(mySchema, initialContent) to create the document.