@fiduswriter/editor 0.1.0

package/src/dialogs/contributor.js

@@ -0,0 +1,173 @@
+import {Dialog, addAlert} from "fwtoolkit"
+import {NodeSelection} from "prosemirror-state"
+import {contributorTemplate} from "./templates"
+/*
+    Source for email regexp:
+    https://html.spec.whatwg.org/multipage/input.html#e-mail-state-(type%3Demail)
+*/
+const emailRegExp =
+    /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
+
+export class ContributorDialog {
+    /**
+     * @param {Object} node - The contributors_part node
+     * @param {Object} view - The ProseMirror editor view
+     * @param {Object|false} contributor - The contributor data if editing, false if adding
+     * @param {Array} idTypes - Array of ID type configs from template [{label, regex}]
+     */
+    constructor(node, view, contributor = false, idTypes = []) {
+        this.node = node
+        this.view = view
+        this.contributor = contributor
+        console.log("ContirbutorDialog", {node, view, contributor, idTypes})
+        this.idTypes = idTypes
+        this.dialog = false
+    }
+
+    init() {
+        const buttons = []
+        // Add Update/Add button
+        buttons.push({
+            text: this.contributor ? gettext("Update") : gettext("Add"),
+            classes: "fw-dark",
+            click: () => {
+                // Get form values
+                let firstname = this.dialog.dialogEl.querySelector(
+                        "input[name=firstname]"
+                    ).value,
+                    lastname = this.dialog.dialogEl.querySelector(
+                        "input[name=lastname]"
+                    ).value,
+                    email =
+                        this.dialog.dialogEl.querySelector(
+                            "input[name=email]"
+                        ).value,
+                    institution = this.dialog.dialogEl.querySelector(
+                        "input[name=institution]"
+                    ).value,
+                    id_type = false,
+                    id_value = false
+
+                firstname = firstname.length ? firstname : false
+                lastname = lastname.length ? lastname : false
+                institution = institution.length ? institution : false
+                email = email.length ? email : false
+
+                // Get ID type/value if fields are shown
+                if (this.idTypes && this.idTypes.length > 0) {
+                    const idTypeEl =
+                        this.dialog.dialogEl.querySelector("[name=id_type]")
+                    if (idTypeEl && idTypeEl.value) {
+                        id_type = idTypeEl.value
+                        const idValueInput = this.dialog.dialogEl.querySelector(
+                            "input[name=id_value]"
+                        )
+                        if (idValueInput && idValueInput.value) {
+                            id_value = idValueInput.value
+                            // Validate id_value against selected id_type's regex
+                            const selectedType = this.idTypes.find(
+                                t => t.label === id_type
+                            )
+                            if (selectedType && selectedType.regex) {
+                                const regex = new RegExp(selectedType.regex)
+                                if (!regex.test(id_value)) {
+                                    addAlert(
+                                        "error",
+                                        gettext(
+                                            "ID Value format is incorrect for "
+                                        ) + id_type
+                                    )
+                                    return
+                                }
+                            }
+                        }
+                    }
+                }
+
+                // Validate email format
+                if (email && !emailRegExp.test(email)) {
+                    addAlert("error", gettext("Email is in incorrect format!"))
+                    return
+                }
+
+                this.dialog.close()
+
+                // Don't create contributor if all fields are empty
+                if (!firstname && !lastname && !institution && !email) {
+                    // No data, don't insert.
+                    return
+                }
+
+                const view = this.view,
+                    newNode = view.state.schema.nodes.contributor.create({
+                        firstname,
+                        lastname,
+                        email,
+                        institution,
+                        id_type,
+                        id_value
+                    })
+                let tr
+
+                // Check if we're editing an existing contributor based on current selection
+                // This works for collaborative editing because we use current selection, not saved positions
+                if (
+                    this.contributor &&
+                    view.state.selection.jsonID === "node" &&
+                    view.state.selection.node.type.name === "contributor"
+                ) {
+                    // Editing: replace the selected contributor
+                    tr = view.state.tr.replaceSelectionWith(newNode, false)
+                    // Set selection to the updated contributor
+                    tr.setSelection(
+                        NodeSelection.create(tr.doc, view.state.selection.from)
+                    )
+                } else {
+                    // Adding: find the insertion point based on current document state
+                    // Adding: find the insertion point based on current document state
+                    let posFrom, posTo
+                    view.state.doc.descendants((node, pos) => {
+                        // Find the contributors_part node to determine insertion position
+                        if (node.attrs.id === this.node.attrs.id) {
+                            posFrom = posTo = pos + node.nodeSize - 1
+                            // - 1 to go to end of node contributors container node
+                        }
+                        if ("id" in node.attrs) {
+                            return false
+                        }
+                    })
+                    tr = view.state.tr.replaceRangeWith(posFrom, posTo, newNode)
+                    // Set selection to the newly created contributor
+                    tr.setSelection(NodeSelection.create(tr.doc, posFrom))
+                }
+                // Dispatch the transaction (both replacement and selection)
+                view.dispatch(tr)
+                return
+            }
+        })
+
+        buttons.push({
+            type: "cancel"
+        })
+
+        // Create and open the dialog
+
+        this.dialog = new Dialog({
+            id: "edit-contributor",
+            title: `${this.contributor ? gettext("Update") : gettext("Add")} ${this.node.attrs.item_title.toLowerCase()}`,
+            body: contributorTemplate({
+                contributor: this.contributor ? this.contributor : {},
+                idTypes: this.idTypes
+            }),
+            width: 836,
+            height: 360,
+            buttons,
+            // Focus the editor view when dialog closes
+            onClose: () => this.view.focus(),
+            // Don't restore previous active element (dialog handles focus)
+            restoreActiveElement: false
+        })
+
+        this.dialog.open()
+    }
+}

package/src/dialogs/figure.js

@@ -0,0 +1,479 @@
+import deepEqual from "fast-deep-equal"
+
+import {randomFigureId} from "@fiduswriter/document/schema/common/index"
+import {ContentMenu, Dialog, addAlert, dropdownSelect} from "fwtoolkit"
+import {ImageSelectionDialog} from "../../images/selection_dialog"
+import {E2EEEncryptor} from "../e2ee/encryptor"
+import {configureFigureTemplate} from "./templates"
+
+export class FigureDialog {
+    constructor(editor) {
+        this.editor = editor
+        this.imageDB = this.editor.mod.db.imageDB
+        this.userImageDB = this.editor.app.imageDB
+        this.imgId = false
+        this.imgDb = false
+        this.copyright = false
+        this.insideFigure = false
+        this.figureNode = false
+        this.contentNode = false
+        this.caption = true
+        this.category = "none"
+        this.aligned = "center"
+        this.width = "50"
+        this.equation = ""
+        this.node = false
+        this.submitMessage = gettext("Insert")
+        this.dialog = false
+    }
+
+    layoutMathEditor() {
+        this.dialog.dialogEl.querySelector(".inner-figure-preview").innerHTML =
+            `<div><span class="math-field" type="text" name="math" ></span></div>
+            <p class="formula-or-figure">${gettext("or")}</p>
+            <p><button type="button" id="insert-figure-image" class="fw-button fw-light">
+                ${gettext("Insert image")} <i class="fa-solid fa-image"></i>
+            </button></p>`
+
+        this.mathliveDOM = this.dialog.dialogEl.querySelector(".math-field")
+        this.nonMathElements = [
+            this.dialog.dialogEl.querySelector("#insert-figure-image"),
+            this.dialog.dialogEl.querySelector(".formula-or-figure")
+        ]
+        import("@fiduswriter/document/mathlive").then(MathLive => {
+            MathLive.MathfieldElement.strings = {
+                int: {
+                    "keyboard.tooltip.functions": gettext("Functions"),
+                    "keyboard.tooltip.greek": gettext("Greek Letters"),
+                    "keyboard.tooltip.command": gettext("LaTeX Command Mode"),
+                    "keyboard.tooltip.numeric": gettext("Numeric"),
+                    "keyboard.tooltip.roman": gettext(
+                        "Symbols and Roman Letters"
+                    ),
+                    "tooltip.copy to clipboard": gettext("Copy to Clipboard"),
+                    "tooltip.redo": gettext("Redo"),
+                    "tooltip.toggle virtual keyboard": gettext(
+                        "Toggle Virtual Keyboard"
+                    ),
+                    "tooltip.undo": gettext("Undo")
+                }
+            }
+            MathLive.MathfieldElement.locale = "int"
+            MathLive.MathfieldElement.plonkSound = null
+            MathLive.MathfieldElement.keypressSound = null
+            this.mathField = new MathLive.MathfieldElement({
+                mathVirtualKeyboardPolicy: "manual"
+            })
+            this.mathField.value = this.equation
+            this.mathliveDOM.appendChild(this.mathField)
+
+            this.mathField.addEventListener("focusout", () =>
+                this.showPlaceHolder()
+            )
+            this.mathField.addEventListener("focus", () =>
+                this.hidePlaceHolder()
+            )
+            this.mathField.addEventListener("input", () => {
+                this.equation = this.mathField.getValue()
+                this.showHideNonMathElements()
+            })
+            this.mathField.select()
+            this.mathField.value = this.equation
+
+            this.showHideNonMathElements()
+            this.dialog.dialogEl
+                .querySelector("#insert-figure-image")
+                .addEventListener("click", () => this.selectImage())
+        })
+    }
+
+    showPlaceHolder() {
+        if (
+            !this.mathField.getValue().length &&
+            !this.mathliveDOM.querySelector(".fw-placeholder")
+        ) {
+            this.mathliveDOM.insertAdjacentHTML(
+                "beforeend",
+                `<span class="fw-placeholder" >${gettext("Type formula")}</span>`
+            )
+        }
+    }
+
+    hidePlaceHolder() {
+        const placeHolder = this.mathliveDOM.querySelector(".fw-placeholder")
+        if (placeHolder) {
+            this.mathliveDOM.removeChild(placeHolder)
+        }
+    }
+
+    showHideNonMathElements() {
+        if (this.equation.length) {
+            this.nonMathElements.forEach(el => (el.style.display = "none"))
+        } else {
+            this.nonMathElements.forEach(el => (el.style.display = ""))
+        }
+    }
+
+    selectImage() {
+        const imageSelection = new ImageSelectionDialog(
+            this.imageDB,
+            this.userImageDB,
+            this.imgId,
+            this.editor
+        )
+        imageSelection.init().then(({id, db}) => {
+            if (id) {
+                this.imgId = id
+                this.imgDb = db
+                // We take a copy of the object in case of the image coming from the user db in order
+                // not to overwrite the copyright info from the user's image db.
+                this.copyright =
+                    db === "document"
+                        ? this.imageDB.db[this.imgId].copyright
+                        : JSON.parse(
+                              JSON.stringify(
+                                  this.userImageDB.db[this.imgId].copyright
+                              )
+                          )
+                this.layoutImagePreview()
+            } else {
+                this.imgId = false
+                this.imgDb = false
+                this.layoutMathEditor()
+            }
+        })
+    }
+
+    async layoutImagePreview() {
+        if (this.imgId) {
+            if (this.mathField) {
+                this.mathField = false
+            }
+            const db =
+                this.imgDb === "document"
+                    ? this.imageDB.db
+                    : this.userImageDB.db
+
+            const imageEntry = db[this.imgId]
+            let imgSrc = imageEntry?.image || ""
+
+            if (imageEntry?.file_type === "application/octet-stream") {
+                const key = this.editor.e2ee?.key
+                if (key) {
+                    try {
+                        imgSrc = await E2EEEncryptor.decryptImageToUrl(
+                            imageEntry.image,
+                            key,
+                            imageEntry.original_file_type || "image/png"
+                        )
+                    } catch (_e) {
+                        imgSrc = staticUrl("img/error.avif")
+                    }
+                } else {
+                    imgSrc = staticUrl("img/error.avif")
+                }
+            }
+
+            this.dialog.dialogEl.querySelector(
+                ".inner-figure-preview"
+            ).innerHTML = `<img src="${imgSrc}" style="max-width: 400px;max-height:220px">
+                <span class="dot-menu-icon"><i class="fa-solid fa-ellipsis-v"></i></span>`
+
+            this.dialog.dialogEl
+                .querySelector(".dot-menu-icon")
+                .addEventListener("click", event => {
+                    const contentMenu = new ContentMenu({
+                        menu: this.editor.menu.imageMenuModel,
+                        page: this,
+                        menuPos: {X: event.pageX, Y: event.pageY}
+                    })
+                    contentMenu.open()
+                })
+        }
+    }
+
+    async submitForm() {
+        if (new RegExp(/^\s*$/).test(this.equation) && !this.imgId) {
+            // The math input is empty. Delete a math node if it exist. Then close the dialog.
+            if (this.insideFigure) {
+                const tr = this.editor.currentView.state.tr.deleteSelection()
+                this.editor.currentView.dispatch(tr)
+            }
+            this.dialog.close()
+            return false
+        }
+
+        if (this.imgDb === "user") {
+            if (this.editor.e2ee?.encrypted) {
+                // For E2EE: encrypt the user image and upload it to the document
+                const userImage = this.userImageDB.db[this.imgId]
+                try {
+                    const response = await fetch(userImage.image)
+                    const blob = await response.blob()
+                    const file = new File(
+                        [blob],
+                        userImage.image.split("/").pop(),
+                        {type: blob.type}
+                    )
+                    const encryptedFile = await E2EEEncryptor.encryptImage(
+                        file,
+                        this.editor.e2ee.key
+                    )
+                    const encryptedCopyright =
+                        await E2EEEncryptor.encryptObject(
+                            this.copyright,
+                            this.editor.e2ee.key
+                        )
+                    const newId = await this.imageDB.saveImage({
+                        image: encryptedFile,
+                        title: userImage.title,
+                        copyright: encryptedCopyright,
+                        checksum: userImage.checksum,
+                        original_file_type: blob.type,
+                        cats: []
+                    })
+                    this.imgId = newId
+                    this.imgDb = "document"
+                } catch (error) {
+                    console.error("E2EE: Failed to encrypt user image", error)
+                    addAlert("error", gettext("Could not encrypt image"))
+                    return false
+                }
+            } else {
+                // Add image to document db.
+                const imageEntry = JSON.parse(
+                    JSON.stringify(this.userImageDB.db[this.imgId])
+                )
+                imageEntry.copyright = this.copyright
+                this.imageDB.setImage(this.imgId, imageEntry)
+                this.imgDb = "document"
+            }
+        } else if (
+            this.imgId &&
+            this.imageDB.db[this.imgId] &&
+            !deepEqual(this.copyright, this.imageDB.db[this.imgId].copyright)
+        ) {
+            const imageEntry = JSON.parse(
+                JSON.stringify(this.imageDB.db[this.imgId])
+            )
+            imageEntry.copyright = this.copyright
+            this.imageDB.setImage(this.imgId, imageEntry)
+        }
+
+        if (
+            this.insideFigure &&
+            this.equation ===
+                (this.node.content.content.find(
+                    node => node.type.name === "figure_equation"
+                )?.attrs.equation || "") &&
+            this.imgId ===
+                (this.node.content.content.find(
+                    node => node.type.name === "image"
+                )?.attrs.image || false) &&
+            this.imgDb === "document" &&
+            this.caption === this.node.attrs.caption &&
+            this.category === this.node.attrs.category &&
+            this.aligned === this.node.attrs.aligned &&
+            this.width === this.node.attrs.width
+        ) {
+            // The figure has not been changed, just close the dialog
+            this.dialog.close()
+            return false
+        }
+        const content = []
+        if (this.imgId) {
+            content.push(
+                this.editor.currentView.state.schema.nodes["image"].create({
+                    image: this.imgId
+                })
+            )
+        } else {
+            content.push(
+                this.editor.currentView.state.schema.nodes[
+                    "figure_equation"
+                ].create({
+                    equation: this.equation
+                })
+            )
+        }
+        const captionNode =
+            this.node.content?.content.find(
+                node => node.type.name === "figure_caption"
+            ) ||
+            this.editor.currentView.state.schema.nodes[
+                "figure_caption"
+            ].create()
+        if (this.category === "table") {
+            content.unshift(captionNode)
+        } else {
+            content.push(captionNode)
+        }
+        const tr = this.editor.currentView.state.tr.replaceSelectionWith(
+            this.editor.currentView.state.schema.nodes["figure"].createAndFill(
+                {
+                    aligned: this.aligned,
+                    width: this.width,
+                    category: this.category,
+                    caption: this.caption,
+                    id: this.insideFigure
+                        ? this.node.attrs.id
+                        : randomFigureId()
+                },
+                content
+            ),
+            false
+        )
+        this.editor.currentView.dispatch(tr)
+
+        this.dialog.close()
+    }
+
+    findFigure(state) {
+        if (
+            state.selection.node &&
+            state.selection.node.type.name == "figure"
+        ) {
+            return state.selection.node
+        }
+        const $head = state.selection.$head
+        for (let d = $head.depth; d > 0; d--) {
+            if ($head.node(d).type.name == "figure") {
+                return $head.node(d)
+            }
+        }
+        return false
+    }
+
+    init() {
+        this.node = this.findFigure(this.editor.currentView.state)
+
+        if (this.node?.attrs?.track?.find(track => track.type === "deletion")) {
+            // The figure is marked as deleted so we don't allow editing it.
+            return true
+        }
+
+        const buttons = []
+
+        if (this.node?.type && this.node?.type.name === "figure") {
+            this.insideFigure = true
+            this.submitMessage = gettext("Update")
+            this.equation =
+                this.node.content.content.find(
+                    node => node.type.name === "figure_equation"
+                )?.attrs.equation || ""
+            this.imgId =
+                this.node.content.content.find(
+                    node => node.type.name === "image"
+                )?.attrs.image || false
+            this.imgDb = "document"
+            this.category = this.node.attrs.category
+            this.caption = this.node.attrs.caption
+            this.aligned = this.node.attrs.aligned
+            this.width = this.node.attrs.width
+            buttons.push({
+                text: gettext("Remove"),
+                classes: "fw-orange",
+                click: () => {
+                    const tr =
+                        this.editor.currentView.state.tr.deleteSelection()
+                    this.editor.currentView.dispatch(tr)
+                    this.dialog.close()
+                }
+            })
+        }
+        // Image positioning both at the time of updating and inserting for the first time
+        buttons.push({
+            // Update
+            text: this.submitMessage,
+            classes: "fw-dark",
+            click: () => this.submitForm()
+        })
+
+        buttons.push({
+            type: "cancel"
+        })
+
+        this.dialog = new Dialog({
+            id: "figure-dialog",
+            title: gettext("Enter latex math or insert an image"),
+            body: configureFigureTemplate({
+                language: this.editor.view.state.doc.attrs.language
+            }),
+            buttons,
+            beforeClose: () => {
+                if (this.mathField) {
+                    this.mathField = false
+                }
+                if (window.mathVirtualKeyboard) {
+                    window.mathVirtualKeyboard.hide()
+                }
+            },
+            onClose: () => this.editor.currentView.focus(),
+            restoreActiveElement: false
+        })
+
+        this.dialog.open()
+
+        const alignmentSelector = dropdownSelect(
+            this.dialog.dialogEl.querySelector(".figure-alignment"),
+            {
+                onChange: newValue => {
+                    this.aligned = newValue
+                },
+                width: "80%",
+                value: this.aligned
+            }
+        )
+
+        if (this.width === "100") {
+            alignmentSelector.setValue("center")
+            alignmentSelector.disable()
+            this.aligned = "center"
+        }
+
+        const figureWidthDOM =
+            this.dialog.dialogEl.querySelector(".figure-width")
+        figureWidthDOM.style.width = "80%"
+        figureWidthDOM.firstElementChild.innerText = `${this.width} %`
+        figureWidthDOM.addEventListener("click", event => {
+            const contentMenu = new ContentMenu({
+                menu: this.editor.menu.figureWidthMenuModel,
+                page: this,
+                menuPos: {X: event.pageX, Y: event.pageY},
+                onClose: () => {
+                    if (this.width == "100") {
+                        alignmentSelector.setValue("center")
+                        alignmentSelector.disable()
+                        this.aligned = "center"
+                    } else {
+                        alignmentSelector.enable()
+                    }
+                }
+            })
+            contentMenu.open()
+        })
+
+        dropdownSelect(this.dialog.dialogEl.querySelector(".figure-category"), {
+            onChange: newValue => {
+                this.category = newValue
+            },
+            width: "80%",
+            value: this.category
+        })
+
+        dropdownSelect(this.dialog.dialogEl.querySelector(".figure-caption"), {
+            onChange: newValue => {
+                this.caption = newValue === "true"
+            },
+            width: "80%",
+            value: String(this.caption)
+        })
+
+        if (this.imgId && this.imageDB.db[this.imgId]) {
+            this.copyright = this.imageDB.db[this.imgId].copyright
+            this.layoutImagePreview()
+        } else {
+            this.layoutMathEditor()
+        }
+    }
+}

package/src/dialogs/index.js

@@ -0,0 +1,10 @@
+export {ContributorDialog} from "./contributor"
+export {CitationDialog} from "./citation"
+export {FigureDialog} from "./figure"
+export {MathDialog} from "./math"
+export {LanguageDialog} from "./language"
+export {LinkDialog} from "./link"
+export {TableDialog, TableConfigurationDialog} from "./table"
+export {RevisionDialog} from "./revision"
+export {OrderedListStartDialog} from "./ordered_list"
+export {CodeBlockDialog} from "./code_block"