@fiduswriter/editor 0.1.20 → 0.1.21

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

@@ -1,7 +1,62 @@
 import {DiffDOM} from "diff-dom"
+import type {EditorView} from "prosemirror-view"
+
+import type {Editor} from "../../types.js"
+
+interface ToolbarBaseItem {
+    available?: (editor: Editor) => boolean
+    disabled?: (editor: Editor) => boolean
+    order?: number
+}
+
+interface ToolbarButtonItem extends ToolbarBaseItem {
+    type: "button"
+    title: string
+    icon: string | ((editor: Editor) => string)
+    class?: (editor: Editor) => string
+    selected?: (editor: Editor) => boolean
+    action: (editor: Editor) => boolean | void
+}
+
+interface ToolbarInfoItem extends ToolbarBaseItem {
+    type: "info"
+    show: (editor: Editor) => string
+}
+
+interface ToolbarMenuOption extends ToolbarBaseItem {
+    title: string
+    action: (editor: Editor) => boolean | void
+}
+
+interface ToolbarMenuItem extends ToolbarBaseItem {
+    type: "menu"
+    title: string
+    show: (editor: Editor) => string
+    open: boolean
+    content: ToolbarMenuOption[]
+}
+
+type ToolbarItem = ToolbarButtonItem | ToolbarInfoItem | ToolbarMenuItem
+
+interface ToolbarModel {
+    openMore: boolean
+    content: ToolbarItem[]
+}
 
 export class ToolbarView {
-    constructor(editorView, options) {
+    editorView: EditorView
+    options: {editor: Editor}
+    editor: Editor
+    dd: DiffDOM
+    sideMargins: number
+    availableWidth: number
+    openedMenu: number | false
+    listeners: {
+        onclick?: (event: MouseEvent) => void
+        onmousedown?: (event: MouseEvent) => void
+    }
+
+    constructor(editorView: EditorView, options: {editor: Editor}) {
         this.editorView = editorView
         this.options = options
 
@@ -21,14 +76,14 @@ export class ToolbarView {
 
         if (editorView === this.options.editor.view) {
             // only do this when called for the main editor (not footnote editor)
-            this.removeUnavailable(this.options.editor.menu.toolbarModel)
+            this.removeUnavailable(this.options.editor.menu.toolbarModel as ToolbarModel)
         }
 
         this.bindEvents()
         this.update()
     }
 
-    removeUnavailable(menu) {
+    removeUnavailable(menu: ToolbarModel): void {
         // Remove those menu items from the menu model that are not available for this document.
         // Used for example for mark or element buttons that aren't permitted according to the
         // document template.
@@ -36,84 +91,89 @@ export class ToolbarView {
             if (item.available && !item.available(this.editor)) {
                 return false
             } else if (item.type === "menu") {
-                this.removeUnavailable(item)
+                this.removeUnavailable(item as unknown as ToolbarModel)
             }
             return true
         })
     }
 
-    bindEvents() {
+    bindEvents(): void {
         this.listeners.onclick = event => this.onclick(event)
         document.body.addEventListener("click", this.listeners.onclick)
         this.listeners.onmousedown = event => this.onmousedown(event)
         document.body.addEventListener("mousedown", this.listeners.onmousedown)
     }
 
-    destroy() {
-        document.body.removeEventListener("click", this.listeners.onclick)
+    destroy(): void {
+        document.body.removeEventListener("click", this.listeners.onclick!)
         document.body.removeEventListener(
             "mousedown",
-            this.listeners.onmousedown
+            this.listeners.onmousedown!
         )
-        this.editor.menu.toolbarViews = this.editor.menu.toolbarViews.filter(
+        this.editor.menu.toolbarViews = this.editor.menu.toolbarViews?.filter(
             view => view !== this
         )
     }
 
-    onmousedown(event) {
+    onmousedown(event: MouseEvent): void {
         // When the citation inline editor is active, a toolbar click causes a DOM
         // selectionchange event that makes ProseMirror deactivate the plugin via
         // appendTransaction — before the click event fires. Preventing focus
         // transfer here (standard content-editable toolbar pattern) stops that.
+        const target = event.target as HTMLElement | null
         if (
-            event.target.closest(".editor-toolbar") &&
+            target?.closest(".editor-toolbar") &&
             document.activeElement?.classList.contains("citation-inline-input")
         ) {
             event.preventDefault()
         }
     }
 
-    onResize() {
+    onResize(): void {
         // recalculate menu if needed
         this.availableWidth = window.innerWidth - this.sideMargins
         this.update()
     }
 
-    onclick(event) {
+    onclick(event: MouseEvent): void {
         if (this.editorView !== this.editor.currentView) {
             // the other editor must be active
             return
         }
-        const target = event.target
+        const target = event.target as HTMLElement | null
+        if (!target) {
+            return
+        }
+        const toolbarModel = this.editor.menu.toolbarModel as ToolbarModel
         if (
             target.matches(
                 ".editor-toolbar .more-button li:not(.fw-disabled), .editor-toolbar .more-button li:not(.fw-disabled) *"
             )
         ) {
             let menuNumber = 0
-            let seekItem = target.closest("li")
-            while (seekItem.previousElementSibling) {
+            let seekItem: Element | null = target.closest("li")
+            while (seekItem?.previousElementSibling) {
                 menuNumber++
                 seekItem = seekItem.previousElementSibling
             }
             seekItem =
-                seekItem.parentElement.parentElement.parentElement.parentElement
-            while (seekItem.previousElementSibling) {
+                seekItem?.parentElement?.parentElement?.parentElement?.parentElement ?? null
+            while (seekItem?.previousElementSibling) {
                 menuNumber++
                 seekItem = seekItem.previousElementSibling
             }
-            const menuItem = this.editor.menu.toolbarModel.content[menuNumber]
+            const menuItem = toolbarModel.content[menuNumber]
             // if it is a menu, open it. Otherwise execute an
             // associated action.
-            if (menuItem.type === "menu") {
+            if (menuItem?.type === "menu") {
                 menuItem.open = true
                 this.openedMenu = menuNumber
                 event.preventDefault()
                 this.update()
-            } else if (menuItem.action) {
+            } else if (menuItem?.type === "button") {
                 event.preventDefault()
                 const focus = menuItem.action(this.editor)
-                this.editor.menu.toolbarModel.openMore = false
+                toolbarModel.openMore = false
                 this.update()
                 if (focus !== false) {
                     this.editor.currentView.focus()
@@ -124,10 +184,12 @@ export class ToolbarView {
                 ".editor-toolbar .more-button, .editor-toolbar .more-button *"
             )
         ) {
-            this.editor.menu.toolbarModel.openMore = true
-            if (this.openedMenu) {
-                this.editor.menu.toolbarModel.content[this.openedMenu].open =
-                    false
+            toolbarModel.openMore = true
+            if (this.openedMenu !== false) {
+                const openedItem = toolbarModel.content[this.openedMenu]
+                if (openedItem?.type === "menu") {
+                    openedItem.open = false
+                }
             }
             this.update()
         } else if (
@@ -138,23 +200,25 @@ export class ToolbarView {
             // A toolbar menu item was clicked. We just need to
             // find out which one
             let itemNumber = 0
-            let seekItem = target.closest("li")
-            while (seekItem.previousElementSibling) {
+            let seekItem: Element | null = target.closest("li")
+            while (seekItem?.previousElementSibling) {
                 itemNumber++
                 seekItem = seekItem.previousElementSibling
             }
             seekItem =
-                seekItem.parentElement.parentElement.parentElement.parentElement
+                seekItem?.parentElement?.parentElement?.parentElement?.parentElement ?? null
             let menuNumber = 0
-            while (seekItem.previousElementSibling) {
+            while (seekItem?.previousElementSibling) {
                 menuNumber++
                 seekItem = seekItem.previousElementSibling
             }
             event.preventDefault()
-            const focus = this.editor.menu.toolbarModel.content[
-                menuNumber
-            ].content[itemNumber].action(this.editor)
-            this.editor.menu.toolbarModel.content[menuNumber].open = false
+            const menu = toolbarModel.content[menuNumber]
+            if (menu?.type !== "menu") {
+                return
+            }
+            const focus = menu.content[itemNumber].action(this.editor)
+            menu.open = false
             this.openedMenu = false
             this.update()
             if (focus !== false) {
@@ -167,21 +231,21 @@ export class ToolbarView {
         ) {
             // A menu item has been clicked, lets find out which one.
             let menuNumber = 0
-            let seekItem = target.closest("div.ui-buttonset")
-            while (seekItem.previousElementSibling) {
+            let seekItem: Element | null = target.closest("div.ui-buttonset")
+            while (seekItem?.previousElementSibling) {
                 menuNumber++
                 seekItem = seekItem.previousElementSibling
             }
-            const menuItem = this.editor.menu.toolbarModel.content[menuNumber]
+            const menuItem = toolbarModel.content[menuNumber]
             // if it is a menu, open it. Otherwise execute an
             // associated action.
-            if (menuItem.type === "menu") {
+            if (menuItem?.type === "menu") {
                 menuItem.open = true
                 this.openedMenu = menuNumber
-                this.editor.menu.toolbarModel.openMore = false
+                toolbarModel.openMore = false
                 event.preventDefault()
                 this.update()
-            } else if (menuItem.action) {
+            } else if (menuItem?.type === "button") {
                 event.preventDefault()
                 const focus = menuItem.action(this.editor)
                 this.update()
@@ -191,26 +255,29 @@ export class ToolbarView {
             }
         } else if (
             this.openedMenu !== false ||
-            this.editor.menu.toolbarModel.openMore
+            toolbarModel.openMore
         ) {
             if (this.openedMenu !== false) {
-                this.editor.menu.toolbarModel.content[this.openedMenu].open =
-                    false
+                const openedItem = toolbarModel.content[this.openedMenu]
+                if (openedItem?.type === "menu") {
+                    openedItem.open = false
+                }
             }
-            this.editor.menu.toolbarModel.openMore = false
+            toolbarModel.openMore = false
             this.openedMenu = false
             this.update()
         }
     }
 
-    update() {
+    update(): void {
         if (this.editorView !== this.editor.currentView) {
             // the other editor must be active
             return
         }
         let spaceCounter = this.availableWidth
-        let menuIndexToDrop = false
-        this.editor.menu.toolbarModel.content.some((menuItem, index) => {
+        let menuIndexToDrop: number | false = false
+        const toolbarModel = this.editor.menu.toolbarModel as ToolbarModel
+        toolbarModel.content.some((menuItem, index) => {
             switch (menuItem.type) {
                 case "info":
                     spaceCounter -= 94
@@ -225,9 +292,10 @@ export class ToolbarView {
                 menuIndexToDrop = Math.max(index - 2, 3) // We need the space of two buttons for the more button
                 return true
             }
+            return false
         })
         const toolbarEl = (document.querySelector("#toolbar") || {})
-            .firstElementChild
+            .firstElementChild as Element | undefined
         if (!toolbarEl) {
             return
         }
@@ -238,14 +306,15 @@ export class ToolbarView {
         this.dd.apply(toolbarEl, diff)
     }
 
-    getToolbarHTML(menuIndexToDrop) {
+    getToolbarHTML(menuIndexToDrop: number | false): string {
+        const toolbarModel = this.editor.menu.toolbarModel as ToolbarModel
         return `<div>
             <div class="editor-toolbar">
-                ${this.editor.menu.toolbarModel.content
+                ${toolbarModel.content
                     .map((menuItem, index) => {
                         if (!menuIndexToDrop || index < menuIndexToDrop) {
                             return `
-                            <div class="ui-buttonset${menuItem.disabled && menuItem.disabled(this.editor) ? " fw-disabled" : ""}">
+                            <div class="ui-buttonset${menuItem.disabled?.(this.editor) ? " fw-disabled" : ""}">
                                 ${this.getToolbarMenuItemHTML(menuItem, index)}
                             </div>
                         `
@@ -259,8 +328,8 @@ export class ToolbarView {
         </div>`
     }
 
-    getToolbarMenuItemHTML(menuItem, _index) {
-        let returnValue
+    getToolbarMenuItemHTML(menuItem: ToolbarItem, _index: number): string {
+        let returnValue = ""
         switch (menuItem.type) {
             case "info":
                 returnValue = this.getInfoHTML(menuItem)
@@ -278,7 +347,7 @@ export class ToolbarView {
         return returnValue
     }
 
-    getMoreButtonHTML(menuIndexToDrop) {
+    getMoreButtonHTML(menuIndexToDrop: number | false): string {
         if (menuIndexToDrop) {
             return `
                 <div class="ui-buttonset more-button">
@@ -295,10 +364,11 @@ export class ToolbarView {
         }
     }
 
-    getMoreButtonListHTML(menuIndexToDrop) {
-        if (this.editor.menu.toolbarModel.openMore) {
+    getMoreButtonListHTML(menuIndexToDrop: number): string {
+        const toolbarModel = this.editor.menu.toolbarModel as ToolbarModel
+        if (toolbarModel.openMore) {
             const remainingItems =
-                this.editor.menu.toolbarModel.content.slice(menuIndexToDrop)
+                toolbarModel.content.slice(menuIndexToDrop) as ToolbarMenuOption[]
             return `
                 <div class="fw-pulldown fw-left" style="display: block;">
                     <ul>${remainingItems.map(menuOption => this.getDropdownOptionHTML(menuOption)).join("")}</ul>
@@ -309,14 +379,14 @@ export class ToolbarView {
         }
     }
 
-    getInfoHTML(menuItem) {
+    getInfoHTML(menuItem: ToolbarInfoItem): string {
         return `<div class="info">${menuItem.show(this.editor)}</div>`
     }
 
-    getDropdownHTML(menuItem) {
+    getDropdownHTML(menuItem: ToolbarMenuItem): string {
         return `
         <div class="multi-buttons">
-            <span class="multi-buttons-cover fw-button fw-white fw-large edit-button${menuItem.disabled && menuItem.disabled(this.editor) ? " fw-disabled" : ""}">
+            <span class="multi-buttons-cover fw-button fw-white fw-large edit-button${menuItem.disabled?.(this.editor) ? " fw-disabled" : ""}">
                 ${menuItem.show(this.editor)}
             </span>
             ${this.getDropdownListHTML(menuItem)}
@@ -324,7 +394,7 @@ export class ToolbarView {
         `
     }
 
-    getDropdownListHTML(menuItem) {
+    getDropdownListHTML(menuItem: ToolbarMenuItem): string {
         if (menuItem.open) {
             return `<div class="fw-pulldown fw-left" style="display: block;"><ul>${menuItem.content.map(menuOption => this.getDropdownOptionHTML(menuOption)).join("")}</ul></div>`
         } else {
@@ -332,9 +402,9 @@ export class ToolbarView {
         }
     }
 
-    getDropdownOptionHTML(menuOption) {
+    getDropdownOptionHTML(menuOption: ToolbarMenuOption): string {
         return `
-        <li class="fw-dialog-titlebar-button ui-widget ui-state-default ui-corner-all ui-button-text-only${menuOption.disabled && menuOption.disabled(this.editor) ? " fw-disabled" : ""}" role="button" aria-disabled="false">
+        <li class="fw-dialog-titlebar-button ui-widget ui-state-default ui-corner-all ui-button-text-only${menuOption.disabled?.(this.editor) ? " fw-disabled" : ""}" role="button" aria-disabled="false">
             <span class="ui-button-text">
                 <input type="radio" >
                 <label class="fw-pulldown-item">${menuOption.title}</label>
@@ -343,9 +413,9 @@ export class ToolbarView {
         `
     }
 
-    getButtonHTML(menuItem) {
+    getButtonHTML(menuItem: ToolbarButtonItem): string {
         return `
-        <button aria-label="${menuItem.title}" class="fw-button fw-white fw-large fw-square edit-button${menuItem.disabled && menuItem.disabled(this.editor) ? " fw-disabled" : ""}${menuItem.selected && menuItem.selected(this.editor) ? " fw-state-active" : ""}${menuItem.class ? ` ${menuItem.class(this.editor)}` : ""}" title="${menuItem.title}" >
+        <button aria-label="${menuItem.title}" class="fw-button fw-white fw-large fw-square edit-button${menuItem.disabled?.(this.editor) ? " fw-disabled" : ""}${menuItem.selected?.(this.editor) ? " fw-state-active" : ""}${menuItem.class ? ` ${menuItem.class(this.editor)}` : ""}" title="${menuItem.title}" >
             <span class="ui-button-text">
                 <i class="fa-solid fa-${typeof menuItem.icon === "function" ? menuItem.icon(this.editor) : menuItem.icon}"></i>
             </span>

package/src/modules.d.ts

@@ -0,0 +1,84 @@
+/**
+ * Ambient type declarations for dependencies that do not ship their own types.
+ */
+
+declare module "prosemirror-suggestions" {
+    import type {Plugin} from "prosemirror-state"
+    import type {EditorView} from "prosemirror-view"
+
+    export interface SuggestionRange {
+        from: number
+        to: number
+    }
+
+    export interface SuggestionMatch {
+        range: SuggestionRange
+        text: string
+    }
+
+    export type SuggestionMatcher = (
+        $position: import("prosemirror-model").ResolvedPos
+    ) => SuggestionMatch | undefined
+
+    export function triggerCharacter(
+        char: string,
+        allowSpaces?: boolean
+    ): SuggestionMatcher
+
+    export interface SuggestionsPluginOptions {
+        matcher?: SuggestionMatcher
+        suggestionClass?: string
+        onEnter?(args: {
+            view: EditorView
+            range: SuggestionRange
+            text: string
+        }): boolean
+        onChange?(args: {
+            view: EditorView
+            range: SuggestionRange
+            text: string
+        }): boolean
+        onExit?(args: {
+            view: EditorView
+            range: SuggestionRange
+            text: string
+        }): boolean
+        onKeyDown?(args: {view: EditorView; event: KeyboardEvent}): boolean
+        escapeOnSelectionChange?: boolean
+        escapeKeys?: string[]
+        debug?: boolean
+    }
+
+    export function suggestionsPlugin(
+        options: SuggestionsPluginOptions
+    ): Plugin
+}
+
+declare module "fix-utf8" {
+    /**
+     * Fix invalid UTF-8 byte sequences in the given string.
+     */
+    function fixUTF8(input: string): string
+    export default fixUTF8
+}
+
+declare module "downloadjs" {
+    function download(
+        data: Blob | string,
+        filename: string,
+        mimeType?: string
+    ): void
+    export default download
+}
+
+declare module "diff" {
+    export function diffChars(oldStr: string, newStr: string): Array<{
+        value: string
+        added?: boolean
+        removed?: boolean
+    }>
+    export function diffWordsWithSpace(
+        oldStr: string,
+        newStr: string
+    ): Array<{value: string; added?: boolean; removed?: boolean}>
+}