@fiduswriter/editor 0.1.20 → 0.1.21

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

@@ -1,12 +1,24 @@
 import {Plugin, PluginKey} from "prosemirror-state"
 import {AddMarkStep} from "prosemirror-transform"
 import {Decoration, DecorationSet} from "prosemirror-view"
+import type {EditorState, Transaction} from "prosemirror-state"
+import type {Node} from "prosemirror-model"
+
+import type {Editor} from "../types.js"
 
 const key = new PluginKey("comments")
 
 const commentDuringCreationDecoSpec = {}
 
-const moveComment = (doc, id, pos) => {
+interface CommentPluginOptions {
+    editor: Editor
+}
+
+const moveComment = (
+    doc: Node,
+    id: number | string,
+    pos: number | undefined
+): AddMarkStep | undefined => {
     // The content to which a comment was linked has been removed.
     // We need to find text close to the position to which we can link
     // comment.
@@ -58,17 +70,22 @@ const moveComment = (doc, id, pos) => {
     return new AddMarkStep(posFrom, posTo, markType)
 }
 
-export const addCommentDuringCreationDecoration = (state, tr) => {
+export const addCommentDuringCreationDecoration = (
+    state: EditorState,
+    tr: Transaction
+): Transaction | false => {
     if (!tr.selection.from || tr.selection.from === tr.selection.to) {
         return false
     }
-    let {decos} = key.getState(state)
+    let {decos} = key.getState(state) as {decos: DecorationSet}
 
-    const commentDuringCreationDeco = decos.find(
-        undefined,
-        undefined,
-        spec => spec === commentDuringCreationDecoSpec
-    )
+    const commentDuringCreationDeco = (
+        decos.find(
+            undefined,
+            undefined,
+            spec => spec === commentDuringCreationDecoSpec
+        ) as Decoration[]
+    )[0]
 
     if (commentDuringCreationDeco) {
         decos = decos.remove([commentDuringCreationDeco])
@@ -86,8 +103,11 @@ export const addCommentDuringCreationDecoration = (state, tr) => {
     return tr.setMeta(key, {decos})
 }
 
-export const removeCommentDuringCreationDecoration = (state, tr) => {
-    let {decos} = key.getState(state)
+export const removeCommentDuringCreationDecoration = (
+    state: EditorState,
+    tr: Transaction
+): Transaction | false => {
+    let {decos} = key.getState(state) as {decos: DecorationSet}
 
     const commentDuringCreationDecos = decos.find(
         undefined,
@@ -103,8 +123,10 @@ export const removeCommentDuringCreationDecoration = (state, tr) => {
     return tr.setMeta(key, {decos})
 }
 
-export const getCommentDuringCreationDecoration = state => {
-    const {decos} = key.getState(state)
+export const getCommentDuringCreationDecoration = (
+    state: EditorState
+): Decoration | false => {
+    const {decos} = key.getState(state) as {decos: DecorationSet}
 
     const deco = decos.find(
         undefined,
@@ -119,7 +141,7 @@ export const getCommentDuringCreationDecoration = state => {
     }
 }
 
-export const commentsPlugin = options =>
+export const commentsPlugin = (options: CommentPluginOptions) =>
     new Plugin({
         key,
         state: {
@@ -135,12 +157,12 @@ export const commentsPlugin = options =>
                     // of previous values
                     return meta
                 }
-                let {decos} = this.getState(oldState)
+                let {decos} = key.getState(oldState) as {decos: DecorationSet}
 
                 decos = decos.map(tr.mapping, tr.doc, {
                     onRemove: _decoSpec => {
                         // comment text has been deleted, cancel comment creation.
-                        options.editor.mod.comments.interactions.deleteComment(
+                        ;(options.editor.mod.comments as any).interactions.deleteComment(
                             -1
                         )
                     }
@@ -155,10 +177,10 @@ export const commentsPlugin = options =>
             // Check if any of the transactions are local.
             if (trs.every(tr => tr.getMeta("remote"))) {
                 // All transactions are remote. Give up.
-                return
+                return null
             }
 
-            const deletedComments = {}
+            const deletedComments: Record<string, number> = {}
             // Check what area is affected
 
             trs.forEach(tr => {
@@ -169,15 +191,16 @@ export const commentsPlugin = options =>
                     )
                 })
                 tr.steps.forEach((step, index) => {
+                    const stepData = step as any
                     if (
-                        step.jsonID === "replace" ||
-                        step.jsonID === "replaceAround"
+                        stepData.jsonID === "replace" ||
+                        stepData.jsonID === "replaceAround"
                     ) {
-                        if (step.from !== step.to) {
-                            tr.docs[index].nodesBetween(
-                                step.from,
-                                step.to,
-                                node => {
+                        if (stepData.from !== stepData.to) {
+                            ;(tr.docs[index] as Node).nodesBetween(
+                                stepData.from,
+                                stepData.to,
+                                (node: Node) => {
                                     node.marks
                                         .filter(
                                             mark =>
@@ -187,12 +210,13 @@ export const commentsPlugin = options =>
                                         .map(mark => mark.attrs.id)
                                         .forEach(commentId => {
                                             if (
-                                                !deletedComments.hasOwnProperty(
+                                                !Object.prototype.hasOwnProperty.call(
+                                                    deletedComments,
                                                     commentId
                                                 )
                                             ) {
                                                 deletedComments[commentId] =
-                                                    step.from
+                                                    stepData.from
                                             }
                                         })
                                 }
@@ -202,12 +226,12 @@ export const commentsPlugin = options =>
                 })
             })
             if (!Object.keys(deletedComments).length) {
-                return
+                return null
             }
 
             // We try to see if the deleted comments are still to be found in
             // another part of the document.
-            state.doc.descendants(node => {
+            state.doc.descendants((node: Node) => {
                 if (!node.isInline && !node.isLeaf) {
                     return
                 }
@@ -218,17 +242,23 @@ export const commentsPlugin = options =>
                     )
                     .map(mark => mark.attrs.id)
                     .forEach(commentId => {
-                        if (deletedComments.hasOwnProperty(commentId)) {
+                        if (
+                            Object.prototype.hasOwnProperty.call(
+                                deletedComments,
+                                commentId
+                            )
+                        ) {
                             delete deletedComments[commentId]
                         }
                     })
             })
             if (!Object.keys(deletedComments).length) {
-                return
+                return null
             }
-            let steps = [],
-                tr = state.tr
-            Object.entries(deletedComments).forEach(([id, pos]) => {
+            let steps: (AddMarkStep | undefined)[] = []
+            let tr = state.tr
+            Object.entries(deletedComments).forEach(([_id, pos]) => {
+                const id = Number.parseInt(_id)
                 steps.push(moveComment(state.doc, id, pos))
             })
             if (!steps.every(step => step)) {
@@ -238,21 +268,21 @@ export const commentsPlugin = options =>
                 // Add an empty space to the title, increase all positions, by 1, then
                 // try again.
                 tr = state.tr.insertText(" ", 2)
-                state = tr.state
+                state = state.apply(tr)
                 steps = []
-                Object.entries(deletedComments).forEach(([id, pos]) => {
-                    pos++
-                    steps.push(moveComment(tr.doc, id, pos))
+                Object.entries(deletedComments).forEach(([_id, pos]) => {
+                    const id = Number.parseInt(_id)
+                    steps.push(moveComment(tr.doc, id, pos + 1))
                 })
                 // If the step still is not working. give up. This should never happen.
                 steps = steps.filter(step => step)
             }
-            steps.forEach(step => tr.step(step))
+            steps.forEach(step => tr.step(step as AddMarkStep))
             return tr
         },
         props: {
-            decorations(state) {
-                const {decos} = this.getState(state)
+            decorations(state: EditorState) {
+                const {decos} = this.getState(state) as {decos: DecorationSet}
                 return decos
             }
         }

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

@@ -1,7 +1,28 @@
+import type {Node as ProseMirrorNode} from "prosemirror-model"
+import type {NodeSelection} from "prosemirror-state"
+import {Selection} from "prosemirror-state"
+import type {EditorView} from "prosemirror-view"
 import {escapeText, noSpaceTmp} from "fwtoolkit"
+
 import {ContributorDialog} from "../../dialogs/index.js"
 
-/** @typedef {{text: string, className: string, action: Function}} MenuOption */
+interface EditorViewWithEditor extends EditorView {
+    editor: {
+        mod: {
+            documentTemplate?: {
+                currentTemplate?: {
+                    id_types?: string[]
+                }
+            }
+        }
+    }
+}
+
+interface MenuOption {
+    text: string
+    className: string
+    action: () => void
+}
 
 /**
  * Contributor drop-up menu widget
@@ -9,12 +30,24 @@ import {ContributorDialog} from "../../dialogs/index.js"
  * Supports keyboard navigation and mouse interactions
  */
 class ContributorDropUp {
+    selection: NodeSelection
+    view: EditorViewWithEditor
+    parentNode: ProseMirrorNode
+    focusedIndex: number
+    menuOptions: MenuOption[]
+    openingDialog: boolean
+    dropUp: HTMLElement
+
     /**
-     * @param {Object} selection - ProseMirror selection object
-     * @param {Object} view - ProseMirror editor view
-     * @param {Array<MenuOption>} [menuOptions] - Optional custom menu options
+     * @param selection - ProseMirror selection object
+     * @param view - ProseMirror editor view
+     * @param menuOptions - Optional custom menu options
      */
-    constructor(selection, view, menuOptions = null) {
+    constructor(
+        selection: NodeSelection,
+        view: EditorViewWithEditor,
+        menuOptions: MenuOption[] | null = null
+    ) {
         this.selection = selection
         this.view = view
         this.parentNode = selection.$anchor.parent
@@ -28,9 +61,8 @@ class ContributorDropUp {
 
     /**
      * Get default menu options for contributor drop-up
-     * @returns {Array<MenuOption>} Default menu options
      */
-    getDefaultMenuOptions() {
+    getDefaultMenuOptions(): MenuOption[] {
         return [
             {
                 text: gettext("Edit"),
@@ -42,9 +74,8 @@ class ContributorDropUp {
 
     /**
      * Create the drop-up DOM element
-     * @returns {HTMLElement} The drop-up element
      */
-    createDropUp() {
+    createDropUp(): HTMLElement {
         const dropUp = document.createElement("span")
         const requiredPx = 120
 
@@ -63,7 +94,7 @@ class ContributorDropUp {
         dropUp.innerHTML = noSpaceTmp`
             <div class="link drop-up-inner" style="top: -${requiredPx}px;">
                 <div class="drop-up-head">
-                    <div>${escapeText(this.parentNode.attrs.item_title)}</div>
+                    <div>${escapeText(this.parentNode.attrs.item_title as string)}</div>
                 </div>
                 <ul class="drop-up-options">
                     ${optionsHTML}
@@ -76,12 +107,12 @@ class ContributorDropUp {
     /**
      * Set up all event handlers for the drop-up
      */
-    setupEventHandlers() {
+    setupEventHandlers(): void {
         const optionsList = this.dropUp.querySelector(".drop-up-options")
         const options = this.dropUp.querySelectorAll(".drop-up-option")
 
         // Make the options list focusable so it can receive keyboard events
-        optionsList.setAttribute("tabindex", "0")
+        ;(optionsList as HTMLElement).setAttribute("tabindex", "0")
 
         // Setup handlers for each option
         options.forEach((option, index) => {
@@ -109,17 +140,17 @@ class ContributorDropUp {
         })
 
         // Keyboard navigation for the options list
-        optionsList.addEventListener("keydown", event => {
-            this.handleKeyDown(event)
+        optionsList?.addEventListener("keydown", event => {
+            this.handleKeyDown(event as KeyboardEvent)
         })
 
         // Focus handler - focus first option when list gets focus
-        optionsList.addEventListener("focus", () => {
+        optionsList?.addEventListener("focus", () => {
             this.focusOption(0)
         })
 
         // Blur handler to close the drop-up
-        optionsList.addEventListener("blur", () => {
+        optionsList?.addEventListener("blur", () => {
             // Use requestAnimationFrame to check if focus moved outside drop-up
             requestAnimationFrame(() => {
                 // If we're opening a dialog, don't close (prevents deselecting contributor)
@@ -142,9 +173,8 @@ class ContributorDropUp {
 
     /**
      * Handle keyboard navigation events
-     * @param {KeyboardEvent} event - Keyboard event
      */
-    handleKeyDown(event) {
+    handleKeyDown(event: KeyboardEvent): void {
         const optionCount = this.menuOptions.length
 
         switch (event.key) {
@@ -205,9 +235,8 @@ class ContributorDropUp {
 
     /**
      * Focus a specific option by index
-     * @param {number} index - Index of the option to focus
      */
-    focusOption(index) {
+    focusOption(index: number): void {
         const options = this.dropUp.querySelectorAll(".drop-up-option")
         // Unfocus previous option
         if (this.focusedIndex >= 0 && this.focusedIndex < options.length) {
@@ -222,9 +251,8 @@ class ContributorDropUp {
 
     /**
      * Unfocus a specific option by index (used for mouse leave)
-     * @param {number} index - Index of the option to unfocus
      */
-    unfocusOption(index) {
+    unfocusOption(index: number): void {
         const options = this.dropUp.querySelectorAll(".drop-up-option")
         if (options[index]) {
             options[index].classList.remove("fw-focused")
@@ -238,7 +266,7 @@ class ContributorDropUp {
     /**
      * Update visual state of the currently focused option
      */
-    updateFocusedOption() {
+    updateFocusedOption(): void {
         const options = this.dropUp.querySelectorAll(".drop-up-option")
         // Remove focused class from all options
         options.forEach(option => {
@@ -252,9 +280,8 @@ class ContributorDropUp {
 
     /**
      * Activate a menu option by index
-     * @param {number} index - Index of the option to activate
      */
-    activateOption(index) {
+    activateOption(index: number): void {
         if (index >= 0 && index < this.menuOptions.length) {
             const option = this.menuOptions[index]
             if (option.action && typeof option.action === "function") {
@@ -266,7 +293,7 @@ class ContributorDropUp {
     /**
      * Open the contributor edit dialog
      */
-    openContributorDialog() {
+    openContributorDialog(): void {
         // Set flag to prevent blur handler from closing drop-up or deselecting contributor
         this.openingDialog = true
         // Open the dialog - it will take focus from drop-up
@@ -285,12 +312,10 @@ class ContributorDropUp {
     /**
      * Close the drop-up by deselecting the contributor
      */
-    closeDropUp() {
+    closeDropUp(): void {
         // Set a text selection to deselect the contributor, which will remove the drop-up
         const tr = this.view.state.tr.setSelection(
-            this.view.state.selection.constructor.near(
-                this.view.state.doc.resolve(this.selection.from)
-            )
+            Selection.near(this.view.state.doc.resolve(this.selection.from))
         )
         this.view.dispatch(tr)
         this.view.focus()
@@ -298,21 +323,28 @@ class ContributorDropUp {
 
     /**
      * Get the DOM element for the drop-up
-     * @returns {HTMLElement} The drop-up DOM element
      */
-    getDOM() {
+    getDOM(): HTMLElement {
         return this.dropUp
     }
 }
 
 /**
  * Create a contributor drop-up menu
- * @param {Object} selection - ProseMirror selection object
- * @param {Object} view - ProseMirror editor view
- * @param {Array<MenuOption>} [menuOptions] - Optional custom menu options
- * @returns {HTMLElement} The drop-up DOM element
+ * @param selection - ProseMirror selection object
+ * @param view - ProseMirror editor view
+ * @param menuOptions - Optional custom menu options
+ * @returns The drop-up DOM element
  */
-export const createDropUp = (selection, view, menuOptions = null) => {
-    const dropUp = new ContributorDropUp(selection, view, menuOptions)
+export const createDropUp = (
+    selection: NodeSelection,
+    view: EditorView,
+    menuOptions: MenuOption[] | null = null
+): HTMLElement => {
+    const dropUp = new ContributorDropUp(
+        selection,
+        view as EditorViewWithEditor,
+        menuOptions
+    )
     return dropUp.getDOM()
 }

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

@@ -1,10 +1,15 @@
-import {AddButton, ContributorsPartView as CommonContributorsPartView} from "@fiduswriter/common/state_plugins/contributor_input"
+import {
+    AddButton,
+    ContributorsPartView as CommonContributorsPartView
+} from "@fiduswriter/common/state_plugins/contributor_input"
+import type {Node} from "prosemirror-model"
+import type {EditorView} from "prosemirror-view"
 
 import {ContributorDialog} from "../../dialogs/index.js"
 import {addDeletedPartWidget} from "../document_template.js"
 
 class EditorAddButton extends AddButton {
-    handleActivation(event) {
+    handleActivation(event: Event) {
         event.preventDefault()
         const node = this.getNode()
 
@@ -19,8 +24,12 @@ class EditorAddButton extends AddButton {
 }
 
 export class ContributorsPartView extends CommonContributorsPartView {
-    constructor(node, view, getPos) {
-        super(node, view, getPos, {
+    constructor(
+        node: Node,
+        view: EditorView,
+        getPos: () => number | undefined
+    ) {
+        super(node, view, getPos as () => number, {
             addDeletedPartWidget,
             AddButton: EditorAddButton
         })