@fiduswriter/editor 0.1.0

package/src/menus/image/model.js

@@ -0,0 +1,32 @@
+import {CopyrightDialog} from "../../../copyright_dialog"
+
+export const imageMenuModel = () => ({
+    content: [
+        {
+            title: gettext("Set Copyright"),
+            type: "action",
+            tooltip: gettext("Specify copyright information"),
+            order: 0,
+            action: figureDialog => {
+                const dialog = new CopyrightDialog(figureDialog.copyright)
+                dialog.init().then(copyright => {
+                    if (copyright) {
+                        figureDialog.copyright = copyright
+                    }
+                })
+            }
+        },
+        {
+            title: gettext("Remove image"),
+            type: "action",
+            tooltip: gettext("Remove the image that is previewed"),
+            order: 1,
+            action: figureDialog => {
+                figureDialog.imgId = false
+                figureDialog.imgDb = false
+                figureDialog.copyright = false
+                figureDialog.layoutMathEditor()
+            }
+        }
+    ]
+})

package/src/menus/index.js

@@ -0,0 +1,9 @@
+export {HeaderbarView, headerbarModel} from "./headerbar"
+export {ToolbarView, toolbarModel} from "./toolbar"
+export {SelectionMenuView, selectionMenuModel} from "./selection"
+export {tableMenuModel} from "./table"
+export {orderedListMenuModel} from "./ordered_list"
+export {imageMenuModel} from "./image"
+export {navigatorFilterModel} from "./navigator"
+export {figureMenuModel, figureWidthMenuModel} from "./figure"
+export {codeBlockMenuModel} from "./code_block"

package/src/menus/navigator/index.js

@@ -0,0 +1 @@
+export {navigatorFilterModel} from "./model"

package/src/menus/navigator/model.js

@@ -0,0 +1,28 @@
+export const navigatorFilterModel = () => ({
+    content: [
+        {
+            title: gettext("Heading 1"),
+            level: 1
+        },
+        {
+            title: gettext("Heading 2"),
+            level: 2
+        },
+        {
+            title: gettext("Heading 3"),
+            level: 3
+        },
+        {
+            title: gettext("Heading 4"),
+            level: 4
+        },
+        {
+            title: gettext("Heading 5"),
+            level: 5
+        },
+        {
+            title: gettext("Heading 6"),
+            level: 6
+        }
+    ]
+})

package/src/menus/ordered_list/index.js

@@ -0,0 +1 @@
+export {orderedListMenuModel} from "./model"

package/src/menus/ordered_list/model.js

@@ -0,0 +1,19 @@
+import {OrderedListStartDialog} from "../../dialogs"
+
+export const orderedListMenuModel = () => ({
+    content: [
+        {
+            title: gettext("Set list start number"),
+            type: "action",
+            tooltip: gettext(
+                "Specify the number from which this list is to start counting"
+            ),
+            order: 0,
+            action: editor => {
+                const dialog = new OrderedListStartDialog(editor)
+                dialog.init()
+                return false
+            }
+        }
+    ]
+})

package/src/menus/selection/index.js

@@ -0,0 +1,2 @@
+export {selectionMenuModel} from "./model"
+export {SelectionMenuView} from "./view"

package/src/menus/selection/model.js

@@ -0,0 +1,134 @@
+import {toggleMark} from "prosemirror-commands"
+
+import {randomAnchorId} from "@fiduswriter/document/schema/common/index"
+import {COMMENT_ONLY_ROLES} from "../.."
+import {checkProtectedInSelection} from "../../state_plugins"
+import {acceptAll, rejectAll} from "../../track"
+
+const tracksInSelection = view => {
+    // Check whether track marks are present within the range of selection
+    let tracks = false
+    const from = view.state.selection.from,
+        to = view.state.selection.to
+
+    view.state.doc.nodesBetween(from, to, (node, pos) => {
+        if (pos < from && !node.isInline) {
+            return true
+        } else if (tracks) {
+            return false
+        } else if (node.attrs.track?.length) {
+            tracks = true
+        } else if (
+            node.marks?.find(mark => {
+                if (
+                    ["deletion", "format_change"].includes(mark.type.name) ||
+                    (mark.type.name === "insertion" && !mark.attrs.approved)
+                ) {
+                    return true
+                } else {
+                    return false
+                }
+            })
+        ) {
+            tracks = true
+        }
+    })
+    return tracks
+}
+
+export const selectionMenuModel = () => ({
+    content: [
+        {
+            type: "button",
+            title: gettext("Comment"),
+            icon: "comment",
+            action: editor => {
+                editor.mod.comments.interactions.createNewComment()
+                return false
+            },
+            hidden: editor =>
+                editor.currentView.state.selection.$anchor.depth < 1,
+            selected: editor =>
+                !!editor.currentView.state.selection.$head
+                    .marks()
+                    .some(mark => mark.type.name === "comment"),
+            disabled: editor => {
+                if (editor.currentView === editor.view) {
+                    //  main editor
+                    return checkProtectedInSelection(editor.view.state)
+                } else {
+                    // footnote editor
+                    return false
+                }
+            },
+            order: 1
+        },
+        {
+            type: "button",
+            title: gettext("Anchor"),
+            icon: "anchor",
+            action: editor => {
+                const mark = editor.currentView.state.schema.marks["anchor"]
+                const command = toggleMark(mark, {id: randomAnchorId()})
+                command(editor.currentView.state, tr =>
+                    editor.currentView.dispatch(tr)
+                )
+            },
+            disabled: editor => {
+                if (editor.currentView === editor.view) {
+                    //  main editor
+                    return (
+                        checkProtectedInSelection(editor.view.state) ||
+                        COMMENT_ONLY_ROLES.includes(
+                            editor.docInfo.access_rights
+                        )
+                    )
+                } else {
+                    // footnote editor
+                    return COMMENT_ONLY_ROLES.includes(
+                        editor.docInfo.access_rights
+                    )
+                }
+            },
+            hidden: editor =>
+                editor.currentView.state.selection.$anchor.depth < 1,
+            selected: editor =>
+                !!editor.currentView.state.selection.$head
+                    .marks()
+                    .some(mark => mark.type.name === "anchor"),
+            order: 2
+        },
+        {
+            type: "button",
+            title: gettext("Accept all in selection"),
+            icon: "check-double",
+            action: editor =>
+                acceptAll(
+                    editor.currentView,
+                    editor.currentView.state.selection.from,
+                    editor.currentView.state.selection.to
+                ),
+            disabled: editor => editor.docInfo.access_rights !== "write",
+            hidden: editor =>
+                editor.currentView.state.selection.$anchor.depth < 1 ||
+                !tracksInSelection(editor.currentView),
+            order: 3
+        },
+        {
+            type: "button",
+            title: gettext("Reject all in selection"),
+            icon: "trash",
+            action: editor =>
+                rejectAll(
+                    editor.currentView,
+                    editor.currentView.state.selection.from,
+                    editor.currentView.state.selection.to
+                ),
+            disabled: editor => editor.docInfo.access_rights !== "write",
+            hidden: editor =>
+                editor.currentView.state.selection.$anchor.depth < 1 ||
+                !tracksInSelection(editor.currentView),
+            order: 4
+        }
+    ]
+})

package/src/menus/selection/view.js

@@ -0,0 +1,154 @@
+import {DiffDOM} from "diff-dom"
+
+import {READ_ONLY_ROLES} from "../.."
+
+export class SelectionMenuView {
+    constructor(editorView, options) {
+        this.editorView = editorView
+        this.options = options
+
+        this.editor = this.options.editor
+        if (!this.editor.menu.selectionMenuViews) {
+            this.editor.menu.selectionMenuViews = []
+        }
+        this.editor.menu.selectionMenuViews.push(this)
+
+        this.dd = new DiffDOM({
+            valueDiffing: false
+        })
+        this.openedMenu = false
+        this.listeners = {}
+
+        this.removeUnavailable(this.editor.menu.selectionMenuModel)
+
+        this.bindEvents()
+        this.update()
+    }
+
+    removeUnavailable(menu) {
+        // Remove those menu items from the menu model that are not available for this document.
+        // Used for example for mark or element buttons that aren't permitted according to the
+        // document template.
+        menu.content = menu.content.filter(item => {
+            if (item.available && !item.available(this.editor)) {
+                return false
+            } else if (item.type === "menu") {
+                this.removeUnavailable(item)
+            }
+            return true
+        })
+    }
+
+    bindEvents() {
+        this.listeners.onclick = event => this.onclick(event)
+        document.body.addEventListener("click", this.listeners.onclick)
+    }
+
+    destroy() {
+        document.body.removeEventListener("click", this.listeners.onclick)
+        this.editor.menu.selectionMenuViews =
+            this.editor.menu.selectionMenuViews.filter(view => view !== this)
+    }
+
+    onclick(event) {
+        if (this.editorView !== this.editor.currentView) {
+            // the other editor must be active
+            return
+        }
+        const target = event.target
+        if (
+            target.matches(
+                ".editor-selection-menu > div:not(.fw-disabled), .editor-selection-menu > div:not(.fw-disabled) *"
+            )
+        ) {
+            // A menu item has been clicked, lets find out which one.
+            let menuNumber = 0
+            let seekItem = target.closest("div.ui-buttonset")
+            while (seekItem.previousElementSibling) {
+                menuNumber++
+                seekItem = seekItem.previousElementSibling
+            }
+            const menuItem =
+                this.editor.menu.selectionMenuModel.content[menuNumber]
+            // execute an associated action.
+            if (menuItem.action) {
+                event.preventDefault()
+                const focus = menuItem.action(this.editor)
+                this.update()
+                if (focus !== false) {
+                    this.editor.currentView.focus()
+                }
+            }
+        } else if (
+            this.openedMenu !== false ||
+            this.editor.menu.selectionMenuModel.openMore
+        ) {
+            if (this.openedMenu !== false) {
+                this.editor.menu.selectionMenuModel.content[
+                    this.openedMenu
+                ].open = false
+            }
+            this.editor.menu.selectionMenuModel.openMore = false
+            this.openedMenu = false
+            this.update()
+        }
+    }
+
+    update() {
+        if (this.editorView !== this.editor.currentView) {
+            // the other editor must be active
+            return
+        }
+        const selectionMenuEl =
+            document.querySelector("#selection-menu").firstElementChild
+        const diff = this.dd.diff(selectionMenuEl, this.getSelectionMenuHTML())
+        this.dd.apply(selectionMenuEl, diff)
+    }
+
+    getSelectionMenuHTML() {
+        if (
+            READ_ONLY_ROLES.includes(this.editor.docInfo.access_rights) ||
+            this.editorView.state.selection.empty ||
+            this.editor.mod.comments.store.commentDuringCreation ||
+            this.editor.mod.comments.interactions.isCurrentlyEditing()
+        ) {
+            return "<div></div>"
+        }
+        const selectionMenuTop = document
+                .querySelector("#selection-menu")
+                .getBoundingClientRect().top,
+            offset =
+                this.editorView.coordsAtPos(
+                    this.editorView.state.selection.from
+                ).top - selectionMenuTop
+        return `<div style="margin-top: ${offset}px;">
+            <div class="editor-selection-menu">
+                ${this.editor.menu.selectionMenuModel.content
+                    .map(
+                        (menuItem, index) =>
+                            `<div class="ui-buttonset${(menuItem.hidden && menuItem.hidden(this.editor)) || (menuItem.disabled && menuItem.disabled(this.editor)) ? " fw-disabled" : ""}">
+                        ${this.getSelectionMenuItemHTML(menuItem, index)}
+                    </div>`
+                    )
+                    .join("")}
+            </div>
+        </div>`
+    }
+
+    getSelectionMenuItemHTML(menuItem, _index) {
+        if (menuItem.hidden?.(this.editor)) {
+            return ""
+        } else {
+            return this.getButtonHTML(menuItem)
+        }
+    }
+
+    getButtonHTML(menuItem) {
+        return `
+        <button aria-label="${menuItem.title}" class="fw-button fw-light fw-large fw-square edit-button${menuItem.selected && menuItem.selected(this.editor) ? " fw-state-active" : ""}${menuItem.class ? ` ${menuItem.class(this.editor)}` : ""}${menuItem.disabled && menuItem.disabled(this.editor) ? " fw-disabled" : ""}" title="${menuItem.title}" >
+            <span class="ui-button-text">
+                <i class="fa-solid fa-${typeof menuItem.icon === "function" ? menuItem.icon(this.editor) : menuItem.icon}"></i>
+            </span>
+        </button>`
+    }
+}

package/src/menus/table/index.js

@@ -0,0 +1 @@
+export {tableMenuModel} from "./model"