@fiduswriter/editor 0.1.0

package/src/state_plugins/tag_input/plugin.js

@@ -0,0 +1,278 @@
+import {GapCursor} from "prosemirror-gapcursor"
+import {
+    NodeSelection,
+    Plugin,
+    PluginKey,
+    TextSelection
+} from "prosemirror-state"
+
+import {nextSelection, submitTag} from "./helpers"
+import {TagsPartView} from "./node_view"
+import {tagInputReferences} from "./tag_editor"
+
+const key = new PluginKey("tagInput")
+
+// Track mouse click state across transactions using closure variable
+let mouseClickActive = false
+let mouseClickTimer = null
+// Track when we've explicitly blurred the tag input to prevent refocus
+let tagInputJustBlurred = false
+
+// Export function to check if we should prevent tag input focus
+export const shouldPreventTagInputFocus = () => tagInputJustBlurred
+
+export const tagInputPlugin = options =>
+    new Plugin({
+        key,
+        state: {
+            init(_config, state) {
+                if (options.editor.docInfo.access_rights === "write") {
+                    this.spec.props.nodeViews["tags_part"] = (
+                        node,
+                        view,
+                        getPos
+                    ) => new TagsPartView(node, view, getPos)
+                }
+
+                // Find all tags_part nodes in the document
+                const tagsPartPositions = []
+                state.doc.descendants((node, pos) => {
+                    if (node.type.name === "tags_part") {
+                        tagsPartPositions.push({
+                            start: pos,
+                            end: pos + node.nodeSize
+                        })
+                    }
+                })
+
+                return {tagsPartPositions}
+            },
+            apply(tr, prev) {
+                // If the document was modified, update all positions
+                if (tr.docChanged) {
+                    const newPositions = prev.tagsPartPositions.map(range => ({
+                        start: tr.mapping.map(range.start),
+                        end: tr.mapping.map(range.end)
+                    }))
+
+                    return {tagsPartPositions: newPositions}
+                }
+                return prev
+            }
+        },
+        props: {
+            nodeViews: {},
+            handleDOMEvents: {
+                mousedown(view, event) {
+                    // Mark that this selection change came from a mouse click
+                    // Set the closure variable to indicate a mouse click is happening
+                    mouseClickActive = true
+
+                    // Clear any existing timer
+                    if (mouseClickTimer) {
+                        clearTimeout(mouseClickTimer)
+                    }
+
+                    // Reset after a delay to allow all related transactions to process
+                    // Including blur handlers and any delayed events
+                    mouseClickTimer = setTimeout(() => {
+                        mouseClickActive = false
+                        mouseClickTimer = null
+                    }, 100)
+
+                    // Check if we're clicking outside a focused tag input
+                    const activeElement = document.activeElement
+                    // Check if active element is inside a tag-input container
+                    const tagInputContainer =
+                        activeElement?.closest(".tag-input")
+                    const clickedInsideTagInput =
+                        event.target.closest(".tag-input")
+                    // Check if clicking on a tag within the tags_part (but not the tag input)
+                    const clickedOnTag =
+                        event.target.closest(".tag") ||
+                        event.target.closest(".doc-tags_part")
+
+                    // If a tag input has focus and we're clicking outside it (including on existing tags), submit and blur it
+                    if (
+                        tagInputContainer &&
+                        (!clickedInsideTagInput || clickedOnTag)
+                    ) {
+                        // Get the stored references from WeakMap
+                        const refs = tagInputReferences.get(tagInputContainer)
+                        if (refs) {
+                            const {tagInputView, mainView, getPos} = refs
+
+                            // Submit the tag immediately with the valid position
+                            submitTag(tagInputView, mainView, getPos)
+
+                            // If we clicked outside the tags_part entirely, set selection to clicked position
+                            // If we clicked on a tag, let the normal click handling select it
+                            if (!clickedOnTag) {
+                                // Now set the selection based on where the user clicked
+                                // We need to do this synchronously before appendTransaction runs
+                                const clickPos = view.posAtCoords({
+                                    left: event.clientX,
+                                    top: event.clientY
+                                })
+                                if (clickPos) {
+                                    const tr = view.state.tr.setSelection(
+                                        TextSelection.create(
+                                            view.state.doc,
+                                            clickPos.pos
+                                        )
+                                    )
+                                    view.dispatch(tr)
+                                    view.focus()
+                                }
+                            } else {
+                                // Blur the tag input first, then focus the main view
+
+                                // Set flag to prevent tag input from being refocused
+                                tagInputJustBlurred = true
+
+                                // Blur the tag input
+                                tagInputView.dom.blur()
+
+                                // Find the position of the clicked tag and select it
+                                const clickPos = view.posAtCoords({
+                                    left: event.clientX,
+                                    top: event.clientY
+                                })
+                                if (clickPos) {
+                                    // Try to create a NodeSelection on the tag
+                                    try {
+                                        const node = view.state.doc.nodeAt(
+                                            clickPos.pos
+                                        )
+                                        if (node && node.type.name === "tag") {
+                                            const tr =
+                                                view.state.tr.setSelection(
+                                                    NodeSelection.create(
+                                                        view.state.doc,
+                                                        clickPos.pos
+                                                    )
+                                                )
+                                            view.dispatch(tr)
+                                        } else {
+                                            // If not directly on a tag, try the position before
+                                            const nodeBefore =
+                                                view.state.doc.nodeAt(
+                                                    clickPos.pos - 1
+                                                )
+                                            if (
+                                                nodeBefore &&
+                                                nodeBefore.type.name === "tag"
+                                            ) {
+                                                const tr =
+                                                    view.state.tr.setSelection(
+                                                        NodeSelection.create(
+                                                            view.state.doc,
+                                                            clickPos.pos - 1
+                                                        )
+                                                    )
+                                                view.dispatch(tr)
+                                            }
+                                        }
+                                    } catch {
+                                        // Silently ignore selection errors
+                                    }
+                                }
+
+                                view.focus()
+
+                                // Reset the flag after a short delay
+                                setTimeout(() => {
+                                    tagInputJustBlurred = false
+                                }, 150)
+                            }
+                        }
+                    }
+
+                    return false
+                }
+            }
+        },
+        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)
+
+            // If this selection change came from a mouse click, don't interfere
+            if (mouseClickActive) {
+                return
+            }
+
+            // If selection is already a NodeSelection on a tag, don't interfere
+            if (newState.selection instanceof NodeSelection) {
+                const selectedNode = newState.selection.node
+                if (selectedNode && selectedNode.type.name === "tag") {
+                    return
+                }
+            }
+
+            // Check if selection is within any tags_part node
+            const tagsPartRange = pluginState.tagsPartPositions.find(
+                range => selectionPos > range.start && selectionPos < range.end
+            )
+
+            if (tagsPartRange) {
+                const oldSelectionPos = oldState.selection.from
+
+                if (selectionPos + 1 === tagsPartRange.end) {
+                    // Selection is at end of tags_part.
+                    // Put caret into tag editor if write access is present.
+                    // Otherwise, move caret beyond tags_part.
+                    if (options.editor.docInfo.access_rights === "write") {
+                        // tag editor will be activated by node view.
+                        return
+                    }
+                    if (oldSelectionPos < selectionPos) {
+                        const newSelection = nextSelection(
+                            newState,
+                            tagsPartRange.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 === tagsPartRange.start) {
+                    // selection is at start of tags 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 tag node
+                    return newState.tr.setSelection(
+                        NodeSelection.create(newState.doc, selectedNodePos)
+                    )
+                }
+            }
+
+            return null
+        }
+    })

package/src/state_plugins/tag_input/tag_editor.js

@@ -0,0 +1,202 @@
+import {history, redo, undo} from "prosemirror-history"
+import {keymap} from "prosemirror-keymap"
+import {Schema} from "prosemirror-model"
+import {NodeSelection, TextSelection} from "prosemirror-state"
+import {EditorState} from "prosemirror-state"
+import {EditorView} from "prosemirror-view"
+
+import {nextSelection, submitTag} from "./helpers"
+import {pastePlugin, placeholderPlugin} from "./tag_editor_plugins"
+
+// WeakMap to store tag input references for access from the plugin
+export const tagInputReferences = new WeakMap()
+
+const doc = {content: "tag"},
+    tag = {
+        content: "inline*",
+        parseDOM: [{tag: "div.tag-input-editor"}],
+        toDOM() {
+            return [
+                "div",
+                {
+                    class: "tag-input-editor"
+                },
+                0
+            ]
+        }
+    },
+    text = {group: "inline"}
+
+const schema = new Schema({
+    nodes: {doc, tag, text},
+    marks: {}
+})
+
+const ArrowLeft = (state, dispatch, getNode, view, getPos) => {
+    // If we're at the leftmost position (position 1), stopEvent will handle moving out of the tag
+    if (state.selection.to > 1) {
+        // Inside the tag input, move caret left normally
+        const tr = state.tr.setSelection(
+            TextSelection.create(
+                state.doc,
+                state.selection.from - 1,
+                state.selection.to - 1
+            )
+        )
+        dispatch(tr)
+        return true
+    } else {
+        const node = getNode()
+        // Exit tag input to the left
+        if (node.nodeSize > 2) {
+            // At least one tag
+            const startPos = getPos() + node.nodeSize - 2
+            view.dispatch(
+                view.state.tr.setSelection(
+                    NodeSelection.create(view.state.doc, startPos)
+                )
+            )
+            view.focus()
+            return true
+        } else {
+            // There is no tag
+            return ArrowUp(state, dispatch, getNode, view, getPos)
+        }
+    }
+}
+
+const ArrowUp = (_state, _dispatch, _getNode, view, getPos) => {
+    // We jump to the section before this one.
+    const startPos = getPos()
+
+    const newSelection = nextSelection(view.state, startPos, -1)
+
+    if (!newSelection) {
+        return false
+    }
+
+    view.dispatch(view.state.tr.setSelection(newSelection))
+    view.focus()
+    return true
+}
+
+const ArrowRight = (state, dispatch, getNode, view, getPos) => {
+    const docSize = state.doc.nodeSize - 3
+    // If we're at the rightmost position, stopEvent will handle moving out of the tag
+    if (state.selection.from < docSize) {
+        // Inside the tag input, move caret right normally
+        const tr = state.tr.setSelection(
+            TextSelection.create(
+                state.doc,
+                state.selection.from + 1,
+                state.selection.from + 1
+            )
+        )
+        dispatch(tr)
+        return true
+    } else {
+        return ArrowDown(state, dispatch, getNode, view, getPos)
+    }
+}
+
+const ArrowDown = (_state, _dispatch, getNode, view, getPos) => {
+    // We are at the end of the tag input. Move the cursor beyond
+    const node = getNode()
+    const startPos = getPos(),
+        pos = startPos + node.nodeSize + 1
+
+    const newSelection = nextSelection(view.state, pos, 1)
+
+    if (!newSelection) {
+        return false
+    }
+
+    view.dispatch(view.state.tr.setSelection(newSelection))
+    view.focus()
+    return true
+}
+
+export const createTagEditor = (view, getPos, getNode) => {
+    const dom = document.createElement("div")
+    dom.classList.add("tag-input")
+    dom.setAttribute("contenteditable", false)
+    const node = getNode()
+
+    const tagInputView = new EditorView(dom, {
+        state: EditorState.create({
+            schema,
+            doc: schema.nodeFromJSON({
+                type: "doc",
+                content: [
+                    {
+                        type: "tag",
+                        content: []
+                    }
+                ]
+            }),
+            plugins: [
+                history(),
+                placeholderPlugin(node.attrs.item_title),
+                pastePlugin(view),
+                keymap({
+                    "Mod-z": undo,
+                    "Mod-shift-z": undo,
+                    "Mod-y": redo,
+                    Enter: (_state, _dispatch, tagInputView) =>
+                        submitTag(tagInputView, view, getPos),
+                    ArrowLeft: (state, dispatch, _tagInputView) =>
+                        ArrowLeft(state, dispatch, getNode, view, getPos),
+                    ArrowRight: (state, dispatch, _tagInputView) =>
+                        ArrowRight(state, dispatch, getNode, view, getPos),
+                    ArrowUp: (state, dispatch, _tagInputView) =>
+                        ArrowUp(state, dispatch, getNode, view, getPos),
+                    ArrowDown: (state, dispatch, _tagInputView) =>
+                        ArrowDown(state, dispatch, getNode, view, getPos)
+                })
+            ]
+        }),
+        handleDOMEvents: {
+            blur: (tagInputView, event) => {
+                // Handle blur event
+                event.preventDefault()
+                // Set a timeout so that change of focus can take place first
+                window.setTimeout(() => {
+                    // Check if getPos still returns a valid position
+                    const pos = getPos()
+                    if (pos !== undefined && pos !== null) {
+                        submitTag(tagInputView, view, getPos)
+                    }
+                }, 1)
+            },
+            focus: (tagInputView, _event) => {
+                const startPos = getPos(),
+                    pos =
+                        startPos + view.state.doc.nodeAt(startPos).nodeSize - 1,
+                    $pos = view.state.doc.resolve(pos)
+                view.dispatch(
+                    view.state.tr.setSelection(new TextSelection($pos))
+                )
+                tagInputView.focus()
+            }
+        },
+        handleTextInput: (_view, _from, _to, text) => {
+            if ([",", ".", ";"].includes(text)) {
+                submitTag(tagInputView, view, getPos)
+                return true
+            }
+        },
+        dispatchTransaction: tr => {
+            const newState = tagInputView.state.apply(tr)
+            tagInputView.updateState(newState)
+        }
+    })
+
+    // Store references in WeakMap for access from the plugin
+    tagInputReferences.set(dom, {
+        tagInputView,
+        mainView: view,
+        getPos
+    })
+
+    return [dom, tagInputView]
+}

package/src/state_plugins/tag_input/tag_editor_plugins.js

@@ -0,0 +1,74 @@
+import {Plugin} from "prosemirror-state"
+import {Decoration, DecorationSet} from "prosemirror-view"
+
+export const placeholderPlugin = nodeTitle =>
+    new Plugin({
+        props: {
+            decorations: state => {
+                const doc = state.doc
+                if (
+                    doc.childCount === 1 &&
+                    doc.firstChild.isTextblock &&
+                    doc.firstChild.content.size === 0
+                ) {
+                    const placeHolder = document.createElement("span")
+                    placeHolder.classList.add("fw-placeholder")
+                    // There is only one field, so we know the selection is there
+                    placeHolder.classList.add("fw-selected")
+                    placeHolder.setAttribute(
+                        "data-placeholder",
+                        `${gettext("Add")} ${nodeTitle.toLowerCase()}...`
+                    )
+                    return DecorationSet.create(doc, [
+                        Decoration.widget(1, placeHolder)
+                    ])
+                }
+            }
+        }
+    })
+
+export const pastePlugin = editorView => {
+    return new Plugin({
+        props: {
+            handleDOMEvents: {
+                paste(_view, event) {
+                    const html = event.clipboardData.getData("text/html"),
+                        text = event.clipboardData.getData("text/plain"),
+                        slice = text
+                            .split(/[,;.]/)
+                            .map(item => item.trim())
+                            .filter(item => item.length)
+                    let tags
+                    if (text && !html) {
+                        tags = slice
+                    } else {
+                        // Make a paste DOM document
+                        const clipboardDoc =
+                            document.implementation.createHTMLDocument(
+                                "paste document"
+                            )
+                        const pasteHTML = document.createElement("body")
+                        clipboardDoc.body.appendChild(pasteHTML)
+                        pasteHTML.innerHTML = html
+                        tags = Array.from(
+                            pasteHTML.querySelectorAll("span.tag")
+                        ).map(tag => tag.textContent)
+                    }
+                    if (!tags.length) {
+                        return
+                    }
+                    const pos = editorView.state.selection.from
+                    const tr = editorView.state.tr
+                    tags.reverse().forEach(tag => {
+                        const node = editorView.state.schema.nodes.tag.create({
+                            tag
+                        })
+                        tr.insert(pos, node)
+                    })
+                    editorView.dispatch(tr)
+                    return true
+                }
+            }
+        }
+    })
+}