@fiduswriter/editor 0.1.20 → 0.1.21

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

@@ -2,21 +2,34 @@ import {
     NodeSelection,
     Plugin,
     PluginKey,
-    TextSelection
+    TextSelection,
+    type EditorState
 } from "prosemirror-state"
-import {Decoration, DecorationSet} from "prosemirror-view"
+import {Decoration, DecorationSet, type EditorView} from "prosemirror-view"
+import type {Node as ProseMirrorNode} from "prosemirror-model"
 
 import {COMMENT_ONLY_ROLES, READ_ONLY_ROLES} from "../index.js"
 import {MathDialog} from "../dialogs/index.js"
 import {elementDisabled} from "../menus/toolbar/model.js"
+import type {Editor} from "../types.js"
 
 const key = new PluginKey("inlineMath")
 
+interface MathDialogLike {
+    new (editor: Editor): {init(): void}
+}
+
+const MathDialogCtor = MathDialog as MathDialogLike
+
 /**
  * Check if an inline equation can be activated at the current position.
  * Mirrors the toolbar equation-button disabled check.
  */
-function canActivateInlineMath(_state, _$pos, editor) {
+function canActivateInlineMath(
+    _state: EditorState,
+    _$pos: unknown,
+    editor: Editor
+): boolean {
     if (editor && elementDisabled(editor, "equation")) {
         return false
     }
@@ -27,7 +40,7 @@ function canActivateInlineMath(_state, _$pos, editor) {
 /*  Helpers shared by the inline-editor widget               */
 /* ────────────────────────────────────────────────────────── */
 
-function getInputCursorPos(input) {
+function getInputCursorPos(input: HTMLElement): number {
     const sel = window.getSelection()
     if (!sel || sel.rangeCount === 0) {
         return (input.textContent || "").length
@@ -35,7 +48,7 @@ function getInputCursorPos(input) {
     return sel.getRangeAt(0).startOffset
 }
 
-function setInputCursorPos(input, pos) {
+function setInputCursorPos(input: HTMLElement, pos: number): void {
     const textNode = input.firstChild
     if (!textNode) {
         return
@@ -51,12 +64,27 @@ function setInputCursorPos(input, pos) {
     }
 }
 
+interface InlineEditorState {
+    active: boolean
+    from: number
+    query: string
+    isEdit: boolean
+    mathNodePos: number
+    widgetId: string | undefined
+    cursorAtStart: boolean | undefined
+    decos: DecorationSet
+}
+
 /**
  * Build the contenteditable widget that lets the user type raw LaTeX.
  * The query includes the leading "$", which is shown in the widget so the
- * user always sees "$…latex…".
+ * user always sees "$…latex…”.
  */
-function createInlineMathWidget(editor, pluginState, pluginKey) {
+function createInlineMathWidget(
+    editor: Editor,
+    pluginState: InlineEditorState,
+    pluginKey: PluginKey
+): HTMLElement {
     const view = editor.currentView || editor.view
     const container = document.createElement("span")
     container.className = "inline-math-widget"
@@ -67,8 +95,7 @@ function createInlineMathWidget(editor, pluginState, pluginKey) {
     input.className = "inline-math-input"
     input.textContent = pluginState.query
 
-    input.addEventListener("input", event => {
-        event.stopPropagation()
+    input.addEventListener("input", () => {
         const text = input.textContent || ""
         if (!text) {
             // Everything including `$` was deleted — remove the node.
@@ -99,7 +126,9 @@ function createInlineMathWidget(editor, pluginState, pluginKey) {
 
     input.addEventListener("keydown", event => {
         event.stopPropagation()
-        const currentState = pluginKey.getState(view.state)
+        const currentState = pluginKey.getState(view.state) as
+            | InlineEditorState
+            | undefined
         if (!currentState?.active) {
             return
         }
@@ -173,14 +202,16 @@ function createInlineMathWidget(editor, pluginState, pluginKey) {
 
     input.addEventListener("focusout", event => {
         const related = event.relatedTarget
-        if (container.contains(related)) {
+        if (container.contains(related as globalThis.Node | null)) {
             return
         }
         const myWidgetId = pluginState.widgetId
         // Use a tiny timeout so that a click on the container itself
         // (e.g. scrollbar) does not accidentally commit.
         setTimeout(() => {
-            const currentState = pluginKey.getState(view.state)
+            const currentState = pluginKey.getState(view.state) as
+                | InlineEditorState
+                | undefined
             if (currentState?.active && currentState.widgetId === myWidgetId) {
                 view.dispatch(
                     view.state.tr.setMeta(pluginKey, {action: "commit"})
@@ -212,26 +243,35 @@ function createInlineMathWidget(editor, pluginState, pluginKey) {
 /*  Dropup plugin (inline_math preference OFF)               */
 /* ────────────────────────────────────────────────────────── */
 
-function dropupPlugin(options) {
+interface DropupState {
+    equationNode: ProseMirrorNode | undefined
+    decos: DecorationSet
+    selectedIndex: number
+}
+
+function dropupPlugin(options: {editor: Editor}): Plugin {
     const editor = options.editor
-    let currentDropUpActions = []
+    let currentDropUpActions: Array<() => void> = []
 
     const editAccess = ["write", "write-tracked", "review-tracked"].includes(
-        editor.docInfo.access_rights
+        editor.docInfo.access_rights as string
     )
 
-    function getEquationNode(state) {
+    function getEquationNode(state: EditorState): ProseMirrorNode | undefined {
         return state.selection instanceof NodeSelection &&
             state.selection.node.type.name === "equation"
             ? state.selection.node
             : undefined
     }
 
-    function createEquationDropUp(equationNode, selectedIndex = -1) {
+    function createEquationDropUp(
+        equationNode: ProseMirrorNode,
+        selectedIndex = -1
+    ): HTMLElement {
         const dropUp = document.createElement("span")
         dropUp.classList.add("drop-up-outer")
 
-        const _latex = equationNode.attrs.equation || ""
+        const _latex = equationNode.attrs.equation as string
         const requiredPx = editAccess ? 92 : 50
 
         dropUp.innerHTML = `
@@ -254,7 +294,10 @@ function dropupPlugin(options) {
             </div>`
 
         currentDropUpActions = []
-        const setupAction = (selector, action) => {
+        const setupAction = (
+            selector: string,
+            action: () => void
+        ): void => {
             const el = dropUp.querySelector(selector)
             if (!el) {
                 return
@@ -271,7 +314,7 @@ function dropupPlugin(options) {
             // MathDialog reads the NodeSelection from the view, so we rely on
             // the equation node already being NodeSelected when the button is
             // activated.
-            const dialog = new MathDialog(editor)
+            const dialog = new MathDialogCtor(editor)
             dialog.init()
         })
 
@@ -295,7 +338,7 @@ function dropupPlugin(options) {
         return dropUp
     }
 
-    function getDecos(state, selectedIndex = -1) {
+    function getDecos(state: EditorState, selectedIndex = -1): DecorationSet {
         const equationNode = getEquationNode(state)
         if (!equationNode) {
             return DecorationSet.empty
@@ -311,20 +354,20 @@ function dropupPlugin(options) {
     return new Plugin({
         key,
         state: {
-            init() {
+            init(): DropupState {
                 return {
                     equationNode: undefined,
                     decos: DecorationSet.empty,
                     selectedIndex: -1
                 }
             },
-            apply(tr, prev, _oldState, state) {
+            apply(tr, prev, _oldState, state): DropupState {
                 const newEquationNode = getEquationNode(state)
                 const meta = tr.getMeta(key)
-                let {selectedIndex} = prev
+                let {selectedIndex} = prev as DropupState
 
                 if (meta?.action === "navigate") {
-                    selectedIndex = meta.index
+                    selectedIndex = meta.index as number
                     return {
                         equationNode: newEquationNode,
                         decos: getDecos(state, selectedIndex),
@@ -332,10 +375,13 @@ function dropupPlugin(options) {
                     }
                 }
 
-                if (newEquationNode === prev.equationNode) {
+                if (newEquationNode === (prev as DropupState).equationNode) {
                     return {
                         equationNode: newEquationNode,
-                        decos: prev.decos.map(tr.mapping, tr.doc),
+                        decos: (prev as DropupState).decos.map(
+                            tr.mapping,
+                            tr.doc
+                        ),
                         selectedIndex
                     }
                 }
@@ -350,8 +396,10 @@ function dropupPlugin(options) {
             }
         },
         props: {
-            handleKeyDown(view, event) {
-                const pluginState = key.getState(view.state)
+            handleKeyDown(view: EditorView, event: KeyboardEvent) {
+                const pluginState = key.getState(view.state) as
+                    | DropupState
+                    | undefined
                 if (!pluginState?.equationNode) {
                     return false
                 }
@@ -396,8 +444,10 @@ function dropupPlugin(options) {
                 }
                 return false
             },
-            decorations(state) {
-                const pluginState = key.getState(state)
+            decorations(state: EditorState) {
+                const pluginState = key.getState(state) as
+                    | DropupState
+                    | undefined
                 return pluginState?.decos || DecorationSet.empty
             }
         }
@@ -408,13 +458,13 @@ function dropupPlugin(options) {
 /*  Inline editor plugin (inline_math preference ON)         */
 /* ────────────────────────────────────────────────────────── */
 
-function inlineEditorPlugin(options) {
+function inlineEditorPlugin(options: {editor: Editor}): Plugin {
     const editor = options.editor
 
     return new Plugin({
         key,
         state: {
-            init() {
+            init(): InlineEditorState {
                 return {
                     active: false,
                     from: 0,
@@ -426,19 +476,21 @@ function inlineEditorPlugin(options) {
                     decos: DecorationSet.empty
                 }
             },
-            apply(tr, prev, _oldState, _newState) {
-                let next = {...prev}
+            apply(tr, prev, _oldState, _newState): InlineEditorState {
+                let next = {...prev} as InlineEditorState
                 const meta = tr.getMeta(key)
 
                 if (meta?.action === "activate") {
                     next = {
                         active: true,
-                        from: meta.from,
-                        query: meta.query || "$",
-                        isEdit: meta.isEdit || false,
-                        mathNodePos: meta.mathNodePos || 0,
+                        from: meta.from as number,
+                        query: (meta.query as string) || "$",
+                        isEdit: (meta.isEdit as boolean) || false,
+                        mathNodePos: (meta.mathNodePos as number) || 0,
                         widgetId: Math.random().toString(36).slice(2),
-                        cursorAtStart: meta.cursorAtStart,
+                        cursorAtStart: meta.cursorAtStart as
+                            | boolean
+                            | undefined,
                         decos: DecorationSet.empty
                     }
                 } else if (meta?.action === "deactivate") {
@@ -453,7 +505,7 @@ function inlineEditorPlugin(options) {
                         decos: DecorationSet.empty
                     }
                 } else if (meta?.action === "updateQuery") {
-                    next.query = meta.query
+                    next.query = meta.query as string
                 }
 
                 if (next.active) {
@@ -494,7 +546,9 @@ function inlineEditorPlugin(options) {
         },
 
         appendTransaction: (trs, oldState, newState) => {
-            const oldPluginState = key.getState(oldState)
+            const oldPluginState = key.getState(oldState) as
+                | InlineEditorState
+                | undefined
             const meta = trs.find(tr => tr.getMeta(key))?.getMeta(key)
 
             /* ── commit / commitAndRight ── */
@@ -502,7 +556,7 @@ function inlineEditorPlugin(options) {
                 meta?.action === "commit" ||
                 meta?.action === "commitAndRight"
             ) {
-                if (!oldPluginState.active) {
+                if (!oldPluginState?.active) {
                     return null
                 }
                 const query = oldPluginState.query
@@ -580,7 +634,10 @@ function inlineEditorPlugin(options) {
 
             /* ── cancel ── */
             if (meta?.action === "cancel") {
-                if (oldPluginState.isEdit) {
+                if (!oldPluginState) {
+                    return null
+                }
+                if (oldPluginState?.isEdit) {
                     // Leave the equation node unchanged; move cursor after it.
                     const node = newState.doc.nodeAt(oldPluginState.mathNodePos)
                     const tr = newState.tr.setSelection(
@@ -602,7 +659,10 @@ function inlineEditorPlugin(options) {
 
             /* ── cancelDelete ── */
             if (meta?.action === "cancelDelete") {
-                if (oldPluginState.isEdit) {
+                if (!oldPluginState) {
+                    return null
+                }
+                if (oldPluginState?.isEdit) {
                     // Delete the equation node entirely.
                     const existingNode = newState.doc.nodeAt(
                         oldPluginState.mathNodePos
@@ -624,7 +684,10 @@ function inlineEditorPlugin(options) {
 
             /* ── cancelLeft ── */
             if (meta?.action === "cancelLeft") {
-                if (oldPluginState.isEdit) {
+                if (!oldPluginState) {
+                    return null
+                }
+                if (oldPluginState?.isEdit) {
                     const tr = newState.tr.setSelection(
                         TextSelection.create(
                             newState.doc,
@@ -633,7 +696,10 @@ function inlineEditorPlugin(options) {
                     )
                     return tr.setMeta(key, {action: "deactivate"})
                 } else {
-                    const tr = newState.tr.insertText("$", oldPluginState.from)
+                    const tr = newState.tr.insertText(
+                        "$",
+                        oldPluginState.from
+                    )
                     tr.setSelection(
                         TextSelection.create(tr.doc, oldPluginState.from)
                     )
@@ -642,7 +708,7 @@ function inlineEditorPlugin(options) {
             }
 
             /* ── implicit commit when selection moves away ── */
-            if (oldPluginState.active) {
+            if (oldPluginState?.active) {
                 if (
                     trs.some(tr => tr.selectionSet) &&
                     (newState.selection.from !== oldPluginState.from ||
@@ -724,12 +790,21 @@ function inlineEditorPlugin(options) {
         },
 
         props: {
-            decorations(state) {
-                const pluginState = key.getState(state)
+            decorations(state: EditorState) {
+                const pluginState = key.getState(state) as
+                    | InlineEditorState
+                    | undefined
                 return pluginState?.decos || DecorationSet.empty
             },
 
-            handleClickOn(_view, _pos, node, nodePos, _event, _direct) {
+            handleClickOn(
+                _view: EditorView,
+                _pos: number,
+                node: ProseMirrorNode,
+                nodePos: number,
+                _event: MouseEvent,
+                _direct: boolean
+            ) {
                 if (node.type.name === "equation") {
                     const tr = _view.state.tr.setSelection(
                         TextSelection.create(
@@ -751,24 +826,27 @@ function inlineEditorPlugin(options) {
             },
 
             handleDOMEvents: {
-                mousedown(view, event) {
+                mousedown(view: EditorView, event: MouseEvent) {
                     if (event.ctrlKey || event.metaKey || event.shiftKey) {
                         return false
                     }
                     if (event.button !== 0) {
                         return false
                     }
-                    const target = event.target.closest(".equation")
-                    if (!target) {
+                    const target = event.target as HTMLElement | null
+                    const closest = target?.closest(".equation")
+                    if (!closest) {
                         return false
                     }
-                    let pos = view.posAtDOM(target, 0)
+                    let pos = view.posAtDOM(closest, 0)
                     let node = view.state.doc.nodeAt(pos)
                     if (!node || node.type.name !== "equation") {
                         return false
                     }
 
-                    const pluginState = key.getState(view.state)
+                    const pluginState = key.getState(view.state) as
+                        | InlineEditorState
+                        | undefined
                     if (pluginState?.active) {
                         // Commit the current widget before opening a new one.
                         const commitTr = view.state.tr.setMeta(key, {
@@ -801,10 +879,13 @@ function inlineEditorPlugin(options) {
                     return true
                 },
 
-                click(view, event) {
-                    const pluginState = key.getState(view.state)
+                click(view: EditorView, event: MouseEvent) {
+                    const pluginState = key.getState(view.state) as
+                        | InlineEditorState
+                        | undefined
                     if (pluginState?.active) {
-                        if (event.target.closest(".inline-math-widget")) {
+                        const target = event.target as HTMLElement | null
+                        if (target?.closest(".inline-math-widget")) {
                             // Click inside the widget: let the widget handle it.
                             return false
                         }
@@ -819,8 +900,10 @@ function inlineEditorPlugin(options) {
                 }
             },
 
-            handleKeyDown(view, event) {
-                const pluginState = key.getState(view.state)
+            handleKeyDown(view: EditorView, event: KeyboardEvent) {
+                const pluginState = key.getState(view.state) as
+                    | InlineEditorState
+                    | undefined
                 if (!pluginState?.active) {
                     /* ── "$" keypress → activate inline editor ── */
                     if (event.key === "$") {
@@ -906,13 +989,16 @@ function inlineEditorPlugin(options) {
 /*  Public plugin factory                                    */
 /* ────────────────────────────────────────────────────────── */
 
-export const inlineMathPlugin = options => {
+export const inlineMathPlugin = (options: {editor: Editor}): Plugin => {
     const editor = options.editor
 
+    const appConfig = editor.app as {
+        config?: {user?: {preferences?: {inline_math?: boolean}}}
+    }
     const enabled =
-        editor.app.config.user?.preferences?.inline_math === true &&
-        !READ_ONLY_ROLES.includes(editor.docInfo.access_rights) &&
-        !COMMENT_ONLY_ROLES.includes(editor.docInfo.access_rights)
+        appConfig.config?.user?.preferences?.inline_math === true &&
+        !READ_ONLY_ROLES.includes(editor.docInfo.access_rights as string) &&
+        !COMMENT_ONLY_ROLES.includes(editor.docInfo.access_rights as string)
 
     return enabled ? inlineEditorPlugin(options) : dropupPlugin(options)
 }

package/src/state_plugins/inline_reference/{dropup.js → dropup.ts}

@@ -1,21 +1,47 @@
 import {escapeText} from "fwtoolkit"
 import {dateToYear, litToText, nameToText} from "@fiduswriter/bibliography-manager/tools"
+import type {EditorState} from "prosemirror-state"
+
 import {getInternalTargets} from "../links.js"
+import type {Editor} from "../../types.js"
+
+interface CitationMatch {
+    id: number
+    entry_key: string
+    author?: string
+    title?: string
+    year?: string
+}
+
+interface CrossRefTarget {
+    id: string
+    text: string
+}
+
+interface BibliographyEntry {
+    id: number
+    entry_key: string
+    author: string
+    title: string
+    year: string
+    source: string
+    entry: any
+}
 
 /**
  * Create a drop-up widget for the inline reference editor.
- * @param {Array} citationMatches - Array of {id, entry_key, author, title, year} objects
- * @param {number} selectedIndex - Currently selected index
- * @param {Function} onSelect - Callback when an item is selected
- * @param {Array} crossRefMatches - Array of {id, text} cross-reference objects
- * @returns {HTMLElement} The drop-up DOM element
+ * @param citationMatches - Array of {id, entry_key, author, title, year} objects
+ * @param selectedIndex - Currently selected index
+ * @param onSelect - Callback when an item is selected
+ * @param crossRefMatches - Array of {id, text} cross-reference objects
+ * @returns The drop-up DOM element
  */
 export function createInlineReferenceDropUp(
-    citationMatches,
-    selectedIndex,
-    onSelect,
-    crossRefMatches = []
-) {
+    citationMatches: CitationMatch[],
+    selectedIndex: number,
+    onSelect: (index: number) => void,
+    crossRefMatches: CrossRefTarget[] = []
+): HTMLElement {
     const container = document.createElement("span")
     container.classList.add("drop-up-outer", "inline-reference-drop-up")
 
@@ -91,16 +117,16 @@ export function createInlineReferenceDropUp(
 /**
  * Build a flat list of bibliography entries for matching.
  * Searches both document bibDB and user bibDB.
- * @param {Object} editor - The Editor instance
- * @returns {Array} Array of {id, entry_key, author, title, year, source, entry}
+ * @param editor - The Editor instance
+ * @returns Array of {id, entry_key, author, title, year, source, entry}
  *   where `entry` is the raw DB object (needed when importing a user entry
  *   into the document bibDB via addReference).
  */
-export function buildBibliographyList(editor) {
-    const entries = []
-    const seenKeys = new Set()
+export function buildBibliographyList(editor: Editor): BibliographyEntry[] {
+    const entries: BibliographyEntry[] = []
+    const seenKeys = new Set<string>()
 
-    const addEntries = (db, source) => {
+    const addEntries = (db: Record<number, any>, source: string): void => {
         if (!db) {
             return
         }
@@ -128,10 +154,10 @@ export function buildBibliographyList(editor) {
     }
 
     if (editor.mod?.db?.bibDB?.db) {
-        addEntries(editor.mod.db.bibDB.db, "doc")
+        addEntries(editor.mod.db.bibDB.db as Record<number, any>, "doc")
     }
-    if (editor.app?.bibDB?.db) {
-        addEntries(editor.app.bibDB.db, "user")
+    if ((editor.app as any).bibDB?.db) {
+        addEntries((editor.app as any).bibDB.db as Record<number, any>, "user")
     }
 
     return entries
@@ -139,11 +165,14 @@ export function buildBibliographyList(editor) {
 
 /**
  * Filter bibliography entries by query string (prefix match on entry_key).
- * @param {Array} entries - Full bibliography list
- * @param {string} query - Search query
- * @returns {Array} Filtered entries
+ * @param entries - Full bibliography list
+ * @param query - Search query
+ * @returns Filtered entries
  */
-export function filterBibliography(entries, query) {
+export function filterBibliography(
+    entries: BibliographyEntry[],
+    query: string
+): BibliographyEntry[] {
     if (!query) {
         return entries.slice(0, 50)
     }
@@ -168,17 +197,19 @@ export function filterBibliography(entries, query) {
 /**
  * Build a list of cross-reference targets (headings, figures, tables,
  * code blocks, anchors) from the main document and footnotes.
- * @param {Object} editor - The Editor instance
- * @returns {Array} Array of {id, text} objects
+ * @param editor - The Editor instance
+ * @returns Array of {id, text} objects
  */
-export function buildCrossRefList(editor) {
-    const mainState = editor.view.state
-    const language = mainState.doc.attrs.language
+export function buildCrossRefList(editor: Editor): CrossRefTarget[] {
+    const mainState = editor.view.state as EditorState
+    const language = mainState.doc.attrs.language as string
     const targets = getInternalTargets(mainState, language, "main")
-    if (editor.mod?.footnotes?.fnEditor?.view?.state) {
+    if (
+        (editor.mod as any).footnotes?.fnEditor?.view?.state
+    ) {
         targets.push(
             ...getInternalTargets(
-                editor.mod.footnotes.fnEditor.view.state,
+                (editor.mod as any).footnotes.fnEditor.view.state,
                 language,
                 "foot"
             )
@@ -189,11 +220,14 @@ export function buildCrossRefList(editor) {
 
 /**
  * Filter cross-reference targets by query string (substring match on text).
- * @param {Array} targets - Full cross-reference list
- * @param {string} query - Search query (without leading @)
- * @returns {Array} Filtered targets (max 50)
+ * @param targets - Full cross-reference list
+ * @param query - Search query (without leading @)
+ * @returns Filtered targets (max 50)
  */
-export function filterCrossRefs(targets, query) {
+export function filterCrossRefs(
+    targets: CrossRefTarget[],
+    query: string
+): CrossRefTarget[] {
     if (!query) {
         return targets.slice(0, 50)
     }