@fiduswriter/editor 0.1.20 → 0.1.21

package/src/state_plugins/tag_input/plugin.ts

@@ -0,0 +1,292 @@
+import {
+    NodeSelection,
+    Plugin,
+    PluginKey,
+    TextSelection
+} from "prosemirror-state"
+import type {Node} from "prosemirror-model"
+import type {EditorView} from "prosemirror-view"
+
+import {
+    nextSelection,
+    submitTag,
+    tagInputReferences
+} from "@fiduswriter/common/state_plugins/tag_input"
+
+import {TagsPartView} from "./node_view.js"
+import type {Editor} from "../../types.js"
+
+const key = new PluginKey("tagInput")
+
+// Track mouse click state across transactions using closure variable
+let mouseClickActive = false
+let mouseClickTimer: ReturnType<typeof setTimeout> | null = 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
+
+interface TagInputState {
+    tagsPartPositions: Array<{start: number; end: number}>
+}
+
+export const tagInputPlugin = (options: {editor: Editor}) =>
+    new Plugin<TagInputState>({
+        key,
+        state: {
+            init(_config, state) {
+                const self = this as unknown as {
+                    spec: {props: {nodeViews: Record<string, unknown>}}
+                }
+                if (options.editor.docInfo.access_rights === "write") {
+                    self.spec.props.nodeViews["tags_part"] = (
+                        node: Node,
+                        view: EditorView,
+                        getPos: () => number
+                    ) => new TagsPartView(node, view, getPos)
+                }
+
+                // Find all tags_part nodes in the document
+                const tagsPartPositions: Array<{start: number; end: number}> = []
+                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 target = event.target as HTMLElement
+                const clickedInsideTagInput = target.closest(".tag-input")
+                // Check if clicking on a tag within the tags_part (but not the tag input)
+                const clickedOnTag =
+                    target.closest(".tag") ||
+                    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 as HTMLElement
+                    )
+                    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) as TagInputState
+
+            // 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/toc_render.ts

@@ -0,0 +1,133 @@
+import {escapeText} from "fwtoolkit"
+import {Plugin, PluginKey} from "prosemirror-state"
+import {Decoration, DecorationSet} from "prosemirror-view"
+import type {Node} from "prosemirror-model"
+import type {EditorView} from "prosemirror-view"
+
+const key = new PluginKey("tocRender")
+
+interface TocItem {
+    type: Node
+    id: string
+    textContent: string
+}
+
+function getTocItems(decorations: DecorationSet) {
+    let tocItems: TocItem[] | undefined
+
+    decorations.find(undefined, undefined, (deco: Decoration) => {
+        if (deco.spec.tocItems) {
+            tocItems = deco.spec.tocItems as TocItem[]
+            return true
+        }
+        return false
+    })
+    return tocItems
+}
+
+function tocHTML(tocItems: TocItem[], title: string) {
+    return `<h1 class="toc">${escapeText(title)}</h1>
+    ${tocItems
+        .map(item => {
+            const level = (item.type as unknown as {name: string}).name.substr(-1)
+            return `<h${level}><a href="#${item.id}">${escapeText(item.textContent)}</a></h${level}>`
+        })
+        .join("")}`
+}
+
+class ToCView {
+    node: Node
+    view: EditorView
+    getPos: () => number
+    dom: HTMLDivElement
+    innerView: HTMLDivElement
+    contentDOM: HTMLDivElement
+
+    constructor(node: Node, view: EditorView, getPos: () => number) {
+        this.node = node
+        this.view = view
+        this.getPos = getPos
+        this.dom = document.createElement("div")
+        this.dom.classList.add("content-container", "toc")
+        this.dom.id = node.attrs.id as string
+        this.innerView = document.createElement("div")
+        this.dom.appendChild(this.innerView)
+        this.contentDOM = document.createElement("div")
+        this.dom.appendChild(this.contentDOM)
+        this.update(node)
+    }
+
+    update(node: Node) {
+        if (node.type !== this.node.type) {
+            return false
+        }
+        this.node = node
+        const tocPlugin = this.view.state.plugins.find(
+            plugin => plugin.spec.key === key
+        )
+        const tocItems = tocPlugin
+            ? getTocItems(key.getState(this.view.state) as DecorationSet)
+            : undefined
+        if (tocItems) {
+            this.innerView.innerHTML = tocHTML(
+                tocItems,
+                node.attrs.title as string
+            )
+        }
+        return true
+    }
+
+    stopEvent() {
+        return true
+    }
+}
+
+function findTocItems(doc: Node): TocItem[] {
+    const items: TocItem[] = []
+    doc.descendants(node => {
+        if (node.type.name.startsWith("heading") && node.attrs.id) {
+            items.push({
+                type: node,
+                id: node.attrs.id as string,
+                textContent: node.textContent
+            })
+        }
+    })
+    return items
+}
+
+export const tocRenderPlugin = (_options: {editor: unknown}) =>
+    new Plugin({
+        key,
+        state: {
+            init(_config, state) {
+                const tocItems = findTocItems(state.doc)
+                return DecorationSet.create(state.doc, [
+                    Decoration.widget(1, () => document.createElement("span"), {
+                        tocItems
+                    })
+                ])
+            },
+            apply(tr, value, _oldState, newState) {
+                value = value.map(tr.mapping, tr.doc)
+                if (!tr.docChanged) {
+                    return value
+                }
+                const tocItems = findTocItems(newState.doc)
+                const deco = Decoration.widget(
+                    1,
+                    () => document.createElement("span"),
+                    {
+                        tocItems
+                    }
+                )
+                return DecorationSet.create(newState.doc, [deco])
+            }
+        },
+        props: {
+            nodeViews: {
+                toc: (node: Node, view: EditorView, getPos: () => number | undefined) =>
+                    new ToCView(node, view, getPos as () => number)
+            }
+        }
+    })

package/src/state_plugins/{toolbar.js → toolbar.ts}

@@ -1,12 +1,14 @@
 import {Plugin, PluginKey} from "prosemirror-state"
+import type {EditorView} from "prosemirror-view"
 
 import {ToolbarView} from "../menus/index.js"
+import type {Editor} from "../types.js"
 
 const key = new PluginKey("toolbar")
-export const toolbarPlugin = options =>
+export const toolbarPlugin = (options: {editor: Editor}) =>
     new Plugin({
         key,
-        view(editorView) {
+        view(editorView: EditorView) {
             return new ToolbarView(editorView, options)
         }
     })

package/src/state_plugins/track/{find_selected_changes.js → find_selected_changes.ts}

@@ -1,21 +1,35 @@
+import type {EditorState} from "prosemirror-state"
+import type {Mark} from "prosemirror-model"
+
 import {getFromToMark} from "./helpers.js"
 
-export function findSelectedChanges(state) {
+interface SelectedChangeRange {
+    from: number
+    to: number
+}
+
+interface SelectedChanges {
+    insertion: SelectedChangeRange | false | null
+    deletion: SelectedChangeRange | false | null
+    formatChange: SelectedChangeRange | false | null
+}
+
+export function findSelectedChanges(state: EditorState): SelectedChanges {
     const selection = state.selection,
-        selectedChanges = {
+        selectedChanges: SelectedChanges = {
             insertion: false,
             deletion: false,
             formatChange: false
         }
-    let insertionPos = false,
-        deletionPos = false,
-        formatChangePos = false,
-        insertionMark,
-        deletionMark,
-        formatChangeMark,
-        insertionSize,
-        deletionSize,
-        formatChangeSize
+    let insertionPos: number | false = false,
+        deletionPos: number | false = false,
+        formatChangePos: number | false = false,
+        insertionMark: Mark | {type: string} | undefined,
+        deletionMark: Mark | {type: string} | undefined,
+        formatChangeMark: Mark | {type: string} | undefined,
+        insertionSize: number | undefined,
+        deletionSize: number | undefined,
+        formatChangeSize: number | undefined
 
     if (selection.empty) {
         const resolvedPos = state.doc.resolve(selection.from),
@@ -45,7 +59,7 @@ export function findSelectedChanges(state) {
             }
             if (!insertionMark) {
                 insertionMark = node.attrs.track
-                    ? node.attrs.track.find(
+                    ? (node.attrs.track as Array<{type: string}>).find(
                           trackAttr => trackAttr.type === "insertion"
                       )
                     : node.marks.find(
@@ -62,7 +76,7 @@ export function findSelectedChanges(state) {
             }
             if (!deletionMark) {
                 deletionMark = node.attrs.track
-                    ? node.attrs.track.find(
+                    ? (node.attrs.track as Array<{type: string}>).find(
                           trackAttr => trackAttr.type === "deletion"
                       )
                     : node.marks.find(mark => mark.type.name === "deletion")
@@ -84,24 +98,25 @@ export function findSelectedChanges(state) {
                     }
                 }
             }
+            return false
         })
     }
-    if (insertionMark) {
+    if (insertionMark && insertionPos !== false) {
         selectedChanges.insertion = insertionSize
             ? {from: insertionPos, to: insertionPos + insertionSize}
-            : getFromToMark(state.doc, insertionPos, insertionMark)
+            : getFromToMark(state.doc, insertionPos, insertionMark as Mark)
     }
 
-    if (deletionMark) {
+    if (deletionMark && deletionPos !== false) {
         selectedChanges.deletion = deletionSize
             ? {from: deletionPos, to: deletionPos + deletionSize}
-            : getFromToMark(state.doc, deletionPos, deletionMark)
+            : getFromToMark(state.doc, deletionPos, deletionMark as Mark)
     }
 
-    if (formatChangeMark) {
+    if (formatChangeMark && formatChangePos !== false) {
         selectedChanges.formatChange = formatChangeSize
             ? {from: formatChangePos, to: formatChangePos + formatChangeSize}
-            : getFromToMark(state.doc, formatChangePos, formatChangeMark)
+            : getFromToMark(state.doc, formatChangePos, formatChangeMark as Mark)
     }
     return selectedChanges
 }

package/src/state_plugins/track/{helpers.js → helpers.ts}

@@ -1,4 +1,6 @@
 import {Decoration, DecorationSet} from "prosemirror-view"
+import type {EditorState, Transaction} from "prosemirror-state"
+import type {Mark, Node} from "prosemirror-model"
 
 import {
     key,
@@ -8,8 +10,15 @@ import {
     selectedInsertionSpec
 } from "./plugin.js"
 
-export function getSelectedChanges(state) {
-    const keyState = key.getState(state)
+interface SelectedChanges {
+    insertion?: {from: number; to: number}
+    deletion?: {from: number; to: number}
+    format_change?: {from: number; to: number}
+    block_change?: {from: number; to: number}
+}
+
+export function getSelectedChanges(state: EditorState): SelectedChanges {
+    const keyState = key.getState(state) as {decos: DecorationSet}
     if (!keyState) {
         return {}
     }
@@ -39,18 +48,27 @@ export function getSelectedChanges(state) {
     return {insertion, deletion, format_change, block_change}
 }
 
-export function setSelectedChanges(state, type, pos) {
+export function setSelectedChanges(
+    state: EditorState,
+    type: string,
+    pos: number
+): Transaction | undefined {
     const tr = state.tr,
         node = tr.doc.nodeAt(pos),
-        mark = node.attrs.track
-            ? node.attrs.track.find(trackAttr => trackAttr.type === type)
-            : node.marks.find(mark => mark.type.name === type)
-    if (!mark) {
+        mark = node?.attrs.track
+            ? (node.attrs.track as Array<{type: string}>).find(
+                  trackAttr => trackAttr.type === type
+              )
+            : node?.marks.find(mark => mark.type.name === type)
+    if (!node || !mark) {
         return
     }
     const selectedChange = node.isInline
-        ? getFromToMark(tr.doc, pos, mark)
+        ? getFromToMark(tr.doc, pos, mark as Mark)
         : {from: pos, to: pos + node.nodeSize}
+    if (!selectedChange) {
+        return
+    }
     let decos = DecorationSet.empty,
         spec
     if (type === "insertion") {
@@ -61,6 +79,8 @@ export function setSelectedChanges(state, type, pos) {
         spec = selectedChangeFormatSpec
     } else if (type === "block_change") {
         spec = selectedChangeBlockSpec
+    } else {
+        return
     }
     const decoType = node.isInline ? Decoration.inline : Decoration.node
     decos = decos.add(tr.doc, [
@@ -76,7 +96,9 @@ export function setSelectedChanges(state, type, pos) {
     return tr.setMeta(key, {decos}).setMeta("track", true)
 }
 
-export function deactivateAllSelectedChanges(tr) {
+export function deactivateAllSelectedChanges(
+    tr: Transaction
+): Transaction {
     const pluginState = {
         decos: DecorationSet.empty
     }
@@ -84,7 +106,11 @@ export function deactivateAllSelectedChanges(tr) {
 }
 
 // From https://discuss.prosemirror.net/t/expanding-the-selection-to-the-active-mark/478/2 with some bugs fixed
-export function getFromToMark(doc, pos, mark) {
+export function getFromToMark(
+    doc: Node,
+    pos: number,
+    mark: Mark
+): {from: number; to: number} | null {
     const $pos = doc.resolve(pos),
         parent = $pos.parent
     const start = parent.childAfter($pos.parentOffset)