Link nodeview dom being overwritten?

1

Hi! I have a custom NodeView for links and when I pass it the dom elements I want it to render it gets overwritten and manipulated afterwards. For example my nodeview looks likes this

link: (
    node: ProsemirrorNode,
    view: EditorView,
    getPos: () => number,
    decorations: Decoration[]
  ): NodeView => {
 let container = document.createElement("div");
 container.style.backgroundColor = "#ff0000";
 container.innerHTML = "testing";

 console.log(container);
 console.log(container.innerHTML);
 return { dom: container };
}

It creates the div and adds the style but the content gets overwritten by the link.

The result of console log(container) is the div + style with the link inside of the div. The result of console.log(container.innerHTML) is testing, but then later when it gets rendered in the editor its the link.

2

What does your schema definition for the link node look like? In principle, when your node view doesn’t have a contentDOM property, the editor shouldn’t try to render things into it, but maybe there’s a bug somewhere.

1 Like
3

Hey thanks for the reply! This is the schema for the link node:

link: {
      attrs: {
        href: {},
        title: {default: null}
      },
      parseDOM: [{tag: "a[href]", getAttrs(dom) {
        return {href: dom.getAttribute("href"), title: dom.getAttribute("title")}
      }}],
      toDOM(node) { return ["a", node.attrs] }
    }

Yeah thats what I was seeing from the docs and couldn’t understand what was happening. Thats why I asked the question (: With my other custom nodeviews like images it works as expected, but with link it wasn’t letting me take control of the dom.

4

When I drop a debugger and step through it you can see that it does work, but once it gets rendered to the dom it nukes everything inside of it and populates the div with the link. So the only thing that stays is the style and the fact that it is a div.

Screen Shot 2017-06-17 at 9.58.53 AM.png1038Ă—538 61.9 KB

5

Could you set up a self-contained demo to help me reproduce this problem? (Preferably as a branch that modifies demo/demo.js in the prosemirror/prosemirror repository.)

1 Like
6

Of course! Here you go my good man. https://github.com/Hossman333/prosemirror/tree/hoss/link-nodeview-bug

7

Oh, sorry to have taken forever to get back to you on this – node views for marks work differently from those for nodes. You can override the way the DOM node that wraps marked text is rendered, but you can not completely replace it – it always has its content rendered into it, and it may only be a single node, not some deeper structure. As such, what you’re seeing is intended behavior.