@fiduswriter/editor 0.1.20 → 0.1.21

package/src/marginboxes/{templates.js → templates.ts}

@@ -1,7 +1,112 @@
 import {avatarTemplate, escapeText, localizeDate} from "fwtoolkit"
+import type {Node} from "prosemirror-model"
+
 import {READ_ONLY_ROLES} from "../index.js"
 import {serializeHelp} from "../document_template/index.js"
 import {serializeComment} from "../comments/editors/index.js"
+import type {DocInfo, EditorUser} from "../types.js"
+
+export interface MarginBoxFilterOptions {
+    track?: boolean
+    comments?: boolean
+    info?: boolean
+    help?: boolean
+    warning?: boolean
+    commentsResolved?: boolean
+    commentsOnlyMajor?: boolean
+    commentsAuthor?: number
+    trackAuthor?: number
+    author?: number
+    assigned?: number
+}
+
+export interface CommentAnswer {
+    id: number | string
+    user: number
+    username: string
+    date: number
+    answer: unknown[]
+}
+
+export interface Comment {
+    id: number
+    user: number
+    username: string
+    date: number
+    comment: unknown[]
+    answers?: CommentAnswer[]
+    isMajor?: boolean
+    resolved?: boolean
+    hidden?: boolean
+    isGlobal?: boolean
+    assignedUser?: number
+    assignedUsername?: string
+}
+
+export interface TrackData {
+    user: number
+    username: string
+    date: number
+    before?:
+        | string[]
+        | {type: string; attrs?: {order?: number; level?: number}}
+    after?: string[]
+}
+
+export interface Participant {
+    id: number
+    name: string
+}
+
+interface ContactPerson {
+    id: number | string
+    type?: string
+    name?: string
+    avatar?: string
+}
+
+export interface CommentMarginBox {
+    type: "comment"
+    data: Comment
+    view: string
+    active: boolean
+    pos?: number
+}
+
+export interface TrackMarginBox {
+    type: "insertion" | "deletion" | "format_change" | "block_change"
+    data: TrackData
+    node: Node
+    view: string
+    active: boolean
+    pos?: number
+}
+
+export interface HelpMarginBox {
+    type: "help"
+    data: {active?: boolean; help: unknown}
+    active?: boolean
+}
+
+export interface WarningMarginBox {
+    type: "warning"
+    data: {active?: boolean; warning: string}
+    active?: boolean
+}
+
+export type MarginBox =
+    | CommentMarginBox
+    | TrackMarginBox
+    | HelpMarginBox
+    | WarningMarginBox
+
+interface MarginBoxOptionComment {
+    answer?: boolean
+    id: number | string
+    commentId?: number | string
+    user: number
+    resolved?: boolean
+}
 
 /** A template for an answer to a comment */
 const answerCommentTemplate = ({
@@ -11,11 +116,18 @@ const answerCommentTemplate = ({
     activeCommentAnswerId,
     active,
     user
+}: {
+    answer: CommentAnswer
+    author: ContactPerson | undefined
+    commentId: number | string
+    activeCommentAnswerId: number | string | undefined
+    active: boolean
+    user: EditorUser
 }) =>
     `<div class="comment-item comment-answer collapse ${active ? "show" : ""}" id="comment-answer-${answer.id}">
         <div class="comment-user">
             ${author ? avatarTemplate({user: author}) : '<span class="fw-string-avatar"></span>'}
-            <h5 class="comment-user-name">${escapeText(author ? author.name : answer.username)}</h5>
+            <h5 class="comment-user-name">${escapeText(author?.name || answer.username)}</h5>
             <p class="comment-date">${localizeDate(answer.date)}</p>
         </div>
         ${
@@ -43,12 +155,24 @@ const answerCommentTemplate = ({
         }
     </div>`
 
+interface SingleCommentTemplateProps {
+    comment: Comment
+    author: ContactPerson | undefined
+    active: boolean
+    editComment: boolean
+}
+
 /** A template to show one individual comment */
-const singleCommentTemplate = ({comment, author, active, editComment}) =>
+const singleCommentTemplate = ({
+    comment,
+    author,
+    active,
+    editComment
+}: SingleCommentTemplateProps) =>
     `<div class="comment-item">
         <div class="comment-user">
             ${author ? avatarTemplate({user: author}) : '<span class="fw-string-avatar"></span>'}
-            <h5 class="comment-user-name">${escapeText(author ? author.name : comment.username)}</h5>
+            <h5 class="comment-user-name">${escapeText(author?.name || comment.username)}</h5>
             <p class="comment-date">${localizeDate(comment.date)}</p>
         </div>
         <div class="comment-text-wrapper">
@@ -66,19 +190,25 @@ const singleCommentTemplate = ({comment, author, active, editComment}) =>
                         : ""
                 }
                 ${
-                    !active && comment.answers.length > 0
-                        ? `<a type="button" class="comment-expand-compress replies">+${comment.answers.length} ${gettext("replies")}</a>`
+                    !active && (comment.answers?.length || 0) > 0
+                        ? `<a type="button" class="comment-expand-compress replies">+${comment.answers!.length} ${gettext("replies")}</a>`
                         : ""
                 }
             </div>
     </div>`
 
 /** A template for the editor of a first comment before it has been saved (not an answer to a comment). */
-const firstCommentTemplate = ({comment, author}) =>
+const firstCommentTemplate = ({
+    comment,
+    author
+}: {
+    comment: Comment
+    author: ContactPerson | undefined
+}) =>
     `<div class="comment-item">
         <div class="comment-user">
             ${author ? avatarTemplate({user: author}) : '<span class="fw-string-avatar"></span>'}
-            <h5 class="comment-user-name">${escapeText(author ? author.name : comment.username)}</h5>
+            <h5 class="comment-user-name">${escapeText(author?.name || comment.username)}</h5>
             <p class="comment-date">${localizeDate(comment.date)}</p>
         </div>
         <div class="comment-text-wrapper">
@@ -86,7 +216,13 @@ const firstCommentTemplate = ({comment, author}) =>
         </div>
     </div>`
 
-const helpTemplate = ({help, filterOptions}) => {
+const helpTemplate = ({
+    help,
+    filterOptions
+}: {
+    help: {active?: boolean; help: unknown}
+    filterOptions: MarginBoxFilterOptions
+}) => {
     if (!filterOptions.help || !filterOptions.info) {
         return '<div class="margin-box help hidden"></div>'
     } else {
@@ -94,7 +230,13 @@ const helpTemplate = ({help, filterOptions}) => {
     }
 }
 
-const warningTemplate = ({warning, filterOptions}) => {
+const warningTemplate = ({
+    warning,
+    filterOptions
+}: {
+    warning: {active?: boolean; warning: string}
+    filterOptions: MarginBoxFilterOptions
+}) => {
     if (!filterOptions.warning || !filterOptions.info) {
         return '<div class="margin-box fw-warning hidden"></div>'
     } else {
@@ -111,6 +253,15 @@ const commentTemplate = ({
     user,
     docInfo,
     filterOptions
+}: {
+    comment: Comment
+    view: string
+    active: boolean
+    editComment: boolean
+    activeCommentAnswerId: number | string | undefined
+    user: EditorUser
+    docInfo: DocInfo
+    filterOptions: MarginBoxFilterOptions
 }) => {
     if (
         !filterOptions.comments ||
@@ -125,16 +276,16 @@ const commentTemplate = ({
         return '<div class="margin-box comment hidden"></div>'
     }
     const author =
-            comment.user === docInfo.owner.id
+            comment.user === docInfo.owner?.id
                 ? docInfo.owner
-                : docInfo.owner.contacts.find(
+                : docInfo.owner?.contacts.find(
                       contact =>
                           contact.id === comment.user && contact.type === "user"
                   ),
         assignedUser = comment.assignedUser
-            ? comment.assignedUser === docInfo.owner.id
+            ? comment.assignedUser === docInfo.owner?.id
                 ? docInfo.owner
-                : docInfo.owner.contacts.find(
+                : docInfo.owner?.contacts.find(
                       contact =>
                           contact.id === comment.assignedUser &&
                           contact.type === "user"
@@ -155,11 +306,11 @@ ${
 ${
     comment.comment.length === 0
         ? firstCommentTemplate({comment, author})
-        : singleCommentTemplate({comment, user, author, active, editComment})
+        : singleCommentTemplate({comment, author, active, editComment})
 }
     ${
         assignedUsername
-            ? `<div class="assigned-user">${gettext("Assigned to")} <em>${escapeText(assignedUsername)}</em></div>`
+            ? `<div class="assigned-user">${gettext("Assigned to")} <em>${escapeText(assignedUsername || "")}</em></div>`
             : ""
     }
     ${
@@ -169,9 +320,9 @@ ${
                       answerCommentTemplate({
                           answer,
                           author:
-                              answer.user === docInfo.owner.id
+                              answer.user === docInfo.owner?.id
                                   ? docInfo.owner
-                                  : docInfo.owner.contacts.find(
+                                  : docInfo.owner?.contacts.find(
                                         contact =>
                                             contact.id === answer.user &&
                                             contact.type === "user"
@@ -179,8 +330,7 @@ ${
                           commentId: comment.id,
                           active,
                           activeCommentAnswerId,
-                          user,
-                          docInfo
+                          user
                       })
                   )
                   .join("")
@@ -189,7 +339,7 @@ ${
     ${
         comment.id > 0 &&
         ((comment.user === user.id &&
-            !READ_ONLY_ROLES.includes(docInfo.access_rights)) ||
+            !READ_ONLY_ROLES.includes(docInfo.access_rights || "")) ||
             docInfo.access_rights === "write") &&
         !editComment
             ? `<span class="show-marginbox-options comment-option fa-solid fa-ellipsis-v" data-id="${comment.id}" data-commentUser="${comment.user}"
@@ -202,7 +352,7 @@ ${
         !activeCommentAnswerId &&
         !editComment &&
         0 < comment.comment.length &&
-        !READ_ONLY_ROLES.includes(docInfo.access_rights)
+        !READ_ONLY_ROLES.includes(docInfo.access_rights || "")
             ? `<div class="comment-item comment-answer comment-answer-editor">
                 <div id="answer-editor"></div>
             </div>`
@@ -212,7 +362,7 @@ ${
 `
 }
 
-const ACTIONS = {
+const ACTIONS: Record<string, string> = {
     insertion: gettext("Insertion"),
     deletion: gettext("Deletion"),
     format_change: gettext("Format change"),
@@ -240,13 +390,19 @@ const ACTIONS = {
     block_change_code_block: gettext("Changed into code block")
 }
 
-const FORMAT_MARK_NAMES = {
+const FORMAT_MARK_NAMES: Record<string, string> = {
     em: gettext("Emphasis"),
     strong: gettext("Strong"),
     underline: gettext("Underline")
 }
 
-const formatChangeTemplate = ({before, after}) => {
+const formatChangeTemplate = ({
+    before,
+    after
+}: {
+    before: string[]
+    after: string[]
+}) => {
     let returnText = ""
     if (before.length) {
         returnText += `<div class="format-change-info"><b>${gettext("Removed")}:</b> ${before.map(markName => FORMAT_MARK_NAMES[markName]).join(", ")}</div>`
@@ -257,7 +413,7 @@ const formatChangeTemplate = ({before, after}) => {
     return returnText
 }
 
-const BLOCK_NAMES = {
+const BLOCK_NAMES: Record<string, string> = {
     paragraph: gettext("Paragraph"),
     heading1: gettext("Heading 1"),
     heading2: gettext("Heading 2"),
@@ -270,10 +426,27 @@ const BLOCK_NAMES = {
     bullet_list: gettext("Bullet list")
 }
 
-const blockChangeTemplate = ({before}, node) =>
-    `<div class="format-change-info"><b>${gettext("Was")}:</b> ${BLOCK_NAMES[before.type]}${before.type === "ordered_list" && node.type.name === "ordered_list" ? `, ${gettext("start")}: ${before.attrs.order}` : ""}</div>`
+const blockChangeTemplate = (
+    {before}: {before: {type: string; attrs?: {order?: number}}},
+    node: Node
+) =>
+    `<div class="format-change-info"><b>${gettext("Was")}:</b> ${BLOCK_NAMES[before.type]}${before.type === "ordered_list" && node.type.name === "ordered_list" ? `, ${gettext("start")}: ${before.attrs?.order}` : ""}</div>`
 
-const trackTemplate = ({type, data, node, active, docInfo, filterOptions}) => {
+const trackTemplate = ({
+    type,
+    data,
+    node,
+    active,
+    docInfo,
+    filterOptions
+}: {
+    type: TrackMarginBox["type"]
+    data: TrackData
+    node: Node
+    active: boolean
+    docInfo: DocInfo
+    filterOptions: MarginBoxFilterOptions
+}) => {
     if (
         !filterOptions.track ||
         (filterOptions.trackAuthor && data.user !== filterOptions.trackAuthor)
@@ -282,9 +455,9 @@ const trackTemplate = ({type, data, node, active, docInfo, filterOptions}) => {
     }
 
     const author =
-            data.user === docInfo.owner.id
+            data.user === docInfo.owner?.id
                 ? docInfo.owner
-                : docInfo.owner.contacts.find(
+                : docInfo.owner?.contacts.find(
                       contact =>
                           contact.id === data.user && contact.type === "user"
                   ),
@@ -295,13 +468,13 @@ const trackTemplate = ({type, data, node, active, docInfo, filterOptions}) => {
             <div class="track-${type}">
                 <div class="comment-user">
                     ${author ? avatarTemplate({user: author}) : '<span class="fw-string-avatar"></span>'}
-                    <h5 class="comment-user-name">${escapeText(author ? author.name : data.username)}</h5>
+                    <h5 class="comment-user-name">${escapeText(author?.name || data.username)}</h5>
                     <p class="comment-date">${node.type.name === "text" ? `${gettext("ca.")} ` : ""}${localizeDate(data.date * 60000, "minutes")}</p>
                 </div>
                 <div class="track-title">
-                    ${interpolate(ACTIONS[nodeActionType] ? ACTIONS[nodeActionType] : ACTIONS[type], node.attrs, true)}
+                    ${interpolate(ACTIONS[nodeActionType] ? ACTIONS[nodeActionType] : ACTIONS[type], node.attrs as unknown as (string | number)[], true)}
                 </div>
-                ${type === "format_change" ? formatChangeTemplate(data) : type === "block_change" ? blockChangeTemplate(data, node) : ""}
+                ${type === "format_change" ? formatChangeTemplate({before: data.before as string[], after: data.after || []}) : type === "block_change" ? blockChangeTemplate({before: data.before as {type: string; attrs?: {order?: number}}}, node) : ""}
             </div>
             ${
                 docInfo.access_rights === "write"
@@ -319,6 +492,10 @@ export const marginboxFilterTemplate = ({
     marginBoxes,
     filterOptions,
     pastParticipants
+}: {
+    marginBoxes: MarginBox[]
+    filterOptions: MarginBoxFilterOptions
+    pastParticipants: Participant[]
 }) => {
     const comments = marginBoxes.find(box => box.type === "comment")
     const tracks = marginBoxes.find(box =>
@@ -447,6 +624,13 @@ export const globalCommentsTemplate = ({
     user,
     docInfo,
     filterOptions
+}: {
+    globalComments: CommentMarginBox[]
+    editComment: boolean
+    activeCommentAnswerId: number | string | undefined
+    user: EditorUser
+    docInfo: DocInfo
+    filterOptions: MarginBoxFilterOptions
 }) =>
     `<div id="global-comment-container"><div>${globalComments
         .map(mBox =>
@@ -471,6 +655,13 @@ export const marginBoxesTemplate = ({
     user,
     docInfo,
     filterOptions
+}: {
+    marginBoxes: MarginBox[]
+    editComment: boolean
+    activeCommentAnswerId: number | string | undefined
+    user: EditorUser
+    docInfo: DocInfo
+    filterOptions: MarginBoxFilterOptions
 }) =>
     `<div id="margin-box-container"><div>${marginBoxes
         .map(mBox => {
@@ -517,7 +708,15 @@ export const marginBoxesTemplate = ({
         })
         .join("")}</div></div>`
 
-export const marginBoxOptions = (comment, user, docInfo) => {
+function getAssignees(docInfo: DocInfo): ContactPerson[] {
+    return docInfo.owner ? [docInfo.owner, ...docInfo.owner.contacts] : []
+}
+
+export const marginBoxOptions = (
+    comment: MarginBoxOptionComment,
+    user: EditorUser,
+    docInfo: DocInfo
+) => {
     return `<div class="comment-answer-options fw-marginbox-options fw-pulldown">
                 ${
                     !comment.answer
@@ -537,12 +736,11 @@ export const marginBoxOptions = (comment, user, docInfo) => {
                     <div class="fw-pulldown marginbox-options-submenu">
                         <ul>
                             <li><span class="fw-pulldown-item unassign-comment" data-id="${comment.id}" title="${gettext("Remove user assignment from comment")}">${gettext("No-one")}</span></li>
-                        ${docInfo.owner.contacts
-                            .concat(docInfo.owner)
+                        ${getAssignees(docInfo)
                             .filter(contact => contact.type !== "userinvite")
                             .map(
-                                user =>
-                                    `<li><span class="fw-pulldown-item assign-comment" data-id="${comment.id}" data-user="${user.id}" data-username="${escapeText(user.name)}" title="${gettext("Assign comment to")} ${escapeText(user.name)}">${escapeText(user.name)}</span></li>`
+                                contact =>
+                                    `<li><span class="fw-pulldown-item assign-comment" data-id="${comment.id}" data-user="${contact.id}" data-username="${escapeText(contact.name || "")}" title="${gettext("Assign comment to")} ${escapeText(contact.name || "")}">${escapeText(contact.name || "")}</span></li>`
                             )
                             .join("")}
                         </ul>

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

@@ -1,4 +1,15 @@
 import {CodeBlockDialog} from "../../dialogs/index.js"
+import {NodeSelection} from "prosemirror-state"
+import type {Editor} from "../../types.js"
+
+interface MenuModelItem {
+    title: string
+    type: string
+    tooltip: string
+    order: number
+    action: (editor: Editor) => boolean
+    disabled?: (editor: Editor) => boolean
+}
 
 export const codeBlockMenuModel = () => ({
     content: [
@@ -7,19 +18,19 @@ export const codeBlockMenuModel = () => ({
             type: "action",
             tooltip: gettext("Configure the code block."),
             order: 1,
-            action: editor => {
+            action: (editor: Editor) => {
                 const dialog = new CodeBlockDialog(editor)
                 dialog.init()
                 return false
             },
-            disabled: editor => {
+            disabled: (editor: Editor) => {
                 const view = editor.currentView
                 const {selection} = view.state
 
                 // Check if we're in a code block
                 let inCodeBlock = false
                 if (
-                    selection.node &&
+                    selection instanceof NodeSelection &&
                     selection.node.type.name === "code_block"
                 ) {
                     inCodeBlock = true
@@ -41,12 +52,12 @@ export const codeBlockMenuModel = () => ({
             type: "action",
             tooltip: gettext("Remove the code block."),
             order: 2,
-            action: editor => {
+            action: (editor: Editor) => {
                 const view = editor.currentView
                 const tr = view.state.tr.deleteSelection()
                 view.dispatch(tr)
                 return false
             }
         }
-    ]
+    ] as MenuModelItem[]
 })

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

@@ -1,6 +1,13 @@
+import type {NodeSelection} from "prosemirror-state"
+
+import type {Editor} from "../../types.js"
+
 import {FigureDialog} from "../../dialogs/index.js"
 import {figureMenuAction} from "./utils.js"
 
+const selectedNode = (editor: Editor) =>
+    (editor.currentView.state.selection as NodeSelection).node
+
 export const figureMenuModel = () => ({
     content: [
         {
@@ -8,18 +15,17 @@ export const figureMenuModel = () => ({
             type: "action",
             tooltip: gettext("Configure the figure."),
             order: 1,
-            action: editor => {
+            action: (editor: Editor) => {
                 const dialog = new FigureDialog(editor)
                 dialog.init()
                 return false
             },
-            disabled: editor =>
+            disabled: (editor: Editor) =>
                 !(
-                    editor.currentView.state.selection.node?.type.name ===
-                    "figure"
+                    selectedNode(editor)?.type.name === "figure"
                 ) ||
-                editor.currentView.state.selection.node?.attrs.track?.find(
-                    track => track.type === "deletion"
+                selectedNode(editor)?.attrs.track?.find(
+                    (track: {type: string}) => track.type === "deletion"
                 )
         },
         {
@@ -28,18 +34,17 @@ export const figureMenuModel = () => ({
             icon: "trash-alt",
             tooltip: gettext("Delete the figure"),
             order: 2,
-            action: editor => {
+            action: (editor: Editor) => {
                 const tr = editor.currentView.state.tr
                 tr.deleteSelection()
                 editor.currentView.dispatch(tr)
             },
-            disabled: editor =>
+            disabled: (editor: Editor) =>
                 !(
-                    editor.currentView.state.selection.node?.type.name ===
-                    "figure"
+                    selectedNode(editor)?.type.name === "figure"
                 ) ||
-                editor.currentView.state.selection.node?.attrs.track?.find(
-                    track => track.type === "deletion"
+                selectedNode(editor)?.attrs.track?.find(
+                    (track: {type: string}) => track.type === "deletion"
                 )
         }
     ]
@@ -52,7 +57,7 @@ export const figureWidthMenuModel = () => ({
             type: "action",
             order: 0,
             value: "100",
-            action: figureDialog => {
+            action: (figureDialog: InstanceType<typeof FigureDialog>) => {
                 figureMenuAction("100", figureDialog)
             },
             selected: false
@@ -62,7 +67,7 @@ export const figureWidthMenuModel = () => ({
             type: "action",
             order: 1,
             value: "75",
-            action: figureDialog => {
+            action: (figureDialog: InstanceType<typeof FigureDialog>) => {
                 figureMenuAction("75", figureDialog)
             },
             selected: false
@@ -72,7 +77,7 @@ export const figureWidthMenuModel = () => ({
             type: "action",
             order: 2,
             value: "50",
-            action: figureDialog => {
+            action: (figureDialog: InstanceType<typeof FigureDialog>) => {
                 figureMenuAction("50", figureDialog)
             },
             selected: false
@@ -82,7 +87,7 @@ export const figureWidthMenuModel = () => ({
             type: "action",
             order: 3,
             value: "25",
-            action: figureDialog => {
+            action: (figureDialog: InstanceType<typeof FigureDialog>) => {
                 figureMenuAction("25", figureDialog)
             },
             selected: false

package/src/menus/figure/utils.ts

@@ -0,0 +1,13 @@
+import type {FigureDialog} from "../../dialogs/index.js"
+
+export const figureMenuAction = (
+    value: string,
+    figureDialog: FigureDialog
+): void => {
+    const buttonDOM = document.querySelector(".figure-width")
+    if (!buttonDOM?.firstElementChild) {
+        return
+    }
+    buttonDOM.firstElementChild.innerHTML = `${value} %`
+    figureDialog.width = value
+}