@fiduswriter/editor 0.1.20 → 0.1.21

package/src/collab/merge/state_plugins/{diff.js → diff.ts}

@@ -1,8 +1,12 @@
 import {noSpaceTmp} from "fwtoolkit"
+import type {Mark, Node, Schema} from "prosemirror-model"
 import {DOMSerializer} from "prosemirror-model"
 import {NodeSelection, Plugin, PluginKey} from "prosemirror-state"
+import type {EditorState, Transaction} from "prosemirror-state"
 import {Mapping} from "prosemirror-transform"
 import {Decoration, DecorationSet} from "prosemirror-view"
+import type {EditorView} from "prosemirror-view"
+
 import {changeSet} from "../changeset.js"
 import {readOnlyFnEditor} from "../footnotes.js"
 import {
@@ -20,12 +24,37 @@ import {
     removeDecoration
 } from "./action.js"
 
-function createHiglightDecoration(from, to, state) {
+interface DiffPluginState {
+    baseTr: Transaction | false
+    deletionClass: string | false
+    decos: DecorationSet
+}
+
+interface MergeEditorLike {
+    schema: Schema
+    cpDoc: Node
+    offlineDoc: Node
+    onlineDoc: Node
+    offlineTr: Transaction
+    onlineTr: Transaction
+    mergeView1: EditorView
+    mergeView2: EditorView
+    mergeView3: EditorView
+    imageDataModified: Record<string, number>
+    offlineTrackedSteps: number[]
+    editor: any
+    mergedDocMap: Mapping
+}
+
+function createHiglightDecoration(
+    from: number,
+    to: number,
+    state: EditorState
+): Decoration[] {
     /* Creates a yellow coloured highlight decoration when the user
     tries to look at a change */
-    const inlineDeco = Decoration.inline(from, to, {class: "selected-dec"})
-    const deco = []
-    deco.push(inlineDeco)
+    const deco: Decoration[] = []
+    deco.push(Decoration.inline(from, to, {class: "selected-dec"}))
     state.doc.nodesBetween(from, to, (node, pos) => {
         if (
             pos < from ||
@@ -45,26 +74,36 @@ function createHiglightDecoration(from, to, state) {
                 )
             )
         }
+        return true
     })
     return deco
 }
 
-function createDeletionHighlight(decos, from, to, state, options) {
+function createDeletionHighlight(
+    decos: DecorationSet,
+    from: number,
+    to: number,
+    state: EditorState,
+    options: {merge: MergeEditorLike}
+): DecorationSet {
     /* Creates a yellow coloured highlight decoration when the user
     tries to look at a deletion change in offline editor */
 
-    decos.find(from + 1, to).forEach(deco => {
-        const decoId = deco.spec.id
+    decos.find(undefined, undefined, spec => {
+        const decoId = spec.id as number | undefined
         if (decoId !== undefined) {
             const specDecoration = options.merge.mergeView2.dom.querySelector(
-                '[data-decoid="' + decoId + '"]'
+                `[data-decoid="${decoId}"]`
             )
-            const parentEl = specDecoration.closest(".deletion-decoration")
-            parentEl.querySelectorAll(".online-deleted").forEach(ele => {
-                ele.classList.add("selected-dec")
-                ele.classList.add("deletion-highlight")
-            })
+            const parentEl = specDecoration?.closest(".deletion-decoration")
+            if (parentEl) {
+                parentEl.querySelectorAll(".online-deleted").forEach(ele => {
+                    ele.classList.add("selected-dec")
+                    ele.classList.add("deletion-highlight")
+                })
+            }
         }
+        return false
     })
     const inlineDeco = Decoration.inline(
         from,
@@ -72,7 +111,7 @@ function createDeletionHighlight(decos, from, to, state, options) {
         {class: "selected-dec"},
         {type: "deletion-highlight"}
     )
-    const deco = []
+    const deco: Decoration[] = []
     deco.push(inlineDeco)
     state.doc.nodesBetween(from, to, (node, pos) => {
         if (
@@ -93,11 +132,12 @@ function createDeletionHighlight(decos, from, to, state, options) {
                 )
             )
         }
+        return true
     })
-    decos = decos.add(state.doc, deco)
-    return decos
+    return decos.add(state.doc, deco)
 }
-function createLinkDropUp(mark) {
+
+function createLinkDropUp(mark: Mark): HTMLElement {
     const dom = document.createElement("span")
     dom.classList.add("link-drop-up-outer")
     dom.innerHTML = noSpaceTmp`
@@ -108,15 +148,19 @@ function createLinkDropUp(mark) {
     return dom
 }
 
-function getDecos(decos, merge, state) {
+function getDecos(
+    decos: DecorationSet,
+    merge: MergeEditorLike,
+    state: EditorState
+): DecorationSet {
     /* Creates PM deco for the change popup */
     const $head = state.selection.$head
-    const currentMarks = [],
-        diffMark = $head.marks().find(mark => mark.type.name === "diffdata")
+    const currentMarks: Mark[] = []
+    const diffMark = $head.marks().find(mark => mark.type.name === "diffdata")
     const linkMark = $head.marks().find(mark => mark.type.name === "link")
 
     decos = decos.remove(
-        decos.find(null, null, spec => {
+        decos.find(undefined, undefined, spec => {
             if (spec.type && spec.type == "deletion") {
                 return false
             } else {
@@ -133,34 +177,47 @@ function getDecos(decos, merge, state) {
             state.selection instanceof NodeSelection
                 ? state.selection.node
                 : state.selection.$head.parent
-        const markFound = {}
+        const markFound: {
+            attrs?: {
+                diff?: string
+                from?: number
+                to?: number
+                steps?: string
+            }
+        } = {}
         if (node && node.attrs.diffdata && node.attrs.diffdata.length > 0) {
-            markFound["attrs"] = {}
-            markFound["attrs"]["diff"] = node.attrs.diffdata[0].type
-            markFound["attrs"]["from"] = node.attrs.diffdata[0].from
-            markFound["attrs"]["to"] = node.attrs.diffdata[0].to
-            markFound["attrs"]["steps"] = JSON.stringify(
+            markFound.attrs = {}
+            markFound.attrs.diff = node.attrs.diffdata[0].type as string
+            markFound.attrs.from = node.attrs.diffdata[0].from as number
+            markFound.attrs.to = node.attrs.diffdata[0].to as number
+            markFound.attrs.steps = JSON.stringify(
                 node.attrs.diffdata[0].steps
             )
 
             const startPos = $head.pos // position of block start.
-            const dom = createDropUp(merge, markFound, linkMark),
+            const dom = createDropUp(
+                    merge,
+                    markFound as unknown as Mark,
+                    linkMark
+                ),
                 deco = Decoration.widget(startPos, dom)
             const highlightDecos = createHiglightDecoration(
-                markFound["attrs"]["from"],
-                markFound["attrs"]["to"],
+                markFound.attrs.from,
+                markFound.attrs.to,
                 state
             )
             highlightDecos.push(deco)
             return decos.add(state.doc, highlightDecos)
         } else if (node.marks.find(mark => mark.type.name == "diffdata")) {
-            const mark = node.marks.find(mark => mark.type.name == "diffdata")
+            const foundMark = node.marks.find(
+                mark => mark.type.name == "diffdata"
+            )!
             const startPos = $head.pos // position of block start.
-            const dom = createDropUp(merge, mark, linkMark),
+            const dom = createDropUp(merge, foundMark, linkMark),
                 deco = Decoration.widget(startPos, dom)
             const highlightDecos = createHiglightDecoration(
-                mark.attrs.from,
-                mark.attrs.to,
+                foundMark.attrs.from as number,
+                foundMark.attrs.to as number,
                 state
             )
             highlightDecos.push(deco)
@@ -173,34 +230,43 @@ function getDecos(decos, merge, state) {
         }
         return decos
     }
-    const startPos = diffMark.attrs.to
+    if (!diffMark) {
+        return decos
+    }
+    const startPos = diffMark.attrs.to as number
     const dom = createDropUp(merge, diffMark, linkMark),
         deco = Decoration.widget(startPos, dom)
     const highlightDecos = createHiglightDecoration(
-        diffMark.attrs.from,
-        diffMark.attrs.to,
+        diffMark.attrs.from as number,
+        diffMark.attrs.to as number,
         state
     )
     highlightDecos.push(deco)
     return decos.add(state.doc, highlightDecos)
 }
 
-function deletionDecorations(decos, merge, doc, tr, deletionClass) {
+function deletionDecorations(
+    decos: DecorationSet,
+    merge: MergeEditorLike,
+    doc: Node,
+    tr: Transaction,
+    deletionClass: string
+): DecorationSet {
     let index = 0
-    let stepsTrackedByChangeset = []
+    let stepsTrackedByChangeset: number[] = []
     const changeset = new changeSet(tr).getChangeSet(),
         schema = merge.schema,
         commonDoc = merge.cpDoc,
         mapping = tr.mapping
     changeset.changes.forEach(change => {
         if (change.deleted.length > 0) {
-            let dom = document.createElement("span")
+            const dom = document.createElement("span")
             const slice = commonDoc.slice(change.fromA, change.toA)
 
             // Apply the marks before trying to serialize!!!!
-            let stepsInvolved = []
+            let stepsInvolved: number[] = []
             change.deleted.forEach(deletion =>
-                stepsInvolved.push(Number.parseInt(deletion.data.step))
+                stepsInvolved.push(Number.parseInt(String(deletion.data.step)))
             )
             const stepsSet = new Set(stepsInvolved)
             stepsInvolved = Array.from(stepsSet)
@@ -222,33 +288,39 @@ function deletionDecorations(decos, merge, doc, tr, deletionClass) {
 
             // Parse HTML to accomodate minor changes
             if (deletedContent.querySelector("tr,td")) {
-                dom = document.createElement("tbody")
-                dom.appendChild(deletedContent)
+                const tbody = document.createElement("tbody")
+                tbody.appendChild(deletedContent)
+                dom.appendChild(tbody)
             } else {
                 dom.appendChild(deletedContent)
             }
             dom.querySelectorAll("span.footnote-marker").forEach(
                 footnoteElement => {
-                    const newFnElement = readOnlyFnEditor(footnoteElement)
+                    const newFnElement = readOnlyFnEditor(
+                        footnoteElement as HTMLElement
+                    )
                     newFnElement.classList.add("deleted-footnote-element")
                     newFnElement.classList.add(deletionClass)
-                    footnoteElement.parentNode.appendChild(newFnElement)
+                    footnoteElement.parentNode!.appendChild(newFnElement)
                     footnoteElement.remove()
                 }
             )
             dom.classList.add("deletion-decoration")
-            dom.dataset.delfrom = change.fromA
-            dom.dataset.delto = change.toA
+            dom.dataset.delfrom = String(change.fromA)
+            dom.dataset.delto = String(change.toA)
 
             const dropUp = createDropUp(merge, deletionMark, undefined)
-            dropUp.dataset.decoid = index
+            dropUp.dataset.decoid = String(index)
             dropUp.style.display = "none"
             dom.appendChild(dropUp)
 
             // Put decoration in proper place. In case of a footnote change, the original content
             // is put first, decoration is shown after the content
             let pos = mapping.map(change.fromA)
-            if (change.lenA == change.lenB && stepsInvolved.length == 1) {
+            if (
+                (change as any).lenA == (change as any).lenB &&
+                stepsInvolved.length == 1
+            ) {
                 const JSONSlice = slice.toJSON()
                 if (
                     JSONSlice.content &&
@@ -265,27 +337,32 @@ function deletionDecorations(decos, merge, doc, tr, deletionClass) {
         }
     })
     if (deletionClass == "offline-deleted") {
-        merge.offlineTrackedSteps = merge.offlineTrackedSteps.concat(
-            stepsTrackedByChangeset
-        )
+        merge.offlineTrackedSteps =
+            merge.offlineTrackedSteps.concat(stepsTrackedByChangeset)
     }
     return decos
 }
 
-function createDropUp(merge, diffMark, linkMark) {
+function createDropUp(
+    merge: MergeEditorLike,
+    diffMark: Mark,
+    linkMark: Mark | undefined
+): HTMLElement {
     /* The actual function that creates a drop up */
-    const dropUp = document.createElement("span"),
-        requiredPx = 10,
-        tr =
-            diffMark.attrs.diff.search("offline") != -1
-                ? merge.offlineTr
-                : merge.onlineTr,
-        trType =
-            diffMark.attrs.diff.search("offline") != -1 ? "offline" : "online",
-        opType =
-            diffMark.attrs.diff.search("inserted") != -1
-                ? "insertion"
-                : "deletion"
+    const dropUp = document.createElement("span")
+    const requiredPx = 10
+    const tr =
+        String(diffMark.attrs.diff).search("offline") != -1
+            ? merge.offlineTr
+            : merge.onlineTr
+    const trType =
+        String(diffMark.attrs.diff).search("offline") != -1
+            ? "offline"
+            : "online"
+    const opType =
+        String(diffMark.attrs.diff).search("inserted") != -1
+            ? "insertion"
+            : "deletion"
     let textToBeDisplayed = ""
 
     if (diffMark.attrs.markOnly) {
@@ -305,7 +382,7 @@ function createDropUp(merge, diffMark, linkMark) {
             }
         }
     }
-    linkMark = linkMark === undefined ? false : linkMark
+    const safeLinkMark = linkMark === undefined ? false : linkMark
     dropUp.classList.add("drop-up-outer")
     dropUp.innerHTML = noSpaceTmp`
         <div class="link drop-up-inner" style="top: -${requiredPx}px;">
@@ -318,13 +395,13 @@ function createDropUp(merge, diffMark, linkMark) {
                             : ""
                     }
                     ${
-                        linkMark
-                            ? `<div> Link : ${linkMark.attrs.href}</div>`
+                        safeLinkMark
+                            ? `<div> Link : ${safeLinkMark.attrs.href}</div>`
                             : ""
                     }
                     ${
-                        linkMark
-                            ? `<div> Type : ${linkMark.attrs.href[0] == "#" ? "internal" : "external"}</div>`
+                        safeLinkMark
+                            ? `<div> Type : ${safeLinkMark.attrs.href[0] == "#" ? "internal" : "external"}</div>`
                             : ""
                     }
                 </div>
@@ -353,13 +430,16 @@ function createDropUp(merge, diffMark, linkMark) {
                     if (opType == "insertion") {
                         dispatchRemoveDiffdata(
                             merge.mergeView2,
-                            diffMark.attrs.from,
-                            diffMark.attrs.to
+                            diffMark.attrs.from as number,
+                            diffMark.attrs.to as number
                         )
                     } else {
                         // remove online deletion decoration
                         const decorationId = dropUp.dataset.decoid
-                        removeDecoration(merge.mergeView2, decorationId)
+                        removeDecoration(
+                            merge.mergeView2,
+                            decorationId as string
+                        )
                     }
                 } else {
                     if (opType == "insertion") {
@@ -373,14 +453,19 @@ function createDropUp(merge, diffMark, linkMark) {
                     } else {
                         // remove offline deletion decoration
                         const decorationId = dropUp.dataset.decoid
-                        if (deleteContent(merge, merge.mergeView2, diffMark)) {
+                        if (
+                            deleteContent(merge, merge.mergeView2, diffMark)
+                        ) {
                             merge.mergeView2.dispatch(
                                 merge.mergeView2.state.tr.setMeta(
                                     "removeHighlight",
                                     true
                                 )
                             )
-                            removeDecoration(merge.mergeView3, decorationId)
+                            removeDecoration(
+                                merge.mergeView3,
+                                decorationId as string
+                            )
                         }
                     }
                 }
@@ -394,7 +479,7 @@ function createDropUp(merge, diffMark, linkMark) {
 
                 // Handle merge failure
                 merge.editor.mod.collab.doc.merge.handleMergeFailure(
-                    error,
+                    error as Error,
                     offlineDoc,
                     onlineDoc,
                     merge
@@ -420,8 +505,8 @@ function createDropUp(merge, diffMark, linkMark) {
                             )
                             dispatchRemoveDiffdata(
                                 merge.mergeView2,
-                                diffMark.attrs.from,
-                                diffMark.attrs.to
+                                diffMark.attrs.from as number,
+                                diffMark.attrs.to as number
                             )
                         } else {
                             deleteContent(
@@ -441,23 +526,31 @@ function createDropUp(merge, diffMark, linkMark) {
                             )
                         ) {
                             const decorationId = dropUp.dataset.decoid
-                            removeDecoration(merge.mergeView2, decorationId)
+                            removeDecoration(
+                                merge.mergeView2,
+                                decorationId as string
+                            )
                         }
                     }
                 } else {
                     if (opType == "insertion") {
                         dispatchRemoveDiffdata(
                             merge.mergeView3,
-                            diffMark.attrs.from,
-                            diffMark.attrs.to
+                            diffMark.attrs.from as number,
+                            diffMark.attrs.to as number
                         )
                     } else {
                         // remove offline deletion decoration
-                        dropUp.parentNode.classList.remove("offline-deleted")
-                        dropUp.parentNode.classList.remove(
-                            "deletion-decoration"
+                        const target = event.target as HTMLElement
+                        const parentEl = target.closest(
+                            ".deletion-decoration"
                         )
-                        dropUp.parentNode
+                        if (!parentEl) {
+                            return
+                        }
+                        parentEl.classList.remove("offline-deleted")
+                        parentEl.classList.remove("deletion-decoration")
+                        parentEl
                             .querySelectorAll(".offline-deleted")
                             .forEach(ele => {
                                 ele.classList.remove("offline-deleted")
@@ -482,7 +575,7 @@ function createDropUp(merge, diffMark, linkMark) {
 
                 // Handle merge failure
                 merge.editor.mod.collab.doc.merge.handleMergeFailure(
-                    error,
+                    error as Error,
                     offlineDoc,
                     onlineDoc,
                     merge
@@ -500,28 +593,28 @@ function createDropUp(merge, diffMark, linkMark) {
                 if (opType == "insertion") {
                     copyChange(
                         merge.mergeView2,
-                        diffMark.attrs.from,
-                        diffMark.attrs.to
+                        diffMark.attrs.from as number,
+                        diffMark.attrs.to as number
                     )
                 } else {
                     copyChange(
                         merge.mergeView1,
-                        diffMark.attrs.from,
-                        diffMark.attrs.to
+                        diffMark.attrs.from as number,
+                        diffMark.attrs.to as number
                     )
                 }
             } else {
                 if (opType == "insertion") {
                     copyChange(
                         merge.mergeView3,
-                        diffMark.attrs.from,
-                        diffMark.attrs.to
+                        diffMark.attrs.from as number,
+                        diffMark.attrs.to as number
                     )
                 } else {
                     copyChange(
                         merge.mergeView1,
-                        diffMark.attrs.from,
-                        diffMark.attrs.to
+                        diffMark.attrs.from as number,
+                        diffMark.attrs.to as number
                     )
                 }
             }
@@ -530,30 +623,31 @@ function createDropUp(merge, diffMark, linkMark) {
     return dropUp
 }
 
-export const key = new PluginKey("mergeDiff")
+export const key = new PluginKey<DiffPluginState>("mergeDiff")
 
-export const diffPlugin = options =>
-    new Plugin({
+export const diffPlugin = (options: {merge: MergeEditorLike}) =>
+    new Plugin<DiffPluginState>({
         key,
         state: {
-            init(state) {
-                let baseTr = false
-                let deletionClass = false
+            init(config): DiffPluginState {
+                let baseTr: Transaction | false = false
+                let deletionClass: string | false = false
                 let decos = DecorationSet.empty
-                if (state.doc.eq(options.merge.offlineDoc)) {
+                const doc = config.doc
+                if (doc?.eq(options.merge.offlineDoc)) {
                     baseTr = options.merge.offlineTr
                     deletionClass = "offline-deleted"
-                } else if (state.doc.eq(options.merge.onlineDoc)) {
+                } else if (doc?.eq(options.merge.onlineDoc)) {
                     baseTr = options.merge.onlineTr
                     deletionClass = "online-deleted"
                 }
-                if (baseTr) {
+                if (baseTr && doc) {
                     decos = deletionDecorations(
                         decos,
                         options.merge,
-                        state.doc,
+                        doc,
                         baseTr,
-                        deletionClass
+                        deletionClass as string
                     )
                 }
                 return {
@@ -562,17 +656,18 @@ export const diffPlugin = options =>
                     decos: decos
                 }
             },
-            apply(tr, _prev, oldState, state) {
-                let {decos} = this.getState(oldState)
-                const {baseTr, deletionClass} = this.getState(oldState)
+            apply(tr, _prev, oldState, state): DiffPluginState {
+                const oldPluginState = key.getState(oldState)!
+                let {decos} = oldPluginState
+                const {baseTr, deletionClass} = oldPluginState
 
-                decos = getDecos(decos, options.merge, state)
+                let newDecos = getDecos(decos, options.merge, state)
 
                 if (tr.getMeta("removeHighlight")) {
-                    decos = decos.remove(
-                        decos.find(
-                            null,
-                            null,
+                    newDecos = newDecos.remove(
+                        newDecos.find(
+                            undefined,
+                            undefined,
                             spec => spec.type == "deletion-highlight"
                         )
                     )
@@ -589,12 +684,19 @@ export const diffPlugin = options =>
                     const decorationId = Number.parseInt(
                         tr.getMeta("decorationId")
                     )
-                    decos = decos.remove(
-                        decos.find(null, null, spec => spec.id == decorationId)
+                    newDecos = newDecos.remove(
+                        newDecos.find(
+                            undefined,
+                            undefined,
+                            spec => spec.id == decorationId
+                        )
                     )
                 }
                 if (tr.getMeta("highlight")) {
-                    const data = tr.getMeta("highlight")
+                    const data = tr.getMeta("highlight") as {
+                        from: string
+                        to: string
+                    }
                     const from = options.merge.mergedDocMap.map(
                         Number.parseInt(data.from)
                     )
@@ -602,8 +704,8 @@ export const diffPlugin = options =>
                         Number.parseInt(data.to)
                     )
                     if (from && to) {
-                        decos = createDeletionHighlight(
-                            decos,
+                        newDecos = createDeletionHighlight(
+                            newDecos,
                             from,
                             to,
                             state,
@@ -615,14 +717,14 @@ export const diffPlugin = options =>
                 if (tr.getMeta("initialDiffMap")) {
                     // If it is initial diffMap we update mark data
                     // So no need to update the deco's position.
-                    decos = decos.map(new Mapping(), tr.doc)
+                    newDecos = newDecos.map(new Mapping(), tr.doc)
                 } else {
-                    decos = decos.map(tr.mapping, tr.doc)
+                    newDecos = newDecos.map(tr.mapping, tr.doc)
                 }
                 return {
                     baseTr: baseTr,
                     deletionClass: deletionClass,
-                    decos: decos
+                    decos: newDecos
                 }
             }
         },
@@ -630,7 +732,6 @@ export const diffPlugin = options =>
             handleClick: (view, _pos, event) => {
                 const $pos = view.state.doc.resolve(_pos)
                 if (
-                    $pos.node &&
                     $pos.parent &&
                     $pos.parent.type.name == "figure"
                 ) {
@@ -647,73 +748,79 @@ export const diffPlugin = options =>
                 const delDeco = view.dom.querySelectorAll(
                     ".offline-deleted,.online-deleted"
                 )
-                if (delDeco) {
-                    delDeco.forEach(item =>
-                        item.classList.remove("selected-dec")
-                    )
-                }
+                delDeco.forEach(item =>
+                    item.classList.remove("selected-dec")
+                )
                 const delPopUp = view.dom.querySelectorAll(
                     ".deletion-decoration .drop-up-outer"
                 )
-                if (delPopUp) {
-                    delPopUp.forEach(popUp => (popUp.style.display = "none"))
-                }
+                delPopUp.forEach(
+                    popUp => ((popUp as HTMLElement).style.display = "none")
+                )
                 const delFnToolTip = view.dom.querySelectorAll(
                     ".deleted-footnote-element"
                 )
-                if (delFnToolTip) {
-                    delFnToolTip.forEach(
-                        tooltip =>
-                            (tooltip.childNodes[0].style.display = "none")
-                    )
-                }
+                delFnToolTip.forEach(tooltip =>
+                    ((tooltip.childNodes[0] as HTMLElement).style.display =
+                        "none")
+                )
                 options.merge.mergeView2.dispatch(
                     options.merge.mergeView2.state.tr.setMeta(
                         "removeHighlight",
                         true
                     )
                 )
-                if (event.target.closest(".offline-deleted")) {
-                    const parentEl = event.target.closest(
-                        ".deletion-decoration"
-                    )
+                const target = event.target as HTMLElement
+                const offlineDeleted = target.closest(".offline-deleted")
+                if (offlineDeleted) {
+                    const parentEl = target.closest(".deletion-decoration")
+                    if (!parentEl) {
+                        return false
+                    }
                     const highlightEle =
                         parentEl.querySelectorAll(".offline-deleted")
-                    if (highlightEle) {
-                        highlightEle.forEach(ele =>
-                            ele.classList.add("selected-dec")
-                        )
-                    }
-                    parentEl.querySelector(".drop-up-outer").style.display =
-                        "block"
+                    highlightEle.forEach(ele =>
+                        ele.classList.add("selected-dec")
+                    )
+                    ;(
+                        parentEl.querySelector(".drop-up-outer") as HTMLElement
+                    ).style.display = "block"
 
                     // Add a decoration to highlight decoration to the online/merged view
                     options.merge.mergeView2.dispatch(
                         options.merge.mergeView2.state.tr.setMeta("highlight", {
-                            from: parentEl.dataset.delfrom,
-                            to: parentEl.dataset.delto
+                            from: (parentEl as HTMLElement).dataset.delfrom,
+                            to: (parentEl as HTMLElement).dataset.delto
                         })
                     )
-                } else if (event.target.closest(".online-deleted")) {
-                    const parentEl = event.target.closest(
-                        ".deletion-decoration"
-                    )
-                    const highlightEle =
-                        parentEl.querySelectorAll(".online-deleted")
-                    if (highlightEle) {
+                } else {
+                    const onlineDeleted = target.closest(".online-deleted")
+                    if (onlineDeleted) {
+                        const parentEl = target.closest(".deletion-decoration")
+                        if (!parentEl) {
+                            return false
+                        }
+                        const highlightEle =
+                            parentEl.querySelectorAll(".online-deleted")
                         highlightEle.forEach(ele =>
                             ele.classList.add("selected-dec")
                         )
+                        ;(
+                            parentEl.querySelector(
+                                ".drop-up-outer"
+                            ) as HTMLElement
+                        ).style.display = "block"
                     }
-                    parentEl.querySelector(".drop-up-outer").style.display =
-                        "block"
                 }
-                if (event.target.matches(".deleted-footnote-element")) {
-                    event.target.childNodes[0].style.display = "block"
+                if (target.matches(".deleted-footnote-element")) {
+                    ;(
+                        target.childNodes[0] as HTMLElement
+                    ).style.display = "block"
                 }
+                return false
             },
             decorations(state) {
-                const {decos} = this.getState(state)
+                const {decos} = key.getState(state)!
                 return decos
             }
         },
@@ -721,11 +828,14 @@ export const diffPlugin = options =>
             return {
                 update: view => {
                     // Make sure that pop stays inside the view.
-                    const changePopUp = view.dom.querySelector(".drop-up-outer")
+                    const changePopUp = view.dom.querySelector(
+                        ".drop-up-outer"
+                    ) as HTMLElement | null
                     if (changePopUp) {
                         const bounding = changePopUp.getBoundingClientRect()
-                        const dialogBox =
-                            document.querySelector("#editor-merge-view")
+                        const dialogBox = document.querySelector(
+                            "#editor-merge-view"
+                        ) as HTMLElement | null
                         if (dialogBox) {
                             if (
                                 bounding.right > dialogBox.offsetWidth ||
@@ -741,11 +851,12 @@ export const diffPlugin = options =>
                     // Make sure that the deletion decoration footnote stays inside the view
                     const footnote = view.dom.querySelector(
                         ".offline-deleted.deleted-footnote-element .footnote-tooltip"
-                    )
+                    ) as HTMLElement | null
                     if (footnote) {
                         const bounding = footnote.getBoundingClientRect()
-                        const dialogBox =
-                            document.querySelector("#editor-merge-view")
+                        const dialogBox = document.querySelector(
+                            "#editor-merge-view"
+                        ) as HTMLElement | null
                         if (dialogBox) {
                             if (
                                 bounding.right > dialogBox.offsetWidth ||