@fiduswriter/editor 0.1.20 → 0.1.21

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

@@ -1,25 +1,114 @@
 import {DiffDOM, stringToObj} from "diff-dom"
 import fastdom from "fastdom"
+import type {Node} from "prosemirror-model"
+import type {Selection} from "prosemirror-state"
+import type {EditorView} from "prosemirror-view"
 
 import {cancelPromise, findTarget} from "fwtoolkit"
 import {READ_ONLY_ROLES} from "../index.js"
 import {
     getCommentDuringCreationDecoration,
-    getFootnoteMarkers,
-    getSelectedChanges
+    getFootnoteMarkers
 } from "../state_plugins/index.js"
+import {getSelectedChanges} from "../state_plugins/track/index.js"
+import type {Editor} from "../types.js"
 import {
     globalCommentsTemplate,
     marginBoxOptions,
     marginBoxesTemplate,
     marginboxFilterTemplate
 } from "./templates.js"
+import type {
+    Comment,
+    MarginBox,
+    MarginBoxFilterOptions,
+    Participant
+} from "./templates.js"
+
+interface SelectedChanges {
+    insertion?: {from: number; to: number}
+    deletion?: {from: number; to: number}
+    format_change?: {from: number; to: number}
+    block_change?: {from: number; to: number}
+}
+
+interface NodeTrack {
+    type: string
+    data: Record<string, unknown>
+}
+
+interface CommentInteractions {
+    createNewGlobalComment(): void
+    deactivateSelectedChanges(): void
+    activateComment(id: string): void
+    isCurrentlyEditing(): boolean
+    activateSelectedComment(view: EditorView): void
+    editComment: boolean
+    activeCommentAnswerId: number | string | undefined
+    activeCommentId: number | string | undefined
+    findCommentIds(node: Node): string[]
+}
+
+interface CommentStore {
+    commentDuringCreation?: {
+        comment: Comment
+        inDOM?: boolean
+    }
+    comments: Record<string, Comment>
+    findComment(id: string): Comment | undefined
+}
+
+interface CommentsMod {
+    interactions: CommentInteractions
+    store: CommentStore
+}
+
+interface CollabMod {
+    pastParticipants: Participant[]
+}
+
+interface FootnotesMod {
+    fnEditor: {view: EditorView}
+}
+
+interface TrackMod {
+    activateTrack(view: string, type: string, pos: number): void
+}
+
+interface MarginboxesEditorMod {
+    comments: CommentsMod
+    collab: CollabMod
+    footnotes: FootnotesMod
+    track: TrackMod
+}
+
+interface MarginBoxPlacement {
+    height: number
+    refPos: number
+    pos?: number
+}
 
 /* Functions related to layouting of comments */
 export class ModMarginboxes {
-    constructor(editor) {
-        editor.mod.marginboxes = this
-        this.editor = editor
+    editor: Editor & {mod: MarginboxesEditorMod}
+    activeCommentStyle: string
+    filterOptions: MarginBoxFilterOptions
+    commentColors: {isMajor: string; marker: string; active: string}
+    dd: DiffDOM
+    marginBoxesContainerString: string
+    marginBoxesContainerObj: ReturnType<typeof stringToObj>
+    globalCommentsContainerString: string
+    globalCommentsContainerObj: ReturnType<typeof stringToObj>
+    marginBoxesPlacementStyle: string
+    marginBoxes: MarginBox[]
+    marginBoxesContainer: HTMLElement | null
+    globalCommentsContainer: HTMLElement | null
+    activeCommentStyleElement: HTMLElement | null
+    trackOptionsStyleElement: HTMLElement | null
+
+    constructor(editor: Editor) {
+        this.editor = editor as Editor & {mod: MarginboxesEditorMod}
+        this.editor.mod.marginboxes = this
         this.activeCommentStyle = ""
         this.filterOptions = {
             track: true,
@@ -51,6 +140,10 @@ export class ModMarginboxes {
         )
         this.marginBoxesPlacementStyle = ""
         this.marginBoxes = []
+        this.marginBoxesContainer = null
+        this.globalCommentsContainer = null
+        this.activeCommentStyleElement = null
+        this.trackOptionsStyleElement = null
     }
 
     init() {
@@ -75,7 +168,9 @@ export class ModMarginboxes {
             document.getElementById("new-global-comment")
         if (
             newGlobalCommentButton &&
-            READ_ONLY_ROLES.includes(this.editor.docInfo.access_rights)
+            READ_ONLY_ROLES.includes(
+                this.editor.docInfo.access_rights || ""
+            )
         ) {
             newGlobalCommentButton.classList.add("fw-hide")
         }
@@ -85,7 +180,7 @@ export class ModMarginboxes {
     bindEvents() {
         // Bind all the click events related to the margin box filter
         document.body.addEventListener("click", event => {
-            const el = {}
+            const el: {target?: Element | null} = {}
             switch (true) {
                 case findTarget(event, "#new-global-comment", el):
                     this.editor.mod.comments.interactions.createNewGlobalComment()
@@ -97,57 +192,68 @@ export class ModMarginboxes {
                     event,
                     ".margin-box-filter-comments-author",
                     el
-                ):
+                ): {
+                    const target = el.target as HTMLElement | null | undefined
                     this.filterOptions.commentsAuthor = Number.parseInt(
-                        el.target.dataset.id
+                        target?.dataset.id || "0"
                     )
                     this.view(this.editor.currentView)
                     break
+                }
                 case findTarget(
                     event,
                     ".margin-box-filter-comments-assigned",
                     el
-                ):
+                ): {
+                    const target = el.target as HTMLElement | null | undefined
                     this.filterOptions.assigned = Number.parseInt(
-                        el.target.dataset.id
+                        target?.dataset.id || "0"
                     )
                     this.view(this.editor.currentView)
                     break
-                case findTarget(event, ".show-marginbox-options-submenu", el):
+                }
+                case findTarget(event, ".show-marginbox-options-submenu", el): {
+                    const target = el.target as HTMLElement | null | undefined
                     this.closeAllMenus(".marginbox-options-submenu.fw-open")
-                    Array.from(el.target.parentElement.children)
-                        .find(node =>
-                            node.matches(".marginbox-options-submenu")
-                        )
-                        .classList.add("fw-open")
+                    const submenu = Array.from(
+                        target?.parentElement?.children || []
+                    ).find(node =>
+                        node.matches(".marginbox-options-submenu")
+                    ) as HTMLElement | undefined
+                    submenu?.classList.add("fw-open")
                     break
-                case findTarget(event, ".show-marginbox-options", el):
+                }
+                case findTarget(event, ".show-marginbox-options", el): {
+                    const target = el.target as HTMLElement | null | undefined
                     this.closeAllMenus()
                     if (
-                        el.target.parentElement.classList.contains(
+                        target?.parentElement?.classList.contains(
                             "margin-box-filter-button"
                         )
                     ) {
-                        Array.from(el.target.parentElement.children)
-                            .find(node => node.matches(".fw-marginbox-options"))
-                            .classList.add("fw-open")
+                        const options = Array.from(
+                            target.parentElement.children
+                        ).find(node => node.matches(".fw-marginbox-options"))
+                        if (options) {
+                            ;(options as HTMLElement).classList.add("fw-open")
+                        }
                     } else {
                         let resolved = false
-                        if (el.target.parentElement?.parentElement) {
+                        if (target?.parentElement?.parentElement) {
                             resolved =
-                                el.target.parentElement.parentElement.classList.contains(
+                                target.parentElement.parentElement.classList.contains(
                                     "resolved"
                                 )
                         }
                         const user = this.editor.user
                         const docInfo = this.editor.docInfo
-                        const elData = el.target.dataset
+                        const elData = (target as HTMLElement).dataset
                         const comment = {
                             answer: elData.hasOwnProperty("answer"),
-                            id: elData.id,
-                            commentId: elData.commentid,
-                            user: Number(elData.commentuser),
-                            resolved: resolved
+                            id: elData.id || "",
+                            commentId: elData.commentid || "",
+                            user: Number(elData.commentuser || 0),
+                            resolved
                         }
                         document.body.insertAdjacentHTML(
                             "beforeend",
@@ -156,20 +262,25 @@ export class ModMarginboxes {
                         const marginboxOptions = document.body.querySelector(
                             ".comment-answer-options.fw-marginbox-options"
                         )
-                        marginboxOptions.classList.add("fw-open")
-                        this.positionMarginBoxOptions(
-                            marginboxOptions,
-                            el.target
-                        )
+                        if (marginboxOptions && target) {
+                            marginboxOptions.classList.add("fw-open")
+                            this.positionMarginBoxOptions(
+                                marginboxOptions as HTMLElement,
+                                target
+                            )
+                        }
                     }
                     break
-                case findTarget(event, ".margin-box-filter-track-author", el):
+                }
+                case findTarget(event, ".margin-box-filter-track-author", el): {
+                    const target = el.target as HTMLElement | null | undefined
                     this.filterOptions.trackAuthor = Number.parseInt(
-                        el.target.dataset.id
+                        target?.dataset.id || "0"
                     )
                     this.setTrackStyle()
                     this.view(this.editor.currentView)
                     break
+                }
                 case findTarget(event, "#margin-box-filter-track", el):
                     this.filterOptions.track = !this.filterOptions.track
                     this.setTrackStyle()
@@ -183,44 +294,59 @@ export class ModMarginboxes {
                     this.filterOptions.info = !this.filterOptions.info
                     this.view(this.editor.currentView)
                     break
-                case findTarget(event, ".margin-box.comment.inactive", el):
-                    {
-                        const commentId = el.target.dataset.id
-                        const comment =
-                            this.editor.mod.comments.store.findComment(
-                                commentId
-                            )
-                        if (!comment?.isGlobal) {
-                            this.editor.mod.comments.interactions.deactivateSelectedChanges()
-                        }
-                        this.editor.mod.comments.interactions.activateComment(
-                            commentId
-                        )
-                        this.scrollToGlobalComment(commentId)
+                case findTarget(event, ".margin-box.comment.inactive", el): {
+                    const target = el.target as HTMLElement | null | undefined
+                    const commentId = target?.dataset.id
+                    if (!commentId) {
+                        break
                     }
+                    const comment =
+                        this.editor.mod.comments.store.findComment(commentId)
+                    if (!comment?.isGlobal) {
+                        this.editor.mod.comments.interactions.deactivateSelectedChanges()
+                    }
+                    this.editor.mod.comments.interactions.activateComment(
+                        commentId
+                    )
+                    this.scrollToGlobalComment(commentId)
                     break
+                }
                 case findTarget(event, ".margin-box.track.inactive", el): {
+                    const target = el.target as HTMLElement | null | undefined
                     let boxNumber = 0
-                    let seekItem = el.target
-                    while (seekItem.previousElementSibling) {
+                    let seekItem: Element | null | undefined = target
+                    while (seekItem?.previousElementSibling) {
                         boxNumber += 1
                         seekItem = seekItem.previousElementSibling
                     }
                     const box = this.marginBoxes[boxNumber]
-                    this.editor.mod.track.activateTrack(
-                        box.view,
-                        box.type,
-                        box.pos
-                    )
+                    switch (box.type) {
+                        case "insertion":
+                        case "deletion":
+                        case "format_change":
+                        case "block_change":
+                            this.editor.mod.track.activateTrack(
+                                box.view,
+                                box.type,
+                                box.pos as number
+                            )
+                            break
+                        default:
+                            break
+                    }
                     break
                 }
                 case findTarget(
                     event,
                     ".margin-box.comment.fw-active .show-more-less",
                     el
-                ):
-                    this.toggleShowMore(el)
+                ): {
+                    const target = el.target as HTMLElement | null | undefined
+                    if (target) {
+                        this.toggleShowMore(target)
+                    }
                     break
+                }
                 default:
                     this.closeAllMenus()
                     this.closeAllLongComments()
@@ -231,25 +357,25 @@ export class ModMarginboxes {
         document.body.addEventListener(
             "change",
             evt => {
-                switch (evt.target.id) {
+                const target = evt.target as HTMLInputElement | null
+                switch (target?.id) {
                     case "margin-box-filter-comments-resolved":
-                        this.filterOptions.commentsResolved = evt.target.checked
+                        this.filterOptions.commentsResolved = target.checked
                         this.view(this.editor.currentView)
                         break
 
                     case "margin-box-filter-comments-only-major":
-                        this.filterOptions.commentsOnlyMajor =
-                            evt.target.checked
+                        this.filterOptions.commentsOnlyMajor = target.checked
                         this.view(this.editor.currentView)
                         break
 
                     case "margin-box-filter-info-help":
-                        this.filterOptions.help = evt.target.checked
+                        this.filterOptions.help = target.checked
                         this.view(this.editor.currentView)
                         break
 
                     case "margin-box-filter-info-warning":
-                        this.filterOptions.warning = evt.target.checked
+                        this.filterOptions.warning = target.checked
                         this.view(this.editor.currentView)
                         break
                 }
@@ -265,32 +391,35 @@ export class ModMarginboxes {
     ) {
         document.querySelectorAll(selector).forEach(el => {
             if (el.classList.contains("comment-answer-options")) {
-                el.parentElement.removeChild(el)
+                el.parentElement?.removeChild(el)
             } else {
                 el.classList.remove("fw-open")
             }
         })
     }
 
-    view(view) {
+    view(view: EditorView) {
         // Give up if the user is currently editing a comment.
         if (this.editor.mod.comments.interactions.isCurrentlyEditing()) {
             return false
         }
         this.editor.mod.comments.interactions.activateSelectedComment(view)
+        return
     }
 
-    updateDOM() {
+    updateDOM(): Promise<void> | false {
         // Handle the layout of the comments on the screen.
         // DOM write phase
 
-        const marginBoxes = [],
-            globalComments = [],
-            referrers = [],
-            selectedChanges = getSelectedChanges(this.editor.currentView.state)
+        const marginBoxes: MarginBox[] = [],
+            globalComments: import("./templates.js").CommentMarginBox[] = [],
+            referrers: number[] = []
+        const selectedChanges = getSelectedChanges(
+            this.editor.currentView.state
+        ) as SelectedChanges
         let fnIndex = 0,
             fnPosCount = 0,
-            lastNodeTracks = [],
+            lastNodeTracks: NodeTrack[] = [],
             lastNode = this.editor.view.state.doc
 
         this.activeCommentStyle = ""
@@ -315,7 +444,7 @@ export class ModMarginboxes {
             if (node.type.name === "footnote") {
                 let lastFnNode =
                         this.editor.mod.footnotes.fnEditor.view.state.doc,
-                    lastFnNodeTracks = []
+                    lastFnNodeTracks: NodeTrack[] = []
                 const footnote =
                     lastFnNode.childCount > fnIndex
                         ? lastFnNode.child(fnIndex)
@@ -326,7 +455,7 @@ export class ModMarginboxes {
                 this.editor.mod.footnotes.fnEditor.view.state.doc.nodesBetween(
                     fnPosCount,
                     fnPosCount + footnote.nodeSize,
-                    (fnNode, fnPos) => {
+                    (fnNode: Node, fnPos: number) => {
                         if (fnPos < fnPosCount) {
                             return false
                         }
@@ -343,11 +472,13 @@ export class ModMarginboxes {
                             this.editor.view.state.selection
                         )
                         lastFnNode = fnNode
+                        return
                     }
                 )
                 fnIndex++
                 fnPosCount += footnote.nodeSize
             }
+            return
         })
 
         // Add a comment that is currently under construction to the list.
@@ -367,15 +498,15 @@ export class ModMarginboxes {
             } else {
                 const deco = getCommentDuringCreationDecoration(
                     this.editor.view.state
-                )
-                let pos, view
+                ) as {from: number} | null | undefined
+                let pos: number | undefined, view: string | undefined
                 if (deco) {
                     pos = deco.from
                     view = "main"
                 } else {
                     const fnDeco = getCommentDuringCreationDecoration(
                         this.editor.mod.footnotes.fnEditor.view.state
-                    )
+                    ) as {from: number} | null | undefined
                     if (fnDeco) {
                         pos = this.fnPosToPos(fnDeco.from)
                         view = "footnote"
@@ -394,7 +525,7 @@ export class ModMarginboxes {
                         view,
                         pos,
                         active: true
-                    })
+                    } as MarginBox)
                     referrers.splice(index, 0, pos)
                     this.activeCommentStyle +=
                         ".active-comment, .active-comment .comment {background-color: #fffacf !important;}"
@@ -449,7 +580,9 @@ export class ModMarginboxes {
                 this.marginBoxesContainerObj,
                 newMarginBoxesContainerObj
             )
-            this.dd.apply(this.marginBoxesContainer, diff)
+            if (this.marginBoxesContainer) {
+                this.dd.apply(this.marginBoxesContainer, diff)
+            }
             this.marginBoxesContainerString = marginBoxesHTML
             this.marginBoxesContainerObj = newMarginBoxesContainerObj
         }
@@ -461,14 +594,14 @@ export class ModMarginboxes {
                 this.globalCommentsContainerObj,
                 newGlobalCommentsContainerObj
             )
-            this.dd.apply(this.globalCommentsContainer, diff)
+            if (this.globalCommentsContainer) {
+                this.dd.apply(this.globalCommentsContainer, diff)
+            }
             this.globalCommentsContainerString = globalCommentsHTML
             this.globalCommentsContainerObj = newGlobalCommentsContainerObj
         }
 
-        if (
-            this.activeCommentStyleElement.innerHTML != this.activeCommentStyle
-        ) {
+        if (this.activeCommentStyleElement) {
             this.activeCommentStyleElement.innerHTML = this.activeCommentStyle
         }
 
@@ -491,7 +624,11 @@ export class ModMarginboxes {
         }
 
         return new Promise(resolve => {
-            fastdom.measure(() => {
+            const fd = fastdom as unknown as {
+                measure(cb: () => void): void
+                mutate(cb: () => void): void
+            }
+            fd.measure(() => {
                 // DOM read phase
                 let marginBoxesPlacementStyle = ""
                 if (
@@ -513,19 +650,19 @@ export class ModMarginboxes {
                         return
                     }
                     const bodyTop = document.body.getBoundingClientRect().top,
-                        marginBoxPlacements = Array.from(marginBoxesDOM).map(
-                            (mboxDOM, index) => {
-                                const mboxDOMRect =
-                                    mboxDOM.getBoundingClientRect()
-                                return {
-                                    height: mboxDOMRect.height,
-                                    refPos:
-                                        this.editor.view.coordsAtPos(
-                                            referrers[index]
-                                        ).top - bodyTop
-                                }
+                        marginBoxPlacements: MarginBoxPlacement[] = Array.from(
+                            marginBoxesDOM
+                        ).map((mboxDOM, index) => {
+                            const mboxDOMRect =
+                                mboxDOM.getBoundingClientRect()
+                            return {
+                                height: mboxDOMRect.height,
+                                refPos:
+                                    this.editor.view.coordsAtPos(
+                                        referrers[index]
+                                    ).top - bodyTop
                             }
-                        ),
+                        }),
                         firstActiveIndex = marginBoxes.findIndex(
                             mBox => mBox.active
                         ),
@@ -546,12 +683,12 @@ export class ModMarginboxes {
                                 mboxPlacement.refPos
                             )
                         }
-                        currentPos = mboxPlacement.pos
+                        currentPos = mboxPlacement.pos as number
                         activeIndex--
                     }
                     if (firstActiveIndex > -1) {
                         currentPos =
-                            firstActiveMboxPlacement.pos +
+                            (firstActiveMboxPlacement.pos as number) +
                             firstActiveMboxPlacement.height
                         activeIndex = firstActiveIndex + 1
                     } else {
@@ -564,7 +701,7 @@ export class ModMarginboxes {
                             currentPos + 2,
                             mboxPlacement.refPos
                         )
-                        currentPos = mboxPlacement.pos + mboxPlacement.height
+                        currentPos = (mboxPlacement.pos as number) + mboxPlacement.height
                         activeIndex++
                     }
 
@@ -587,10 +724,10 @@ export class ModMarginboxes {
                             if (mboxPlacement.height === 0) {
                                 return ""
                             }
-                            const pos = mboxPlacement.pos - initialOffset
+                            const pos = (mboxPlacement.pos as number) - initialOffset
                             let css = ""
                             if (pos !== totalOffset) {
-                                let topMargin = Number.parseInt(
+                                let topMargin = Math.trunc(
                                     pos - totalOffset
                                 )
                                 if (selectionInTitle) {
@@ -605,7 +742,8 @@ export class ModMarginboxes {
                         .join("")
                     if (firstActiveIndex > -1) {
                         const topMenuHeight =
-                            this.editor.dom.querySelector("header").offsetHeight
+                            (this.editor.dom.querySelector("header") as HTMLElement | null)
+                                ?.offsetHeight || 0
                         const refDistanceFromTop = this.editor.view.coordsAtPos(
                             referrers[firstActiveIndex]
                         ).top
@@ -619,22 +757,24 @@ export class ModMarginboxes {
                             window.scrollBy({
                                 left: 0,
                                 top: scrollTop,
-                                behavior: "smooth",
-                                block: "center"
-                            })
+                                behavior: "smooth"
+                            } as unknown as ScrollToOptions)
                         }
                     }
                 }
 
-                fastdom.mutate(() => {
+                fd.mutate(() => {
                     //DOM write phase
                     if (
                         this.marginBoxesPlacementStyle !==
                         marginBoxesPlacementStyle
                     ) {
-                        document.getElementById(
+                        const placementStyleEl = document.getElementById(
                             "margin-box-placement-style"
-                        ).innerHTML = marginBoxesPlacementStyle
+                        )
+                        if (placementStyleEl) {
+                            placementStyleEl.innerHTML = marginBoxesPlacementStyle
+                        }
                         this.marginBoxesPlacementStyle =
                             marginBoxesPlacementStyle
                     }
@@ -647,37 +787,44 @@ export class ModMarginboxes {
         })
     }
 
-    fnPosToPos(fnPos) {
+    fnPosToPos(fnPos: number) {
         const fnIndex = this.editor.mod.footnotes.fnEditor.view.state.doc
                 .resolve(fnPos)
                 .index(0),
-            fnMarker = getFootnoteMarkers(this.editor.view.state)[fnIndex]
+            fnMarker = (
+                getFootnoteMarkers(this.editor.view.state) as Array<{
+                    from: number
+                }>
+            )[fnIndex]
 
         return fnMarker.from
     }
 
     getMarginBoxes(
-        node,
-        pos,
-        refPos,
-        lastNode,
-        lastNodeTracks,
-        view,
-        marginBoxes,
-        referrers,
-        selectedChanges,
-        selection // Selection in main editor
-    ) {
+        node: Node,
+        pos: number,
+        refPos: number,
+        lastNode: Node,
+        lastNodeTracks: NodeTrack[],
+        view: string,
+        marginBoxes: MarginBox[],
+        referrers: number[],
+        selectedChanges: SelectedChanges,
+        selection: Selection
+    ): NodeTrack[] {
+        const selectionLike = selection as Selection & {
+            node?: Node
+        }
         if (node.attrs.help) {
             // Help/instruction margin boxes
             const helpBox = {
                 type: "help",
                 data: {
-                    active: selection.$anchor.node(1) === node ? true : false,
+                    active: selectionLike.$anchor.node(1) === node ? true : false,
                     help: node.attrs.help
                 }
             }
-            marginBoxes.push(helpBox)
+            marginBoxes.push(helpBox as MarginBox)
             referrers.push(refPos)
         }
 
@@ -685,11 +832,11 @@ export class ModMarginboxes {
             const warningBox = {
                 type: "warning",
                 data: {
-                    active: selection.node && selection.node === node,
+                    active: selectionLike.node && selectionLike.node === node,
                     warning: gettext("A cross reference has lost its target.")
                 }
             }
-            marginBoxes.push(warningBox)
+            marginBoxes.push(warningBox as MarginBox)
             referrers.push(refPos)
         }
 
@@ -702,15 +849,17 @@ export class ModMarginboxes {
             )
         ) {
             const linkMark = node.marks.find(mark => mark.type.name === "link")
-            const warningBox = {
-                type: "warning",
-                data: {
-                    active: linkMark.isInSet(selection.$anchor.marks()),
-                    warning: gettext("An internal link has lost its target.")
+            if (linkMark) {
+                const warningBox = {
+                    type: "warning",
+                    data: {
+                        active: linkMark.isInSet(selectionLike.$anchor.marks()),
+                        warning: gettext("An internal link has lost its target.")
+                    }
                 }
+                marginBoxes.push(warningBox as MarginBox)
+                referrers.push(refPos)
             }
-            marginBoxes.push(warningBox)
-            referrers.push(refPos)
         }
 
         const commentIds =
@@ -719,8 +868,16 @@ export class ModMarginboxes {
                 : []
 
         const nodeTracks = node.attrs.track
-            ? node.attrs.track.map(track => {
-                  const nodeTrack = {
+            ? (
+                  node.attrs.track as Array<{
+                      type: string
+                      user: number
+                      username: string
+                      date: number
+                      before?: unknown
+                  }>
+              ).map(track => {
+                  const nodeTrack: NodeTrack = {
                       type: track.type,
                       data: {
                           user: track.user,
@@ -762,26 +919,33 @@ export class ModMarginboxes {
                                       track.type
                                   ) ||
                                       (track.type === "format_change" &&
-                                          track.data.before.length ===
-                                              lastTrack.data.before.length &&
-                                          track.data.after.length ===
-                                              lastTrack.data.after.length &&
-                                          track.data.before.every(markName =>
-                                              lastTrack.data.before.includes(
-                                                  markName
-                                              )
+                                          (track.data.before as string[]).length ===
+                                              (lastTrack.data.before as string[])
+                                                  .length &&
+                                          (track.data.after as string[]).length ===
+                                              (lastTrack.data.after as string[])
+                                                  .length &&
+                                          (track.data.before as string[]).every(
+                                              markName =>
+                                                  (lastTrack.data.before as string[]).includes(
+                                                      markName
+                                                  )
                                           ) &&
-                                          track.data.after.every(markName =>
-                                              lastTrack.data.after.includes(
-                                                  markName
-                                              )
+                                          (track.data.after as string[]).every(
+                                              markName =>
+                                                  (lastTrack.data.after as string[]).includes(
+                                                      markName
+                                                  )
                                           )) ||
                                       (track.type === "block_change" &&
-                                          track.data.before.type ===
-                                              lastTrack.data.before.type &&
-                                          track.data.before.attrs.level ===
-                                              lastTrack.data.before.attrs
-                                                  .level))
+                                          (track.data.before as {type: string}).type ===
+                                              (lastTrack.data.before as {type: string})
+                                                  .type &&
+                                          (track.data.before as {attrs?: {level?: number}})
+                                              .attrs?.level ===
+                                              (lastTrack.data.before as {
+                                                  attrs?: {level?: number}
+                                              }).attrs?.level))
                           )
                   )
                 : nodeTracks
@@ -793,11 +957,12 @@ export class ModMarginboxes {
                         pos,
                         view,
                         active:
-                            selectedChanges[track.type] &&
-                            selectedChanges[track.type].from === pos
+                            selectedChanges[track.type as keyof SelectedChanges] &&
+                            selectedChanges[track.type as keyof SelectedChanges]!
+                                .from === pos
                     },
                     track
-                )
+                ) as MarginBox
             )
             referrers.push(refPos)
         })
@@ -850,25 +1015,28 @@ export class ModMarginboxes {
         document.body.querySelectorAll(selector).forEach(el => {
             el.classList.remove("show-more")
             const showMoreButton =
-                el.parentElement.parentElement.querySelector(".show-more-less")
+                el.parentElement?.parentElement?.querySelector(".show-more-less")
             if (showMoreButton) {
-                showMoreButton.innerText = `${gettext("show more")}`
+                showMoreButton.innerHTML = `${gettext("show more")}`
             }
         })
     }
 
-    positionMarginBoxOptions(marginBoxDialog, showMarginboxOptionsBtn) {
+    positionMarginBoxOptions(
+        marginBoxDialog: HTMLElement,
+        showMarginboxOptionsBtn: Element
+    ) {
         const btnTop = showMarginboxOptionsBtn.getBoundingClientRect().top,
             scrollTopOffset = window.pageYOffset,
             mBoxRight = showMarginboxOptionsBtn
                 .closest(".comment-answer-container")
-                .getBoundingClientRect().right
+                ?.getBoundingClientRect().right || 0
 
         marginBoxDialog.style.top = `${btnTop + scrollTopOffset + 30}px`
         marginBoxDialog.style.left = `${mBoxRight - marginBoxDialog.getBoundingClientRect().width - 10}px`
     }
 
-    scrollToGlobalComment(id) {
+    scrollToGlobalComment(id: string) {
         const commentDOM = document.querySelector(
             `#global-comments #margin-box-${id}`
         )
@@ -876,7 +1044,8 @@ export class ModMarginboxes {
             return
         }
         const topMenuHeight =
-                this.editor.dom.querySelector("header").offsetHeight,
+                (this.editor.dom.querySelector("header") as HTMLElement | null)
+                    ?.offsetHeight || 0,
             rect = commentDOM.getBoundingClientRect()
         if (rect.top < topMenuHeight || rect.bottom > window.innerHeight - 30) {
             const scrollTop = rect.top - (topMenuHeight + 90)
@@ -893,7 +1062,7 @@ export class ModMarginboxes {
             .querySelectorAll(".comment-answer-container")
             .forEach(element => {
                 element.addEventListener("scroll", () => {
-                    const scrollTop = element.scrollTop
+                    const scrollTop = (element as HTMLElement).scrollTop
                     const marginBoxOption = Array.from(element.children).find(
                         node => node.matches(".show-marginbox-options")
                     )
@@ -906,22 +1075,23 @@ export class ModMarginboxes {
             })
     }
 
-    toggleShowMore(element) {
+    toggleShowMore(element: Element) {
         const commentText =
-            element.target.parentElement.parentElement.querySelector(
-                ".comment-p"
-            )
+            element.parentElement?.parentElement?.querySelector(".comment-p")
+        if (!commentText) {
+            return
+        }
         commentText.classList.toggle("show-more")
         if (commentText.classList.contains("show-more")) {
-            element.target.innerText = `${gettext("show less")}`
+            ;(element as HTMLElement).innerText = `${gettext("show less")}`
         } else {
-            element.target.innerText = `${gettext("show more")}`
+            ;(element as HTMLElement).innerText = `${gettext("show more")}`
         }
     }
 
     setTrackStyle() {
         if (!this.filterOptions.track) {
-            this.trackOptionsStyleElement.innerHTML = `span.insertion, .selected-insertion, .selected-format_change, .selected-block_change {
+            this.trackOptionsStyleElement!.innerHTML = `span.insertion, .selected-insertion, .selected-format_change, .selected-block_change {
                 color: inherit !important;
                 background-color: inherit !important;
             }
@@ -929,7 +1099,7 @@ export class ModMarginboxes {
                 display: none;
             }`
         } else if (this.filterOptions.trackAuthor) {
-            this.trackOptionsStyleElement.innerHTML = `span.insertion:not([data-user="${this.filterOptions.trackAuthor}"]),
+            this.trackOptionsStyleElement!.innerHTML = `span.insertion:not([data-user="${this.filterOptions.trackAuthor}"]),
             span.insertion:not([data-user="${this.filterOptions.trackAuthor}"]) .selected-insertion,
             .selected-format_change:not([data-user="${this.filterOptions.trackAuthor}"]),
             .selected-block_change:not([data-user="${this.filterOptions.trackAuthor}"]) {
@@ -940,7 +1110,7 @@ export class ModMarginboxes {
                 display: none;
             }`
         } else {
-            this.trackOptionsStyleElement.innerHTML = ""
+            this.trackOptionsStyleElement!.innerHTML = ""
         }
     }
 }