DOM-like editing - anything out there already?

1

My ProseMirror project is (among other things) a kind of hybrid general text editor (i.e. normal ProseMirror) and a block based outliner.

To facilitate this I’m writing a layer of DOM-like editing operations on top of the existing Transform API, so I can do things like remove a node, insert a child node at a given index, append a child node, and so on. A ResolvedPos pointing to the start of a node works well as a “node” instance. For example, here’s remove:

function remove(tr: Transaction, $n: ResolvedPos) {
  if ($n.nodeAfter) {
    tr.deleteRange($n.pos, $n.pos + $n.nodeAfter.nodeSize)
  }
}

My questions:

Does this make sense as a way to get block based editing? It seems a bit clunky that I’m having to implement in terms of integer positions, which ProseMirror (I think?) will translate back into the dom-like edit that I wanted in the first place. I’m pretty sure there’s good reason it has to work this way, but thought I’d double check.

It seems like this must be a common use-case. Is there anything out there already along these lines?

Thanks!

2

Yes, this looks like the right way to do something like that.