Node Decoration

1

Is there a simpler way to decorate a node without doing the calculations of from and to?

static node(from: number, to: number, attrs: DecorationAttrs, options: ?Object) → Decoration Creates a node decoration. from and to should point precisely before and after a node in the document. That node, and only that node, will receive the given attributes.

I found this, but thought if there’s a way to decorate a node by simply giving that node, something like:

Decoration.node(node, attrs, options)

I’m referring to the code in drop-cursor

   if (!$pos.parent.isTextblock) {
    let before, after
    if (before = $pos.nodeBefore)
      deco = Decoration.node(pos - before.nodeSize, pos, {nodeName: "div", style: style(options, "right")})
    else if (after = $pos.nodeAfter)
      deco = Decoration.node(pos, pos + after.nodeSize, {nodeName: "div", style: style(options, "left")})
  }

Another part that I’m trying to understand is if there’s a way to reference a DOM node back to the state?

In the drag and drop plugin there’s a lot of calculations being done with:

view.posAtCoords({ left: event.clientX, top: event.clientY })

I was looking to make the plugin simpler because I’m only interested in dragging and dropping blocks. So, I was thinking if there would be a way to refer a DOM node back to its State node representation.

view.root.elementFromPoint(event.clientX, event.clientY)
2

A node object can not be used to address a node in a document – nodes are persistent data structures that can occur multiple times in a single document, and which will be replaced by an updated version when anything inside of them changes. That’s why all APIs that need to refer to specific nodes in a document use positions.

1 Like
3

In the documentation:

Each node is context-free, and does not know anything about its parent nodes. In fact, a node may be shared between multiple documents or even appear multiple times in a single document.

Would you mind giving an example where this might happen?

From what I understand Draftjs keeps a one to one relationship between the DOM and the EditorState and keeps track of it using a key prop, in my opinion, this makes the API a bit simpler. Because of my ignorance, I’m probably missing the point of the advantage of the decoupling of nodes in the EditorState and the DOM.

getBlockForKey(key: string): ContentBlock

https://facebook.github.io/draft-js/docs/api-reference-content-state.html#getblockforkey

4

If you create multiple replaceWith steps with the same inserted node, that node will appear multiple times in the document.

In general, don’t think of ProseMirror document nodes as having an identity. They are more like numbers. You can have a data structure in which the number 5 occurs multiple times, and as such you can’t say anything about a specific number 5 in that data structure by just referring to it as 5. It’s a value, not an identity.

1 Like
5

Thank you for the explanation.