@fiduswriter/editor 0.1.20 → 0.1.21

package/src/menus/selection/{model.js → model.ts}

@@ -1,11 +1,13 @@
 import {toggleMark} from "prosemirror-commands"
+import type {EditorView} from "prosemirror-view"
 
 import {randomAnchorId} from "@fiduswriter/document/schema/common/index"
 import {COMMENT_ONLY_ROLES} from "../../index.js"
-import {checkProtectedInSelection} from "../../state_plugins/index.js"
+import {checkProtectedInSelection} from "../../state_plugins/document_template.js"
+import type {AccessRole, Editor} from "../../types.js"
 import {acceptAll, rejectAll} from "../../track/index.js"
 
-const tracksInSelection = view => {
+const tracksInSelection = (view: EditorView): boolean => {
     // Check whether track marks are present within the range of selection
     let tracks = false
     const from = view.state.selection.from,
@@ -32,27 +34,43 @@ const tracksInSelection = view => {
         ) {
             tracks = true
         }
+        return false
     })
     return tracks
 }
 
-export const selectionMenuModel = () => ({
+interface MenuItem {
+    type: string
+    title: string
+    icon?: string
+    order: number
+    action: (editor: Editor) => boolean | void
+    hidden?: (editor: Editor) => boolean
+    selected?: (editor: Editor) => boolean
+    disabled?: (editor: Editor) => boolean
+}
+
+export const selectionMenuModel = (): {content: MenuItem[]} => ({
     content: [
         {
             type: "button",
             title: gettext("Comment"),
             icon: "comment",
-            action: editor => {
-                editor.mod.comments.interactions.createNewComment()
+            action: (editor: Editor) => {
+                ;(
+                    editor.mod.comments as {
+                        interactions: {createNewComment: () => void}
+                    }
+                ).interactions.createNewComment()
                 return false
             },
-            hidden: editor =>
+            hidden: (editor: Editor) =>
                 editor.currentView.state.selection.$anchor.depth < 1,
-            selected: editor =>
+            selected: (editor: Editor) =>
                 !!editor.currentView.state.selection.$head
                     .marks()
                     .some(mark => mark.type.name === "comment"),
-            disabled: editor => {
+            disabled: (editor: Editor) => {
                 if (editor.currentView === editor.view) {
                     //  main editor
                     return checkProtectedInSelection(editor.view.state)
@@ -67,32 +85,32 @@ export const selectionMenuModel = () => ({
             type: "button",
             title: gettext("Anchor"),
             icon: "anchor",
-            action: editor => {
+            action: (editor: 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 => {
+            disabled: (editor: Editor) => {
                 if (editor.currentView === editor.view) {
                     //  main editor
                     return (
                         checkProtectedInSelection(editor.view.state) ||
                         COMMENT_ONLY_ROLES.includes(
-                            editor.docInfo.access_rights
+                            editor.docInfo.access_rights as AccessRole
                         )
                     )
                 } else {
                     // footnote editor
                     return COMMENT_ONLY_ROLES.includes(
-                        editor.docInfo.access_rights
+                        editor.docInfo.access_rights as AccessRole
                     )
                 }
             },
-            hidden: editor =>
+            hidden: (editor: Editor) =>
                 editor.currentView.state.selection.$anchor.depth < 1,
-            selected: editor =>
+            selected: (editor: Editor) =>
                 !!editor.currentView.state.selection.$head
                     .marks()
                     .some(mark => mark.type.name === "anchor"),
@@ -102,14 +120,14 @@ export const selectionMenuModel = () => ({
             type: "button",
             title: gettext("Accept all in selection"),
             icon: "check-double",
-            action: editor =>
+            action: (editor: Editor) =>
                 acceptAll(
                     editor.currentView,
                     editor.currentView.state.selection.from,
                     editor.currentView.state.selection.to
                 ),
-            disabled: editor => editor.docInfo.access_rights !== "write",
-            hidden: editor =>
+            disabled: (editor: Editor) => editor.docInfo.access_rights !== "write",
+            hidden: (editor: Editor) =>
                 editor.currentView.state.selection.$anchor.depth < 1 ||
                 !tracksInSelection(editor.currentView),
             order: 3
@@ -118,14 +136,14 @@ export const selectionMenuModel = () => ({
             type: "button",
             title: gettext("Reject all in selection"),
             icon: "trash",
-            action: editor =>
+            action: (editor: Editor) =>
                 rejectAll(
                     editor.currentView,
                     editor.currentView.state.selection.from,
                     editor.currentView.state.selection.to
                 ),
-            disabled: editor => editor.docInfo.access_rights !== "write",
-            hidden: editor =>
+            disabled: (editor: Editor) => editor.docInfo.access_rights !== "write",
+            hidden: (editor: Editor) =>
                 editor.currentView.state.selection.$anchor.depth < 1 ||
                 !tracksInSelection(editor.currentView),
             order: 4

package/src/menus/selection/{view.js → view.ts}

@@ -1,17 +1,50 @@
 import {DiffDOM} from "diff-dom"
+import type {EditorView} from "prosemirror-view"
 
 import {READ_ONLY_ROLES} from "../../index.js"
+import type {Editor} from "../../types.js"
+
+interface MenuItem {
+    type?: string
+    title: string
+    icon?: string | ((editor: Editor) => string)
+    class?: (editor: Editor) => string
+    hidden?: (editor: Editor) => boolean
+    disabled?: (editor: Editor) => boolean
+    selected?: (editor: Editor) => boolean
+    available?: (editor: Editor) => boolean
+    action?: (editor: Editor) => boolean | void
+    open?: boolean
+}
+
+interface MenuModel {
+    content: MenuItem[]
+    openMore?: boolean
+}
+
+interface MenuWithViews {
+    selectionMenuModel: MenuModel
+    selectionMenuViews: SelectionMenuView[]
+}
 
 export class SelectionMenuView {
-    constructor(editorView, options) {
+    editorView: EditorView
+    options: {editor: Editor}
+    editor: Editor
+    dd: DiffDOM
+    openedMenu: number | false
+    listeners: {onclick?: (event: MouseEvent) => void}
+
+    constructor(editorView: EditorView, options: {editor: Editor}) {
         this.editorView = editorView
         this.options = options
 
         this.editor = this.options.editor
-        if (!this.editor.menu.selectionMenuViews) {
-            this.editor.menu.selectionMenuViews = []
+        const menu = this.editor.menu as unknown as MenuWithViews
+        if (!menu.selectionMenuViews) {
+            menu.selectionMenuViews = []
         }
-        this.editor.menu.selectionMenuViews.push(this)
+        menu.selectionMenuViews.push(this)
 
         this.dd = new DiffDOM({
             valueDiffing: false
@@ -19,13 +52,17 @@ export class SelectionMenuView {
         this.openedMenu = false
         this.listeners = {}
 
-        this.removeUnavailable(this.editor.menu.selectionMenuModel)
+        this.removeUnavailable(menu.selectionMenuModel)
 
         this.bindEvents()
         this.update()
     }
 
-    removeUnavailable(menu) {
+    getMenu(): MenuWithViews {
+        return this.editor.menu as unknown as MenuWithViews
+    }
+
+    removeUnavailable(menu: MenuModel): void {
         // 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.
@@ -33,29 +70,34 @@ export class SelectionMenuView {
             if (item.available && !item.available(this.editor)) {
                 return false
             } else if (item.type === "menu") {
-                this.removeUnavailable(item)
+                this.removeUnavailable(item as unknown as MenuModel)
             }
             return true
         })
     }
 
-    bindEvents() {
+    bindEvents(): void {
         this.listeners.onclick = event => this.onclick(event)
-        document.body.addEventListener("click", this.listeners.onclick)
+        document.body.addEventListener("click", this.listeners.onclick as EventListener)
     }
 
-    destroy() {
-        document.body.removeEventListener("click", this.listeners.onclick)
-        this.editor.menu.selectionMenuViews =
-            this.editor.menu.selectionMenuViews.filter(view => view !== this)
+    destroy(): void {
+        document.body.removeEventListener(
+            "click",
+            this.listeners.onclick as EventListener
+        )
+        const menu = this.getMenu()
+        menu.selectionMenuViews = menu.selectionMenuViews.filter(
+            view => view !== this
+        )
     }
 
-    onclick(event) {
+    onclick(event: MouseEvent): void {
         if (this.editorView !== this.editor.currentView) {
             // the other editor must be active
             return
         }
-        const target = event.target
+        const target = event.target as HTMLElement
         if (
             target.matches(
                 ".editor-selection-menu > div:not(.fw-disabled), .editor-selection-menu > div:not(.fw-disabled) *"
@@ -64,12 +106,11 @@ export class SelectionMenuView {
             // A menu item has been clicked, lets find out which one.
             let menuNumber = 0
             let seekItem = target.closest("div.ui-buttonset")
-            while (seekItem.previousElementSibling) {
+            while (seekItem?.previousElementSibling) {
                 menuNumber++
-                seekItem = seekItem.previousElementSibling
+                seekItem = seekItem.previousElementSibling as HTMLElement
             }
-            const menuItem =
-                this.editor.menu.selectionMenuModel.content[menuNumber]
+            const menuItem = this.getMenu().selectionMenuModel.content[menuNumber]
             // execute an associated action.
             if (menuItem.action) {
                 event.preventDefault()
@@ -81,49 +122,57 @@ export class SelectionMenuView {
             }
         } else if (
             this.openedMenu !== false ||
-            this.editor.menu.selectionMenuModel.openMore
+            this.getMenu().selectionMenuModel.openMore
         ) {
             if (this.openedMenu !== false) {
-                this.editor.menu.selectionMenuModel.content[
+                this.getMenu().selectionMenuModel.content[
                     this.openedMenu
                 ].open = false
             }
-            this.editor.menu.selectionMenuModel.openMore = false
+            this.getMenu().selectionMenuModel.openMore = false
             this.openedMenu = false
             this.update()
         }
     }
 
-    update() {
+    update(): void {
         if (this.editorView !== this.editor.currentView) {
             // the other editor must be active
             return
         }
         const selectionMenuEl =
-            document.querySelector("#selection-menu").firstElementChild
+            document.querySelector("#selection-menu")?.firstElementChild
+        if (!selectionMenuEl) {
+            return
+        }
         const diff = this.dd.diff(selectionMenuEl, this.getSelectionMenuHTML())
         this.dd.apply(selectionMenuEl, diff)
     }
 
-    getSelectionMenuHTML() {
+    getSelectionMenuHTML(): string {
         if (
-            READ_ONLY_ROLES.includes(this.editor.docInfo.access_rights) ||
+            READ_ONLY_ROLES.includes(this.editor.docInfo.access_rights as string) ||
             this.editorView.state.selection.empty ||
-            this.editor.mod.comments.store.commentDuringCreation ||
-            this.editor.mod.comments.interactions.isCurrentlyEditing()
+            (this.editor.mod.comments as {store: {commentDuringCreation?: boolean}}).store
+                .commentDuringCreation ||
+            (
+                this.editor.mod.comments as {
+                    interactions: {isCurrentlyEditing: () => boolean}
+                }
+            ).interactions.isCurrentlyEditing()
         ) {
             return "<div></div>"
         }
-        const selectionMenuTop = document
-                .querySelector("#selection-menu")
-                .getBoundingClientRect().top,
+        const selectionMenuTop = (
+                document.querySelector("#selection-menu") as HTMLElement
+            ).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
+                ${this.getMenu().selectionMenuModel.content
                     .map(
                         (menuItem, index) =>
                             `<div class="ui-buttonset${(menuItem.hidden && menuItem.hidden(this.editor)) || (menuItem.disabled && menuItem.disabled(this.editor)) ? " fw-disabled" : ""}">
@@ -135,7 +184,7 @@ export class SelectionMenuView {
         </div>`
     }
 
-    getSelectionMenuItemHTML(menuItem, _index) {
+    getSelectionMenuItemHTML(menuItem: MenuItem, _index: number): string {
         if (menuItem.hidden?.(this.editor)) {
             return ""
         } else {
@@ -143,11 +192,15 @@ export class SelectionMenuView {
         }
     }
 
-    getButtonHTML(menuItem) {
+    getButtonHTML(menuItem: MenuItem): string {
+        const icon =
+            typeof menuItem.icon === "function"
+                ? menuItem.icon(this.editor)
+                : menuItem.icon
         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>
+                <i class="fa-solid fa-${icon}"></i>
             </span>
         </button>`
     }