@fiduswriter/editor 0.1.0

package/src/footnotes/editor.js

@@ -0,0 +1,227 @@
+import {collab, receiveTransaction} from "prosemirror-collab"
+import {baseKeymap} from "prosemirror-commands"
+import {dropCursor} from "prosemirror-dropcursor"
+import {buildKeymap} from "prosemirror-example-setup"
+import {gapCursor} from "prosemirror-gapcursor"
+import {history} from "prosemirror-history"
+import {keymap} from "prosemirror-keymap"
+import {EditorState} from "prosemirror-state"
+import {Step} from "prosemirror-transform"
+import {EditorView} from "prosemirror-view"
+
+import {fnSchema} from "@fiduswriter/document/schema/footnotes"
+import {fnNodeToPmNode} from "@fiduswriter/document/schema/footnotes_convert"
+import {E2EEEncryptor} from "../e2ee/encryptor"
+import {
+    citationRenderPlugin,
+    clipboardPlugin,
+    collabCaretsPlugin,
+    commentsPlugin,
+    figurePlugin,
+    getFootnoteMarkerContents,
+    linksPlugin,
+    marginboxesPlugin,
+    searchPlugin,
+    selectionMenuPlugin,
+    toolbarPlugin,
+    trackPlugin,
+    updateFootnoteMarker
+} from "../state_plugins"
+import {amendTransaction} from "../track"
+import {accessRightsPlugin} from "./state_plugins"
+
+/* Functions related to the footnote editor instance */
+export class ModFootnoteEditor {
+    constructor(mod) {
+        mod.fnEditor = this
+        this.mod = mod
+        this.schema = fnSchema
+        // Decryption of end-to-end encrypted images is provided by the main
+        // app and injected into the reusable footnote schema here.
+        this.schema.cached.decryptImage = (imageEntry, _dom) => {
+            const key = this.mod.editor.e2ee?.key
+            if (!key) {
+                return Promise.reject(new Error("No E2EE key available"))
+            }
+            return E2EEEncryptor.decryptImageToUrl(
+                imageEntry.image,
+                key,
+                imageEntry.original_file_type || "image/png"
+            )
+        }
+        this.fnStatePlugins = [
+            [linksPlugin, () => ({editor: this.mod.editor})],
+            [history],
+            [keymap, () => baseKeymap],
+            [keymap, () => buildKeymap(this.schema)],
+            [collab, () => ({clientID: this.mod.editor.client_id})],
+            [dropCursor],
+            [gapCursor],
+            [selectionMenuPlugin, () => ({editor: this.mod.editor})],
+            [toolbarPlugin, () => ({editor: this.mod.editor})],
+            [citationRenderPlugin, () => ({editor: this.mod.editor})],
+            [collabCaretsPlugin, () => ({editor: this.mod.editor})],
+            [
+                clipboardPlugin,
+                () => ({editor: this.mod.editor, viewType: "footnotes"})
+            ],
+            [accessRightsPlugin, () => ({editor: this.mod.editor})],
+            [commentsPlugin, () => ({editor: this.mod.editor})],
+            [trackPlugin, () => ({editor: this.mod.editor})],
+            [marginboxesPlugin, () => ({editor: this.mod.editor})],
+            [searchPlugin],
+            [figurePlugin, () => ({editor: this.mod.editor})]
+        ]
+    }
+
+    init() {
+        const doc = this.schema.nodeFromJSON({type: "doc", content: []}),
+            plugins = this.fnStatePlugins.map(plugin => {
+                if (plugin[1]) {
+                    return plugin[0](plugin[1](doc))
+                } else {
+                    return plugin[0](doc)
+                }
+            })
+
+        this.view = new EditorView(
+            document.getElementById("footnote-box-container"),
+            {
+                state: EditorState.create({
+                    schema: this.schema,
+                    doc,
+                    plugins
+                }),
+                handleDOMEvents: {
+                    focus: (_view, _event) => {
+                        this.mod.editor.currentView = this.view
+                    }
+                },
+                dispatchTransaction: tr => {
+                    const remote = tr.getMeta("remote"),
+                        fromMain = tr.getMeta("fromMain")
+                    // Skip if creating new footnote by typing directly into empty footnote editor.
+                    if (
+                        tr.docChanged &&
+                        tr.steps[0].jsonID === "replace" &&
+                        tr.steps[0].from === 0 &&
+                        tr.steps[0].to === 0 &&
+                        !remote &&
+                        !fromMain
+                    ) {
+                        return
+                    }
+                    const trackedTr = amendTransaction(
+                        tr,
+                        this.view.state,
+                        this.mod.editor
+                    )
+                    const {state: newState, transactions} =
+                        this.view.state.applyTransaction(trackedTr)
+                    this.view.updateState(newState)
+                    transactions.forEach(subTr => this.onTransaction(subTr))
+                    this.mod.layout.updateDOM()
+                }
+            }
+        )
+    }
+
+    // Find out if we need to recalculate the bibliography
+    onTransaction(tr) {
+        const mainMeta = tr.getMeta("toMain")
+        if (tr.getMeta("remote") || (!mainMeta && !tr.docChanged)) {
+            return
+        }
+        const mainTr = this.mod.editor.view.state.tr,
+            mainState = this.mod.editor.view.state
+
+        if (tr.docChanged) {
+            const fns = [
+                ...new Set(
+                    tr.steps
+                        .map((step, index) => {
+                            if (!step.hasOwnProperty("from")) {
+                                return -1
+                            }
+                            // Full insertion or deletion of footnotes mean that the from will be in-between footnotes
+                            // and have a depth of zero. We ignore these changes as they will have originated from
+                            // the main editor.
+                            const $pos = tr.docs[index].resolve(step.from)
+                            if ($pos.depth === 0) {
+                                return -1
+                            }
+                            return $pos.index(0)
+                        })
+                        .filter(index => index > -1)
+                )
+            ]
+
+            fns.forEach(fnIndex => {
+                const fnContent = tr.doc.child(fnIndex).toJSON().content
+                updateFootnoteMarker(mainState, mainTr, fnIndex, fnContent)
+            })
+        }
+
+        if (mainMeta) {
+            Object.entries(mainMeta).forEach(([key, value]) => {
+                mainTr.setMeta(key, value)
+            })
+        }
+        if (mainMeta || mainTr.docChanged) {
+            this.mod.editor.view.dispatch(mainTr)
+        }
+    }
+
+    applyDiffs(diffs, cid) {
+        const steps = diffs.map(j => Step.fromJSON(this.view.state.schema, j))
+        const clientIds = diffs.map(_ => cid)
+        const tr = receiveTransaction(this.view.state, steps, clientIds)
+        tr.setMeta("remote", true)
+        this.view.dispatch(tr)
+    }
+
+    renderAllFootnotes() {
+        const content = getFootnoteMarkerContents(
+            this.mod.editor.view.state
+        ).map(fnContent => ({
+            type: "footnotecontainer",
+            content: fnContent
+        }))
+        const doc = this.schema.nodeFromJSON({type: "doc", content}),
+            plugins = this.fnStatePlugins.map(plugin => {
+                if (plugin[1]) {
+                    return plugin[0](plugin[1](doc))
+                } else {
+                    return plugin[0]()
+                }
+            }),
+            newState = EditorState.create({
+                schema: this.schema,
+                doc,
+                plugins
+            })
+        this.view.updateState(newState)
+    }
+
+    renderFootnote(content, index = 0, tr) {
+        const node = fnNodeToPmNode(content)
+        let pos = 0
+        for (let i = 0; i < index; i++) {
+            pos += tr.doc.child(i).nodeSize
+        }
+        tr.insert(pos, node)
+    }
+
+    removeFootnote(index, tr) {
+        if (this.mod.editor.mod.collab.doc.receiving) {
+            return
+        }
+
+        let startPos = 0
+        for (let i = 0; i < index; i++) {
+            startPos += this.view.state.doc.child(i).nodeSize
+        }
+        const endPos = startPos + this.view.state.doc.child(index).nodeSize
+        tr.delete(startPos, endPos)
+    }
+}

package/src/footnotes/index.js

@@ -0,0 +1,16 @@
+import {ModFootnoteEditor} from "./editor"
+import {ModFootnoteLayout} from "./layout"
+
+export class ModFootnotes {
+    constructor(editor) {
+        editor.mod.footnotes = this
+        this.editor = editor
+        new ModFootnoteEditor(this)
+        new ModFootnoteLayout(this)
+    }
+
+    init() {
+        this.fnEditor.init()
+        this.layout.init()
+    }
+}

package/src/footnotes/layout.js

@@ -0,0 +1,190 @@
+import fastdom from "fastdom"
+import {getFootnoteMarkers} from "../state_plugins"
+
+/* A class to make footnotes appear correctly off the side of their referrer. */
+export class ModFootnoteLayout {
+    constructor(mod) {
+        mod.layout = this
+        this.mod = mod
+    }
+
+    init() {
+        // Add two elements to hold dynamic CSS info about comments.
+        const styleContainers = document.createElement("temp")
+        styleContainers.innerHTML =
+            '<style type="text/css" id="footnote-placement-style"></style>'
+        while (styleContainers.firstElementChild) {
+            document.body.appendChild(styleContainers.firstElementChild)
+        }
+    }
+
+    updateDOM() {
+        // Handle the CSS layout of the footnotes on the screen.
+        // DOM write phase - nothing to do.
+        fastdom.measure(() => {
+            // DOM read phase
+            const footnoteBoxes = document.querySelectorAll(
+                    "#footnote-box-container .footnote-container"
+                ),
+                referrers = getFootnoteMarkers(this.mod.editor.view.state)
+            if (
+                (!referrers.length &&
+                    this.mod.editor.mod.citations.citationType !== "note") ||
+                referrers.length !== footnoteBoxes.length
+            ) {
+                // Apparently not all footnote boxes have been drawn or there are none. Abort for now.
+                return
+            }
+            const footnoteBoxContainer = document.getElementById(
+                "footnote-box-container"
+            )
+            let footnotePlacementStyle = ""
+
+            if (getComputedStyle(footnoteBoxContainer).display === "block") {
+                // We are in mobile/tablet mode. We don't need to place footnotes.
+            } else if (this.mod.editor.mod.citations.citationType === "note") {
+                const totalOffset =
+                    footnoteBoxContainer.getBoundingClientRect().top
+                /* Citations are also in footnotes, so both citation footnotes
+                 * and editor footnotes have to be placed. They should be placed
+                 * in the order the markers appear in the content, even though
+                 * editor footnotes and citations footnotes are separated in the DOM.
+                 */
+                const citationFootnotes = document.querySelectorAll(
+                    "#citation-footnote-box-container .footnote-citation"
+                )
+                let editorFootnoteIndex = 0,
+                    citationFootnoteIndex = 0,
+                    totalEditorOffset = totalOffset,
+                    totalCitationOffset = totalOffset
+                this.mod.editor.view.state.doc.descendants((node, pos) => {
+                    if (
+                        node.isInline &&
+                        (node.type.name === "footnote" ||
+                            node.type.name === "citation")
+                    ) {
+                        let topMargin = 10
+                        if (node.type.name === "footnote") {
+                            const footnoteBox =
+                                    footnoteBoxes[editorFootnoteIndex],
+                                selector = `.footnote-container:nth-of-type(${editorFootnoteIndex + 1})`,
+                                footnoteBoxCoords =
+                                    footnoteBox.getBoundingClientRect(),
+                                footnoteBoxHeight = footnoteBoxCoords.height,
+                                referrerTop =
+                                    this.mod.editor.view.coordsAtPos(pos).top
+                            editorFootnoteIndex++
+                            if (!referrerTop) {
+                                // footnote is not shown. Also hide the footnote from the editor.
+                                footnotePlacementStyle += `${selector} {display: none;}\n`
+                                return
+                            }
+                            if (
+                                referrerTop > totalEditorOffset ||
+                                totalEditorOffset <
+                                    totalCitationOffset + topMargin
+                            ) {
+                                topMargin = Number.parseInt(
+                                    Math.max(
+                                        referrerTop - totalEditorOffset,
+                                        totalCitationOffset -
+                                            totalEditorOffset +
+                                            topMargin
+                                    )
+                                )
+                                footnotePlacementStyle += `${selector} {margin-top: ${topMargin}px;}\n`
+                            }
+                            totalEditorOffset += footnoteBoxHeight + topMargin
+                        } else {
+                            if (
+                                citationFootnotes.length > citationFootnoteIndex
+                            ) {
+                                const footnoteBox =
+                                        citationFootnotes[
+                                            citationFootnoteIndex
+                                        ],
+                                    selector =
+                                        ".footnote-citation:nth-of-type(" +
+                                        (citationFootnoteIndex + 1) +
+                                        ")",
+                                    footnoteBoxCoords =
+                                        footnoteBox.getBoundingClientRect(),
+                                    footnoteBoxHeight =
+                                        footnoteBoxCoords.height,
+                                    referrerTop =
+                                        this.mod.editor.view.coordsAtPos(
+                                            pos
+                                        ).top
+                                citationFootnoteIndex++
+                                if (!referrerTop) {
+                                    // footnote is not shown. Also hide the footnote from the editor.
+                                    footnotePlacementStyle += `${selector} {display: none;}\n`
+                                    return
+                                }
+                                if (
+                                    referrerTop > totalCitationOffset ||
+                                    totalCitationOffset <
+                                        totalEditorOffset + topMargin
+                                ) {
+                                    topMargin = Number.parseInt(
+                                        Math.max(
+                                            referrerTop - totalCitationOffset,
+                                            topMargin +
+                                                totalEditorOffset -
+                                                totalCitationOffset
+                                        )
+                                    )
+                                    footnotePlacementStyle += `${selector} {margin-top: ${topMargin}px;}\n`
+                                }
+                                totalCitationOffset +=
+                                    footnoteBoxHeight + topMargin
+                            }
+                        }
+                    }
+                })
+            } else {
+                let totalOffset =
+                    footnoteBoxContainer.getBoundingClientRect().top
+                /* Only editor footnotes (no citation footnotes) need to be layouted.
+                 * We use the existing footnote markers referrers to find the
+                 * placement.
+                 */
+                referrers.forEach((referrer, index) => {
+                    const footnoteBox = footnoteBoxes[index]
+
+                    const footnoteBoxCoords =
+                            footnoteBox.getBoundingClientRect(),
+                        footnoteBoxHeight = footnoteBoxCoords.height,
+                        referrerTop = this.mod.editor.view.coordsAtPos(
+                            referrer.from
+                        ).top,
+                        selector = `.footnote-container:nth-of-type(${index + 1})`
+                    if (!referrerTop) {
+                        // footnote is not shown. Also hide the footnote from the editor.
+                        footnotePlacementStyle += `${selector} {display: none;}\n`
+                        return
+                    }
+                    let topMargin = 10
+
+                    if (referrerTop > totalOffset) {
+                        topMargin = Number.parseInt(referrerTop - totalOffset)
+                        footnotePlacementStyle += `${selector} {margin-top: ${topMargin}px;}\n`
+                    }
+                    totalOffset += footnoteBoxHeight + topMargin
+                })
+            }
+
+            fastdom.mutate(() => {
+                //DOM write phase
+                if (
+                    document.getElementById("footnote-placement-style")
+                        .innerHTML != footnotePlacementStyle
+                ) {
+                    document.getElementById(
+                        "footnote-placement-style"
+                    ).innerHTML = footnotePlacementStyle
+                }
+            })
+        })
+    }
+}

package/src/footnotes/state_plugins/access_rights.js

@@ -0,0 +1,39 @@
+import {Plugin, PluginKey} from "prosemirror-state"
+
+import {COMMENT_ONLY_ROLES, READ_ONLY_ROLES} from "../.."
+
+const key = new PluginKey("accessRights")
+
+export const accessRightsPlugin = options =>
+    new Plugin({
+        key,
+        filterTransaction: (tr, _state) => {
+            let allowed = true
+            const remote = tr.getMeta("remote")
+            const fromMain = tr.getMeta("fromMain")
+            if (remote || fromMain) {
+                return allowed
+            }
+
+            if (
+                (COMMENT_ONLY_ROLES.includes(
+                    options.editor.docInfo.access_rights
+                ) ||
+                    READ_ONLY_ROLES.includes(
+                        options.editor.docInfo.access_rights
+                    )) &&
+                tr.docChanged
+            ) {
+                allowed = false
+            }
+
+            if (
+                tr.docs.length &&
+                tr.docs[0]?.childCount !== tr.doc.childCount
+            ) {
+                allowed = false
+            }
+
+            return allowed
+        }
+    })

package/src/footnotes/state_plugins/index.js

@@ -0,0 +1 @@
+export {accessRightsPlugin} from "./access_rights"