@fiduswriter/editor 0.1.20 → 0.1.21

package/src/state_plugins/jump_hidden_nodes.ts

@@ -0,0 +1,67 @@
+import {GapCursor} from "prosemirror-gapcursor"
+import {Plugin, PluginKey, TextSelection} from "prosemirror-state"
+import type {ResolvedPos} from "prosemirror-model"
+
+const posHidden = ($pos: ResolvedPos) => {
+    let hidden = false
+    for (let i = $pos.depth; i > 0; i--) {
+        const node = $pos.node(i)
+        if (
+            node.attrs.hidden ||
+            (["table_caption", "figure_caption"].includes(node.type.name) &&
+                $pos.node(i - 1).attrs.caption === false)
+        ) {
+            hidden = true
+        }
+    }
+    return hidden
+}
+
+const key = new PluginKey("jump-hidden-nodes")
+export const jumpHiddenNodesPlugin = (_options: {editor: unknown}) =>
+    new Plugin({
+        key,
+        appendTransaction: (trs, oldState, state) => {
+            if (state.selection.from !== state.selection.to) {
+                // Only applies to collapsed selection
+                return
+            }
+            const selection = state.selection
+            let $pos = selection.$from
+            if (!posHidden($pos)) {
+                return
+            }
+            let movedRight = false,
+                movedLeft = false
+            const startPos = $pos.pos
+            while ($pos.depth > 1 && posHidden($pos)) {
+                $pos = state.doc.resolve($pos.after())
+                movedRight = true
+            }
+            if (!movedRight) {
+                $pos = selection.$from
+                while ($pos.depth > 1 && posHidden($pos)) {
+                    $pos = state.doc.resolve($pos.before())
+                    movedLeft = true
+                }
+            }
+            if (!movedRight && !movedLeft) {
+                return
+            }
+            let tr = state.tr
+            if (
+                $pos.node().isTextblock &&
+                $pos.pos >= startPos &&
+                $pos.pos <= startPos
+            ) {
+                // Try to set text selection
+                tr = tr.setSelection(TextSelection.near($pos))
+            } else if ($pos.pos !== startPos) {
+                tr = tr.setSelection(new GapCursor($pos))
+            }
+            if (trs[trs.length - 1].doc.eq(tr.doc)) {
+                return tr
+            }
+            return
+        }
+    })

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

@@ -1,6 +1,9 @@
 import {NodeSelection, Plugin, PluginKey} from "prosemirror-state"
 import {RemoveMarkStep} from "prosemirror-transform"
 import {Decoration, DecorationSet} from "prosemirror-view"
+import type {Node, Mark, NodeType, ResolvedPos} from "prosemirror-model"
+import type {EditorState} from "prosemirror-state"
+import type {EditorView} from "prosemirror-view"
 
 import {
     randomFigureId,
@@ -9,12 +12,17 @@ import {
     randomTableId
 } from "@fiduswriter/document/schema/common/index"
 import {CATS} from "@fiduswriter/document/schema/i18n"
+import type {Track} from "@fiduswriter/document"
 import {addAlert, noSpaceTmp} from "fwtoolkit"
 import {CitationDialog, LinkDialog} from "../dialogs/index.js"
 
+import type {Editor} from "../types.js"
+
+type NodeTypeWithGroups = NodeType & {groups: string[]}
+
 const key = new PluginKey("links")
 
-const copyLink = href => {
+const copyLink = (href: string): void => {
     const textarea = document.createElement("textarea")
     textarea.textContent = href
     textarea.style.position = "fixed" // Prevent scrolling to bottom of page in MS Edge.
@@ -32,7 +40,7 @@ const copyLink = href => {
     }
 }
 
-const nonDeletedTextContent = node => {
+const nonDeletedTextContent = (node: Node): string => {
     let text = ""
     node.descendants(subNode => {
         if (
@@ -45,20 +53,25 @@ const nonDeletedTextContent = node => {
     return text
 }
 
-export const getInternalTargets = (state, language, editor) => {
-    const internalTargets = []
-    const anchors = {}
-    const categories = {}
+export const getInternalTargets = (
+    state: EditorState,
+    language: string,
+    editor: "main" | "foot"
+): Array<{id: string; text: string}> => {
+    const internalTargets: Array<{id: string; text: string}> = []
+    const anchors: Record<string, string> = {}
+    const categories: Record<string, number> = {}
 
     state.doc.descendants(node => {
-        if (node.attrs.track?.find(track => track.type === "deletion")) {
+        const track = node.attrs.track as Track[] | undefined
+        if (track?.find(trackAttr => trackAttr.type === "deletion")) {
             return true
         }
-        if (node.type.groups.includes("heading")) {
+        if ((node.type as NodeTypeWithGroups).groups.includes("heading")) {
             const textContent = nonDeletedTextContent(node)
             if (textContent.length) {
                 internalTargets.push({
-                    id: node.attrs.id,
+                    id: node.attrs.id as string,
                     text: textContent
                 })
             }
@@ -70,17 +83,17 @@ export const getInternalTargets = (state, language, editor) => {
             node.attrs.category &&
             node.attrs.category !== "none"
         ) {
-            if (!categories[node.attrs.category]) {
-                categories[node.attrs.category] = 0
+            if (!categories[node.attrs.category as string]) {
+                categories[node.attrs.category as string] = 0
             }
-            categories[node.attrs.category]++
+            categories[node.attrs.category as string]++
 
             internalTargets.push({
-                id: node.attrs.id,
+                id: node.attrs.id as string,
                 text:
                     editor === "main"
-                        ? `${CATS[node.attrs.category][language]} ${categories[node.attrs.category]}`
-                        : `${CATS[node.attrs.category][language]} ${categories[node.attrs.category]}A`
+                        ? `${CATS[node.attrs.category as string][language]} ${categories[node.attrs.category as string]}`
+                        : `${CATS[node.attrs.category as string][language]} ${categories[node.attrs.category as string]}A`
             })
             return true
         }
@@ -90,19 +103,20 @@ export const getInternalTargets = (state, language, editor) => {
             node.attrs.category &&
             node.attrs.id
         ) {
-            if (!categories[node.attrs.category]) {
-                categories[node.attrs.category] = 0
+            if (!categories[node.attrs.category as string]) {
+                categories[node.attrs.category as string] = 0
             }
-            categories[node.attrs.category]++
+            categories[node.attrs.category as string]++
 
             const categoryLabel =
-                CATS[node.attrs.category]?.[language] || node.attrs.category
+                CATS[node.attrs.category as string]?.[language] ||
+                (node.attrs.category as string)
             const text = node.attrs.title
-                ? `${categoryLabel} ${categories[node.attrs.category]}: ${node.attrs.title}`
-                : `${categoryLabel} ${categories[node.attrs.category]}`
+                ? `${categoryLabel} ${categories[node.attrs.category as string]}: ${node.attrs.title}`
+                : `${categoryLabel} ${categories[node.attrs.category as string]}`
 
             internalTargets.push({
-                id: node.attrs.id,
+                id: node.attrs.id as string,
                 text: editor === "main" ? text : `${text}A`
             })
             return true
@@ -111,10 +125,11 @@ export const getInternalTargets = (state, language, editor) => {
         if (node.type.name === "text") {
             const anchor = node.marks.find(mark => mark.type.name === "anchor")
             if (anchor) {
-                anchors[anchor.attrs.id] =
-                    (anchors[anchor.attrs.id] || "") + node.text
+                anchors[anchor.attrs.id as string] =
+                    (anchors[anchor.attrs.id as string] || "") + node.text
             }
         }
+        return true
     })
     Object.entries(anchors).forEach(([id, text]) =>
         internalTargets.push({id, text})
@@ -123,14 +138,26 @@ export const getInternalTargets = (state, language, editor) => {
     return internalTargets
 }
 
-export const linksPlugin = options => {
+interface LinksPluginState {
+    url: string
+    decos: DecorationSet
+    linkMark: Mark | false
+    anchorMark: Mark | false
+    crossReference: Node | undefined
+    citation: Node | undefined
+    selectedIndex: number
+}
+
+export const linksPlugin = (options: {editor: Editor}): Plugin => {
     // Holds the action functions for every visible <li> in the current dropup,
     // ordered exactly as they appear in the DOM.  Populated by createDropUp()
     // and consumed by the handleKeyDown prop.
-    let currentDropUpActions = []
+    let currentDropUpActions: Array<() => void> = []
 
-    function getUrl(state, oldState, oldUrl) {
-        const id = state.selection.$head.parent.attrs.id,
+    const editor = options.editor
+
+    function getUrl(state: EditorState, oldState: EditorState, oldUrl: string) {
+        const id = state.selection.$head.parent.attrs.id as string | undefined,
             mark = state.selection.$head
                 .marks()
                 .find(mark => mark.type.name === "anchor")
@@ -149,24 +176,26 @@ export const linksPlugin = options => {
         return newUrl
     }
 
-    function getLinkMark(state) {
+    function getLinkMark(state: EditorState): Mark | undefined {
         return state.selection.$head
             .marks()
             .find(mark => mark.type.name === "link")
     }
 
-    function getAnchorMark(state) {
+    function getAnchorMark(state: EditorState): Mark | undefined {
         return state.selection.$head
             .marks()
             .find(mark => mark.type.name === "anchor")
     }
 
-    function getCrossReference(state) {
+    function getCrossReference(state: EditorState): Node | undefined {
         // When inline_references is enabled the inline reference editor
         // handles cross-references; don't show the links dropup for them.
+        const appConfig = editor.app as {
+            config?: {user?: {preferences?: {inline_references?: boolean}}}
+        }
         if (
-            options.editor?.app?.config?.user?.preferences
-                ?.inline_references === true
+            appConfig.config?.user?.preferences?.inline_references === true
         ) {
             return undefined
         }
@@ -177,12 +206,14 @@ export const linksPlugin = options => {
             : undefined
     }
 
-    function getCitation(state) {
+    function getCitation(state: EditorState): Node | undefined {
         // Only surface a citation in the links dropup when inline_references
         // is disabled (otherwise the inline reference editor handles it).
+        const appConfig = editor.app as {
+            config?: {user?: {preferences?: {inline_references?: boolean}}}
+        }
         if (
-            options.editor?.app?.config?.user?.preferences
-                ?.inline_references === true
+            appConfig.config?.user?.preferences?.inline_references === true
         ) {
             return undefined
         }
@@ -193,11 +224,13 @@ export const linksPlugin = options => {
             : undefined
     }
 
-    function getDecos(state, selectedIndex = -1) {
+    function getDecos(state: EditorState, selectedIndex = -1): DecorationSet {
         const $head = state.selection.$head
-        const currentMarks = [],
-            linkMark = $head.marks().find(mark => mark.type.name === "link"),
-            anchorMark = $head.marks().find(mark => mark.type.name === "anchor")
+        const linkMark = $head.marks().find(mark => mark.type.name === "link")
+        const anchorMark = $head
+            .marks()
+            .find(mark => mark.type.name === "anchor")
+        const currentMarks: Array<Mark | Node> = []
         const crossRef = getCrossReference(state)
         const citation = getCitation(state)
 
@@ -208,25 +241,30 @@ export const linksPlugin = options => {
             currentMarks.push(anchorMark)
         }
         if (crossRef) {
-            currentMarks.push(crossRef)
+            currentMarks.push(crossRef as Node)
         }
         if (citation) {
-            currentMarks.push(citation)
+            currentMarks.push(citation as Node)
         }
         if (!currentMarks.length) {
             return DecorationSet.empty
         }
 
         let startPos = $head.start() // position of block start.
-        if (crossRef || citation) {
+        const inlineNode = crossRef || citation
+        if (inlineNode) {
             // For inline nodes, place dropup after the node
-            startPos = state.selection.from + (crossRef || citation).nodeSize
+            startPos = state.selection.from + inlineNode.nodeSize
         } else {
             let index = $head.index()
             while (
                 index < $head.parent.childCount - 1 &&
                 currentMarks.some(mark =>
-                    mark.isInSet($head.parent.child(index + 1).marks)
+                    (mark as Mark).isInSet
+                        ? (mark as Mark).isInSet(
+                              $head.parent.child(index + 1).marks
+                          )
+                        : false
                 )
             ) {
                 index++
@@ -248,33 +286,32 @@ export const linksPlugin = options => {
     }
 
     function createDropUp(
-        linkMark,
-        anchorMark,
-        crossRef,
-        $head,
-        citation = null,
+        linkMark: Mark | undefined,
+        anchorMark: Mark | undefined,
+        crossRef: Node | undefined,
+        $head: ResolvedPos,
+        citation: Node | undefined,
         selectedIndex = -1
-    ) {
+    ): HTMLElement {
         const dropUp = document.createElement("span"),
-            editor = options.editor,
             writeAccess =
                 editor.docInfo.access_rights === "write" ? true : false,
             editAccess = ["write", "write-tracked", "review-tracked"].includes(
-                editor.docInfo.access_rights
+                editor.docInfo.access_rights as string
             )
                 ? true
                 : false
-        let linkType,
-            linkHref,
-            anchorHref,
+        let linkType: "internal" | "external" | undefined,
+            linkHref: string | undefined,
+            anchorHref: string | undefined,
             requiredPx = 10
 
         if (linkMark) {
-            linkType = linkMark.attrs.href[0] === "#" ? "internal" : "external"
+            linkType = (linkMark.attrs.href as string)[0] === "#" ? "internal" : "external"
             linkHref =
                 linkType === "internal"
                     ? window.location.href.split("#")[0] + linkMark.attrs.href
-                    : linkMark.attrs.href
+                    : (linkMark.attrs.href as string)
             requiredPx += 120
         }
 
@@ -297,7 +334,7 @@ export const linksPlugin = options => {
                         ? `<div class="drop-up-head">
                         ${
                             linkMark.attrs.title
-                                ? `<div class="link-title">${gettext("Title")}:&nbsp;${linkMark.attrs.title}</div>`
+                                ? `<div class="link-title">${gettext("Title")}:&amp;nbsp;${linkMark.attrs.title}</div>`
                                 : ""
                         }
                         <div class="link-href">
@@ -399,17 +436,22 @@ ${
 
         if (linkType === "internal") {
             const el = dropUp.querySelector("a.internal")
-            el.addEventListener("click", event => {
+            el?.addEventListener("click", event => {
                 event.preventDefault()
                 event.stopImmediatePropagation()
-                options.editor.scrollIdIntoView(linkMark.attrs.href.slice(1))
+                options.editor.scrollIdIntoView(
+                    (linkMark!.attrs.href as string).slice(1)
+                )
             })
         }
 
         // Rebuild the actions array so handleKeyDown always has the current
         // set of handlers in the same order the <li> items appear in the DOM.
         currentDropUpActions = []
-        const setupAction = (selector, action) => {
+        const setupAction = (
+            selector: string,
+            action: () => void
+        ): void => {
             const el = dropUp.querySelector(selector)
             if (!el) {
                 return
@@ -424,7 +466,7 @@ ${
 
         // Actions must be registered in the same order they appear in the HTML
         // template so that selectedIndex maps to the correct <li> element.
-        setupAction(".copy-link", () => copyLink(linkHref))
+        setupAction(".copy-link", () => copyLink(linkHref || ""))
         setupAction(".edit-link", () => {
             const dialog = new LinkDialog(editor)
             dialog.init()
@@ -434,17 +476,17 @@ ${
                 editor.view.state.tr.removeMark(
                     $head.start(),
                     $head.end(),
-                    linkMark
+                    linkMark!
                 )
             )
         })
-        setupAction(".copy-anchor", () => copyLink(anchorHref))
+        setupAction(".copy-anchor", () => copyLink(anchorHref || ""))
         setupAction(".remove-anchor", () => {
             editor.view.dispatch(
                 editor.view.state.tr.removeMark(
                     $head.start(),
                     $head.end(),
-                    anchorMark
+                    anchorMark!
                 )
             )
         })
@@ -483,16 +525,18 @@ ${
     return new Plugin({
         key,
         state: {
-            init() {
+            init(): LinksPluginState {
                 return {
                     url: window.location.href,
                     decos: DecorationSet.empty,
                     linkMark: false,
+                    anchorMark: false,
+                    crossReference: undefined,
                     citation: undefined,
                     selectedIndex: -1
                 }
             },
-            apply(tr, _prev, oldState, state) {
+            apply(tr, _prev, oldState, state): LinksPluginState {
                 let {
                     url,
                     decos,
@@ -501,7 +545,7 @@ ${
                     crossReference,
                     citation,
                     selectedIndex
-                } = this.getState(oldState)
+                } = key.getState(oldState) as LinksPluginState
                 url = getUrl(state, oldState, url)
                 const newLinkMark = getLinkMark(state)
                 const newAnchorMark = getAnchorMark(state)
@@ -511,7 +555,7 @@ ${
                 if (meta?.action === "navigate") {
                     // Keyboard navigation: only selectedIndex changes; rebuild
                     // the decoration so the focused class is applied correctly.
-                    selectedIndex = meta.index
+                    selectedIndex = meta.index as number
                     decos = getDecos(state, selectedIndex)
                 } else if (
                     newLinkMark === linkMark &&
@@ -524,23 +568,27 @@ ${
                     // The cursor moved to a different mark — reset selection.
                     selectedIndex = -1
                     decos = getDecos(state, selectedIndex)
-                    linkMark = newLinkMark
-                    anchorMark = newAnchorMark
+                    linkMark = newLinkMark || false
+                    anchorMark = newAnchorMark || false
                     crossReference = newCrossReference
                     citation = newCitation
                 }
                 if (!tr.getMeta("remote")) {
                     // We look for changes to figures or headings.
                     let foundIdElement = false // found heading or figure
-                    let ranges = []
+                    let ranges: Array<[number, number]> = []
                     tr.steps.forEach((step, index) => {
-                        ranges.push([step.from, step.to])
+                        const stepWithRange = step as unknown as {
+                            from: number
+                            to: number
+                        }
+                        ranges.push([stepWithRange.from, stepWithRange.to])
                         tr.docs[index].nodesBetween(
-                            step.from,
-                            step.to,
+                            stepWithRange.from,
+                            stepWithRange.to,
                             node => {
                                 if (
-                                    node.type.groups.includes("heading") ||
+                                    (node.type as NodeTypeWithGroups).groups.includes("heading") ||
                                     node.type.name === "figure"
                                 ) {
                                     foundIdElement = true
@@ -559,7 +607,7 @@ ${
                         state.doc.nodesBetween(range[0], range[1], node => {
                             if (
                                 !foundIdElement &&
-                                (node.type.groups.includes("heading") ||
+                                ((node.type as NodeTypeWithGroups).groups.includes("heading") ||
                                     [
                                         "figure",
                                         "table",
@@ -619,13 +667,16 @@ ${
             })
             // ID should not be found in the other pm either. So we look through
             // those as well.
-            let otherState, language
+            let otherState: EditorState,
+                language: string
             if (oldState.schema === options.editor.view.state.schema) {
-                otherState = options.editor.mod.footnotes.fnEditor.view.state
-                language = newState.doc.attrs.language
+                otherState = (options.editor.mod.footnotes as {
+                    fnEditor: {view: EditorView}
+                }).fnEditor.view.state
+                language = newState.doc.attrs.language as string
             } else {
                 otherState = options.editor.view.state
-                language = options.editor.view.state.doc.attrs.language
+                language = options.editor.view.state.doc.attrs.language as string
             }
 
             const internalTargets = getInternalTargets(
@@ -652,16 +703,16 @@ ${
             //
             // If an ID is used more than once, add steps to change the ID of all
             // but the first occurence.
-            const ids = []
+            const ids: string[] = []
 
             otherState.doc.descendants(node => {
                 if (
-                    node.type.groups.includes("heading") ||
+                    (node.type as NodeTypeWithGroups).groups.includes("heading") ||
                     ["figure", "table", "bullet_list", "ordered_list"].includes(
                         node.type.name
                     )
                 ) {
-                    ids.push(node.attrs.id)
+                    ids.push(node.attrs.id as string)
                 }
             })
 
@@ -669,14 +720,14 @@ ${
 
             newState.doc.descendants((node, pos) => {
                 if (
-                    node.type.groups.includes("heading") ||
+                    (node.type as NodeTypeWithGroups).groups.includes("heading") ||
                     ["figure", "table", "bullet_list", "ordered_list"].includes(
                         node.type.name
                     )
                 ) {
-                    if (ids.includes(node.attrs.id) || !node.attrs.id) {
+                    if (ids.includes(node.attrs.id as string) || !node.attrs.id) {
                         // Add node if the id is false (default) or it is present twice
-                        const randomIdGenerator = node.type.groups.includes(
+                        const randomIdGenerator = (node.type as NodeTypeWithGroups).groups.includes(
                             "heading"
                         )
                             ? randomHeadingId
@@ -685,7 +736,7 @@ ${
                               : node.type.name === "table"
                                 ? randomTableId
                                 : randomListId
-                        let id
+                        let id: string | undefined
 
                         while (!id || ids.includes(id)) {
                             id = randomIdGenerator()
@@ -700,7 +751,7 @@ ${
 
                         ids.push(id)
                     } else {
-                        ids.push(node.attrs.id)
+                        ids.push(node.attrs.id as string)
                     }
                 } else if (
                     node.type.name === "cross_reference" &&
@@ -721,15 +772,16 @@ ${
                 node.marks.forEach(mark => {
                     if (
                         mark.type.name === "link" &&
-                        mark.attrs.href[0] === "#" &&
+                        (mark.attrs.href as string)[0] === "#" &&
                         !internalTargets.find(
                             it =>
-                                it.id === mark.attrs.href.slice(1) &&
+                                it.id === (mark.attrs.href as string).slice(1) &&
                                 it.text === node.attrs.title
                         )
                     ) {
                         const iTarget = internalTargets.find(
-                            it => it.id === mark.attrs.href.slice(1)
+                            it =>
+                                it.id === (mark.attrs.href as string).slice(1)
                         )
                         const attrs = Object.assign({}, mark.attrs, {
                             title: iTarget ? iTarget.text : null
@@ -757,13 +809,15 @@ ${
         },
         props: {
             handleDOMEvents: {
-                focus: (view, _event) => {
-                    const {url} = key.getState(view.state)
+                focus: (view: EditorView, _event: FocusEvent) => {
+                    const {url} = key.getState(view.state) as LinksPluginState
                     window.history.replaceState("", "", url)
                 }
             },
-            handleKeyDown(view, event) {
-                const pluginState = key.getState(view.state)
+            handleKeyDown(view: EditorView, event: KeyboardEvent) {
+                const pluginState = key.getState(view.state) as
+                    | LinksPluginState
+                    | undefined
                 if (!pluginState) {
                     return false
                 }
@@ -821,8 +875,8 @@ ${
 
                 return false
             },
-            decorations(state) {
-                const {decos} = this.getState(state)
+            decorations(state: EditorState) {
+                const {decos} = key.getState(state) as LinksPluginState
                 return decos
             }
         }

package/src/state_plugins/marginboxes.ts

@@ -0,0 +1,17 @@
+import {Plugin, PluginKey} from "prosemirror-state"
+import type {EditorView} from "prosemirror-view"
+
+import type {Editor} from "../types.js"
+
+const key = new PluginKey("marginboxes")
+export const marginboxesPlugin = (options: {editor: Editor}) =>
+    new Plugin({
+        key,
+        view(_editorState) {
+            return {
+                update: (view: EditorView, _prevState) => {
+                    ;(options.editor.mod.marginboxes as {view(v: EditorView): void}).view(view)
+                }
+            }
+        }
+    })