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:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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.
documentEditorObserver.disconnect()

This has been tested with PSPDFKit for Web 2020.6.4.