@fiduswriter/editor 0.1.20 → 0.1.21

package/src/databases/{images.js → images.ts}

@@ -10,8 +10,39 @@
  via a dedicated endpoint to an EncryptedDocumentImage model.
 */
 import {addAlert, get, post, postJson} from "fwtoolkit"
+
+import type {Editor} from "../types.js"
+
+interface ImageEntry {
+    id?: number
+    title: string
+    copyright: string
+    image: string
+    file_type?: string
+    original_file_type?: string
+    checksum?: number
+    cats?: any[]
+}
+
+interface ImageInput {
+    title: string
+    copyright: string
+    image?: Blob
+    original_file_type?: string
+    checksum?: number
+}
+
 export class ModImageDB {
-    constructor(mod) {
+    mod: {
+        editor: Editor
+        [key: string]: any
+    }
+    db: Record<number, ImageEntry> | false
+    unsent: {type: string; id?: number; image?: ImageEntry}[]
+    // cats always remain empty, as we don't use categories in doc images
+    cats: any[]
+
+    constructor(mod: {editor: Editor; [key: string]: any}) {
         mod.imageDB = this
         this.mod = mod
         this.db = false
@@ -20,23 +51,23 @@ export class ModImageDB {
         this.cats = []
     }
 
-    setDB(db) {
+    setDB(db: Record<number, ImageEntry>): void {
         this.db = db
         this.unsent = []
     }
 
-    mustSend() {
+    mustSend(): void {
         // Set a timeout so that the update can be combines with other updates
         // if they happen more or less simultaneously.
         window.setTimeout(
-            () => this.mod.editor.mod.collab.doc.sendToCollaborators(),
+            () => (this.mod as any).editor.mod.collab.doc.sendToCollaborators(),
             100
         )
     }
 
     // This function only makes real sense in the user's imageDB. It is kept here
     // for compatibility reasons.
-    getDB() {
+    getDB(): Promise<any[]> {
         return new Promise(resolve => {
             window.setTimeout(() => resolve([]), 100)
         })
@@ -44,15 +75,15 @@ export class ModImageDB {
 
     // Save an image directly for this document (E2EE only).
     // The image file is expected to be already encrypted client-side.
-    saveImage(imageData) {
+    saveImage(imageData: ImageInput): Promise<number> {
         const isE2EE = this.mod.editor.e2ee?.encrypted === true
         if (!isE2EE) {
             // Non-E2EE documents must use the user's imageDB
-            return this.mod.editor.app.imageDB.saveImage(imageData)
+            return (this.mod.editor.app as any).imageDB.saveImage(imageData)
         }
 
         // E2EE path: upload encrypted image directly to the document
-        const jsonData = {
+        const jsonData: Record<string, any> = {
             doc_id: this.mod.editor.docInfo.id,
             title: imageData.title,
             copyright: imageData.copyright,
@@ -62,7 +93,7 @@ export class ModImageDB {
             jsonData.original_file_type = imageData.original_file_type
         }
 
-        const files = {}
+        const files: Record<string, {file: Blob; filename: string}> = {}
         if (imageData.image) {
             files.image = {
                 file: imageData.image,
@@ -73,8 +104,8 @@ export class ModImageDB {
         }
 
         return postJson("/api/document/e2ee_image/", jsonData, files)
-            .then(({json}) => {
-                const dbEntry = {
+            .then(({json}: {json: any}) => {
+                const dbEntry: ImageEntry = {
                     id: json.id,
                     title: imageData.title,
                     copyright: imageData.copyright,
@@ -87,7 +118,7 @@ export class ModImageDB {
                     checksum: imageData.checksum || 0,
                     cats: []
                 }
-                this.db[json.id] = dbEntry
+                ;(this.db as Record<number, ImageEntry>)[json.id] = dbEntry
                 this.setImage(json.id, dbEntry)
                 return json.id
             })
@@ -98,7 +129,7 @@ export class ModImageDB {
     }
 
     // Add or update an in the image database both remotely and locally.
-    setImage(id, imageData) {
+    setImage(id: number, imageData: ImageEntry): void {
         this.setLocalImage(id, imageData)
         this.unsent.push({
             type: "update",
@@ -108,13 +139,13 @@ export class ModImageDB {
     }
 
     // Add or update an image only locally.
-    setLocalImage(id, imageData) {
-        this.db[id] = imageData
+    setLocalImage(id: number, imageData: ImageEntry): void {
+        ;(this.db as Record<number, ImageEntry>)[id] = imageData
     }
 
-    deleteImage(id) {
+    deleteImage(id: number): void {
         this.deleteLocalImage(id)
-        const wasDeleted = !this.db[id]
+        const wasDeleted = !(this.db as Record<number, ImageEntry>)[id]
         if (wasDeleted && this.mod.editor.e2ee?.encrypted) {
             // For E2EE documents, also delete the encrypted image record
             // from the server. The diff-based delete is only for client
@@ -128,7 +159,7 @@ export class ModImageDB {
         this.mustSend()
     }
 
-    deleteE2EEImageFromServer(id) {
+    deleteE2EEImageFromServer(id: number): void {
         post("/api/document/delete_e2ee_image/", {
             doc_id: this.mod.editor.docInfo.id,
             image_id: id
@@ -137,15 +168,15 @@ export class ModImageDB {
         })
     }
 
-    deleteLocalImage(id) {
-        const usedImages = []
+    deleteLocalImage(id: number): void {
+        const usedImages: number[] = []
         this.mod.editor.view.state.doc.descendants(node => {
             if (node.type.name === "figure" && node.attrs.image) {
                 usedImages.push(node.attrs.image)
             }
         })
-        if (!usedImages.includes(Number.parseInt(id))) {
-            delete this.db[id]
+        if (!usedImages.includes(Number.parseInt(String(id)))) {
+            delete (this.db as Record<number, ImageEntry>)[id]
             return
         }
         if (this.mod.editor.e2ee?.encrypted === true) {
@@ -155,27 +186,28 @@ export class ModImageDB {
             // document's unique key and are not reusable across documents.
             return
         }
-        if (Object.keys(this.mod.editor.app.imageDB.db).includes(id)) {
+        const appImageDB = (this.mod.editor.app as any).imageDB
+        if (Object.keys(appImageDB.db).includes(String(id))) {
             // Just directly reset the image as we already have the image present in user Image DB
-            this.setImage(id, this.mod.editor.app.imageDB.db[id])
+            this.setImage(id, appImageDB.db[id])
         } else {
             // If image is not present in both the userImage DB and docDB we can safely assume that we have to upload again.
             this.reUploadImage(
                 id,
-                this.db[id].image,
-                this.db[id].title,
-                this.db[id].copyright
+                (this.db as Record<number, ImageEntry>)[id].image,
+                (this.db as Record<number, ImageEntry>)[id].title,
+                (this.db as Record<number, ImageEntry>)[id].copyright
             ).then(
-                ({id, _newId}) => delete this.db[id],
-                id => {
-                    delete this.db[id]
+                () => delete (this.db as Record<number, ImageEntry>)[id],
+                () => {
+                    delete (this.db as Record<number, ImageEntry>)[id]
                     const transaction = this.mod.editor.view.state.tr
                     this.mod.editor.view.state.doc.descendants((node, pos) => {
                         if (
                             node.type.name === "figure" &&
                             node.attrs.image == id
                         ) {
-                            const attrs = Object.assign({}, node.attrs)
+                            const attrs = Object.assign({}, node.attrs) as Record<string, any>
                             attrs["image"] = false
                             const nodeType =
                                 this.mod.editor.currentView.state.schema.nodes[
@@ -196,7 +228,12 @@ export class ModImageDB {
         }
     }
 
-    reUploadImage(id, imageUrl, title, copyright) {
+    reUploadImage(
+        id: number,
+        imageUrl: string,
+        title: string,
+        copyright: string
+    ): Promise<{id: number; newId: number}> {
         const isE2EE = this.mod.editor.e2ee?.encrypted === true
         if (isE2EE) {
             // E2EE images cannot be re-uploaded from a URL because the server
@@ -205,76 +242,82 @@ export class ModImageDB {
             return Promise.reject(id)
         }
 
-        const newPromise = new Promise((resolve, reject) => {
-            // Depends on the fact that service worker is working and cached the image basically.
-            get(imageUrl)
-                .then(response => response.blob())
-                .then(blob => {
-                    const filename = imageUrl.split("/").pop()
-                    const file = new File([blob], filename, {type: blob.type})
-                    const x = {
-                        image: file,
-                        title: title,
-                        cats: [],
-                        copyright: copyright
-                    }
-                    this.mod.editor.app.imageDB.saveImage(x).then(
-                        newId => {
-                            const imageData = JSON.parse(
-                                JSON.stringify(
-                                    this.mod.editor.app.imageDB.db[newId]
+        const newPromise = new Promise<{id: number; newId: number}>(
+            (resolve, reject) => {
+                // Depends on the fact that service worker is working and cached the image basically.
+                get(imageUrl)
+                    .then(response => response.blob())
+                    .then(blob => {
+                        const filename = imageUrl.split("/").pop() || "image"
+                        const file = new File([blob], filename, {type: blob.type})
+                        const x = {
+                            image: file,
+                            title: title,
+                            cats: [],
+                            copyright: copyright
+                        }
+                        ;(this.mod.editor.app as any).imageDB.saveImage(x).then(
+                            (newId: number) => {
+                                const imageData = JSON.parse(
+                                    JSON.stringify(
+                                        (this.mod.editor.app as any).imageDB.db[
+                                            newId
+                                        ]
+                                    )
                                 )
-                            )
-                            this.setImage(newId, imageData)
-                            this.mod.editor.view.state.doc.descendants(
-                                (node, pos) => {
-                                    if (
-                                        node.type.name === "image" &&
-                                        node.attrs.image == id
-                                    ) {
-                                        const attrs = Object.assign(
-                                            {},
-                                            node.attrs
-                                        )
-                                        attrs["image"] = newId
-                                        const nodeType =
-                                            this.mod.editor.currentView.state
-                                                .schema.nodes["image"]
-                                        const transaction =
-                                            this.mod.editor.view.state.tr.setNodeMarkup(
-                                                pos,
-                                                nodeType,
-                                                attrs
+                                this.setImage(newId, imageData)
+                                this.mod.editor.view.state.doc.descendants(
+                                    (node, pos) => {
+                                        if (
+                                            node.type.name === "image" &&
+                                            node.attrs.image == id
+                                        ) {
+                                            const attrs = Object.assign(
+                                                {},
+                                                node.attrs
+                                            ) as Record<string, any>
+                                            attrs["image"] = newId
+                                            const nodeType =
+                                                this.mod.editor.currentView.state
+                                                    .schema.nodes["image"]
+                                            const transaction =
+                                                this.mod.editor.view.state.tr.setNodeMarkup(
+                                                    pos,
+                                                    nodeType,
+                                                    attrs
+                                                )
+                                            this.mod.editor.view.dispatch(
+                                                transaction
                                             )
-                                        this.mod.editor.view.dispatch(
-                                            transaction
-                                        )
+                                        }
                                     }
-                                }
-                            )
-                            resolve({id: id, newId: newId})
-                        },
-                        _error => reject(id)
-                    )
-                })
-                .catch(_error => {
-                    reject(id)
-                })
-        })
+                                )
+                                resolve({id: id, newId: newId})
+                            },
+                            (_error: any) => reject(id)
+                        )
+                    })
+                    .catch((_error: any) => {
+                        reject(id)
+                    })
+            }
+        )
         return newPromise
     }
 
-    hasUnsentEvents() {
+    hasUnsentEvents(): number {
         return this.unsent.length
     }
 
-    unsentEvents() {
+    unsentEvents(): {type: string; id?: number; image?: ImageEntry}[] {
         return this.unsent.map(event => {
             if (event.type === "delete") {
                 return event
             } else if (event.type === "update") {
                 // Check image entry still exists. Otherwise ignore.
-                const image = this.db[event.id]
+                const image = (this.db as Record<number, ImageEntry>)[
+                    event.id as number
+                ]
                 if (image) {
                     return {
                         type: "update",
@@ -287,30 +330,37 @@ export class ModImageDB {
                     }
                 }
             }
+            return {type: "ignore"}
         })
     }
 
-    eventsSent(n) {
+    eventsSent(n: {length: number}): void {
         this.unsent = this.unsent.slice(n.length)
     }
 
-    receive(events) {
+    receive(events: {type: string; id?: number; image?: ImageEntry}[]): void {
         events.forEach(event => {
             if (event.type == "delete") {
-                this.deleteLocalImage(event.id)
+                this.deleteLocalImage(event.id as number)
             } else if (event.type == "update") {
-                this.setLocalImage(event.id, event.image)
+                this.setLocalImage(
+                    event.id as number,
+                    event.image as ImageEntry
+                )
             }
         })
     }
 
-    findImage(imageData) {
-        return Object.keys(this.db).find(
-            id => this.db[id].checksum === imageData.checksum
+    findImage(imageData: ImageInput): number | undefined {
+        const id = Object.keys(this.db as Record<number, ImageEntry>).find(
+            id =>
+                (this.db as Record<number, ImageEntry>)[Number.parseInt(id)]
+                    .checksum === imageData.checksum
         )
+        return id ? Number.parseInt(id) : undefined
     }
 
-    hasImage(imageData) {
+    hasImage(imageData: ImageInput): boolean {
         if (this.findImage(imageData) !== undefined) {
             return true
         } else {

package/src/databases/index.ts

@@ -0,0 +1,116 @@
+import type {Node} from "prosemirror-model"
+
+import type {Editor} from "../types.js"
+
+import {ModBibliographyDB} from "./bibliography.js"
+import {ModImageDB} from "./images.js"
+
+interface ModDBImageDB {
+    db: Record<string, Record<string, unknown>>
+    unsent: unknown[]
+    unsentEvents(): unknown[]
+    deleteImage(id: string | number): void
+    setImage(id: string | number, entry: Record<string, unknown>): void
+}
+
+interface ModDBBibDB {
+    db: Record<string, Record<string, unknown>>
+    unsent: unknown[]
+    setDB(value: Record<string, Record<string, unknown>>): void
+    deleteReference(id: string | number): void
+    findReference(reference: Record<string, unknown>): string | undefined
+    addReference(
+        reference: Record<string, unknown>,
+        id: string | number
+    ): string | number
+    hasUnsentEvents(): number
+}
+
+export class ModDB {
+    editor: Editor
+    bibDB!: ModDBBibDB
+    imageDB!: ModDBImageDB
+
+    constructor(editor: Editor) {
+        editor.mod.db = this as unknown as Editor["mod"]["db"]
+        this.editor = editor
+        new ModBibliographyDB(this)
+        new ModImageDB(this)
+        // assign bibDB to be used in document schema.
+        this.editor.schema.cached.bibDB = this.bibDB
+        // assign bibDB to be used in footnote schema.
+        ;(
+            this.editor.mod.footnotes as {
+                fnEditor: {schema: {cached: Record<string, unknown>}}
+            }
+        ).fnEditor.schema.cached.bibDB = this.bibDB
+        // assign image DB to be used in document schema.
+        this.editor.schema.cached.imageDB = this.imageDB
+        // assign image DB to be used in footnote schema.
+        ;(
+            this.editor.mod.footnotes as {
+                fnEditor: {schema: {cached: Record<string, unknown>}}
+            }
+        ).fnEditor.schema.cached.imageDB = this.imageDB
+    }
+
+    // remove images/citation items that are no longer part of the document.
+    clean(): void {
+        const usedImages: (number | string)[] = [],
+            usedBibs: (number | string)[] = []
+        this.editor.view.state.doc.descendants((node: Node) => {
+            if (node.type.name === "citation") {
+                node.attrs.references.forEach(
+                    (ref: {id: number | string}) =>
+                        usedBibs.push(Number.parseInt(String(ref.id)))
+                )
+            } else if (node.type.name === "image" && node.attrs.image) {
+                usedImages.push(node.attrs.image)
+            }
+        })
+
+        ;(
+            this.editor.mod.footnotes as {
+                fnEditor: {view: {state: {doc: Node}}}
+            }
+        ).fnEditor.view.state.doc.descendants((node: Node) => {
+            if (node.type.name === "citation") {
+                node.attrs.references.forEach(
+                    (ref: {id: number | string}) =>
+                        usedBibs.push(Number.parseInt(String(ref.id)))
+                )
+            } else if (node.type.name === "image" && node.attrs.image) {
+                usedImages.push(node.attrs.image)
+            }
+        })
+
+        const unusedImages = Object.keys(this.imageDB.db).filter(
+                value => !usedImages.includes(Number.parseInt(value))
+            ),
+            unusedBibs = Object.keys(this.bibDB.db).filter(
+                value => !usedBibs.includes(Number.parseInt(value))
+            )
+        unusedImages.forEach(id => this.imageDB.deleteImage(id))
+        unusedBibs.forEach(id => this.bibDB.deleteReference(id))
+
+        const imageDbKeys = Object.keys(this.imageDB.db)
+        const missingImages = usedImages.filter(
+            id => !imageDbKeys.includes(String(id))
+        )
+        if (!this.editor.e2ee?.encrypted) {
+            missingImages.forEach(id => {
+                const userImage = (
+                    this.editor.app as {
+                        imageDB?: {db: Record<string, Record<string, unknown>>}
+                    }
+                ).imageDB?.db[id]
+                if (!userImage) {
+                    // Image is not present. Give up.
+                    return
+                }
+                const imageEntry = JSON.parse(JSON.stringify(userImage))
+                this.imageDB.setImage(id, imageEntry)
+            })
+        }
+    }
+}