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?