@fiduswriter/editor 0.1.20 → 0.1.21

package/src/collab/merge/{tools.js → tools.ts}

@@ -1,8 +1,13 @@
-import {Fragment, Slice} from "prosemirror-model"
-import {EditorState} from "prosemirror-state"
+import {Fragment, Slice, Node, Schema} from "prosemirror-model"
+import {EditorState, Transaction} from "prosemirror-state"
 import {ReplaceStep} from "prosemirror-transform"
+import type {EditorView} from "prosemirror-view"
 
-export const checkPresenceOfdiffdata = (doc, from, to) => {
+export const checkPresenceOfdiffdata = (
+    doc: Node,
+    from: number,
+    to: number
+): boolean => {
     /* This function checks whether diff mark is present inside the given range */
     let diffAttrPresent = false
     if (doc.rangeHasMark(from, to, doc.type.schema.marks.diffdata)) {
@@ -16,7 +21,7 @@ export const checkPresenceOfdiffdata = (doc, from, to) => {
     return diffAttrPresent
 }
 
-export const simplifyTransform = tr => {
+export const simplifyTransform = (tr: Transaction): Transaction => {
     /* This splits complex insertion & Deletion steps into simple insertion and deletion
     steps */
     if (tr.docChanged && tr.docs.length > 0) {
@@ -30,7 +35,7 @@ export const simplifyTransform = tr => {
                           step.to, // We insert all the same steps, but with "from"/"to" both set to "to" in order not to delete content. Mapped as needed.
                           step.to,
                           step.slice,
-                          step.structure
+                          (step as any).structure
                       )
                     : false
                 if (modifiedStep) {
@@ -44,7 +49,7 @@ export const simplifyTransform = tr => {
                                 step.from,
                                 step.to,
                                 Slice.empty,
-                                step.structure
+                                (step as any).structure
                             )
                         ).failed
                     ) {
@@ -67,7 +72,11 @@ export const simplifyTransform = tr => {
     }
 }
 
-export const removeDiffdata = (tr, from, to) => {
+export const removeDiffdata = (
+    tr: Transaction,
+    from: number,
+    to: number
+): Transaction => {
     /* Adds steps to a tr to remove all the diff marks in the given range. */
     tr.doc.nodesBetween(from, to, (node, pos) => {
         if (
@@ -86,19 +95,28 @@ export const removeDiffdata = (tr, from, to) => {
                 node.marks
             )
         }
+        return true
     })
     tr.removeMark(from, to, tr.doc.type.schema.marks.diffdata)
     return tr
 }
 
-export const dispatchRemoveDiffdata = (view, from, to) => {
+export const dispatchRemoveDiffdata = (
+    view: EditorView,
+    from: number,
+    to: number
+): void => {
     const tr = removeDiffdata(view.state.tr, from, to)
     tr.setMeta("initialDiffMap", true).setMeta("mapAppended", true)
     tr.setMeta("notrack", true)
     view.dispatch(tr)
 }
 
-export const updateMarkData = (tr, imageDataModified, newTr) => {
+export const updateMarkData = (
+    tr: Transaction,
+    imageDataModified: Record<string, number>,
+    newTr: Transaction
+): Transaction => {
     /* Update the range inside the marks and also if we have a image that
     was reuploaded , then while accepting it into the middle editor,
     update its attrs */
@@ -112,20 +130,20 @@ export const updateMarkData = (tr, imageDataModified, newTr) => {
                     mark => mark.type.name == "diffdata"
                 )
                 if (diffMark !== undefined) {
-                    diffMark = diffMark.attrs
+                    const diffAttrs = diffMark.attrs
                     newTr.removeMark(
                         pos,
                         pos + node.nodeSize,
                         tr.doc.type.schema.marks.diffdata
                     )
-                    const from = tr.mapping.map(diffMark.from)
-                    const to = tr.mapping.map(diffMark.to, -1)
+                    const from = tr.mapping.map(diffAttrs.from)
+                    const to = tr.mapping.map(diffAttrs.to, -1)
                     const mark = tr.doc.type.schema.marks.diffdata.create({
-                        diff: diffMark.diff,
-                        steps: diffMark.steps,
+                        diff: diffAttrs.diff,
+                        steps: diffAttrs.steps,
                         from: from,
                         to: to,
-                        markOnly: diffMark.markOnly
+                        markOnly: diffAttrs.markOnly
                     })
                     newTr.addMark(pos, pos + node.nodeSize, mark)
                 }
@@ -136,13 +154,13 @@ export const updateMarkData = (tr, imageDataModified, newTr) => {
                     String(node.attrs.image)
                 )
             ) {
-                const attrs = Object.assign({}, node.attrs)
+                const attrs = Object.assign({}, node.attrs) as Record<string, any>
                 attrs["image"] = imageDataModified[String(node.attrs.image)]
                 const nodeType = tr.doc.type.schema.nodes["image"]
                 newTr.setNodeMarkup(pos, nodeType, attrs)
             }
             if (node.attrs.diffdata && node.attrs.diffdata.length > 0) {
-                const diffdata = node.attrs.diffdata
+                const diffdata = node.attrs.diffdata as any[]
                 diffdata[0].from = tr.mapping.map(diffdata[0].from)
                 diffdata[0].to = tr.mapping.map(diffdata[0].to)
                 newTr.setNodeMarkup(
@@ -152,31 +170,39 @@ export const updateMarkData = (tr, imageDataModified, newTr) => {
                     node.marks
                 )
             }
+            return true
         })
     }
     return newTr
 }
 
-export const removeDiffFromJson = object => {
+export const removeDiffFromJson = (object: any): any => {
     /* Used to convert a document from the merge editor to a doc that complies with the schema of the main editor */
     if (object.attrs && object.attrs.diffdata) {
         delete object.attrs.diffdata
     }
     if (object.marks) {
-        object.marks = object.marks.filter(mark => mark.type !== "diffdata")
+        object.marks = object.marks.filter(
+            (mark: any) => mark.type !== "diffdata"
+        )
     }
     if (object.content) {
-        object.content.forEach(child => removeDiffFromJson(child))
+        object.content.forEach((child: any) => removeDiffFromJson(child))
     }
     return object
 }
 
-function mapFragment(fragment, f, parent, mark) {
-    const mapped = []
+function mapFragment(
+    fragment: Fragment,
+    f: (node: Node, parent: Node | undefined, index: number) => Node,
+    parent: Node | undefined,
+    mark: any
+): Fragment {
+    const mapped: Node[] = []
     for (let i = 0; i < fragment.childCount; i++) {
         let child = fragment.child(i)
         if (child.attrs.diffdata) {
-            const diffdata = []
+            const diffdata: any[] = []
             diffdata.push({
                 type: mark.attrs.diff,
                 from: mark.attrs.from,
@@ -184,7 +210,7 @@ function mapFragment(fragment, f, parent, mark) {
                 steps: mark.attrs.steps
             })
             const attrs = Object.assign({}, child.attrs, {diffdata})
-            const dummyNode = child.type.create(attrs, null, child.marks)
+            const dummyNode = child.type.create(attrs, undefined, child.marks)
             child = dummyNode.copy(child.content)
         }
         if (child.content.size) {
@@ -198,11 +224,15 @@ function mapFragment(fragment, f, parent, mark) {
     return Fragment.fromArray(mapped)
 }
 
-export const addDeletionMarks = (slice, mark) => {
+export const addDeletionMarks = (
+    slice: Slice,
+    mark: any,
+    _schema?: Schema
+): Fragment => {
     const content = mapFragment(
         slice.content,
         (node, parent) => {
-            if (parent.type && !parent.type.allowsMarkType(mark.type)) {
+            if (parent?.type && !parent.type.allowsMarkType(mark.type)) {
                 return node
             }
             if (node.isInline) {
@@ -210,7 +240,7 @@ export const addDeletionMarks = (slice, mark) => {
             }
             return node
         },
-        parent,
+        undefined,
         mark
     )
     return content

package/src/collab/{templates.js → templates.ts}

@@ -1,10 +1,25 @@
 import {avatarTemplate, escapeText, localizeDate} from "fwtoolkit"
-export const messageTemplate = ({message, theChatter}) =>
+
+interface Chatter {
+    name: string
+}
+
+interface Message {
+    id: number
+    body: string
+}
+
+interface MessageParams {
+    message: Message
+    theChatter: Chatter
+}
+
+export const messageTemplate = ({message, theChatter}: MessageParams) =>
     `<div class="fw-message" id="m${message.id}">
         <div class="comment-user">
             ${avatarTemplate({user: theChatter})}
             <h5 class="comment-user-name">${escapeText(theChatter.name)}</h5>
-            <p class="comment-date">${localizeDate(new Date())}</p>
+            <p class="comment-date">${localizeDate(Date.now())}</p>
         </div>
         <div class="message-body">${escapeText(message.body)}</div>
     </div>`

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

@@ -1,4 +1,17 @@
 export class Comment {
+    id: number | string
+    user: number
+    username: string
+    assignedUser: number | false
+    assignedUsername: string | false
+    date: number
+    comment: any[]
+    answers: any[]
+    isMajor: boolean
+    resolved: boolean
+    hidden: boolean
+    isGlobal: boolean
+
     constructor({
         id,
         user,
@@ -12,6 +25,19 @@ export class Comment {
         resolved = false,
         hidden = false,
         isGlobal = false
+    }: {
+        id: number | string
+        user: number
+        username: string
+        assignedUser?: number | false
+        assignedUsername?: string | false
+        date: number
+        comment?: any[]
+        answers?: any[]
+        isMajor?: boolean
+        resolved?: boolean
+        hidden?: boolean
+        isGlobal?: boolean
     }) {
         this.id = id
         this.user = user // User ID of user who wrote comment

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

@@ -1,14 +1,28 @@
 import {TextSelection} from "prosemirror-state"
-import {CommentEditor} from "./comment.js"
+
+import {CommentEditor, type CommentMod} from "./comment.js"
+
+interface CommentAnswerOptions {
+    answerId?: number
+    isMajor?: boolean
+}
 
 export class CommentAnswerEditor extends CommentEditor {
-    constructor(mod, id, dom, text, options = {}) {
+    keepOpenAfterSubmit: boolean
+
+    constructor(
+        mod: CommentMod,
+        id: string,
+        dom: HTMLElement,
+        text: unknown[],
+        options: CommentAnswerOptions = {}
+    ) {
         super(mod, id, dom, text, options)
 
         this.keepOpenAfterSubmit = true
     }
 
-    initViewDOM() {
+    initViewDOM(): void {
         this.viewDOM = document.createElement("div")
         this.viewDOM.classList.add("ProseMirror-wrapper")
         this.dom.appendChild(this.viewDOM)
@@ -16,7 +30,7 @@ export class CommentAnswerEditor extends CommentEditor {
             "beforeend",
             `<div class="comment-btns">
                 <button class="submit fw-button fw-dark fw-disabled" type="submit">
-                    ${this.options.answerId ? gettext("Edit") : gettext("Submit")}
+                    ${(this.options as CommentAnswerOptions).answerId ? gettext("Edit") : gettext("Submit")}
                 </button>
                 <button class="cancel fw-button fw-orange" type="submit">
                     ${gettext("Cancel")}
@@ -26,9 +40,9 @@ export class CommentAnswerEditor extends CommentEditor {
         )
     }
 
-    initView() {
+    initView(): void {
         super.initView()
-        if (this.options.answerId) {
+        if ((this.options as CommentAnswerOptions).answerId && this.view) {
             const selection = TextSelection.atEnd(this.view.state.doc)
             this.view.dispatch(
                 this.view.state.tr.setSelection(selection).scrollIntoView()
@@ -36,19 +50,20 @@ export class CommentAnswerEditor extends CommentEditor {
         }
     }
 
-    submit() {
-        const text = this.view.state.doc.toJSON().content
+    submit(): void {
+        const text = this.view.state.doc.toJSON().content as unknown[]
         if (!text) {
             return
         }
-        if (this.options.answerId) {
-            this.mod.interactions.submitAnswerUpdate(
+        const interactions = (this.mod as {interactions?: {submitAnswerUpdate?: (commentId: string, answerId: number, text: unknown[]) => void; createNewAnswer?: (commentId: string, text: unknown[]) => void}}).interactions
+        if ((this.options as CommentAnswerOptions).answerId) {
+            interactions?.submitAnswerUpdate?.(
                 this.id,
-                this.options.answerId,
+                (this.options as CommentAnswerOptions).answerId as number,
                 text
             )
         } else {
-            this.mod.interactions.createNewAnswer(this.id, text)
+            interactions?.createNewAnswer?.(this.id, text)
         }
         this.sendNotifications()
     }

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

@@ -8,11 +8,68 @@ import {EditorView} from "prosemirror-view"
 
 import {avatarTemplate, escapeText, findTarget} from "fwtoolkit"
 
+import type {Editor} from "../../types.js"
 import {notifyMentionedUser} from "./notify.js"
 import {commentSchema} from "./schema.js"
 
+export interface CommentMod {
+    editor: Editor
+    interactions: {
+        updateComment: (args: {
+            id: string
+            comment: any
+            isMajor: boolean
+        }) => string
+        deleteComment: (id: string) => void
+        deactivateAll: () => void
+        activeCommentId: string | boolean
+        editComment: boolean
+        updateDOM: () => void
+        editor: CommentEditor
+        cancelSubmit: () => void
+        collapseSelectionToEnd: () => void
+    }
+}
+
+interface CommentOptions {
+    isMajor?: boolean
+    isGlobal?: boolean
+}
+
+interface User {
+    id: number
+    name: string
+    username: string
+}
+
+interface SuggestionArgs {
+    range: {from: number; to: number}
+    text: string
+}
+
 export class CommentEditor {
-    constructor(mod, id, dom, text, options = {}) {
+    mod: CommentMod
+    id: string
+    dom: HTMLElement
+    text: any
+    options: CommentOptions
+    isMajor: boolean | undefined
+    keepOpenAfterSubmit: boolean
+    selectedTag: number
+    userTaggerList: User[]
+    plugins: any[]
+    view!: EditorView
+    viewDOM!: HTMLElement
+    oldUserTags: number[]
+    tagRange: {from: number; to: number} | false
+
+    constructor(
+        mod: CommentMod,
+        id: string,
+        dom: HTMLElement,
+        text: any,
+        options: CommentOptions = {}
+    ) {
         this.mod = mod
         this.id = id
         this.dom = dom
@@ -24,12 +81,14 @@ export class CommentEditor {
         this.keepOpenAfterSubmit = false
         this.selectedTag = 0
         this.userTaggerList = []
+        this.oldUserTags = []
+        this.tagRange = false
         this.plugins = [
             history(),
             suggestionsPlugin({
                 escapeOnSelectionChange: true,
                 matcher: triggerCharacter("@"),
-                onEnter: args => {
+                onEnter: (args: SuggestionArgs) => {
                     this.selectedTag = 0
                     this.tagRange = args.range
                     const search = args.text.slice(1)
@@ -37,8 +96,9 @@ export class CommentEditor {
                         this.setUserTaggerList(search)
                         this.showUserTagger()
                     }
+                    return false
                 },
-                onChange: args => {
+                onChange: (args: SuggestionArgs) => {
                     this.selectedTag = 0
                     this.tagRange = args.range
                     const search = args.text.slice(1)
@@ -46,14 +106,19 @@ export class CommentEditor {
                         this.setUserTaggerList(search)
                         this.showUserTagger()
                     }
+                    return false
                 },
-                onExit: _args => {
+                onExit: (_args: SuggestionArgs) => {
                     this.selectedTag = 0
                     this.removeTagger()
+                    return false
                 },
-                onKeyDown: ({event}) => {
+                onKeyDown: ({event}: {event: KeyboardEvent}) => {
                     if (event.key === "ArrowDown") {
-                        if (this.userTaggerList.length > this.selectedTag + 1) {
+                        if (
+                            this.userTaggerList.length >
+                            this.selectedTag + 1
+                        ) {
                             this.selectedTag += 1
                             this.showUserTagger()
                         }
@@ -76,17 +141,20 @@ export class CommentEditor {
                 "Mod-z": undo,
                 "Mod-shift-z": undo,
                 "Mod-y": redo,
-                "Ctrl-Enter": () => this.submit()
+                "Ctrl-Enter": () => {
+                    this.submit()
+                    return true
+                }
             })
         ]
     }
 
-    init() {
+    init(): void {
         this.initViewDOM()
         this.initView()
     }
 
-    initViewDOM() {
+    initViewDOM(): void {
         this.viewDOM = document.createElement("div")
         this.viewDOM.classList.add("ProseMirror-wrapper")
         this.dom.appendChild(this.viewDOM)
@@ -107,7 +175,7 @@ export class CommentEditor {
         )
     }
 
-    initView() {
+    initView(): void {
         this.view = new EditorView(this.viewDOM, {
             state: EditorState.create({
                 schema: commentSchema,
@@ -127,9 +195,9 @@ export class CommentEditor {
         this.bind()
     }
 
-    bind() {
+    bind(): void {
         this.dom.addEventListener("click", event => {
-            const el = {}
+            const el: {target?: HTMLElement} = {}
             switch (true) {
                 case findTarget(event, "button.submit:not(.fw-disabled)", el):
                     {
@@ -173,7 +241,9 @@ export class CommentEditor {
                     this.view.focus()
                     break
                 case findTarget(event, ".tag-user", el):
-                    this.selectedTag = Number.parseInt(el.target.dataset.index)
+                    this.selectedTag = Number.parseInt(
+                        (el.target as HTMLElement).dataset.index || "0"
+                    )
                     this.selectUserTag()
                     this.view.focus()
                     break
@@ -185,7 +255,7 @@ export class CommentEditor {
         })
     }
 
-    hasChanged() {
+    hasChanged(): boolean {
         return (
             !deepEqual(
                 this.text.length ? this.text : [{type: "paragraph"}],
@@ -194,23 +264,22 @@ export class CommentEditor {
         )
     }
 
-    updateButtons() {
+    updateButtons(): void {
+        const submitButton = this.dom.querySelector("button.submit")
         if (this.hasChanged()) {
-            this.dom
-                .querySelector("button.submit")
-                .classList.remove("fw-disabled")
+            submitButton?.classList.remove("fw-disabled")
         } else {
-            this.dom.querySelector("button.submit").classList.add("fw-disabled")
+            submitButton?.classList.add("fw-disabled")
         }
     }
 
-    submit() {
+    submit(): string | false | void {
         const comment = this.view.state.doc.toJSON().content
         if (comment?.length > 0) {
             const id = this.mod.interactions.updateComment({
                 id: this.id,
                 comment,
-                isMajor: this.isMajor
+                isMajor: this.isMajor || false
             })
             this.sendNotifications()
             return id
@@ -220,34 +289,37 @@ export class CommentEditor {
         }
     }
 
-    sendNotifications() {
+    sendNotifications(): void {
         const newUserTags = this.getUserTags().filter(
             id => !this.oldUserTags.includes(id)
         )
         if (newUserTags.length) {
             const comment = this.view.state.doc,
-                docId = this.mod.editor.docInfo.id
+                docId = this.mod.editor.docInfo.id as number
             newUserTags.forEach(userId =>
                 notifyMentionedUser(docId, userId, comment)
             )
         }
     }
 
-    setUserTaggerList(search) {
-        const owner = this.mod.editor.docInfo.owner
+    setUserTaggerList(search: string): void {
+        const owner = this.mod.editor.docInfo.owner as unknown as User & {
+            contacts: User[]
+        }
         this.userTaggerList = owner.contacts
             .concat(owner)
             .filter(
                 user =>
-                    user.name.includes(search) || user.username.includes(search)
+                    user.name.includes(search) ||
+                    user.username.includes(search)
             )
     }
 
-    showUserTagger() {
+    showUserTagger(): void {
         if (!this.userTaggerList.length) {
             return
         }
-        this.dom.querySelector("div.tagger").innerHTML = this.userTaggerList
+        this.dom.querySelector("div.tagger")!.innerHTML = this.userTaggerList
             .map(
                 (user, index) =>
                     `<div class="tag-user tag${index === this.selectedTag ? " fw-selected" : ""}" data-index="${index}">
@@ -258,7 +330,7 @@ export class CommentEditor {
             .join("")
     }
 
-    selectUserTag() {
+    selectUserTag(): boolean {
         const user = this.userTaggerList[this.selectedTag]
         if (!user || !this.tagRange) {
             return false
@@ -275,8 +347,8 @@ export class CommentEditor {
         return true
     }
 
-    getUserTags() {
-        const users = []
+    getUserTags(): number[] {
+        const users: number[] = []
         this.view.state.doc.descendants(node => {
             if (node.type.name === "collaborator") {
                 users.push(node.attrs.id)
@@ -285,18 +357,22 @@ export class CommentEditor {
         return [...new Set(users)] // only unique values.
     }
 
-    removeTagger() {
-        this.dom.querySelector("div.tagger").innerHTML = ""
+    removeTagger(): void {
+        const tagger = this.dom.querySelector("div.tagger")
+        if (tagger) {
+            tagger.innerHTML = ""
+        }
         this.tagRange = false
         this.userTaggerList = []
     }
 
-    scrollToBottom() {
+    scrollToBottom(): void {
         const activeMarginBox = document.querySelector(
             ".margin-box.comment.fw-active .comment-answer-container"
         )
         if (activeMarginBox) {
-            activeMarginBox.scrollTop = activeMarginBox.scrollHeight
+            ;(activeMarginBox as HTMLElement).scrollTop =
+                activeMarginBox.scrollHeight
         }
 
         // scroll to bottom of the margin-box-container or global-comment-container
@@ -310,7 +386,7 @@ export class CommentEditor {
                 "#margin-box-container, #global-comment-container"
             )
             if (activeMarginBoxContainer) {
-                activeMarginBoxContainer.scrollTop =
+                ;(activeMarginBoxContainer as HTMLElement).scrollTop =
                     activeMarginBoxContainer.scrollHeight
             }
         }

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

@@ -1,7 +1,12 @@
 import {post} from "fwtoolkit"
 import {serializeCommentNode} from "./schema.js"
+import type {Node} from "prosemirror-model"
 
-export const notifyMentionedUser = (docId, userId, comment) => {
+export const notifyMentionedUser = (
+    docId: number,
+    userId: number,
+    comment: Node
+) => {
     const {html, text} = serializeCommentNode(comment)
     return post("/api/document/comment_notify/", {
         doc_id: docId,