@fiduswriter/editor 0.1.20 → 0.1.21

package/src/navigator/{index.js → index.ts}

@@ -1,52 +1,77 @@
+import type {Node as ProseMirrorNode} from "prosemirror-model"
 import {escapeText, findTarget} from "fwtoolkit"
+
+import type {Editor} from "../types.js"
+
+interface NavigatorFilterItem {
+    level: number
+    title: string
+}
+
+interface NavigatorItem {
+    id: string
+    textContent: string
+    type: {name: string}
+    class?: string
+}
+
 export class ModNavigator {
-    constructor(editor) {
+    editor: Editor
+    navigatorEl: HTMLElement | null
+    listeners: Record<string, any>
+    navigatorFilters: NavigatorFilterItem[]
+    defaultFilters: string[]
+    lastSelectedTarget: string | null
+
+    constructor(editor: Editor) {
         editor.mod.navigator = this
         this.editor = editor
         this.navigatorEl = document.querySelector("#navigator")
         this.listeners = {}
-        this.navigatorFilters = editor.menu.navigatorFilterModel.content
+        this.navigatorFilters = (editor.menu as any).navigatorFilterModel.content
         this.defaultFilters = ["heading1", "heading2", "heading3"]
 
         this.lastSelectedTarget = null
     }
 
-    init() {
+    init(): void {
         this.render()
         this.bindEvents()
     }
 
-    render() {
-        this.navigatorEl.innerHTML = this.getNavigatorTemplate()
+    render(): void {
+        if (this.navigatorEl) {
+            this.navigatorEl.innerHTML = this.getNavigatorTemplate()
+        }
     }
 
-    bindEvents() {
+    bindEvents(): void {
         document.body.addEventListener("click", event => {
-            const el = {}
+            const el: {target?: HTMLElement} = {}
             switch (true) {
                 case findTarget(event, "#navigator-button", el):
-                    if (this.navigatorEl.classList.contains("opened")) {
+                    if (this.navigatorEl?.classList.contains("opened")) {
                         this.closeNavigator()
                     } else {
                         const navigatorListEl =
                             document.getElementById("navigator-list")
                         if (navigatorListEl) {
                             navigatorListEl.innerHTML =
-                                this.populateNavigator() || "" //Populating the list
+                                this.populateNavigator() || ""
                         }
                         this.openNavigator()
-                        const activeHeading = this.navigatorEl.querySelector(
+                        const activeHeading = this.navigatorEl?.querySelector(
                             "#navigator-list .active-heading a"
                         )
                         if (activeHeading) {
-                            activeHeading.focus()
+                            ;(activeHeading as HTMLElement).focus()
                         } else {
                             const firstFocusable =
-                                this.navigatorEl.querySelector(
+                                this.navigatorEl?.querySelector(
                                     "#navigator-list [href]"
                                 )
                             if (firstFocusable) {
-                                firstFocusable.focus()
+                                ;(firstFocusable as HTMLElement).focus()
                             }
                         }
                     }
@@ -54,22 +79,26 @@ export class ModNavigator {
                 case findTarget(event, "#navigator-list a", el): {
                     event.preventDefault()
                     event.stopImmediatePropagation()
-                    const target = el.target.getAttribute("href").slice(1)
+                    const target = (el.target as HTMLElement)
+                        .getAttribute("href")
+                        ?.slice(1)
 
                     if (target == "title") {
                         this.editor.scrollPosIntoView(1, this.editor.view)
                         this.lastSelectedTarget = "title"
                     } else if (target == "bibliography") {
                         this.editor.scrollBibliographyIntoView(target)
-                    } else {
+                    } else if (target) {
                         // Store the selected target ID for later focus
                         this.lastSelectedTarget = target
                         this.editor.scrollIdIntoView(target)
-                        this.switchActiveHeading(el.target.parentNode)
+                        this.switchActiveHeading(
+                            (el.target as HTMLElement).parentNode as HTMLElement
+                        )
                     }
 
                     // Keep focus on the navigation menu item
-                    el.target.focus()
+                    ;(el.target as HTMLElement).focus()
                     break
                 }
                 case findTarget(event, "#navigator-filter-icon", el): {
@@ -87,7 +116,7 @@ export class ModNavigator {
                     document
                         .querySelectorAll("#navigator-filter input")
                         .forEach(item => {
-                            if (item.checked) {
+                            if ((item as HTMLInputElement).checked) {
                                 this.defaultFilters.push(item.id)
                             }
                         })
@@ -112,19 +141,19 @@ export class ModNavigator {
 
         document.body
             .querySelector("#navigator-list")
-            .addEventListener("mouseover", () => {
+            ?.addEventListener("mouseover", () => {
                 document.body.classList.add("no-scroll")
             })
         document.body
             .querySelector("#navigator-list")
-            .addEventListener("mouseout", () => {
+            ?.addEventListener("mouseout", () => {
                 document.body.classList.remove("no-scroll")
             })
         document.body.addEventListener("keydown", event => {
             // Alt+n shortcut to toggle navigator
             if (event.altKey && event.key.toLowerCase() === "n") {
                 event.preventDefault()
-                if (this.navigatorEl.classList.contains("opened")) {
+                if (this.navigatorEl?.classList.contains("opened")) {
                     this.closeNavigator()
                 } else {
                     const navigatorListEl =
@@ -134,17 +163,18 @@ export class ModNavigator {
                             this.populateNavigator() || ""
                     }
                     this.openNavigator()
-                    const activeHeading = this.navigatorEl.querySelector(
+                    const activeHeading = this.navigatorEl?.querySelector(
                         "#navigator-list .active-heading a"
                     )
                     if (activeHeading) {
-                        activeHeading.focus()
+                        ;(activeHeading as HTMLElement).focus()
                     } else {
-                        const firstFocusable = this.navigatorEl.querySelector(
-                            "#navigator-list [href]"
-                        )
+                        const firstFocusable =
+                            this.navigatorEl?.querySelector(
+                                "#navigator-list [href]"
+                            )
                         if (firstFocusable) {
-                            firstFocusable.focus()
+                            ;(firstFocusable as HTMLElement).focus()
                         }
                     }
                 }
@@ -169,7 +199,7 @@ export class ModNavigator {
                 event.stopImmediatePropagation()
                 const activeElement = document.activeElement
                 if (activeElement && activeElement.tagName === "A") {
-                    activeElement.click()
+                    ;(activeElement as HTMLElement).click()
                 }
             }
 
@@ -179,9 +209,10 @@ export class ModNavigator {
                     'button, [href], input, [tabindex="0"]'
                 )
                 if (focusableElements.length > 0) {
-                    const firstElement = focusableElements[0]
-                    const lastElement =
-                        focusableElements[focusableElements.length - 1]
+                    const firstElement = focusableElements[0] as HTMLElement
+                    const lastElement = focusableElements[
+                        focusableElements.length - 1
+                    ] as HTMLElement
 
                     if (
                         event.shiftKey &&
@@ -204,6 +235,7 @@ export class ModNavigator {
 
             // Arrow key navigation within the list
             if (
+                navigatorListEl &&
                 !navigatorListEl.classList.contains("fw-hide") &&
                 (event.key === "ArrowDown" || event.key === "ArrowUp")
             ) {
@@ -221,7 +253,7 @@ export class ModNavigator {
                     }
                 })
 
-                let newIndex
+                let newIndex: number
                 if (event.key === "ArrowDown") {
                     newIndex =
                         currentIndex < links.length - 1 ? currentIndex + 1 : 0
@@ -231,7 +263,7 @@ export class ModNavigator {
                         currentIndex > 0 ? currentIndex - 1 : links.length - 1
                 }
 
-                links[newIndex].focus()
+                ;(links[newIndex] as HTMLElement).focus()
                 return
             }
 
@@ -240,6 +272,7 @@ export class ModNavigator {
 
             // Arrow key navigation within the filter menu
             if (
+                navigatorFilterEl &&
                 !navigatorFilterEl.classList.contains("fw-hide") &&
                 (event.key === "ArrowDown" || event.key === "ArrowUp")
             ) {
@@ -259,7 +292,7 @@ export class ModNavigator {
                     }
                 })
 
-                let newIndex
+                let newIndex: number
                 if (event.key === "ArrowDown") {
                     newIndex =
                         currentIndex < checkboxes.length - 1
@@ -273,13 +306,13 @@ export class ModNavigator {
                             : checkboxes.length - 1
                 }
 
-                checkboxes[newIndex].focus()
+                ;(checkboxes[newIndex] as HTMLElement).focus()
                 return
             }
         })
     }
 
-    switchActiveHeading(new_heading) {
+    switchActiveHeading(new_heading: HTMLElement): void {
         Array.prototype.forEach.call(
             document.querySelectorAll("#navigator-list .active-heading"),
             active_heading => active_heading.classList.remove("active-heading")
@@ -287,7 +320,7 @@ export class ModNavigator {
         new_heading.classList.add("active-heading")
     }
 
-    openNavigator() {
+    openNavigator(): void {
         const navigatorEl = document.getElementById("navigator")
         const navigatorButtonEl = document.getElementById("navigator-button")
         const navigatorFilterEl = document.getElementById("navigator-filter")
@@ -312,11 +345,11 @@ export class ModNavigator {
         navigatorListEl.classList.remove("fw-hide")
         navigatorFilterBackEl.classList.add("fw-hide")
         navigatorFilterIconEl.classList.remove("fw-hide")
-        navigatorButtonEl.setAttribute("aria-expanded", "true")
+        navigatorButtonEl?.setAttribute("aria-expanded", "true")
         this.scrollToActiveHeading()
     }
 
-    scrollToActiveHeading() {
+    scrollToActiveHeading(): void {
         const listEl = document.getElementById("navigator-list")
         const activeHeading = listEl?.querySelector(".active-heading")
         if (activeHeading) {
@@ -324,12 +357,12 @@ export class ModNavigator {
         }
     }
 
-    closeNavigator() {
+    closeNavigator(): void {
         const navigatorEl = document.getElementById("navigator")
         const navigatorButtonEl = document.getElementById("navigator-button")
         if (navigatorEl) {
             navigatorEl.classList.remove("opened")
-            navigatorButtonEl.setAttribute("aria-expanded", "false")
+            navigatorButtonEl?.setAttribute("aria-expanded", "false")
         }
 
         if (this.lastSelectedTarget) {
@@ -343,15 +376,15 @@ export class ModNavigator {
                 const selection = window.getSelection()
                 range.selectNodeContents(target)
                 range.collapse()
-                selection.removeAllRanges()
-                selection.addRange(range)
-                target.focus()
+                selection?.removeAllRanges()
+                selection?.addRange(range)
+                ;(target as HTMLElement).focus()
             }
             this.lastSelectedTarget = null
         }
     }
 
-    showFilters() {
+    showFilters(): void {
         const navigatorFilterEl = document.getElementById("navigator-filter")
         const navigatorListEl = document.getElementById("navigator-list")
         const navigatorFilterBackEl = document.getElementById(
@@ -376,7 +409,7 @@ export class ModNavigator {
         navigatorFilterEl.innerHTML = this.populateNavFilter()
     }
 
-    hideFilters() {
+    hideFilters(): void {
         const navigatorFilterEl = document.getElementById("navigator-filter")
         const navigatorListEl = document.getElementById("navigator-list")
         const navigatorFilterBackEl = document.getElementById(
@@ -401,19 +434,19 @@ export class ModNavigator {
         this.scrollToActiveHeading()
     }
 
-    populateNavigator() {
+    populateNavigator(): string | false {
         const currentPos = this.editor.view.state.selection.$head.pos
         const title =
-            document.body.querySelector("div.doc-title")?.innerText ||
+            document.body.querySelector("div.doc-title")?.textContent ||
             gettext("Untitled Document")
-        const items = [
+        const items: NavigatorItem[] = [
             {
                 id: "title",
                 textContent: title,
                 type: {name: "h1"}
             }
         ]
-        let nearestHeader = ""
+        let nearestHeader: ProseMirrorNode | "" = ""
         this.editor.view.state.doc.descendants((node, pos) => {
             if (node.attrs?.hidden) {
                 return false
@@ -439,12 +472,13 @@ export class ModNavigator {
                     type: node.type
                 })
             }
+            return undefined
         })
         const bibHeader = document.querySelector("h1.doc-bibliography-header")
         if (bibHeader) {
             items.push({
                 id: "bibliography",
-                textContent: bibHeader.innerText,
+                textContent: bibHeader.textContent || "",
                 type: {name: "h1"}
             })
         }
@@ -455,7 +489,7 @@ export class ModNavigator {
         }
     }
 
-    populateNavFilter() {
+    populateNavFilter(): string {
         return this.navigatorFilters
             .map(item => {
                 const level = item.level
@@ -468,7 +502,7 @@ export class ModNavigator {
             .join("")
     }
 
-    inDefault(level) {
+    inDefault(level: number): string {
         if (this.defaultFilters.includes("heading" + level)) {
             return "checked"
         } else {
@@ -476,7 +510,7 @@ export class ModNavigator {
         }
     }
 
-    navigatorHTML(items) {
+    navigatorHTML(items: NavigatorItem[]): string {
         return `
             ${items
                 .map(item => {
@@ -487,7 +521,7 @@ export class ModNavigator {
                 .join("")}`
     }
 
-    getNavigatorTemplate() {
+    getNavigatorTemplate(): string {
         return `
             <div id="navigator-content" role="dialog" aria-labelledby="navigator-header">
                 <div class="header-container">
@@ -507,7 +541,7 @@ export class ModNavigator {
             <button id="navigator-button"
                 aria-expanded="false"
                 aria-label="${gettext("Toggle document navigator")}"
-                title="${gettext("Document N\u0332avigator")}">
+                title="${gettext("Document N̲avigator")}">
                 <span class="navigator-arrow-icon"><i class="fa-solid fa-scroll"></i></span>
             </button>
             `

package/src/no_collab_save/{index.js → index.ts}

@@ -1,14 +1,21 @@
 import {addAlert, postJson} from "fwtoolkit"
 import {receiveTransaction} from "prosemirror-collab"
-import {Transform} from "prosemirror-transform"
 import {recreateTransform} from "../collab/merge/recreate_transform.js"
+import type {Editor} from "../types.js"
+import type {Node} from "prosemirror-model"
 
 /**
  * Handles periodic saving and conflict resolution for the editor
  when EDITOR_SAVE_MODE is "direct" (no WebSocket).
  */
 export class NoCollabSave {
-    constructor(editor) {
+    editor: Editor
+    saveInterval: ReturnType<typeof setInterval> | null
+    savePromise: Promise<void> | null
+    _beforeUnloadHandler: (() => void) | null
+    _lastSaveTime: number
+
+    constructor(editor: Editor) {
         this.editor = editor
         this.saveInterval = null
         this.savePromise = null
@@ -16,7 +23,7 @@ export class NoCollabSave {
         this._lastSaveTime = 0
     }
 
-    start() {
+    start(): void {
         if (this.saveInterval) {
             return
         }
@@ -48,7 +55,7 @@ export class NoCollabSave {
         }
     }
 
-    stop() {
+    stop(): void {
         if (this.saveInterval) {
             window.clearInterval(this.saveInterval)
             this.saveInterval = null
@@ -63,7 +70,7 @@ export class NoCollabSave {
         }
     }
 
-    async save() {
+    async save(): Promise<void> {
         if (this.savePromise) {
             return this.savePromise
         }
@@ -75,23 +82,23 @@ export class NoCollabSave {
         }
     }
 
-    _hasUnsavedChanges() {
-        return this.editor.docInfo.updated.getTime() > this._lastSaveTime
+    _hasUnsavedChanges(): boolean {
+        return (this.editor.docInfo.updated as Date).getTime() > this._lastSaveTime
     }
 
-    async _save(keepalive = false) {
+    async _save(keepalive = false): Promise<void> {
         if (this.editor.docInfo.access_rights !== "write") {
             return
         }
         const doc = this.editor.getDoc({use_current_view: true})
-        let payload = {
+        let payload: Record<string, unknown> = {
             id: this.editor.docInfo.id,
             content: doc.content,
-            comments: this.editor.mod.comments.store.comments,
-            bibliography: this.editor.mod.db.bibDB.db,
+            comments: this.editor.mod.comments,
+            bibliography: this.editor.mod.db?.bibDB.db,
             title: doc.title,
             version: this.editor.docInfo.version,
-            image_updates: this.editor.mod.db.imageDB.unsentEvents()
+            image_updates: this.editor.mod.db?.imageDB.unsentEvents()
         }
 
         if (
@@ -100,7 +107,9 @@ export class NoCollabSave {
             this.editor.e2ee.snapshotManager
         ) {
             const snapshot =
-                await this.editor.e2ee.snapshotManager.getEncryptedSnapshot()
+                await (this.editor.e2ee.snapshotManager as {
+                    getEncryptedSnapshot: () => Promise<Record<string, unknown>>
+                }).getEncryptedSnapshot()
             if (snapshot) {
                 payload = {
                     id: this.editor.docInfo.id,
@@ -117,12 +126,12 @@ export class NoCollabSave {
         }
 
         try {
-            const {json, status} = await postJson(
+            const {json, status} = (await postJson(
                 "/api/document/save/",
                 payload,
                 {},
                 {keepalive}
-            )
+            )) as {json: Record<string, unknown>; status: number}
             if (status === 409) {
                 if (!keepalive) {
                     await this._handleVersionConflict()
@@ -130,15 +139,17 @@ export class NoCollabSave {
                 return
             }
             if (json.version !== undefined) {
-                this.editor.docInfo.version = json.version
+                this.editor.docInfo.version = json.version as number
             }
             this.editor.docInfo.updated = new Date()
             this.editor.docInfo.confirmedDoc = this.editor.view.state.doc
             this._lastSaveTime = Date.now()
             // Clear unsent event queues since the full state has been saved.
-            this.editor.mod.db.bibDB.unsent = []
-            this.editor.mod.db.imageDB.unsent = []
-            this.editor.mod.comments.store.unsent = []
+            if (this.editor.mod.db) {
+                this.editor.mod.db.bibDB.unsent = []
+                this.editor.mod.db.imageDB.unsent = []
+            }
+            ;(this.editor.mod.comments as any).store.unsent = []
         } catch (error) {
             if (!keepalive) {
                 console.error("Failed to save document:", error)
@@ -147,27 +158,32 @@ export class NoCollabSave {
         }
     }
 
-    async _handleVersionConflict() {
+    async _handleVersionConflict(): Promise<void> {
         if (this.editor.docInfo.access_rights !== "write") {
             return
         }
-        const payload = {id: this.editor.docInfo.id}
+        const payload: Record<string, unknown> = {id: this.editor.docInfo.id}
         if (this.editor.docInfo.token) {
             payload.token = this.editor.docInfo.token
         }
         try {
-            const {json} = await postJson(
+            const {json} = (await postJson(
                 "/api/document/get_doc_data/",
                 payload
+            )) as {json: Record<string, unknown>}
+            const serverDoc = this.editor.schema.nodeFromJSON(
+                (json.doc as Record<string, unknown>).content as Record<
+                    string,
+                    unknown
+                >
             )
-            const serverDoc = this.editor.schema.nodeFromJSON(json.doc.content)
             const currentDoc = this.editor.view.state.doc
-            const confirmedDoc = this.editor.docInfo.confirmedDoc
+            const confirmedDoc = this.editor.docInfo.confirmedDoc as Node
 
             const remoteTr = recreateTransform(confirmedDoc, serverDoc)
             const localTr = recreateTransform(confirmedDoc, currentDoc)
 
-            const mappedSteps = []
+            const mappedSteps: Array<import("prosemirror-transform").Step> = []
             remoteTr.steps.forEach(step => {
                 const mapped = step.map(localTr.mapping)
                 if (mapped) {
@@ -186,13 +202,20 @@ export class NoCollabSave {
             }
 
             // Update metadata from server
-            this.editor.mod.db.bibDB.setDB(json.doc.bibliography)
-            this.editor.mod.db.imageDB.setDB(json.doc.images)
-            this.editor.mod.comments.store.loadComments(json.doc.comments)
-            this.editor.docInfo.version = json.doc.v
+            ;(this.editor.mod.db?.bibDB as {setDB(value: unknown): void}).setDB(
+                (json.doc as Record<string, unknown>).bibliography
+            )
+            ;(this.editor.mod.db?.imageDB as {setDB(value: unknown): void}).setDB(
+                (json.doc as Record<string, unknown>).images
+            )
+            ;(this.editor.mod.comments as any).store.loadComments(
+                (json.doc as Record<string, unknown>).comments
+            )
+            this.editor.docInfo.version = (json.doc as Record<string, unknown>)
+                .v as number
             this.editor.docInfo.confirmedDoc = this.editor.view.state.doc
-            this.editor.docInfo.updated = new Date(json.time)
-            this.editor.mod.footnotes.fnEditor.renderAllFootnotes()
+            this.editor.docInfo.updated = new Date(json.time as string)
+            ;(this.editor.mod.footnotes as any).fnEditor.renderAllFootnotes()
 
             // Retry save with the merged document
             await this.save()

package/src/state_plugins/{access_rights.js → access_rights.ts}

@@ -1,12 +1,15 @@
 import {Plugin, PluginKey} from "prosemirror-state"
+import type {Transaction} from "prosemirror-state"
+
 import {COMMENT_ONLY_ROLES, READ_ONLY_ROLES} from "../index.js"
+import type {Editor} from "../types.js"
 
 const key = new PluginKey("accessRights")
 
-export const accessRightsPlugin = options =>
+export const accessRightsPlugin = (options: {editor: Editor}) =>
     new Plugin({
         key,
-        filterTransaction: (tr, _state) => {
+        filterTransaction: (tr: Transaction, _state) => {
             let allowed = true
             const remote = tr.getMeta("remote")
             if (remote) {
@@ -15,7 +18,7 @@ export const accessRightsPlugin = options =>
 
             if (
                 READ_ONLY_ROLES.includes(
-                    options.editor.docInfo.access_rights
+                    options.editor.docInfo.access_rights!
                 ) &&
                 tr.docChanged
             ) {
@@ -23,7 +26,7 @@ export const accessRightsPlugin = options =>
                 allowed = false
             } else if (
                 COMMENT_ONLY_ROLES.includes(
-                    options.editor.docInfo.access_rights
+                    options.editor.docInfo.access_rights!
                 )
             ) {
                 //User has a comment-only role (commentator, editor or reviewer)
@@ -33,9 +36,11 @@ export const accessRightsPlugin = options =>
                 if (
                     !tr.steps.every(
                         step =>
-                            (step.jsonID === "addMark" ||
-                                step.jsonID === "removeMark") &&
-                            step.mark.type.name === "comment"
+                            ((step as unknown as {jsonID: string}).jsonID ===
+                                "addMark" ||
+                                (step as unknown as {jsonID: string})
+                                    .jsonID === "removeMark") &&
+                            (step as any).mark.type.name === "comment"
                     )
                 ) {
                     allowed = false