@fiduswriter/document 0.1.0-alpha.4 → 0.1.0-alpha.5

package/src/exporter/docx/{comments.js → comments.ts}

@@ -1,5 +1,10 @@
 import {escapeText} from "fwtoolkit"
+
+import type {CommentData, FidusNode} from "../../types.js"
 import {descendantNodes} from "../tools/doc_content.js"
+import type {XMLElement} from "../tools/xml.js"
+import type {XmlZip} from "../tools/xml_zip.js"
+import type {DOCXExporterRels} from "./rels.js"
 
 const DEFAULT_COMMENTS_XML = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
     <w:comments xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="http://schemas.openxmlformats.org/wordprocessingml/2006/main" xmlns:w10="urn:schemas-microsoft-com:office:word" xmlns:wp="http://schemas.openxmlformats.org/drawingml/2006/wordprocessingDrawing" xmlns:wps="http://schemas.microsoft.com/office/word/2010/wordprocessingShape" xmlns:wpg="http://schemas.microsoft.com/office/word/2010/wordprocessingGroup" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:wp14="http://schemas.microsoft.com/office/word/2010/wordprocessingDrawing" xmlns:w14="http://schemas.microsoft.com/office/word/2010/wordml" xmlns:w15="http://schemas.microsoft.com/office/word/2012/wordml" mc:Ignorable="w14 wp14 w15">
@@ -10,7 +15,26 @@ const DEFAULT_COMMENTS_EXTENDED_XML = `<?xml version="1.0" encoding="UTF-8" stan
     </w15:commentsEx>`
 
 export class DOCXExporterComments {
-    constructor(docContent, commentsDB, xml, rels, richtext) {
+    docContent: FidusNode
+    commentsDB: Record<string, CommentData>
+    xml: XmlZip
+    rels: DOCXExporterRels
+    richtext: any
+
+    usedComments: string[]
+    commentsXML: XMLElement | null
+    commentsExtendedXML: XMLElement | null
+    commentsFilePath: string
+    commentsExtendedFilePath: string
+    commentIdCounter: number
+
+    constructor(
+        docContent: FidusNode,
+        commentsDB: Record<string, CommentData>,
+        xml: XmlZip,
+        rels: DOCXExporterRels,
+        richtext: any
+    ) {
         this.docContent = docContent
         this.commentsDB = commentsDB
         this.xml = xml
@@ -18,14 +42,14 @@ export class DOCXExporterComments {
         this.richtext = richtext
 
         this.usedComments = []
-        this.commentsXML = false
-        this.commentsExtendedXML = false
+        this.commentsXML = null
+        this.commentsExtendedXML = null
         this.commentsFilePath = "word/comments.xml"
         this.commentsExtendedFilePath = "word/commentsExtended.xml"
         this.commentIdCounter = -1
     }
 
-    init() {
+    init(): Promise<void> | undefined {
         let useExtended = false
         descendantNodes(this.docContent).forEach(node => {
             if (node.marks) {
@@ -33,14 +57,17 @@ export class DOCXExporterComments {
                     mark => mark.type === "comment"
                 )
                 comments.forEach(comment => {
+                    const commentId = String(comment.attrs?.id)
                     if (
-                        !this.usedComments.includes(comment.attrs.id) &&
-                        this.commentsDB[comment.attrs.id]
+                        commentId &&
+                        !this.usedComments.includes(commentId) &&
+                        this.commentsDB[commentId]
                     ) {
-                        this.usedComments.push(comment.attrs.id)
+                        this.usedComments.push(commentId)
+                        const commentDBEntry = this.commentsDB[commentId]
                         if (
-                            this.commentsDB[comment.attrs.id].resolved ||
-                            this.commentsDB[comment.attrs.id].answers?.length
+                            commentDBEntry.resolved ||
+                            commentDBEntry.answers?.length
                         ) {
                             useExtended = true
                         }
@@ -52,10 +79,13 @@ export class DOCXExporterComments {
             return Promise.resolve()
         }
         this.rels.addCommentsRel()
-        const addCommentXMLs = [
+        const addCommentXMLs: Array<Promise<void>> = [
             this.xml
                 .getXml(this.commentsFilePath, DEFAULT_COMMENTS_XML)
-                .then(commentsXML => (this.commentsXML = commentsXML))
+                .then(commentsXML => {
+                    this.commentsXML = commentsXML
+                    return undefined
+                })
         ]
         if (useExtended) {
             this.rels.addCommentsExtendedRel()
@@ -65,15 +95,18 @@ export class DOCXExporterComments {
                         this.commentsExtendedFilePath,
                         DEFAULT_COMMENTS_EXTENDED_XML
                     )
-                    .then(
-                        commentsExtendedXML =>
-                            (this.commentsExtendedXML = commentsExtendedXML)
-                    )
+                    .then(commentsExtendedXML => {
+                        this.commentsExtendedXML = commentsExtendedXML
+                        return undefined
+                    })
             )
         }
         return Promise.all(addCommentXMLs).then(() => {
+            if (!this.commentsXML) {
+                return Promise.resolve()
+            }
             this.commentsXML.queryAll("w:comment").forEach(el => {
-                const id = Number.parseInt(el.getAttribute("w:id"))
+                const id = Number.parseInt(String(el.getAttribute("w:id")))
                 if (id > this.commentIdCounter) {
                     this.commentIdCounter = id
                 }
@@ -82,11 +115,17 @@ export class DOCXExporterComments {
         })
     }
 
-    addComment(id) {
+    addComment(id: string): void {
         const commentId = ++this.commentIdCounter
         this.richtext.comments[id] = commentId
         const commentDBEntry = this.commentsDB[id]
+        if (!this.commentsXML || !commentDBEntry) {
+            return
+        }
         const comments = this.commentsXML.query("w:comments")
+        if (!comments) {
+            return
+        }
         let string = `<w:comment w:id="${commentId}" w:author="${escapeText(commentDBEntry.username)}" w:date="${new Date(commentDBEntry.date).toISOString().split(".")[0]}Z" w:initials="${escapeText(
             commentDBEntry.username
                 .split(" ")
@@ -97,7 +136,7 @@ export class DOCXExporterComments {
         let parentParagraphId = ""
         string += commentDBEntry.comment
             .map((node, index) => {
-                const options = {section: "CommentText"}
+                const options: Record<string, unknown> = {section: "CommentText"}
                 if (
                     (commentDBEntry.resolved ||
                         commentDBEntry.answers?.length) &&
@@ -110,9 +149,11 @@ export class DOCXExporterComments {
                         .padStart(8, "0")
                     options.paragraphId = parentParagraphId
                     const extendedString = `<w15:commentEx w15:paraId="${parentParagraphId}" w15:done="${commentDBEntry.resolved ? "1" : "0"}"/>`
-                    const extendedComments =
-                        this.commentsExtendedXML.query("w15:commentsEx")
-                    extendedComments.appendXML(extendedString)
+                    if (this.commentsExtendedXML) {
+                        const extendedComments =
+                            this.commentsExtendedXML.query("w15:commentsEx")
+                        extendedComments?.appendXML(extendedString)
+                    }
                 }
                 if (!index) {
                     options.commentReference = true
@@ -132,7 +173,7 @@ export class DOCXExporterComments {
             )}">`
             string += answer.answer
                 .map((node, index) => {
-                    const options = {section: "CommentText"}
+                    const options: Record<string, unknown> = {section: "CommentText"}
                     if (index === answer.answer.length - 1) {
                         // We need to add an id to the last paragraph of the comment and add an entry
                         // into commentsExtended.xml pointing to the last paragraph of the parent comment.
@@ -141,9 +182,11 @@ export class DOCXExporterComments {
                             .padStart(8, "0")
                         options.paragraphId = paragraphId
                         const extendedString = `<w15:commentEx w15:paraId="${paragraphId}" w15:done="${commentDBEntry.resolved ? "1" : "0"}" w15:paraIdParent="${parentParagraphId}"/>`
-                        const extendedComments =
-                            this.commentsExtendedXML.query("w15:commentsEx")
-                        extendedComments.appendXML(extendedString)
+                        if (this.commentsExtendedXML) {
+                            const extendedComments =
+                                this.commentsExtendedXML.query("w15:commentsEx")
+                            extendedComments?.appendXML(extendedString)
+                        }
                     }
                     if (!index) {
                         options.commentReference = true
@@ -156,7 +199,7 @@ export class DOCXExporterComments {
         comments.appendXML(string)
     }
 
-    exportComments() {
+    exportComments(): Promise<void> {
         this.usedComments.forEach(comment => {
             this.addComment(comment)
         })

package/src/exporter/docx/{footnotes.js → footnotes.ts}

@@ -1,4 +1,7 @@
 import {descendantNodes} from "../tools/doc_content.js"
+import type {BibDB, CSL, DocSettings, ExportDoc, FidusNode, ImageDB} from "../../types.js"
+import type {XmlZip} from "../tools/xml_zip.js"
+import type {XMLElement} from "../tools/xml.js"
 import {DOCXExporterCitations} from "./citations.js"
 import {DOCXExporterImages} from "./images.js"
 import {DOCXExporterLists} from "./lists.js"
@@ -52,19 +55,48 @@ const DEFAULT_STYLE_FOOTNOTE_ANCHOR = `
     `
 
 export class DOCXExporterFootnotes {
+    doc: ExportDoc
+    docContent: FidusNode
+    settings: DocSettings
+    imageDB: ImageDB
+    bibDB: BibDB
+    xml: XmlZip
+    citations: DOCXExporterCitations
+    csl: CSL
+    lists: DOCXExporterLists
+    math: any
+    tables: any
+    rels: DOCXExporterRels
+
+    pmBib: FidusNode | false
+    fnPmJSON: FidusNode | false
+    images: DOCXExporterImages | null
+    augmentedCitations: DOCXExporterCitations | null
+    footnotes: FidusNode[][]
+    fnXML: string | null
+    fnRels: DOCXExporterRels | null
+    ctXML: XMLElement | null
+    styleXML: XMLElement | null
+    settingsXML: XMLElement | null
+    filePath: string
+    ctFilePath: string
+    settingsFilePath: string
+    styleFilePath: string
+    richtext: any
+
     constructor(
-        doc,
-        docContent,
-        settings,
-        imageDB,
-        bibDB,
-        xml,
-        citations,
-        csl,
-        lists,
-        math,
-        tables,
-        rels
+        doc: ExportDoc,
+        docContent: FidusNode,
+        settings: DocSettings,
+        imageDB: ImageDB,
+        bibDB: BibDB,
+        xml: XmlZip,
+        citations: DOCXExporterCitations,
+        csl: CSL,
+        lists: DOCXExporterLists,
+        math: any,
+        tables: any,
+        rels: DOCXExporterRels
     ) {
         this.doc = doc
         this.docContent = docContent
@@ -81,23 +113,26 @@ export class DOCXExporterFootnotes {
 
         this.pmBib = false
         this.fnPmJSON = false
-        this.images = false
-        this.augmentedCitations = false
+        this.images = null
+        this.augmentedCitations = null
         this.footnotes = [] // footnotes
-        this.fnXML = false
-        this.ctXML = false
-        this.styleXML = false
+        this.fnXML = null
+        this.fnRels = null
+        this.ctXML = null
+        this.styleXML = null
+        this.settingsXML = null
         this.filePath = "word/footnotes.xml"
         this.ctFilePath = "[Content_Types].xml"
         this.settingsFilePath = "word/settings.xml"
         this.styleFilePath = "word/styles.xml"
     }
 
-    init() {
+    init(): Promise<void> | Promise<undefined> {
         this.findFootnotes()
         if (
             this.footnotes.length ||
-            (this.citations.citFm.citationType === "note" &&
+            (this.citations.citFm &&
+                this.citations.citFm.citationType === "note" &&
                 this.citations.citInfos.length)
         ) {
             this.convertFootnotes()
@@ -105,7 +140,7 @@ export class DOCXExporterFootnotes {
             // Include the citinfos from the main body document so that they will be
             // used for calculating the bibliography as well
             this.augmentedCitations = new DOCXExporterCitations(
-                this.fnPmJSON,
+                this.fnPmJSON as FidusNode,
                 this.settings,
                 this.bibDB,
                 this.csl,
@@ -114,13 +149,13 @@ export class DOCXExporterFootnotes {
             )
 
             this.images = new DOCXExporterImages(
-                this.fnPmJSON,
+                this.fnPmJSON as FidusNode,
                 this.imageDB,
                 this.xml,
                 this.fnRels
             )
             this.lists = new DOCXExporterLists(
-                this.fnPmJSON,
+                this.fnPmJSON as FidusNode,
                 this.xml,
                 this.fnRels
             )
@@ -131,10 +166,10 @@ export class DOCXExporterFootnotes {
                     // Replace the main bibliography with the new one that
                     // includes both citations in main document
                     // and in the footnotes.
-                    this.pmBib = this.augmentedCitations.pmBib
-                    return this.fnRels.init()
+                    this.pmBib = this.augmentedCitations!.pmBib
+                    return this.fnRels!.init()
                 })
-                .then(() => this.images.init())
+                .then(() => this.images!.init())
                 .then(() => this.lists.init())
                 .then(() => this.initCt())
                 .then(() => this.setSettings())
@@ -146,7 +181,7 @@ export class DOCXExporterFootnotes {
         }
     }
 
-    initCt() {
+    initCt(): Promise<void> {
         return this.xml.getXml(this.ctFilePath).then(ctXML => {
             this.ctXML = ctXML
             this.addRelsToCt()
@@ -154,19 +189,22 @@ export class DOCXExporterFootnotes {
         })
     }
 
-    addRelsToCt() {
+    addRelsToCt(): void {
+        if (!this.ctXML) {
+            return
+        }
         const override = this.ctXML.query("Override", {
             PartName: `/${this.filePath}`
         })
         if (!override) {
             const types = this.ctXML.query("Types")
-            types.appendXML(
+            types?.appendXML(
                 `<Override PartName="/${this.filePath}" ContentType="application/vnd.openxmlformats-officedocument.wordprocessingml.footnotes+xml"/>`
             )
         }
     }
 
-    addStyles() {
+    addStyles(): Promise<void> {
         return this.xml.getXml(this.styleFilePath).then(styleXML => {
             this.styleXML = styleXML
             this.addStyle("Footnote", DEFAULT_STYLE_FOOTNOTE)
@@ -175,23 +213,23 @@ export class DOCXExporterFootnotes {
         })
     }
 
-    addStyle(styleName, xml) {
-        if (!this.styleXML.query("w:style", {"w:styleId": styleName})) {
-            const stylesEl = this.styleXML.query("w:styles")
-            stylesEl.appendXML(xml)
+    addStyle(styleName: string, xml: string): void {
+        if (!this.styleXML!.query("w:style", {"w:styleId": styleName})) {
+            const stylesEl = this.styleXML!.query("w:styles")
+            stylesEl?.appendXML(xml)
         }
     }
 
-    findFootnotes() {
+    findFootnotes(): void {
         descendantNodes(this.docContent).forEach(node => {
             if (node.type === "footnote") {
-                this.footnotes.push(node.attrs.footnote)
+                this.footnotes.push(node.attrs?.footnote as FidusNode[])
             }
         })
     }
 
-    convertFootnotes() {
-        const fnContent = []
+    convertFootnotes(): void {
+        const fnContent: FidusNode[] = []
         this.footnotes.forEach(footnote => {
             fnContent.push({
                 type: "footnotecontainer",
@@ -204,7 +242,7 @@ export class DOCXExporterFootnotes {
         }
     }
 
-    createXml() {
+    createXml(): Promise<void> {
         this.richtext = new DOCXExporterRichtext(
             this.doc,
             this.lists,
@@ -221,17 +259,18 @@ export class DOCXExporterFootnotes {
         this.rels.addFootnoteRel()
         return this.xml.getXml(this.filePath, DEFAULT_XML).then(xml => {
             const footnotesEl = xml.query("w:footnotes")
-            footnotesEl.appendXML(this.fnXML)
-            this.xml = xml
+            footnotesEl?.appendXML(this.fnXML as string)
+            // Note: original code reassigned this.xml to the XMLElement here;
+            // that is not needed and conflicts with the XmlZip type.
         })
     }
 
-    setSettings() {
+    setSettings(): Promise<void> {
         return this.xml.getXml(this.settingsFilePath).then(settingsXML => {
             const footnotePr = settingsXML.query("w:footnotePr")
             if (!footnotePr) {
                 const settingsEl = settingsXML.query("w:settings")
-                settingsEl.appendXML(DEFAULT_SETTINGS_XML)
+                settingsEl?.appendXML(DEFAULT_SETTINGS_XML)
             }
             this.settingsXML = settingsXML
             return Promise.resolve()

package/src/exporter/docx/images.ts

@@ -0,0 +1,128 @@
+import {get} from "fwtoolkit"
+
+import type {FidusNode, ImageDB} from "../../types.js"
+import {descendantNodes} from "../tools/doc_content.js"
+import {svg2png} from "../tools/svg.js"
+import type {XMLElement} from "../tools/xml.js"
+import type {XmlZip} from "../tools/xml_zip.js"
+import type {DOCXExporterRels} from "./rels.js"
+
+interface ImageInfo {
+    id: number
+    width: number
+    height: number
+    title?: string
+}
+
+export class DOCXExporterImages {
+    docContent: FidusNode
+    imageDB: ImageDB
+    xml: XmlZip
+    rels: DOCXExporterRels
+
+    images: Record<string, ImageInfo>
+    ctXML: XMLElement | null
+
+    constructor(docContent: FidusNode, imageDB: ImageDB, xml: XmlZip, rels: DOCXExporterRels) {
+        this.docContent = docContent
+        this.imageDB = imageDB
+        this.xml = xml
+        this.rels = rels
+
+        this.images = {}
+        this.ctXML = null
+    }
+
+    init(): Promise<void> {
+        return this.xml.getXml("[Content_Types].xml").then(ctXML => {
+            this.ctXML = ctXML
+            return this.exportImages()
+        })
+    }
+
+    // add an image to the list of files
+    addImage(imgFileName: string, image: Blob): number {
+        const rId = this.rels.addImageRel(imgFileName)
+        this.addContentType(imgFileName.split(".").pop() || "")
+        this.xml.addExtraFile(`word/media/${imgFileName}`, image)
+        return rId
+    }
+
+    // add a global contenttype declaration for an image type (if needed)
+    addContentType(fileEnding: string): void {
+        if (!this.ctXML) {
+            return
+        }
+        const types = this.ctXML.query("Types")
+        if (!types) {
+            return
+        }
+        const contentDec = types.query("Default", {Extension: fileEnding})
+        if (!contentDec) {
+            const string = `<Default ContentType="image/${fileEnding}" Extension="${fileEnding}"/>`
+            types.appendXML(string)
+        }
+    }
+
+    // Find all images used in file and add these to the export zip.
+    // TODO: This will likely fail on image types docx doesn't support such as SVG.
+    // Try out and fix.
+    exportImages(): Promise<void> {
+        const usedImgs: (string | number)[] = []
+        descendantNodes(this.docContent).forEach(node => {
+            if (node.type === "image" && node.attrs?.image !== false) {
+                const imageId = node.attrs?.image as string | number | undefined
+                if (imageId !== undefined && !usedImgs.includes(imageId)) {
+                    usedImgs.push(imageId)
+                }
+            }
+        })
+        return new Promise(resolveExportImages => {
+            const p: Array<Promise<void>> = []
+            usedImgs.forEach(image => {
+                const imgDBEntry = this.imageDB.db[String(image)]
+                if (!imgDBEntry || !imgDBEntry.image) {
+                    return
+                }
+                p.push(
+                    get(imgDBEntry.image as string)
+                        .then(response => response.blob())
+                        .then(async blob => {
+                            if (blob.type === "image/svg+xml") {
+                                // DOCX doesn't support SVG. Convert to PNG.
+                                const {blob: pngBlob, width, height} = await svg2png(blob)
+                                const wImgId = this.addImage(
+                                    (imgDBEntry.image as string)
+                                        .split("/")
+                                        .pop()!
+                                        .replace(/.svg$/g, ".png"),
+                                    pngBlob
+                                )
+                                this.images[String(image)] = {
+                                    id: wImgId,
+                                    width,
+                                    height,
+                                    title: imgDBEntry.title as string | undefined
+                                }
+                            } else {
+                                const wImgId = this.addImage(
+                                    (imgDBEntry.image as string).split("/").pop()!,
+                                    blob
+                                )
+                                this.images[String(image)] = {
+                                    id: wImgId,
+                                    width: imgDBEntry.width as number,
+                                    height: imgDBEntry.height as number,
+                                    title: imgDBEntry.title as string | undefined
+                                }
+                            }
+                        })
+                )
+            })
+
+            Promise.all(p).then(() => {
+                resolveExportImages()
+            })
+        })
+    }
+}