WYSIWYG Docx Import

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

<script src="https://cdn.jsdelivr.net/npm/mammoth@1.13.0/mammoth.browser.min.js"
        integrity="sha256-kpFKNwjP3x5iy1U9GFan/tqyHag9jugoRd4viXs2jKs="
        crossorigin="anonymous"
        defer></script>

<script type="module">
    // Convert the given "file" instance to HTML, providing it back via the given callback
    function convertAndInsertDocx(file, callback) {
        // Use a FileReader to handle conversion via an ArrayBuffer
        const reader = new FileReader();
        reader.onload = async function(loadEvent) {
            // Get and convert the ArrayBuffer version of the file
            const arrayBuffer = loadEvent.target.result;
            const {value: html, messages} = await window.mammoth.convertToHtml({arrayBuffer});
            // If warnings exist from conversion, log them to the browser console then
            // show a warning alert via BookStack's event system.
            if (messages.length > 0) {
                console.error(messages);
                window.$events.emit('warning', `${messages.length} warnings logged to browser console during conversion`);
            }
            // Once we have our converted HTML, provide it to the callback function
            callback(html);
        }
        reader.readAsArrayBuffer(file);
    }

    // For each of the files in the drop event, pass them, alongside the editor instance
    // to our "convertAndInsertDocx" function above before providing the results to the given callback.
    function runCallbackForEachDocFileInEvent(event, callback) {
        const files = event?.dataTransfer?.files || [];
        let handledDocxFiles = false;
        for (const file of files) {
            if (file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' && window.mammoth) {
                convertAndInsertDocx(file, html => callback(html));
                handledDocxFiles = true;
            }
        }
        return handledDocxFiles;
    }

    // Listen to BookStack emitted WYSIWYG (TinyMCE) editor setup event
    window.addEventListener('editor-tinymce::setup', event => {
        // Get a reference to the editor and listen to file "drop" events
        const editor = event.detail.editor;
        editor.on('drop', event => {
            // For any docx files, insert the resulting HTML content into the editor
            runCallbackForEachDocFileInEvent(event, html => editor.insertContent(html));
        });
    });

    // Listen to BookStack emitted new-WYSIWYG editor setup event
    window.addEventListener('editor-wysiwyg::post-init', event => {
        const {usage, api} = event.detail;
        // Check that it's the page editor which is being loaded
        if (usage !== 'page-editor') {
            return;
        }

        // Add a custom drop listener for the editor area
        const editorArea = document.querySelector('.editor-content-area');
        if (!editorArea) {
            return;
        }

        editorArea.addEventListener('drop', event => {
            const htmlWasInserted = runCallbackForEachDocFileInEvent(event, html => api.content.insertHtml(html));
            if (htmlWasInserted) {
                event.preventDefault();
                event.stopPropagation();
            }
        });
    });
</script>