@fiduswriter/editor 0.1.20 → 0.1.21

package/src/dialogs/{figure.js → figure.ts}

@@ -1,47 +1,83 @@
 import deepEqual from "fast-deep-equal"
-
-import {randomFigureId} from "@fiduswriter/document/schema/common/index"
+import type {Node} from "prosemirror-model"
+import type {JSONValue} from "@fiduswriter/document"
+import type {ContentMenuInit} from "fwtoolkit/content_menu"
 import {ContentMenu, Dialog, addAlert, dropdownSelect} from "fwtoolkit"
 import {ImageSelectionDialog} from "@fiduswriter/image-manager/selection_dialog"
 import {E2EEEncryptor} from "fwtoolkit/e2ee/encryptor"
+
 import {configureFigureTemplate} from "./templates.js"
+import {randomFigureId} from "@fiduswriter/document/schema/common/index"
+import type {Editor, EditorImageDB} from "../types.js"
+
+interface MathfieldElementClass {
+    strings: Record<string, Record<string, string>>
+    locale: string
+    plonkSound: null
+    keypressSound: null
+    prototype: {
+        getValue: () => string
+        select: () => void
+    }
+}
+
+interface MathfieldElementInstance extends HTMLElement {
+    value: string
+    getValue(): string
+    select(): void
+}
 
 export class FigureDialog {
-    constructor(editor) {
+    editor: Editor
+    imageDB: EditorImageDB
+    userImageDB: EditorImageDB
+    imgId: number | false = false
+    imgDb: "document" | "user" | false = false
+    copyright: Record<string, JSONValue> | false = false
+    insideFigure = false
+    figureNode: Node | false = false
+    contentNode: Node | false = false
+    caption = true
+    category = "none"
+    aligned = "center"
+    width = "50"
+    equation = ""
+    node: Node | null = null
+    submitMessage = gettext("Insert")
+    dialog: Dialog | false = false
+    mathliveDOM!: HTMLElement
+    nonMathElements: HTMLElement[] = []
+    mathField: MathfieldElementInstance | false = false
+
+    constructor(editor: Editor) {
         this.editor = editor
-        this.imageDB = this.editor.mod.db.imageDB
-        this.userImageDB = this.editor.app.imageDB
-        this.imgId = false
-        this.imgDb = false
-        this.copyright = false
-        this.insideFigure = false
-        this.figureNode = false
-        this.contentNode = false
-        this.caption = true
-        this.category = "none"
-        this.aligned = "center"
-        this.width = "50"
-        this.equation = ""
-        this.node = false
-        this.submitMessage = gettext("Insert")
-        this.dialog = false
+        this.imageDB = this.editor.mod.db!
+            .imageDB as unknown as EditorImageDB
+        this.userImageDB = this.editor.app.imageDB as unknown as EditorImageDB
     }
 
-    layoutMathEditor() {
-        this.dialog.dialogEl.querySelector(".inner-figure-preview").innerHTML =
-            `<div><span class="math-field" type="text" name="math" ></span></div>
+    layoutMathEditor(): void {
+        const dialogEl = (this.dialog as Dialog).dialogEl
+        const preview = dialogEl.querySelector(".inner-figure-preview")
+        if (!preview) {
+            return
+        }
+        preview.innerHTML = `<div><span class="math-field" type="text" name="math" ></span></div>
             <p class="formula-or-figure">${gettext("or")}</p>
             <p><button type="button" id="insert-figure-image" class="fw-button fw-light">
                 ${gettext("Insert image")} <i class="fa-solid fa-image"></i>
             </button></p>`
 
-        this.mathliveDOM = this.dialog.dialogEl.querySelector(".math-field")
+        this.mathliveDOM = dialogEl.querySelector(".math-field") as HTMLElement
         this.nonMathElements = [
-            this.dialog.dialogEl.querySelector("#insert-figure-image"),
-            this.dialog.dialogEl.querySelector(".formula-or-figure")
+            dialogEl.querySelector("#insert-figure-image") as HTMLElement,
+            dialogEl.querySelector(".formula-or-figure") as HTMLElement
         ]
         import("@fiduswriter/document/mathlive").then(MathLive => {
-            MathLive.MathfieldElement.strings = {
+            const MathfieldElement = (
+                MathLive as unknown as {MathfieldElement: MathfieldElementClass}
+            ).MathfieldElement
+            MathfieldElement.strings = {
                 int: {
                     "keyboard.tooltip.functions": gettext("Functions"),
                     "keyboard.tooltip.greek": gettext("Greek Letters"),
@@ -58,10 +94,12 @@ export class FigureDialog {
                     "tooltip.undo": gettext("Undo")
                 }
             }
-            MathLive.MathfieldElement.locale = "int"
-            MathLive.MathfieldElement.plonkSound = null
-            MathLive.MathfieldElement.keypressSound = null
-            this.mathField = new MathLive.MathfieldElement({
+            MathfieldElement.locale = "int"
+            MathfieldElement.plonkSound = null
+            MathfieldElement.keypressSound = null
+            this.mathField = new (MathfieldElement as unknown as new (
+                options: Record<string, unknown>
+            ) => MathfieldElementInstance)({
                 mathVirtualKeyboardPolicy: "manual"
             })
             this.mathField.value = this.equation
@@ -74,21 +112,24 @@ export class FigureDialog {
                 this.hidePlaceHolder()
             )
             this.mathField.addEventListener("input", () => {
-                this.equation = this.mathField.getValue()
+                this.equation = this.mathField
+                    ? this.mathField.getValue()
+                    : ""
                 this.showHideNonMathElements()
             })
             this.mathField.select()
             this.mathField.value = this.equation
 
             this.showHideNonMathElements()
-            this.dialog.dialogEl
-                .querySelector("#insert-figure-image")
+            dialogEl
+                .querySelector("#insert-figure-image")!
                 .addEventListener("click", () => this.selectImage())
         })
     }
 
-    showPlaceHolder() {
+    showPlaceHolder(): void {
         if (
+            this.mathField &&
             !this.mathField.getValue().length &&
             !this.mathliveDOM.querySelector(".fw-placeholder")
         ) {
@@ -99,14 +140,14 @@ export class FigureDialog {
         }
     }
 
-    hidePlaceHolder() {
+    hidePlaceHolder(): void {
         const placeHolder = this.mathliveDOM.querySelector(".fw-placeholder")
         if (placeHolder) {
             this.mathliveDOM.removeChild(placeHolder)
         }
     }
 
-    showHideNonMathElements() {
+    showHideNonMathElements(): void {
         if (this.equation.length) {
             this.nonMathElements.forEach(el => (el.style.display = "none"))
         } else {
@@ -114,37 +155,50 @@ export class FigureDialog {
         }
     }
 
-    selectImage() {
+    selectImage(): void {
         const imageSelection = new ImageSelectionDialog(
             this.imageDB,
             this.userImageDB,
             this.imgId,
             this.editor
         )
-        imageSelection.init().then(({id, db}) => {
-            if (id) {
-                this.imgId = id
-                this.imgDb = db
-                // We take a copy of the object in case of the image coming from the user db in order
-                // not to overwrite the copyright info from the user's image db.
-                this.copyright =
-                    db === "document"
-                        ? this.imageDB.db[this.imgId].copyright
-                        : JSON.parse(
-                              JSON.stringify(
-                                  this.userImageDB.db[this.imgId].copyright
-                              )
-                          )
-                this.layoutImagePreview()
-            } else {
-                this.imgId = false
-                this.imgDb = false
-                this.layoutMathEditor()
-            }
-        })
+        imageSelection
+            .init()
+            .then(
+                ({
+                    id,
+                    db
+                }: {
+                    id: number | false
+                    db: "document" | "user"
+                }) => {
+                    if (id) {
+                        this.imgId = id
+                        this.imgDb = db
+                        // We take a copy of the object in case of the image coming from the user db in order
+                        // not to overwrite the copyright info from the user's image db.
+                        this.copyright =
+                            db === "document"
+                                ? (this.imageDB.db[String(id)].copyright as
+                                      | Record<string, JSONValue>
+                                      | undefined) || false
+                                : JSON.parse(
+                                      JSON.stringify(
+                                          this.userImageDB.db[String(id)]
+                                              .copyright
+                                      )
+                                  )
+                        this.layoutImagePreview()
+                    } else {
+                        this.imgId = false
+                        this.imgDb = false
+                        this.layoutMathEditor()
+                    }
+                }
+            )
     }
 
-    async layoutImagePreview() {
+    async layoutImagePreview(): Promise<void> {
         if (this.imgId) {
             if (this.mathField) {
                 this.mathField = false
@@ -154,17 +208,17 @@ export class FigureDialog {
                     ? this.imageDB.db
                     : this.userImageDB.db
 
-            const imageEntry = db[this.imgId]
-            let imgSrc = imageEntry?.image || ""
+            const imageEntry = db[String(this.imgId)]
+            let imgSrc = String(imageEntry?.image || "")
 
             if (imageEntry?.file_type === "application/octet-stream") {
                 const key = this.editor.e2ee?.key
                 if (key) {
                     try {
                         imgSrc = await E2EEEncryptor.decryptImageToUrl(
-                            imageEntry.image,
+                            String(imageEntry.image),
                             key,
-                            imageEntry.original_file_type || "image/png"
+                            String(imageEntry.original_file_type || "image/png")
                         )
                     } catch (_e) {
                         imgSrc = staticUrl("img/error.avif")
@@ -174,55 +228,63 @@ export class FigureDialog {
                 }
             }
 
-            this.dialog.dialogEl.querySelector(
+            const dialogEl = (this.dialog as Dialog).dialogEl
+            dialogEl.querySelector(
                 ".inner-figure-preview"
-            ).innerHTML = `<img src="${imgSrc}" style="max-width: 400px;max-height:220px">
+            )!.innerHTML = `<img src="${imgSrc}" style="max-width: 400px;max-height:220px">
                 <span class="dot-menu-icon"><i class="fa-solid fa-ellipsis-v"></i></span>`
 
-            this.dialog.dialogEl
-                .querySelector(".dot-menu-icon")
+            dialogEl
+                .querySelector(".dot-menu-icon")!
                 .addEventListener("click", event => {
                     const contentMenu = new ContentMenu({
-                        menu: this.editor.menu.imageMenuModel,
+                        menu: this.editor.menu.imageMenuModel as ContentMenuInit,
                         page: this,
-                        menuPos: {X: event.pageX, Y: event.pageY}
+                        menuPos: {
+                            X: (event as MouseEvent).pageX,
+                            Y: (event as MouseEvent).pageY
+                        }
                     })
                     contentMenu.open()
                 })
         }
     }
 
-    async submitForm() {
+    async submitForm(): Promise<boolean> {
         if (new RegExp(/^\s*$/).test(this.equation) && !this.imgId) {
             // The math input is empty. Delete a math node if it exist. Then close the dialog.
             if (this.insideFigure) {
                 const tr = this.editor.currentView.state.tr.deleteSelection()
                 this.editor.currentView.dispatch(tr)
             }
-            this.dialog.close()
+            ;(this.dialog as Dialog).close()
             return false
         }
 
         if (this.imgDb === "user") {
             if (this.editor.e2ee?.encrypted) {
                 // For E2EE: encrypt the user image and upload it to the document
-                const userImage = this.userImageDB.db[this.imgId]
+                const userImage = this.userImageDB.db[String(this.imgId)]
                 try {
-                    const response = await fetch(userImage.image)
+                    const response = await fetch(String(userImage.image))
                     const blob = await response.blob()
                     const file = new File(
                         [blob],
-                        userImage.image.split("/").pop(),
+                        String(userImage.image).split("/").pop() || "image",
                         {type: blob.type}
                     )
+                    const key = this.editor.e2ee.key
+                    if (!key) {
+                        throw new Error("E2EE key missing")
+                    }
                     const encryptedFile = await E2EEEncryptor.encryptImage(
                         file,
-                        this.editor.e2ee.key
+                        key
                     )
                     const encryptedCopyright =
                         await E2EEEncryptor.encryptObject(
                             this.copyright,
-                            this.editor.e2ee.key
+                            key
                         )
                     const newId = await this.imageDB.saveImage({
                         image: encryptedFile,
@@ -242,45 +304,57 @@ export class FigureDialog {
             } else {
                 // Add image to document db.
                 const imageEntry = JSON.parse(
-                    JSON.stringify(this.userImageDB.db[this.imgId])
-                )
+                    JSON.stringify(this.userImageDB.db[String(this.imgId)])
+                ) as Record<string, unknown>
                 imageEntry.copyright = this.copyright
-                this.imageDB.setImage(this.imgId, imageEntry)
+                this.imageDB.setImage(this.imgId as number, imageEntry)
                 this.imgDb = "document"
             }
         } else if (
             this.imgId &&
-            this.imageDB.db[this.imgId] &&
-            !deepEqual(this.copyright, this.imageDB.db[this.imgId].copyright)
+            this.imageDB.db[String(this.imgId)] &&
+            !deepEqual(
+                this.copyright,
+                this.imageDB.db[String(this.imgId)].copyright
+            )
         ) {
             const imageEntry = JSON.parse(
-                JSON.stringify(this.imageDB.db[this.imgId])
-            )
+                JSON.stringify(this.imageDB.db[String(this.imgId)])
+            ) as Record<string, unknown>
             imageEntry.copyright = this.copyright
-            this.imageDB.setImage(this.imgId, imageEntry)
+            this.imageDB.setImage(this.imgId as number, imageEntry)
         }
 
+        const node = this.node
+        const currentEquationNode = node
+            ? node.content.content.find(
+                  (node: Node) => node.type.name === "figure_equation"
+              )
+            : undefined
+        const currentImageNode = node
+            ? node.content.content.find(
+                  (node: Node) => node.type.name === "image"
+              )
+            : undefined
+
         if (
+            node &&
             this.insideFigure &&
             this.equation ===
-                (this.node.content.content.find(
-                    node => node.type.name === "figure_equation"
-                )?.attrs.equation || "") &&
+                (currentEquationNode?.attrs.equation || "") &&
             this.imgId ===
-                (this.node.content.content.find(
-                    node => node.type.name === "image"
-                )?.attrs.image || false) &&
+                (currentImageNode?.attrs.image || false) &&
             this.imgDb === "document" &&
-            this.caption === this.node.attrs.caption &&
-            this.category === this.node.attrs.category &&
-            this.aligned === this.node.attrs.aligned &&
-            this.width === this.node.attrs.width
+            this.caption === node.attrs.caption &&
+            this.category === node.attrs.category &&
+            this.aligned === node.attrs.aligned &&
+            this.width === node.attrs.width
         ) {
             // The figure has not been changed, just close the dialog
-            this.dialog.close()
+            ;(this.dialog as Dialog).close()
             return false
         }
-        const content = []
+        const content: Node[] = []
         if (this.imgId) {
             content.push(
                 this.editor.currentView.state.schema.nodes["image"].create({
@@ -297,12 +371,10 @@ export class FigureDialog {
             )
         }
         const captionNode =
-            this.node.content?.content.find(
-                node => node.type.name === "figure_caption"
+            node?.content?.content.find(
+                (node: Node) => node.type.name === "figure_caption"
             ) ||
-            this.editor.currentView.state.schema.nodes[
-                "figure_caption"
-            ].create()
+            this.editor.currentView.state.schema.nodes["figure_caption"].create()
         if (this.category === "table") {
             content.unshift(captionNode)
         } else {
@@ -315,20 +387,21 @@ export class FigureDialog {
                     width: this.width,
                     category: this.category,
                     caption: this.caption,
-                    id: this.insideFigure
-                        ? this.node.attrs.id
-                        : randomFigureId()
+                    id: node ? node.attrs.id : randomFigureId()
                 },
                 content
-            ),
+            )!,
             false
         )
         this.editor.currentView.dispatch(tr)
 
-        this.dialog.close()
+        ;(this.dialog as Dialog).close()
+        return true
     }
 
-    findFigure(state) {
+    findFigure(state: {
+        selection: {node?: Node; $head: {depth: number; node(d: number): Node}}
+    }): Node | null {
         if (
             state.selection.node &&
             state.selection.node.type.name == "figure"
@@ -341,35 +414,45 @@ export class FigureDialog {
                 return $head.node(d)
             }
         }
-        return false
+        return null
     }
 
-    init() {
+    init(): boolean {
         this.node = this.findFigure(this.editor.currentView.state)
+        const node = this.node
 
-        if (this.node?.attrs?.track?.find(track => track.type === "deletion")) {
+        if (
+            node?.attrs?.track?.find(
+                (track: {type: string}) => track.type === "deletion"
+            )
+        ) {
             // The figure is marked as deleted so we don't allow editing it.
             return true
         }
 
-        const buttons = []
+        const buttons: {
+            text?: string
+            classes?: string
+            click?: () => void
+            type?: "cancel" | "close" | "ok"
+        }[] = []
 
-        if (this.node?.type && this.node?.type.name === "figure") {
+        if (node?.type && node.type.name === "figure") {
             this.insideFigure = true
             this.submitMessage = gettext("Update")
             this.equation =
-                this.node.content.content.find(
-                    node => node.type.name === "figure_equation"
+                node.content.content.find(
+                    (childNode: Node) => childNode.type.name === "figure_equation"
                 )?.attrs.equation || ""
             this.imgId =
-                this.node.content.content.find(
-                    node => node.type.name === "image"
+                node.content.content.find(
+                    (childNode: Node) => childNode.type.name === "image"
                 )?.attrs.image || false
             this.imgDb = "document"
-            this.category = this.node.attrs.category
-            this.caption = this.node.attrs.caption
-            this.aligned = this.node.attrs.aligned
-            this.width = this.node.attrs.width
+            this.category = node.attrs.category
+            this.caption = node.attrs.caption
+            this.aligned = node.attrs.aligned
+            this.width = node.attrs.width
             buttons.push({
                 text: gettext("Remove"),
                 classes: "fw-orange",
@@ -377,7 +460,7 @@ export class FigureDialog {
                     const tr =
                         this.editor.currentView.state.tr.deleteSelection()
                     this.editor.currentView.dispatch(tr)
-                    this.dialog.close()
+                    ;(this.dialog as Dialog).close()
                 }
             })
         }
@@ -415,10 +498,12 @@ export class FigureDialog {
         this.dialog.open()
 
         const alignmentSelector = dropdownSelect(
-            this.dialog.dialogEl.querySelector(".figure-alignment"),
+            (this.dialog as Dialog).dialogEl.querySelector(
+                ".figure-alignment"
+            ) as HTMLSelectElement,
             {
                 onChange: newValue => {
-                    this.aligned = newValue
+                    this.aligned = String(newValue)
                 },
                 width: "80%",
                 value: this.aligned
@@ -426,54 +511,70 @@ export class FigureDialog {
         )
 
         if (this.width === "100") {
-            alignmentSelector.setValue("center")
-            alignmentSelector.disable()
+            alignmentSelector?.setValue("center")
+            alignmentSelector?.disable()
             this.aligned = "center"
         }
 
-        const figureWidthDOM =
-            this.dialog.dialogEl.querySelector(".figure-width")
+        const dialogEl = (this.dialog as Dialog).dialogEl
+        const figureWidthDOM = dialogEl.querySelector(
+            ".figure-width"
+        ) as HTMLElement
         figureWidthDOM.style.width = "80%"
-        figureWidthDOM.firstElementChild.innerText = `${this.width} %`
+        const widthLabel = figureWidthDOM.firstElementChild as HTMLElement
+        widthLabel.innerText = `${this.width} %`
         figureWidthDOM.addEventListener("click", event => {
             const contentMenu = new ContentMenu({
-                menu: this.editor.menu.figureWidthMenuModel,
+                menu: this.editor.menu.figureWidthMenuModel as ContentMenuInit,
                 page: this,
-                menuPos: {X: event.pageX, Y: event.pageY},
+                menuPos: {
+                    X: (event as MouseEvent).pageX,
+                    Y: (event as MouseEvent).pageY
+                },
                 onClose: () => {
                     if (this.width == "100") {
-                        alignmentSelector.setValue("center")
-                        alignmentSelector.disable()
+                        alignmentSelector?.setValue("center")
+                        alignmentSelector?.disable()
                         this.aligned = "center"
                     } else {
-                        alignmentSelector.enable()
+                        alignmentSelector?.enable()
                     }
                 }
             })
             contentMenu.open()
         })
 
-        dropdownSelect(this.dialog.dialogEl.querySelector(".figure-category"), {
-            onChange: newValue => {
-                this.category = newValue
-            },
-            width: "80%",
-            value: this.category
-        })
+        dropdownSelect(
+            dialogEl.querySelector(".figure-category") as HTMLSelectElement,
+            {
+                onChange: newValue => {
+                    this.category = String(newValue)
+                },
+                width: "80%",
+                value: this.category
+            }
+        )
 
-        dropdownSelect(this.dialog.dialogEl.querySelector(".figure-caption"), {
-            onChange: newValue => {
-                this.caption = newValue === "true"
-            },
-            width: "80%",
-            value: String(this.caption)
-        })
+        dropdownSelect(
+            dialogEl.querySelector(".figure-caption") as HTMLSelectElement,
+            {
+                onChange: newValue => {
+                    this.caption = newValue === "true"
+                },
+                width: "80%",
+                value: String(this.caption)
+            }
+        )
 
-        if (this.imgId && this.imageDB.db[this.imgId]) {
-            this.copyright = this.imageDB.db[this.imgId].copyright
+        if (this.imgId && this.imageDB.db[String(this.imgId)]) {
+            this.copyright = (this.imageDB.db[String(this.imgId)].copyright as
+                | Record<string, JSONValue>
+                | undefined) || false
             this.layoutImagePreview()
         } else {
             this.layoutMathEditor()
         }
+
+        return false
     }
 }