I am trying to get the position of a node within the toDOM function, in order to create my own pagination feature. I have the view in a variable that is accessible, can I get the node in question from the EditorView and then somehow get the DOM position for that node?
All the EditorView position functions use a position variable, but from my reading here it seems I would have to not only cycle through all the nodes to get the document position of each node, but also deal with the transform map to correct that if text has been entered or deleted.
What is the best strategy for being able to create my view, add the content and then be able to know, for each node, where it falls positionwise in the DOM?
Underlying all this is that pagination is an area that is tough for a document abstraction such as PM, but it is a critical area that I figure many developers really want, allowing things such as forced page breaks etc. Getting the position and height of a node would allow me to insert page breaks, even allowing for widows and orphans that need to be moved as a block to the succeeding page.
You can’t, for the rather good reason that a node’s DOM will be kept even as the node’s position changes in the editor.
Something like pagination will have to be handled by a plugin that has a view of the entire document, and adds decorations in the appropriate positions.
I have as yet not explored decorations (so much to learn!!!), clearly if that allows for inserting of html within the document at a certain position, then my understanding so far is that a plugin could perhaps cycle through all the nodes of the document, create the decorations, and those decorations would fire at the character position specified to alter the DOM. I assume they also are affected by the position mapping as text is added or removed.
Thanks for giving me a starting point for more exploration, getting to know all the hooks that are there in PM to alter the on screen display is quite the involved process, with each structure and hook having its own complex layout with a myriad of variables and functions.
I will study the example that uses a decoration, but any sage advice you might have on implementing this would be great, even if from a high level standpoint.
I assume they also are affected by the position mapping as text is added or removed.
I think that depends on how you create the decorations (re-creating fresh decorations on each state update vs reusing existing decorations). Reusing existing decorations is probably the better choice for performance but afaik you’d need to update the positions manually via tr.mapping.map()