@fiduswriter/editor 0.1.20 → 0.1.21

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

@@ -1,11 +1,28 @@
 import {ContentMenu} from "fwtoolkit"
-import {DOMSerializer} from "prosemirror-model"
+import type {ContentMenuInit} from "fwtoolkit/content_menu"
+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("figureMenu")
 
-class FigureView {
-    constructor(node, view, getPos, options) {
+class FigureView implements NodeView {
+    node: Node
+    view: EditorView
+    getPos: () => number
+    options: {editor: Editor}
+    dom: HTMLElement
+    serializer: DOMSerializer
+    contentDOM: HTMLElement
+    menuButton: HTMLButtonElement
+
+    constructor(
+        node: Node,
+        view: EditorView,
+        getPos: () => number,
+        options: {editor: Editor}
+    ) {
         this.node = node
         this.view = view
         this.getPos = getPos
@@ -13,8 +30,8 @@ class FigureView {
         this.dom = document.createElement("div")
         this.dom.classList.add("figure")
         this.serializer = DOMSerializer.fromSchema(node.type.schema)
-        const contentDOM = this.serializer.serializeNode(this.node)
-        contentDOM.classList.forEach(className =>
+        const contentDOM = this.serializer.serializeNode(this.node) as HTMLElement
+        contentDOM.classList.forEach((className: string) =>
             this.dom.classList.add(className)
         )
         contentDOM.classList.value = ""
@@ -27,10 +44,11 @@ class FigureView {
         this.dom.insertBefore(this.menuButton, this.dom.firstChild)
     }
 
-    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
@@ -38,12 +56,12 @@ class FigureView {
                 tr.setSelection(new NodeSelection($pos))
                 this.view.dispatch(tr)
                 const contentMenu = new ContentMenu({
-                    menu: this.options.editor.menu.figureMenuModel,
+                    menu: this.options.editor.menu.figureMenuModel 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()
@@ -52,7 +70,12 @@ class FigureView {
                 contentMenu.open()
             } else if (
                 composedPath.includes(this.dom) &&
-                !composedPath.find(el => el.matches && el.matches("figcaption"))
+                !composedPath.find(
+                    el =>
+                        el instanceof Element &&
+                        el.matches &&
+                        el.matches("figcaption")
+                )
             ) {
                 stopped = true
                 const tr = this.view.state.tr
@@ -66,8 +89,20 @@ class FigureView {
     }
 }
 
-class FigureCaptionView {
-    constructor(node, view, getPos, options) {
+class FigureCaptionView implements NodeView {
+    node: Node
+    view: EditorView
+    getPos: () => number
+    options: {editor: Editor}
+    dom: HTMLElement
+    contentDOM: HTMLElement
+
+    constructor(
+        node: Node,
+        view: EditorView,
+        getPos: () => number,
+        options: {editor: Editor}
+    ) {
         this.node = node
         this.view = view
         this.getPos = getPos
@@ -75,26 +110,29 @@ class FigureCaptionView {
 
         this.dom = document.createElement("figcaption")
         this.dom.innerHTML = '<span class="text"></span>'
-        this.contentDOM = this.dom.lastElementChild
+        this.contentDOM = this.dom.lastElementChild as HTMLElement
     }
 }
 
-export const figurePlugin = options =>
+export const figurePlugin = (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["figure"] = (
-                        node,
-                        view,
-                        getPos
+                    self.spec.props.nodeViews["figure"] = (
+                        node: Node,
+                        view: EditorView,
+                        getPos: () => number
                     ) => new FigureView(node, view, getPos, options)
                 }
-                this.spec.props.nodeViews["figure_caption"] = (
-                    node,
-                    view,
-                    getPos
+                self.spec.props.nodeViews["figure_caption"] = (
+                    node: Node,
+                    view: EditorView,
+                    getPos: () => number
                 ) => new FigureCaptionView(node, view, getPos, options)
                 return {}
             },

package/src/state_plugins/footnote_markers.ts

@@ -0,0 +1,142 @@
+import {Plugin, PluginKey} from "prosemirror-state"
+import type {EditorState, Transaction} from "prosemirror-state"
+import type {Node} from "prosemirror-model"
+
+const key = new PluginKey("footnoteMarkers")
+
+export interface FootnoteMarker {
+    from: number
+    to: number
+}
+
+export const findFootnoteMarkers = (
+    fromPos: number,
+    toPos: number,
+    doc: Node
+): FootnoteMarker[] => {
+    const footnoteMarkers: FootnoteMarker[] = []
+    doc.nodesBetween(fromPos, toPos, (node, pos) => {
+        if (!node.isInline) {
+            return
+        }
+        if (node.type.name === "footnote") {
+            const from = pos
+            const to = pos + node.nodeSize
+            const footnoteMarker = {from, to}
+            footnoteMarkers.push(footnoteMarker)
+        }
+    })
+    return footnoteMarkers
+}
+
+export const getFootnoteMarkers = (state: EditorState): FootnoteMarker[] =>
+    findFootnoteMarkers(0, state.doc.content.size, state.doc)
+
+export const getFootnoteMarkerContents = (state: EditorState): any[] =>
+    getFootnoteMarkers(state).map(marker => {
+        const node = state.doc.nodeAt(marker.from)
+        return node ? node.attrs.footnote : undefined
+    })
+
+export const updateFootnoteMarker = (
+    state: EditorState,
+    tr: Transaction,
+    index: number,
+    content: any
+): void => {
+    const markers = getFootnoteMarkers(state)
+    const marker = markers[index]
+    if (!marker) {
+        return
+    }
+    const node = state.doc.nodeAt(marker.from)
+    if (!node) {
+        return
+    }
+    tr.setNodeMarkup(marker.from, null, {
+        ...node.attrs,
+        footnote: content
+    })
+}
+
+const getAddedRanges = (tr: Transaction) => {
+    /* find ranges of the current document that have been added by means of
+     * a transaction.
+     */
+    const ranges: Array<{from: number; to: number}> = []
+    tr.steps.forEach((step, index) => {
+        const stepData = step as unknown as Record<string, unknown>
+        if (
+            stepData.jsonID === "replace" ||
+            stepData.jsonID === "replaceWrap"
+        ) {
+            ranges.push({
+                from: stepData.from as number,
+                to: stepData.to as number
+            })
+        }
+        const map = tr.mapping.maps[index]
+        map.forEach((_oldStart, _oldEnd, newStart, newEnd) => {
+            ranges.push({from: newStart, to: newEnd})
+        })
+    })
+    return ranges
+}
+
+const getDeletedRanges = (tr: Transaction) => {
+    const ranges: Array<{from: number; to: number}> = []
+    tr.steps.forEach((step, index) => {
+        const stepData = step as unknown as Record<string, unknown>
+        if (
+            stepData.jsonID === "replace" ||
+            stepData.jsonID === "replaceWrap"
+        ) {
+            const map = tr.mapping.maps[index]
+            map.forEach((oldStart, oldEnd, _newStart, _newEnd) => {
+                if (oldStart !== oldEnd) {
+                    ranges.push({from: oldStart, to: oldEnd})
+                }
+            })
+        }
+    })
+    return ranges
+}
+
+const getNewFootnotes = (tr: Transaction) => {
+    const addedRanges = getAddedRanges(tr)
+    return addedRanges
+        .map(range => findFootnoteMarkers(range.from, range.to, tr.doc))
+        .flat()
+}
+
+const getDeletedFootnotes = (tr: Transaction) => {
+    const deletedRanges = getDeletedRanges(tr)
+    return deletedRanges
+        .map(range => findFootnoteMarkers(range.from, range.to, tr.before))
+        .flat()
+}
+
+export const footnoteMarkersPlugin = (_options: {editor: unknown}) =>
+    new Plugin({
+        key,
+        appendTransaction: (trs, _oldState, newState) => {
+            const modified = trs.reduce(
+                (modified, tr) => modified || tr.docChanged,
+                false
+            )
+            if (!modified) {
+                return
+            }
+            const addedFootnotes = trs.map(tr => getNewFootnotes(tr)).flat()
+            const deletedFootnotes = trs.map(tr => getDeletedFootnotes(tr)).flat()
+
+            if (!addedFootnotes.length && !deletedFootnotes.length) {
+                return
+            }
+            const tr = newState.tr.setMeta("footnoteMarkers", {
+                addedFootnotes,
+                deletedFootnotes
+            })
+            return tr
+        }
+    })

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

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

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

@@ -1,73 +1,40 @@
 export {accessRightsPlugin} from "./access_rights.js"
-export {
-    contributorInputPlugin,
-    ContributorsPartView
-} from "./contributor_input/index.js"
 export {citationRenderPlugin} from "./citation_render.js"
 export {clipboardPlugin} from "./clipboard.js"
-export {
-    getSelectionUpdate,
-    updateCollaboratorSelection,
-    removeCollaboratorSelection,
-    collabCaretsPlugin
-} from "./collab_carets.js"
+export {collabCaretsPlugin, getSelectionUpdate, removeCollaboratorSelection, updateCollaboratorSelection} from "./collab_carets.js"
 export {
     addCommentDuringCreationDecoration,
-    removeCommentDuringCreationDecoration,
     getCommentDuringCreationDecoration,
-    commentsPlugin
+    removeCommentDuringCreationDecoration
 } from "./comments.js"
-export {
-    documentTemplatePlugin,
-    checkProtectedInSelection,
-    getProtectedRanges,
-    getAllowedElementsAndMarks
-} from "./document_template.js"
-export {
-    findFootnoteMarkers,
-    getFootnoteMarkerContents,
-    updateFootnoteMarker,
-    getFootnoteMarkers,
-    footnoteMarkersPlugin
-} from "./footnote_markers.js"
+export {commentsPlugin} from "./comments.js"
+export {contributorInputPlugin} from "./contributor_input/index.js"
+export {codeBlockPlugin} from "./code_block.js"
+export {documentTemplatePlugin, getProtectedRanges} from "./document_template.js"
+export {figurePlugin} from "./figure.js"
+export {footnoteMarkersPlugin, getFootnoteMarkerContents, getFootnoteMarkers, updateFootnoteMarker} from "./footnote_markers.js"
 export {headerbarPlugin} from "./headerbar.js"
+export {inlineMathPlugin} from "./inline_math.js"
+export {inlineReferencePlugin} from "./inline_reference/index.js"
 export {jumpHiddenNodesPlugin} from "./jump_hidden_nodes.js"
-export {
-    linksPlugin,
-    getInternalTargets
-} from "./links.js"
+export {linksPlugin, getInternalTargets} from "./links.js"
 export {marginboxesPlugin} from "./marginboxes.js"
 export {orderedListMenuPlugin} from "./ordered_list_menu.js"
 export {placeholdersPlugin} from "./placeholders.js"
+export {
+    deselectSearchMatch,
+    endSearch,
+    getSearchMatches,
+    searchPlugin,
+    selectNextSearchMatch,
+    selectPreviousSearchMatch,
+    setSearchTerm,
+    type Match
+} from "./search.js"
 export {selectionMenuPlugin} from "./selection_menu.js"
 export {settingsPlugin} from "./settings.js"
 export {tablePlugin} from "./table.js"
-export {figurePlugin} from "./figure.js"
-export {codeBlockPlugin} from "./code_block.js"
-export {
-    tagInputPlugin,
-    TagsPartView
-} from "./tag_input/index.js"
+export {tagInputPlugin} from "./tag_input/index.js"
 export {tocRenderPlugin} from "./toc_render.js"
 export {toolbarPlugin} from "./toolbar.js"
-export {
-    trackPlugin,
-    getSelectedChanges,
-    setSelectedChanges,
-    deactivateAllSelectedChanges
-} from "./track/index.js"
-export {
-    searchPlugin,
-    setSearchTerm,
-    getSearchMatches,
-    selectPreviousSearchMatch,
-    selectNextSearchMatch,
-    deselectSearchMatch,
-    endSearch
-} from "./search.js"
-export {
-    inlineReferencePlugin,
-    getInlineReferenceState,
-    setInlineReferenceState
-} from "./inline_reference/index.js"
-export {inlineMathPlugin} from "./inline_math.js"
+export {trackPlugin, deactivateAllSelectedChanges} from "./track/index.js"