BookStack Code Mirror - hacks/blob - content/wysiwyg-docx-import/head.html

   1 <script src="https://cdn.jsdelivr.net/npm/[email protected]/mammoth.browser.min.js" defer></script>
   2
   3 <script type="module">
   4     // Convert the given "file" instance to HTML and insert the results
   5     // into the given TinyMCE "editor" instance.
   6     function convertAndInsertDocx(editor, file) {
   7         // Use a FileReader to handle conversion via an ArrayBuffer
   8         const reader = new FileReader();
   9         reader.onload = async function(loadEvent) {
  10             // Get and convert the ArrayBuffer version of the file
  11             const arrayBuffer = loadEvent.target.result;
  12             const {value: html, messages} = await window.mammoth.convertToHtml({arrayBuffer});
  13             // If warnings exists from conversion, log them to the browser console then
  14             // show a warning alert via BookStack's event system.
  15             if (messages.length > 0) {
  16                 console.error(messages);
  17                 window.$events.emit('warning', `${messages.length} warnings logged to browser console during conversion`);
  18             }
  19             // Insert the resulting HTML content insert the editor
  20             editor.insertContent(html);
  21         }
  22         reader.readAsArrayBuffer(file);
  23     }
  24
  25     // Listen to BookStack emmitted WYSWIYG editor setup event
  26     window.addEventListener('editor-tinymce::setup', event => {
  27         // Get a reference to the editor and listen to file "drop" events
  28         const editor = event.detail.editor;
  29         editor.on('drop', event => {
  30             // For each of the files in the drop event, pass them, alonside the editor instance
  31             // to our "convertAndInsertDocx" function above if they're docx files.
  32             const files = event?.dataTransfer?.files || [];
  33             for (const file of files) {
  34                 if (file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' && window.mammoth) {
  35                     convertAndInsertDocx(editor, file);
  36                 }
  37             }
  38         });
  39     });
  40 </script>