Image as a block

Hello, I’ve been trying to write my own image NodeType so it behaves as a block, so I created the NodeSpec, the Schema replacing old image NodeSpec with the one that I created, parsed the content with the DOMParser (renamed as ProseDOMParser to use along with default DOMParser)

    const imageSpec = {
        attrs: { 
            src: { default: '' }, 
            style: { default: 'display:block;' } 
        },
        inline: false,
        group: "block",
        draggable: false,
        toDOM: node => {
            return ["img", { ...node.attrs }]
        },
        parseDom: [{ 
            tag: 'img[src]',
            getAttrs: (dom) => {
                let src = dom.getAttribute("src")
                let style = dom.getAttribute("style")
                return { src, style };
            }
        }]
    }

    const imageSchema = new Schema({
        nodes: state.schema.spec.nodes.remove('image').addBefore('doc', 'image', imageSpec),
        marks: state.schema.spec.marks
    });

    const doc = new DOMParser().parseFromString(localContent, 'text/html');
    const proseDoc = ProseDOMParser.fromSchema(imageSchema).parse(doc.body);

The localContent is a string variable with this value:

<p>asdf</p>
<img src="http://localhost:3000/api/rating/system/41574/richtext/image/83008" style="display:block;" />

The thing is the result in proseDoc variable is only a paragraph node added to the doc Node:

{
	"type": "doc",
	"content": [{
		"type": "paragraph",
		"attrs": {
			"style": null,
			"class": null,
			"id": null
		},
		"content": [{
			"type": "text",
			"text": "asdf"
		}]
	}]
}

Did I miss something in the NodeSpec or Schema?

The capitalization of parseDom should be parseDOM.

1 Like

Oh, sorry, didn´t notice about that, thank you very much.