@fiduswriter/editor 0.1.20 → 0.1.21

package/src/menus/headerbar/{view.js → view.ts}

@@ -1,4 +1,6 @@
 import {DiffDOM} from "diff-dom"
+import {keyName} from "w3c-keyname"
+import type {EditorView} from "prosemirror-view"
 import {
     addAlert,
     avatarTemplate,
@@ -6,10 +8,75 @@ import {
     escapeText,
     findTarget
 } from "fwtoolkit"
-import {keyName} from "w3c-keyname"
+
+import type {Editor} from "../../types.js"
+
+interface HeaderbarBaseItem {
+    id?: string
+    order?: number
+    disabled?: (editor: Editor) => boolean
+    selected?: (editor: Editor) => boolean
+    available?: (editor: Editor) => boolean
+    icon?: string
+}
+
+interface HeaderbarActionItem extends HeaderbarBaseItem {
+    type: "action"
+    title: string | ((editor: Editor) => string)
+    tooltip?: string | ((editor: Editor) => string)
+    icon?: string
+    action: (editor: Editor) => void
+}
+
+interface HeaderbarSettingItem extends HeaderbarBaseItem {
+    type: "setting"
+    title: string | ((editor: Editor) => string)
+    tooltip?: string | ((editor: Editor) => string)
+    icon?: string
+    action: (editor: Editor) => void
+}
+
+interface HeaderbarSeparatorItem extends HeaderbarBaseItem {
+    type: "separator"
+}
+
+interface HeaderbarMenuItem extends HeaderbarBaseItem {
+    type: "menu"
+    title: string | ((editor: Editor) => string)
+    tooltip?: string | ((editor: Editor) => string)
+    keys?: string
+    open: boolean
+    content: HeaderbarItem[]
+}
+
+type HeaderbarItem =
+    | HeaderbarActionItem
+    | HeaderbarSettingItem
+    | HeaderbarSeparatorItem
+    | HeaderbarMenuItem
+
+interface HeaderbarModel {
+    open: boolean
+    content: HeaderbarMenuItem[]
+}
 
 export class HeaderbarView {
-    constructor(editorView, options) {
+    editorView: EditorView
+    options: {editor: Editor}
+    editor: Editor
+    dd: DiffDOM
+    headerEl: Element
+    listeners: {
+        onclick?: (event: MouseEvent) => void
+        onKeydown?: (event: KeyboardEvent) => void
+        onKeyup?: (event: KeyboardEvent) => void
+        onFocusout?: (event: FocusEvent) => void
+    }
+    parentChain: HeaderbarMenuItem[]
+    openMenu: HeaderbarMenuItem | null
+    cursorMenuItem: HeaderbarItem | null
+
+    constructor(editorView: EditorView, options: {editor: Editor}) {
         this.editorView = editorView
         this.options = options
 
@@ -19,11 +86,16 @@ export class HeaderbarView {
         this.dd = new DiffDOM({
             valueDiffing: false
         })
-        this.headerEl = document.querySelector("#headerbar").firstElementChild
+        const headerbar = document.querySelector("#headerbar")
+        if (!headerbar?.firstElementChild) {
+            throw new Error("Headerbar element not found.")
+        }
+        this.headerEl = headerbar.firstElementChild
         this.listeners = {}
 
-        this.removeUnavailable(this.options.editor.menu.headerbarModel)
-        this.addMissingIds(this.options.editor.menu.headerbarModel)
+        const model = this.options.editor.menu.headerbarModel as HeaderbarModel
+        this.removeUnavailable(model)
+        this.addMissingIds(model)
         this.bindEvents()
         this.update()
         this.parentChain = []
@@ -32,7 +104,7 @@ export class HeaderbarView {
         this.cursorMenuItem = null
     }
 
-    removeUnavailable(menu) {
+    removeUnavailable(menu: HeaderbarModel | HeaderbarMenuItem): void {
         // Remove those menu items from the menu model that are not available for this document.
         // Used for example for language or page size options that aren't permitted according to the
         // document template.
@@ -46,7 +118,7 @@ export class HeaderbarView {
         })
     }
 
-    addMissingIds(menu) {
+    addMissingIds(menu: HeaderbarModel | HeaderbarMenuItem): void {
         // Add missing ids to menu items that don't have an ID.
         menu.content.forEach(item => {
             if (!item.id) {
@@ -58,7 +130,7 @@ export class HeaderbarView {
         })
     }
 
-    bindEvents() {
+    bindEvents(): void {
         this.listeners.onclick = event => this.onclick(event)
         document.body.addEventListener("click", this.listeners.onclick)
         this.listeners.onKeydown = event => this.onKeydown(event)
@@ -69,18 +141,22 @@ export class HeaderbarView {
         document.body.addEventListener("focusout", this.listeners.onFocusout)
     }
 
-    destroy() {
-        if (document.activeElement.id === "document-title") {
+    destroy(): void {
+        if (document.activeElement?.id === "document-title") {
             this.saveFileName()
         }
-        document.body.removeEventListener("click", this.listeners.onclick)
-        document.body.removeEventListener("keydown", this.listeners.onKeydown)
-        document.body.removeEventListener("keyup", this.listeners.onKeyup)
-        document.body.removeEventListener("focusout", this.listeners.onFocusout)
+        document.body.removeEventListener("click", this.listeners.onclick!)
+        document.body.removeEventListener("keydown", this.listeners.onKeydown!)
+        document.body.removeEventListener("keyup", this.listeners.onKeyup!)
+        document.body.removeEventListener("focusout", this.listeners.onFocusout!)
     }
 
-    onclick(event) {
-        const target = event.target
+    onclick(event: MouseEvent): void {
+        const target = event.target as HTMLElement | null
+        if (!target) {
+            return
+        }
+        const model = this.editor.menu.headerbarModel as HeaderbarModel
         if (target.closest("div#close-document-top a i.fa-times")) {
             // If the user is offline prevent the closing of the document.
             if (this.editor.app.isOffline()) {
@@ -99,31 +175,37 @@ export class HeaderbarView {
             const item = target.closest(
                 "#headerbar #header-navigation .fw-pulldown-item"
             )
-            const searchPath = []
-            let seekItem = item
-            while (seekItem.closest("li")) {
+            const searchPath: number[] = []
+            let seekItem: Element | null = item
+            while (seekItem?.closest("li")) {
                 let itemNumber = 0
                 seekItem = seekItem.closest("li")
-                while (seekItem.previousElementSibling) {
+                while (seekItem?.previousElementSibling) {
                     itemNumber++
                     seekItem = seekItem.previousElementSibling
                 }
                 searchPath.push(itemNumber)
-                seekItem = seekItem.parentElement
+                seekItem = seekItem?.parentElement ?? null
             }
 
-            seekItem = seekItem.closest("div.header-menu")
+            seekItem = seekItem?.closest("div.header-menu") ?? null
             let menuNumber = 0
-            while (seekItem.previousElementSibling) {
+            while (seekItem?.previousElementSibling) {
                 menuNumber++
                 seekItem = seekItem.previousElementSibling
             }
-            const menu = this.editor.menu.headerbarModel.content[menuNumber]
-
-            let menuItem = menu
+            const menu = model.content[menuNumber]
 
+            let menuItem: HeaderbarItem = menu
             while (searchPath.length) {
-                menuItem = menuItem.content[searchPath.pop()]
+                const index = searchPath.pop()
+                if (
+                    menuItem.type === "menu" &&
+                    index !== undefined &&
+                    menuItem.content[index]
+                ) {
+                    menuItem = menuItem.content[index]
+                }
             }
             this.executeMenuItem(menuItem, menu)
         } else if (
@@ -136,12 +218,12 @@ export class HeaderbarView {
                 "#headerbar #header-navigation .header-nav-item:not(.fw-disabled)"
             )
             let menuNumber = 0
-            let seekItem = item.parentElement
-            while (seekItem.previousElementSibling) {
+            let seekItem: Element | null = item?.parentElement ?? null
+            while (seekItem?.previousElementSibling) {
                 menuNumber++
                 seekItem = seekItem.previousElementSibling
             }
-            this.editor.menu.headerbarModel.content.forEach(menu => {
+            model.content.forEach(menu => {
                 if (menu.open) {
                     menu.open = false
                     this.openMenu = null
@@ -149,15 +231,15 @@ export class HeaderbarView {
                     this.parentChain = []
                 }
             })
-            this.editor.menu.headerbarModel.content[menuNumber].open = true
-            this.openMenu = this.editor.menu.headerbarModel.content[menuNumber]
+            model.content[menuNumber].open = true
+            this.openMenu = model.content[menuNumber]
             this.parentChain = [this.openMenu]
             this.cursorMenuItem = null
             this.update()
         } else {
             let needUpdate = false
             this.cursorMenuItem = null
-            this.editor.menu.headerbarModel.content.forEach(menu => {
+            model.content.forEach(menu => {
                 if (menu.open) {
                     needUpdate = true
                     menu.open = false
@@ -172,7 +254,7 @@ export class HeaderbarView {
         }
     }
 
-    executeMenuItem(menuItem, menu) {
+    executeMenuItem(menuItem: HeaderbarItem, menu: HeaderbarMenuItem): void {
         switch (menuItem.type) {
             case "action":
                 if (menuItem.disabled?.(this.editor)) {
@@ -259,7 +341,7 @@ export class HeaderbarView {
         }
     }
 
-    closeAllMenu(menu) {
+    closeAllMenu(menu: HeaderbarMenuItem): void {
         menu.content.forEach(menuItem => {
             if (menuItem.type === "menu" && menuItem.open) {
                 menuItem.open = false
@@ -268,7 +350,10 @@ export class HeaderbarView {
         })
     }
 
-    closeOtherMenu(menu, currentMenuItem) {
+    closeOtherMenu(
+        menu: HeaderbarMenuItem,
+        currentMenuItem: HeaderbarMenuItem
+    ): void {
         menu.content.forEach(menuItem => {
             if (menuItem.type === "menu" && menuItem.open) {
                 if (
@@ -282,7 +367,7 @@ export class HeaderbarView {
         })
     }
 
-    onKeydown(event) {
+    onKeydown(event: KeyboardEvent): void {
         if (findTarget(event, "h1#document-title")) {
             return
         }
@@ -333,29 +418,30 @@ export class HeaderbarView {
                 return
             }
         }
-        this.checkKeys(event, this.editor.menu.headerbarModel, name)
+        this.checkKeys(event, this.editor.menu.headerbarModel as HeaderbarModel, name)
     }
 
-    onKeyup(event) {
+    onKeyup(event: KeyboardEvent): void {
         if (!findTarget(event, "h1#document-title")) {
             return
         }
         const docTitleEl = document.body.querySelector("h1#document-title")
         if (
-            !docTitleEl.childNodes.length ||
+            !docTitleEl?.childNodes.length ||
             (docTitleEl.childNodes.length === 1 &&
-                docTitleEl.firstChild.nodeType === 3)
+                docTitleEl.firstChild?.nodeType === 3)
         ) {
             return
         }
         // Special key was pressed, we reset to text only and blur
-        docTitleEl.innerHTML = docTitleEl.innerText
+        docTitleEl.innerHTML = (docTitleEl as HTMLElement).innerText
             .trim()
             .replace(/\r?\n|\r/g, "")
-        docTitleEl.blur()
+        ;(docTitleEl as HTMLElement).blur()
     }
 
-    changeCursorMenuItem(name) {
+    changeCursorMenuItem(name: string): void {
+        const model = this.editor.menu.headerbarModel as HeaderbarModel
         if (!this.cursorMenuItem) {
             this.cursorMenuItem = this.parentChain[0].content[0]
         } else {
@@ -395,15 +481,14 @@ export class HeaderbarView {
                     )
                 } else {
                     const currentMenuIndex =
-                        this.editor.menu.headerbarModel.content.findIndex(
-                            menu => menu.open
-                        )
+                        model.content.findIndex(menu => menu.open)
                     const newMenuIndex = currentMenuIndex
                         ? currentMenuIndex - 1
-                        : this.editor.menu.headerbarModel.content.length - 1
-                    this.openMenu.open = false
-                    this.openMenu =
-                        this.editor.menu.headerbarModel.content[newMenuIndex]
+                        : model.content.length - 1
+                    if (this.openMenu) {
+                        this.openMenu.open = false
+                    }
+                    this.openMenu = model.content[newMenuIndex]
                     this.openMenu.open = true
                     this.cursorMenuItem = this.openMenu.content[0]
                     this.parentChain = [this.openMenu]
@@ -418,17 +503,15 @@ export class HeaderbarView {
                     )
                 } else {
                     const currentMenuIndex =
-                        this.editor.menu.headerbarModel.content.findIndex(
-                            menu => menu.open
-                        )
+                        model.content.findIndex(menu => menu.open)
                     const newMenuIndex =
-                        currentMenuIndex ===
-                        this.editor.menu.headerbarModel.content.length - 1
+                        currentMenuIndex === model.content.length - 1
                             ? 0
                             : currentMenuIndex + 1
-                    this.openMenu.open = false
-                    this.openMenu =
-                        this.editor.menu.headerbarModel.content[newMenuIndex]
+                    if (this.openMenu) {
+                        this.openMenu.open = false
+                    }
+                    this.openMenu = model.content[newMenuIndex]
                     this.openMenu.open = true
                     this.cursorMenuItem = this.openMenu.content[0]
                     this.parentChain = [this.openMenu]
@@ -438,7 +521,7 @@ export class HeaderbarView {
         this.update()
     }
 
-    getAccessKeyHTML(title, accessKey) {
+    getAccessKeyHTML(title: string, accessKey: string | undefined): string {
         if (!accessKey) {
             return escapeText(title)
         }
@@ -449,12 +532,15 @@ export class HeaderbarView {
         return `${escapeText(title.substring(0, index))}<span class="fw-access-key">${escapeText(title.charAt(index))}</span>${escapeText(title.substring(index + 1))}`
     }
 
-    saveFileName() {
+    saveFileName(): void {
         if (this.editor.app.isOffline()) {
             // We are offline. Just reset.
             return this.update()
         }
-        const docTitleEl = document.body.querySelector("h1#document-title")
+        const docTitleEl = document.body.querySelector("h1#document-title") as HTMLElement | null
+        if (!docTitleEl) {
+            return
+        }
         const path = cleanPath(this.getTitle(), docTitleEl.innerText.trim())
         this.editor.docInfo.path = path
         if (this.editor.ws) {
@@ -468,27 +554,31 @@ export class HeaderbarView {
         this.update()
     }
 
-    onFocusout(event) {
+    onFocusout(event: FocusEvent): void {
         if (!findTarget(event, "h1#document-title")) {
             return
         }
         this.saveFileName()
     }
 
-    checkKeys(event, menu, nameKey) {
+    checkKeys(
+        event: KeyboardEvent,
+        menu: HeaderbarModel | HeaderbarMenuItem,
+        nameKey: string
+    ): void {
         menu.content.forEach(menuItem => {
-            if (menuItem.keys === nameKey) {
+            if ("keys" in menuItem && menuItem.keys === nameKey) {
                 event.preventDefault()
 
                 // Now execute the menu item
-                this.executeMenuItem(menuItem, menu)
-            } else if (menuItem.content) {
+                this.executeMenuItem(menuItem, menu as HeaderbarMenuItem)
+            } else if (menuItem.type === "menu") {
                 this.checkKeys(event, menuItem, nameKey)
             }
         })
     }
 
-    update() {
+    update(): void {
         if (
             document.activeElement &&
             document.activeElement.matches("h1#document-title")
@@ -497,14 +587,15 @@ export class HeaderbarView {
         }
         const diff = this.dd.diff(this.headerEl, this.getHeaderHTML())
         this.dd.apply(this.headerEl, diff)
-        if (this.editor.menu.headerbarModel.open) {
+        const model = this.editor.menu.headerbarModel as HeaderbarModel
+        if (model.open) {
             document.body.classList.remove("header-closed")
         } else {
             document.body.classList.add("header-closed")
         }
     }
 
-    getPathText() {
+    getPathText(): string {
         let text = this.editor.docInfo.path
         if (text.length && !text.endsWith("/")) {
             return text
@@ -515,10 +606,10 @@ export class HeaderbarView {
         return text
     }
 
-    getTitle() {
+    getTitle(): string {
         const doc = this.editor.view.state.doc
         let title = ""
-        doc.firstChild.forEach(child => {
+        doc.firstChild?.forEach(child => {
             if (!child.marks.find(mark => mark.type.name === "deletion")) {
                 title += escapeText(child.textContent)
             }
@@ -526,12 +617,13 @@ export class HeaderbarView {
         return title.trim()
     }
 
-    getHeaderHTML() {
-        if (!this.editor.menu.headerbarModel.open) {
+    getHeaderHTML(): string {
+        const model = this.editor.menu.headerbarModel as HeaderbarModel
+        if (!model.open) {
             // header is closed
             return "<div></div>"
         }
-        let exitUrl
+        let exitUrl: string
         if (this.editor.docInfo.token) {
             // Guest user — send to sign-up if open, otherwise to login
             exitUrl =
@@ -566,8 +658,10 @@ export class HeaderbarView {
         </div>`
     }
 
-    getParticipantListHTML() {
-        const participants = this.editor.mod.collab.participants
+    getParticipantListHTML(): string {
+        const participants = (this.editor.mod.collab as {
+            participants: {id: number; username?: string; name?: string; avatar?: string}[]
+        }).participants
         if (participants.length > 1) {
             return `
                 <div id="connected-collaborators">
@@ -581,17 +675,18 @@ export class HeaderbarView {
         }
     }
 
-    getHeaderNavHTML() {
-        return this.editor.menu.headerbarModel.content
+    getHeaderNavHTML(): string {
+        const model = this.editor.menu.headerbarModel as HeaderbarModel
+        return model.content
             .map(
                 menu => `
                 <div class="header-menu">
-                    <span class="header-nav-item${menu.disabled && menu.disabled(this.editor) ? " fw-disabled" : ""}"
+                    <span class="header-nav-item${menu.disabled?.(this.editor) ? " fw-disabled" : ""}"
                           title="${typeof menu.tooltip === "function" ? menu.tooltip(this.editor) : menu.tooltip}"
                           aria-label="${typeof menu.tooltip === "function" ? menu.tooltip(this.editor) : menu.tooltip}"
                           role="menuitem"
                           aria-haspopup="true">
-                        ${this.getAccessKeyHTML(menu.title, menu.keys?.slice(-1))}
+                        ${this.getAccessKeyHTML(menu.title as string, menu.keys?.slice(-1))}
                     </span>
                     ${menu.open ? this.getMenuHTML(menu) : ""}
                 </div>
@@ -600,7 +695,7 @@ export class HeaderbarView {
             .join("")
     }
 
-    getMenuHTML(menu) {
+    getMenuHTML(menu: HeaderbarMenuItem): string {
         const title =
             typeof menu.title === "function"
                 ? menu.title(this.editor)
@@ -622,8 +717,8 @@ export class HeaderbarView {
         </div>`
     }
 
-    getMenuItemHTML(menuItem) {
-        let returnValue
+    getMenuItemHTML(menuItem: HeaderbarItem): string {
+        let returnValue = ""
         switch (menuItem.type) {
             case "action":
             case "setting":
@@ -641,29 +736,31 @@ export class HeaderbarView {
         return returnValue
     }
 
-    getActionMenuItemHTML(menuItem) {
+    getActionMenuItemHTML(
+        menuItem: HeaderbarActionItem | HeaderbarSettingItem
+    ): string {
         return `<span class="fw-pulldown-item${
-            menuItem.selected && menuItem.selected(this.editor)
+            menuItem.selected?.(this.editor)
                 ? " fw-selected"
                 : ""
-        }${menuItem.disabled && menuItem.disabled(this.editor) ? " fw-disabled" : ""}${
+        }${menuItem.disabled?.(this.editor) ? " fw-disabled" : ""}${
             menuItem === this.cursorMenuItem ? " fw-cursor" : ""
         }"
         role="menuitem"
-        ${menuItem.disabled && menuItem.disabled(this.editor) ? 'aria-disabled="true"' : ""}
-        ${menuItem.selected && menuItem.selected(this.editor) ? 'aria-checked="true"' : ""}
+        ${menuItem.disabled?.(this.editor) ? 'aria-disabled="true"' : ""}
+        ${menuItem.selected?.(this.editor) ? 'aria-checked="true"' : ""}
         ${menuItem.tooltip ? (typeof menuItem.tooltip === "function" ? `title="${menuItem.tooltip(this.editor)}" aria-label="${menuItem.tooltip(this.editor)}"` : `title="${menuItem.tooltip}" aria-label="${menuItem.tooltip}"`) : ""}>
             ${menuItem.icon ? `<i class="fa-solid fa-${menuItem.icon}" aria-hidden="true"></i>` : ""}
             ${typeof menuItem.title === "function" ? menuItem.title(this.editor) : menuItem.title}
         </span>`
     }
 
-    getMenuMenuItemHTML(menuItem) {
+    getMenuMenuItemHTML(menuItem: HeaderbarMenuItem): string {
         return `<span class="fw-pulldown-item${
-            menuItem.selected && menuItem.selected(this.editor)
+            menuItem.selected?.(this.editor)
                 ? " fw-selected"
                 : ""
-        }${menuItem.disabled && menuItem.disabled(this.editor) ? " fw-disabled" : ""}${
+        }${menuItem.disabled?.(this.editor) ? " fw-disabled" : ""}${
             menuItem === this.cursorMenuItem ? " fw-cursor" : ""
         }" ${menuItem.tooltip ? `title="${menuItem.tooltip}" aria-label="${menuItem.tooltip}"` : ""}>
             ${menuItem.icon ? `<i class="fa-solid fa-${menuItem.icon}"></i>` : ""}

package/src/menus/image/{model.js → model.ts}

@@ -1,4 +1,11 @@
-import {CopyrightDialog} from "../../copyright_dialog/index.js"
+import {CopyrightDialog, type Copyright} from "../../copyright_dialog/index.js"
+
+interface FigureDialog {
+    copyright: Copyright | false
+    imgId: number | false
+    imgDb: unknown | false
+    layoutMathEditor(): void
+}
 
 export const imageMenuModel = () => ({
     content: [
@@ -7,8 +14,10 @@ export const imageMenuModel = () => ({
             type: "action",
             tooltip: gettext("Specify copyright information"),
             order: 0,
-            action: figureDialog => {
-                const dialog = new CopyrightDialog(figureDialog.copyright)
+            action: (figureDialog: FigureDialog) => {
+                const dialog = new CopyrightDialog(
+                    figureDialog.copyright as Copyright
+                )
                 dialog.init().then(copyright => {
                     if (copyright) {
                         figureDialog.copyright = copyright
@@ -21,7 +30,7 @@ export const imageMenuModel = () => ({
             type: "action",
             tooltip: gettext("Remove the image that is previewed"),
             order: 1,
-            action: figureDialog => {
+            action: (figureDialog: FigureDialog) => {
                 figureDialog.imgId = false
                 figureDialog.imgDb = false
                 figureDialog.copyright = false

package/src/menus/navigator/{model.js → model.ts}

@@ -1,3 +1,8 @@
+interface HeadingFilter {
+    title: string
+    level: number
+}
+
 export const navigatorFilterModel = () => ({
     content: [
         {
@@ -24,5 +29,5 @@ export const navigatorFilterModel = () => ({
             title: gettext("Heading 6"),
             level: 6
         }
-    ]
+    ] as HeadingFilter[]
 })

package/src/menus/ordered_list/{model.js → model.ts}

@@ -1,4 +1,5 @@
 import {OrderedListStartDialog} from "../../dialogs/index.js"
+import type {Editor} from "../../types.js"
 
 export const orderedListMenuModel = () => ({
     content: [
@@ -9,7 +10,7 @@ export const orderedListMenuModel = () => ({
                 "Specify the number from which this list is to start counting"
             ),
             order: 0,
-            action: editor => {
+            action: (editor: Editor) => {
                 const dialog = new OrderedListStartDialog(editor)
                 dialog.init()
                 return false