@fiduswriter/editor 0.1.0

package/src/comments/store.js

@@ -0,0 +1,513 @@
+import {randomCommentId} from "@fiduswriter/document/schema/common/index"
+import {
+    addCommentDuringCreationDecoration,
+    removeCommentDuringCreationDecoration
+} from "../state_plugins"
+import {Comment} from "./comment"
+
+export class ModCommentStore {
+    constructor(mod) {
+        mod.store = this
+        this.mod = mod
+        // a comment object for a comment that is still under construction
+        this.commentDuringCreation = false
+        this.reset()
+    }
+
+    reset() {
+        this.comments = Object.create(null)
+        this.unsent = []
+    }
+
+    findComment(id) {
+        let found = false
+        if (id in this.comments) {
+            found = this.comments[id]
+        }
+        return found
+    }
+
+    mustSend() {
+        // Set a timeout so that the update can be combines with other updates
+        // if they happen more or less simultaneously.
+        window.setTimeout(
+            () => this.mod.editor.mod.collab.doc.sendToCollaborators(),
+            100
+        )
+    }
+    // Create a new temporary comment. This one is not going into the store yet,
+    // as it is empty, shouldn't be shared and if canceled, it should go away
+    // entirely.
+    addCommentDuringCreation(view) {
+        const state = view.state,
+            tr = addCommentDuringCreationDecoration(state, state.tr)
+
+        if (!tr) {
+            // adding decoration failed
+            return
+        }
+
+        view.dispatch(tr)
+
+        let username
+
+        if (
+            ["review", "review-tracked"].includes(
+                this.mod.editor.docInfo.access_rights
+            )
+        ) {
+            username = `${gettext("Reviewer")} ${this.mod.editor.user.id}`
+        } else {
+            username = this.mod.editor.user.username
+        }
+
+        this.commentDuringCreation = {
+            comment: new Comment({
+                id: "-1",
+                user: this.mod.editor.user.id,
+                username,
+                date: Date.now() - this.mod.editor.clientTimeAdjustment
+            }),
+            inDOM: false,
+            view
+        }
+    }
+
+    // Create a new temporary global comment. Like addCommentDuringCreation,
+    // this is not shared until it has content.
+    addGlobalCommentDuringCreation() {
+        let username
+
+        if (
+            ["review", "review-tracked"].includes(
+                this.mod.editor.docInfo.access_rights
+            )
+        ) {
+            username = `${gettext("Reviewer")} ${this.mod.editor.user.id}`
+        } else {
+            username = this.mod.editor.user.username
+        }
+
+        this.commentDuringCreation = {
+            comment: new Comment({
+                id: "-1",
+                user: this.mod.editor.user.id,
+                username,
+                date: Date.now() - this.mod.editor.clientTimeAdjustment,
+                isGlobal: true
+            }),
+            inDOM: false,
+            view: null
+        }
+    }
+
+    removeCommentDuringCreation() {
+        if (this.commentDuringCreation) {
+            const view = this.commentDuringCreation.view
+            this.commentDuringCreation = false
+            if (view) {
+                const state = view.state
+                const tr = removeCommentDuringCreationDecoration(
+                    state,
+                    state.tr
+                )
+                if (tr) {
+                    view.dispatch(tr)
+                }
+            }
+        }
+    }
+
+    // Add a new comment to the comment database both remotely and locally.
+    addComment(commentData, posFrom, posTo, view) {
+        const id = randomCommentId(),
+            markType = view.state.schema.marks.comment.create({id}),
+            tr = this.addMark(view.state.tr, posFrom, posTo, markType)
+
+        if (tr) {
+            commentData.id = id
+            commentData.answers = []
+            this.addLocalComment(commentData, true)
+            this.unsent.push({
+                type: "create",
+                id
+            })
+            view.dispatch(tr)
+            this.mustSend()
+        }
+    }
+
+    // Add a new global comment that refers to the entire document.
+    addGlobalComment(commentData) {
+        const id = randomCommentId()
+        commentData.id = id
+        commentData.answers = []
+        commentData.isGlobal = true
+        this.addLocalComment(commentData, true)
+        this.unsent.push({
+            type: "create",
+            id
+        })
+        this.mustSend()
+        return id
+    }
+
+    // Add marks to leaf nodes and inline nodes.
+    addMark(tr, from, to, mark) {
+        // add to inline nodes
+        tr.addMark(from, to, mark)
+        // add to leaf nodes
+        tr.doc.nodesBetween(from, to, (node, pos, parent) => {
+            if (!node.isLeaf) {
+                return
+            }
+            const marks = node.marks
+            if (!mark.isInSet(marks) && parent.type.allowsMarkType(mark.type)) {
+                const newMarks = mark.addToSet(marks)
+                tr.setNodeMarkup(pos, null, node.attrs, newMarks)
+            }
+        })
+        if (!tr.steps.length) {
+            return
+        }
+        return tr
+    }
+
+    removeMark(tr, from, to, mark) {
+        // remove from inline nodes
+        tr.removeMark(from, to, mark)
+        // remove from leaf nodes
+        tr.doc.nodesBetween(from, to, (node, pos) => {
+            if (!node.isLeaf) {
+                return
+            }
+            const marks = node.marks
+            if (mark.isInSet(marks)) {
+                const newMarks = mark.removeFromSet(marks)
+                tr.setNodeMarkup(pos, null, node.attrs, newMarks)
+            }
+        })
+    }
+
+    loadComments(commentsData) {
+        Object.entries(commentsData).forEach(([id, comment]) =>
+            this.addLocalComment(Object.assign({id}, comment))
+        )
+    }
+
+    addLocalComment(commentData, local) {
+        // Don't add to pastParticipants if user is undefined (e.g. new unsaved comments)
+        if (
+            commentData.user !== undefined &&
+            !this.mod.editor.mod.collab.pastParticipants.find(
+                participant => participant.id === commentData.user
+            )
+        ) {
+            this.mod.editor.mod.collab.pastParticipants.push({
+                id: commentData.user,
+                name: commentData.username
+            })
+        }
+        if (
+            commentData.assignedUser &&
+            !this.mod.editor.mod.collab.pastParticipants.find(
+                participant => participant.id === commentData.assignedUser
+            )
+        ) {
+            this.mod.editor.mod.collab.pastParticipants.push({
+                id: commentData.assignedUser,
+                name: commentData.assignedUsername || ""
+            })
+        }
+        if (!this.comments[commentData.id]) {
+            this.comments[commentData.id] = new Comment(commentData)
+        }
+        if (local || !this.mod.interactions.isCurrentlyEditing()) {
+            this.mod.editor.mod.marginboxes.updateDOM()
+        }
+    }
+
+    updateComment(commentData) {
+        this.updateLocalComment(commentData, true)
+        this.unsent.push({
+            type: "update",
+            id: commentData.id
+        })
+        this.mustSend()
+    }
+
+    updateLocalComment(commentData, local) {
+        if (
+            commentData.assignedUser &&
+            !this.mod.editor.mod.collab.pastParticipants.find(
+                participant => participant.id === commentData.assignedUser
+            )
+        ) {
+            this.mod.editor.mod.collab.pastParticipants.push({
+                id: commentData.assignedUser,
+                name: commentData.assignedUsername || ""
+            })
+        }
+        if (this.comments[commentData.id]) {
+            Object.assign(this.comments[commentData.id], commentData)
+        }
+        if (local || !this.mod.interactions.isCurrentlyEditing()) {
+            this.mod.editor.mod.marginboxes.updateDOM()
+        }
+    }
+
+    removeCommentMarks(id) {
+        // remove comment marks with the given ID in both views.
+        ;[
+            this.mod.editor.view,
+            this.mod.editor.mod.footnotes.fnEditor.view
+        ].forEach(view => {
+            const tr = view.state.tr,
+                markType = view.state.schema.marks.comment.create({id})
+            view.state.doc.descendants((node, pos) => {
+                const nodeStart = pos,
+                    nodeEnd = pos + node.nodeSize
+                node.marks.forEach(mark => {
+                    if (mark.type.name === "comment" && mark.attrs.id === id) {
+                        this.removeMark(tr, nodeStart, nodeEnd, markType)
+                    }
+                })
+            })
+            if (tr.steps.length) {
+                view.dispatch(tr)
+            }
+        })
+    }
+
+    deleteLocalComment(id, local) {
+        const found = this.comments[id]
+        if (found) {
+            delete this.comments[id]
+            return true
+        }
+        if (local || !this.mod.interactions.isCurrentlyEditing()) {
+            this.mod.editor.mod.marginboxes.updateDOM()
+        }
+    }
+
+    // Removes the comment from store, optionally also removes marks from document.
+    deleteComment(id, removeMarks) {
+        if (this.deleteLocalComment(id, true)) {
+            this.unsent.push({
+                type: "delete",
+                id
+            })
+            if (removeMarks) {
+                this.removeCommentMarks(id)
+            }
+            this.mustSend()
+        }
+    }
+
+    addLocalAnswer(id, answer, local) {
+        if (this.comments[id]) {
+            if (!this.comments[id].answers) {
+                this.comments[id].answers = []
+            }
+            const answerFound = this.comments[id].answers.find(
+                Answer => Answer.id === answer.id
+            )
+            if (!answerFound) {
+                this.comments[id].answers.push(answer)
+            }
+        }
+
+        if (local || !this.mod.interactions.isCurrentlyEditing()) {
+            this.mod.editor.mod.marginboxes.updateDOM()
+            if (!local && this.mod.interactions.activeCommentId === id) {
+                this.mod.interactions.activateComment(id)
+            }
+        }
+    }
+
+    addAnswer(id, answer) {
+        answer.id = randomCommentId()
+        this.addLocalAnswer(id, answer, true)
+        this.unsent.push({
+            type: "add_answer",
+            id,
+            answerId: answer.id
+        })
+        this.mustSend()
+    }
+
+    deleteLocalAnswer(id, answerId, local) {
+        if (this.comments[id]?.answers) {
+            this.comments[id].answers = this.comments[id].answers.filter(
+                answer => answer.id !== answerId
+            )
+        }
+        if (local || !this.mod.interactions.isCurrentlyEditing()) {
+            this.mod.editor.mod.marginboxes.updateDOM()
+            if (!local && this.mod.interactions.activeCommentId === id) {
+                this.mod.interactions.activateComment(id)
+            }
+        }
+    }
+
+    deleteAnswer(id, answerId) {
+        this.deleteLocalAnswer(id, answerId, true)
+        this.unsent.push({
+            type: "delete_answer",
+            id,
+            answerId
+        })
+        this.mustSend()
+    }
+
+    updateLocalAnswer(id, answerId, answerText, local) {
+        if (this.comments[id]?.answers) {
+            const answer = this.comments[id].answers.find(
+                answer => answer.id === answerId
+            )
+            if (answer) {
+                answer.answer = answerText
+            }
+        }
+        if (local || !this.mod.interactions.isCurrentlyEditing()) {
+            this.mod.editor.mod.marginboxes.updateDOM()
+            if (!local && this.mod.interactions.activeCommentId === id) {
+                this.mod.interactions.activateComment(id)
+            }
+        }
+    }
+
+    updateAnswer(id, answerId, answerText) {
+        this.updateLocalAnswer(id, answerId, answerText, true)
+        this.unsent.push({
+            type: "update_answer",
+            id,
+            answerId
+        })
+        this.mustSend()
+    }
+
+    unsentEvents() {
+        const result = []
+        for (let i = 0; i < this.unsent.length; i++) {
+            const event = this.unsent[i]
+            if (event.type == "delete") {
+                result.push({
+                    type: "delete",
+                    id: event.id
+                })
+            } else if (event.type == "update") {
+                const found = this.comments[event.id]
+                if (found?.id) {
+                    result.push(Object.assign({type: "update"}, found))
+                } else {
+                    result.push({
+                        type: "ignore"
+                    })
+                }
+            } else if (event.type == "create") {
+                const found = this.comments[event.id]
+                if (found?.id) {
+                    result.push(Object.assign({type: "create"}, found))
+                } else {
+                    result.push({
+                        type: "ignore"
+                    })
+                }
+            } else if (event.type == "add_answer") {
+                const found = this.comments[event.id]
+                let foundAnswer
+                if (found?.id && found?.answers) {
+                    foundAnswer = found.answers.find(
+                        answer => answer.id === event.answerId
+                    )
+                }
+                if (foundAnswer) {
+                    result.push(
+                        Object.assign({}, foundAnswer, {
+                            type: "add_answer",
+                            id: event.id,
+                            answerId: foundAnswer.id
+                        })
+                    )
+                } else {
+                    result.push({
+                        type: "ignore"
+                    })
+                }
+            } else if (event.type == "delete_answer") {
+                const found = this.comments[event.id]
+                if (found?.id && found?.answers) {
+                    result.push({
+                        type: "delete_answer",
+                        id: event.id,
+                        answerId: event.answerId
+                    })
+                } else {
+                    result.push({
+                        type: "ignore"
+                    })
+                }
+            } else if (event.type == "update_answer") {
+                const found = this.comments[event.id]
+                let foundAnswer
+                if (found?.id && found?.answers) {
+                    foundAnswer = found.answers.find(
+                        answer => answer.id === event.answerId
+                    )
+                }
+                if (foundAnswer) {
+                    result.push(
+                        Object.assign({}, foundAnswer, {
+                            type: "update_answer",
+                            id: event.id,
+                            answerId: foundAnswer.id
+                        })
+                    )
+                } else {
+                    result.push({
+                        type: "ignore"
+                    })
+                }
+            }
+        }
+        return result
+    }
+
+    eventsSent(n) {
+        this.unsent = this.unsent.slice(n.length)
+    }
+
+    receive(events) {
+        events.forEach(event => {
+            if (event.type == "delete") {
+                this.deleteLocalComment(event.id, false)
+            } else if (event.type == "create") {
+                this.addLocalComment(event, false)
+            } else if (event.type == "update") {
+                this.updateLocalComment(event, false)
+            } else if (event.type == "add_answer") {
+                this.addLocalAnswer(
+                    event.id,
+                    {
+                        answer: event.answer,
+                        id: event.answerId,
+                        date: event.date,
+                        user: event.user,
+                        username: event.username
+                    },
+                    false
+                )
+            } else if (event.type == "delete_answer") {
+                this.deleteLocalAnswer(event.id, event.answerId, false)
+            } else if (event.type == "update_answer") {
+                this.updateLocalAnswer(
+                    event.id,
+                    event.answerId,
+                    event.answer,
+                    false
+                )
+            }
+        })
+    }
+}

package/src/contacts/add_dialog.js

@@ -0,0 +1,110 @@
+import {Dialog, cancelPromise, escapeText, postJson} from "fwtoolkit"
+import {addContactTemplate} from "./templates"
+
+//dialog for adding a user to contacts
+export class AddContactDialog {
+    constructor(settings) {
+        this.settings = settings
+    }
+
+    init() {
+        return new Promise(resolve => {
+            const buttons = [
+                {
+                    text: gettext("Submit"),
+                    classes: "fw-dark",
+                    click: () => {
+                        const userString = document.getElementById(
+                            "new-contact-user-string"
+                        ).value
+                        document
+                            .querySelectorAll("#add-new-contact .fw-warning")
+                            .forEach(el => el.parentElement.removeChild(el))
+                        const userStrings = userString.split(/[\s,;]+/)
+                        let chain = Promise.resolve([])
+
+                        userStrings
+                            .filter(singleUserString => singleUserString.length)
+                            .forEach(
+                                singleUserString =>
+                                    (chain = chain.then(responses =>
+                                        this.addContact(singleUserString).then(
+                                            data => [...responses, data]
+                                        )
+                                    ))
+                            )
+                        Promise.resolve(chain).then(contactData => {
+                            if (contactData.length) {
+                                dialog.close()
+                                resolve(contactData)
+                            }
+                        })
+                    }
+                },
+                {
+                    type: "cancel"
+                }
+            ]
+
+            const dialog = new Dialog({
+                id: "add-new-contact",
+                title:
+                    this.settings?.REGISTRATION_OPEN ||
+                    this.settings?.SOCIALACCOUNT_OPEN
+                        ? gettext("Add contact or invite new user")
+                        : gettext("Add contact"),
+                body: addContactTemplate(),
+                width: 350,
+                height: 250,
+                buttons
+            })
+
+            dialog.open()
+
+            document.getElementById("new-contact-user-string").style.width =
+                "340"
+        })
+    }
+
+    addContact(userString) {
+        //add a user to contact per ajax
+        if (null === userString || "undefined" == typeof userString) {
+            return cancelPromise()
+        }
+
+        userString = userString.trim()
+        if ("" === userString) {
+            return cancelPromise()
+        }
+
+        return postJson("/api/user/invites/add/", {
+            user_string: userString
+        }).then(({json, status}) => {
+            if (status == 201) {
+                //user added to the contacts
+                return json.contact
+            } else {
+                //user not found
+                let responseHtml
+                if (json.error === 1) {
+                    responseHtml = gettext(
+                        "You cannot add yourself to your contacts!"
+                    )
+                } else if (json.error === 2) {
+                    responseHtml = gettext(
+                        "This person is already in your contacts!"
+                    )
+                } else if (json.error === 3) {
+                    responseHtml = gettext("Invalid email!")
+                }
+                document
+                    .getElementById("add-new-contact")
+                    .insertAdjacentHTML(
+                        "beforeend",
+                        `<div class="fw-warning" style="padding: 8px;">${escapeText(userString)}: ${responseHtml}</div>`
+                    )
+                return cancelPromise()
+            }
+        })
+    }
+}

package/src/contacts/templates.js

@@ -0,0 +1,28 @@
+export const deleteContactCell = contact =>
+    `<span class="fw-link-text delete-single-contact"
+            data-type="${contact.type}" data-id="${contact.id}">
+        <i class="fa fa-trash-alt"></i>
+    </span>`
+
+//template for contact adding dialog
+export const addContactTemplate = () =>
+    `<table class="ui-dialog-content-table"><tbody><tr><td>
+        <input type="text" name="user_string" id="new-contact-user-string"
+                placeholder="${gettext("E-mail address or username")}" />
+    </td></tr></tbody></table>`
+
+export const displayContactType = ({type}) => {
+    switch (type) {
+        case "user":
+            return gettext("User")
+        case "userinvite":
+            return gettext("Invite you sent")
+        case "to_userinvite":
+            return gettext("Invite you received")
+    }
+}
+
+export const respondInviteCell = contact =>
+    `<button class="fw-button fw-small fw-dark respond-invite" data-id="${contact.id}">
+    ${gettext("Respond")}
+</button>`