Spurious empty P elements around image (added code)

1

Hi,

I’m trying to embed images into a prosemirror document. So far, this is working (I’m following mostly the Dino demo), but when converting to HTML and back, it seems that prosemirror inserts empty P elements before and after the image.

Any idea how/why this can happen?

Thanks in advance!

Here are some important parts of my code:

class InlineImage extends prosemirror_model.Inline {
get attrs() {
    return {
        "media_folder": new prosemirror_model_schema.Attribute({default: ""}),
        "object": new prosemirror_model_schema.Attribute({default: ""}),
    };
}
}

InlineImage.register("parseDOM", "section", {
    rank: 25,
    parse: function(dom, state)
    {
        let fixup_type = dom.getAttribute("fixup_type");
        if(fixup_type == "media")
        {
            let media_folder = dom.getAttribute("media_folder");
            let object = dom.getAttribute("object");
            state.insert(this, {media_folder: media_folder, object: object});
        }
        else
        {
            return false;
        }
    }
});

InlineImage.prototype.serializeDOM = function(node, s)
{
    var dom = s.elt("section",
    {
        class: "inline_image",
        "fixup_type": "media",
        "media_folder": node.attrs.media_folder,
        "object": node.attrs.object,
    });

    dom.style.width = 100+"px";
    dom.style.height = 100+"px";
    dom.style.backgroundColor = "#f0f0f0";

    return dom;
}

var schema = new prosemirror_model.Schema(prosemirror_model.defaultSchema.spec.update({inline_image: InlineImage}))

var container = document.getElementById("container");
var pm = new prosemirror.ProseMirror({
    schema: schema,
    place: container,
    doc: "",
    docFormat: "html"
});

Conversion to HTML is done with

html_value = pm.getContent("html");

And conversion back is done with

   var x = document.createElement("div");
    x.innerHTML = html_value;
    var opts = {};
    opts.preserveWhitespace = true;
    opts.editableContent = true;
    var node = prosemirror_format_from_dom.fromDOM(pm.schema, x, opts);
    pm.setDoc(node);

The problem appears to be in this last part (the fromDOM function call, or the getContent call).

2

I think this isn’t done by ProseMirror, but by your browser’s HTML parser. <section> is specified to be a block element, and can’t appear inside of a <p> tag. Thus, if you do this:

document.body.innerHTML = "<p><section>blah</section></p>"
document.body.innerHTML
→ "<p></p><section>blah</section><p></p>"

You see the problem. Try to use an HTML element for your node that fits its role in the document better.

1 Like
3

Aha, that appears to be it! I didn’t know that HTML didn’t allow this.

Thanks!