@fiduswriter/editor 0.1.0

package/src/state_plugins/contributor_input/plugin.js

@@ -0,0 +1,318 @@
+/**
+ * Contributor input plugin for ProseMirror editor
+ *
+ * Manages contributor selection, drop-up menu, and editing dialog
+ * Features:
+ * - Auto-select contributor nodes when navigating in contributors_part
+ * - Show drop-up menu when contributor is selected
+ * - Support keyboard navigation for contributors and drop-up menu
+ * - Handle contributor addition/editing via dialog
+ */
+import {NodeSelection, Plugin, PluginKey} from "prosemirror-state"
+import {Decoration, DecorationSet} from "prosemirror-view"
+
+import {ContributorDialog} from "../../dialogs"
+import {createDropUp} from "./dropup"
+import {nextSelection} from "./helpers"
+import {ContributorsPartView} from "./node_view"
+
+const key = new PluginKey("contributorInput")
+
+/**
+ * Create the contributor input plugin
+ * @param {Object} options - Plugin options with editor reference
+ * @returns {Plugin} ProseMirror plugin instance
+ */
+export const contributorInputPlugin = options =>
+    new Plugin({
+        key,
+        state: {
+            /**
+             * Initialize plugin state
+             * @param {Object} _config - Plugin config (unused)
+             * @param {Object} state - Initial ProseMirror state
+             * @returns {Object} Initial plugin state
+             */
+            init(_config, state) {
+                const decos = DecorationSet.empty
+                if (options.editor.docInfo.access_rights === "write") {
+                    this.spec.props.nodeViews["contributors_part"] = (
+                        node,
+                        view,
+                        getPos
+                    ) => new ContributorsPartView(node, view, getPos)
+                }
+
+                // Find all contributors_part nodes in document to track their positions
+                const contributorsPartPositions = []
+                state.doc.descendants((node, pos) => {
+                    if (node.type.name === "contributors_part") {
+                        contributorsPartPositions.push({
+                            start: pos,
+                            end: pos + node.nodeSize
+                        })
+                    }
+                })
+
+                return {contributorsPartPositions, decos}
+            },
+            /**
+             * Apply a transaction to plugin state
+             * @param {Transaction} tr - Transaction being applied
+             * @param {Object} prev - Previous plugin state
+             * @param {Object} oldState - ProseMirror state before transaction
+             * @param {Object} state - ProseMirror state after transaction
+             * @returns {Object} New plugin state
+             */
+            apply(tr, prev, _oldState, state) {
+                let {decos, contributorsPartPositions} = prev
+                // If document was modified, update all positions
+                if (tr.docChanged) {
+                    contributorsPartPositions = contributorsPartPositions.map(
+                        range => ({
+                            start: tr.mapping.map(range.start),
+                            end: tr.mapping.map(range.end)
+                        })
+                    )
+                    decos = decos.map(tr.mapping, tr.doc)
+                }
+                if (options.editor.docInfo.access_rights !== "write") {
+                    return {
+                        contributorsPartPositions,
+                        decos
+                    }
+                }
+                if (tr.selectionSet) {
+                    // Always remove any existing contributor drop-up before adding a new one
+                    // This ensures only one drop-up is ever shown at any time
+                    const oldDropUpDeco = decos.find(
+                        null,
+                        null,
+                        spec => spec.id === "contributorDropUp"
+                    )
+                    if (oldDropUpDeco && oldDropUpDeco.length) {
+                        decos = decos.remove(oldDropUpDeco)
+                    }
+
+                    if (
+                        state.selection.jsonID === "node" &&
+                        state.selection.node.type.name === "contributor" &&
+                        state.selection.$anchor.node(1).attrs.locking !==
+                            "fixed"
+                    ) {
+                        const dropUpDeco = Decoration.widget(
+                            state.selection.from,
+                            createDropUp(state.selection, options.editor.view),
+                            {
+                                side: -1,
+                                stopEvent: event => {
+                                    // Get drop-up element to check if it exists in DOM
+                                    const dropUpEl =
+                                        document.querySelector(".drop-up-outer")
+
+                                    if (!dropUpEl) {
+                                        // Drop-up not in DOM, let events pass through
+                                        return false
+                                    }
+
+                                    // Stop mouse events targeting the drop-up
+                                    if (
+                                        event.type === "mousedown" ||
+                                        event.type === "click"
+                                    ) {
+                                        return event.target.closest(
+                                            ".drop-up-outer"
+                                        )
+                                    }
+
+                                    // Stop keyboard events that should be handled by the drop-up
+                                    if (event.type === "keydown") {
+                                        // Check if event target is within drop-up or if drop-up has focus
+                                        const isTargetInDropUp =
+                                            event.target.closest(
+                                                ".drop-up-outer"
+                                            )
+                                        const dropUpHasFocus =
+                                            dropUpEl.contains(
+                                                document.activeElement
+                                            )
+
+                                        // Keys that should be handled by the drop-up
+                                        const keysHandled = [
+                                            "ArrowDown",
+                                            "ArrowUp",
+                                            "Enter",
+                                            " ",
+                                            "Escape",
+                                            "Home",
+                                            "End"
+                                        ]
+
+                                        // Arrow-Right and Arrow-Left should always pass through for contributor navigation
+                                        if (
+                                            event.key === "ArrowRight" ||
+                                            event.key === "ArrowLeft"
+                                        ) {
+                                            return false
+                                        }
+
+                                        // Only stop the event if it's a handled key and either:
+                                        // 1. The event target is within the drop-up, or
+                                        // 2. The drop-up has focus
+                                        if (
+                                            keysHandled.includes(event.key) &&
+                                            (isTargetInDropUp || dropUpHasFocus)
+                                        ) {
+                                            return true
+                                        }
+                                    }
+                                    return false
+                                },
+                                id: "contributorDropUp"
+                            }
+                        )
+
+                        decos = decos.add(state.doc, [dropUpDeco])
+                    }
+                }
+
+                return {
+                    contributorsPartPositions,
+                    decos
+                }
+            }
+        },
+        props: {
+            nodeViews: {},
+            decorations(state) {
+                const {decos} = this.getState(state)
+
+                return decos
+            },
+            /**
+             * Handle keyboard events
+             * @param {EditorView} view - ProseMirror editor view
+             * @param {KeyboardEvent} event - Keyboard event
+             * @returns {boolean} True if event was handled
+             */
+            handleKeyDown(view, event) {
+                const isContributorSelected =
+                    view.state.selection.node?.type.name === "contributor"
+                const dropUpEl = document.querySelector(".drop-up-options")
+                const dropUpHasFocus =
+                    dropUpEl && dropUpEl.contains(document.activeElement)
+
+                // If drop-up is focused, let it handle all keyboard events
+                if (dropUpHasFocus) {
+                    return false
+                }
+
+                // Arrow-Up on a selected contributor should focus the drop-up menu
+                if (event.key === "ArrowUp" && isContributorSelected) {
+                    event.preventDefault()
+                    if (dropUpEl) {
+                        dropUpEl.focus()
+                    }
+                    return true
+                }
+
+                // Space key on a selected contributor opens the dialog (when drop-up not focused)
+                if (event.key === " " && isContributorSelected) {
+                    const idTypes =
+                        view.editor.mod.documentTemplate?.currentTemplate
+                            ?.id_types || []
+                    const dialog = new ContributorDialog(
+                        view.state.selection.$anchor.parent,
+                        view,
+                        view.state.selection.node.attrs,
+                        idTypes
+                    )
+                    dialog.init()
+                    return true
+                }
+
+                // For all other cases, let ProseMirror handle the key
+                return false
+            }
+        },
+        /**
+         * Append additional transactions based on selection changes
+         * Handles auto-selection of contributor nodes when navigating in contributors_part
+         * @param {Array<Transaction>} trs - Transactions being applied
+         * @param {Object} oldState - State before transactions
+         * @param {Object} newState - State after transactions
+         * @returns {Transaction|null} Additional transaction to apply
+         */
+        appendTransaction: (trs, oldState, newState) => {
+            // If selection is not collapsed or not changed, don't do anything
+            if (
+                newState.selection.from !== newState.selection.to ||
+                !trs.some(tr => tr.selectionSet)
+            ) {
+                return
+            }
+
+            const selectionPos = newState.selection.from
+            const pluginState = key.getState(newState)
+
+            // Check if selection is within any contributors_part node to handle contributor navigation
+            const contributorsPartRange =
+                pluginState.contributorsPartPositions.find(
+                    range =>
+                        selectionPos > range.start && selectionPos < range.end
+                )
+
+            if (contributorsPartRange) {
+                const oldSelectionPos = oldState.selection.from
+
+                if (selectionPos + 1 === contributorsPartRange.end) {
+                    // Selection is at end of contributors_part.
+                    // Put caret onto contributor add button if write access is present.
+                    // Otherwise, move caret beyond contributors_part.
+                    if (options.editor.docInfo.access_rights === "write") {
+                        // contributor add button will be activated by node view.
+                        return
+                    }
+                    if (oldSelectionPos < selectionPos) {
+                        const newSelection = nextSelection(
+                            newState,
+                            contributorsPartRange.end,
+                            1
+                        )
+                        if (!newSelection) {
+                            // Cannot find a location. Give up.
+                            return
+                        }
+
+                        return newState.tr.setSelection(newSelection)
+                    }
+                }
+
+                const selectedNodePos =
+                    oldSelectionPos < selectionPos
+                        ? selectionPos
+                        : selectionPos - 1
+
+                if (selectedNodePos === contributorsPartRange.start) {
+                    // selection is at start of contributors node. Find previous possible selection location.
+                    const newSelection = nextSelection(
+                        newState,
+                        selectedNodePos,
+                        -1
+                    )
+                    if (!newSelection) {
+                        // Cannot find a location. Give up.
+                        return
+                    }
+                    return newState.tr.setSelection(newSelection)
+                } else {
+                    // Select an entire contributor node
+                    return newState.tr.setSelection(
+                        NodeSelection.create(newState.doc, selectedNodePos)
+                    )
+                }
+            }
+
+            return null
+        }
+    })

package/src/state_plugins/document_template.js

@@ -0,0 +1,315 @@
+import {Fragment} from "prosemirror-model"
+import {Plugin, PluginKey} from "prosemirror-state"
+
+const key = new PluginKey("documentTemplate")
+
+export function addDeletedPartWidget(dom, view, getPos) {
+    dom.classList.add("doc-deleted")
+    dom.insertAdjacentHTML(
+        "beforeend",
+        '<div class="remove-doc-part"><i class="fa-solid fa-trash-alt"></i></div>'
+    )
+    const removeButton = dom.lastElementChild
+    removeButton.addEventListener("click", () => {
+        const from = getPos(),
+            to = from + view.state.doc.nodeAt(from).nodeSize,
+            tr = view.state.tr
+        tr.delete(from, to)
+        tr.setMeta("deleteUnusedSection", true)
+        view.dispatch(tr)
+    })
+}
+export function getProtectedRanges(state) {
+    return key.getState(state).protectedRanges
+}
+
+export function getAllowedElementsAndMarks(state) {
+    // Get the allowed elements and marks at the current selection position
+    const {$anchor} = state.selection
+    const docPart = $anchor.node(1) // Get the part node (richtext_part, heading_part, etc.)
+
+    if (!docPart) {
+        return {elements: false, marks: false}
+    }
+
+    const allowedElements = docPart.attrs.elements
+        ? docPart.attrs.elements.concat(
+              "table_caption",
+              "table_body",
+              "table_row",
+              "table_cell",
+              "table_header",
+              "list_item",
+              "text"
+          )
+        : false
+
+    const allowedMarks = docPart.attrs.marks
+        ? docPart.attrs.marks.concat(
+              "insertion",
+              "deletion",
+              "comment",
+              "anchor"
+          )
+        : false
+
+    return {elements: allowedElements, marks: allowedMarks}
+}
+
+export function checkProtectedInSelection(state) {
+    // Checks whether there is a protected range
+    // within a selection
+    const anchorDocPart = state.selection.$anchor.node(1),
+        headDocPart = state.selection.$head.node(1)
+
+    // If the protection is of header/start check if selection falls within the
+    // protected range
+    if (
+        ["start", "header"].includes(anchorDocPart.attrs.locking) ||
+        ["start", "header"].includes(headDocPart.attrs.locking)
+    ) {
+        const protectedRanges = key.getState(state).protectedRanges,
+            start = state.selection.from,
+            end = state.selection.to
+        if (
+            protectedRanges.find(
+                ({from, to}) =>
+                    !(
+                        (start <= from && end <= from) ||
+                        (start >= to && end >= to)
+                    )
+            )
+        ) {
+            return true
+        }
+    }
+    return (
+        anchorDocPart.attrs.locking === "fixed" ||
+        headDocPart.attrs.locking === "fixed"
+    )
+}
+
+export class PartView {
+    constructor(node, view, getPos) {
+        this.node = node
+        this.view = view
+        this.getPos = getPos
+        this.dom = document.createElement("div")
+        this.dom.classList.add("doc-part")
+        this.dom.classList.add(`doc-${this.node.type.name}`)
+        this.dom.classList.add(`doc-${this.node.attrs.id}`)
+        if (node.attrs.hidden) {
+            this.dom.dataset.hidden = true
+        }
+        if (node.attrs.deleted) {
+            this.contentDOM = this.dom.appendChild(
+                document.createElement("div")
+            )
+            addDeletedPartWidget(this.dom, view, getPos)
+        } else {
+            this.contentDOM = this.dom
+        }
+    }
+
+    stopEvent() {
+        return false
+    }
+}
+
+export const documentTemplatePlugin = options =>
+    new Plugin({
+        key,
+        state: {
+            init(_config, state) {
+                if (options.editor.docInfo.access_rights === "write") {
+                    this.spec.props.nodeViews["richtext_part"] = (
+                        node,
+                        view,
+                        getPos
+                    ) => new PartView(node, view, getPos)
+                    this.spec.props.nodeViews["heading_part"] = (
+                        node,
+                        view,
+                        getPos
+                    ) => new PartView(node, view, getPos)
+                    this.spec.props.nodeViews["table_part"] = (
+                        node,
+                        view,
+                        getPos
+                    ) => new PartView(node, view, getPos)
+                    // Tags and Contributors have node views defined in tag_input and contributor_input.
+                    // TOCs have node views defined in toc_render.
+                }
+
+                const protectedRanges = [
+                    {from: 0, to: 1} // article node
+                ]
+                state.doc.forEach((node, pos) => {
+                    const from = pos
+                    let to = from
+                    if (node.attrs.locking === "fixed") {
+                        to = from + node.nodeSize
+                    } else if (node.attrs.locking === "header") {
+                        // only relevant for tables
+                        to =
+                            from +
+                            1 +
+                            1 +
+                            1 +
+                            node.firstChild.firstChild.nodeSize // + 1 for the part node + 1 for the table + 1 for the first row
+                    } else if (node.attrs.locking === "start") {
+                        let initialFragment = Fragment.fromJSON(
+                            options.editor.schema,
+                            node.attrs.initial
+                        )
+                        let protectionSize = initialFragment.size
+                        if (initialFragment.lastChild?.isTextblock) {
+                            protectionSize -= 1 // We allow writing at the end of the last text block.
+                            if (initialFragment.lastChild.nodeSize === 2) {
+                                // The last text block is empty, so we remove all protection from it, even node type
+                                protectionSize -= 1
+                            }
+                            initialFragment = initialFragment.cut(
+                                0,
+                                protectionSize
+                            )
+                        }
+                        if (
+                            node.content.size >= protectionSize &&
+                            initialFragment.eq(
+                                node.slice(0, protectionSize).content
+                            )
+                        ) {
+                            // We only add protection if the start of the current content corresponds to the
+                            // initial content. This may not be the case if the template has been changed.
+                            to = from + 1 + protectionSize // + 1 for inside the part node
+                        }
+                    }
+                    protectedRanges.push({from, to})
+                })
+
+                return {
+                    protectedRanges
+                }
+            },
+            apply(tr, _prev, oldState, _state) {
+                let {protectedRanges} = this.getState(oldState)
+                protectedRanges = protectedRanges.map(marker => ({
+                    from: tr.mapping.map(marker.from, 1),
+                    to: tr.mapping.map(marker.to, -1)
+                }))
+                return {
+                    protectedRanges
+                }
+            }
+        },
+        props: {
+            nodeViews: {}
+        },
+        filterTransaction: (tr, state) => {
+            if (
+                !tr.docChanged ||
+                tr.getMeta("fixIds") ||
+                tr.getMeta("remote") ||
+                tr.getMeta("track") ||
+                tr.getMeta("fromFootnote") ||
+                tr.getMeta("deleteUnusedSection") ||
+                tr.getMeta("settings") ||
+                ["historyUndo", "historyRedo"].includes(tr.getMeta("inputType"))
+            ) {
+                return true
+            }
+            if (state.doc.childCount !== tr.doc.childCount) {
+                return false
+            }
+            const {protectedRanges} = key.getState(state)
+            let allowed = true
+
+            let changingRanges = []
+
+            // We map all changes back to the document before changes have been applied.
+            tr.steps
+                .slice()
+                .reverse()
+                .forEach(step => {
+                    const map = step.getMap()
+                    if (changingRanges.length) {
+                        const mapInv = map.invert()
+                        changingRanges = changingRanges.map(range => ({
+                            start: mapInv.map(range.start, -1),
+                            end: mapInv.map(range.end, 1)
+                        }))
+                    }
+                    if (["removeMark", "addMark"].includes(step.jsonID)) {
+                        changingRanges.push({start: step.from, end: step.to})
+                    }
+                    map.forEach((start, end) => {
+                        changingRanges.push({start, end})
+                    })
+                })
+            changingRanges.forEach(({start, end}) => {
+                if (
+                    protectedRanges.find(
+                        ({from, to}) =>
+                            !(
+                                (start <= from && end <= from) ||
+                                (start >= to && end >= to)
+                            )
+                    )
+                ) {
+                    allowed = false
+                }
+            })
+
+            let allowedElements = false,
+                allowedMarks = false
+
+            changingRanges.forEach(range =>
+                state.doc.nodesBetween(
+                    range.from,
+                    range.to,
+                    (node, pos, parent, _index) => {
+                        if (parent === tr.doc) {
+                            allowedElements = node.attrs.elements
+                                ? node.attrs.elements.concat(
+                                      "table_caption",
+                                      "table_body",
+                                      "table_row",
+                                      "table_cell",
+                                      "table_header",
+                                      "list_item",
+                                      "text"
+                                  )
+                                : false
+                            allowedMarks = node.attrs.marks
+                                ? node.attrs.marks.concat(
+                                      "insertion",
+                                      "deletion",
+                                      "comment",
+                                      "anchor"
+                                  )
+                                : false
+                            return allowed
+                        }
+                        if (pos < range.from) {
+                            return true
+                        }
+                        if (
+                            allowedElements &&
+                            !allowedElements.includes(node.type.name)
+                        ) {
+                            allowed = false
+                        } else if (allowedMarks) {
+                            node.marks.forEach(mark => {
+                                if (!allowedMarks.includes(mark.type.name)) {
+                                    allowed = false
+                                }
+                            })
+                        }
+                    }
+                )
+            )
+
+            return allowed
+        }
+    })