@fiduswriter/editor 0.1.0

package/src/dialogs/language.js

@@ -0,0 +1,58 @@
+import {Dialog} from "fwtoolkit"
+
+import {LANGUAGES} from "@fiduswriter/document/schema/const"
+import {languageTemplate} from "./templates"
+
+export class LanguageDialog {
+    constructor(editor, language) {
+        this.editor = editor
+        this.language = language
+        this.dialog = false
+    }
+
+    init() {
+        const buttons = []
+        buttons.push({
+            text: gettext("Change"),
+            classes: "fw-dark",
+            click: () => {
+                const language =
+                    this.dialog.dialogEl.querySelector("select").value
+                this.dialog.close()
+
+                if (language === this.language) {
+                    // No change.
+                    return
+                }
+                this.editor.view.dispatch(
+                    this.editor.view.state.tr
+                        .setDocAttribute("language", language)
+                        .setMeta("settings", true)
+                )
+                return
+            }
+        })
+
+        buttons.push({
+            type: "cancel"
+        })
+
+        this.dialog = new Dialog({
+            width: 300,
+            height: 180,
+            id: "select-document-language",
+            title: gettext("Change language of the document"),
+            body: languageTemplate({
+                currentLanguage: this.language,
+                allowedLanguages: LANGUAGES.filter(lang =>
+                    this.editor.view.state.doc.attrs.languages.includes(lang[0])
+                )
+            }),
+            buttons,
+            onClose: () => this.editor.currentView.focus(),
+            restoreActiveElement: false
+        })
+
+        this.dialog.open()
+    }
+}

package/src/dialogs/link.js

@@ -0,0 +1,358 @@
+import {TextSelection} from "prosemirror-state"
+
+import {linkDialogTemplate} from "./templates"
+
+import {Dialog} from "fwtoolkit"
+import {getInternalTargets} from "../state_plugins"
+
+export class LinkDialog {
+    constructor(editor) {
+        this.editor = editor
+        this.target = false // cross reference or internal link
+        this.linkType = "external"
+        this.defaultLink = "https://"
+        this.title = ""
+        this.submitButtonText = gettext("Insert")
+        this.dialog = false
+        this.internalTargets = []
+    }
+
+    init() {
+        this.checkCrossReference()
+        if (!this.target) {
+            this.checkLink()
+        }
+        this.internalTargets = getInternalTargets(
+            this.editor.view.state,
+            this.editor.view.state.doc.attrs.language,
+            "main"
+        ).concat(
+            getInternalTargets(
+                this.editor.mod.footnotes.fnEditor.view.state,
+                this.editor.view.state.doc.attrs.language,
+                "foot"
+            )
+        )
+        this.createDialog()
+    }
+
+    // Check if there is an existing link at the selection. If this is the case
+    // use its values in dialog.
+    checkLink() {
+        const state = this.editor.currentView.state,
+            from = state.selection.from,
+            linkMark = state.selection.$from
+                .marks()
+                .find(mark => mark.type.name === "link")
+        if (linkMark) {
+            if (linkMark.attrs.href[0] === "#") {
+                this.linkType = "internal"
+                this.target = linkMark.attrs.href.slice(1)
+            } else {
+                this.linkType = "external"
+                this.target = linkMark.attrs.href
+                this.title = linkMark.attrs.title ? linkMark.attrs.title : ""
+            }
+            this.extendSelectionToMark(from, linkMark)
+            this.submitButtonText = gettext("Update")
+        }
+    }
+
+    // Check if the selection spans over exactly one cross reference node. If so, use it.
+    checkCrossReference() {
+        if (
+            this.editor.currentView.state.selection.node?.type.name ===
+            "cross_reference"
+        ) {
+            this.submitButtonText = gettext("Update")
+            this.target = this.editor.currentView.state.selection.node.attrs.id
+            this.linkType = "cross_reference"
+        }
+    }
+
+    // To check whether links, cross references or both can be added in current position.
+    checkAllowedContent() {
+        if (this.editor.currentView === this.editor.view) {
+            const settings =
+                this.editor.view.state.selection.$anchor.node(1).attrs
+            return {
+                link: settings.marks.includes("link"),
+                cross_reference: settings.elements.includes("cross_reference")
+            }
+        } else {
+            const settings = this.editor.view.state.doc.attrs
+            return {
+                link: settings.footnote_marks.includes("link"),
+                cross_reference:
+                    settings.footnote_elements.includes("cross_reference")
+            }
+        }
+    }
+
+    // Find the start and end of the link currently selected.
+    extendSelectionToMark(pos, mark) {
+        const view = this.editor.currentView,
+            state = view.state,
+            $pos = state.doc.resolve(pos)
+        let startIndex = $pos.index(),
+            endIndex = $pos.indexAfter()
+
+        while (
+            startIndex > 0 &&
+            mark.isInSet($pos.parent.child(startIndex - 1).marks)
+        ) {
+            startIndex--
+        }
+        while (
+            endIndex < $pos.parent.childCount &&
+            mark.isInSet($pos.parent.child(endIndex).marks)
+        ) {
+            endIndex++
+        }
+        let startPos = $pos.start(),
+            endPos = startPos
+
+        for (let i = 0; i < endIndex; i++) {
+            const size = $pos.parent.child(i).nodeSize
+            if (i < startIndex) {
+                startPos += size
+            }
+            endPos += size
+        }
+        view.dispatch(
+            state.tr.setSelection(
+                TextSelection.create(state.doc, startPos, endPos)
+            )
+        )
+    }
+
+    createDialog() {
+        const buttons = []
+        buttons.push({
+            text: this.submitButtonText,
+            classes: "fw-dark",
+            click: () => {
+                const linkTypeEl = this.dialog.dialogEl.querySelector(
+                        "input[name=link-type]:checked"
+                    ),
+                    linkType = linkTypeEl ? linkTypeEl.value : "external"
+                let href, title, target, change
+
+                switch (linkType) {
+                    case "internal": {
+                        target = this.dialog.dialogEl.querySelector(
+                            "select.internal-link-selector"
+                        ).value
+                        href = `#${target}`
+                        title = this.internalTargets.find(
+                            iTarget => iTarget.id === target
+                        ).text
+                        change =
+                            target &&
+                            (this.linkType !== "internal" ||
+                                this.target !== target)
+                        break
+                    }
+                    case "external": {
+                        const linkEl =
+                            this.dialog.dialogEl.querySelector("input.link")
+                        if (
+                            !new RegExp(/^\s*$/).test(linkEl.value) &&
+                            linkEl.value !== this.defaultLink
+                        ) {
+                            href = linkEl.value
+                        }
+                        title =
+                            this.dialog.dialogEl.querySelector(
+                                "input.link-title"
+                            ).value
+                        if (new RegExp(/^\s*$/).test(title)) {
+                            // The link title is empty. Make it the same as the link itself.
+                            title = href
+                        }
+                        change =
+                            href &&
+                            (this.linkType !== "external" ||
+                                this.target !== href ||
+                                this.title !== title)
+                        break
+                    }
+                    case "cross_reference": {
+                        target = this.dialog.dialogEl.querySelector(
+                            "select.cross-reference-selector"
+                        ).value
+                        title = this.internalTargets.find(
+                            iTarget => iTarget.id === target
+                        ).text
+                        change =
+                            target &&
+                            (this.linkType !== "cross_reference" ||
+                                this.target !== target)
+                        break
+                    }
+                }
+                this.dialog.close()
+
+                if (!change) {
+                    // The link input is empty or hasn't been changed from the default value.
+                    // Just close the dialog.
+                    this.editor.currentView.focus()
+                    return
+                }
+
+                const view = this.editor.currentView,
+                    posFrom = view.state.selection.from,
+                    tr = view.state.tr
+                let posTo = view.state.selection.to
+
+                if (linkType === "cross_reference") {
+                    const node = view.state.schema.nodes.cross_reference.create(
+                        {
+                            id: target,
+                            title
+                        }
+                    )
+                    tr.replaceSelectionWith(node)
+                } else {
+                    // There is an empty selection. We insert the link title into the editor
+                    // and then add the link to that.
+                    if (posFrom === posTo) {
+                        tr.insertText(title, posFrom, posTo)
+                        posTo = tr.mapping.map(posFrom, 1)
+                    }
+                    const markType = view.state.schema.marks.link.create({
+                        href,
+                        title
+                    })
+                    tr.addMark(posFrom, posTo, markType)
+                }
+                view.dispatch(tr)
+                view.focus()
+                return
+            }
+        })
+
+        buttons.push({
+            type: "cancel"
+        })
+
+        const initialFocus =
+            this.linkType === "cross_reference"
+                ? "select.cross-reference-selector"
+                : this.linkType === "internal"
+                  ? "select.internal-link-selector"
+                  : "input.link-title"
+
+        this.dialog = new Dialog({
+            id: "edit-link",
+            title: gettext("Link"),
+            body: linkDialogTemplate({
+                target: this.target,
+                allowedContent: this.checkAllowedContent(),
+                title: this.title,
+                linkType: this.linkType,
+                defaultLink: this.defaultLink,
+                internalTargets: this.internalTargets
+            }),
+            buttons,
+            width: 836,
+            height: 360,
+            onClose: () => this.editor.currentView.focus(),
+            restoreActiveElement: false,
+            initialFocus
+        })
+
+        this.dialog.open()
+
+        if (this.internalTargets.length) {
+            const externalEls = this.dialog.dialogEl.querySelectorAll(
+                    "input.link, input.link-title"
+                ),
+                internalEls = this.dialog.dialogEl.querySelectorAll(
+                    "select.internal-link-selector"
+                ),
+                crossReferenceEls = this.dialog.dialogEl.querySelectorAll(
+                    "select.cross-reference-selector"
+                ),
+                externalSwitchers = this.dialog.dialogEl.querySelectorAll(
+                    "input.link, input.link-title, label.link-external-label, input.link-external-check"
+                ),
+                internalSwitchers = this.dialog.dialogEl.querySelectorAll(
+                    "select.internal-link-selector, label.link-internal-label, input.link-internal-check"
+                ),
+                crossReferenceSwitchers = this.dialog.dialogEl.querySelectorAll(
+                    "select.cross-reference-selector, label.cross-reference-label, input.cross-reference-check"
+                ),
+                radioInternal = this.dialog.dialogEl.querySelector(
+                    "input.link-internal-check"
+                ),
+                radioExternal = this.dialog.dialogEl.querySelector(
+                    "input.link-external-check"
+                ),
+                radioCrossReference = this.dialog.dialogEl.querySelector(
+                    "input.cross-reference-check"
+                )
+
+            switch (this.linkType) {
+                case "internal":
+                    externalEls.forEach(el => el.classList.add("fw-disabled"))
+                    crossReferenceEls.forEach(el =>
+                        el.classList.add("fw-disabled")
+                    )
+                    radioInternal.checked = true
+                    break
+                case "external":
+                    internalEls.forEach(el => el.classList.add("fw-disabled"))
+                    crossReferenceEls.forEach(el =>
+                        el.classList.add("fw-disabled")
+                    )
+                    radioExternal.checked = true
+                    break
+                case "cross_reference":
+                    internalEls.forEach(el => el.classList.add("fw-disabled"))
+                    externalEls.forEach(el => el.classList.add("fw-disabled"))
+                    radioCrossReference.checked = true
+                    break
+                default:
+                    break
+            }
+
+            internalSwitchers.forEach(el =>
+                el.addEventListener("click", () => {
+                    externalEls.forEach(el => el.classList.add("fw-disabled"))
+                    internalEls.forEach(el =>
+                        el.classList.remove("fw-disabled")
+                    )
+                    crossReferenceEls.forEach(el =>
+                        el.classList.add("fw-disabled")
+                    )
+                    radioInternal.checked = true
+                })
+            )
+
+            externalSwitchers.forEach(el =>
+                el.addEventListener("click", () => {
+                    internalEls.forEach(el => el.classList.add("fw-disabled"))
+                    externalEls.forEach(el =>
+                        el.classList.remove("fw-disabled")
+                    )
+                    crossReferenceEls.forEach(el =>
+                        el.classList.add("fw-disabled")
+                    )
+                    radioExternal.checked = true
+                })
+            )
+
+            crossReferenceSwitchers.forEach(el =>
+                el.addEventListener("click", () => {
+                    internalEls.forEach(el => el.classList.add("fw-disabled"))
+                    externalEls.forEach(el => el.classList.add("fw-disabled"))
+                    crossReferenceEls.forEach(el =>
+                        el.classList.remove("fw-disabled")
+                    )
+                    radioCrossReference.checked = true
+                })
+            )
+        }
+    }
+}

package/src/dialogs/math.js

@@ -0,0 +1,148 @@
+import {Dialog} from "fwtoolkit"
+import {sub, subChars, sup, supChars} from "./subsup"
+import {mathDialogTemplate} from "./templates"
+
+/**
+ * Class to work with formula dialog
+ */
+export class MathDialog {
+    constructor(editor) {
+        this.editor = editor
+        this.node = this.editor.currentView.state.selection.node
+        this.equationSelected =
+            this.node && this.node.attrs && this.node.attrs.equation
+                ? true
+                : false
+        this.equation = this.equationSelected ? this.node.attrs.equation : ""
+    }
+
+    init() {
+        //get selected node
+
+        //initialize dialog and open it
+        this.dialog = new Dialog({
+            body: mathDialogTemplate(),
+            height: 150,
+            buttons: [
+                {
+                    text: this.equationSelected
+                        ? gettext("Update")
+                        : gettext("Insert"),
+                    classes: "fw-dark insert-math",
+                    click: () => {
+                        const view = this.editor.currentView,
+                            state = view.state
+
+                        this.equation = this.getLatex()
+
+                        if (new RegExp(/^\s*$/).test(this.equation)) {
+                            // The math input is empty. Delete a math node if it exist. Then close the dialog.
+                            if (this.equationSelected) {
+                                view.dispatch(state.tr.deleteSelection())
+                            }
+                            this.dialog.close()
+                            return
+                        } else if (
+                            new RegExp(
+                                `^\\^({[${supChars}]*}|[${supChars}]?)$`
+                            ).test(this.equation)
+                        ) {
+                            // The math input is pure superscript and
+                            // can be converted to ordinary characters.
+                            view.dispatch(
+                                state.tr.insertText(sup(this.equation.slice(1)))
+                            )
+                            this.dialog.close()
+                            return
+                        } else if (
+                            new RegExp(
+                                `^\\_({[${subChars}]*}|[${subChars}]?)$`
+                            ).test(this.equation)
+                        ) {
+                            // The math input is pure subscript and
+                            // can be converted to ordinary characters.
+                            view.dispatch(
+                                state.tr.insertText(sub(this.equation.slice(1)))
+                            )
+                            this.dialog.close()
+                            return
+                        } else if (
+                            this.equationSelected &&
+                            this.equation === this.node.attrs.equation
+                        ) {
+                            // Equation selected, but has not changed from last time.
+                            this.dialog.close()
+                            return
+                        }
+                        const nodeType = state.schema.nodes["equation"]
+                        view.dispatch(
+                            state.tr.replaceSelectionWith(
+                                nodeType.createAndFill({
+                                    equation: this.equation
+                                })
+                            )
+                        )
+                        this.dialog.close()
+                    }
+                },
+                {
+                    type: "cancel"
+                }
+            ],
+            title: gettext("Mathematical formula"),
+            beforeClose: () => {
+                if (this.mathField) {
+                    this.mathField = false
+                }
+                if (window.mathVirtualKeyboard) {
+                    window.mathVirtualKeyboard.hide()
+                }
+            },
+            classes: "math",
+            onClose: () => this.editor.currentView.focus(),
+            restoreActiveElement: false
+        })
+        this.dialog.open()
+
+        this.mathliveDOM = this.dialog.dialogEl.querySelector(".math-field")
+
+        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("focusin", () => window.mathVirtualKeyboard.show())
+            //this.mathField.addEventListener("focusout", () => window.mathVirtualKeyboard.hide())
+            this.mathField.select()
+        })
+    }
+
+    /**
+     * Get latex representation as text
+     * @returns {string} latex formula
+     */
+    getLatex() {
+        return this.mathField.getValue()
+    }
+}

package/src/dialogs/ordered_list.js

@@ -0,0 +1,84 @@
+import {Dialog} from "fwtoolkit"
+import {orderedListStartTemplate} from "./templates"
+
+export class OrderedListStartDialog {
+    constructor(editor) {
+        this.editor = editor
+        this.dialogEl = false
+        this.order = 1
+    }
+
+    init() {
+        const {orderedList} = this.findOrderedList(
+            this.editor.currentView.state
+        )
+        if (orderedList) {
+            this.order = orderedList.attrs.order
+        }
+        this.insertDialog()
+    }
+
+    findOrderedList(state) {
+        const $head = state.selection.$head
+        for (let d = $head.depth; d > 0; d--) {
+            if ($head.node(d).type.name == "ordered_list") {
+                return {
+                    orderedList: $head.node(d),
+                    orderedListPos: $head.before(d)
+                }
+            }
+        }
+        return {orderedList: false, orderedListPos: false}
+    }
+
+    submitForm() {
+        const {orderedList, orderedListPos} = this.findOrderedList(
+            this.editor.currentView.state
+        )
+        if (!orderedList) {
+            return
+        }
+        const attrs = Object.assign({}, orderedList.attrs, {
+            order: this.order
+        })
+        this.editor.currentView.dispatch(
+            this.editor.currentView.state.tr.setNodeMarkup(
+                orderedListPos,
+                false,
+                attrs
+            )
+        )
+    }
+
+    insertDialog() {
+        const buttons = []
+        buttons.push({
+            text: gettext("Update"),
+            classes: "fw-dark",
+            click: () => {
+                this.submitForm()
+                this.dialog.close()
+            }
+        })
+        buttons.push({
+            type: "cancel"
+        })
+
+        this.dialog = new Dialog({
+            title: gettext("Set list start number"),
+            body: orderedListStartTemplate({order: this.order}),
+            width: 300,
+            height: 100,
+            buttons,
+            onClose: () => this.editor.currentView.focus(),
+            restoreActiveElement: false
+        })
+
+        this.dialog.open()
+
+        const listStartInput = document.querySelector("input.list-start")
+        listStartInput.addEventListener("change", _event => {
+            this.order = Number.parseInt(listStartInput.value) || 1
+        })
+    }
+}

package/src/dialogs/revision.js

@@ -0,0 +1,43 @@
+import {Dialog} from "fwtoolkit"
+import {revisionDialogTemplate} from "./templates"
+
+export class RevisionDialog {
+    constructor(dir) {
+        this.dir = dir
+        this.dialog = false
+    }
+
+    init() {
+        const buttons = []
+        const dialogDonePromise = new Promise(resolve => {
+            buttons.push({
+                text: gettext("Save"),
+                classes: "fw-dark",
+                click: () => {
+                    const note =
+                        this.dialog.dialogEl.querySelector(
+                            ".revision-note"
+                        ).value
+                    this.dialog.close()
+                    return resolve(note)
+                }
+            })
+
+            buttons.push({
+                type: "cancel"
+            })
+        })
+
+        this.dialog = new Dialog({
+            title: gettext("Revision description"),
+            body: revisionDialogTemplate({dir: this.dir}),
+            height: 100,
+            width: 300,
+            buttons,
+            restoreActiveElement: false
+        })
+        this.dialog.open()
+
+        return dialogDonePromise
+    }
+}