@fiduswriter/editor 0.1.0

package/src/state_plugins/toc_render.js

@@ -0,0 +1,160 @@
+import {escapeText, findTarget} from "fwtoolkit"
+import {Plugin, PluginKey} from "prosemirror-state"
+import {Decoration, DecorationSet} from "prosemirror-view"
+
+const key = new PluginKey("tocRender")
+
+function getTocItems(decorations) {
+    let tocItems
+
+    decorations.find(deco => {
+        if (deco.spec.tocItems) {
+            tocItems = deco.spec.tocItems
+            return true
+        }
+        return false
+    })
+    return tocItems
+}
+
+function tocHTML(tocItems, title) {
+    return `<h1 class="toc">${escapeText(title)}</h1>
+    ${tocItems
+        .map(item => {
+            const level = item.type.name.substr(-1)
+            return `<h${level}><a href="#${item.id}">${escapeText(item.textContent)}</a></h${level}>`
+        })
+        .join("")}`
+}
+
+class ToCView {
+    constructor(node, _view, _getPos, decorations, options) {
+        this.dom = document.createElement("div")
+        this.dom.classList.add("doc-part", "table-of-contents")
+        if (node.attrs.hidden) {
+            this.dom.dataset.hidden = "true"
+        }
+        const tocItems = getTocItems(decorations) || []
+        this.dom.innerHTML = tocHTML(tocItems, node.attrs.title)
+        this.dom.addEventListener("click", event => {
+            const el = {}
+            switch (true) {
+                case findTarget(event, "a", el):
+                    event.preventDefault()
+                    event.stopImmediatePropagation()
+                    el.id = el.target.getAttribute("href").slice(1)
+                    options.editor.scrollIdIntoView(el.id)
+                    break
+            }
+        })
+    }
+
+    update(node, decorations) {
+        const tocItems = getTocItems(decorations)
+        if (!tocItems) {
+            return
+        }
+        this.dom.innerHTML = tocHTML(tocItems, node.attrs.title)
+    }
+}
+
+function getDecos(state) {
+    const decoPos = [],
+        tocItems = []
+    let decos = DecorationSet.empty
+    state.doc.descendants((node, offset) => {
+        if (node.attrs?.hidden) {
+            return false
+        } else if (node.type.name === "table_of_contents") {
+            decoPos.push(offset)
+        } else if (node.type.groups.includes("heading")) {
+            tocItems.push({
+                id: node.attrs.id,
+                textContent: node.textContent,
+                type: node.type
+            })
+        }
+    })
+    if (decoPos.length) {
+        decos = DecorationSet.create(
+            state.doc,
+            decoPos.map(pos =>
+                Decoration.node(
+                    pos,
+                    pos + 1,
+                    {}, // We don't actually need to change anything about the node
+                    {tocItems} // We communicate the toc items to the node view
+                )
+            )
+        )
+    }
+    return decos
+}
+
+export const tocRenderPlugin = options =>
+    new Plugin({
+        key,
+        state: {
+            init(_config, state) {
+                const decos = getDecos(state)
+                return {decos}
+            },
+            apply(tr, _prev, oldState, state) {
+                let {decos} = this.getState(oldState),
+                    updateToc = false
+                tr.mapping.maps.forEach((map, index) =>
+                    map.forEach((oldStart, oldEnd, newStart, newEnd) => {
+                        const oldDoc = tr.docs[index],
+                            newDoc = tr.docs[index + 1] || tr.doc // tr.doc if it is the last step
+                        let hidden = false
+
+                        oldDoc.nodesBetween(oldStart, oldEnd, node => {
+                            if (updateToc) {
+                                return false
+                            } else if (node.type.groups.includes("heading")) {
+                                updateToc = true
+                            } else if (node.attrs?.hidden) {
+                                hidden = true // was hidden
+                            }
+                            return true
+                        })
+                        newDoc.nodesBetween(newStart, newEnd, node => {
+                            if (updateToc) {
+                                return false
+                            } else if (node.type.groups.includes("heading")) {
+                                updateToc = true
+                            } else if (node.attrs?.hidden) {
+                                hidden = hidden ? false : true // is hidden
+                            }
+                        })
+                        if (hidden) {
+                            // hidden has changed
+                            updateToc = true
+                        }
+                    })
+                )
+                // There has been a change that should cause a table of contents update.
+                // So we place a decoration around each toc-node which should cause it to
+                // update.
+                // See https://discuss.prosemirror.net/t/how-can-i-communicate-from-a-plugin-to-a-custom-nodeview/952/2
+
+                if (updateToc) {
+                    decos = getDecos(state)
+                } else {
+                    decos = decos.map(tr.mapping, tr.doc)
+                }
+
+                return {decos}
+            }
+        },
+        props: {
+            decorations(state) {
+                const {decos} = this.getState(state)
+                return decos
+            },
+            nodeViews: {
+                table_of_contents: (node, view, getPos, decorations) =>
+                    new ToCView(node, view, getPos, decorations, options)
+            }
+        }
+    })

package/src/state_plugins/toolbar.js

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

package/src/state_plugins/track/find_selected_changes.js

@@ -0,0 +1,107 @@
+import {getFromToMark} from "./helpers"
+
+export function findSelectedChanges(state) {
+    const selection = state.selection,
+        selectedChanges = {
+            insertion: false,
+            deletion: false,
+            formatChange: false
+        }
+    let insertionPos = false,
+        deletionPos = false,
+        formatChangePos = false,
+        insertionMark,
+        deletionMark,
+        formatChangeMark,
+        insertionSize,
+        deletionSize,
+        formatChangeSize
+
+    if (selection.empty) {
+        const resolvedPos = state.doc.resolve(selection.from),
+            marks = resolvedPos.marks()
+        if (marks) {
+            insertionMark = marks.find(
+                mark => mark.type.name === "insertion" && !mark.attrs.approved
+            )
+            if (insertionMark) {
+                insertionPos = selection.from
+            }
+            deletionMark = marks.find(mark => mark.type.name === "deletion")
+            if (deletionMark) {
+                deletionPos = selection.from
+            }
+            formatChangeMark = marks.find(
+                mark => mark.type.name === "format_change"
+            )
+            if (formatChangeMark) {
+                formatChangePos = selection.from
+            }
+        }
+    } else {
+        state.doc.nodesBetween(selection.from, selection.to, (node, pos) => {
+            if (pos < selection.from) {
+                return true
+            }
+            if (!insertionMark) {
+                insertionMark = node.attrs.track
+                    ? node.attrs.track.find(
+                          trackAttr => trackAttr.type === "insertion"
+                      )
+                    : node.marks.find(
+                          mark =>
+                              mark.type.name === "insertion" &&
+                              !mark.attrs.approved
+                      )
+                if (insertionMark) {
+                    insertionPos = pos
+                    if (!node.isInline) {
+                        insertionSize = node.nodeSize
+                    }
+                }
+            }
+            if (!deletionMark) {
+                deletionMark = node.attrs.track
+                    ? node.attrs.track.find(
+                          trackAttr => trackAttr.type === "deletion"
+                      )
+                    : node.marks.find(mark => mark.type.name === "deletion")
+                if (deletionMark) {
+                    deletionPos = pos
+                    if (!node.isInline) {
+                        deletionSize = node.nodeSize
+                    }
+                }
+            }
+            if (!formatChangeMark) {
+                formatChangeMark = node.marks.find(
+                    mark => mark.type.name === "format_change"
+                )
+                if (formatChangeMark) {
+                    formatChangePos = pos
+                    if (!node.isInline) {
+                        formatChangeSize = node.nodeSize
+                    }
+                }
+            }
+        })
+    }
+    if (insertionMark) {
+        selectedChanges.insertion = insertionSize
+            ? {from: insertionPos, to: insertionPos + insertionSize}
+            : getFromToMark(state.doc, insertionPos, insertionMark)
+    }
+
+    if (deletionMark) {
+        selectedChanges.deletion = deletionSize
+            ? {from: deletionPos, to: deletionPos + deletionSize}
+            : getFromToMark(state.doc, deletionPos, deletionMark)
+    }
+
+    if (formatChangeMark) {
+        selectedChanges.formatChange = formatChangeSize
+            ? {from: formatChangePos, to: formatChangePos + formatChangeSize}
+            : getFromToMark(state.doc, formatChangePos, formatChangeMark)
+    }
+    return selectedChanges
+}

package/src/state_plugins/track/helpers.js

@@ -0,0 +1,108 @@
+import {Decoration, DecorationSet} from "prosemirror-view"
+
+import {
+    key,
+    selectedChangeBlockSpec,
+    selectedChangeFormatSpec,
+    selectedDeletionSpec,
+    selectedInsertionSpec
+} from "./plugin"
+
+export function getSelectedChanges(state) {
+    const keyState = key.getState(state)
+    if (!keyState) {
+        return {}
+    }
+    const {decos} = keyState
+
+    const insertion = decos.find(
+            undefined,
+            undefined,
+            spec => spec === selectedInsertionSpec
+        )[0],
+        deletion = decos.find(
+            undefined,
+            undefined,
+            spec => spec === selectedDeletionSpec
+        )[0],
+        format_change = decos.find(
+            undefined,
+            undefined,
+            spec => spec === selectedChangeFormatSpec
+        )[0],
+        block_change = decos.find(
+            undefined,
+            undefined,
+            spec => spec === selectedChangeBlockSpec
+        )[0]
+
+    return {insertion, deletion, format_change, block_change}
+}
+
+export function setSelectedChanges(state, type, pos) {
+    const tr = state.tr,
+        node = tr.doc.nodeAt(pos),
+        mark = node.attrs.track
+            ? node.attrs.track.find(trackAttr => trackAttr.type === type)
+            : node.marks.find(mark => mark.type.name === type)
+    if (!mark) {
+        return
+    }
+    const selectedChange = node.isInline
+        ? getFromToMark(tr.doc, pos, mark)
+        : {from: pos, to: pos + node.nodeSize}
+    let decos = DecorationSet.empty,
+        spec
+    if (type === "insertion") {
+        spec = selectedInsertionSpec
+    } else if (type === "deletion") {
+        spec = selectedDeletionSpec
+    } else if (type === "format_change") {
+        spec = selectedChangeFormatSpec
+    } else if (type === "block_change") {
+        spec = selectedChangeBlockSpec
+    }
+    const decoType = node.isInline ? Decoration.inline : Decoration.node
+    decos = decos.add(tr.doc, [
+        decoType(
+            selectedChange.from,
+            selectedChange.to,
+            {
+                class: `selected-${type}`
+            },
+            spec
+        )
+    ])
+    return tr.setMeta(key, {decos}).setMeta("track", true)
+}
+
+export function deactivateAllSelectedChanges(tr) {
+    const pluginState = {
+        decos: DecorationSet.empty
+    }
+    return tr.setMeta(key, pluginState).setMeta("track", true)
+}
+
+// From https://discuss.prosemirror.net/t/expanding-the-selection-to-the-active-mark/478/2 with some bugs fixed
+export function getFromToMark(doc, pos, mark) {
+    const $pos = doc.resolve(pos),
+        parent = $pos.parent
+    const start = parent.childAfter($pos.parentOffset)
+    if (!start.node) {
+        return null
+    }
+    let startIndex = $pos.index(),
+        startPos = $pos.start() + start.offset
+    while (startIndex > 0 && mark.isInSet(parent.child(startIndex - 1).marks)) {
+        startPos -= parent.child(--startIndex).nodeSize
+    }
+    let endIndex = $pos.index() + 1,
+        endPos = $pos.start() + start.offset + start.node.nodeSize
+    while (
+        endIndex < parent.childCount &&
+        mark.isInSet(parent.child(endIndex).marks)
+    ) {
+        endPos += parent.child(endIndex++).nodeSize
+    }
+    return {from: startPos, to: endPos}
+}

package/src/state_plugins/track/index.js

@@ -0,0 +1,6 @@
+export {trackPlugin} from "./plugin"
+export {
+    getSelectedChanges,
+    setSelectedChanges,
+    deactivateAllSelectedChanges
+} from "./helpers"

package/src/state_plugins/track/plugin.js

@@ -0,0 +1,140 @@
+import {Plugin, PluginKey} from "prosemirror-state"
+import {Decoration, DecorationSet} from "prosemirror-view"
+
+import {findSelectedChanges} from "./find_selected_changes"
+
+export const key = new PluginKey("track")
+export const selectedInsertionSpec = {}
+export const selectedDeletionSpec = {}
+export const selectedChangeFormatSpec = {}
+export const selectedChangeBlockSpec = {}
+
+export function trackPlugin(options) {
+    return new Plugin({
+        key,
+        state: {
+            init(_config, state) {
+                // Make sure there are colors for all users who have left marks
+                // in the document and that they are registered as past
+                // participants for the marginbox filter.
+                const users = {}
+                users[options.editor.user.id] = options.editor.user.name
+                state.doc.descendants(node => {
+                    if (node.attrs.track) {
+                        node.attrs.track.forEach(track => {
+                            if (!users[track.user] && track.user !== 0) {
+                                users[track.user] = track.username
+                            }
+                        })
+                    } else {
+                        node.marks.forEach(mark => {
+                            if (
+                                [
+                                    "deletion",
+                                    "insertion",
+                                    "format_change"
+                                ].includes(mark.type.name) &&
+                                !users[mark.attrs.user] &&
+                                mark.attrs.user !== 0
+                            ) {
+                                users[mark.attrs.user] = mark.attrs.username
+                            }
+                        })
+                    }
+                })
+
+                if (options.editor.mod.collab) {
+                    Object.entries(users).forEach(([id, userName]) => {
+                        const userId = Number.parseInt(id)
+                        options.editor.mod.collab.colors.ensureUserColor(userId)
+                        if (
+                            !options.editor.mod.collab.pastParticipants.find(
+                                participant => participant.id === userId
+                            )
+                        ) {
+                            options.editor.mod.collab.pastParticipants.push({
+                                id: userId,
+                                name: userName
+                            })
+                        }
+                    })
+                }
+
+                return {
+                    decos: DecorationSet.empty
+                }
+            },
+            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
+                }
+
+                let {decos} = this.getState(oldState)
+
+                if (tr.selectionSet) {
+                    const {insertion, deletion, formatChange} =
+                        findSelectedChanges(state)
+                    decos = DecorationSet.empty
+                    const decoType = tr.selection.node
+                        ? Decoration.node
+                        : Decoration.inline
+                    if (insertion) {
+                        decos = decos.add(tr.doc, [
+                            decoType(
+                                insertion.from,
+                                insertion.to,
+                                {
+                                    class: "selected-insertion"
+                                },
+                                selectedInsertionSpec
+                            )
+                        ])
+                    }
+                    if (deletion) {
+                        decos = decos.add(tr.doc, [
+                            decoType(
+                                deletion.from,
+                                deletion.to,
+                                {
+                                    class: "selected-deletion"
+                                },
+                                selectedDeletionSpec
+                            )
+                        ])
+                    }
+                    if (formatChange) {
+                        decos = decos.add(tr.doc, [
+                            decoType(
+                                formatChange.from,
+                                formatChange.to,
+                                {
+                                    class: "selected-format_change"
+                                },
+                                selectedChangeFormatSpec
+                            )
+                        ])
+                    }
+                } else {
+                    decos = decos.map(tr.mapping, tr.doc)
+                }
+                return {
+                    decos
+                }
+            }
+        },
+        props: {
+            decorations(state) {
+                const {decos} = this.getState(state)
+                return decos
+            },
+            handleDOMEvents: {
+                focus: (_view, _event) => {
+                    options.editor.mod.comments.interactions.deactivateSelectedChanges()
+                }
+            }
+        }
+    })
+}

package/src/tools/index.js

@@ -0,0 +1,3 @@
+export {WordCountDialog} from "./word_count"
+export {KeyBindingsDialog} from "./key_bindings"
+export {SearchReplaceDialog} from "./search_replace"

package/src/tools/key_bindings/index.js

@@ -0,0 +1,21 @@
+import {Dialog} from "fwtoolkit"
+import {keyBindingsTemplate} from "./templates"
+/* This is an adaptation of question.mark for Fidus Writer http://fiduswriter.org
+ * originally by Gabriel Lopez <gabriel.marcos.lopez@gmail.com>
+ */
+
+export class KeyBindingsDialog {
+    constructor(editor) {
+        this.editor = editor
+    }
+
+    init() {
+        const dialog = new Dialog({
+            title: gettext("Keyboard Shortcuts"),
+            body: keyBindingsTemplate(),
+            width: 850,
+            buttons: [{type: "close"}]
+        })
+        dialog.open()
+    }
+}

package/src/tools/key_bindings/templates.js

@@ -0,0 +1,68 @@
+export const keyBindingsTemplate = () =>
+    `<div id="helpListWrap" class="help-list-wrap">
+        <ul class="help-list">
+          <li class="help-key-unit">
+            <kbd class="fw-button fw-light fw-small"><span>CTRL+p</span></kbd>
+            <span class="help-key-def">${gettext("Print")}</span>
+          </li>
+          <li class="help-key-unit">
+            <kbd class="fw-button fw-light fw-small"><span>CTRL+s</span></kbd>
+            <span class="help-key-def">${gettext("Save revision")}</span>
+          </li>
+          <li class="help-key-unit">
+            <kbd class="fw-button fw-light fw-small"><span>Shift+CTRL+/</span></kbd>
+            <span class="help-key-def">${gettext("Show keyboard shortcuts")}</span>
+          </li>
+          <li class="help-key-unit">
+            <kbd class="fw-button fw-light fw-small"><span>CTRL+V</span></kbd>
+            <span class="help-key-def">${gettext("Paste with content detection")}</span>
+          </li>
+          <li class="help-key-unit">
+            <kbd class="fw-button fw-light fw-small"><span>Shift+CTRL+V</span></kbd>
+            <span class="help-key-def">${gettext("Paste without content detection")}</span>
+          </li>
+          <li class="help-key-unit">
+            <kbd class="fw-button fw-light fw-small"><span>Drop (from drag)</span></kbd>
+            <span class="help-key-def">${gettext("Paste with content detection")}</span>
+          </li>
+          <li class="help-key-unit">
+            <kbd class="fw-button fw-light fw-small"><span>Shift+Drop (from drag)</span></kbd>
+            <span class="help-key-def">${gettext("Paste without content detection")}</span>
+          </li>
+          <li class="help-key-unit">
+            <kbd class="fw-button fw-light fw-small"><span>CTRL+H</span></kbd>
+            <span class="help-key-def">${gettext("Search and replace")}</span>
+          </li>
+        </ul><!-- .help-list -->
+        <ul class="help-list">
+          <li class="help-key-unit">
+            <kbd class="fw-button fw-light fw-small"><span>CTRL+B</span></kbd>
+            <span class="help-key-def">${gettext("Bold")}</span>
+          </li>
+          <li class="help-key-unit">
+            <kbd class="fw-button fw-light fw-small"><span>CTRL+I</span></kbd>
+            <span class="help-key-def">${gettext("Italics")}</span>
+          </li>
+          <li class="help-key-unit">
+            <kbd class="fw-button fw-light fw-small"><span>CTRL+[</span></kbd>
+            <kbd class="fw-button fw-light fw-small"><span>CTRL+&lt;</span></kbd>
+            <span class="help-key-def">${gettext("Lift")}</span>
+          </li>
+          <li class="help-key-unit">
+            <kbd class="fw-button fw-light fw-small"><span>CTRL+Shift+8</span></kbd>
+            <span class="help-key-def">${gettext("Wrap selection in bullet list")}</span>
+          </li>
+          <li class="help-key-unit">
+            <kbd class="fw-button fw-light fw-small"><span>CTRL+Shift+9</span></kbd>
+            <span class="help-key-def">${gettext("Wrap selection in numbered list")}</span>
+          </li>
+          <li class="help-key-unit">
+            <kbd class="fw-button fw-light fw-small"><span>CTRL+Z</span></kbd>
+            <span class="help-key-def">${gettext("Undo")}</span>
+          </li>
+          <li class="help-key-unit">
+            <kbd class="fw-button fw-light fw-small"><span>CTRL+Shift+Z</span></kbd>
+            <span class="help-key-def">${gettext("Redo")}</span>
+          </li>
+        </ul><!-- .help-list -->
+      </div><!-- .help-list-wrap -->`