@fiduswriter/editor 0.1.19 → 0.1.21

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

@@ -1,3 +1,6 @@
+import {FeedbackTab} from "@fiduswriter/common"
+import {getSettings} from "@fiduswriter/document/schema/convert"
+import {docSchema} from "@fiduswriter/document/schema/document/index"
 import {
     Dialog,
     WebSocketConnector,
@@ -9,19 +12,9 @@ import {
     showSystemMessage,
     whenReady
 } from "fwtoolkit"
-import {collab, sendableSteps} from "prosemirror-collab"
-import {baseKeymap} from "prosemirror-commands"
-import {dropCursor} from "prosemirror-dropcursor"
-import {buildKeymap} from "prosemirror-example-setup"
-import {gapCursor} from "prosemirror-gapcursor"
-import {history} from "prosemirror-history"
-import {keymap} from "prosemirror-keymap"
-import {EditorState, TextSelection} from "prosemirror-state"
-import {tableEditing} from "prosemirror-tables"
-import {EditorView} from "prosemirror-view"
-import {FeedbackTab} from "@fiduswriter/common"
 import {E2EEEncryptor} from "fwtoolkit/e2ee/encryptor"
 import {E2EEKeyManager} from "fwtoolkit/e2ee/key-manager"
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import {
     enterPassphraseDialog,
     setupPassphraseDialog,
@@ -32,18 +25,29 @@ import {
     changePasswordDialog,
     createPasswordDialog
 } from "fwtoolkit/e2ee/password-dialog"
-import {E2EESnapshotManager} from "./e2ee/snapshot-manager.js"
+/* eslint-enable @typescript-eslint/no-unused-vars */
+import {collab, sendableSteps} from "prosemirror-collab"
+import {baseKeymap} from "prosemirror-commands"
+import {dropCursor} from "prosemirror-dropcursor"
+import {buildKeymap} from "prosemirror-example-setup"
+import {gapCursor} from "prosemirror-gapcursor"
+import {history} from "prosemirror-history"
+import {keymap} from "prosemirror-keymap"
+import type {Schema} from "prosemirror-model"
+import {EditorState, TextSelection} from "prosemirror-state"
+import {tableEditing} from "prosemirror-tables"
+import {EditorView} from "prosemirror-view"
 
-import {getSettings} from "@fiduswriter/document/schema/convert"
-import {docSchema} from "@fiduswriter/document/schema/document/index"
-import {plugins as defaultEditorPlugins} from "./plugins/editor/index.js"
 import {ModCitations} from "./citations/index.js"
 import {ModCollab} from "./collab/index.js"
 import {ModComments} from "./comments/index.js"
 import {ModDB} from "./databases/index.js"
 import {ModDocumentTemplate} from "./document_template/index.js"
+import {E2EESnapshotManager} from "./e2ee/snapshot-manager.js"
+import {ExportFidusFile} from "./exporter/native/file.js"
 import {ModFootnotes} from "./footnotes/index.js"
-import {ModMarginboxes} from "./marginboxes/index.js"
+import {imageEditModel} from "./images/edit_dialog/model.js"
+import {buildEditorKeymap} from "./keymap.js"
 import {
     codeBlockMenuModel,
     figureMenuModel,
@@ -56,13 +60,10 @@ import {
     tableMenuModel,
     toolbarModel
 } from "./menus/index.js"
+import {ModMarginboxes} from "./marginboxes/index.js"
 import {ModNavigator} from "./navigator/index.js"
 import {NoCollabSave} from "./no_collab_save/index.js"
-import {ModTrack, acceptAllNoInsertions, amendTransaction} from "./track/index.js"
-
-import {ExportFidusFile} from "./exporter/native/file.js"
-import {imageEditModel} from "./images/edit_dialog/model.js"
-import {buildEditorKeymap} from "./keymap.js"
+import {plugins as defaultEditorPlugins} from "./plugins/editor/index.js"
 import {
     accessRightsPlugin,
     citationRenderPlugin,
@@ -91,6 +92,8 @@ import {
     toolbarPlugin,
     trackPlugin
 } from "./state_plugins/index.js"
+import {ModTrack, acceptAllNoInsertions, amendTransaction} from "./track/index.js"
+import type {App, EditorUser} from "./types.js"
 
 // UUID v4 pattern for share tokens
 const uuid4Pattern =
@@ -102,17 +105,55 @@ export const REVIEW_ROLES = ["review", "review-tracked"]
 export const WRITE_ROLES = ["write", "write-tracked", "review-tracked"]
 
 export class Editor {
-    // A class that contains everything that happens on the editor page.
-    // It is currently not possible to initialize more than one editor class, as it
-    // contains bindings to menu items, etc. that are uniquely defined.
-    constructor({app, user}, path, idString, editorPlugins = defaultEditorPlugins) {
+    app: App
+    user: EditorUser
+    editorPlugins: any[]
+    citationDialogPlugins: any[] | null
+    mod: any
+    waitingForDocument: boolean
+    docInfo: any
+    schema: Schema
+    menu: any
+    client_id: number
+    clientTimeAdjustment: number
+    e2ee: any
+    pathEditable: boolean
+    statePlugins: any[]
+    view!: EditorView
+    currentView!: EditorView
+    ws!: {
+        connectionCount: number
+        online: boolean
+        connected: boolean
+        ws: WebSocket
+        init(): void
+        close(): void
+        send(data: string | (() => Record<string, unknown> | false | undefined)): void
+    }
+    dom!: HTMLElement
+    plugins?: Record<string, any>
+    noCollabSave?: NoCollabSave
+
+    constructor(
+        {app, user}: {app: App; user: EditorUser},
+        path: string,
+        idString: string,
+        editorPlugins = defaultEditorPlugins,
+        citationDialogPlugins = null
+    ) {
         this.app = app
         this.editorPlugins = editorPlugins
+        this.citationDialogPlugins = citationDialogPlugins
         // For unauthenticated guests, replace the bare config object with a
         // proper placeholder that has all the fields templates expect.
         this.user = user.is_authenticated
             ? user
-            : {id: undefined, username: "", name: "", is_authenticated: false}
+            : ({
+                  id: undefined,
+                  username: "",
+                  name: "",
+                  is_authenticated: false
+              } as any)
         this.mod = {}
         // Whether the editor is currently waiting for a document update. Set to true
         // initially so that diffs that arrive before document has been loaded are not
@@ -148,7 +189,10 @@ export class Editor {
         // Provide a handler for decrypting end-to-end encrypted images. The
         // reusable document schema no longer includes E2EE code, so the main
         // app injects the decryption logic here after loading the schema.
-        this.schema.cached.decryptImage = (imageEntry, _dom) => {
+        ;(this.schema as any).cached.decryptImage = (
+            imageEntry: {image: string; original_file_type?: string},
+            _dom: HTMLElement
+        ) => {
             const key = this.e2ee?.key
             if (!key) {
                 return Promise.reject(new Error("No E2EE key available"))
@@ -222,7 +266,7 @@ export class Editor {
         ]
     }
 
-    init() {
+    init(): Promise<void> {
         ensureCSS([
             staticUrl("css/libs/mathlive/mathlive.css"),
             staticUrl("css/editor.css"),
@@ -246,7 +290,7 @@ export class Editor {
             staticUrl("css/e2ee.css")
         ])
         new ModDocumentTemplate(this)
-        const initPromises = [
+        const initPromises: Promise<unknown>[] = [
             whenReady(),
             this.mod.documentTemplate.getCitationStyles()
         ]
@@ -269,7 +313,7 @@ export class Editor {
                     postJson("/api/document/create_doc/", {
                         template_id: this.docInfo.templateId,
                         path: this.docInfo.path
-                    }).then(({json}) => {
+                    }).then(({json}: {json: any}) => {
                         this.docInfo.id = json.id
                         window.history.replaceState(
                             "",
@@ -288,7 +332,7 @@ export class Editor {
             initPromises.push(
                 postJson(
                     `/api/document/share_token/validate/${this.docInfo.token}/`
-                ).then(({json, status}) => {
+                ).then(({json, status}: {json: any; status: number}) => {
                     if (status === 200 && json.document_id) {
                         this.docInfo.id = json.document_id
                         this.docInfo.access_rights = json.rights
@@ -311,7 +355,9 @@ export class Editor {
             })
             .then(() => {
                 activateWait(true)
-                const stylesPayload = {id: this.docInfo.id}
+                const stylesPayload: Record<string, unknown> = {
+                    id: this.docInfo.id
+                }
                 if (this.docInfo.token) {
                     stylesPayload.token = this.docInfo.token
                 }
@@ -382,12 +428,12 @@ export class Editor {
                         wsPath += `?token=${this.docInfo.token}`
                     }
                     this.ws = new WebSocketConnector({
-                        base: wsResult.json.ws_base,
+                        base: (wsResult.json as any).ws_base,
                         path: wsPath,
-                        appLoaded: () => this.view.state.plugins.length,
-                        anythingToSend: () => sendableSteps(this.view.state),
+                        appLoaded: () => Boolean(this.view.state.plugins.length),
+                        anythingToSend: () => Boolean(sendableSteps(this.view.state)),
                         initialMessage: () => {
-                            const message = {
+                            const message: Record<string, unknown> = {
                                 type: "subscribe",
                                 v: this.docInfo.version
                             }
@@ -421,7 +467,7 @@ export class Editor {
                         infoDisconnected: gettext(
                             "Disconnected. Attempting to reconnect..."
                         ),
-                        receiveData: data => {
+                        receiveData: (data: Record<string, any>) => {
                             if (document.body !== this.dom) {
                                 return // user navigated away.
                             }
@@ -463,7 +509,7 @@ export class Editor {
                                             username: `guest${data.session_id}`,
                                             name: `Guest ${data.session_id}`,
                                             is_authenticated: false
-                                        }
+                                        } as any
                                     }
                                     // Handle E2EE encryption parameters from server
                                     if (data.e2ee) {
@@ -475,9 +521,7 @@ export class Editor {
                                                     data.e2ee_iterations,
                                                 key: null,
                                                 snapshotManager:
-                                                    new E2EESnapshotManager(
-                                                        this
-                                                    )
+                                                    new E2EESnapshotManager(this)
                                             }
                                         } else {
                                             this.e2ee.encrypted = true
@@ -523,7 +567,7 @@ export class Editor {
                                         return
                                     }
                                     this.mod.collab.doc.receiveSelectionChange(
-                                        data
+                                        data as any
                                     )
                                     break
                                 case "path_change":
@@ -542,7 +586,7 @@ export class Editor {
                                         this.mod.collab.doc.checkVersion()
                                         return
                                     }
-                                    this.mod.collab.doc.receiveDiff(data)
+                                    this.mod.collab.doc.receiveDiff(data as any)
                                     break
                                 case "confirm_diff":
                                     this.mod.collab.doc.confirmDiff(data["rid"])
@@ -581,7 +625,7 @@ export class Editor {
                                                     {
                                                         accessRight:
                                                             data.access_right
-                                                    },
+                                                    } as any,
                                                     true
                                                 )
                                             )
@@ -688,10 +732,10 @@ export class Editor {
                                 window.location.href = "/"
                             }
                         }
-                    })
+                    }) as any
                 }
                 this.mod.documentTemplate.setStyles(stylesResult.json)
-                const docIsE2EE = docResult.json.doc_info?.e2ee === true
+                const docIsE2EE = (docResult.json as any).doc_info?.e2ee === true
                 this.mod.collab.doc.receiveDocument(docResult.json)
                 // For E2EE documents, delay the WebSocket connection until
                 // after the password dialog and decryption are complete (see
@@ -710,7 +754,7 @@ export class Editor {
                     }
                     this.noCollabSave.start()
                 }
-            })
+            }) as Promise<void>
     }
 
     /**
@@ -718,19 +762,19 @@ export class Editor {
      * Called immediately for non-E2EE documents and deferred until after
      * password entry + decryption for E2EE documents.
      */
-    startWebSocket() {
+    startWebSocket(): void {
         this.ws.init()
         this.ws.ws.addEventListener("close", () => {
             if (this.menu.toolbarViews) {
-                this.menu.toolbarViews.forEach(view => view.update())
+                this.menu.toolbarViews.forEach((view: any) => view.update())
             }
             if (this.menu.headerView) {
-                this.menu.headerView.update()
+                ;(this.menu.headerView as any).update()
             }
         })
     }
 
-    handleAccessRightModification() {
+    handleAccessRightModification(): void {
         // This function when invoked creates a copy of document in FW format and closes editor operation.
         new ExportFidusFile(
             this.getDoc({use_current_view: true}),
@@ -765,11 +809,10 @@ export class Editor {
      * document encryption key (DEK) and encrypts it with the master key.
      * Otherwise, prompts for a per-document password.
      *
-     * @returns {Promise<void>}
      * @private
      */
-    async _createE2EEDocument() {
-        let password, key, saltBase64, iterations
+    async _createE2EEDocument(): Promise<void> {
+        let password: string, key: CryptoKey, saltBase64: string, iterations: number
 
         // Check if the user has a personal passphrase set up
         const hasPassphraseKeys = await PassphraseManager.hasEncryptionKeys()
@@ -778,12 +821,13 @@ export class Editor {
             // Check if keys are unlocked in sessionStorage
             if (!PassphraseManager.hasKeysInSession()) {
                 // Prompt for passphrase to unlock
-                const result = await new Promise(resolve => {
+                const result = (await new Promise(resolve => {
                     enterPassphraseDialog(
-                        pwd => resolve({action: "unlock", passphrase: pwd}),
+                        (pwd: string) =>
+                            resolve({action: "unlock", passphrase: pwd}),
                         () => resolve({action: "recover"})
                     )
-                })
+                })) as {action: string; passphrase?: string}
                 if (result.action === "unlock" && result.passphrase) {
                     try {
                         await PassphraseManager.unlockWithPassphrase(
@@ -803,20 +847,23 @@ export class Editor {
                     if (recoverResult) {
                         try {
                             const {newRecoveryKey} =
-                                await PassphraseManager.recoverWithRecoveryKey(
-                                    recoverResult.recoveryKey,
-                                    recoverResult.newPassphrase
-                                )
+                                (await PassphraseManager.recoverWithRecoveryKey(
+                                    (recoverResult as any).recoveryKey,
+                                    (recoverResult as any).newPassphrase
+                                )) as {newRecoveryKey: string}
                             const {showRecoveryKeyDialog} = await import(
                                 "fwtoolkit/e2ee/passphrase-dialog"
                             )
                             await new Promise(resolve => {
-                                showRecoveryKeyDialog(newRecoveryKey, resolve)
+                                showRecoveryKeyDialog(
+                                    newRecoveryKey,
+                                    resolve as any
+                                )
                             })
                         } catch (e) {
                             addAlert(
                                 "error",
-                                gettext("Recovery failed: ") + e.message
+                                gettext("Recovery failed: ") + (e as Error).message
                             )
                         }
                     }
@@ -830,10 +877,10 @@ export class Editor {
             // Fall through to per-document password if passphrase unlock failed
         }
 
-        if (!password) {
+        if (!password!) {
             // Prompt for per-document password
             password = await new Promise(resolve => {
-                createPasswordDialog(pwd => resolve(pwd))
+                createPasswordDialog((pwd: string) => resolve(pwd))
             })
         }
 
@@ -856,7 +903,7 @@ export class Editor {
             e2ee: true,
             e2ee_salt: saltBase64,
             e2ee_iterations: iterations
-        })
+        }) as {json: any; status: number}
 
         if (status === 403) {
             addAlert(
@@ -872,15 +919,18 @@ export class Editor {
         delete this.docInfo.templateId
 
         // Store password in sessionStorage
-        E2EEKeyManager.storePasswordInSession(this.docInfo.id, password)
+        E2EEKeyManager.storePasswordInSession(
+            this.docInfo.id as number,
+            password
+        )
 
         // If passphrase user, also save encrypted password on server
         if (hasPassphraseKeys && PassphraseManager.hasKeysInSession()) {
             try {
                 await PassphraseManager.saveDocumentPassword(
-                    this.docInfo.id,
+                    this.docInfo.id as number,
                     password,
-                    null,
+                    null as any,
                     "user",
                     true
                 )
@@ -889,7 +939,10 @@ export class Editor {
             }
         } else {
             // Non-passphrase user: cache the key in sessionStorage
-            await E2EEKeyManager.storeKeyInSession(this.docInfo.id, key)
+            await E2EEKeyManager.storeKeyInSession(
+                this.docInfo.id as number,
+                key
+            )
         }
 
         // Set up E2EE state on the editor
@@ -906,32 +959,37 @@ export class Editor {
         this.e2ee.snapshotManager.setKey(key)
     }
 
-    close() {
+    close(): void {
         if (this.menu.toolbarViews) {
-            this.menu.toolbarViews.forEach(view => view.destroy())
+            this.menu.toolbarViews.forEach((view: any) => view.destroy())
         }
         if (this.menu.selectionMenuViews) {
-            this.menu.selectionMenuViews.forEach(view => view.destroy())
+            this.menu.selectionMenuViews.forEach((view: any) => view.destroy())
         }
         if (this.menu.headerView) {
-            this.menu.headerView.destroy()
+            ;(this.menu.headerView as any).destroy()
         }
         // For E2EE documents, update the sessionStorage title cache with the
         // current ProseMirror title so the overview shows the correct title
-        // immediately, even before the encrypted snapshot has been saved to
-        // the DB.
+        // immediately, even before the encrypted snapshot has been saved to the
+        // DB.
         if (this.e2ee && this.view) {
             const titleNode = this.view.state.doc.firstChild
             if (titleNode) {
                 let title = ""
-                titleNode.forEach(child => {
+                ;(titleNode as any).forEach((child: any) => {
                     if (
-                        !child.marks.find(mark => mark.type.name === "deletion")
+                        !child.marks.find(
+                            (mark: any) => mark.type.name === "deletion"
+                        )
                     ) {
                         title += child.textContent
                     }
                 })
-                sessionStorage.setItem(`e2ee_title_${this.docInfo.id}`, title)
+                sessionStorage.setItem(
+                    `e2ee_title_${this.docInfo.id}`,
+                    title
+                )
             }
         }
         if (this.noCollabSave) {
@@ -968,7 +1026,7 @@ export class Editor {
         }
     }
 
-    render() {
+    render(): void {
         this.dom = document.createElement("body")
         document.body = this.dom
         this.dom.classList.add("editor")
@@ -1016,17 +1074,17 @@ export class Editor {
         feedbackTab.init()
     }
 
-    onResize() {
+    onResize(): void {
         if (!this.view || !this.mod.marginboxes) {
             // Editor not yet set up
             return
         }
         this.mod.marginboxes.updateDOM()
         this.mod.footnotes.layout.updateDOM()
-        this.menu.toolbarViews.forEach(view => view.onResize())
+        this.menu.toolbarViews?.forEach((view: any) => view.onResize())
     }
 
-    onBeforeUnload() {
+    onBeforeUnload(): boolean {
         if (this.app.isOffline()) {
             showSystemMessage(
                 gettext(
@@ -1036,12 +1094,13 @@ export class Editor {
             return true
         }
         this.close()
+        return false
     }
 
-    initEditor() {
+    initEditor(): void {
         let setFocus = false
         this.view = new EditorView(
-            this.dom.querySelector("#document-editable"),
+            this.dom.querySelector("#document-editable") as HTMLElement,
             {
                 state: EditorState.create({
                     schema: this.schema
@@ -1104,7 +1163,7 @@ export class Editor {
         this.mod.navigator.init()
     }
 
-    activateFidusPlugins() {
+    async activateFidusPlugins(): Promise<void> {
         if (this.plugins) {
             // Plugins have been activated already
             return
@@ -1112,7 +1171,7 @@ export class Editor {
         // Add plugins.
         this.plugins = {}
 
-        return Promise.all(
+        await Promise.all(
             this.editorPlugins.map(([app, plugin]) => {
                 if (!this.app.settings.APPS.includes(app)) {
                     return Promise.resolve()
@@ -1120,11 +1179,12 @@ export class Editor {
                 return Promise.all(
                     Object.values(plugin).map(pluginExport => {
                         if (typeof pluginExport === "function") {
-                            this.plugins[pluginExport.name] = new pluginExport(
+                            const name = (pluginExport as any).name
+                            this.plugins![name] = new (pluginExport as any)(
                                 this
                             )
                             return (
-                                this.plugins[pluginExport.name].init() ||
+                                this.plugins![name].init() ||
                                 Promise.resolve()
                             )
                         }
@@ -1137,10 +1197,10 @@ export class Editor {
 
     // Collect all components of the current doc. Needed for saving and export
     // filters
-    getDoc(options = {}) {
+    getDoc(options: {use_current_view?: boolean; changes?: string} = {}): any {
         const doc =
             this.app.isOffline() || Boolean(options.use_current_view)
-                ? this.view.docView.node
+                ? (this.view as any).docView.node
                 : this.docInfo.confirmedDoc
         const pmDoc =
             options.changes === "acceptAllNoInsertions"
@@ -1148,8 +1208,10 @@ export class Editor {
                 : doc
 
         let title = ""
-        pmDoc.firstChild.forEach(child => {
-            if (!child.marks.find(mark => mark.type.name === "deletion")) {
+        ;(pmDoc.firstChild as any).forEach((child: any) => {
+            if (
+                !child.marks.find((mark: any) => mark.type.name === "deletion")
+            ) {
                 title += child.textContent
             }
         })
@@ -1166,15 +1228,15 @@ export class Editor {
     }
 
     // Use PMs scrollIntoView function and adjust for top menu
-    scrollIdIntoView(id) {
-        let foundPos = false,
-            view
+    scrollIdIntoView(id: string): void {
+        let foundPos: number | false = false
+        let view: EditorView
 
         this.view.state.doc.descendants((node, pos) => {
-            if (foundPos) {
+            if (foundPos !== false) {
                 return
             } else if (
-                (node.type.groups.includes("heading") ||
+                ((node.type as any).groups.includes("heading") ||
                     node.type.name === "figure") &&
                 node.attrs.id === id
             ) {
@@ -1191,37 +1253,38 @@ export class Editor {
             }
         })
 
-        if (!foundPos) {
-            this.mod.footnotes.fnEditor.view.state.doc.descendants(
-                (node, pos) => {
-                    if (foundPos) {
-                        return
-                    } else if (
-                        (node.type.groups.includes("heading") ||
-                            node.type.name === "figure") &&
-                        node.attrs.id === id
-                    ) {
-                        foundPos = node.type.name === "figure" ? pos : pos + 1
-                        view = this.mod.footnotes.fnEditor.view
-                    } else {
-                        const anchorMark = node.marks.find(
-                            mark => mark.type.name === "anchor"
-                        )
-                        if (anchorMark?.attrs.id === id) {
-                            foundPos = pos + 1
-                            view = this.mod.footnotes.fnEditor.view
-                        }
+        if (foundPos === false) {
+            const fnView = this.mod.footnotes.fnEditor.view as EditorView
+            fnView.state.doc.descendants((node, pos) => {
+                if (foundPos !== false) {
+                    return
+                } else if (
+                    ((node.type as any).groups.includes("heading") ||
+                        node.type.name === "figure") &&
+                    node.attrs.id === id
+                ) {
+                    foundPos =
+                        node.type.name === "figure" ? pos : pos + 1
+                    view = fnView
+                } else {
+                    const anchorMark = node.marks.find(
+                        mark => mark.type.name === "anchor"
+                    )
+                    if (anchorMark?.attrs.id === id) {
+                        foundPos = pos + 1
+                        view = fnView
                     }
                 }
-            )
+            })
         }
-        if (foundPos) {
-            this.scrollPosIntoView(foundPos, view)
+        if (foundPos !== false) {
+            this.scrollPosIntoView(foundPos, view!)
         }
     }
 
-    scrollPosIntoView(pos, view) {
-        const topMenuHeight = this.dom.querySelector("header").offsetHeight + 10
+    scrollPosIntoView(pos: number, view: EditorView): void {
+        const topMenuHeight =
+            (this.dom.querySelector("header") as HTMLElement).offsetHeight + 10
         const $pos = view.state.doc.resolve(pos)
         view.dispatch(view.state.tr.setSelection(new TextSelection($pos, $pos)))
         view.focus()
@@ -1229,25 +1292,24 @@ export class Editor {
         window.scrollBy({
             left: 0,
             top: distanceFromTop,
-            behavior: "smooth",
-            block: "center"
-        })
+            behavior: "smooth"
+        } as ScrollToOptions)
         return
     }
 
-    scrollBibliographyIntoView() {
-        const topMenuHeight = this.dom.querySelector("header").offsetHeight + 10
+    scrollBibliographyIntoView(): void {
+        const topMenuHeight =
+            (this.dom.querySelector("header") as HTMLElement).offsetHeight + 10
         const bibliographyHeaderEl = document.querySelector(
             "h1.doc-bibliography-header"
-        )
+        ) as HTMLElement
         const distanceFromTop =
             bibliographyHeaderEl.getBoundingClientRect().top - topMenuHeight
         window.scrollBy({
             left: 0,
             top: distanceFromTop,
-            behavior: "smooth",
-            block: "center"
-        })
+            behavior: "smooth"
+        } as ScrollToOptions)
         return
     }
 }