Is your feature request related to a problem? Please describe.
I'm trying to use Vuelidate to validate that a user has actually put content in the editor, and not left it blank. As tiptap returns an empty editor as <p></p>, I can't simply use the normal required check here — I need to check against the rendered version of the HTML.
Describe the solution you'd like
I would like there to be a getText() method, that simply returns the plain text of the editor's contents, exactly as if the innerText method had been called on the editor div (but which returns an empty string rather than failing if the element has not been created yet :)
Describe alternatives you've considered
const baseDocument = new Document()
const document = baseDocument.implementation.createHTMLDocument('test')
const fragment = new DocumentFragment()
const element = document.createElement('div')
element.innerHTML = html
fragment.appendChild(element)
// strip whitespace so a <br> or space won't get treated as non-empty
const text = fragment.firstElementChild.innerText.replace(/\s/g, '')
// perform validation check against `text` here
This works, but it seems like a rather expensive way of doing things, as this runs every time the user changes the contents of the editor. I can't simply use document.querySelector('.ProseMirror').innerText as the validators get called before the DOM is ready, and this causes the page to not render at all.
Additional context
This might be a ProseMirror issue rather than a tiptap issue — I don't know if ProseMirror supports this out of the box…
Hey, let's try this: editor.state.doc.textContent
Ah, that's done the job — thanks!
I looked at the docs for ProseMirror but somehow managed to miss that…
Most helpful comment
Hey, let's try this:
editor.state.doc.textContent