From editor element to current document


#1

Hey, I want to use ProMirror as a textarea replacement within large form with an arbitrary amount of elements that can change over time.I wonder what the best approach to do that is.

Before: While using textarea, it is simple enough to both set up the editors and to retrieve their value when saving. A new textarea can simply be added for example by means of something like

formDom.insertAdjacentHTML('beforeend', '<textarea></textarea>')

To retrieve the value of all of the textareas, I can do something like:

const values = Array.from(
    formDom.querySelectorAll('textarea')
).map(textarea => textarea.value)

After: When switching to ProseMirror, this gets slightly more complicated as one cannot easily retrieve the text value from the element that holds the editor (right?). So instead I am thinking of doing something like this:

First create a global register of views and the element they are hosted by:

window.views = []

When adding a new editor then register initiate and register it like so:

formDom.insertAdjacentHTML('beforeend', '<div class="editor"></div>')
let editorNode = formDom.lastElementChild
let editorView = new EditorView(editorNode, {...})
window.views.push([editorNode, editorView])

And to retrieve all the values then retrieve the editor from that register like so:

const values = Array.from(
    formDom.querySelectorAll('div.editor')
).map(
    editorNode => window.views.find(
        viewRegistration => editorNode===viewRegistration[0]
    )[1].state.doc.toJSON()
)

Does that sound reasonable? Does anyone else have experience trying to retrieve the current doc based on the dom element that hosts the editor?