@fiduswriter/editor 0.1.20 → 0.1.21

package/src/comments/editors/{schema.js → schema.ts}

@@ -1,5 +1,6 @@
 import {DOMSerializer, Schema} from "prosemirror-model"
 import {nodes} from "prosemirror-schema-basic"
+import type {Node} from "prosemirror-model"
 
 const collaborator = {
     inline: true,
@@ -15,15 +16,15 @@ const collaborator = {
     parseDOM: [
         {
             tag: "span.collaborator",
-            getAttrs(dom) {
+            getAttrs(dom: HTMLElement) {
                 return {
-                    username: dom.dataset.name,
-                    id: Number.parseInt(dom.dataset.id)
+                    name: dom.dataset.name,
+                    id: Number.parseInt(dom.dataset.id || "0")
                 }
             }
         }
     ],
-    toDOM(node) {
+    toDOM(node: Node): [string, Record<string, unknown>, string] {
         return [
             "span",
             {
@@ -38,7 +39,7 @@ const collaborator = {
 
 const doc = {
     content: "block+",
-    toDOM(_node) {
+    toDOM(): [string, number] {
         return ["div", 0]
     }
 }
@@ -53,13 +54,13 @@ export const commentSchema = new Schema({
     marks: {}
 })
 
-export const serializeCommentNode = pmNode => {
+export const serializeCommentNode = (pmNode: Node): {html: string; text: string} => {
     const serializer = DOMSerializer.fromSchema(commentSchema),
-        dom = serializer.serializeNode(pmNode)
+        dom = serializer.serializeNode(pmNode) as HTMLElement
     return {html: dom.innerHTML, text: dom.innerText}
 }
 
-export const serializeComment = content => {
+export const serializeComment = (content: unknown): {html: string; text: string} => {
     const pmNode = commentSchema.nodeFromJSON({type: "doc", content})
     return serializeCommentNode(pmNode)
 }

package/src/comments/index.ts

@@ -0,0 +1,16 @@
+import {ModCommentInteractions} from "./interactions.js"
+import {ModCommentStore} from "./store.js"
+import type {Editor} from "../types.js"
+
+export class ModComments {
+    editor: Editor
+    store: ModCommentStore
+    interactions: ModCommentInteractions
+
+    constructor(editor: Editor) {
+        editor.mod.comments = this
+        this.editor = editor
+        this.store = new ModCommentStore(this)
+        this.interactions = new ModCommentInteractions(this)
+    }
+}

package/src/comments/{interactions.js → interactions.ts}

@@ -1,17 +1,36 @@
-import {GapCursor} from "prosemirror-gapcursor"
+import type {Node as ProseMirrorNode} from "prosemirror-model"
 import {TextSelection} from "prosemirror-state"
+import {GapCursor} from "prosemirror-gapcursor"
+import type {EditorView} from "prosemirror-view"
 
 import {findTarget, post} from "fwtoolkit"
 import {READ_ONLY_ROLES} from "../index.js"
+import type {Editor} from "../types.js"
 import {
     deactivateAllSelectedChanges,
     getCommentDuringCreationDecoration
 } from "../state_plugins/index.js"
-import {CommentAnswerEditor, CommentEditor, serializeComment} from "./editors/index.js"
+import {
+    CommentAnswerEditor,
+    CommentEditor,
+    serializeComment
+} from "./editors/index.js"
+
+interface InteractionsMod {
+    editor: Editor
+    store: any
+    interactions: any
+}
 
-/* Functions related to user interactions with comments */
 export class ModCommentInteractions {
-    constructor(mod) {
+    mod: InteractionsMod
+    activeCommentId: string | number | false
+    activeCommentAnswerId: string | number | false
+    editComment: boolean
+    creatingGlobalComment: boolean
+    editor: CommentEditor | CommentAnswerEditor | false
+
+    constructor(mod: InteractionsMod) {
         mod.interactions = this
         this.mod = mod
         this.activeCommentId = false
@@ -22,16 +41,16 @@ export class ModCommentInteractions {
         this.bindEvents()
     }
 
-    bindEvents() {
+    bindEvents(): void {
         // Bind all the click events related to comments
         document.body.addEventListener("click", event => {
-            const el = {}
-            let id
+            const el: {target?: HTMLElement} = {}
+            let id: string | number
             switch (true) {
                 case findTarget(event, ".edit-comment", el):
                     this.editComment = true
                     this.activeCommentAnswerId = false
-                    id = el.target.dataset.id
+                    id = (el.target as HTMLElement).dataset.id as string
 
                     if (this.activeCommentId !== id) {
                         this.deactivateSelectedChanges()
@@ -45,33 +64,43 @@ export class ModCommentInteractions {
                 case findTarget(event, ".edit-comment-answer", el):
                     this.editComment = false
                     this.editAnswer(
-                        el.target.dataset.id,
-                        el.target.dataset.answer
+                        (el.target as HTMLElement).dataset.id as string,
+                        (el.target as HTMLElement).dataset.answer as string
                     )
                     break
                 case findTarget(event, ".resolve-comment", el):
-                    this.resolveComment(el.target.dataset.id)
+                    this.resolveComment(
+                        (el.target as HTMLElement).dataset.id as string
+                    )
                     break
                 case findTarget(event, ".recreate-comment", el):
-                    this.recreateComment(el.target.dataset.id)
+                    this.recreateComment(
+                        (el.target as HTMLElement).dataset.id as string
+                    )
                     break
                 case findTarget(event, ".assign-comment", el):
                     this.assignComment(
-                        el.target.dataset.id,
-                        Number.parseInt(el.target.dataset.user),
-                        el.target.dataset.username
+                        (el.target as HTMLElement).dataset.id as string,
+                        Number.parseInt(
+                            (el.target as HTMLElement).dataset.user as string
+                        ),
+                        (el.target as HTMLElement).dataset.username as string
                     )
                     break
                 case findTarget(event, ".unassign-comment", el):
-                    this.unassignComment(el.target.dataset.id)
+                    this.unassignComment(
+                        (el.target as HTMLElement).dataset.id as string
+                    )
                     break
                 case findTarget(event, ".fw-delete-comment", el):
-                    this.deleteComment(el.target.dataset.id)
+                    this.deleteComment(
+                        (el.target as HTMLElement).dataset.id as string
+                    )
                     break
                 case findTarget(event, ".delete-comment-answer", el):
                     this.deleteCommentAnswer(
-                        el.target.dataset.id,
-                        el.target.dataset.answer
+                        (el.target as HTMLElement).dataset.id as string,
+                        (el.target as HTMLElement).dataset.answer as string
                     )
                     break
                 default:
@@ -80,7 +109,7 @@ export class ModCommentInteractions {
         })
     }
 
-    initEditor() {
+    initEditor(): void {
         const commentEditorDOM = document.querySelector("#comment-editor"),
             answerEditorDOM = document.querySelector("#answer-editor")
 
@@ -96,7 +125,7 @@ export class ModCommentInteractions {
             this.editor = false
             return
         }
-        const id = this.activeCommentId
+        const id = this.activeCommentId as string | number
         if (commentEditorDOM) {
             const value =
                     id === "-1"
@@ -111,8 +140,8 @@ export class ModCommentInteractions {
                         : this.mod.store.comments[id]?.isGlobal
             this.editor = new CommentEditor(
                 this.mod,
-                id,
-                commentEditorDOM,
+                id as string,
+                commentEditorDOM as HTMLElement,
                 value.text,
                 {isMajor: value.isMajor, isGlobal}
             )
@@ -120,52 +149,52 @@ export class ModCommentInteractions {
             const answerId = this.activeCommentAnswerId,
                 text = answerId
                     ? this.mod.store.comments[id].answers.find(
-                          answer => answer.id === answerId
+                          (answer: any) => answer.id === answerId
                       ).answer
                     : []
             this.editor = new CommentAnswerEditor(
                 this.mod,
-                id,
-                answerEditorDOM,
+                id as string,
+                answerEditorDOM as HTMLElement,
                 text,
-                {answerId}
+                {answerId: answerId ? Number(answerId) : undefined}
             )
         }
 
         this.editor.init()
     }
 
-    updateDOM() {
-        this.mod.editor.mod.marginboxes.updateDOM()
+    updateDOM(): void {
+        ;(this.mod.editor.mod as any).marginboxes.updateDOM()
         this.initEditor()
     }
 
-    findCommentIds(node) {
+    findCommentIds(node: ProseMirrorNode): (string | number)[] {
         return node.marks
             .filter(mark => mark.type.name === "comment" && mark.attrs.id)
             .map(mark => mark.attrs.id)
     }
 
-    findCommentsAt(node) {
+    findCommentsAt(node: ProseMirrorNode): (any | false)[] {
         return this.findCommentIds(node).map(id =>
             this.mod.store.findComment(id)
         )
     }
 
-    deactivateSelectedChanges() {
+    deactivateSelectedChanges(): void {
         const tr = deactivateAllSelectedChanges(this.mod.editor.view.state.tr)
         if (tr) {
             this.mod.editor.view.dispatch(tr)
         }
         const fnTr = deactivateAllSelectedChanges(
-            this.mod.editor.mod.footnotes.fnEditor.view.state.tr
+            (this.mod.editor.mod as any).footnotes.fnEditor.view.state.tr
         )
         if (fnTr) {
-            this.mod.editor.mod.footnotes.fnEditor.view.dispatch(fnTr)
+            ;(this.mod.editor.mod as any).footnotes.fnEditor.view.dispatch(fnTr)
         }
     }
 
-    collapseSelectionToEnd() {
+    collapseSelectionToEnd(): void {
         const $pos = this.mod.editor.currentView.state.selection.$to
         const validTextSelection = $pos.parent.inlineContent
         const selection = validTextSelection
@@ -177,13 +206,13 @@ export class ModCommentInteractions {
         }
     }
 
-    activateComment(id) {
+    activateComment(id: string | number): void {
         this.deactivateAll()
         this.activeCommentId = id
         this.updateDOM()
     }
 
-    deactivateAll() {
+    deactivateAll(): void {
         this.activeCommentId = false
         this.editComment = false
         this.activeCommentAnswerId = false
@@ -194,9 +223,9 @@ export class ModCommentInteractions {
 
     // Activate the comments included in the selection or the comment where the
     // caret is placed, if the editor is in focus.
-    activateSelectedComment(view) {
+    activateSelectedComment(view: EditorView): void {
         const selection = view.state.selection
-        let comments = []
+        let comments: (any | false)[] = []
 
         if (selection.empty) {
             const node = view.state.doc.nodeAt(selection.from)
@@ -204,12 +233,16 @@ export class ModCommentInteractions {
                 comments = this.findCommentsAt(node)
             }
         } else {
-            view.state.doc.nodesBetween(selection.from, selection.to, node => {
-                if (!node.isInline) {
-                    return
+            view.state.doc.nodesBetween(
+                selection.from,
+                selection.to,
+                (node: ProseMirrorNode) => {
+                    if (!node.isInline) {
+                        return
+                    }
+                    comments = comments.concat(this.findCommentsAt(node))
                 }
-                comments = comments.concat(this.findCommentsAt(node))
-            })
+            )
         }
 
         if (comments.length) {
@@ -222,7 +255,7 @@ export class ModCommentInteractions {
         }
     }
 
-    isCurrentlyEditing() {
+    isCurrentlyEditing(): boolean {
         // Returns true if
         // A) a comment form is currently open
         // B) the comment answer edit form is currently open
@@ -238,11 +271,11 @@ export class ModCommentInteractions {
             // a comment answer edit form is currently open
             return true
         }
-        if (this.editor?.view && this.editor?.view.hasFocus()) {
+        if (this.editor && this.editor.view && this.editor.view.hasFocus()) {
             // There is currently focus in the comment (answer) form
             return true
         }
-        if (this.editor?.hasChanged?.()) {
+        if (this.editor && this.editor.hasChanged?.()) {
             // Part of a comment (answer) has been entered/changed.
             return true
         }
@@ -250,7 +283,10 @@ export class ModCommentInteractions {
             // A margin box options menu is open.
             return true
         }
-        if (this.mod.store.commentDuringCreation.inDOM === false) {
+        if (
+            this.mod.store.commentDuringCreation &&
+            this.mod.store.commentDuringCreation.inDOM === false
+        ) {
             // A new comment is about to be created, but it has not
             // yet been added to the DOM.
             return true
@@ -260,33 +296,41 @@ export class ModCommentInteractions {
 
     // Create a temporary empty comment for the current user that is not shared
     // with collaborators.
-    createNewComment() {
+    createNewComment(): void {
         // Unhide comments if they had been hidden.
-        this.mod.editor.mod.marginboxes.filterOptions.comments = true
+        ;(this.mod.editor.mod as any).marginboxes.filterOptions.comments = true
         this.deactivateAll()
         this.mod.store.addCommentDuringCreation(this.mod.editor.currentView)
         this.activeCommentId = "-1"
         this.editComment = true
         this.updateDOM()
-        this.editor.view.focus()
+        if (this.editor) {
+            this.editor.view.focus()
+        }
     }
 
     // Create a temporary empty global comment for the entire document.
-    createNewGlobalComment() {
-        if (READ_ONLY_ROLES.includes(this.mod.editor.docInfo.access_rights)) {
+    createNewGlobalComment(): void {
+        if (
+            READ_ONLY_ROLES.includes(
+                this.mod.editor.docInfo.access_rights as string
+            )
+        ) {
             return
         }
-        this.mod.editor.mod.marginboxes.filterOptions.comments = true
+        ;(this.mod.editor.mod as any).marginboxes.filterOptions.comments = true
         this.deactivateAll()
         this.creatingGlobalComment = true
         this.mod.store.addGlobalCommentDuringCreation()
         this.activeCommentId = "-1"
         this.editComment = true
         this.updateDOM()
-        this.editor.view.focus()
+        if (this.editor) {
+            this.editor.view.focus()
+        }
     }
 
-    deleteComment(id) {
+    deleteComment(id: string | number): void {
         if (id === "-1") {
             this.deactivateAll()
         } else {
@@ -296,21 +340,22 @@ export class ModCommentInteractions {
         this.updateDOM()
     }
 
-    resolveComment(id) {
+    resolveComment(id: string | number): void {
         this.mod.store.updateComment({id, resolved: true})
     }
 
-    recreateComment(id) {
+    recreateComment(id: string | number): void {
         if (this.editor) {
-            this.editor.dom.childNodes.forEach(node => {
-                if (node.classList && node.classList.contains("comment-btns")) {
-                    node.childNodes.forEach(buttons => {
+            this.editor.dom.childNodes.forEach((node: ChildNode) => {
+                const el = node as HTMLElement
+                if (el.classList?.contains("comment-btns")) {
+                    el.childNodes.forEach(buttons => {
+                        const buttonEl = buttons as HTMLElement
                         if (
-                            buttons.classList &&
-                            buttons.classList.contains("submit") &&
-                            buttons.classList.contains("fw-disabled")
+                            buttonEl.classList?.contains("submit") &&
+                            buttonEl.classList?.contains("fw-disabled")
                         ) {
-                            buttons.classList.remove("fw-disabled")
+                            buttonEl.classList.remove("fw-disabled")
                         }
                     })
                 }
@@ -319,7 +364,11 @@ export class ModCommentInteractions {
         this.mod.store.updateComment({id, resolved: false})
     }
 
-    assignComment(id, user, username) {
+    assignComment(
+        id: string | number,
+        user: number,
+        username: string
+    ): void {
         this.notifyAssignedUser(user, id)
         this.mod.store.updateComment({
             id,
@@ -328,7 +377,7 @@ export class ModCommentInteractions {
         })
     }
 
-    unassignComment(id) {
+    unassignComment(id: string | number): void {
         this.mod.store.updateComment({
             id,
             assignedUser: false,
@@ -336,7 +385,7 @@ export class ModCommentInteractions {
         })
     }
 
-    notifyAssignedUser(user, id) {
+    notifyAssignedUser(user: number, id: string | number): void {
         const comment = this.mod.store.findComment(id)
         const {html, text} = serializeComment(comment.comment)
 
@@ -349,25 +398,33 @@ export class ModCommentInteractions {
         })
     }
 
-    updateComment({id, comment, isMajor}) {
+    updateComment({
+        id,
+        comment,
+        isMajor
+    }: {
+        id: string | number
+        comment: any[]
+        isMajor: boolean
+    }): string | number {
         // Save the change to a comment and mark that the document has been changed
-        let commentId
+        let commentId: string | number = id
         if (id === "-1") {
-            let username
+            let username: string
 
             if (
                 ["review", "review-tracked"].includes(
-                    this.mod.editor.docInfo.access_rights
+                    this.mod.editor.docInfo.access_rights as string
                 )
             ) {
-                username = `${gettext("Reviewer")} ${this.mod.editor.user.id}`
+                username = `${gettext("Reviewer")} ${(this.mod.editor.user as any).id}`
             } else {
-                username = this.mod.editor.user.username
+                username = (this.mod.editor.user as any).username
             }
 
             if (this.creatingGlobalComment) {
                 commentId = this.mod.store.addGlobalComment({
-                    user: this.mod.editor.user.id,
+                    user: (this.mod.editor.user as any).id,
                     username,
                     date: Date.now() - this.mod.editor.clientTimeAdjustment,
                     comment,
@@ -381,14 +438,14 @@ export class ModCommentInteractions {
 
                 this.mod.store.addComment(
                     {
-                        user: this.mod.editor.user.id,
+                        user: (this.mod.editor.user as any).id,
                         username,
                         date: Date.now() - this.mod.editor.clientTimeAdjustment,
                         comment,
                         isMajor
                     },
-                    referrer.from,
-                    referrer.to,
+                    (referrer as {from: number; to: number}).from,
+                    (referrer as {from: number; to: number}).to,
                     this.mod.store.commentDuringCreation.view
                 )
             }
@@ -401,9 +458,9 @@ export class ModCommentInteractions {
         return commentId
     }
 
-    cancelSubmit() {
+    cancelSubmit(): void {
         // Handle a click on the cancel button of the comment submit form.
-        const id = this.activeCommentId
+        const id = this.activeCommentId as string | number
         if (id === "-1" || this.mod.store.comments[id]?.comment.length === 0) {
             this.deleteComment(id)
         } else {
@@ -412,14 +469,14 @@ export class ModCommentInteractions {
         this.updateDOM()
     }
 
-    deleteCommentAnswer(id, answerId) {
+    deleteCommentAnswer(id: string | number, answerId: string | number): void {
         // Handle the deletion of a comment answer.
         this.mod.store.deleteAnswer(id, answerId)
         this.deactivateAll()
         this.updateDOM()
     }
 
-    editAnswer(id, answerId) {
+    editAnswer(id: string | number, answerId: string | number): void {
         // Mark a specific answer to a comment as active, then layout the
         // comments, which will make that answer editable.
         this.activeCommentId = id
@@ -427,24 +484,24 @@ export class ModCommentInteractions {
         this.updateDOM()
     }
 
-    createNewAnswer(id, answerText) {
+    createNewAnswer(id: string | number, answerText: string): void {
         // Create a new answer to add to the comment store
 
-        let username
+        let username: string
 
         if (
             ["review", "review-tracked"].includes(
-                this.mod.editor.docInfo.access_rights
+                this.mod.editor.docInfo.access_rights as string
             )
         ) {
-            username = `${gettext("Reviewer")} ${this.mod.editor.user.id}`
+            username = `${gettext("Reviewer")} ${(this.mod.editor.user as any).id}`
         } else {
-            username = this.mod.editor.user.username
+            username = (this.mod.editor.user as any).username
         }
 
         const answer = {
             answer: answerText,
-            user: this.mod.editor.user.id,
+            user: (this.mod.editor.user as any).id,
             username,
             date: Date.now() - this.mod.editor.clientTimeAdjustment
         }
@@ -456,7 +513,11 @@ export class ModCommentInteractions {
         this.activateComment(id)
     }
 
-    submitAnswerUpdate(id, answerId, commentText) {
+    submitAnswerUpdate(
+        id: string | number,
+        answerId: string | number,
+        commentText: string
+    ): void {
         this.mod.store.updateAnswer(id, answerId, commentText)
         this.deactivateAll()
         this.updateDOM()