@fiduswriter/editor 0.1.0

package/src/state_plugins/marginboxes.js

@@ -0,0 +1,14 @@
+import {Plugin, PluginKey} from "prosemirror-state"
+
+const key = new PluginKey("marginboxes")
+export const marginboxesPlugin = options =>
+    new Plugin({
+        key,
+        view(_editorState) {
+            return {
+                update: (view, _prevState) => {
+                    options.editor.mod.marginboxes.view(view)
+                }
+            }
+        }
+    })

package/src/state_plugins/ordered_list_menu.js

@@ -0,0 +1,84 @@
+import {ContentMenu} from "fwtoolkit"
+import {Plugin, PluginKey, Selection} from "prosemirror-state"
+import {WRITE_ROLES} from "../"
+
+const key = new PluginKey("tableMenu")
+
+class OrderedListView {
+    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("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 orderedList = document.createElement("ol")
+        if (node.attrs.order !== 1) {
+            orderedList.start = node.attrs.order
+        }
+        if (node.attrs.track?.length) {
+            orderedList.dataset.track = JSON.stringify(node.attrs.track)
+        }
+        this.contentDOM = this.dom.appendChild(orderedList)
+        this.dom.appendChild(this.contentDOM)
+    }
+
+    stopEvent(event) {
+        let stopped = false
+        if (
+            event.type === "mousedown" &&
+            event.composedPath().includes(this.menuButton)
+        ) {
+            stopped = true
+            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.orderedListMenuModel,
+                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
+    }
+}
+
+export const orderedListMenuPlugin = options =>
+    new Plugin({
+        key,
+        state: {
+            init(_config, _state) {
+                if (
+                    WRITE_ROLES.includes(options.editor.docInfo.access_rights)
+                ) {
+                    this.spec.props.nodeViews["ordered_list"] = (
+                        node,
+                        view,
+                        getPos
+                    ) => new OrderedListView(node, view, getPos, options)
+                }
+                return {}
+            },
+            apply(_tr, prev) {
+                return prev
+            }
+        },
+        props: {
+            nodeViews: {}
+        }
+    })

package/src/state_plugins/placeholders.js

@@ -0,0 +1,123 @@
+import {Plugin, PluginKey} from "prosemirror-state"
+import {Decoration, DecorationSet} from "prosemirror-view"
+
+const key = new PluginKey("placeholders")
+export const placeholdersPlugin = options => {
+    function calculatePlaceHolderDecorations(state) {
+        const anchor = state.selection.$anchor
+        const head = state.selection.$head
+        if (!anchor || !head) {
+            return
+        }
+        const anchorPart = anchor.node(1)
+        const headPart = head.node(1)
+        if (!anchorPart || !headPart) {
+            return
+        }
+        const currentPart = anchorPart === headPart ? anchorPart : false
+
+        const decorations = []
+
+        state.doc.forEach((partElement, offset) => {
+            if (
+                (partElement.isTextblock && partElement.childCount === 0) ||
+                (!partElement.isTextblock && partElement.nodeSize === 4)
+            ) {
+                if (
+                    [
+                        state.schema.nodes["tags_part"],
+                        state.schema.nodes["contributors_part"]
+                    ].includes(partElement.type) &&
+                    options.editor.docInfo.access_rights === "write"
+                ) {
+                    // We don't need to render placeholders for these kinds
+                    // of nodes in write mode as their nodeviews will take
+                    // care of that.
+                    return
+                }
+
+                const text =
+                    partElement.type === state.schema.nodes["title"]
+                        ? `${gettext("Title")}...`
+                        : `${partElement.attrs.title}...`
+                const placeHolder = document.createElement("span")
+                placeHolder.classList.add("fw-placeholder")
+                placeHolder.setAttribute("data-placeholder", text)
+                if (currentPart === partElement) {
+                    placeHolder.classList.add("fw-selected")
+                }
+                let position = 1 + offset
+                // position of decorator: 2 to get inside (doc (1))
+                if (!partElement.isTextblock) {
+                    // In block nodes that are not text blocks (body + abstract)
+                    // place inside the first child node (a paragraph).
+                    position += 1
+                }
+                decorations.push(
+                    Decoration.widget(position, placeHolder, {
+                        side: 1
+                    })
+                )
+            } else if (
+                ["richtext_part", "table_part"].includes(partElement.type.name)
+            ) {
+                partElement.descendants((node, pos) => {
+                    if (
+                        ["figure", "table"].includes(node.type.name) &&
+                        !node.attrs.caption
+                    ) {
+                        return false
+                    }
+                    if (
+                        ["figure_caption", "table_caption"].includes(
+                            node.type.name
+                        ) &&
+                        node.childCount === 0 &&
+                        state.selection.$anchor.parent !== node
+                    ) {
+                        decorations.push(
+                            Decoration.node(
+                                1 + offset + pos,
+                                1 + offset + pos + node.nodeSize,
+                                {
+                                    class: "empty",
+                                    "data-placeholder": `${gettext("Caption")}...`
+                                }
+                            )
+                        )
+                    }
+                })
+            }
+        })
+
+        return decorations.length
+            ? DecorationSet.create(state.doc, decorations)
+            : false
+    }
+
+    return new Plugin({
+        key,
+        state: {
+            init(_config, state) {
+                return {
+                    decos: calculatePlaceHolderDecorations(state)
+                }
+            },
+            apply(tr, _prev, oldState, state) {
+                let {decos} = this.getState(oldState)
+                if (tr.docChanged || tr.selectionSet) {
+                    decos = calculatePlaceHolderDecorations(state)
+                }
+                return {
+                    decos
+                }
+            }
+        },
+        props: {
+            decorations(state) {
+                const {decos} = this.getState(state)
+                return decos
+            }
+        }
+    })
+}

package/src/state_plugins/search.js

@@ -0,0 +1,251 @@
+import {Plugin, PluginKey} from "prosemirror-state"
+import {Decoration, DecorationSet} from "prosemirror-view"
+
+const key = new PluginKey("search")
+
+function findMatches(doc, term) {
+    let stringObj = false,
+        matches = []
+
+    if (!term.length) {
+        return matches
+    }
+
+    doc.descendants((node, pos, parent) => {
+        if (
+            !node.isInline ||
+            node.marks.find(mark => mark.type.name === "deletion")
+        ) {
+            return
+        }
+        if (stringObj && (parent !== stringObj.parent || !node.isText)) {
+            matches = matches.concat(findTerm(term, stringObj))
+            stringObj = false
+        }
+
+        if (node.isText) {
+            if (!stringObj) {
+                stringObj = {parent, pos: [], text: ""}
+            }
+            stringObj.text += node.text
+            stringObj.pos.push([pos, pos + node.text.length])
+        }
+    })
+    if (stringObj) {
+        matches = matches.concat(findTerm(term, stringObj))
+    }
+    return matches
+}
+
+// Find search term within stringObjects (strings that consist of several text nodes that hang together)
+function findTerm(term, stringObj) {
+    const matches = []
+    let index = 0,
+        foundIndex
+    while ((foundIndex = stringObj.text.indexOf(term, index)) !== -1) {
+        index = foundIndex + term.length
+
+        matches.push({
+            from: transPos(foundIndex, stringObj.pos),
+            to: transPos(foundIndex + term.length, stringObj.pos)
+        })
+    }
+    return matches
+}
+
+// Translate the start and end position of the serach term within the strings to document positions
+function transPos(index, pos) {
+    let findIndex = index,
+        posIndex = 0
+    while (findIndex > pos[posIndex][1] - pos[posIndex][0]) {
+        findIndex -= pos[posIndex][1] - pos[posIndex][0]
+        posIndex++
+    }
+    return pos[posIndex][0] + findIndex
+}
+
+function matchesToDecos(doc, matches, selected) {
+    if (!matches.length) {
+        return DecorationSet.empty
+    }
+    const decorations = matches.map((match, index) => {
+        return Decoration.inline(match.from, match.to, {
+            class: `search${index === selected ? " selected" : ""}`
+        })
+    })
+    return DecorationSet.create(doc, decorations)
+}
+
+export const setSearchTerm = (
+    state,
+    term,
+    selected = false,
+    listener = false
+) => {
+    const matches = findMatches(state.doc, term),
+        decos = matchesToDecos(state.doc, matches, selected)
+
+    selected =
+        selected !== false && matches.length > selected
+            ? selected
+            : matches.length
+              ? matches.length - 1
+              : false
+
+    const tr = state.tr.setMeta(key, {
+        term,
+        decos,
+        matches,
+        selected,
+        listener
+    })
+
+    return {tr, matches, selected}
+}
+
+export const endSearch = state =>
+    state.tr.setMeta(key, {
+        term: "",
+        decos: DecorationSet.empty,
+        matches: [],
+        selected: 0,
+        listener: false
+    })
+
+export const selectNextSearchMatch = state => {
+    const pluginState = key.getState(state),
+        {term, matches, listener} = pluginState
+    let {selected} = pluginState
+
+    if (selected === false) {
+        selected = matches.length
+    }
+    if (selected < matches.length - 1) {
+        selected++
+    } else {
+        selected = 0
+    }
+    const decos = matchesToDecos(state.doc, matches, selected)
+    return state.tr.setMeta(key, {
+        term,
+        decos,
+        matches,
+        selected,
+        listener
+    })
+}
+
+export const selectPreviousSearchMatch = state => {
+    const pluginState = key.getState(state),
+        {term, matches, listener} = pluginState
+    let {selected} = pluginState
+
+    if (selected === false) {
+        selected = 0
+    }
+    if (selected > 0) {
+        selected--
+    } else {
+        selected = matches.length - 1
+    }
+    const decos = matchesToDecos(state.doc, matches, selected)
+    return state.tr.setMeta(key, {
+        term,
+        decos,
+        matches,
+        selected,
+        listener
+    })
+}
+
+export const deselectSearchMatch = state => {
+    const {term, matches, listener} = key.getState(state),
+        selected = false,
+        decos = matchesToDecos(state.doc, matches, selected)
+    return state.tr.setMeta(key, {
+        term,
+        decos,
+        matches,
+        selected,
+        listener
+    })
+}
+
+export const getSearchMatches = state => {
+    const {matches, selected} = key.getState(state)
+    return {matches, selected}
+}
+
+export const searchPlugin = _options =>
+    new Plugin({
+        key,
+        state: {
+            init() {
+                return {
+                    term: "",
+                    decos: DecorationSet.empty,
+                    matches: [],
+                    selected: 0,
+                    listener: false
+                }
+            },
+            apply(tr, _prev, oldState, state) {
+                const meta = tr.getMeta(key)
+                if (meta) {
+                    // There has been an update, return values from meta instead
+                    // of previous values
+                    return meta
+                }
+
+                const pluginState = this.getState(oldState),
+                    {term, listener} = pluginState
+                let {matches, decos, selected} = pluginState
+
+                if (term === "" || !tr.docChanged) {
+                    return {
+                        term,
+                        decos, // empty if term === ''
+                        matches, // empty if term === ''
+                        selected, // 0 if term === ''
+                        listener // false is dialog not open
+                    }
+                }
+
+                // The document is changing while the search window is open. We redo the search for the entire doc.
+                // TODO: Optimize for speed by only recalculating the part of the doc that was changed.
+                matches = findMatches(state.doc, term)
+                if (selected !== false && selected >= matches.length) {
+                    if (matches.length) {
+                        selected = matches.length - 1
+                    } else {
+                        selected = false
+                    }
+                }
+                decos = matchesToDecos(state.doc, matches, selected)
+
+                return {
+                    term,
+                    decos,
+                    matches,
+                    selected,
+                    listener
+                }
+            }
+        },
+        props: {
+            decorations(state) {
+                const {decos} = this.getState(state)
+                return decos
+            }
+        },
+        view(_editorState) {
+            return {
+                update: (view, _prevState) => {
+                    const {listener} = key.getState(view.state)
+                    if (listener) {
+                        listener.onUpdate()
+                    }
+                }
+            }
+        }
+    })

package/src/state_plugins/selection_menu.js

@@ -0,0 +1,12 @@
+import {Plugin, PluginKey} from "prosemirror-state"
+
+import {SelectionMenuView} from "../menus"
+
+const key = new PluginKey("toolbar")
+export const selectionMenuPlugin = options =>
+    new Plugin({
+        key,
+        view(editorView) {
+            return new SelectionMenuView(editorView, options)
+        }
+    })