@fiduswriter/editor 0.1.20 → 0.1.21

package/src/state_plugins/citation_render.ts

@@ -0,0 +1,63 @@
+import {Plugin, PluginKey} from "prosemirror-state"
+import {ReplaceAroundStep, ReplaceStep} from "prosemirror-transform"
+
+const key = new PluginKey("citationRender")
+
+interface CitationRenderState {
+    action: boolean
+}
+
+export const citationRenderPlugin = (_options: {editor: unknown}) =>
+    new Plugin<CitationRenderState>({
+        key,
+        state: {
+            init() {
+                return {action: false}
+            },
+            apply(tr, _prev, oldState, _state) {
+                const meta = tr.getMeta(key)
+                if (meta) {
+                    // There has been an update, return values from meta instead
+                    // of previous values
+                    return meta as CitationRenderState
+                }
+                let {action} = key.getState(oldState) as CitationRenderState
+
+                if (action || tr.getMeta("settings")) {
+                    return {action} // We already need to reset the bibliography or another setting is used. Don't bother checking for more reasons to do so.
+                }
+                tr.steps.forEach((step, index) => {
+                    if (
+                        step instanceof ReplaceStep ||
+                        step instanceof ReplaceAroundStep
+                    ) {
+                        if (step.from !== step.to) {
+                            const map = tr.mapping.maps[index]
+                            map.forEach((_oldStart, _oldEnd, newStart, newEnd) => {
+                                tr.doc.nodesBetween(
+                                    newStart,
+                                    newEnd,
+                                    node => {
+                                        if (node.type.name === "citation") {
+                                            action = true
+                                        }
+                                    }
+                                )
+                            })
+                        } else {
+                            tr.doc.nodesBetween(
+                                step.from,
+                                step.to,
+                                node => {
+                                    if (node.type.name === "citation") {
+                                        action = true
+                                    }
+                                }
+                            )
+                        }
+                    }
+                })
+                return {action}
+            }
+        }
+    })

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

@@ -3,32 +3,37 @@ import fixUTF8 from "fix-utf8"
 import {Fragment, Slice} from "prosemirror-model"
 import {Plugin, PluginKey, TextSelection} from "prosemirror-state"
 import {ReplaceStep} from "prosemirror-transform"
+import type {Node} from "prosemirror-model"
+import type {EditorState, Transaction} from "prosemirror-state"
+import type {EditorView} from "prosemirror-view"
 
 import {docClipboardSerializer, fnClipboardSerializer} from "../clipboard/copy/index.js"
 import {HTMLPaste, TextPaste} from "../clipboard/paste/index.js"
+import type {Editor} from "../types.js"
+
 import {getAllowedElementsAndMarks} from "./document_template.js"
 
 const key = new PluginKey("clipboard")
 
-export const getPasteRange = state => {
-    const {pasteRange} = key.getState(state)
-    return pasteRange
+export const getPasteRange = (state: EditorState): number[] | null => {
+    const pluginState = key.getState(state) as {pasteRange: number[] | null}
+    return pluginState.pasteRange
 }
 
-export const resetPasteRange = tr => {
+export const resetPasteRange = (tr: Transaction): void => {
     tr.setMeta(key, {pasteRange: null})
 }
 
 // Filter a fragment to only include allowed nodes and marks
 // parentNode is optional - used to check if converted nodes are valid children
 const filterFragment = (
-    fragment,
-    allowedElements,
-    allowedMarks,
-    schema,
-    parentNode = null
-) => {
-    const nodes = []
+    fragment: Fragment,
+    allowedElements: string[] | false,
+    allowedMarks: string[] | false,
+    schema: import("prosemirror-model").Schema,
+    parentNode: Node | null = null
+): Fragment => {
+    const nodes: Node[] = []
 
     fragment.forEach(node => {
         // Check if this node type is allowed
@@ -126,7 +131,7 @@ const filterFragment = (
     return Fragment.from(nodes)
 }
 
-export const clipboardPlugin = options => {
+export const clipboardPlugin = (options: {editor: Editor; viewType: string}) => {
     let shiftPressed = false
     return new Plugin({
         key,
@@ -136,7 +141,7 @@ export const clipboardPlugin = options => {
                     pasteRange: null
                 }
             },
-            apply(tr, _prev, oldState, _state) {
+            apply(tr, _prev, oldState) {
                 const meta = tr.getMeta(key)
                 if (meta) {
                     // There has been an update, return values from meta instead
@@ -144,7 +149,7 @@ export const clipboardPlugin = options => {
                     return meta
                 }
                 const uiEventMeta = tr.getMeta("uiEvent")
-                let pasteRange
+                let pasteRange: number[] | null
                 if (uiEventMeta && ["paste", "drop"].includes(uiEventMeta)) {
                     pasteRange = [
                         oldState.selection.from,
@@ -157,12 +162,14 @@ export const clipboardPlugin = options => {
                         }
                         const stepMap = step.getMap()
                         pasteRange = [
-                            stepMap.map(pasteRange[0], -1),
-                            stepMap.map(pasteRange[1], 1)
+                            stepMap.map(pasteRange![0], -1),
+                            stepMap.map(pasteRange![1], 1)
                         ] // map through step
                     })
                 } else {
-                    pasteRange = this.getState(oldState)?.pasteRange
+                    pasteRange = (
+                        key.getState(oldState) as {pasteRange: number[] | null}
+                    )?.pasteRange
                     if (pasteRange && tr.docChanged) {
                         const from = tr.mapping.mapResult(pasteRange[0], -1)
                         const to = tr.mapping.mapResult(pasteRange[1], 1)
@@ -206,7 +213,10 @@ export const clipboardPlugin = options => {
                 return true
             },
             transformPastedHTML: (inHTML, view) => {
-                const {pasteRange} = key.getState(view.state)
+                const pluginState = key.getState(view.state) as {
+                    pasteRange: number[] | null
+                }
+                const {pasteRange} = pluginState
 
                 if (pasteRange) {
                     // a previous paste operation has been interrupted by a new one. Cancel.
@@ -219,12 +229,15 @@ export const clipboardPlugin = options => {
                     options.editor,
                     inHTML,
                     options.viewType,
-                    view
+                    view as EditorView
                 )
                 return ph.getOutput()
             },
             transformPastedText: (inText, _plain, view) => {
-                const {pasteRange} = key.getState(view.state)
+                const pluginState = key.getState(view.state) as {
+                    pasteRange: number[] | null
+                }
+                const {pasteRange} = pluginState
 
                 if (pasteRange) {
                     // a previous paste operation has been interrupted by a new one. Cancel.
@@ -247,9 +260,11 @@ export const clipboardPlugin = options => {
                 return fixedText // We need to analyze it asynchronously, so we always need to turn this into an empty string for now.
             },
             clipboardSerializer:
-                options.viewType === "main"
-                    ? docClipboardSerializer(options.editor)
-                    : fnClipboardSerializer(options.editor),
+                (
+                    options.viewType === "main"
+                        ? docClipboardSerializer(options.editor)
+                        : fnClipboardSerializer(options.editor)
+                ) as unknown as import("prosemirror-model").DOMSerializer,
             transformPasted: (slice, view, plain) => {
                 // Only filter if not plain text paste
                 if (plain) {

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

@@ -1,11 +1,28 @@
 import {ContentMenu} from "fwtoolkit"
-import {DOMSerializer} from "prosemirror-model"
+import type {ContentMenuInit} from "fwtoolkit/content_menu"
+import {CATS} from "@fiduswriter/document/schema/i18n"
+import {DOMSerializer, type Node} from "prosemirror-model"
 import {NodeSelection, Plugin, PluginKey} from "prosemirror-state"
+import type {EditorView, NodeView} from "prosemirror-view"
+import type {Editor} from "../types.js"
 
 const key = new PluginKey("codeBlockMenu")
 
-class CodeBlockView {
-    constructor(node, view, getPos, options) {
+interface CodeBlockOptions {
+    editor: Editor
+}
+
+class CodeBlockView implements NodeView {
+    node: Node
+    view: EditorView
+    getPos: () => number
+    options: CodeBlockOptions
+    dom: HTMLElement
+    serializer: DOMSerializer
+    contentDOM: HTMLElement
+    menuButton: HTMLButtonElement
+
+    constructor(node: Node, view: EditorView, getPos: () => number, options: CodeBlockOptions) {
         this.node = node
         this.view = view
         this.getPos = getPos
@@ -20,15 +37,15 @@ class CodeBlockView {
 
         // Use DOMSerializer to create the content
         this.serializer = DOMSerializer.fromSchema(node.type.schema)
-        const preElement = this.serializer.serializeNode(this.node)
-        preElement.classList.forEach(className =>
+        const preElement = this.serializer.serializeNode(this.node) as HTMLElement
+        preElement.classList.forEach((className: string) =>
             this.dom.classList.add(className)
         )
         preElement.classList.value = ""
         this.dom.appendChild(preElement)
 
         // The contentDOM should be the <code> element inside <pre>
-        this.contentDOM = preElement.querySelector("code")
+        this.contentDOM = preElement.querySelector("code") as HTMLElement
 
         // Add menu button
         this.menuButton = document.createElement("button")
@@ -44,13 +61,17 @@ class CodeBlockView {
     }
 
     addLabel() {
-        const {category, title, id} = this.node.attrs
-        const language = this.view.state.doc.attrs.language
-        const categories = {}
+        const {category, title, id} = this.node.attrs as Record<string, string>
+        const language = this.view.state.doc.attrs.language as string
+        const categories: Record<string, number> = {}
 
         // Count code blocks by category
         this.view.state.doc.descendants(node => {
-            if (node.attrs.track?.find(track => track.type === "deletion")) {
+            if (
+                (node.attrs.track as Array<{type: string}>)?.find(
+                    track => track.type === "deletion"
+                )
+            ) {
                 return true
             }
             if (
@@ -58,16 +79,17 @@ class CodeBlockView {
                 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]++
 
                 if (node.attrs.id === id) {
                     // Found our position, stop counting
                     return false
                 }
             }
+            return
         })
 
         const label = document.createElement("div")
@@ -75,8 +97,10 @@ class CodeBlockView {
 
         if (category && id) {
             label.dataset.id = id
-            const {CATS} = require("@fiduswriter/document/schema/i18n")
-            const categoryLabel = CATS[category]?.[language] || category
+            const categoryLabel =
+                (CATS as Record<string, Record<string, string>>)[category]?.[
+                    language
+                ] || category
             const number = categories[category] || 1
 
             const labelText = title
@@ -95,14 +119,15 @@ class CodeBlockView {
     addLanguageBadge() {
         const badge = document.createElement("div")
         badge.classList.add("code-block-language-badge")
-        badge.textContent = this.node.attrs.language
+        badge.textContent = this.node.attrs.language as string
         this.dom.appendChild(badge)
     }
 
-    stopEvent(event) {
+    stopEvent(event: Event) {
         let stopped = false
         if (event.type === "mousedown") {
-            const composedPath = event.composedPath()
+            const mouseEvent = event as MouseEvent
+            const composedPath = mouseEvent.composedPath()
             if (composedPath.includes(this.menuButton)) {
                 stopped = true
                 const tr = this.view.state.tr
@@ -110,12 +135,13 @@ class CodeBlockView {
                 tr.setSelection(new NodeSelection($pos))
                 this.view.dispatch(tr)
                 const contentMenu = new ContentMenu({
-                    menu: this.options.editor.menu.codeBlockMenuModel,
+                    menu: this.options.editor.menu
+                        .codeBlockMenuModel as ContentMenuInit,
                     width: 280,
                     page: this.options.editor,
                     menuPos: {
-                        X: Number.parseInt(event.pageX) + 20,
-                        Y: Number.parseInt(event.pageY) - 100
+                        X: Number.parseInt(mouseEvent.pageX as unknown as string) + 20,
+                        Y: Number.parseInt(mouseEvent.pageY as unknown as string) - 100
                     },
                     onClose: () => {
                         this.view.focus()
@@ -124,7 +150,12 @@ class CodeBlockView {
                 contentMenu.open()
             } else if (
                 composedPath.includes(this.dom) &&
-                !composedPath.find(el => el.matches && el.matches("code"))
+                !composedPath.find(
+                    el =>
+                        el instanceof Element &&
+                        el.matches &&
+                        el.matches("code")
+                )
             ) {
                 stopped = true
                 const tr = this.view.state.tr
@@ -137,7 +168,7 @@ class CodeBlockView {
         return stopped
     }
 
-    update(node) {
+    update(node: Node) {
         if (node.type !== this.node.type) {
             return false
         }
@@ -177,16 +208,19 @@ class CodeBlockView {
     }
 }
 
-export const codeBlockPlugin = options =>
+export const codeBlockPlugin = (options: {editor: Editor}) =>
     new Plugin({
         key,
         state: {
             init(_config, _state) {
+                const self = this as unknown as {
+                    spec: {props: {nodeViews: Record<string, unknown>}}
+                }
                 if (options.editor.docInfo.access_rights === "write") {
-                    this.spec.props.nodeViews["code_block"] = (
-                        node,
-                        view,
-                        getPos
+                    self.spec.props.nodeViews["code_block"] = (
+                        node: Node,
+                        view: EditorView,
+                        getPos: () => number
                     ) => new CodeBlockView(node, view, getPos, options)
                 }
                 return {}

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

@@ -1,16 +1,38 @@
 import {sendableSteps} from "prosemirror-collab"
 import {Plugin, PluginKey} from "prosemirror-state"
 import {Decoration, DecorationSet} from "prosemirror-view"
+import type {EditorState, Transaction} from "prosemirror-state"
 
 const key = new PluginKey("collabCarets")
 
-export const getSelectionUpdate = state => {
-    const {caretUpdate} = key.getState(state)
-    return caretUpdate
+interface CaretPosition {
+    sessionId: string
+    userId: number
+    decoSpec: {id: string}
+    anchor: number
+    head: number
 }
 
-export const updateCollaboratorSelection = (state, collaborator, data) => {
-    let {decos, caretPositions} = key.getState(state)
+interface CollabCaretsState {
+    decos: DecorationSet
+    caretPositions: CaretPosition[]
+    caretUpdate: false | {anchor: number; head: number}
+}
+
+export const getSelectionUpdate = (
+    state: EditorState
+): false | {anchor: number; head: number} => {
+    const pluginState = key.getState(state) as CollabCaretsState
+    return pluginState.caretUpdate
+}
+
+export const updateCollaboratorSelection = (
+    state: EditorState,
+    collaborator: {id: number; name: string},
+    data: {session_id: string; anchor: number; head: number}
+): Transaction => {
+    let pluginState = key.getState(state) as CollabCaretsState
+    let {decos, caretPositions} = pluginState
 
     const oldCarPos = caretPositions.find(
         carPos => carPos.sessionId === data.session_id
@@ -29,12 +51,12 @@ export const updateCollaboratorSelection = (state, collaborator, data) => {
     widgetDom.classList.add("caret")
     widgetDom.classList.add(className)
     widgetDom.innerHTML = '<div class="caret-head"></div>'
-    widgetDom.firstChild.classList.add(className)
+    ;(widgetDom.firstChild as HTMLElement).classList.add(className)
     const tooltip = collaborator.name
     widgetDom.title = tooltip
-    widgetDom.firstChild.title = tooltip
+    ;(widgetDom.firstChild as HTMLElement).title = tooltip
     const decoSpec = {id: data.session_id} // We will compare the decoSpec object. Id not really needed.
-    const newCarPos = {
+    const newCarPos: CaretPosition = {
         sessionId: data.session_id,
         userId: collaborator.id,
         decoSpec,
@@ -69,8 +91,12 @@ export const updateCollaboratorSelection = (state, collaborator, data) => {
     return tr
 }
 
-export const removeCollaboratorSelection = (state, data) => {
-    let {decos, caretPositions} = key.getState(state)
+export const removeCollaboratorSelection = (
+    state: EditorState,
+    data: {session_id: string}
+): Transaction | false => {
+    let pluginState = key.getState(state) as CollabCaretsState
+    let {decos, caretPositions} = pluginState
 
     const caretPosition = caretPositions.find(
         carPos => carPos.sessionId === data.session_id
@@ -94,7 +120,7 @@ export const removeCollaboratorSelection = (state, data) => {
     return false
 }
 
-export const collabCaretsPlugin = options =>
+export const collabCaretsPlugin = (_options: {editor: unknown}) =>
     new Plugin({
         key,
         state: {
@@ -112,8 +138,9 @@ export const collabCaretsPlugin = options =>
                     // of previous values
                     return meta
                 }
-                let {decos, caretPositions} = this.getState(oldState),
-                    caretUpdate = false
+                let pluginState = key.getState(oldState) as CollabCaretsState,
+                    {decos, caretPositions} = pluginState,
+                    caretUpdate: false | {anchor: number; head: number} = false
 
                 decos = decos.map(tr.mapping, tr.doc, {
                     onRemove: decoSpec => {
@@ -123,16 +150,20 @@ export const collabCaretsPlugin = options =>
                     }
                 })
 
-                if (
-                    tr.selectionSet &&
-                    !sendableSteps(state) &&
-                    !["review", "review-tracked"].includes(
-                        options.editor.docInfo.access_rights
-                    )
-                ) {
-                    caretUpdate = {
-                        anchor: tr.selection.anchor,
-                        head: tr.selection.head
+                const sendable = sendableSteps(state)
+                if (sendable) {
+                    const steps = sendable.steps
+                    const step = steps[steps.length - 1]
+                    if (
+                        step &&
+                        typeof step === "object" &&
+                        "clientID" in step
+                    ) {
+                        // There is a local selection update. Send it to collaborators.
+                        caretUpdate = {
+                            anchor: state.selection.anchor,
+                            head: state.selection.head
+                        }
                     }
                 }
 
@@ -145,8 +176,8 @@ export const collabCaretsPlugin = options =>
         },
         props: {
             decorations(state) {
-                const {decos} = this.getState(state)
-                return decos
+                const pluginState = this.getState(state) as CollabCaretsState
+                return pluginState.decos
             }
         }
     })