@fiduswriter/editor 0.1.20 → 0.1.21

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

@@ -1,24 +1,29 @@
 import {Dialog} from "fwtoolkit"
-
 import {LANGUAGES} from "@fiduswriter/document/schema/const"
+
 import {languageTemplate} from "./templates.js"
+import type {Editor} from "../types.js"
 
 export class LanguageDialog {
-    constructor(editor, language) {
+    editor: Editor
+    language: string
+    dialog: InstanceType<typeof Dialog> | false
+
+    constructor(editor: Editor, language: string) {
         this.editor = editor
         this.language = language
         this.dialog = false
     }
 
-    init() {
+    init(): void {
         const buttons = []
         buttons.push({
             text: gettext("Change"),
             classes: "fw-dark",
             click: () => {
                 const language =
-                    this.dialog.dialogEl.querySelector("select").value
-                this.dialog.close()
+                    (this.dialog as InstanceType<typeof Dialog>).dialogEl.querySelector("select")?.value || this.language
+                ;(this.dialog as InstanceType<typeof Dialog>).close()
 
                 if (language === this.language) {
                     // No change.
@@ -34,7 +39,7 @@ export class LanguageDialog {
         })
 
         buttons.push({
-            type: "cancel"
+            type: "cancel" as const
         })
 
         this.dialog = new Dialog({

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

@@ -1,12 +1,40 @@
-import {TextSelection} from "prosemirror-state"
-
-import {linkDialogTemplate} from "./templates.js"
+import type {Node as ProseMirrorNode} from "prosemirror-model"
+import {TextSelection, type NodeSelection} from "prosemirror-state"
 
 import {Dialog} from "fwtoolkit"
+
+import type {Editor} from "../types.js"
+
+interface DialogButtonSpec {
+    text?: string
+    classes?: string
+    click?: () => void
+    type?: "cancel" | "close" | "ok"
+}
 import {getInternalTargets} from "../state_plugins/index.js"
+import {linkDialogTemplate} from "./templates.js"
+
+interface InternalTarget {
+    id: string
+    text: string
+}
+
+interface AllowedContent {
+    link: boolean
+    cross_reference: boolean
+}
 
 export class LinkDialog {
-    constructor(editor) {
+    editor: Editor
+    target: string | false
+    linkType: string
+    defaultLink: string
+    title: string
+    submitButtonText: string
+    dialog: InstanceType<typeof Dialog> | false
+    internalTargets: InternalTarget[]
+
+    constructor(editor: Editor) {
         this.editor = editor
         this.target = false // cross reference or internal link
         this.linkType = "external"
@@ -17,28 +45,30 @@ export class LinkDialog {
         this.internalTargets = []
     }
 
-    init() {
+    init(): void {
         this.checkCrossReference()
         if (!this.target) {
             this.checkLink()
         }
-        this.internalTargets = getInternalTargets(
-            this.editor.view.state,
-            this.editor.view.state.doc.attrs.language,
-            "main"
+        this.internalTargets = (
+            getInternalTargets(
+                this.editor.view.state,
+                this.editor.view.state.doc.attrs.language,
+                "main"
+            ) as InternalTarget[]
         ).concat(
             getInternalTargets(
-                this.editor.mod.footnotes.fnEditor.view.state,
+                (this.editor.mod as any).footnotes.fnEditor.view.state,
                 this.editor.view.state.doc.attrs.language,
                 "foot"
-            )
+            ) as InternalTarget[]
         )
         this.createDialog()
     }
 
     // Check if there is an existing link at the selection. If this is the case
     // use its values in dialog.
-    checkLink() {
+    checkLink(): void {
         const state = this.editor.currentView.state,
             from = state.selection.from,
             linkMark = state.selection.$from
@@ -59,22 +89,21 @@ export class LinkDialog {
     }
 
     // Check if the selection spans over exactly one cross reference node. If so, use it.
-    checkCrossReference() {
-        if (
-            this.editor.currentView.state.selection.node?.type.name ===
-            "cross_reference"
-        ) {
+    checkCrossReference(): void {
+        const node = (this.editor.currentView.state.selection as NodeSelection)
+            .node
+        if (node?.type.name === "cross_reference") {
             this.submitButtonText = gettext("Update")
-            this.target = this.editor.currentView.state.selection.node.attrs.id
+            this.target = node.attrs.id
             this.linkType = "cross_reference"
         }
     }
 
     // To check whether links, cross references or both can be added in current position.
-    checkAllowedContent() {
+    checkAllowedContent(): AllowedContent {
         if (this.editor.currentView === this.editor.view) {
-            const settings =
-                this.editor.view.state.selection.$anchor.node(1).attrs
+            const settings = this.editor.view.state.selection.$anchor.node(1)
+                .attrs
             return {
                 link: settings.marks.includes("link"),
                 cross_reference: settings.elements.includes("cross_reference")
@@ -90,7 +119,7 @@ export class LinkDialog {
     }
 
     // Find the start and end of the link currently selected.
-    extendSelectionToMark(pos, mark) {
+    extendSelectionToMark(pos: number, mark: ProseMirrorNode["marks"][0]): void {
         const view = this.editor.currentView,
             state = view.state,
             $pos = state.doc.resolve(pos)
@@ -126,72 +155,88 @@ export class LinkDialog {
         )
     }
 
-    createDialog() {
-        const buttons = []
+    createDialog(): void {
+        const buttons: DialogButtonSpec[] = []
         buttons.push({
             text: this.submitButtonText,
             classes: "fw-dark",
             click: () => {
-                const linkTypeEl = this.dialog.dialogEl.querySelector(
+                const linkTypeEl = (this.dialog as InstanceType<typeof Dialog>).dialogEl.querySelector(
                         "input[name=link-type]:checked"
-                    ),
+                    ) as HTMLInputElement | null,
                     linkType = linkTypeEl ? linkTypeEl.value : "external"
-                let href, title, target, change
+                let href: string | undefined,
+                    title: string | undefined,
+                    target: string | false = false,
+                    change: boolean = false
 
                 switch (linkType) {
                     case "internal": {
-                        target = this.dialog.dialogEl.querySelector(
-                            "select.internal-link-selector"
+                        target = (
+                            (this.dialog as InstanceType<typeof Dialog>).dialogEl.querySelector(
+                                "select.internal-link-selector"
+                            ) as HTMLSelectElement
                         ).value
                         href = `#${target}`
-                        title = this.internalTargets.find(
-                            iTarget => iTarget.id === target
+                        title = (
+                            this.internalTargets.find(
+                                iTarget => iTarget.id === target
+                            ) as InternalTarget
                         ).text
                         change =
-                            target &&
+                            !!target &&
                             (this.linkType !== "internal" ||
                                 this.target !== target)
                         break
                     }
                     case "external": {
                         const linkEl =
-                            this.dialog.dialogEl.querySelector("input.link")
+                            (this.dialog as InstanceType<typeof Dialog>).dialogEl.querySelector("input.link") as
+                                HTMLInputElement
                         if (
-                            !new RegExp(/^\s*$/).test(linkEl.value) &&
+                            !/^\s*$/.test(linkEl.value) &&
                             linkEl.value !== this.defaultLink
                         ) {
                             href = linkEl.value
                         }
-                        title =
-                            this.dialog.dialogEl.querySelector(
+                        title = (
+                            (this.dialog as InstanceType<typeof Dialog>).dialogEl.querySelector(
                                 "input.link-title"
-                            ).value
-                        if (new RegExp(/^\s*$/).test(title)) {
+                            ) as HTMLInputElement
+                        ).value
+                        if (/^\s*$/.test(title || "")) {
                             // The link title is empty. Make it the same as the link itself.
-                            title = href
+                            title = href || ""
                         }
                         change =
-                            href &&
+                            !!href &&
                             (this.linkType !== "external" ||
                                 this.target !== href ||
                                 this.title !== title)
                         break
                     }
                     case "cross_reference": {
-                        target = this.dialog.dialogEl.querySelector(
-                            "select.cross-reference-selector"
+                        target = (
+                            (this.dialog as InstanceType<typeof Dialog>).dialogEl.querySelector(
+                                "select.cross-reference-selector"
+                            ) as HTMLSelectElement
                         ).value
-                        title = this.internalTargets.find(
-                            iTarget => iTarget.id === target
+                        title = (
+                            this.internalTargets.find(
+                                iTarget => iTarget.id === target
+                            ) as InternalTarget
                         ).text
                         change =
-                            target &&
+                            !!target &&
                             (this.linkType !== "cross_reference" ||
                                 this.target !== target)
                         break
                     }
+                    default:
+                        target = false
+                        change = false
                 }
-                this.dialog.close()
+                (this.dialog as InstanceType<typeof Dialog>).close()
 
                 if (!change) {
                     // The link input is empty or hasn't been changed from the default value.
@@ -217,7 +262,7 @@ export class LinkDialog {
                     // There is an empty selection. We insert the link title into the editor
                     // and then add the link to that.
                     if (posFrom === posTo) {
-                        tr.insertText(title, posFrom, posTo)
+                        tr.insertText(title || "", posFrom, posTo)
                         posTo = tr.mapping.map(posFrom, 1)
                     }
                     const markType = view.state.schema.marks.link.create({
@@ -247,7 +292,7 @@ export class LinkDialog {
             id: "edit-link",
             title: gettext("Link"),
             body: linkDialogTemplate({
-                target: this.target,
+                target: this.target as string,
                 allowedContent: this.checkAllowedContent(),
                 title: this.title,
                 linkType: this.linkType,
@@ -265,33 +310,33 @@ export class LinkDialog {
         this.dialog.open()
 
         if (this.internalTargets.length) {
-            const externalEls = this.dialog.dialogEl.querySelectorAll(
+            const externalEls = (this.dialog as InstanceType<typeof Dialog>).dialogEl.querySelectorAll(
                     "input.link, input.link-title"
                 ),
-                internalEls = this.dialog.dialogEl.querySelectorAll(
+                internalEls = (this.dialog as InstanceType<typeof Dialog>).dialogEl.querySelectorAll(
                     "select.internal-link-selector"
                 ),
-                crossReferenceEls = this.dialog.dialogEl.querySelectorAll(
+                crossReferenceEls = (this.dialog as InstanceType<typeof Dialog>).dialogEl.querySelectorAll(
                     "select.cross-reference-selector"
                 ),
-                externalSwitchers = this.dialog.dialogEl.querySelectorAll(
+                externalSwitchers = (this.dialog as InstanceType<typeof Dialog>).dialogEl.querySelectorAll(
                     "input.link, input.link-title, label.link-external-label, input.link-external-check"
                 ),
-                internalSwitchers = this.dialog.dialogEl.querySelectorAll(
+                internalSwitchers = (this.dialog as InstanceType<typeof Dialog>).dialogEl.querySelectorAll(
                     "select.internal-link-selector, label.link-internal-label, input.link-internal-check"
                 ),
-                crossReferenceSwitchers = this.dialog.dialogEl.querySelectorAll(
+                crossReferenceSwitchers = (this.dialog as InstanceType<typeof Dialog>).dialogEl.querySelectorAll(
                     "select.cross-reference-selector, label.cross-reference-label, input.cross-reference-check"
                 ),
-                radioInternal = this.dialog.dialogEl.querySelector(
+                radioInternal = (this.dialog as InstanceType<typeof Dialog>).dialogEl.querySelector(
                     "input.link-internal-check"
-                ),
-                radioExternal = this.dialog.dialogEl.querySelector(
+                ) as HTMLInputElement,
+                radioExternal = (this.dialog as InstanceType<typeof Dialog>).dialogEl.querySelector(
                     "input.link-external-check"
-                ),
-                radioCrossReference = this.dialog.dialogEl.querySelector(
+                ) as HTMLInputElement,
+                radioCrossReference = (this.dialog as InstanceType<typeof Dialog>).dialogEl.querySelector(
                     "input.cross-reference-check"
-                )
+                ) as HTMLInputElement
 
             switch (this.linkType) {
                 case "internal":

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

@@ -1,22 +1,39 @@
+import {NodeSelection} from "prosemirror-state"
 import {Dialog} from "fwtoolkit"
+import type {Node} from "prosemirror-model"
+
 import {sub, subChars, sup, supChars} from "./subsup.js"
 import {mathDialogTemplate} from "./templates.js"
+import type {Editor} from "../types.js"
 
 /**
  * Class to work with formula dialog
  */
 export class MathDialog {
-    constructor(editor) {
+    editor: Editor
+    node: Node | null
+    equationSelected: boolean
+    equation: string
+    dialog: InstanceType<typeof Dialog> | undefined
+    mathliveDOM: HTMLElement | null
+    mathField: unknown
+
+    constructor(editor: Editor) {
         this.editor = editor
-        this.node = this.editor.currentView.state.selection.node
+        this.node =
+            this.editor.currentView.state.selection instanceof NodeSelection
+                ? this.editor.currentView.state.selection.node
+                : null
         this.equationSelected =
-            this.node && this.node.attrs && this.node.attrs.equation
-                ? true
-                : false
-        this.equation = this.equationSelected ? this.node.attrs.equation : ""
+            this.node?.attrs && this.node.attrs.equation ? true : false
+        this.equation = this.equationSelected
+            ? (this.node?.attrs.equation as string)
+            : ""
+        this.mathliveDOM = null
+        this.mathField = false
     }
 
-    init() {
+    init(): void {
         //get selected node
 
         //initialize dialog and open it
@@ -40,7 +57,7 @@ export class MathDialog {
                             if (this.equationSelected) {
                                 view.dispatch(state.tr.deleteSelection())
                             }
-                            this.dialog.close()
+                            ;(this.dialog as InstanceType<typeof Dialog>).close()
                             return
                         } else if (
                             new RegExp(
@@ -52,7 +69,7 @@ export class MathDialog {
                             view.dispatch(
                                 state.tr.insertText(sup(this.equation.slice(1)))
                             )
-                            this.dialog.close()
+                            ;(this.dialog as InstanceType<typeof Dialog>).close()
                             return
                         } else if (
                             new RegExp(
@@ -64,14 +81,14 @@ export class MathDialog {
                             view.dispatch(
                                 state.tr.insertText(sub(this.equation.slice(1)))
                             )
-                            this.dialog.close()
+                            ;(this.dialog as InstanceType<typeof Dialog>).close()
                             return
                         } else if (
                             this.equationSelected &&
-                            this.equation === this.node.attrs.equation
+                            this.equation === this.node?.attrs.equation
                         ) {
                             // Equation selected, but has not changed from last time.
-                            this.dialog.close()
+                            ;(this.dialog as InstanceType<typeof Dialog>).close()
                             return
                         }
                         const nodeType = state.schema.nodes["equation"]
@@ -79,14 +96,14 @@ export class MathDialog {
                             state.tr.replaceSelectionWith(
                                 nodeType.createAndFill({
                                     equation: this.equation
-                                })
+                                }) as Node
                             )
                         )
-                        this.dialog.close()
+                        ;(this.dialog as InstanceType<typeof Dialog>).close()
                     }
                 },
                 {
-                    type: "cancel"
+                    type: "cancel" as const
                 }
             ],
             title: gettext("Mathematical formula"),
@@ -107,7 +124,17 @@ export class MathDialog {
         this.mathliveDOM = this.dialog.dialogEl.querySelector(".math-field")
 
         import("@fiduswriter/document/mathlive").then(MathLive => {
-            MathLive.MathfieldElement.strings = {
+            interface MathfieldElementClass {
+                strings: Record<string, Record<string, string>>,
+                locale: string
+                plonkSound: null
+                keypressSound: null
+                prototype: {getValue: () => string}
+            }
+            const MathfieldElement = (
+                MathLive as unknown as {MathfieldElement: MathfieldElementClass}
+            ).MathfieldElement
+            MathfieldElement.strings = {
                 int: {
                     "keyboard.tooltip.functions": gettext("Functions"),
                     "keyboard.tooltip.greek": gettext("Greek Letters"),
@@ -124,25 +151,26 @@ export class MathDialog {
                     "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>
+            ) => {getValue: () => string})({
                 mathVirtualKeyboardPolicy: "manual"
             })
-            this.mathField.value = this.equation
-            this.mathliveDOM.appendChild(this.mathField)
-            //this.mathField.addEventListener("focusin", () => window.mathVirtualKeyboard.show())
-            //this.mathField.addEventListener("focusout", () => window.mathVirtualKeyboard.hide())
-            this.mathField.select()
+            ;(this.mathField as {value: string}).value = this.equation
+            ;(this.mathliveDOM as HTMLElement).appendChild(
+                this.mathField as unknown as globalThis.Node
+            )
+            ;(this.mathField as {select: () => void}).select()
         })
     }
 
     /**
      * Get latex representation as text
-     * @returns {string} latex formula
      */
-    getLatex() {
-        return this.mathField.getValue()
+    getLatex(): string {
+        return (this.mathField as {getValue: () => string}).getValue()
     }
 }

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

@@ -1,14 +1,23 @@
 import {Dialog} from "fwtoolkit"
+import type {Node} from "prosemirror-model"
+
 import {orderedListStartTemplate} from "./templates.js"
+import type {Editor} from "../types.js"
 
 export class OrderedListStartDialog {
-    constructor(editor) {
+    editor: Editor
+    dialog: InstanceType<typeof Dialog> | false
+    dialogEl: HTMLElement | false
+    order: number
+
+    constructor(editor: Editor) {
         this.editor = editor
         this.dialogEl = false
         this.order = 1
+        this.dialog = false
     }
 
-    init() {
+    init(): void {
         const {orderedList} = this.findOrderedList(
             this.editor.currentView.state
         )
@@ -18,7 +27,9 @@ export class OrderedListStartDialog {
         this.insertDialog()
     }
 
-    findOrderedList(state) {
+    findOrderedList(state: {
+        selection: {$head: import("prosemirror-model").ResolvedPos}
+    }): {orderedList: Node | false; orderedListPos: number | false} {
         const $head = state.selection.$head
         for (let d = $head.depth; d > 0; d--) {
             if ($head.node(d).type.name == "ordered_list") {
@@ -31,11 +42,11 @@ export class OrderedListStartDialog {
         return {orderedList: false, orderedListPos: false}
     }
 
-    submitForm() {
+    submitForm(): void {
         const {orderedList, orderedListPos} = this.findOrderedList(
             this.editor.currentView.state
         )
-        if (!orderedList) {
+        if (!orderedList || orderedListPos === false) {
             return
         }
         const attrs = Object.assign({}, orderedList.attrs, {
@@ -44,24 +55,24 @@ export class OrderedListStartDialog {
         this.editor.currentView.dispatch(
             this.editor.currentView.state.tr.setNodeMarkup(
                 orderedListPos,
-                false,
+                undefined,
                 attrs
             )
         )
     }
 
-    insertDialog() {
+    insertDialog(): void {
         const buttons = []
         buttons.push({
             text: gettext("Update"),
             classes: "fw-dark",
             click: () => {
                 this.submitForm()
-                this.dialog.close()
+                ;(this.dialog as InstanceType<typeof Dialog>).close()
             }
         })
         buttons.push({
-            type: "cancel"
+            type: "cancel" as const
         })
 
         this.dialog = new Dialog({
@@ -77,8 +88,10 @@ export class OrderedListStartDialog {
         this.dialog.open()
 
         const listStartInput = document.querySelector("input.list-start")
-        listStartInput.addEventListener("change", _event => {
-            this.order = Number.parseInt(listStartInput.value) || 1
-        })
+        if (listStartInput) {
+            listStartInput.addEventListener("change", _event => {
+                this.order = Number.parseInt((listStartInput as HTMLInputElement).value) || 1
+            })
+        }
     }
 }

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

@@ -2,29 +2,33 @@ import {Dialog} from "fwtoolkit"
 import {revisionDialogTemplate} from "./templates.js"
 
 export class RevisionDialog {
-    constructor(dir) {
+    dir: string
+    dialog: Dialog | false
+
+    constructor(dir: string) {
         this.dir = dir
         this.dialog = false
     }
 
-    init() {
-        const buttons = []
-        const dialogDonePromise = new Promise(resolve => {
+    init(): Promise<string> {
+        const buttons: Array<Record<string, unknown>> = []
+        const dialogDonePromise = new Promise<string>(resolve => {
             buttons.push({
                 text: gettext("Save"),
                 classes: "fw-dark",
                 click: () => {
-                    const note =
-                        this.dialog.dialogEl.querySelector(
+                    const note = (
+                        (this.dialog as Dialog).dialogEl.querySelector(
                             ".revision-note"
-                        ).value
-                    this.dialog.close()
+                        ) as HTMLInputElement
+                    ).value
+                    ;(this.dialog as Dialog).close()
                     return resolve(note)
                 }
             })
 
             buttons.push({
-                type: "cancel"
+                type: "cancel" as const
             })
         })