@fiduswriter/editor 0.1.19 → 0.1.21

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

@@ -1,52 +1,75 @@
 import {ContentMenu} from "fwtoolkit"
+import type {ContentMenuInit} from "fwtoolkit/content_menu"
 import {Plugin, PluginKey, Selection} from "prosemirror-state"
+import type {Node} from "prosemirror-model"
+import type {EditorView, NodeView} from "prosemirror-view"
 import {WRITE_ROLES} from "..//index.js"
+import type {Editor} from "../types.js"
 
 const key = new PluginKey("tableMenu")
 
-class OrderedListView {
-    constructor(node, view, getPos, options) {
+class OrderedListView implements NodeView {
+    node: Node
+    view: EditorView
+    getPos: () => number
+    options: {editor: Editor}
+    dom: HTMLElement
+    contentDOM: HTMLOListElement
+    menuButton: HTMLButtonElement
+
+    constructor(
+        node: Node,
+        view: EditorView,
+        getPos: () => number,
+        options: {editor: Editor}
+    ) {
         this.node = node
         this.view = view
         this.getPos = getPos
         this.options = options
         this.dom = document.createElement("div")
         this.dom.classList.add("content-container")
-        this.dom.id = node.attrs.id
+        this.dom.id = node.attrs.id as string
         this.menuButton = document.createElement("button")
         this.menuButton.classList.add("fw-content-menu-btn")
         this.menuButton.innerHTML =
             '<span class="dot-menu-icon"><i class="fa-solid fa-ellipsis-v"></i></span>'
         this.dom.appendChild(this.menuButton)
         const orderedList = document.createElement("ol")
-        if (node.attrs.order !== 1) {
-            orderedList.start = node.attrs.order
+        if ((node.attrs.order as number) !== 1) {
+            orderedList.start = node.attrs.order as number
         }
-        if (node.attrs.track?.length) {
+        if ((node.attrs.track as unknown[])?.length) {
             orderedList.dataset.track = JSON.stringify(node.attrs.track)
         }
         this.contentDOM = this.dom.appendChild(orderedList)
         this.dom.appendChild(this.contentDOM)
     }
 
-    stopEvent(event) {
+    stopEvent(event: Event) {
         let stopped = false
         if (
             event.type === "mousedown" &&
             event.composedPath().includes(this.menuButton)
         ) {
             stopped = true
+            const mouseEvent = event as MouseEvent
             const tr = this.view.state.tr
             const $pos = this.view.state.doc.resolve(this.getPos())
-            tr.setSelection(Selection.findFrom($pos, 1, true))
+            const selection = Selection.findFrom($pos, 1, true)
+            if (!selection) {
+                return stopped
+            }
+            tr.setSelection(selection)
             this.view.dispatch(tr)
             const contentMenu = new ContentMenu({
-                menu: this.options.editor.menu.orderedListMenuModel,
+                menu: this.options.editor.menu
+                    .orderedListMenuModel 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()
@@ -58,18 +81,21 @@ class OrderedListView {
     }
 }
 
-export const orderedListMenuPlugin = options =>
+export const orderedListMenuPlugin = (options: {editor: Editor}) =>
     new Plugin({
         key,
         state: {
             init(_config, _state) {
+                const self = this as unknown as {
+                    spec: {props: {nodeViews: Record<string, unknown>}}
+                }
                 if (
-                    WRITE_ROLES.includes(options.editor.docInfo.access_rights)
+                    WRITE_ROLES.includes(options.editor.docInfo.access_rights!)
                 ) {
-                    this.spec.props.nodeViews["ordered_list"] = (
-                        node,
-                        view,
-                        getPos
+                    self.spec.props.nodeViews["ordered_list"] = (
+                        node: Node,
+                        view: EditorView,
+                        getPos: () => number
                     ) => new OrderedListView(node, view, getPos, options)
                 }
                 return {}

package/src/state_plugins/placeholders.ts

@@ -0,0 +1,78 @@
+import {Plugin, PluginKey} from "prosemirror-state"
+import {Decoration, DecorationSet} from "prosemirror-view"
+import type {EditorState} from "prosemirror-state"
+
+const key = new PluginKey("placeholders")
+
+export const placeholdersPlugin = (_options: {editor: unknown}) => {
+    function calculatePlaceHolderDecorations(state: EditorState) {
+        const anchor = state.selection.$anchor
+        const head = state.selection.$head
+        if (!anchor || !head) {
+            return
+        }
+        const anchorPart = anchor.node(1)
+        const headPart = head.node(1)
+        if (!anchorPart || !headPart) {
+            return
+        }
+        const currentPart = anchorPart === headPart ? anchorPart : false
+
+        const decorations: Array<ReturnType<typeof Decoration.widget>> = []
+
+        state.doc.forEach((partElement, offset) => {
+            if (
+                (partElement.isTextblock && partElement.childCount === 0) ||
+                (!partElement.isTextblock && partElement.nodeSize === 4)
+            ) {
+                if (
+                    [
+                        state.schema.nodes["tags_part"],
+                        state.schema.nodes["contributors_part"]
+                    ].includes(partElement.type) &&
+                    partElement !== currentPart
+                ) {
+                    return
+                }
+
+                const placeholder = document.createElement("span")
+                placeholder.classList.add("placeholder")
+                placeholder.setAttribute("data-placeholder", "true")
+                const widget = Decoration.widget(
+                    offset + 1,
+                    () => placeholder,
+                    {
+                        side: -1,
+                        placeholder: true
+                    }
+                )
+                decorations.push(widget)
+            }
+        })
+        return DecorationSet.create(state.doc, decorations)
+    }
+
+    return new Plugin({
+        key,
+        state: {
+            init(_config, state) {
+                return calculatePlaceHolderDecorations(state)
+            },
+            apply(_tr, value, oldState, newState) {
+                if (
+                    _tr.docChanged ||
+                    oldState.selection.$anchor !== newState.selection.$anchor ||
+                    oldState.selection.$head !== newState.selection.$head
+                ) {
+                    return calculatePlaceHolderDecorations(newState)
+                }
+                return value
+            }
+        },
+        props: {
+            decorations(state) {
+                return key.getState(state)
+            }
+        }
+    })
+}

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

@@ -1,11 +1,24 @@
-import {Plugin, PluginKey} from "prosemirror-state"
+import type {Node} from "prosemirror-model"
+import {Plugin, PluginKey, type EditorState, type Transaction} from "prosemirror-state"
 import {Decoration, DecorationSet} from "prosemirror-view"
+import type {EditorView} from "prosemirror-view"
 
 const key = new PluginKey("search")
 
-function findMatches(doc, term) {
-    let stringObj = false,
-        matches = []
+interface StringObject {
+    parent: Node
+    pos: Array<[number, number]>
+    text: string
+}
+
+export interface Match {
+    from: number
+    to: number
+}
+
+function findMatches(doc: Node, term: string): Match[] {
+    let stringObj: StringObject | false = false,
+        matches: Match[] = []
 
     if (!term.length) {
         return matches
@@ -18,17 +31,21 @@ function findMatches(doc, term) {
         ) {
             return
         }
-        if (stringObj && (parent !== stringObj.parent || !node.isText)) {
+        if (
+            stringObj &&
+            (parent !== stringObj.parent || !node.isText)
+        ) {
             matches = matches.concat(findTerm(term, stringObj))
             stringObj = false
         }
 
         if (node.isText) {
             if (!stringObj) {
-                stringObj = {parent, pos: [], text: ""}
+                stringObj = {parent: parent!, pos: [], text: ""}
             }
-            stringObj.text += node.text
-            stringObj.pos.push([pos, pos + node.text.length])
+            const textNode = node.text!
+            stringObj.text += textNode
+            stringObj.pos.push([pos, pos + textNode.length])
         }
     })
     if (stringObj) {
@@ -38,10 +55,10 @@ function findMatches(doc, term) {
 }
 
 // Find search term within stringObjects (strings that consist of several text nodes that hang together)
-function findTerm(term, stringObj) {
-    const matches = []
+function findTerm(term: string, stringObj: StringObject): Match[] {
+    const matches: Match[] = []
     let index = 0,
-        foundIndex
+        foundIndex: number
     while ((foundIndex = stringObj.text.indexOf(term, index)) !== -1) {
         index = foundIndex + term.length
 
@@ -54,7 +71,7 @@ function findTerm(term, stringObj) {
 }
 
 // Translate the start and end position of the serach term within the strings to document positions
-function transPos(index, pos) {
+function transPos(index: number, pos: Array<[number, number]>): number {
     let findIndex = index,
         posIndex = 0
     while (findIndex > pos[posIndex][1] - pos[posIndex][0]) {
@@ -64,7 +81,11 @@ function transPos(index, pos) {
     return pos[posIndex][0] + findIndex
 }
 
-function matchesToDecos(doc, matches, selected) {
+function matchesToDecos(
+    doc: Node,
+    matches: Match[],
+    selected: number | false
+): DecorationSet {
     if (!matches.length) {
         return DecorationSet.empty
     }
@@ -76,12 +97,16 @@ function matchesToDecos(doc, matches, selected) {
     return DecorationSet.create(doc, decorations)
 }
 
+interface SearchListener {
+    onUpdate(): void
+}
+
 export const setSearchTerm = (
-    state,
-    term,
-    selected = false,
-    listener = false
-) => {
+    state: EditorState,
+    term: string,
+    selected: number | false = false,
+    listener: SearchListener | false = false
+): {tr: Transaction; matches: Match[]; selected: number | false} => {
     const matches = findMatches(state.doc, term),
         decos = matchesToDecos(state.doc, matches, selected)
 
@@ -103,7 +128,7 @@ export const setSearchTerm = (
     return {tr, matches, selected}
 }
 
-export const endSearch = state =>
+export const endSearch = (state: EditorState): Transaction =>
     state.tr.setMeta(key, {
         term: "",
         decos: DecorationSet.empty,
@@ -112,32 +137,44 @@ export const endSearch = state =>
         listener: false
     })
 
-export const selectNextSearchMatch = state => {
-    const pluginState = key.getState(state),
-        {term, matches, listener} = pluginState
+export const selectNextSearchMatch = (state: EditorState): Transaction => {
+    const pluginState = key.getState(state) as {
+        term: string
+        matches: Match[]
+        listener: SearchListener | false
+        selected: number | false
+    }
     let {selected} = pluginState
 
     if (selected === false) {
-        selected = matches.length
+        selected = pluginState.matches.length
     }
-    if (selected < matches.length - 1) {
+    if (selected < pluginState.matches.length - 1) {
         selected++
     } else {
         selected = 0
     }
-    const decos = matchesToDecos(state.doc, matches, selected)
+    const decos = matchesToDecos(
+        state.doc,
+        pluginState.matches,
+        selected
+    )
     return state.tr.setMeta(key, {
-        term,
+        term: pluginState.term,
         decos,
-        matches,
+        matches: pluginState.matches,
         selected,
-        listener
+        listener: pluginState.listener
     })
 }
 
-export const selectPreviousSearchMatch = state => {
-    const pluginState = key.getState(state),
-        {term, matches, listener} = pluginState
+export const selectPreviousSearchMatch = (state: EditorState): Transaction => {
+    const pluginState = key.getState(state) as {
+        term: string
+        matches: Match[]
+        listener: SearchListener | false
+        selected: number | false
+    }
     let {selected} = pluginState
 
     if (selected === false) {
@@ -146,21 +183,29 @@ export const selectPreviousSearchMatch = state => {
     if (selected > 0) {
         selected--
     } else {
-        selected = matches.length - 1
+        selected = pluginState.matches.length - 1
     }
-    const decos = matchesToDecos(state.doc, matches, selected)
+    const decos = matchesToDecos(
+        state.doc,
+        pluginState.matches,
+        selected
+    )
     return state.tr.setMeta(key, {
-        term,
+        term: pluginState.term,
         decos,
-        matches,
+        matches: pluginState.matches,
         selected,
-        listener
+        listener: pluginState.listener
     })
 }
 
-export const deselectSearchMatch = state => {
-    const {term, matches, listener} = key.getState(state),
-        selected = false,
+export const deselectSearchMatch = (state: EditorState): Transaction => {
+    const {term, matches, listener} = key.getState(state) as {
+        term: string
+        matches: Match[]
+        listener: SearchListener | false
+    }
+    const selected = false,
         decos = matchesToDecos(state.doc, matches, selected)
     return state.tr.setMeta(key, {
         term,
@@ -171,12 +216,21 @@ export const deselectSearchMatch = state => {
     })
 }
 
-export const getSearchMatches = state => {
-    const {matches, selected} = key.getState(state)
+export const getSearchMatches = (
+    state: EditorState
+): {matches: Match[]; selected: number | false} => {
+    const {matches, selected} = key.getState(state) as {
+        matches: Match[]
+        selected: number | false
+    }
     return {matches, selected}
 }
 
-export const searchPlugin = _options =>
+interface SearchPluginOptions {
+    editor: any
+}
+
+export const searchPlugin = (_options: SearchPluginOptions) =>
     new Plugin({
         key,
         state: {
@@ -197,8 +251,14 @@ export const searchPlugin = _options =>
                     return meta
                 }
 
-                const pluginState = this.getState(oldState),
-                    {term, listener} = pluginState
+                const pluginState = key.getState(oldState) as {
+                    term: string
+                    listener: SearchListener | false
+                    matches: Match[]
+                    decos: DecorationSet
+                    selected: number | false
+                }
+                const {term, listener} = pluginState
                 let {matches, decos, selected} = pluginState
 
                 if (term === "" || !tr.docChanged) {
@@ -233,15 +293,17 @@ export const searchPlugin = _options =>
             }
         },
         props: {
-            decorations(state) {
-                const {decos} = this.getState(state)
+            decorations(state: EditorState) {
+                const {decos} = key.getState(state) as {decos: DecorationSet}
                 return decos
             }
         },
-        view(_editorState) {
+        view(_view: EditorView) {
             return {
                 update: (view, _prevState) => {
-                    const {listener} = key.getState(view.state)
+                    const {listener} = key.getState(view.state) as {
+                        listener: SearchListener | false
+                    }
                     if (listener) {
                         listener.onUpdate()
                     }

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

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