@fiduswriter/editor 0.1.19 → 0.1.21

package/src/state_plugins/contributor_input/{plugin.js → plugin.ts}

@@ -1,51 +1,59 @@
-/**
- * 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 type {Node as ProseMirrorNode} from "prosemirror-model"
+import {
+    NodeSelection,
+    Plugin,
+    PluginKey,
+    type EditorState,
+    type Selection,
+    type Transaction
+} from "prosemirror-state"
+import {Decoration, DecorationSet, type EditorView} from "prosemirror-view"
 import {nextSelection} from "@fiduswriter/common/state_plugins/contributor_input"
 
+import type {Editor} from "../../types.js"
 import {ContributorDialog} from "../../dialogs/index.js"
 import {ContributorsPartView} from "./node_view.js"
 import {createDropUp} from "./dropup.js"
 
 const key = new PluginKey("contributorInput")
 
+interface ContributorInputPluginOptions {
+    editor: Editor
+}
+
+interface ContributorInputState {
+    contributorsPartPositions: Array<{start: number; end: number}>
+    decos: DecorationSet
+}
+
+interface EditorViewWithEditor extends EditorView {
+    editor: any
+}
+
 /**
  * Create the contributor input plugin
- * @param {Object} options - Plugin options with editor reference
- * @returns {Plugin} ProseMirror plugin instance
  */
-export const contributorInputPlugin = options =>
-    new Plugin({
+export const contributorInputPlugin = (
+    options: ContributorInputPluginOptions
+) =>
+    new Plugin<ContributorInputState>({
         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) {
+            init(_config, state: EditorState) {
                 const decos = DecorationSet.empty
                 if (options.editor.docInfo.access_rights === "write") {
-                    this.spec.props.nodeViews["contributors_part"] = (
-                        node,
-                        view,
-                        getPos
+                    ;(this as any).spec.props.nodeViews["contributors_part"] = (
+                        node: ProseMirrorNode,
+                        view: EditorView,
+                        getPos: () => number | undefined
                     ) => new ContributorsPartView(node, view, getPos)
                 }
 
                 // Find all contributors_part nodes in document to track their positions
-                const contributorsPartPositions = []
+                const contributorsPartPositions: Array<{
+                    start: number
+                    end: number
+                }> = []
                 state.doc.descendants((node, pos) => {
                     if (node.type.name === "contributors_part") {
                         contributorsPartPositions.push({
@@ -57,14 +65,6 @@ export const contributorInputPlugin = options =>
 
                 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
@@ -87,23 +87,25 @@ export const contributorInputPlugin = options =>
                     // 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"
+                        undefined,
+                        undefined,
+                        spec => (spec as {id?: string}).id === "contributorDropUp"
                     )
                     if (oldDropUpDeco && oldDropUpDeco.length) {
                         decos = decos.remove(oldDropUpDeco)
                     }
 
                     if (
-                        state.selection.jsonID === "node" &&
+                        state.selection instanceof NodeSelection &&
                         state.selection.node.type.name === "contributor" &&
-                        state.selection.$anchor.node(1).attrs.locking !==
-                            "fixed"
+                        state.selection.$anchor.node(1).attrs.locking !== "fixed"
                     ) {
                         const dropUpDeco = Decoration.widget(
                             state.selection.from,
-                            createDropUp(state.selection, options.editor.view),
+                            createDropUp(
+                                state.selection,
+                                options.editor.view as EditorViewWithEditor
+                            ),
                             {
                                 side: -1,
                                 stopEvent: event => {
@@ -121,18 +123,17 @@ export const contributorInputPlugin = options =>
                                         event.type === "mousedown" ||
                                         event.type === "click"
                                     ) {
-                                        return event.target.closest(
-                                            ".drop-up-outer"
-                                        )
+                                        return !!(
+                                            event.target as Element
+                                        ).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 isTargetInDropUp = (
+                                            event.target as Element
+                                        ).closest(".drop-up-outer")
                                         const dropUpHasFocus =
                                             dropUpEl.contains(
                                                 document.activeElement
@@ -151,8 +152,8 @@ export const contributorInputPlugin = options =>
 
                                         // Arrow-Right and Arrow-Left should always pass through for contributor navigation
                                         if (
-                                            event.key === "ArrowRight" ||
-                                            event.key === "ArrowLeft"
+                                            (event as KeyboardEvent).key === "ArrowRight" ||
+                                            (event as KeyboardEvent).key === "ArrowLeft"
                                         ) {
                                             return false
                                         }
@@ -161,7 +162,7 @@ export const contributorInputPlugin = options =>
                                         // 1. The event target is within the drop-up, or
                                         // 2. The drop-up has focus
                                         if (
-                                            keysHandled.includes(event.key) &&
+                                            keysHandled.includes((event as KeyboardEvent).key) &&
                                             (isTargetInDropUp || dropUpHasFocus)
                                         ) {
                                             return true
@@ -185,20 +186,18 @@ export const contributorInputPlugin = options =>
         },
         props: {
             nodeViews: {},
-            decorations(state) {
-                const {decos} = this.getState(state)
+            decorations(state: EditorState) {
+                const {decos} = key.getState(state) as ContributorInputState
 
                 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) {
+            handleKeyDown(view: EditorView, event: KeyboardEvent) {
                 const isContributorSelected =
-                    view.state.selection.node?.type.name === "contributor"
+                    view.state.selection instanceof NodeSelection &&
+                    view.state.selection.node.type.name === "contributor"
                 const dropUpEl = document.querySelector(".drop-up-options")
                 const dropUpHasFocus =
                     dropUpEl && dropUpEl.contains(document.activeElement)
@@ -212,7 +211,7 @@ export const contributorInputPlugin = options =>
                 if (event.key === "ArrowUp" && isContributorSelected) {
                     event.preventDefault()
                     if (dropUpEl) {
-                        dropUpEl.focus()
+                        ;(dropUpEl as HTMLElement).focus()
                     }
                     return true
                 }
@@ -220,12 +219,13 @@ export const contributorInputPlugin = options =>
                 // 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 || []
+                        (view as EditorViewWithEditor).editor.mod
+                            .documentTemplate?.currentTemplate?.id_types || []
+                    const selection = view.state.selection as NodeSelection
                     const dialog = new ContributorDialog(
-                        view.state.selection.$anchor.parent,
+                        selection.$anchor.parent,
                         view,
-                        view.state.selection.node.attrs,
+                        selection.node.attrs,
                         idTypes
                     )
                     dialog.init()
@@ -238,13 +238,12 @@ export const contributorInputPlugin = options =>
         },
         /**
          * 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) => {
+        appendTransaction: (
+            trs: readonly Transaction[],
+            oldState: EditorState,
+            newState: EditorState
+        ): Transaction | null | undefined => {
             // If selection is not collapsed or not changed, don't do anything
             if (
                 newState.selection.from !== newState.selection.to ||
@@ -254,7 +253,7 @@ export const contributorInputPlugin = options =>
             }
 
             const selectionPos = newState.selection.from
-            const pluginState = key.getState(newState)
+            const pluginState = key.getState(newState) as ContributorInputState
 
             // Check if selection is within any contributors_part node to handle contributor navigation
             const contributorsPartRange =
@@ -285,7 +284,7 @@ export const contributorInputPlugin = options =>
                             return
                         }
 
-                        return newState.tr.setSelection(newSelection)
+                        return newState.tr.setSelection(newSelection as Selection)
                     }
                 }
 
@@ -305,7 +304,7 @@ export const contributorInputPlugin = options =>
                         // Cannot find a location. Give up.
                         return
                     }
-                    return newState.tr.setSelection(newSelection)
+                    return newState.tr.setSelection(newSelection as Selection)
                 } else {
                     // Select an entire contributor node
                     return newState.tr.setSelection(

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

@@ -1,29 +1,54 @@
-import {Fragment} from "prosemirror-model"
+import {Fragment, Node as ProseMirrorNode} from "prosemirror-model"
 import {Plugin, PluginKey} from "prosemirror-state"
+import type {EditorState} from "prosemirror-state"
+import type {EditorView, NodeView} from "prosemirror-view"
+
+import type {Editor} from "../types.js"
 
 const key = new PluginKey("documentTemplate")
 
-export function addDeletedPartWidget(dom, view, getPos) {
+interface DocumentTemplatePluginOptions {
+    editor: Editor
+}
+
+interface ProtectedRange {
+    from: number
+    to: number
+}
+
+export function addDeletedPartWidget(
+    dom: HTMLElement,
+    view: EditorView,
+    getPos: () => number | undefined
+): void {
     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
+    const removeButton = dom.lastElementChild as HTMLElement
     removeButton.addEventListener("click", () => {
-        const from = getPos(),
-            to = from + view.state.doc.nodeAt(from).nodeSize,
+        const pos = getPos()
+        if (pos === undefined) {
+            return
+        }
+        const from = pos,
+            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 getProtectedRanges(state: EditorState): ProtectedRange[] {
+    return (key.getState(state) as {protectedRanges: ProtectedRange[]})
+        .protectedRanges
 }
 
-export function getAllowedElementsAndMarks(state) {
+export function getAllowedElementsAndMarks(
+    state: EditorState
+): {elements: string[] | false; marks: string[] | false} {
     // 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.)
@@ -33,7 +58,7 @@ export function getAllowedElementsAndMarks(state) {
     }
 
     const allowedElements = docPart.attrs.elements
-        ? docPart.attrs.elements.concat(
+        ? (docPart.attrs.elements as string[]).concat(
               "table_caption",
               "table_body",
               "table_row",
@@ -45,7 +70,7 @@ export function getAllowedElementsAndMarks(state) {
         : false
 
     const allowedMarks = docPart.attrs.marks
-        ? docPart.attrs.marks.concat(
+        ? (docPart.attrs.marks as string[]).concat(
               "insertion",
               "deletion",
               "comment",
@@ -56,7 +81,7 @@ export function getAllowedElementsAndMarks(state) {
     return {elements: allowedElements, marks: allowedMarks}
 }
 
-export function checkProtectedInSelection(state) {
+export function checkProtectedInSelection(state: EditorState): boolean {
     // Checks whether there is a protected range
     // within a selection
     const anchorDocPart = state.selection.$anchor.node(1),
@@ -68,7 +93,7 @@ export function checkProtectedInSelection(state) {
         ["start", "header"].includes(anchorDocPart.attrs.locking) ||
         ["start", "header"].includes(headDocPart.attrs.locking)
     ) {
-        const protectedRanges = key.getState(state).protectedRanges,
+        const protectedRanges = getProtectedRanges(state),
             start = state.selection.from,
             end = state.selection.to
         if (
@@ -89,8 +114,18 @@ export function checkProtectedInSelection(state) {
     )
 }
 
-export class PartView {
-    constructor(node, view, getPos) {
+export class PartView implements NodeView {
+    node: ProseMirrorNode
+    view: EditorView
+    getPos: () => number | undefined
+    dom: HTMLElement
+    contentDOM: HTMLElement
+
+    constructor(
+        node: ProseMirrorNode,
+        view: EditorView,
+        getPos: () => number | undefined
+    ) {
         this.node = node
         this.view = view
         this.getPos = getPos
@@ -99,7 +134,7 @@ export class PartView {
         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
+            this.dom.dataset.hidden = "true"
         }
         if (node.attrs.deleted) {
             this.contentDOM = this.dom.appendChild(
@@ -111,37 +146,45 @@ export class PartView {
         }
     }
 
-    stopEvent() {
+    stopEvent(): boolean {
         return false
     }
 }
 
-export const documentTemplatePlugin = options =>
+export const documentTemplatePlugin = (
+    options: DocumentTemplatePluginOptions
+) =>
     new Plugin({
         key,
         state: {
             init(_config, state) {
                 if (options.editor.docInfo.access_rights === "write") {
-                    this.spec.props.nodeViews["richtext_part"] = (
-                        node,
-                        view,
-                        getPos
+                    ;((this as any).spec.props as any).nodeViews[
+                        "richtext_part"
+                    ] = (
+                        node: ProseMirrorNode,
+                        view: EditorView,
+                        getPos: () => number | undefined
                     ) => new PartView(node, view, getPos)
-                    this.spec.props.nodeViews["heading_part"] = (
-                        node,
-                        view,
-                        getPos
+                    ;((this as any).spec.props as any).nodeViews[
+                        "heading_part"
+                    ] = (
+                        node: ProseMirrorNode,
+                        view: EditorView,
+                        getPos: () => number | undefined
                     ) => new PartView(node, view, getPos)
-                    this.spec.props.nodeViews["table_part"] = (
-                        node,
-                        view,
-                        getPos
+                    ;((this as any).spec.props as any).nodeViews[
+                        "table_part"
+                    ] = (
+                        node: ProseMirrorNode,
+                        view: EditorView,
+                        getPos: () => number | undefined
                     ) => 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 = [
+                const protectedRanges: ProtectedRange[] = [
                     {from: 0, to: 1} // article node
                 ]
                 state.doc.forEach((node, pos) => {
@@ -156,14 +199,17 @@ export const documentTemplatePlugin = options =>
                             1 +
                             1 +
                             1 +
-                            node.firstChild.firstChild.nodeSize // + 1 for the part node + 1 for the table + 1 for the first row
+                            (node.firstChild as ProseMirrorNode).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) {
+                        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
@@ -193,7 +239,9 @@ export const documentTemplatePlugin = options =>
                 }
             },
             apply(tr, _prev, oldState, _state) {
-                let {protectedRanges} = this.getState(oldState)
+                let {protectedRanges} = key.getState(oldState) as {
+                    protectedRanges: ProtectedRange[]
+                }
                 protectedRanges = protectedRanges.map(marker => ({
                     from: tr.mapping.map(marker.from, 1),
                     to: tr.mapping.map(marker.to, -1)
@@ -222,10 +270,12 @@ export const documentTemplatePlugin = options =>
             if (state.doc.childCount !== tr.doc.childCount) {
                 return false
             }
-            const {protectedRanges} = key.getState(state)
+            const {protectedRanges} = key.getState(state) as {
+                protectedRanges: ProtectedRange[]
+            }
             let allowed = true
 
-            let changingRanges = []
+            let changingRanges: Array<{start: number; end: number}> = []
 
             // We map all changes back to the document before changes have been applied.
             tr.steps
@@ -240,10 +290,16 @@ export const documentTemplatePlugin = options =>
                             end: mapInv.map(range.end, 1)
                         }))
                     }
-                    if (["removeMark", "addMark"].includes(step.jsonID)) {
-                        changingRanges.push({start: step.from, end: step.to})
+                    const stepData = step as any
+                    if (
+                        ["removeMark", "addMark"].includes(stepData.jsonID)
+                    ) {
+                        changingRanges.push({
+                            start: stepData.from,
+                            end: stepData.to
+                        })
                     }
-                    map.forEach((start, end) => {
+                    map.forEach((start: number, end: number) => {
                         changingRanges.push({start, end})
                     })
                 })
@@ -261,17 +317,19 @@ export const documentTemplatePlugin = options =>
                 }
             })
 
-            let allowedElements = false,
-                allowedMarks = false
+            let allowedElements: string[] | false = false,
+                allowedMarks: string[] | false = false
 
             changingRanges.forEach(range =>
                 state.doc.nodesBetween(
-                    range.from,
-                    range.to,
+                    range.start,
+                    range.end,
                     (node, pos, parent, _index) => {
+                        const elements = allowedElements
+                        const marks = allowedMarks
                         if (parent === tr.doc) {
                             allowedElements = node.attrs.elements
-                                ? node.attrs.elements.concat(
+                                ? (node.attrs.elements as string[]).concat(
                                       "table_caption",
                                       "table_body",
                                       "table_row",
@@ -282,7 +340,7 @@ export const documentTemplatePlugin = options =>
                                   )
                                 : false
                             allowedMarks = node.attrs.marks
-                                ? node.attrs.marks.concat(
+                                ? (node.attrs.marks as string[]).concat(
                                       "insertion",
                                       "deletion",
                                       "comment",
@@ -291,21 +349,22 @@ export const documentTemplatePlugin = options =>
                                 : false
                             return allowed
                         }
-                        if (pos < range.from) {
+                        if (pos < range.start) {
                             return true
                         }
                         if (
-                            allowedElements &&
-                            !allowedElements.includes(node.type.name)
+                            Array.isArray(elements) &&
+                            !elements.includes(node.type.name)
                         ) {
                             allowed = false
-                        } else if (allowedMarks) {
+                        } else if (Array.isArray(marks)) {
                             node.marks.forEach(mark => {
-                                if (!allowedMarks.includes(mark.type.name)) {
+                                if (!marks.includes(mark.type.name)) {
                                     allowed = false
                                 }
                             })
                         }
+                        return undefined
                     }
                 )
             )