@fiduswriter/editor 0.1.20 → 0.1.21

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

@@ -2,7 +2,7 @@
 
 // Author: Michał Jezierski <ambinanitelo@gmail.com>
 // License: MIT
-const superscripts = {
+const superscripts: Record<string, string> = {
     0: "⁰",
     1: "¹",
     2: "²",
@@ -64,7 +64,7 @@ const superscripts = {
     W: "ᵂ"
 }
 
-const subscripts = {
+const subscripts: Record<string, string> = {
     0: "₀",
     1: "₁",
     2: "₂",
@@ -99,18 +99,20 @@ const subscripts = {
     x: "ₓ"
 }
 
-function parse(input) {
+function parse(input: unknown): string[] {
     return (input + "").split("")
 }
 
-function to(chart) {
-    return input => chart[input]
+function to(chart: Record<string, string>) {
+    return (input: string) => chart[input]
 }
 
-export const sup = input => parse(input).map(to(superscripts)).join("")
+export const sup = (input: unknown): string =>
+    parse(input).map(to(superscripts)).join("")
 
 export const supChars = Object.keys(superscripts).join("")
 
-export const sub = input => parse(input).map(to(subscripts)).join("")
+export const sub = (input: unknown): string =>
+    parse(input).map(to(subscripts)).join("")
 
 export const subChars = Object.keys(subscripts).join("")

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

@@ -1,34 +1,46 @@
 import {Dialog, dropdownSelect} from "fwtoolkit"
+import type {Node} from "prosemirror-model"
+import type {EditorState} from "prosemirror-state"
+
 import {tableConfigurationTemplate, tableInsertTemplate} from "./templates.js"
+import type {Editor} from "../types.js"
 
 export class TableDialog {
-    constructor(editor) {
+    editor: Editor
+    dialog: InstanceType<typeof Dialog> | false
+
+    constructor(editor: Editor) {
         this.editor = editor
-        this.dialogEl = false
+        this.dialog = false
     }
 
-    init() {
+    init(): void {
         this.insertTableDialog()
     }
 
-    markInsertTable(cell, className) {
-        this.dialog.dialogEl
+    markInsertTable(cell: HTMLTableCellElement, className: string): {
+        colCount: number
+        rowCount: number
+    } {
+        ;(this.dialog as InstanceType<typeof Dialog>).dialogEl
             .querySelectorAll(`td.${className}`)
             .forEach(el => el.classList.remove(className))
         let colCount = 1
-        let countElement = cell
+        let countElement: Element | null = cell
         while (countElement.previousElementSibling) {
             countElement = countElement.previousElementSibling
             colCount += 1
         }
         let rowCount = 1
-        countElement = countElement.parentElement
-        while (countElement.previousElementSibling) {
+        countElement = (countElement as HTMLTableCellElement).parentElement
+        while (countElement?.previousElementSibling) {
             countElement = countElement.previousElementSibling
             rowCount += 1
         }
         // add hover class.
-        const rows = this.dialog.dialogEl.querySelectorAll("tr")
+        const rows = (this.dialog as InstanceType<typeof Dialog>).dialogEl.querySelectorAll(
+            "tr"
+        )
         for (let i = 0; i < rowCount; i++) {
             const cols = rows[i].querySelectorAll("td")
             for (let j = 0; j < colCount; j++) {
@@ -38,10 +50,10 @@ export class TableDialog {
         return {colCount, rowCount}
     }
 
-    insertTableDialog() {
+    insertTableDialog(): void {
         let rowCount = 1,
             colCount = 1
-        const buttons = []
+        const buttons: any[] = []
         buttons.push({
             text: gettext("Insert"),
             classes: "fw-dark",
@@ -52,13 +64,19 @@ export class TableDialog {
                         {type: "table_caption"},
                         {type: "table_body", content: []}
                     ]
+                } as {
+                    type: string
+                    content: Array<{type: string; content?: any[]}>
+                }
+                const table_body = table.content[1] as {
+                    type: string
+                    content: any[]
                 }
-                const table_body = table.content[1]
 
                 for (let i = 0; i < rowCount; i++) {
                     const row = {type: "table_row", content: []}
                     for (let j = 0; j < colCount; j++) {
-                        row.content.push({
+                        ;(row.content as any[]).push({
                             type: "table_cell",
                             content: [{type: "paragraph"}]
                         })
@@ -72,11 +90,11 @@ export class TableDialog {
                         false
                     )
                 )
-                this.dialog.close()
+                ;(this.dialog as InstanceType<typeof Dialog>).close()
             }
         })
         buttons.push({
-            type: "cancel"
+            type: "cancel" as const
         })
 
         this.dialog = new Dialog({
@@ -94,12 +112,12 @@ export class TableDialog {
         // manage hovering over table cells
         this.dialog.dialogEl.querySelectorAll("td").forEach(el =>
             el.addEventListener("mouseenter", () => {
-                this.markInsertTable(el, "hover")
+                this.markInsertTable(el as HTMLTableCellElement, "hover")
             })
         )
         this.dialog.dialogEl.querySelectorAll("td").forEach(el =>
             el.addEventListener("mouseleave", () => {
-                this.dialog.dialogEl
+                ;(this.dialog as InstanceType<typeof Dialog>).dialogEl
                     .querySelectorAll("td.hover")
                     .forEach(mEl => mEl.classList.remove("hover"))
             })
@@ -109,7 +127,10 @@ export class TableDialog {
             el.addEventListener("click", event => {
                 event.preventDefault()
                 event.stopImmediatePropagation()
-                const newCounts = this.markInsertTable(el, "selected")
+                const newCounts = this.markInsertTable(
+                    el as HTMLTableCellElement,
+                    "selected"
+                )
                 rowCount = newCounts.rowCount
                 colCount = newCounts.colCount
             })
@@ -118,9 +139,17 @@ export class TableDialog {
 }
 
 export class TableConfigurationDialog {
-    constructor(editor) {
+    editor: Editor
+    dialog: InstanceType<typeof Dialog> | false
+    aligned: string
+    width: string
+    layout: string
+    category: string
+    caption: boolean
+
+    constructor(editor: Editor) {
         this.editor = editor
-        this.dialogEl = false
+        this.dialog = false
         this.aligned = "center"
         this.width = "100"
         this.layout = "fixed"
@@ -128,7 +157,7 @@ export class TableConfigurationDialog {
         this.caption = false
     }
 
-    init() {
+    init(): void {
         const {table} = this.findTable(this.editor.currentView.state)
         if (!table) {
             return
@@ -141,7 +170,7 @@ export class TableConfigurationDialog {
         this.insertDialog()
     }
 
-    findTable(state) {
+    findTable(state: EditorState): {table: Node | false; tablePos?: number} {
         const $head = state.selection.$head
         for (let d = $head.depth; d > 0; d--) {
             if ($head.node(d).type.name == "table") {
@@ -151,8 +180,10 @@ export class TableConfigurationDialog {
         return {table: false}
     }
 
-    submitForm() {
-        const {table, tablePos} = this.findTable(this.editor.currentView.state)
+    submitForm(): void {
+        const {table, tablePos} = this.findTable(
+            this.editor.currentView.state
+        )
         if (!table) {
             return
         }
@@ -165,31 +196,31 @@ export class TableConfigurationDialog {
         })
         this.editor.currentView.dispatch(
             this.editor.currentView.state.tr.setNodeMarkup(
-                tablePos,
-                false,
+                tablePos as number,
+                null,
                 attrs
             )
         )
     }
 
-    insertDialog() {
-        const buttons = []
+    insertDialog(): void {
+        const buttons: any[] = []
         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({
             title: gettext("Configure table"),
             body: tableConfigurationTemplate({
-                language: this.editor.view.state.doc.attrs.language
+                language: this.editor.view.state.doc.attrs.language as string
             }),
             width: 400,
             height: 360,
@@ -200,15 +231,23 @@ export class TableConfigurationDialog {
         this.dialog.open()
 
         const alignmentSelector = dropdownSelect(
-            this.dialog.dialogEl.querySelector(".table-alignment"),
+            this.dialog.dialogEl.querySelector(
+                ".table-alignment"
+            ) as HTMLSelectElement,
             {
-                onChange: newValue => {
-                    this.aligned = newValue
+                onChange: (newValue: string | false) => {
+                    if (newValue !== false) {
+                        this.aligned = newValue
+                    }
                 },
                 width: "80%",
                 value: this.aligned
             }
-        )
+        ) as {
+            setValue: (value: string) => void
+            disable: () => void
+            enable: () => void
+        }
 
         if (this.width == "100") {
             alignmentSelector.setValue("center")
@@ -216,43 +255,63 @@ export class TableConfigurationDialog {
             this.aligned = "center"
         }
 
-        dropdownSelect(this.dialog.dialogEl.querySelector(".table-width"), {
-            onChange: newValue => {
-                this.width = newValue
-                if (this.width == "100") {
-                    alignmentSelector.setValue("center")
-                    alignmentSelector.disable()
-                    this.aligned = "center"
-                } else {
-                    alignmentSelector.enable()
-                }
-            },
-            width: "80%",
-            value: this.width
-        })
+        dropdownSelect(
+            this.dialog.dialogEl.querySelector(".table-width") as HTMLSelectElement,
+            {
+                onChange: (newValue: string | false) => {
+                    if (newValue !== false) {
+                        this.width = newValue
+                        if (this.width == "100") {
+                            alignmentSelector.setValue("center")
+                            alignmentSelector.disable()
+                            this.aligned = "center"
+                        } else {
+                            alignmentSelector.enable()
+                        }
+                    }
+                },
+                width: "80%",
+                value: this.width
+            }
+        )
 
-        dropdownSelect(this.dialog.dialogEl.querySelector(".table-layout"), {
-            onChange: newValue => {
-                this.layout = newValue
-            },
-            width: "80%",
-            value: this.layout
-        })
+        dropdownSelect(
+            this.dialog.dialogEl.querySelector(".table-layout") as HTMLSelectElement,
+            {
+                onChange: (newValue: string | false) => {
+                    if (newValue !== false) {
+                        this.layout = newValue
+                    }
+                },
+                width: "80%",
+                value: this.layout
+            }
+        )
 
-        dropdownSelect(this.dialog.dialogEl.querySelector(".table-category"), {
-            onChange: newValue => {
-                this.category = newValue
-            },
-            width: "80%",
-            value: this.category
-        })
+        dropdownSelect(
+            this.dialog.dialogEl.querySelector(".table-category") as HTMLSelectElement,
+            {
+                onChange: (newValue: string | false) => {
+                    if (newValue !== false) {
+                        this.category = newValue
+                    }
+                },
+                width: "80%",
+                value: this.category
+            }
+        )
 
-        dropdownSelect(this.dialog.dialogEl.querySelector(".table-caption"), {
-            onChange: newValue => {
-                this.caption = newValue === "true"
-            },
-            width: "80%",
-            value: String(this.caption)
-        })
+        dropdownSelect(
+            this.dialog.dialogEl.querySelector(".table-caption") as HTMLSelectElement,
+            {
+                onChange: (newValue: string | false) => {
+                    if (newValue !== false) {
+                        this.caption = newValue === "true"
+                    }
+                },
+                width: "80%",
+                value: String(this.caption)
+            }
+        )
     }
 }

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

@@ -1,6 +1,25 @@
 import {CATS} from "@fiduswriter/document/schema/i18n"
 import {escapeText} from "fwtoolkit"
 
+interface InternalTarget {
+    id: string
+    text: string
+}
+
+interface AllowedContent {
+    cross_reference?: boolean
+    link?: boolean
+}
+
+interface LinkDialogOptions {
+    defaultLink: string
+    internalTargets: InternalTarget[]
+    linkType: string
+    title: string
+    target: string
+    allowedContent: AllowedContent
+}
+
 export const linkDialogTemplate = ({
     defaultLink,
     internalTargets,
@@ -8,7 +27,7 @@ export const linkDialogTemplate = ({
     title,
     target,
     allowedContent
-}) =>
+}: LinkDialogOptions): string =>
     `${
         allowedContent.cross_reference && internalTargets.length
             ? `<div class="fw-radio">
@@ -16,8 +35,8 @@ export const linkDialogTemplate = ({
             <label class="cross-reference-label">${gettext("Cross reference")}</label>
         </div>
         <div class="fw-select-container">
-            <select class="cross-reference-selector fw-button fw-light fw-large" required="">
-                <option class="fw-placeholder" selected="" disabled="" value="">
+            <select class="cross-reference-selector fw-button fw-light fw-large" required="/>
+                <option class="fw-placeholder" selected="" disabled="" value="/>
                     ${gettext("Select Target")}
                 </option>
                 ${internalTargets
@@ -39,8 +58,8 @@ export const linkDialogTemplate = ({
             <label class="link-internal-label">${gettext("Internal")}</label>
         </div>
         <div class="fw-select-container">
-            <select class="internal-link-selector fw-button fw-light fw-large" required="">
-                <option class="fw-placeholder" selected="" disabled="" value="">
+            <select class="internal-link-selector fw-button fw-light fw-large" required="/>
+                <option class="fw-placeholder" selected="" disabled="" value="/>
                     ${gettext("Select Target")}
                 </option>
                 ${internalTargets
@@ -69,12 +88,12 @@ export const linkDialogTemplate = ({
     }`
 
 /** Dialog to add a note to a revision before saving. */
-export const revisionDialogTemplate = ({dir}) =>
+export const revisionDialogTemplate = ({dir}: {dir: string}): string =>
     `<p>
         <input type="text" class="revision-note" placeholder="${gettext("Description (optional)")}" dir="${dir}">
     </p>`
 
-export const tableInsertTemplate = () => `
+export const tableInsertTemplate = (): string => `
     <table class="insert-table-selection">
         <tr>
             <td>&nbsp;</td>
@@ -127,7 +146,11 @@ export const tableInsertTemplate = () => `
         </tr>
     </table>`
 
-export const tableConfigurationTemplate = ({language}) =>
+export const tableConfigurationTemplate = ({
+    language
+}: {
+    language: string
+}): string =>
     `<table class="fw-dialog-table">
         <tbody>
             <tr>
@@ -181,18 +204,32 @@ export const tableConfigurationTemplate = ({language}) =>
         </tbody>
     </table>`
 
-export const orderedListStartTemplate = ({order}) =>
+export const orderedListStartTemplate = ({order}: {order: number}): string =>
     `<div title="${gettext("List start")}">
         <p><input class="list-start" type="number" name="list-start" min="1" value="${order}"></p>
     </div>`
 
-export const mathDialogTemplate = () =>
+export const mathDialogTemplate = (): string =>
     `<div class="math-field-outer">
         <div class="math-field" type="text" name="math" ></div>
     </div>`
 
-export const figureImageItemTemplate = ({id, cats, image, thumbnail, title}) =>
-    `<tr id="Image_${id}" class="${cats.map(cat => `cat_${escapeText(cat)} `)}" >
+interface FigureImageItem {
+    id: number | string
+    cats: string[]
+    image: string
+    thumbnail?: string
+    title: string
+}
+
+export const figureImageItemTemplate = ({
+    id,
+    cats,
+    image,
+    thumbnail,
+    title
+}: FigureImageItem): string =>
+    `<tr id="Image_${id}" class="${cats.map(cat => `cat_${escapeText(cat)} `).join("")}" >
          <td class="type" style="width:100px;">
             ${
                 thumbnail === undefined
@@ -211,8 +248,12 @@ export const figureImageItemTemplate = ({id, cats, image, thumbnail, title}) =>
         </td>
     </tr>`
 
+interface ImageDB {
+    [id: number]: FigureImageItem
+}
+
 /** A template to select images inside the figure configuration dialog in the editor. */
-export const figureImageTemplate = ({imageDB}) =>
+export const figureImageTemplate = ({imageDB}: {imageDB: ImageDB}): string =>
     `<div>
         <table id="imagelist" class="tablesorter fw-data-table" style="width:342px;">
             <thead class="fw-data-table-header">
@@ -222,7 +263,7 @@ export const figureImageTemplate = ({imageDB}) =>
                 </tr>
             </thead>
             <tbody class="fw-data-table-body fw-small">
-                ${Object.values(imageDB).map(image => figureImageItemTemplate(image))}
+                ${Object.values(imageDB).map(image => figureImageItemTemplate(image)).join("")}
             </tbody>
         </table>
         <div class="dialogSubmit">
@@ -240,7 +281,7 @@ export const figureImageTemplate = ({imageDB}) =>
     </div>`
 
 /** A template to configure the display of a figure in the editor. */
-export const configureFigureTemplate = ({language}) =>
+export const configureFigureTemplate = ({language}: {language: string}): string =>
     `<div class="fw-media-uploader">
             <input type="hidden" id="figure-category">
             <div class="figure-preview">
@@ -272,7 +313,7 @@ export const configureFigureTemplate = ({language}) =>
                                 ${Object.entries(CATS)
                                     .map(
                                         ([id, titleObject]) =>
-                                            `<option value="${id}">${titleObject[language]}</option>`
+                                            `<option value="${id}">${(titleObject as Record<string, string>)[language]}</option>`
                                     )
                                     .join("")}
                             </select>
@@ -292,7 +333,13 @@ export const configureFigureTemplate = ({language}) =>
         </div>`
 
 /** A template to configure citations in the editor */
-export const configureCitationTemplate = ({citedItemsHTML, citeFormat}) =>
+export const configureCitationTemplate = ({
+    citedItemsHTML,
+    citeFormat
+}: {
+    citedItemsHTML: string
+    citeFormat: string
+}): string =>
     `<div id="my-sources" class="fw-ar-container">
             <h3 class="fw-green-title">${gettext("My sources")}</h3>
         </div>
@@ -300,7 +347,7 @@ export const configureCitationTemplate = ({citedItemsHTML, citeFormat}) =>
         <div id="cited-items" class="fw-ar-container">
             <h3 class="fw-green-title">${gettext("Citation format")}</h3>
             <div class="fw-select-container">
-                <select id="citation-style-selector" class="fw-button fw-light fw-large" required="">
+                <select id="citation-style-selector" class="fw-button fw-light fw-large" required="/>
                     <option value="autocite" ${citeFormat === "autocite" ? "selected" : ""}>${gettext("(Author, 1998)")}</option>
                     <option value="textcite" ${citeFormat === "textcite" ? "selected" : ""}>${gettext("Author (1998)")}</option>
                 </select>
@@ -330,7 +377,15 @@ export const selectedCitationTemplate = ({
     db,
     prefix,
     locator
-}) =>
+}: {
+    title: string
+    author: string
+    year: string
+    id: number | string
+    db: string
+    prefix: string
+    locator: string
+}): string =>
     `<tr id="selected-source-${db}-${id}" class="selected-source">
         <td colspan="5" width="470">
           <table class="fw-cite-parts-table">
@@ -383,7 +438,26 @@ export const selectedCitationTemplate = ({
       </td>
     </tr>`
 
-export const contributorTemplate = ({contributor, idTypes = []}) => {
+interface Contributor {
+    firstname?: string
+    lastname?: string
+    email?: string
+    institution?: string
+    id_type?: string
+    id_value?: string
+}
+
+interface IdType {
+    label: string
+}
+
+export const contributorTemplate = ({
+    contributor,
+    idTypes = []
+}: {
+    contributor: Contributor
+    idTypes?: IdType[]
+}): string => {
     const showIdFields = idTypes && idTypes.length > 0
     let idTypeField = ""
     if (showIdFields) {
@@ -392,7 +466,7 @@ export const contributorTemplate = ({contributor, idTypes = []}) => {
             idTypeField = `<span class="id-type-label">${escapeText(type.label)}:</span><input type="hidden" name="id_type" value="${escapeText(type.label)}">`
         } else {
             idTypeField = `<select name="id_type">
-                <option value="">${gettext("Select ID Type")}</option>
+                <option value="/>${gettext("Select ID Type")}</option>
                 ${idTypes.map(t => `<option value="${escapeText(t.label)}" ${contributor.id_type === t.label ? "selected" : ""}>${escapeText(t.label)}</option>`).join("")}
             </select>`
         }
@@ -413,7 +487,13 @@ export const contributorTemplate = ({contributor, idTypes = []}) => {
     `
 }
 
-export const languageTemplate = ({currentLanguage, allowedLanguages}) =>
+export const languageTemplate = ({
+    currentLanguage,
+    allowedLanguages
+}: {
+    currentLanguage: string
+    allowedLanguages: [string, string, string][]
+}): string =>
     `<select class="fw-button fw-light fw-large">
         ${allowedLanguages
             .map(