Observe document editor visibility

Q: I need to get notified when document editor gets displayed or hidden.

A: You can use the DOM API to observe and manipulate document editor modal dialog. We recommend using a MutationObserver:

let documentEditorShown = false

const documentEditorObserver = new MutationObserver(() => { 
    const documentEditorNode = instance.contentDocument.querySelector('.PSPDFKit-DocumentEditor')
    if (documentEditorNode) {
        if (documentEditorShown) return
        documentEditorShown = true
        console.log('Document editor shown')
    } else if (documentEditorShown) {
        documentEditorShown = false
        console.log('Document editor hidden')

// Mount the document editor observer to the root of the PSPDFKit content.
documentEditorObserver.observe(instance.contentDocument.body, {
    childList: true, 
    subtree: true, 
    attributes: false

// When you are done with observing the DOM, stop watching by disconnecting the mutation observer.

This has been tested with PSPDFKit for Web 2020.6.4.