@fiduswriter/editor 0.1.19 → 0.1.21

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

@@ -1,3 +1,5 @@
+import type {Node as ProseMirrorNode} from "prosemirror-model"
+import type {NodeSelection} from "prosemirror-state"
 import {
     Dialog,
     SelectionDataTable,
@@ -7,24 +9,56 @@ import {
     findTarget,
     setCheckableLabel
 } from "fwtoolkit"
-import {plugins} from "../plugins/citation_dialog/index.js"
-import {dateToYear, litToText, nameToText} from "@fiduswriter/bibliography-manager/tools"
 
-ensureCSS(staticUrl("css/checkable_list.css"))
+import type {Editor} from "../types.js"
+import {plugins as defaultCitationPlugins} from "../plugins/citation_dialog/index.js"
+import {
+    dateToYear,
+    litToText,
+    nameToText
+} from "@fiduswriter/bibliography-manager/tools"
+
 import {configureCitationTemplate, selectedCitationTemplate} from "./templates.js"
 
+ensureCSS(staticUrl("css/checkable_list.css"))
+
+interface CitationReference {
+    id: number
+    prefix?: string
+    locator?: string
+}
+
+interface CitationPlugin {
+    init?(): Promise<void> | void
+    [key: string]: any
+}
+
 export class CitationDialog {
-    constructor(editor) {
+    editor: Editor
+    initialReferences: CitationReference[]
+    initialFormat: string
+    node: ProseMirrorNode | null
+    dialog: InstanceType<typeof Dialog> | false
+    buttons: any[]
+    submitButtonText: string
+    plugins: Record<string, CitationPlugin> | undefined
+    selectionTable: any
+    table: any
+    lastSort: {column: number; dir: "asc" | "desc"}
+
+    constructor(editor: Editor) {
         this.editor = editor
         this.initialReferences = []
         this.initialFormat = "autocite"
-        this.node = this.editor.currentView.state.selection.node
+        this.node = (this.editor.currentView.state.selection as NodeSelection)
+            .node
         this.dialog = false
         this.buttons = []
         this.submitButtonText = gettext("Insert")
+        this.lastSort = {column: 0, dir: "asc"}
     }
 
-    init() {
+    init(): void {
         this.activatePlugins()
         if (this.node?.type && this.node?.type.name === "citation") {
             this.initialFormat = this.node.attrs.format
@@ -44,7 +78,7 @@ export class CitationDialog {
                     const transaction =
                         this.editor.currentView.state.tr.deleteSelection()
                     this.editor.currentView.dispatch(transaction)
-                    this.dialog.close()
+                    ;(this.dialog as InstanceType<typeof Dialog>).close()
                 },
                 classes: "fw-orange"
             })
@@ -55,7 +89,7 @@ export class CitationDialog {
             text: this.submitButtonText,
             click: () => {
                 if (this.dialogSubmit()) {
-                    this.dialog.close()
+                    ;(this.dialog as InstanceType<typeof Dialog>).close()
                 }
             },
             classes: "fw-dark insert-citation"
@@ -79,59 +113,63 @@ export class CitationDialog {
         this.bind()
     }
 
-    activatePlugins() {
+    activatePlugins(): Promise<void> {
         if (this.plugins) {
             // Plugins have been activated already
-            return
+            return Promise.resolve()
         }
-        // Add plugins.
+        // Add plugins. Prefer plugins injected by the host app; fall back to
+        // the default plugin list bundled with the editor package.
+        const pluginList =
+            (this.editor.citationDialogPlugins as any[]) || defaultCitationPlugins
         this.plugins = {}
 
         return Promise.all(
-            plugins.map(([app, plugin]) => {
+            pluginList.map(([app, plugin]: [string, Record<string, any>]) => {
                 if (!this.editor.app.settings.APPS.includes(app)) {
                     return Promise.resolve()
                 }
                 return Promise.all(
                     Object.values(plugin).map(pluginExport => {
                         if (typeof pluginExport === "function") {
-                            this.plugins[pluginExport.name] = new pluginExport(
-                                this
-                            )
+                            ;(this.plugins as Record<string, CitationPlugin>)[
+                                pluginExport.name
+                            ] = new pluginExport(this)
                             return (
-                                this.plugins[pluginExport.name].init() ||
-                                Promise.resolve()
+                                (
+                                    this.plugins as Record<string, CitationPlugin>
+                                )[pluginExport.name].init!() || Promise.resolve()
                             )
                         }
                         return Promise.resolve()
                     })
                 )
             })
-        )
+        ).then(() => undefined)
     }
 
-    createAllTableRows() {
-        const data = []
+    createAllTableRows(): (string | number)[][] {
+        const data: (string | number)[][] = []
         // unify bibs from both document and user
-        Object.keys(this.editor.mod.db.bibDB.db).forEach(id => {
+        Object.keys((this.editor.mod.db as any).bibDB.db).forEach(id => {
             data.push(
                 this.createTableRow(
-                    this.editor.mod.db.bibDB.db[id],
-                    id,
+                    (this.editor.mod.db as any).bibDB.db[id],
+                    Number.parseInt(id),
                     "document"
                 )
             )
         })
-        Object.keys(this.editor.app.bibDB.db).forEach(id => {
-            const bib = this.editor.app.bibDB.db[id]
-            if (!this.editor.mod.db.bibDB.hasReference(bib)) {
-                data.push(this.createTableRow(bib, id, "user"))
+        Object.keys((this.editor.app as any).bibDB.db).forEach(id => {
+            const bib = (this.editor.app as any).bibDB.db[id]
+            if (!(this.editor.mod.db as any).bibDB.hasReference(bib)) {
+                data.push(this.createTableRow(bib, Number.parseInt(id), "user"))
             }
         })
         return data
     }
 
-    createTableRow(bib, id, db) {
+    createTableRow(bib: any, id: number, db: string): (string | number)[] {
         const bibauthors = bib.fields.author || bib.fields.editor
         return [
             `${db}-${id}`,
@@ -144,17 +182,17 @@ export class CitationDialog {
         ]
     }
 
-    citationDialogHTML() {
+    citationDialogHTML(): string {
         // Assemble the HTML of the 'cited' column of the dialog,
         // and return the templated dialog HTML.
         const citedItemsHTML = this.initialReferences
             .map(citEntry => {
                 const id = citEntry.id
-                if (!this.editor.mod.db.bibDB.db[id]) {
+                if (!(this.editor.mod.db as any).bibDB.db[id]) {
                     return ""
                 }
                 const bibEntry = this.bibDBToBibEntry(
-                    this.editor.mod.db.bibDB.db[id],
+                    (this.editor.mod.db as any).bibDB.db[id],
                     id,
                     "document"
                 )
@@ -170,17 +208,30 @@ export class CitationDialog {
         })
     }
 
-    registerNewSource() {
+    registerNewSource(): void {
         import("@fiduswriter/bibliography-manager/form").then(({BibEntryForm}) => {
-            const form = new BibEntryForm(this.editor.mod.db.bibDB)
-            form.init().then(idTranslations => {
+            const form = new BibEntryForm((this.editor.mod.db as any).bibDB)
+            form.init().then((idTranslations: [number, number][]) => {
                 const ids = idTranslations.map(idTrans => idTrans[1])
                 this.addToCitableItems(ids)
             })
         })
     }
 
-    bibDBToBibEntry(bib, id, db) {
+    bibDBToBibEntry(
+        bib: any,
+        id: number | string,
+        db: string
+    ): {
+        id: number | string
+        db: string
+        bib_type: string
+        title: string
+        author: string
+        year: string
+        prefix: string
+        locator: string
+    } {
         const bibauthors = bib.fields.author || bib.fields.editor
         return {
             id,
@@ -190,24 +241,26 @@ export class CitationDialog {
                 ? litToText(bib.fields.title)
                 : gettext("Untitled"),
             author: bibauthors ? nameToText(bibauthors) : "",
-            year: bib.fields.date ? dateToYear(bib.fields.date) : ""
+            year: bib.fields.date ? dateToYear(bib.fields.date) : "",
+            prefix: "",
+            locator: ""
         }
     }
 
     // Update the citation dialog with new items in 'citable' column.
     // Not when dialog is first opened.
-    addToCitableItems(ids) {
-        const data = []
+    addToCitableItems(ids: number[]): void {
+        const data: (string | number)[][] = []
         ids.forEach(id => {
             const citeItemData = this.bibDBToBibEntry(
-                this.editor.mod.db.bibDB.db[id],
+                (this.editor.mod.db as any).bibDB.db[id],
                 id,
                 "document"
             )
             this.addToCitedItems([citeItemData])
             data.push(
                 this.createTableRow(
-                    this.editor.mod.db.bibDB.db[id],
+                    (this.editor.mod.db as any).bibDB.db[id],
                     id,
                     "document"
                 )
@@ -220,15 +273,23 @@ export class CitationDialog {
 
     // Update the citation dialog with new items in 'cited' column.
     // Not when dialog is first opened.
-    addToCitedItems(items) {
+    addToCitedItems(
+        items: Array<{
+            id: number | string
+            db: string
+            title: string
+            author: string
+            year: string
+        }>
+    ): void {
         const len = items.length
         for (let i = 0; i < len; i++) {
             const item = items[i]
-            this.dialog.dialogEl
+            ;(this.dialog as InstanceType<typeof Dialog>).dialogEl
                 .querySelector(
                     "#selected-cite-source-table .fw-data-table-body"
                 )
-                .insertAdjacentHTML(
+                ?.insertAdjacentHTML(
                     "beforeend",
                     selectedCitationTemplate({
                         id: item.id,
@@ -243,8 +304,13 @@ export class CitationDialog {
         }
     }
 
-    initTable() {
-        const host = this.dialog.dialogEl.querySelector("#my-sources")
+    initTable(): void {
+        const host = (this.dialog as InstanceType<typeof Dialog>).dialogEl.querySelector(
+            "#my-sources"
+        ) as HTMLElement | null
+        if (!host) {
+            return
+        }
         host.innerHTML = ""
 
         this.selectionTable = new SelectionDataTable({
@@ -270,27 +336,33 @@ export class CitationDialog {
             scrollY: "225px",
             labels: {
                 noRows: gettext("No sources registered"),
-                noResults: gettext("No sources found"), // Message shown when there are no search results
-                placeholder: gettext("Search...") // placeholder for search field
+                noResults: gettext("No results found"),
+                placeholder: gettext("Search...")
             }
         })
         this.selectionTable.init()
         this.table = this.selectionTable.table
 
-        this.table.on("datatable.sort", (column, dir) => {
+        this.table.on("datatable.sort", (column: number, dir: "asc" | "desc") => {
             this.lastSort = {column, dir}
         })
         this.table.columns.sort(0, "asc")
     }
 
-    bind() {
-        this.dialog.dialogEl
+    bind(): void {
+        ;(this.dialog as InstanceType<typeof Dialog>).dialogEl
             .querySelector("#add-cite-source")
-            .addEventListener("click", () => {
+            ?.addEventListener("click", () => {
                 const selectedIds = this.selectionTable.getSelected()
-                const selectedItems = []
+                const selectedItems: Array<{
+                    id: number
+                    db: string
+                    title: string
+                    author: string
+                    year: string
+                }> = []
 
-                this.table.data.data.forEach(row => {
+                this.table.data.data.forEach((row: any) => {
                     const cell = row.cells[0]
                     const rowId = cell.text ?? cell.data
                     if (!selectedIds.includes(rowId)) {
@@ -298,11 +370,11 @@ export class CitationDialog {
                     }
                     const [db, id] = String(rowId)
                         .split("-")
-                        .map(
-                            (val, index) => (index ? Number.parseInt(val) : val) // only parseInt id (where index > 0)
-                        )
+                        .map((val, index) =>
+                            index ? Number.parseInt(val) : val
+                        ) as [string, number]
                     if (
-                        this.dialog.dialogEl.querySelector(
+                        (this.dialog as InstanceType<typeof Dialog>).dialogEl.querySelector(
                             `#selected-source-${db}-${id}`
                         )
                     ) {
@@ -320,73 +392,83 @@ export class CitationDialog {
                 this.selectionTable.deselectAll()
             })
 
-        this.dialog.dialogEl.addEventListener("click", event => {
-            const el = {}
-            let documentEl
-            switch (true) {
-                case findTarget(event, ".selected-source .delete", el):
-                    documentEl = this.dialog.dialogEl.querySelector(
-                        `#selected-source-${el.target.dataset.db}-${el.target.dataset.id}`
-                    )
-                    if (documentEl) {
-                        documentEl.parentElement.removeChild(documentEl)
-                    }
-                    break
-                case findTarget(event, ".selected-source .order-up", el):
-                    documentEl = this.dialog.dialogEl.querySelector(
-                        `#selected-source-${el.target.dataset.db}-${el.target.dataset.id}`
-                    )
-                    if (documentEl && documentEl.previousElementSibling) {
-                        documentEl.parentElement.insertBefore(
-                            documentEl,
-                            documentEl.previousElementSibling
+        ;(this.dialog as InstanceType<typeof Dialog>).dialogEl.addEventListener(
+            "click",
+            event => {
+                const el: {target?: HTMLElement} = {}
+                let documentEl
+                switch (true) {
+                    case findTarget(event, ".selected-source .delete", el):
+                        documentEl = (this.dialog as InstanceType<typeof Dialog>).dialogEl.querySelector(
+                            `#selected-source-${(el.target as HTMLElement).dataset.db}-${(el.target as HTMLElement).dataset.id}`
                         )
-                    }
-                    break
-                case findTarget(event, ".selected-source .order-down", el):
-                    documentEl = this.dialog.dialogEl.querySelector(
-                        `#selected-source-${el.target.dataset.db}-${el.target.dataset.id}`
-                    )
-                    if (documentEl && documentEl.nextElementSibling) {
-                        documentEl.parentElement.insertBefore(
-                            documentEl,
-                            documentEl.nextElementSibling.nextElementSibling
+                        if (documentEl) {
+                            documentEl.parentElement?.removeChild(documentEl)
+                        }
+                        break
+                    case findTarget(event, ".selected-source .order-up", el):
+                        documentEl = (this.dialog as InstanceType<typeof Dialog>).dialogEl.querySelector(
+                            `#selected-source-${(el.target as HTMLElement).dataset.db}-${(el.target as HTMLElement).dataset.id}`
                         )
-                    }
-                    break
-                case findTarget(event, ".fw-checkable", el):
-                    setCheckableLabel(el.target)
-                    break
-                default:
-                    break
+                        if (
+                            documentEl &&
+                            documentEl.previousElementSibling
+                        ) {
+                            documentEl.parentElement?.insertBefore(
+                                documentEl,
+                                documentEl.previousElementSibling
+                            )
+                        }
+                        break
+                    case findTarget(event, ".selected-source .order-down", el):
+                        documentEl = (this.dialog as InstanceType<typeof Dialog>).dialogEl.querySelector(
+                            `#selected-source-${(el.target as HTMLElement).dataset.db}-${(el.target as HTMLElement).dataset.id}`
+                        )
+                        if (documentEl && documentEl.nextElementSibling) {
+                            documentEl.parentElement?.insertBefore(
+                                documentEl,
+                                documentEl.nextElementSibling.nextElementSibling
+                            )
+                        }
+                        break
+                    case findTarget(event, ".fw-checkable", el):
+                        setCheckableLabel(el.target as HTMLElement)
+                        break
+                    default:
+                        break
+                }
             }
-        })
+        )
     }
 
-    dialogSubmit() {
+    dialogSubmit(): boolean {
         const citeItems = Array.from(
-                this.dialog.dialogEl.querySelectorAll(
+                (this.dialog as InstanceType<typeof Dialog>).dialogEl.querySelectorAll(
                     "#selected-cite-source-table .fw-cite-parts-table"
                 )
             ),
             references = citeItems.map(bibRef => {
-                const deleteButton = bibRef.querySelector(".delete"),
-                    db = deleteButton.dataset.db
-                let id = Number.parseInt(deleteButton.dataset.id)
+                const deleteButton = bibRef.querySelector(".delete") as HTMLElement
+                const db = deleteButton.dataset.db as string
+                let id = Number.parseInt(deleteButton.dataset.id as string)
                 if (db === "user") {
                     // entry is from user's bibDB. We need to import it into the
                     // document's bibDB.
-                    const bib = this.editor.app.bibDB.db[id]
-                    id = this.editor.mod.db.bibDB.addReference(bib, id)
+                    const bib = (this.editor.app as any).bibDB.db[id]
+                    id = (this.editor.mod.db as any).bibDB.addReference(bib, id)
                 }
-                const returnObj = {
+                const returnObj: CitationReference = {
                     id
                 }
-                const prefix = bibRef.querySelector(".fw-cite-text").value
+                const prefix = (
+                    bibRef.querySelector(".fw-cite-text") as HTMLInputElement
+                ).value
                 if (prefix.length) {
                     returnObj["prefix"] = prefix
                 }
-                const locator = bibRef.querySelector(".fw-cite-page").value
+                const locator = (
+                    bibRef.querySelector(".fw-cite-page") as HTMLInputElement
+                ).value
                 if (locator.length) {
                     returnObj["locator"] = locator
                 }
@@ -401,8 +483,10 @@ export class CitationDialog {
             return false
         }
 
-        const format = this.dialog.dialogEl.querySelector(
-            "#citation-style-selector"
+        const format = (
+            (this.dialog as InstanceType<typeof Dialog>).dialogEl.querySelector(
+                "#citation-style-selector"
+            ) as HTMLSelectElement
         ).value
 
         if (