@fiduswriter/editor 0.1.0

package/src/state_plugins/code_block.js

@@ -0,0 +1,201 @@
+import {ContentMenu} from "fwtoolkit"
+import {DOMSerializer} from "prosemirror-model"
+import {NodeSelection, Plugin, PluginKey} from "prosemirror-state"
+
+const key = new PluginKey("codeBlockMenu")
+
+class CodeBlockView {
+    constructor(node, view, getPos, options) {
+        this.node = node
+        this.view = view
+        this.getPos = getPos
+        this.options = options
+        this.dom = document.createElement("div")
+        this.dom.classList.add("code-block-wrapper")
+
+        // Add category label and title if present
+        if (this.node.attrs.category || this.node.attrs.title) {
+            this.addLabel()
+        }
+
+        // Use DOMSerializer to create the content
+        this.serializer = DOMSerializer.fromSchema(node.type.schema)
+        const preElement = this.serializer.serializeNode(this.node)
+        preElement.classList.forEach(className =>
+            this.dom.classList.add(className)
+        )
+        preElement.classList.value = ""
+        this.dom.appendChild(preElement)
+
+        // The contentDOM should be the <code> element inside <pre>
+        this.contentDOM = preElement.querySelector("code")
+
+        // Add menu button
+        this.menuButton = document.createElement("button")
+        this.menuButton.classList.add("code-block-menu-btn")
+        this.menuButton.innerHTML =
+            '<span class="dot-menu-icon"><i class="fa-solid fa-ellipsis-v"></i></span>'
+        this.dom.insertBefore(this.menuButton, this.dom.firstChild)
+
+        // Add language badge if language is set
+        if (this.node.attrs.language) {
+            this.addLanguageBadge()
+        }
+    }
+
+    addLabel() {
+        const {category, title, id} = this.node.attrs
+        const language = this.view.state.doc.attrs.language
+        const categories = {}
+
+        // Count code blocks by category
+        this.view.state.doc.descendants(node => {
+            if (node.attrs.track?.find(track => track.type === "deletion")) {
+                return true
+            }
+            if (
+                node.type.name === "code_block" &&
+                node.attrs.category &&
+                node.attrs.id
+            ) {
+                if (!categories[node.attrs.category]) {
+                    categories[node.attrs.category] = 0
+                }
+                categories[node.attrs.category]++
+
+                if (node.attrs.id === id) {
+                    // Found our position, stop counting
+                    return false
+                }
+            }
+        })
+
+        const label = document.createElement("div")
+        label.classList.add("code-block-label")
+
+        if (category && id) {
+            label.dataset.id = id
+            const {CATS} = require("@fiduswriter/document/schema/i18n")
+            const categoryLabel = CATS[category]?.[language] || category
+            const number = categories[category] || 1
+
+            const labelText = title
+                ? `${categoryLabel} ${number}: ${title}`
+                : `${categoryLabel} ${number}`
+
+            label.innerHTML = `<span class="label-text">${labelText}</span>`
+        } else if (title) {
+            // Title without category
+            label.innerHTML = `<span class="label-text">${title}</span>`
+        }
+
+        this.dom.appendChild(label)
+    }
+
+    addLanguageBadge() {
+        const badge = document.createElement("div")
+        badge.classList.add("code-block-language-badge")
+        badge.textContent = this.node.attrs.language
+        this.dom.appendChild(badge)
+    }
+
+    stopEvent(event) {
+        let stopped = false
+        if (event.type === "mousedown") {
+            const composedPath = event.composedPath()
+            if (composedPath.includes(this.menuButton)) {
+                stopped = true
+                const tr = this.view.state.tr
+                const $pos = this.view.state.doc.resolve(this.getPos())
+                tr.setSelection(new NodeSelection($pos))
+                this.view.dispatch(tr)
+                const contentMenu = new ContentMenu({
+                    menu: this.options.editor.menu.codeBlockMenuModel,
+                    width: 280,
+                    page: this.options.editor,
+                    menuPos: {
+                        X: Number.parseInt(event.pageX) + 20,
+                        Y: Number.parseInt(event.pageY) - 100
+                    },
+                    onClose: () => {
+                        this.view.focus()
+                    }
+                })
+                contentMenu.open()
+            } else if (
+                composedPath.includes(this.dom) &&
+                !composedPath.find(el => el.matches && el.matches("code"))
+            ) {
+                stopped = true
+                const tr = this.view.state.tr
+                const $pos = this.view.state.doc.resolve(this.getPos())
+                tr.setSelection(new NodeSelection($pos))
+                this.view.dispatch(tr)
+            }
+        }
+
+        return stopped
+    }
+
+    update(node) {
+        if (node.type !== this.node.type) {
+            return false
+        }
+
+        const oldNode = this.node
+        this.node = node
+
+        // Update language badge if changed
+        if (node.attrs.language !== oldNode.attrs.language) {
+            const existingBadge = this.dom.querySelector(
+                ".code-block-language-badge"
+            )
+            if (existingBadge) {
+                existingBadge.remove()
+            }
+            if (node.attrs.language) {
+                this.addLanguageBadge()
+            }
+        }
+
+        // Update label if category, title, or id changed
+        if (
+            node.attrs.category !== oldNode.attrs.category ||
+            node.attrs.title !== oldNode.attrs.title ||
+            node.attrs.id !== oldNode.attrs.id
+        ) {
+            const existingLabel = this.dom.querySelector(".code-block-label")
+            if (existingLabel) {
+                existingLabel.remove()
+            }
+            if (node.attrs.category || node.attrs.title) {
+                this.addLabel()
+            }
+        }
+
+        return true
+    }
+}
+
+export const codeBlockPlugin = options =>
+    new Plugin({
+        key,
+        state: {
+            init(_config, _state) {
+                if (options.editor.docInfo.access_rights === "write") {
+                    this.spec.props.nodeViews["code_block"] = (
+                        node,
+                        view,
+                        getPos
+                    ) => new CodeBlockView(node, view, getPos, options)
+                }
+                return {}
+            },
+            apply(_tr, prev) {
+                return prev
+            }
+        },
+        props: {
+            nodeViews: {}
+        }
+    })

package/src/state_plugins/collab_carets.js

@@ -0,0 +1,152 @@
+import {sendableSteps} from "prosemirror-collab"
+import {Plugin, PluginKey} from "prosemirror-state"
+import {Decoration, DecorationSet} from "prosemirror-view"
+
+const key = new PluginKey("collabCarets")
+
+export const getSelectionUpdate = state => {
+    const {caretUpdate} = key.getState(state)
+    return caretUpdate
+}
+
+export const updateCollaboratorSelection = (state, collaborator, data) => {
+    let {decos, caretPositions} = key.getState(state)
+
+    const oldCarPos = caretPositions.find(
+        carPos => carPos.sessionId === data.session_id
+    )
+
+    if (oldCarPos) {
+        caretPositions = caretPositions.filter(carPos => carPos !== oldCarPos)
+        const removeDecos = decos
+            .find()
+            .filter(deco => deco.spec === oldCarPos.decoSpec)
+        decos = decos.remove(removeDecos)
+    }
+
+    const widgetDom = document.createElement("div")
+    const className = `user-${collaborator.id}`
+    widgetDom.classList.add("caret")
+    widgetDom.classList.add(className)
+    widgetDom.innerHTML = '<div class="caret-head"></div>'
+    widgetDom.firstChild.classList.add(className)
+    const tooltip = collaborator.name
+    widgetDom.title = tooltip
+    widgetDom.firstChild.title = tooltip
+    const decoSpec = {id: data.session_id} // We will compare the decoSpec object. Id not really needed.
+    const newCarPos = {
+        sessionId: data.session_id,
+        userId: collaborator.id,
+        decoSpec,
+        anchor: data.anchor,
+        head: data.head
+    }
+    caretPositions.push(newCarPos)
+
+    const widgetDeco = Decoration.widget(data.head, widgetDom, decoSpec),
+        addDecos = [widgetDeco]
+
+    if (data.anchor !== data.head) {
+        const from = data.head > data.anchor ? data.anchor : data.head,
+            to = data.anchor > data.head ? data.anchor : data.head,
+            inlineDeco = Decoration.inline(
+                from,
+                to,
+                {
+                    class: `user-bg-${collaborator.id}`
+                },
+                decoSpec
+            )
+        addDecos.push(inlineDeco)
+    }
+    decos = decos.add(state.doc, addDecos)
+
+    const tr = state.tr.setMeta(key, {
+        decos,
+        caretPositions,
+        caretUpdate: false
+    })
+    return tr
+}
+
+export const removeCollaboratorSelection = (state, data) => {
+    let {decos, caretPositions} = key.getState(state)
+
+    const caretPosition = caretPositions.find(
+        carPos => carPos.sessionId === data.session_id
+    )
+
+    if (caretPosition) {
+        caretPositions = caretPositions.filter(
+            carPos => carPos !== caretPosition
+        )
+        const removeDecos = decos
+            .find()
+            .filter(deco => deco.spec === caretPosition.decoSpec)
+        decos = decos.remove(removeDecos)
+        const tr = state.tr.setMeta(key, {
+            decos,
+            caretPositions,
+            caretUpdate: false
+        })
+        return tr
+    }
+    return false
+}
+
+export const collabCaretsPlugin = options =>
+    new Plugin({
+        key,
+        state: {
+            init() {
+                return {
+                    caretPositions: [],
+                    decos: DecorationSet.empty,
+                    caretUpdate: false
+                }
+            },
+            apply(tr, _prev, oldState, state) {
+                const meta = tr.getMeta(key)
+                if (meta) {
+                    // There has been an update, return values from meta instead
+                    // of previous values
+                    return meta
+                }
+                let {decos, caretPositions} = this.getState(oldState),
+                    caretUpdate = false
+
+                decos = decos.map(tr.mapping, tr.doc, {
+                    onRemove: decoSpec => {
+                        caretPositions = caretPositions.filter(
+                            carPos => carPos.decoSpec !== decoSpec
+                        )
+                    }
+                })
+
+                if (
+                    tr.selectionSet &&
+                    !sendableSteps(state) &&
+                    !["review", "review-tracked"].includes(
+                        options.editor.docInfo.access_rights
+                    )
+                ) {
+                    caretUpdate = {
+                        anchor: tr.selection.anchor,
+                        head: tr.selection.head
+                    }
+                }
+
+                return {
+                    decos,
+                    caretPositions,
+                    caretUpdate
+                }
+            }
+        },
+        props: {
+            decorations(state) {
+                const {decos} = this.getState(state)
+                return decos
+            }
+        }
+    })

package/src/state_plugins/comments.js

@@ -0,0 +1,259 @@
+import {Plugin, PluginKey} from "prosemirror-state"
+import {AddMarkStep} from "prosemirror-transform"
+import {Decoration, DecorationSet} from "prosemirror-view"
+
+const key = new PluginKey("comments")
+
+const commentDuringCreationDecoSpec = {}
+
+const moveComment = (doc, id, pos) => {
+    // The content to which a comment was linked has been removed.
+    // We need to find text close to the position to which we can link
+    // comment.
+    if (!pos) {
+        // The position is linked to the start of the document. The minimum start
+        // position is 2
+        pos = 2
+    }
+    let posFrom = pos - 1
+    let posTo = pos
+    // We move backward through the document, trying to pick a start position
+    // the depth is 1 between document parts, and comments should be moved
+    // across these.
+    // We decrease the from position until there is some text between posFrom
+    // and posTo or until we hit the start of the document part.
+    while (
+        doc.resolve(posFrom).depth > 1 &&
+        !doc.textBetween(posFrom, posTo).length &&
+        posFrom
+    ) {
+        posFrom--
+    }
+    // If we ended up reaching a document part boundary rather than finding
+    // text, we try again, this time moving in the opposite direction.
+    // We start at the original position and then increase posTo
+    if (doc.resolve(posFrom).depth === 1) {
+        posFrom = posTo
+        posTo++
+        while (
+            doc.resolve(posTo).depth > 1 &&
+            !doc.textBetween(posFrom, posTo).length
+        ) {
+            posTo++
+        }
+
+        // If also the increase of posTo only made us reach a document part
+        // boundary, it means all text has been removed in this document part.
+        // Try placing it on the first letter of the title and otherwise give up.
+        if (doc.resolve(posTo).depth === 1) {
+            if (doc.textBetween(2, 3).length) {
+                posFrom = 2
+                posTo = 3
+            } else {
+                return
+            }
+        }
+    }
+    const markType = doc.type.schema.marks.comment.create({id})
+    return new AddMarkStep(posFrom, posTo, markType)
+}
+
+export const addCommentDuringCreationDecoration = (state, tr) => {
+    if (!tr.selection.from || tr.selection.from === tr.selection.to) {
+        return false
+    }
+    let {decos} = key.getState(state)
+
+    const commentDuringCreationDeco = decos.find(
+        undefined,
+        undefined,
+        spec => spec === commentDuringCreationDecoSpec
+    )
+
+    if (commentDuringCreationDeco) {
+        decos = decos.remove([commentDuringCreationDeco])
+    }
+
+    decos = decos.add(tr.doc, [
+        Decoration.inline(
+            tr.selection.from,
+            tr.selection.to,
+            {class: "active-comment"},
+            commentDuringCreationDecoSpec
+        )
+    ])
+
+    return tr.setMeta(key, {decos})
+}
+
+export const removeCommentDuringCreationDecoration = (state, tr) => {
+    let {decos} = key.getState(state)
+
+    const commentDuringCreationDecos = decos.find(
+        undefined,
+        undefined,
+        spec => spec === commentDuringCreationDecoSpec
+    )
+
+    if (!commentDuringCreationDecos) {
+        return false
+    }
+    decos = decos.remove(commentDuringCreationDecos)
+
+    return tr.setMeta(key, {decos})
+}
+
+export const getCommentDuringCreationDecoration = state => {
+    const {decos} = key.getState(state)
+
+    const deco = decos.find(
+        undefined,
+        undefined,
+        spec => spec === commentDuringCreationDecoSpec
+    )
+
+    if (deco.length) {
+        return deco[0]
+    } else {
+        return false
+    }
+}
+
+export const commentsPlugin = options =>
+    new Plugin({
+        key,
+        state: {
+            init() {
+                return {
+                    decos: DecorationSet.empty
+                }
+            },
+            apply(tr, _prev, oldState, _state) {
+                const meta = tr.getMeta(key)
+                if (meta) {
+                    // There has been an update, return values from meta instead
+                    // of previous values
+                    return meta
+                }
+                let {decos} = this.getState(oldState)
+
+                decos = decos.map(tr.mapping, tr.doc, {
+                    onRemove: _decoSpec => {
+                        // comment text has been deleted, cancel comment creation.
+                        options.editor.mod.comments.interactions.deleteComment(
+                            -1
+                        )
+                    }
+                })
+
+                return {
+                    decos
+                }
+            }
+        },
+        appendTransaction: (trs, _oldState, state) => {
+            // Check if any of the transactions are local.
+            if (trs.every(tr => tr.getMeta("remote"))) {
+                // All transactions are remote. Give up.
+                return
+            }
+
+            const deletedComments = {}
+            // Check what area is affected
+
+            trs.forEach(tr => {
+                Object.keys(deletedComments).forEach(commentId => {
+                    // map positions from earlier transactions
+                    deletedComments[commentId] = tr.mapping.map(
+                        deletedComments[commentId]
+                    )
+                })
+                tr.steps.forEach((step, index) => {
+                    if (
+                        step.jsonID === "replace" ||
+                        step.jsonID === "replaceAround"
+                    ) {
+                        if (step.from !== step.to) {
+                            tr.docs[index].nodesBetween(
+                                step.from,
+                                step.to,
+                                node => {
+                                    node.marks
+                                        .filter(
+                                            mark =>
+                                                mark.type.name === "comment" &&
+                                                mark.attrs.id
+                                        )
+                                        .map(mark => mark.attrs.id)
+                                        .forEach(commentId => {
+                                            if (
+                                                !deletedComments.hasOwnProperty(
+                                                    commentId
+                                                )
+                                            ) {
+                                                deletedComments[commentId] =
+                                                    step.from
+                                            }
+                                        })
+                                }
+                            )
+                        }
+                    }
+                })
+            })
+            if (!Object.keys(deletedComments).length) {
+                return
+            }
+
+            // We try to see if the deleted comments are still to be found in
+            // another part of the document.
+            state.doc.descendants(node => {
+                if (!node.isInline && !node.isLeaf) {
+                    return
+                }
+
+                node.marks
+                    .filter(
+                        mark => mark.type.name === "comment" && mark.attrs.id
+                    )
+                    .map(mark => mark.attrs.id)
+                    .forEach(commentId => {
+                        if (deletedComments.hasOwnProperty(commentId)) {
+                            delete deletedComments[commentId]
+                        }
+                    })
+            })
+            if (!Object.keys(deletedComments).length) {
+                return
+            }
+            let steps = [],
+                tr = state.tr
+            Object.entries(deletedComments).forEach(([id, pos]) => {
+                steps.push(moveComment(state.doc, id, pos))
+            })
+            if (!steps.every(step => step)) {
+                // At least one comment was placed in a part where it couldn't be put,
+                // and additionally it could not be put in the title either because it
+                // had no content.
+                // Add an empty space to the title, increase all positions, by 1, then
+                // try again.
+                tr = state.tr.insertText(" ", 2)
+                state = tr.state
+                steps = []
+                Object.entries(deletedComments).forEach(([id, pos]) => {
+                    pos++
+                    steps.push(moveComment(tr.doc, id, pos))
+                })
+                // If the step still is not working. give up. This should never happen.
+                steps = steps.filter(step => step)
+            }
+            steps.forEach(step => tr.step(step))
+            return tr
+        },
+        props: {
+            decorations(state) {
+                const {decos} = this.getState(state)
+                return decos
+            }
+        }
+    })