@fiduswriter/editor 0.1.19 → 0.1.21

package/src/state_plugins/{settings.js → settings.ts}

@@ -1,14 +1,20 @@
-import {Plugin, PluginKey} from "prosemirror-state"
+import {Plugin, PluginKey, Transaction} from "prosemirror-state"
 
 import {LANGUAGES} from "@fiduswriter/document/schema/const"
 import {CATS} from "@fiduswriter/document/schema/i18n"
 import {setDocTitle} from "fwtoolkit"
 
+import type {Editor} from "../types.js"
+
 const key = new PluginKey("settings")
 
-export const settingsPlugin = options => {
-    const fixSettings = settings => {
-        const fixedSettings = Object.assign({}, settings)
+interface SettingsOptions {
+    editor: Editor
+}
+
+export const settingsPlugin = (options: SettingsOptions) => {
+    const fixSettings = (settings: Record<string, any>) => {
+        const fixedSettings: Record<string, any> = Object.assign({}, settings)
         let changed = false
 
         Object.keys(settings).forEach(key => {
@@ -16,14 +22,17 @@ export const settingsPlugin = options => {
             switch (key) {
                 case "documentstyle":
                     if (
-                        !options.editor.mod.documentTemplate.documentStyles.find(
-                            d => d.slug === value
+                        !(
+                            options.editor.mod.documentTemplate as any
+                        ).documentStyles.find(
+                            (d: {slug: string}) => d.slug === value
                         ) &&
-                        options.editor.mod.documentTemplate.documentStyles
-                            .length
+                        (options.editor.mod.documentTemplate as any)
+                            .documentStyles.length
                     ) {
-                        fixedSettings[key] =
-                            options.editor.mod.documentTemplate.documentStyles[0].slug
+                        fixedSettings[key] = (
+                            options.editor.mod.documentTemplate as any
+                        ).documentStyles[0].slug
                         changed = true
                     }
                     break
@@ -45,7 +54,10 @@ export const settingsPlugin = options => {
         }
     }
 
-    const updateSettings = (newSettings, oldSettings) => {
+    const updateSettings = (
+        newSettings: Record<string, any>,
+        oldSettings: Record<string, any>
+    ) => {
         let settingsValid = true
         Object.keys(newSettings).forEach(key => {
             const newValue = newSettings[key]
@@ -60,7 +72,7 @@ export const settingsPlugin = options => {
                         break
                     case "citationstyle":
                         if (newValue.length) {
-                            options.editor.mod.citations.resetCitations()
+                            ;(options.editor.mod.citations as any).resetCitations()
                         } else {
                             settingsValid = false
                         }
@@ -70,11 +82,19 @@ export const settingsPlugin = options => {
                             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)
+                            if (lang) {
+                                document
+                                    .querySelectorAll(".ProseMirror")
+                                    .forEach(
+                                        el =>
+                                            ((el as HTMLElement).dir =
+                                                lang[2] as "ltr" | "rtl")
+                                    )
+                                options.editor.docInfo.dir = lang[2] as
+                                    | "ltr"
+                                    | "rtl"
+                                updateLanguageCSS(newValue)
+                            }
                         } else {
                             settingsValid = false
                         }
@@ -87,18 +107,19 @@ export const settingsPlugin = options => {
 
     /** Update the stylesheet used for the docStyle
      */
-    const updateDocStyleCSS = docStyleId => {
+    const updateDocStyleCSS = (docStyleId: string) => {
         const docStyle =
-            options.editor.mod.documentTemplate.documentStyles.find(
-                doc_style => doc_style.slug === docStyleId
+            (options.editor.mod.documentTemplate as any).documentStyles.find(
+                (doc_style: {slug: string}) => doc_style.slug === docStyleId
             ) ||
-            (options.editor.mod.documentTemplate.documentStyles.length
-                ? options.editor.mod.documentTemplate.documentStyles[0]
+            ((options.editor.mod.documentTemplate as any).documentStyles.length
+                ? (options.editor.mod.documentTemplate as any)
+                    .documentStyles[0]
                 : {contents: "", documentstylefile_set: []})
 
-        let docStyleCSS = docStyle.contents
+        let docStyleCSS: string = docStyle.contents
         docStyle.documentstylefile_set.forEach(
-            ([url, filename]) =>
+            ([url, filename]: [string, string]) =>
                 (docStyleCSS = docStyleCSS.replace(
                     new RegExp(filename, "g"),
                     url
@@ -118,12 +139,12 @@ export const settingsPlugin = options => {
         // 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()
+            ;(options.editor.mod.marginboxes as any).updateDOM()
+            ;(options.editor.mod.footnotes as any).layout.updateDOM()
         }, 250)
     }
 
-    const updateLanguageCSS = language => {
+    const updateLanguageCSS = (language: string) => {
         let langStyleEl = document.getElementById("language-style")
         if (!langStyleEl) {
             langStyleEl = document.createElement("style")
@@ -177,44 +198,52 @@ export const settingsPlugin = options => {
         key,
         appendTransaction(trs, _oldState, newState) {
             // Ensure that there are always settings set.
-            if (trs.every(tr => tr.getMeta("remote") || tr.from > 0)) {
+            if (trs.every(tr => tr.getMeta("remote") || (tr as any).from > 0)) {
                 // All transactions are remote. Give up.
-                return false
+                return null
             }
             const lastTr = trs[trs.length - 1]
-            const attrs = lastTr.doc.attrs
+            const attrs = lastTr.doc.attrs as Record<string, any>
             const fixedSettings = fixSettings(attrs)
 
             if (!fixedSettings) {
-                return false
+                return null
             }
 
             const tr = newState.tr
             Object.entries(fixedSettings).forEach(([key, value]) => {
-                tr.setDocAttribute(key, value)
+                ;(tr as Transaction).setDocAttribute(key, value)
             })
             tr.setMeta("settings", true)
 
             return tr
         },
         view(view) {
-            if (!updateSettings(view.state.doc.attrs, {})) {
+            if (!updateSettings(view.state.doc.attrs as Record<string, any>, {})) {
                 setTimeout(() => {
                     const tr = view.state.tr
-                    const fixedSettings = fixSettings(view.state.doc.attrs)
+                    const fixedSettings = fixSettings(
+                        view.state.doc.attrs as Record<string, any>
+                    )
+                    if (!fixedSettings) {
+                        return
+                    }
                     Object.entries(fixedSettings).forEach(([key, value]) => {
-                        tr.setDocAttribute(key, value)
+                        ;(tr as Transaction).setDocAttribute(key, value)
                     })
                     tr.setMeta("settings", true)
                     view.dispatch(tr)
                 }, 0)
             }
             return {
-                update: (view, prevState) => {
-                    updateSettings(view.state.doc.attrs, prevState.doc.attrs)
+                update: (view, _prevState) => {
+                    updateSettings(
+                        view.state.doc.attrs as Record<string, any>,
+                        _prevState.doc.attrs as Record<string, any>
+                    )
                     setDocTitle(
-                        view.state.doc.firstChild.textContent,
-                        options.editor.app
+                        view.state.doc.firstChild?.textContent || "",
+                        options.editor.app as any
                     )
                 }
             }

package/src/state_plugins/table.ts

@@ -0,0 +1,169 @@
+import {ContentMenu} from "fwtoolkit"
+import type {ContentMenuInit} from "fwtoolkit/content_menu"
+import {Plugin, PluginKey, Selection} from "prosemirror-state"
+import type {Node} from "prosemirror-model"
+import type {EditorState} from "prosemirror-state"
+import type {EditorView, NodeView} from "prosemirror-view"
+import {WRITE_ROLES} from "..//index.js"
+import type {Editor} from "../types.js"
+
+const key = new PluginKey("table")
+
+class TableView implements NodeView {
+    node: Node
+    view: EditorView
+    getPos: () => number
+    options: {editor: Editor}
+    dom: HTMLElement
+    contentDOM: HTMLTableElement
+    menuButton: HTMLButtonElement
+
+    constructor(
+        node: Node,
+        view: EditorView,
+        getPos: () => number,
+        options: {editor: Editor}
+    ) {
+        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 as string
+        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 as unknown[])?.length) {
+            dom.dataset.track = JSON.stringify(node.attrs.track)
+        }
+        dom.id = node.attrs.id as string
+        dom.dataset.width = node.attrs.width as string
+        dom.dataset.aligned = node.attrs.aligned as string
+        dom.dataset.layout = node.attrs.layout as string
+        ;(dom as unknown as {class: string}).class = `table-${node.attrs.width} table-${node.attrs.aligned} table-${node.attrs.layout}`
+        dom.dataset.category = node.attrs.category as string
+        if (!node.attrs.caption) {
+            dom.dataset.captionHidden = "true"
+        }
+        this.contentDOM = dom
+        this.dom.appendChild(this.contentDOM)
+    }
+
+    stopEvent(event: Event) {
+        let stopped = false
+        if (
+            event.type === "mousedown" &&
+            event.composedPath().includes(this.menuButton)
+        ) {
+            stopped = true
+            const mouseEvent = event as MouseEvent
+            if (!isSelectedTableClicked(this.view.state, this.getPos())) {
+                const tr = this.view.state.tr
+                const $pos = this.view.state.doc.resolve(this.getPos())
+                const selection = Selection.findFrom($pos, 1, true)
+                if (!selection) {
+                    return stopped
+                }
+                tr.setSelection(selection)
+                this.view.dispatch(tr)
+            }
+            const contentMenu = new ContentMenu({
+                menu: this.options.editor.menu.tableMenuModel as ContentMenuInit,
+                width: 280,
+                page: this.options.editor,
+                menuPos: {
+                    X: Number.parseInt(mouseEvent.pageX as unknown as string) + 20,
+                    Y: Number.parseInt(mouseEvent.pageY as unknown as string) - 100
+                },
+                onClose: () => {
+                    this.view.focus()
+                }
+            })
+            contentMenu.open()
+        }
+        return stopped
+    }
+}
+
+class TableCaptionView implements NodeView {
+    node: Node
+    view: EditorView
+    getPos: () => number
+    options: {editor: Editor}
+    dom: HTMLElement
+    contentDOM: HTMLElement
+
+    constructor(
+        node: Node,
+        view: EditorView,
+        getPos: () => number,
+        options: {editor: Editor}
+    ) {
+        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 as HTMLElement
+    }
+}
+
+const isSelectedTableClicked = (state: EditorState, pos: number) => {
+    const pathArr = (state.selection.$head as unknown as {path: (Node | number)[]}).path
+    for (let i = 0; i < pathArr.length; i++) {
+        const item = pathArr[i]
+        if (
+            typeof item !== "number" &&
+            "type" in item &&
+            item.type.name === "table" &&
+            pathArr[i - 1] === pos
+        ) {
+            return true
+        }
+    }
+    return false
+}
+
+export const tablePlugin = (options: {editor: Editor}) =>
+    new Plugin({
+        key,
+        state: {
+            init(_config, _state) {
+                const self = this as unknown as {
+                    spec: {props: {nodeViews: Record<string, unknown>}}
+                }
+                if (
+                    WRITE_ROLES.includes(options.editor.docInfo.access_rights!)
+                ) {
+                    self.spec.props.nodeViews["table"] = (
+                        node: Node,
+                        view: EditorView,
+                        getPos: () => number
+                    ) => new TableView(node, view, getPos, options)
+                }
+                self.spec.props.nodeViews["table_caption"] = (
+                    node: Node,
+                    view: EditorView,
+                    getPos: () => number
+                ) => new TableCaptionView(node, view, getPos, options)
+
+                return {}
+            },
+            apply(_tr, prev) {
+                return prev
+            }
+        },
+        props: {
+            nodeViews: {}
+        }
+    })

package/src/state_plugins/tag_input/{node_view.js → node_view.ts}

@@ -2,15 +2,24 @@ import {
     TagsPartView as CommonTagsPartView,
     createTagEditor as commonCreateTagEditor
 } from "@fiduswriter/common/state_plugins/tag_input"
+import type {Node} from "prosemirror-model"
+import type {EditorView} from "prosemirror-view"
 
 import {addDeletedPartWidget} from "../document_template.js"
 import {shouldPreventTagInputFocus} from "./plugin.js"
 
-const createTagEditor = (view, getPos, getNode) =>
-    commonCreateTagEditor(view, getPos, getNode)
+const createTagEditor = (
+    view: EditorView,
+    getPos: () => number | undefined,
+    getNode: () => Node
+) => commonCreateTagEditor(view, getPos, getNode)
 
 export class TagsPartView extends CommonTagsPartView {
-    constructor(node, view, getPos) {
+    constructor(
+        node: Node,
+        view: EditorView,
+        getPos: () => number | undefined
+    ) {
         super(node, view, getPos, {
             addDeletedPartWidget,
             createTagEditor,