@fiduswriter/editor 0.1.0

package/src/clipboard/copy/serializers.js

@@ -0,0 +1,179 @@
+import {BIBLIOGRAPHY_HEADERS} from "@fiduswriter/document/schema/i18n"
+import {DOMSerializer} from "prosemirror-model"
+import {RenderCitations} from "../../../citations/render"
+import {createDocCopySchema, fnCopySchema} from "./schema"
+
+// Wrap around DOMSerializer, allowing post processing.
+class ClipboardDOMSerializer {
+    constructor(nodes, marks, editor) {
+        this.domSerializer = new DOMSerializer(nodes, marks)
+        this.editor = editor
+    }
+
+    serializeFragment(fragment, options) {
+        const domFragment = this.domSerializer.serializeFragment(
+            fragment,
+            options
+        )
+        return this.postProcessFragment(domFragment)
+    }
+
+    postProcessFragment(domFragment) {
+        const citationFormatter = this.renderCitations(domFragment)
+        this.renderFootnotes(domFragment, citationFormatter)
+        this.removeTrackingData(domFragment)
+        this.addBaseUrlToImages(domFragment)
+        this.addFigureNumbers(domFragment)
+        return domFragment
+    }
+
+    renderCitations(domFragment) {
+        const settings = this.editor.view.state.doc.attrs,
+            bibliographyHeader =
+                settings.bibliography_header[settings.language] ||
+                BIBLIOGRAPHY_HEADERS[settings.language]
+        const citRenderer = new RenderCitations(
+            domFragment,
+            settings.citationstyle,
+            bibliographyHeader,
+            this.editor.mod.db.bibDB,
+            this.editor.app.csl,
+            true // synchronous. Should work as the editor has used the same style previously.
+        )
+        if (citRenderer.init()) {
+            if (citRenderer.fm.bibHTML.length) {
+                const bibDiv = document.createElement("div")
+                bibDiv.classList.add("fiduswriter-clipboard-bibliography")
+                bibDiv.innerHTML = citRenderer.fm.bibHTML
+                bibDiv.firstElementChild.innerHTML = gettext("Bibliography")
+                domFragment.appendChild(bibDiv)
+            }
+            return citRenderer.fm
+        } else {
+            return false
+        }
+    }
+
+    renderFootnotes(domFragment, citationFormatter) {
+        const footnoteSelector =
+            citationFormatter && citationFormatter.citationType === "note"
+                ? ".footnote-marker, .citation"
+                : ".footnote-marker"
+        // Inside of footnote markers add anchors and put footnotes with content
+        // at the back of the document.
+        // Also, link the footnote anchor with the footnote.
+        const footnotes = domFragment.querySelectorAll(footnoteSelector)
+        const footnotesContainer = document.createElement("section")
+        let citationCount = 0
+        footnotesContainer.setAttribute("role", "doc-footnotes")
+        footnotesContainer.classList.add("fnlist")
+        footnotesContainer.classList.add("fiduswriter-clipboard-footnotes")
+        footnotes.forEach((footnote, index) => {
+            const counter = index + 1,
+                id = this.getRandomID()
+            const footnoteAnchor = this.getFootnoteAnchor(counter, id)
+            footnote.appendChild(footnoteAnchor)
+            const newFootnote = document.createElement("h6") // We use H6 as Wordpress Gutenberg only allows IDs on H1-6 elements.
+            newFootnote.setAttribute("role", "doc-footnote")
+            newFootnote.innerHTML = footnote.matches(".footnote-marker")
+                ? footnote.dataset.footnote
+                : `<p>${citationFormatter.citationTexts[citationCount++] || " "}</p>`
+            if (
+                newFootnote.firstElementChild &&
+                newFootnote.firstElementChild.matches("p")
+            ) {
+                newFootnote.firstElementChild.insertAdjacentHTML(
+                    "afterbegin",
+                    `${counter}. `
+                )
+            } else {
+                newFootnote.insertAdjacentHTML(
+                    "afterbegin",
+                    `<p>${counter}. </p>`
+                )
+            }
+            newFootnote.id = `fn-${id}`
+            footnotesContainer.appendChild(newFootnote)
+        })
+        if (footnotes.length) {
+            domFragment.appendChild(footnotesContainer)
+        }
+    }
+
+    addFigureNumbers(domFragment) {
+        domFragment
+            .querySelectorAll(
+                "figure[data-category='figure'] figcaption span.label"
+            )
+            .forEach((el, index) => {
+                el.innerHTML += " " + (index + 1) + ": "
+            })
+
+        domFragment
+            .querySelectorAll(
+                "figure[data-category='photo'] figcaption span.label"
+            )
+            .forEach((el, index) => {
+                el.innerHTML += " " + (index + 1) + ": "
+            })
+
+        domFragment
+            .querySelectorAll(
+                "figure[data-category='table'] figcaption span.label"
+            )
+            .forEach((el, index) => {
+                el.innerHTML += " " + (index + 1) + ": "
+            })
+    }
+
+    addBaseUrlToImages(domFragment) {
+        domFragment
+            .querySelectorAll("img")
+            .forEach(el => el.setAttribute("src", el.src))
+    }
+
+    getRandomID() {
+        return (0 | (Math.random() * 9e6)).toString(36)
+    }
+
+    getFootnoteAnchor(counter, id) {
+        const footnoteAnchor = document.createElement("a")
+        footnoteAnchor.setAttribute("href", `#fn-${id}`)
+        footnoteAnchor.classList.add("fn")
+        footnoteAnchor.classList.add("sdfootnoteanc")
+        footnoteAnchor.innerHTML = `<sup>${counter}</sup>`
+        return footnoteAnchor
+    }
+
+    removeTrackingData(domFragment) {
+        domFragment
+            .querySelectorAll(".approved-insertion, .insertion")
+            .forEach(el => {
+                const parent = el.parentNode
+                const fragment = document.createDocumentFragment()
+                while (el.firstChild) {
+                    fragment.appendChild(el.firstChild)
+                }
+                parent.replaceChild(fragment, el)
+            })
+        domFragment
+            .querySelectorAll(".deletion")
+            .forEach(el => el.parentElement.removeChild(el))
+    }
+
+    static fromSchema(schema, editor) {
+        return new ClipboardDOMSerializer(
+            DOMSerializer.nodesFromSchema(schema),
+            DOMSerializer.marksFromSchema(schema),
+            editor
+        )
+    }
+}
+
+export const docClipboardSerializer = editor =>
+    ClipboardDOMSerializer.fromSchema(
+        createDocCopySchema(editor.schema),
+        editor
+    )
+export const fnClipboardSerializer = editor =>
+    ClipboardDOMSerializer.fromSchema(fnCopySchema, editor)

package/src/clipboard/paste/fidus_writer.js

@@ -0,0 +1,55 @@
+import {GeneralPasteHandler} from "./general"
+
+// Fidus Writer paste handler
+export class FidusWriterPasteHandler extends GeneralPasteHandler {
+    // Convert an existing node to a different node, if needed.
+    convertNode(node) {
+        node = super.convertNode(node)
+        // Replace  nodes with other nodes to not change the number of child nodes
+        // <b style="font-weight:normal;">...</b> => <span>...</span>
+        if (node.tagName === "SPAN" && node.classList.contains("citation")) {
+            node = this.verifyCitationNode(node)
+        }
+        return node
+    }
+
+    verifyCitationNode(node) {
+        try {
+            const bibs = JSON.parse(node.dataset.bibs),
+                references = JSON.parse(node.dataset.references),
+                bibDB = this.editor.mod.db.bibDB,
+                idTranslations = {}
+            Object.keys(bibs).forEach(bibKey => {
+                const reference = bibs[bibKey]
+                const oldKey = bibDB.findReference(reference)
+                if (oldKey) {
+                    idTranslations[bibKey] = oldKey
+                } else {
+                    const newKey = bibDB.addReference(reference, bibKey)
+                    idTranslations[bibKey] = newKey
+                }
+            })
+
+            if (
+                Object.entries(idTranslations).every(
+                    trans => trans[0] === trans[1]
+                )
+            ) {
+                return node
+            }
+            references.forEach(ref => (ref.id = idTranslations[ref.id]))
+            node.dataset.references = JSON.stringify(references)
+            return node
+        } catch (_error) {
+            return node
+        }
+    }
+
+    cleanDOM() {
+        // Remove the bibliography that was added by the copy serializer
+        const clipboardArtifacts = this.dom.querySelectorAll(
+            ".fiduswriter-clipboard-bibliography, .fiduswriter-clipboard-footnotes"
+        )
+        clipboardArtifacts.forEach(el => el.parentElement.removeChild(el))
+    }
+}

package/src/clipboard/paste/general.js

@@ -0,0 +1,80 @@
+// General Fallback handler for paste
+export class GeneralPasteHandler {
+    constructor(editor, htmlDoc, pmType) {
+        this.editor = editor
+        this.htmlDoc = htmlDoc
+        this.pmType = pmType
+        this.footnoteMarkers = []
+        this.footnotes = []
+    }
+
+    // Iterate over each node in the body of the pasted content.
+    getOutput() {
+        this.dom = this.htmlDoc.getElementsByTagName("body")[0]
+        this.inHTML = this.dom.innerHTML
+        this.iterateNode(this.dom)
+        this.cleanDOM()
+        this.convertFootnotes()
+        this.outHTML = this.dom.innerHTML
+        return this.outHTML
+    }
+
+    // Remove unused content
+    cleanDOM() {}
+
+    // Iterate over pasted nodes and their children
+    iterateNode(node) {
+        if ((node.tagName === "P") & !node.firstChild) {
+            node.parentNode.removeChild(node)
+            return
+        } else if (node.nodeType === 8) {
+            // comment node
+            node.parentNode.removeChild(node)
+            return
+        } else if (node.nodeType === 1) {
+            // element node
+            let childNode = node.firstChild
+            while (childNode) {
+                const nextChildNode = childNode.nextSibling
+                this.iterateNode(childNode)
+                childNode = nextChildNode
+            }
+            node = this.convertNode(node)
+        }
+    }
+
+    // Convert an existing node to a different node, if needed.
+    convertNode(node) {
+        if (
+            node.tagName === "TABLE" &&
+            node.firstElementChild?.tagName !== "CAPTION"
+        ) {
+            const caption = document.createElement("caption")
+            caption.innerHTML = "<span class='text'></span>"
+            node.insertBefore(caption, node.firstChild)
+        }
+        return node
+    }
+
+    // Move footnotes into their markers and turn footnote markers into the
+    // required format.
+    convertFootnotes() {
+        this.footnoteMarkers.forEach((fnM, index) => {
+            const footnote = this.footnotes[index]
+            const newFnM = document.createElement("span")
+            newFnM.classList.add("footnote-marker")
+            const footnoteContents = footnote.innerHTML.replace(/\s+/g, " ")
+            // Remove linebreaks in string (not <BR>)
+            // Turn multiple white spaces into single space
+            newFnM.dataset.footnote = footnoteContents
+            fnM.parentNode.replaceChild(newFnM, fnM)
+        })
+        // Remove all footnotes from document. Some footnotes may have several
+        // markers, so only remove each footnote once.
+        this.footnotes.forEach(fn => {
+            if (fn.parentNode) {
+                fn.parentNode.removeChild(fn)
+            }
+        })
+    }
+}

package/src/clipboard/paste/google_docs.js

@@ -0,0 +1,26 @@
+import {GeneralPasteHandler} from "./general"
+
+// Google Docs (the writing component) paste handler
+export class GoogleDocsPasteHandler extends GeneralPasteHandler {
+    // Convert an existing node to a different node, if needed.
+    convertNode(node) {
+        node = super.convertNode(node)
+        // Replace  nodes with other nodes to not change the number of child nodes
+        // <b style="font-weight:normal;">...</b> => <span>...</span>
+        if (node.tagName === "B" && node.style.fontWeight === "normal") {
+            node = this.neutralizeInlineNode(node)
+        }
+        return node
+    }
+
+    // Replace any type of inline node with a span node.
+    neutralizeInlineNode(node) {
+        const newNode = document.createElement("span")
+        while (node.firstChild) {
+            newNode.appendChild(node.firstChild)
+        }
+        node.parentNode.replaceChild(newNode, node)
+
+        return newNode
+    }
+}

package/src/clipboard/paste/html.js

@@ -0,0 +1,76 @@
+import {FidusWriterPasteHandler} from "./fidus_writer"
+import {GeneralPasteHandler} from "./general"
+import {GoogleDocsPasteHandler} from "./google_docs"
+import {LibreOfficeWriterPasteHandler} from "./libreoffice_writer"
+import {MicrosoftWordPasteHandler} from "./microsoft_word"
+
+import {resetPasteRange} from "../../state_plugins/clipboard"
+
+// Some pasted HTML will need slight conversions to work correctly.
+// We try to sniff whether paste comes from MsWord, LibreOffice or Google Docs
+// and use specialized handlers for these and a general handler everything else.
+
+export class HTMLPaste {
+    constructor(editor, inHTML, pmType, view) {
+        this.editor = editor
+        this.inHTML = inHTML
+        this.pmType = pmType
+        this.view = view
+    }
+
+    getOutput() {
+        this.parseHTML()
+        this.selectHandler()
+        this.handlerInstance = new this.handler(
+            this.editor,
+            this.htmlDoc,
+            this.pmType
+        )
+        this.outHTML = this.handlerInstance.getOutput()
+        setTimeout(() => {
+            this.resetPasteRange()
+        }, 0)
+        return this.outHTML
+    }
+
+    parseHTML() {
+        const parser = new window.DOMParser()
+        this.htmlDoc = parser
+            .parseFromString(this.inHTML, "text/html")
+            .getElementsByTagName("html")[0]
+    }
+
+    // Find out what the source of the paste is and choose a corresponding
+    // handler.
+    selectHandler() {
+        // For LibreOffice
+        const head = this.htmlDoc.getElementsByTagName("head")[0]
+        const generatorMetaTag = head.querySelector("meta[name=generator]")
+        // For Google Docs
+        const body = this.htmlDoc.getElementsByTagName("body")[0]
+        const firstB = body.querySelector("b")
+        // For Fidus Writer
+        const pmSlice = this.htmlDoc.querySelector("[data-pm-slice]")
+        if (
+            this.htmlDoc.hasAttribute("xmlns:w") &&
+            this.htmlDoc.getAttribute("xmlns:w") ===
+                "urn:schemas-microsoft-com:office:word"
+        ) {
+            this.handler = MicrosoftWordPasteHandler
+        } else if (generatorMetaTag?.content?.startsWith("LibreOffice")) {
+            this.handler = LibreOfficeWriterPasteHandler
+        } else if (firstB?.id.startsWith("docs-internal-guid")) {
+            this.handler = GoogleDocsPasteHandler
+        } else if (pmSlice) {
+            this.handler = FidusWriterPasteHandler
+        } else {
+            this.handler = GeneralPasteHandler
+        }
+    }
+
+    resetPasteRange() {
+        const tr = this.view.state.tr
+        resetPasteRange(tr)
+        this.view.dispatch(tr)
+    }
+}

package/src/clipboard/paste/index.js

@@ -0,0 +1,2 @@
+export {HTMLPaste} from "./html"
+export {TextPaste} from "./text"

package/src/clipboard/paste/libreoffice_writer.js

@@ -0,0 +1,32 @@
+import {GeneralPasteHandler} from "./general"
+
+// LibreOffice Writer paste handler
+export class LibreOfficeWriterPasteHandler extends GeneralPasteHandler {
+    // Convert an existing node to a different node, if needed.
+    convertNode(node) {
+        node = super.convertNode(node)
+        // Footnote markers (only in main pm instance):
+        if (
+            node.tagName === "A" &&
+            node.classList.contains("sdfootnoteanc") &&
+            this.pmType === "main"
+        ) {
+            // Remove "sym" at the end of the selector
+            const href = node.getAttribute("href")
+            const fnSelector =
+                href.length > 3 ? href.substring(0, href.length - 3) : href
+            const footnote = this.dom.querySelector(fnSelector)
+            if (footnote) {
+                const footnoteCounter =
+                    footnote.querySelector("a.sdfootnotesym")
+                if (footnoteCounter) {
+                    footnoteCounter.parentNode.removeChild(footnoteCounter)
+                }
+                this.footnoteMarkers.push(node)
+                this.footnotes.push(footnote)
+            }
+        }
+
+        return node
+    }
+}

package/src/clipboard/paste/microsoft_word.js

@@ -0,0 +1,87 @@
+import {GeneralPasteHandler} from "./general"
+
+// Microsoft Word 2016 paste handler
+export class MicrosoftWordPasteHandler extends GeneralPasteHandler {
+    // Remove unused content
+    cleanDOM() {
+        // Remove footnote list container with separator line
+        const removableElements = this.dom.querySelectorAll(
+            'div[style*="mso-element:footnote-list"]'
+        )
+
+        removableElements.forEach(el => el.parentNode.removeChild(el))
+    }
+
+    // Iterate over pasted nodes and their children
+    iterateNode(node) {
+        node = super.convertNode(node)
+        if ((node.tagName === "P") & !node.firstChild) {
+            node.parentNode.removeChild(node)
+            return true
+        } else if (node.nodeType === 8) {
+            if (node.textContent === "EndFragment") {
+                // End of paste content. Remove all remaining sibling nodes.
+                while (node) {
+                    const nextSibling = node.nextSibling
+                    node.parentNode.removeChild(node)
+                    node = nextSibling
+                }
+                return false
+            } else {
+                node.parentNode.removeChild(node)
+                return true
+            }
+        }
+        if (node.nodeType === 1) {
+            let childNode = node.firstChild
+            while (childNode) {
+                const nextChildNode = childNode.nextSibling
+                if (this.iterateNode(childNode)) {
+                    childNode = nextChildNode
+                } else {
+                    childNode = false
+                }
+            }
+            node = this.convertNode(node)
+        }
+
+        return true
+    }
+
+    // Convert an existing node to a different node, if needed.
+    convertNode(node) {
+        // Footnote markers (only in main pm instance):
+        if (
+            node.tagName === "A" &&
+            node.firstChild?.tagName === "SPAN" &&
+            node.firstChild?.classList.contains("MsoFootnoteReference") &&
+            this.pmType === "main"
+        ) {
+            // Remove "#_ftn" from the selector (#_ftn1)
+            const fnSelector = node.getAttribute("href")
+            const fnNumber = node
+                .getAttribute("href")
+                .substring(5, fnSelector.length)
+            const footnote = this.dom.querySelector("#ftn" + fnNumber)
+            if (footnote) {
+                const footnoteCounter = footnote.querySelector(
+                    'a[href="#_ftnref' + fnNumber + '"]'
+                )
+                if (footnoteCounter) {
+                    const followingNode = footnoteCounter.nextSibling
+                    footnoteCounter.parentNode.removeChild(footnoteCounter)
+                    if (followingNode?.nodeType === 3) {
+                        // If there is a text string right after the footnote
+                        // marker, remove any leading spaces.
+                        followingNode.nodeValue =
+                            followingNode.nodeValue.replace(/^\s+/, "")
+                    }
+                }
+                this.footnoteMarkers.push(node)
+                this.footnotes.push(footnote)
+            }
+        }
+
+        return node
+    }
+}

package/src/clipboard/paste/text.js

@@ -0,0 +1,58 @@
+import {TextSelection} from "prosemirror-state"
+import {__parseFromClipboard} from "prosemirror-view"
+
+import {getPasteRange, resetPasteRange} from "../../state_plugins/clipboard"
+
+export class TextPaste {
+    constructor(editor, text, view) {
+        this.editor = editor
+        this.text = text
+        this.view = view
+        this.foundBibEntries = false
+    }
+
+    init() {
+        import("../../../bibliography/import").then(
+            ({BibliographyImporter}) => {
+                const importer = new BibliographyImporter(
+                    this.text,
+                    this.editor.mod.db.bibDB,
+                    newIds => {
+                        this.foundBibEntries = true
+                        const format = "autocite",
+                            references = newIds.map(id => ({id}))
+
+                        const citationNode = this.view.state.schema.nodes[
+                            "citation"
+                        ].create({format, references})
+                        const pasteRange = getPasteRange(this.view.state)
+                        if (pasteRange) {
+                            const tr = this.view.state.tr
+                            tr.replaceRangeWith(
+                                pasteRange[0],
+                                pasteRange[1],
+                                citationNode
+                            )
+                            resetPasteRange(tr)
+                            tr.setMeta("addToHistory", false)
+                            this.view.dispatch(tr)
+                        }
+                    },
+                    () => {
+                        if (!this.foundBibEntries) {
+                            // There were no citations in the pasted text.
+                            const pasteRange = getPasteRange(this.view.state)
+                            if (pasteRange) {
+                                const tr = this.view.state.tr
+                                resetPasteRange(tr)
+                                this.view.dispatch(tr)
+                            }
+                        }
+                    },
+                    false // no messages to end user. Would be confusing if user just wants to paste unrelated text.
+                )
+                importer.init()
+            }
+        )
+    }
+}