@fiduswriter/editor 0.1.20 → 0.1.21

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

@@ -1,9 +1,25 @@
 import {randomCodeBlockId} from "@fiduswriter/document/schema/document/content"
 import {CATS} from "@fiduswriter/document/schema/i18n"
 import {Dialog, dropdownSelect} from "fwtoolkit"
+import type {Node, NodeType} from "prosemirror-model"
+import type {EditorState, Transaction} from "prosemirror-state"
+
+import type {Editor} from "../types.js"
 
 export class CodeBlockDialog {
-    constructor(editor) {
+    editor: Editor
+    language: string
+    category: string
+    title: string
+    id: string
+    insideCodeBlock: boolean
+    node: Node | false
+    submitMessage: string
+    dialog: InstanceType<typeof Dialog> | false
+    languageSelector?: ReturnType<typeof dropdownSelect>
+    categorySelector?: ReturnType<typeof dropdownSelect>
+
+    constructor(editor: Editor) {
         this.editor = editor
         this.language = ""
         this.category = ""
@@ -15,12 +31,13 @@ export class CodeBlockDialog {
         this.dialog = false
     }
 
-    findCodeBlock(state) {
+    findCodeBlock(state: EditorState): Node | false {
+        const selection = state.selection as any
         if (
-            state.selection.node &&
-            state.selection.node.type.name === "code_block"
+            selection.node &&
+            selection.node.type.name === "code_block"
         ) {
-            return state.selection.node
+            return selection.node
         }
         const $head = state.selection.$head
         for (let d = $head.depth; d > 0; d--) {
@@ -31,7 +48,7 @@ export class CodeBlockDialog {
         return false
     }
 
-    submitForm() {
+    submitForm(): void {
         const view = this.editor.currentView
         const {state} = view
         const {schema} = state
@@ -41,15 +58,17 @@ export class CodeBlockDialog {
             category: this.category,
             title: this.title,
             id: this.insideCodeBlock
-                ? this.node.attrs.id ||
+                ? (this.node as Node).attrs.id ||
                   (this.category ? randomCodeBlockId() : "")
                 : this.category
                   ? randomCodeBlockId()
                   : "",
-            track: this.insideCodeBlock ? this.node.attrs.track : []
+            track: this.insideCodeBlock
+                ? (this.node as Node).attrs.track
+                : []
         }
 
-        let tr
+        let tr: Transaction
 
         if (this.insideCodeBlock) {
             // Update existing code block using setNodeMarkup
@@ -72,18 +91,23 @@ export class CodeBlockDialog {
             tr = state.tr.setNodeMarkup(pos, null, newAttrs)
         } else {
             // Insert new code block
-            const codeBlockNode = schema.nodes.code_block.create(newAttrs)
+            const codeBlockNode = (schema.nodes.code_block as NodeType).create(
+                newAttrs
+            )
             tr = state.tr.replaceSelectionWith(codeBlockNode, false)
         }
 
         view.dispatch(tr)
-        this.dialog.close()
+        ;(this.dialog as InstanceType<typeof Dialog>).close()
     }
 
-    getEnabledCategories() {
+    getEnabledCategories(): string[] {
         const codeCategories =
-            this.editor.view.state.doc.attrs.code_categories || {}
-        const categories = []
+            (this.editor.view.state.doc.attrs.code_categories as Record<
+                string,
+                {enabled: boolean}
+            >) || {}
+        const categories: string[] = []
 
         Object.entries(codeCategories).forEach(([key, value]) => {
             if (value.enabled) {
@@ -94,21 +118,27 @@ export class CodeBlockDialog {
         return categories
     }
 
-    getAvailableLanguages() {
-        return this.editor.view.state.doc.attrs.code_languages || []
+    getAvailableLanguages(): string[] {
+        return (this.editor.view.state.doc.attrs.code_languages as string[]) ||
+            []
     }
 
-    init() {
+    init(): boolean | void {
         this.node = this.findCodeBlock(this.editor.currentView.state)
 
-        if (this.node?.attrs?.track?.find(track => track.type === "deletion")) {
+        if (
+            this.node &&
+            this.node.attrs.track?.find(
+                (track: {type: string}) => track.type === "deletion"
+            )
+        ) {
             // The code block is marked as deleted so we don't allow editing it.
             return true
         }
 
-        const buttons = []
+        const buttons: any[] = []
 
-        if (this.node?.type && this.node?.type.name === "code_block") {
+        if (this.node && this.node.type.name === "code_block") {
             this.insideCodeBlock = true
             this.submitMessage = gettext("Update")
             this.language = this.node.attrs.language || ""
@@ -123,7 +153,7 @@ export class CodeBlockDialog {
                     const tr =
                         this.editor.currentView.state.tr.deleteSelection()
                     this.editor.currentView.dispatch(tr)
-                    this.dialog.close()
+                    ;(this.dialog as InstanceType<typeof Dialog>).close()
                 }
             })
         }
@@ -135,10 +165,10 @@ export class CodeBlockDialog {
         })
 
         buttons.push({
-            type: "cancel"
+            type: "cancel" as const
         })
 
-        const language = this.editor.view.state.doc.attrs.language
+        const language = this.editor.view.state.doc.attrs.language as string
         const enabledCategories = this.getEnabledCategories()
         const availableLanguages = this.getAvailableLanguages()
 
@@ -158,10 +188,14 @@ export class CodeBlockDialog {
 
         // Language selector
         const languageSelector = dropdownSelect(
-            this.dialog.dialogEl.querySelector(".code-block-language"),
+            this.dialog.dialogEl.querySelector(
+                ".code-block-language"
+            ) as HTMLSelectElement,
             {
-                onChange: newValue => {
-                    this.language = newValue
+                onChange: (newValue: string | false) => {
+                    if (newValue !== false) {
+                        this.language = newValue
+                    }
                 },
                 width: "80%",
                 value: this.language
@@ -172,10 +206,14 @@ export class CodeBlockDialog {
         // Category selector
         if (enabledCategories.length > 0) {
             const categorySelector = dropdownSelect(
-                this.dialog.dialogEl.querySelector(".code-block-category"),
+                this.dialog.dialogEl.querySelector(
+                    ".code-block-category"
+                ) as HTMLSelectElement,
                 {
-                    onChange: newValue => {
-                        this.category = newValue
+                    onChange: (newValue: string | false) => {
+                        if (newValue !== false) {
+                            this.category = newValue
+                        }
                     },
                     width: "80%",
                     value: this.category
@@ -188,14 +226,18 @@ export class CodeBlockDialog {
         const titleInput =
             this.dialog.dialogEl.querySelector(".code-block-title")
         if (titleInput) {
-            titleInput.value = this.title
+            ;(titleInput as HTMLInputElement).value = this.title
             titleInput.addEventListener("input", () => {
-                this.title = titleInput.value
+                this.title = (titleInput as HTMLInputElement).value
             })
         }
     }
 
-    getDialogTemplate(language, enabledCategories, availableLanguages) {
+    getDialogTemplate(
+        language: string,
+        enabledCategories: string[],
+        availableLanguages: string[]
+    ): string {
         return `<table class="fw-dialog-table">
             <tbody>
                 <tr>
@@ -222,7 +264,7 @@ export class CodeBlockDialog {
                             ${enabledCategories
                                 .map(
                                     cat =>
-                                        `<option value="${cat}">${CATS[cat]?.[language] || cat}</option>`
+                                        `<option value="${cat}">${(CATS as any)[cat]?.[language] || cat}</option>`
                                 )
                                 .join("")}
                         </select>

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

@@ -1,21 +1,26 @@
 import {Dialog, addAlert} from "fwtoolkit"
 import {NodeSelection} from "prosemirror-state"
+import type {Node} from "prosemirror-model"
+import type {EditorView} from "prosemirror-view"
+
 import {contributorTemplate} from "./templates.js"
-/*
-    Source for email regexp:
-    https://html.spec.whatwg.org/multipage/input.html#e-mail-state-(type%3Demail)
-*/
+
 const emailRegExp =
     /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
 
 export class ContributorDialog {
-    /**
-     * @param {Object} node - The contributors_part node
-     * @param {Object} view - The ProseMirror editor view
-     * @param {Object|false} contributor - The contributor data if editing, false if adding
-     * @param {Array} idTypes - Array of ID type configs from template [{label, regex}]
-     */
-    constructor(node, view, contributor = false, idTypes = []) {
+    node: Node
+    view: EditorView
+    contributor: Record<string, unknown> | false
+    idTypes: string[]
+    dialog: InstanceType<typeof Dialog> | false
+
+    constructor(
+        node: Node,
+        view: EditorView,
+        contributor: Record<string, unknown> | false = false,
+        idTypes: string[] = []
+    ) {
         this.node = node
         this.view = view
         this.contributor = contributor
@@ -24,52 +29,65 @@ export class ContributorDialog {
         this.dialog = false
     }
 
-    init() {
+    init(): void {
         const buttons = []
         // Add Update/Add button
+        const dialogEl = (this.dialog as InstanceType<typeof Dialog>).dialogEl
+
         buttons.push({
             text: this.contributor ? gettext("Update") : gettext("Add"),
             classes: "fw-dark",
             click: () => {
                 // Get form values
-                let firstname = this.dialog.dialogEl.querySelector(
-                        "input[name=firstname]"
-                    ).value,
-                    lastname = this.dialog.dialogEl.querySelector(
-                        "input[name=lastname]"
-                    ).value,
-                    email =
-                        this.dialog.dialogEl.querySelector(
-                            "input[name=email]"
-                        ).value,
-                    institution = this.dialog.dialogEl.querySelector(
-                        "input[name=institution]"
-                    ).value,
-                    id_type = false,
-                    id_value = false
-
-                firstname = firstname.length ? firstname : false
-                lastname = lastname.length ? lastname : false
-                institution = institution.length ? institution : false
-                email = email.length ? email : false
+                let firstname: string | false = (
+                        dialogEl.querySelector("input[name=firstname]") as
+                            | HTMLInputElement
+                            | null
+                    )?.value || false,
+                    lastname: string | false = (
+                        dialogEl.querySelector("input[name=lastname]") as
+                            | HTMLInputElement
+                            | null
+                    )?.value || false,
+                    email: string | false = (
+                        dialogEl.querySelector("input[name=email]") as
+                            | HTMLInputElement
+                            | null
+                    )?.value || false,
+                    institution: string | false = (
+                        dialogEl.querySelector("input[name=institution]") as
+                            | HTMLInputElement
+                            | null
+                    )?.value || false,
+                    id_type: string | false = false,
+                    id_value: string | false = false
+
+                firstname = firstname && firstname.length ? firstname : false
+                lastname = lastname && lastname.length ? lastname : false
+                institution = institution && institution.length ? institution : false
+                email = email && email.length ? email : false
 
                 // Get ID type/value if fields are shown
                 if (this.idTypes && this.idTypes.length > 0) {
-                    const idTypeEl =
-                        this.dialog.dialogEl.querySelector("[name=id_type]")
+                    const idTypeEl = dialogEl.querySelector("[name=id_type]") as
+                        | HTMLInputElement
+                        | HTMLSelectElement
+                        | null
                     if (idTypeEl && idTypeEl.value) {
                         id_type = idTypeEl.value
-                        const idValueInput = this.dialog.dialogEl.querySelector(
+                        const idValueInput = dialogEl.querySelector(
                             "input[name=id_value]"
-                        )
+                        ) as HTMLInputElement | null
                         if (idValueInput && idValueInput.value) {
                             id_value = idValueInput.value
                             // Validate id_value against selected id_type's regex
                             const selectedType = this.idTypes.find(
-                                t => t.label === id_type
+                                t => t === id_type
                             )
-                            if (selectedType && selectedType.regex) {
-                                const regex = new RegExp(selectedType.regex)
+                            if (selectedType && (selectedType as unknown as {regex?: string}).regex) {
+                                const regex = new RegExp(
+                                    (selectedType as unknown as {regex?: string}).regex as string
+                                )
                                 if (!regex.test(id_value)) {
                                     addAlert(
                                         "error",
@@ -90,7 +108,7 @@ export class ContributorDialog {
                     return
                 }
 
-                this.dialog.close()
+                ;(this.dialog as InstanceType<typeof Dialog>).close()
 
                 // Don't create contributor if all fields are empty
                 if (!firstname && !lastname && !institution && !email) {
@@ -106,14 +124,14 @@ export class ContributorDialog {
                         institution,
                         id_type,
                         id_value
-                    })
+                    } as any)
                 let tr
 
                 // Check if we're editing an existing contributor based on current selection
                 // This works for collaborative editing because we use current selection, not saved positions
                 if (
                     this.contributor &&
-                    view.state.selection.jsonID === "node" &&
+                    view.state.selection instanceof NodeSelection &&
                     view.state.selection.node.type.name === "contributor"
                 ) {
                     // Editing: replace the selected contributor
@@ -124,8 +142,8 @@ export class ContributorDialog {
                     )
                 } else {
                     // Adding: find the insertion point based on current document state
-                    // Adding: find the insertion point based on current document state
-                    let posFrom, posTo
+                    let posFrom: number | undefined,
+                        posTo: number | undefined
                     view.state.doc.descendants((node, pos) => {
                         // Find the contributors_part node to determine insertion position
                         if (node.attrs.id === this.node.attrs.id) {
@@ -135,10 +153,17 @@ export class ContributorDialog {
                         if ("id" in node.attrs) {
                             return false
                         }
+                        return true
                     })
-                    tr = view.state.tr.replaceRangeWith(posFrom, posTo, newNode)
+                    tr = view.state.tr.replaceRangeWith(
+                        posFrom as number,
+                        posTo as number,
+                        newNode
+                    )
                     // Set selection to the newly created contributor
-                    tr.setSelection(NodeSelection.create(tr.doc, posFrom))
+                    tr.setSelection(
+                        NodeSelection.create(tr.doc, posFrom as number)
+                    )
                 }
                 // Dispatch the transaction (both replacement and selection)
                 view.dispatch(tr)
@@ -147,17 +172,17 @@ export class ContributorDialog {
         })
 
         buttons.push({
-            type: "cancel"
+            type: "cancel" as const
         })
 
         // Create and open the dialog
 
         this.dialog = new Dialog({
             id: "edit-contributor",
-            title: `${this.contributor ? gettext("Update") : gettext("Add")} ${this.node.attrs.item_title.toLowerCase()}`,
+            title: `${this.contributor ? gettext("Update") : gettext("Add")} ${(this.node.attrs.item_title as string).toLowerCase()}`,
             body: contributorTemplate({
                 contributor: this.contributor ? this.contributor : {},
-                idTypes: this.idTypes
+                idTypes: this.idTypes as never[]
             }),
             width: 836,
             height: 360,