@fiduswriter/editor 0.1.0

package/src/collab/merge/state_plugins/index.js

@@ -0,0 +1,2 @@
+export {clipboardPlugin} from "./clipboard"
+export {diffPlugin} from "./diff"

package/src/collab/merge/tools.js

@@ -0,0 +1,217 @@
+import {Fragment, Slice} from "prosemirror-model"
+import {EditorState} from "prosemirror-state"
+import {ReplaceStep} from "prosemirror-transform"
+
+export const checkPresenceOfdiffdata = (doc, from, to) => {
+    /* 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)) {
+        return true
+    }
+    doc.nodesBetween(from, to, (node, _pos) => {
+        if (node.attrs.diffdata && node.attrs.diffdata.length > 0) {
+            diffAttrPresent = true
+        }
+    })
+    return diffAttrPresent
+}
+
+export const simplifyTransform = tr => {
+    /* This splits complex insertion & Deletion steps into simple insertion and deletion
+    steps */
+    if (tr.docChanged && tr.docs.length > 0) {
+        const trState = EditorState.create({doc: tr.docs[0]})
+        const newTr = trState.tr
+        for (let index = 0; index < tr.steps.length; index++) {
+            const step = tr.steps[index]
+            if (step instanceof ReplaceStep && step.from !== step.to) {
+                const modifiedStep = step.slice.size
+                    ? new ReplaceStep(
+                          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
+                      )
+                    : false
+                if (modifiedStep) {
+                    // If while breaking down any step the step fails , we return the original tr (we just split steps containing both insertions and deletions into simple steps which does just insertion/deletion. should not make a big difference.)
+                    if (newTr.maybeStep(modifiedStep).failed) {
+                        return tr
+                    }
+                    if (
+                        newTr.maybeStep(
+                            new ReplaceStep(
+                                step.from,
+                                step.to,
+                                Slice.empty,
+                                step.structure
+                            )
+                        ).failed
+                    ) {
+                        return tr
+                    }
+                } else {
+                    if (newTr.maybeStep(step).failed) {
+                        return tr
+                    }
+                }
+            } else {
+                if (newTr.maybeStep(step).failed) {
+                    return tr
+                }
+            }
+        }
+        return newTr
+    } else {
+        return tr
+    }
+}
+
+export const removeDiffdata = (tr, from, to) => {
+    /* Adds steps to a tr to remove all the diff marks in the given range. */
+    tr.doc.nodesBetween(from, to, (node, pos) => {
+        if (
+            pos < from ||
+            ["bullet_list", "ordered_list"].includes(node.type.name)
+        ) {
+            return true
+        } else if (node.isInline) {
+            return false
+        }
+        if (node.attrs.diffdata && node.attrs.diffdata.length > 0) {
+            tr.setNodeMarkup(
+                pos,
+                null,
+                Object.assign({}, node.attrs, {diffdata: []}),
+                node.marks
+            )
+        }
+    })
+    tr.removeMark(from, to, tr.doc.type.schema.marks.diffdata)
+    return tr
+}
+
+export const dispatchRemoveDiffdata = (view, from, to) => {
+    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) => {
+    /* 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 */
+    const initialdiffMap = tr.getMeta("initialDiffMap")
+    if (!initialdiffMap && (tr.steps.length > 0 || tr.docChanged)) {
+        tr.doc.nodesBetween(0, tr.doc.content.size, (node, pos) => {
+            if (["bullet_list", "ordered_list"].includes(node.type.name)) {
+                return true
+            } else if (node.isInline) {
+                let diffMark = node.marks.find(
+                    mark => mark.type.name == "diffdata"
+                )
+                if (diffMark !== undefined) {
+                    diffMark = 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 mark = tr.doc.type.schema.marks.diffdata.create({
+                        diff: diffMark.diff,
+                        steps: diffMark.steps,
+                        from: from,
+                        to: to,
+                        markOnly: diffMark.markOnly
+                    })
+                    newTr.addMark(pos, pos + node.nodeSize, mark)
+                }
+            }
+            if (
+                node.type.name === "image" &&
+                Object.keys(imageDataModified).includes(
+                    String(node.attrs.image)
+                )
+            ) {
+                const attrs = Object.assign({}, node.attrs)
+                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
+                diffdata[0].from = tr.mapping.map(diffdata[0].from)
+                diffdata[0].to = tr.mapping.map(diffdata[0].to)
+                newTr.setNodeMarkup(
+                    pos,
+                    null,
+                    Object.assign({}, node.attrs, {diffdata}),
+                    node.marks
+                )
+            }
+        })
+    }
+    return newTr
+}
+
+export const removeDiffFromJson = object => {
+    /* 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")
+    }
+    if (object.content) {
+        object.content.forEach(child => removeDiffFromJson(child))
+    }
+    return object
+}
+
+function mapFragment(fragment, f, parent, mark) {
+    const mapped = []
+    for (let i = 0; i < fragment.childCount; i++) {
+        let child = fragment.child(i)
+        if (child.attrs.diffdata) {
+            const diffdata = []
+            diffdata.push({
+                type: mark.attrs.diff,
+                from: mark.attrs.from,
+                to: mark.attrs.to,
+                steps: mark.attrs.steps
+            })
+            const attrs = Object.assign({}, child.attrs, {diffdata})
+            const dummyNode = child.type.create(attrs, null, child.marks)
+            child = dummyNode.copy(child.content)
+        }
+        if (child.content.size) {
+            child = child.copy(mapFragment(child.content, f, child, mark))
+        }
+        if (child.isInline) {
+            child = f(child, parent, i)
+        }
+        mapped.push(child)
+    }
+    return Fragment.fromArray(mapped)
+}
+
+export const addDeletionMarks = (slice, mark) => {
+    const content = mapFragment(
+        slice.content,
+        (node, parent) => {
+            if (parent.type && !parent.type.allowsMarkType(mark.type)) {
+                return node
+            }
+            if (node.isInline) {
+                return node.mark(mark.addToSet(node.marks))
+            }
+            return node
+        },
+        parent,
+        mark
+    )
+    return content
+}

package/src/collab/templates.js

@@ -0,0 +1,10 @@
+import {avatarTemplate, escapeText, localizeDate} from "fwtoolkit"
+export const messageTemplate = ({message, theChatter}) =>
+    `<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>
+        </div>
+        <div class="message-body">${escapeText(message.body)}</div>
+    </div>`

package/src/comments/comment.js

@@ -0,0 +1,29 @@
+export class Comment {
+    constructor({
+        id,
+        user,
+        username,
+        assignedUser = false,
+        assignedUsername = false,
+        date,
+        comment = [],
+        answers = [],
+        isMajor = false,
+        resolved = false,
+        hidden = false,
+        isGlobal = false
+    }) {
+        this.id = id
+        this.user = user // User ID of user who wrote comment
+        this.username = username // Username of user who wrote comment
+        this.assignedUser = assignedUser // User ID of user who is currently assigned to comment (if any).
+        this.assignedUsername = assignedUsername // Username of user who is currently assigned to comment (if any).
+        this.date = date
+        this.comment = comment
+        this.answers = answers
+        this.isMajor = isMajor // boolean - Whether comment is of major importance.
+        this.resolved = resolved // Whether comment is marked as resolved.
+        this.hidden = hidden
+        this.isGlobal = isGlobal // Whether comment refers to the entire document.
+    }
+}

package/src/comments/editors/answer.js

@@ -0,0 +1,55 @@
+import {TextSelection} from "prosemirror-state"
+import {CommentEditor} from "./comment"
+
+export class CommentAnswerEditor extends CommentEditor {
+    constructor(mod, id, dom, text, options = {}) {
+        super(mod, id, dom, text, options)
+
+        this.keepOpenAfterSubmit = true
+    }
+
+    initViewDOM() {
+        this.viewDOM = document.createElement("div")
+        this.viewDOM.classList.add("ProseMirror-wrapper")
+        this.dom.appendChild(this.viewDOM)
+        this.dom.insertAdjacentHTML(
+            "beforeend",
+            `<div class="comment-btns">
+                <button class="submit fw-button fw-dark fw-disabled" type="submit">
+                    ${this.options.answerId ? gettext("Edit") : gettext("Submit")}
+                </button>
+                <button class="cancel fw-button fw-orange" type="submit">
+                    ${gettext("Cancel")}
+                </button>
+            </div>
+            <div class="tagger"></div>`
+        )
+    }
+
+    initView() {
+        super.initView()
+        if (this.options.answerId) {
+            const selection = TextSelection.atEnd(this.view.state.doc)
+            this.view.dispatch(
+                this.view.state.tr.setSelection(selection).scrollIntoView()
+            )
+        }
+    }
+
+    submit() {
+        const text = this.view.state.doc.toJSON().content
+        if (!text) {
+            return
+        }
+        if (this.options.answerId) {
+            this.mod.interactions.submitAnswerUpdate(
+                this.id,
+                this.options.answerId,
+                text
+            )
+        } else {
+            this.mod.interactions.createNewAnswer(this.id, text)
+        }
+        this.sendNotifications()
+    }
+}

package/src/comments/editors/comment.js

@@ -0,0 +1,318 @@
+import deepEqual from "fast-deep-equal"
+import {baseKeymap} from "prosemirror-commands"
+import {history, redo, undo} from "prosemirror-history"
+import {keymap} from "prosemirror-keymap"
+import {EditorState} from "prosemirror-state"
+import {suggestionsPlugin, triggerCharacter} from "prosemirror-suggestions"
+import {EditorView} from "prosemirror-view"
+
+import {avatarTemplate, escapeText, findTarget} from "fwtoolkit"
+
+import {notifyMentionedUser} from "./notify"
+import {commentSchema} from "./schema"
+
+export class CommentEditor {
+    constructor(mod, id, dom, text, options = {}) {
+        this.mod = mod
+        this.id = id
+        this.dom = dom
+        this.text = text
+        this.options = options
+
+        this.isMajor = this.options.isMajor
+
+        this.keepOpenAfterSubmit = false
+        this.selectedTag = 0
+        this.userTaggerList = []
+        this.plugins = [
+            history(),
+            suggestionsPlugin({
+                escapeOnSelectionChange: true,
+                matcher: triggerCharacter("@"),
+                onEnter: args => {
+                    this.selectedTag = 0
+                    this.tagRange = args.range
+                    const search = args.text.slice(1)
+                    if (search.length) {
+                        this.setUserTaggerList(search)
+                        this.showUserTagger()
+                    }
+                },
+                onChange: args => {
+                    this.selectedTag = 0
+                    this.tagRange = args.range
+                    const search = args.text.slice(1)
+                    if (search.length) {
+                        this.setUserTaggerList(search)
+                        this.showUserTagger()
+                    }
+                },
+                onExit: _args => {
+                    this.selectedTag = 0
+                    this.removeTagger()
+                },
+                onKeyDown: ({event}) => {
+                    if (event.key === "ArrowDown") {
+                        if (this.userTaggerList.length > this.selectedTag + 1) {
+                            this.selectedTag += 1
+                            this.showUserTagger()
+                        }
+                        return true
+                    } else if (event.key === "ArrowUp") {
+                        if (this.selectedTag > 0) {
+                            this.selectedTag -= 1
+                            this.showUserTagger()
+                        }
+                        return true
+                    } else if (event.key === "Enter") {
+                        return this.selectUserTag()
+                    }
+                    return false
+                },
+                escapeKeys: ["Escape", "ArrowRight", "ArrowLeft"]
+            }),
+            keymap(baseKeymap),
+            keymap({
+                "Mod-z": undo,
+                "Mod-shift-z": undo,
+                "Mod-y": redo,
+                "Ctrl-Enter": () => this.submit()
+            })
+        ]
+    }
+
+    init() {
+        this.initViewDOM()
+        this.initView()
+    }
+
+    initViewDOM() {
+        this.viewDOM = document.createElement("div")
+        this.viewDOM.classList.add("ProseMirror-wrapper")
+        this.dom.appendChild(this.viewDOM)
+        this.dom.insertAdjacentHTML(
+            "beforeend",
+            `<input class="comment-is-major" type="checkbox" name="isMajor"
+                ${this.options.isMajor ? "checked" : ""}/>
+            <label>${gettext("High priority")}</label>
+            <div class="comment-btns">
+                <button class="submit fw-button fw-dark fw-disabled" type="submit">
+                    ${this.id !== "-1" ? gettext("Edit") : gettext("Submit")}
+                </button>
+                <button class="cancel fw-button fw-orange" type="submit">
+                    ${gettext("Cancel")}
+                </button>
+            </div>
+            <div class="tagger"></div>`
+        )
+    }
+
+    initView() {
+        this.view = new EditorView(this.viewDOM, {
+            state: EditorState.create({
+                schema: commentSchema,
+                doc: commentSchema.nodeFromJSON({
+                    type: "doc",
+                    content: this.text
+                }),
+                plugins: this.plugins
+            }),
+            dispatchTransaction: tr => {
+                const newState = this.view.state.apply(tr)
+                this.view.updateState(newState)
+                this.updateButtons()
+            }
+        })
+        this.oldUserTags = this.getUserTags()
+        this.bind()
+    }
+
+    bind() {
+        this.dom.addEventListener("click", event => {
+            const el = {}
+            switch (true) {
+                case findTarget(event, "button.submit:not(.fw-disabled)", el):
+                    {
+                        const submittedId = this.submit()
+                        if (this.keepOpenAfterSubmit) {
+                            this.scrollToBottom()
+                        } else if (this.options.isGlobal) {
+                            if (submittedId) {
+                                this.mod.interactions.deactivateAll()
+                                this.mod.interactions.activeCommentId =
+                                    submittedId
+                                this.mod.interactions.editComment = false
+                                this.mod.interactions.updateDOM()
+                                const answerEditor =
+                                    this.mod.interactions.editor
+                                if (answerEditor?.view) {
+                                    try {
+                                        answerEditor.view.dom.focus({
+                                            preventScroll: true
+                                        })
+                                    } catch {
+                                        answerEditor.view.focus()
+                                    }
+                                }
+                            } else {
+                                this.mod.interactions.activeCommentId = false
+                                this.mod.interactions.deactivateAll()
+                                this.mod.interactions.collapseSelectionToEnd()
+                            }
+                        } else {
+                            this.mod.interactions.activeCommentId = false
+                            this.mod.interactions.deactivateAll()
+                            this.mod.interactions.collapseSelectionToEnd()
+                        }
+                    }
+                    break
+                case findTarget(event, "button.cancel", el):
+                    this.mod.interactions.cancelSubmit()
+                    break
+                case findTarget(event, ".ProseMirror-wrapper", el):
+                    this.view.focus()
+                    break
+                case findTarget(event, ".tag-user", el):
+                    this.selectedTag = Number.parseInt(el.target.dataset.index)
+                    this.selectUserTag()
+                    this.view.focus()
+                    break
+                case findTarget(event, ".comment-is-major", el):
+                    this.isMajor = !this.isMajor
+                    this.updateButtons()
+                    break
+            }
+        })
+    }
+
+    hasChanged() {
+        return (
+            !deepEqual(
+                this.text.length ? this.text : [{type: "paragraph"}],
+                this.view.state.doc.toJSON().content || [{type: "paragraph"}]
+            ) || this.options.isMajor !== this.isMajor
+        )
+    }
+
+    updateButtons() {
+        if (this.hasChanged()) {
+            this.dom
+                .querySelector("button.submit")
+                .classList.remove("fw-disabled")
+        } else {
+            this.dom.querySelector("button.submit").classList.add("fw-disabled")
+        }
+    }
+
+    submit() {
+        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
+            })
+            this.sendNotifications()
+            return id
+        } else {
+            this.mod.interactions.deleteComment(this.id)
+            return false
+        }
+    }
+
+    sendNotifications() {
+        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
+            newUserTags.forEach(userId =>
+                notifyMentionedUser(docId, userId, comment)
+            )
+        }
+    }
+
+    setUserTaggerList(search) {
+        const owner = this.mod.editor.docInfo.owner
+        this.userTaggerList = owner.contacts
+            .concat(owner)
+            .filter(
+                user =>
+                    user.name.includes(search) || user.username.includes(search)
+            )
+    }
+
+    showUserTagger() {
+        if (!this.userTaggerList.length) {
+            return
+        }
+        this.dom.querySelector("div.tagger").innerHTML = this.userTaggerList
+            .map(
+                (user, index) =>
+                    `<div class="tag-user tag${index === this.selectedTag ? " fw-selected" : ""}" data-index="${index}">
+                ${user ? avatarTemplate({user}) : '<span class="fw-string-avatar"></span>'}
+                <h5 class="comment-user-name">${escapeText(user.name)}</h5>
+            </div>`
+            )
+            .join("")
+    }
+
+    selectUserTag() {
+        const user = this.userTaggerList[this.selectedTag]
+        if (!user || !this.tagRange) {
+            return false
+        }
+        const tr = this.view.state.tr.replaceRangeWith(
+            this.tagRange.from,
+            this.tagRange.to,
+            this.view.state.schema.nodes.collaborator.create({
+                id: user.id,
+                name: user.name
+            })
+        )
+        this.view.dispatch(tr)
+        return true
+    }
+
+    getUserTags() {
+        const users = []
+        this.view.state.doc.descendants(node => {
+            if (node.type.name === "collaborator") {
+                users.push(node.attrs.id)
+            }
+        })
+        return [...new Set(users)] // only unique values.
+    }
+
+    removeTagger() {
+        this.dom.querySelector("div.tagger").innerHTML = ""
+        this.tagRange = false
+        this.userTaggerList = []
+    }
+
+    scrollToBottom() {
+        const activeMarginBox = document.querySelector(
+            ".margin-box.comment.fw-active .comment-answer-container"
+        )
+        if (activeMarginBox) {
+            activeMarginBox.scrollTop = activeMarginBox.scrollHeight
+        }
+
+        // scroll to bottom of the margin-box-container or global-comment-container
+        // when new comments are added when the screens width is less than 1024px
+        const currentScreenWidth =
+            window.innerWidth ||
+            document.documentElement.clientWidth ||
+            document.body.clientWidth
+        if (currentScreenWidth < 1024) {
+            const activeMarginBoxContainer = document.querySelector(
+                "#margin-box-container, #global-comment-container"
+            )
+            if (activeMarginBoxContainer) {
+                activeMarginBoxContainer.scrollTop =
+                    activeMarginBoxContainer.scrollHeight
+            }
+        }
+    }
+}

package/src/comments/editors/index.js

@@ -0,0 +1,4 @@
+export {CommentEditor} from "./comment"
+export {CommentAnswerEditor} from "./answer"
+
+export {serializeComment} from "./schema"

package/src/comments/editors/notify.js

@@ -0,0 +1,13 @@
+import {post} from "fwtoolkit"
+import {serializeCommentNode} from "./schema"
+
+export const notifyMentionedUser = (docId, userId, comment) => {
+    const {html, text} = serializeCommentNode(comment)
+    return post("/api/document/comment_notify/", {
+        doc_id: docId,
+        collaborator_id: userId,
+        comment_html: html,
+        comment_text: text,
+        type: "mention"
+    })
+}