@fiduswriter/editor 0.1.0

package/src/state_plugins/settings.js

@@ -0,0 +1,223 @@
+import {Plugin, PluginKey} from "prosemirror-state"
+
+import {LANGUAGES} from "@fiduswriter/document/schema/const"
+import {CATS} from "@fiduswriter/document/schema/i18n"
+import {setDocTitle} from "fwtoolkit"
+
+const key = new PluginKey("settings")
+
+export const settingsPlugin = options => {
+    const fixSettings = settings => {
+        const fixedSettings = Object.assign({}, settings)
+        let changed = false
+
+        Object.keys(settings).forEach(key => {
+            const value = settings[key]
+            switch (key) {
+                case "documentstyle":
+                    if (
+                        !options.editor.mod.documentTemplate.documentStyles.find(
+                            d => d.slug === value
+                        ) &&
+                        options.editor.mod.documentTemplate.documentStyles
+                            .length
+                    ) {
+                        fixedSettings[key] =
+                            options.editor.mod.documentTemplate.documentStyles[0].slug
+                        changed = true
+                    }
+                    break
+                case "citationstyle":
+                    if (
+                        !settings.citationstyles.includes(value) &&
+                        settings.citationstyles.length
+                    ) {
+                        fixedSettings[key] = settings.citationstyles[0]
+                        changed = true
+                    }
+                    break
+            }
+        })
+        if (changed) {
+            return fixedSettings
+        } else {
+            return false
+        }
+    }
+
+    const updateSettings = (newSettings, oldSettings) => {
+        let settingsValid = true
+        Object.keys(newSettings).forEach(key => {
+            const newValue = newSettings[key]
+            if (oldSettings[key] !== newValue) {
+                switch (key) {
+                    case "documentstyle":
+                        if (newValue.length) {
+                            updateDocStyleCSS(newValue)
+                        } else {
+                            settingsValid = false
+                        }
+                        break
+                    case "citationstyle":
+                        if (newValue.length) {
+                            options.editor.mod.citations.resetCitations()
+                        } else {
+                            settingsValid = false
+                        }
+                        break
+                    case "language":
+                        if (newValue.length) {
+                            const lang = LANGUAGES.find(
+                                lang => lang[0] === newValue
+                            )
+                            document
+                                .querySelectorAll(".ProseMirror")
+                                .forEach(el => (el.dir = lang[2]))
+                            options.editor.docInfo.dir = lang[2]
+                            updateLanguageCSS(newValue)
+                        } else {
+                            settingsValid = false
+                        }
+                        break
+                }
+            }
+        })
+        return settingsValid
+    }
+
+    /** Update the stylesheet used for the docStyle
+     */
+    const updateDocStyleCSS = docStyleId => {
+        const docStyle =
+            options.editor.mod.documentTemplate.documentStyles.find(
+                doc_style => doc_style.slug === docStyleId
+            ) ||
+            (options.editor.mod.documentTemplate.documentStyles.length
+                ? options.editor.mod.documentTemplate.documentStyles[0]
+                : {contents: "", documentstylefile_set: []})
+
+        let docStyleCSS = docStyle.contents
+        docStyle.documentstylefile_set.forEach(
+            ([url, filename]) =>
+                (docStyleCSS = docStyleCSS.replace(
+                    new RegExp(filename, "g"),
+                    url
+                ))
+        )
+
+        let docStyleEl = document.getElementById("document-style")
+
+        if (!docStyleEl) {
+            docStyleEl = document.createElement("style")
+            docStyleEl.id = "document-style"
+            document.body.appendChild(docStyleEl)
+        }
+
+        docStyleEl.innerHTML = docStyleCSS
+
+        // TODO: Find a way that is more reliable than a timeout to check
+        // for font loading.
+        window.setTimeout(() => {
+            options.editor.mod.marginboxes.updateDOM()
+            options.editor.mod.footnotes.layout.updateDOM()
+        }, 250)
+    }
+
+    const updateLanguageCSS = language => {
+        let langStyleEl = document.getElementById("language-style")
+        if (!langStyleEl) {
+            langStyleEl = document.createElement("style")
+            langStyleEl.id = "language-style"
+            document.body.appendChild(langStyleEl)
+        }
+
+        langStyleEl.innerHTML = `
+        /* Numbering in editor */
+
+        figure[data-category='figure'] figcaption::before {
+            counter-increment: cat-figure;
+            content: '${CATS["figure"][language]} ' counter(cat-figure);
+        }
+
+        #footnote-box-container figure[data-category='figure'] figcaption::before {
+            content: '${CATS["figure"][language]} ' counter(cat-figure) 'A';
+        }
+
+        figure[data-category='equation'] figcaption::before {
+            counter-increment: cat-equation;
+            content: '${CATS["equation"][language]} ' counter(cat-equation);
+        }
+
+        #footnote-box-container figure[data-category='euqation'] figcaption::before {
+            content: '${CATS["equation"][language]} ' counter(cat-equation) 'A';
+        }
+
+        figure[data-category='photo'] figcaption::before {
+            counter-increment: cat-photo;
+            content: '${CATS["photo"][language]} ' counter(cat-photo);
+        }
+
+        #footnote-box-container figure[data-category='photo'] figcaption::before {
+            content: '${CATS["photo"][language]} ' counter(cat-photo) 'A';
+        }
+
+        figure[data-category='table'] figcaption::before,
+        table[data-category='table'] caption::before {
+            counter-increment: cat-table;
+            content: '${CATS["table"][language]} ' counter(cat-table);
+        }
+
+        #footnote-box-container figure[data-category='table'] figcaption::before ,
+        #footnote-box-container table[data-category='table'] caption::before {
+            content: '${CATS["table"][language]} ' counter(cat-table) 'A';
+        }`
+    }
+
+    return new Plugin({
+        key,
+        appendTransaction(trs, _oldState, newState) {
+            // Ensure that there are always settings set.
+            if (trs.every(tr => tr.getMeta("remote") || tr.from > 0)) {
+                // All transactions are remote. Give up.
+                return false
+            }
+            const lastTr = trs[trs.length - 1]
+            const attrs = lastTr.doc.attrs
+            const fixedSettings = fixSettings(attrs)
+
+            if (!fixedSettings) {
+                return false
+            }
+
+            const tr = newState.tr
+            Object.entries(fixedSettings).forEach(([key, value]) => {
+                tr.setDocAttribute(key, value)
+            })
+            tr.setMeta("settings", true)
+
+            return tr
+        },
+        view(view) {
+            if (!updateSettings(view.state.doc.attrs, {})) {
+                setTimeout(() => {
+                    const tr = view.state.tr
+                    const fixedSettings = fixSettings(view.state.doc.attrs)
+                    Object.entries(fixedSettings).forEach(([key, value]) => {
+                        tr.setDocAttribute(key, value)
+                    })
+                    tr.setMeta("settings", true)
+                    view.dispatch(tr)
+                }, 0)
+            }
+            return {
+                update: (view, prevState) => {
+                    updateSettings(view.state.doc.attrs, prevState.doc.attrs)
+                    setDocTitle(
+                        view.state.doc.firstChild.textContent,
+                        options.editor.app
+                    )
+                }
+            }
+        }
+    })
+}

package/src/state_plugins/table.js

@@ -0,0 +1,127 @@
+import {ContentMenu} from "fwtoolkit"
+import {Plugin, PluginKey, Selection} from "prosemirror-state"
+import {WRITE_ROLES} from "../"
+
+const key = new PluginKey("table")
+
+class TableView {
+    constructor(node, view, getPos, options) {
+        this.node = node
+        this.view = view
+        this.getPos = getPos
+        this.options = options
+        this.dom = document.createElement("div")
+        this.dom.classList.add(
+            `table-${node.attrs.width}`,
+            `table-${node.attrs.aligned}`,
+            "content-container"
+        )
+        this.dom.id = node.attrs.id
+        this.menuButton = document.createElement("button")
+        this.menuButton.classList.add("fw-content-menu-btn")
+        this.menuButton.innerHTML =
+            '<span class="dot-menu-icon"><i class="fa-solid fa-ellipsis-v"></i></span>'
+        this.dom.appendChild(this.menuButton)
+        const dom = document.createElement("table")
+        if (node.attrs.track.length) {
+            dom.dataset.track = JSON.stringify(node.attrs.track)
+        }
+        dom.id = node.attrs.id
+        dom.dataset.width = node.attrs.width
+        dom.dataset.aligned = node.attrs.aligned
+        dom.dataset.layout = node.attrs.layout
+        dom.class = `table-${node.attrs.width} table-${node.attrs.aligned} table-${node.attrs.layout}`
+        dom.dataset.category = node.attrs.category
+        if (!node.attrs.caption) {
+            dom.dataset.captionHidden = true
+        }
+        this.contentDOM = dom
+        this.dom.appendChild(this.contentDOM)
+    }
+
+    stopEvent(event) {
+        let stopped = false
+        if (
+            event.type === "mousedown" &&
+            event.composedPath().includes(this.menuButton)
+        ) {
+            stopped = true
+            if (!isSelectedTableClicked(this.view.state, this.getPos())) {
+                const tr = this.view.state.tr
+                const $pos = this.view.state.doc.resolve(this.getPos())
+                tr.setSelection(Selection.findFrom($pos, 1, true))
+                this.view.dispatch(tr)
+            }
+            const contentMenu = new ContentMenu({
+                menu: this.options.editor.menu.tableMenuModel,
+                width: 280,
+                page: this.options.editor,
+                menuPos: {
+                    X: Number.parseInt(event.pageX) + 20,
+                    Y: Number.parseInt(event.pageY) - 100
+                },
+                onClose: () => {
+                    this.view.focus()
+                }
+            })
+            contentMenu.open()
+        }
+        return stopped
+    }
+}
+
+class TableCaptionView {
+    constructor(node, view, getPos, options) {
+        this.node = node
+        this.view = view
+        this.getPos = getPos
+        this.options = options
+
+        this.dom = document.createElement("caption")
+        this.dom.innerHTML = '<span class="text"></span>'
+        this.contentDOM = this.dom.lastElementChild
+    }
+}
+
+const isSelectedTableClicked = (state, $pos) => {
+    const pathArr = state.selection.$head.path
+    for (let i = 0; i < pathArr.length; i++) {
+        if (
+            pathArr[i].type &&
+            pathArr[i].type.name &&
+            pathArr[i].type.name === "table" &&
+            pathArr[i - 1] === $pos
+        ) {
+            return true
+        }
+    }
+    return false
+}
+
+export const tablePlugin = options =>
+    new Plugin({
+        key,
+        state: {
+            init(_config, _state) {
+                if (
+                    WRITE_ROLES.includes(options.editor.docInfo.access_rights)
+                ) {
+                    this.spec.props.nodeViews["table"] = (node, view, getPos) =>
+                        new TableView(node, view, getPos, options)
+                }
+                this.spec.props.nodeViews["table_caption"] = (
+                    node,
+                    view,
+                    getPos
+                ) => new TableCaptionView(node, view, getPos, options)
+
+                return {}
+            },
+            apply(_tr, prev) {
+                return prev
+            }
+        },
+        props: {
+            nodeViews: {}
+        }
+    })

package/src/state_plugins/tag_input/helpers.js

@@ -0,0 +1,69 @@
+import {GapCursor} from "prosemirror-gapcursor"
+import {TextSelection} from "prosemirror-state"
+
+export const nextSelection = (state, pos, dir) => {
+    let newSelection
+    let newPos = pos
+    let $newPos
+
+    while (!newSelection) {
+        newPos += dir
+        if (newPos === 0 || newPos === state.doc.nodeSize) {
+            // Could not find any valid position
+            break
+        }
+        $newPos = state.doc.resolve(newPos)
+        if ($newPos.parent.inlineContent) {
+            newSelection = new TextSelection($newPos)
+        } else if (GapCursor.valid($newPos)) {
+            newSelection = new GapCursor($newPos)
+        }
+    }
+
+    return newSelection
+}
+
+export const submitTag = (tagInputView, view, getPos) => {
+    const tagState = tagInputView.state
+    const selectionTo = tagState.selection.to
+    const tag =
+        selectionTo > 1
+            ? tagState.doc.textBetween(1, selectionTo)
+            : tagState.doc.textContent
+    if (tag.length) {
+        try {
+            const eState = view.state,
+                startPos = getPos()
+
+            // Validate that the position is still valid
+            if (
+                startPos === null ||
+                startPos === undefined ||
+                startPos < 0 ||
+                startPos >= eState.doc.content.size
+            ) {
+                // Position is out of range, node was likely removed or moved
+                return
+            }
+
+            const nodeAtPos = view.state.doc.nodeAt(startPos)
+            if (!nodeAtPos) {
+                // Node no longer exists at this position
+                return
+            }
+
+            const pos = startPos + nodeAtPos.nodeSize - 1,
+                node = eState.schema.nodes.tag.create({tag})
+            view.dispatch(view.state.tr.insert(pos, node))
+            tagInputView.dispatch(
+                tagState.tr.delete(
+                    1,
+                    selectionTo > 1 ? selectionTo : tagState.doc.nodeSize - 3
+                )
+            )
+        } catch (_e) {
+            // If there's any error during tag submission (e.g., position became invalid),
+            // silently fail to avoid disrupting the user's workflow
+        }
+    }
+}

package/src/state_plugins/tag_input/index.js

@@ -0,0 +1,2 @@
+export {tagInputPlugin} from "./plugin"
+export {TagsPartView} from "./node_view"

package/src/state_plugins/tag_input/node_view.js

@@ -0,0 +1,85 @@
+import {GapCursor} from "prosemirror-gapcursor"
+import {TextSelection} from "prosemirror-state"
+import {addDeletedPartWidget} from "../document_template"
+
+import {shouldPreventTagInputFocus} from "./plugin"
+import {createTagEditor} from "./tag_editor"
+
+export class TagsPartView {
+    constructor(node, view, getPos) {
+        this.node = node
+        this.view = view
+        this.getPos = getPos
+        this.dom = document.createElement("div")
+        this.dom.classList.add("doc-part")
+        this.dom.classList.add(`doc-${this.node.type.name}`)
+        this.dom.classList.add(`doc-${this.node.attrs.id}`)
+        if (node.attrs.hidden) {
+            this.dom.dataset.hidden = true
+        }
+
+        this.contentDOM = document.createElement("span")
+        this.contentDOM.classList.add("tags-inner")
+        this.contentDOM.contentEditable = node.attrs.locking !== "fixed"
+        this.dom.appendChild(this.contentDOM)
+        if (node.attrs.locking !== "fixed") {
+            const [tagInputDOM, tagInputView] = createTagEditor(
+                view,
+                getPos,
+                () => this.getNode()
+            )
+            this.tagInputView = tagInputView
+            this.dom.appendChild(tagInputDOM)
+        }
+
+        if (node.attrs.deleted) {
+            addDeletedPartWidget(this.dom, view, getPos)
+        }
+    }
+
+    stopEvent(event) {
+        // Trap events for tagInputView
+        if (["click", "mousedown"].includes(event.type)) {
+            return false
+        } else if (!this.tagInputView || this.node.attrs.locking === "fixed") {
+            return false
+        } else if (event.type === "keydown" && this.tagInputView.hasFocus()) {
+            return true
+        } else {
+            return false
+        }
+    }
+
+    update(node, _decorations, _innerDecorations) {
+        this.node = node
+        if (node.attrs.hidden) {
+            this.dom.dataset.hidden = true
+        } else {
+            delete this.dom.dataset.hidden
+        }
+        return true
+    }
+
+    getNode() {
+        return this.node
+    }
+
+    setSelection(anchor, head, _root) {
+        if (anchor === head && this.view.hasFocus()) {
+            // Check if we should prevent refocusing (e.g., user just clicked on a tag)
+            if (shouldPreventTagInputFocus()) {
+                return
+            }
+            // We must be in last position.
+            // Activate the tag input tag editor.
+            this.tagInputView.focus()
+        }
+    }
+
+    ignoreMutation(_record) {
+        if (this.tagInputView?.hasFocus()) {
+            return true
+        }
+        return false
+    }
+}