Cant get svg image to render

Show
1

I have been struggling for 2 days to get svg image content to be rendereded inside prosemirror. Basically what i did was to create schemas to allow the properties to be added and not cleaned when adding them but it seems like something is not correct. All the html is generated in the editor but looks like the image is not loaded. If i move the same html out of prosemirror it renderes correctly. Any guidance how to allow any tag and attribute below the svg tag would be awesome because its a lot of work to specift every allowed element and attribute in svg.

Here is example of the code for each node and schema

get schema() {
    return {
        attrs: {
            style: {
                default: null,
            },
            xmlns: {
                default: null
            },
            viewBox: {
                default: null
            }
        },
        content: 'block*',
        group: 'block',
        draggable: false,
        parseDOM: [{
            tag: 'svg',
            getAttrs: dom => {
                let allowed = {};
                for (var i = 0; i < dom.attributes.length; i++) {
                    var attrib = dom.attributes[i];
                    allowed[attrib.name] = attrib.value
                }
                return allowed;
            }
        }],
        toDOM: node => ['svg', node.attrs, 0],
    }
}


get schema() {
    return {
        attrs: {
            style: {
                default: null,
            },
            xmlns: {
                default: null
            }
        },
        content: 'block*',
        group: 'block',
        draggable: false,
        parseDOM: [{
            tag: 'defs',
            getAttrs: dom => {
                let allowed = {};
                for (var i = 0; i < dom.attributes.length; i++) {
                    var attrib = dom.attributes[i];
                    allowed[attrib.name] = attrib.value
                }
                return allowed;
            }
        }],
        toDOM: node => ['defs', node.attrs, 0],
    }
}

get schema() { return { attrs: { style: { default: null }, href: { default: null }, x: { default: null }, y: { default: null }, width: { default: null }, height: { default: null }, preserveAspectRatio: { default: null } }, content: ‘block+’, group: ‘block’, draggable: false, parseDOM: [{ tag: ‘image’, getAttrs: dom => { let allowed = {}; for (var i = 0; i < dom.attributes.length; i++) { var attrib = dom.attributes[i]; allowed[attrib.name] = attrib.value } return allowed; } }], toDOM: node => [‘image’, node.attrs, 0], } }

2

I don’t know what might be going on — try putting the image in a plain contenteditable element and see if that also breaks.

3

Thats the intresting part that it works nicely and also if i paste the svg image directly in edit html using chrome into the prosemirror contenteditable it works. But when prosemirror renders the html which looks exactly the same it dosent render. Seems like something is not set corectly.

4

This seems suspicious. I’d expect an SVG image to be a leaf node, with all its markup stored in an attribute. This here renders it as a parent node, which would mean that all the inner svg markup would have to be stored in the ProseMirror document (and have corresponding node types, which’d probably not match "block*"). You could do that, but it doesn’t look like it’s what you’re doing here—remember that ProseMirror documents are not HTML, so you can’t just transparently store a blob of SVG markup inside of them.

5

I created this jsfiddle to explain the issue

https://jsfiddle.net/ao2nvqLm/1/

i created the nodes as required and the html is rendered using prosemirror but the image is never displayed. If i copy the dom node outside prosimirror it will be displayed.

6

It may be a namespace issue. When I added SVG images to KaTeX, I had to create the element thus:

const svgNS = "http://www.w3.org/2000/svg";
const node = document.createElementNS(svgNS, "svg");