@fiduswriter/editor 0.1.19 → 0.1.21

package/dist/marginboxes/index.d.ts

@@ -0,0 +1,107 @@
+import { DiffDOM, stringToObj } from "diff-dom";
+import type { Node } from "prosemirror-model";
+import type { Selection } from "prosemirror-state";
+import type { EditorView } from "prosemirror-view";
+import type { Editor } from "../types.js";
+import type { Comment, MarginBox, MarginBoxFilterOptions, Participant } from "./templates.js";
+interface SelectedChanges {
+    insertion?: {
+        from: number;
+        to: number;
+    };
+    deletion?: {
+        from: number;
+        to: number;
+    };
+    format_change?: {
+        from: number;
+        to: number;
+    };
+    block_change?: {
+        from: number;
+        to: number;
+    };
+}
+interface NodeTrack {
+    type: string;
+    data: Record<string, unknown>;
+}
+interface CommentInteractions {
+    createNewGlobalComment(): void;
+    deactivateSelectedChanges(): void;
+    activateComment(id: string): void;
+    isCurrentlyEditing(): boolean;
+    activateSelectedComment(view: EditorView): void;
+    editComment: boolean;
+    activeCommentAnswerId: number | string | undefined;
+    activeCommentId: number | string | undefined;
+    findCommentIds(node: Node): string[];
+}
+interface CommentStore {
+    commentDuringCreation?: {
+        comment: Comment;
+        inDOM?: boolean;
+    };
+    comments: Record<string, Comment>;
+    findComment(id: string): Comment | undefined;
+}
+interface CommentsMod {
+    interactions: CommentInteractions;
+    store: CommentStore;
+}
+interface CollabMod {
+    pastParticipants: Participant[];
+}
+interface FootnotesMod {
+    fnEditor: {
+        view: EditorView;
+    };
+}
+interface TrackMod {
+    activateTrack(view: string, type: string, pos: number): void;
+}
+interface MarginboxesEditorMod {
+    comments: CommentsMod;
+    collab: CollabMod;
+    footnotes: FootnotesMod;
+    track: TrackMod;
+}
+export declare class ModMarginboxes {
+    editor: Editor & {
+        mod: MarginboxesEditorMod;
+    };
+    activeCommentStyle: string;
+    filterOptions: MarginBoxFilterOptions;
+    commentColors: {
+        isMajor: string;
+        marker: string;
+        active: string;
+    };
+    dd: DiffDOM;
+    marginBoxesContainerString: string;
+    marginBoxesContainerObj: ReturnType<typeof stringToObj>;
+    globalCommentsContainerString: string;
+    globalCommentsContainerObj: ReturnType<typeof stringToObj>;
+    marginBoxesPlacementStyle: string;
+    marginBoxes: MarginBox[];
+    marginBoxesContainer: HTMLElement | null;
+    globalCommentsContainer: HTMLElement | null;
+    activeCommentStyleElement: HTMLElement | null;
+    trackOptionsStyleElement: HTMLElement | null;
+    constructor(editor: Editor);
+    init(): void;
+    bindEvents(): void;
+    closeAllMenus(selector?: string): void;
+    view(view: EditorView): false | undefined;
+    updateDOM(): Promise<void> | false;
+    fnPosToPos(fnPos: number): number;
+    getMarginBoxes(node: Node, pos: number, refPos: number, lastNode: Node, lastNodeTracks: NodeTrack[], view: string, marginBoxes: MarginBox[], referrers: number[], selectedChanges: SelectedChanges, selection: Selection): NodeTrack[];
+    closeAllLongComments(selector?: string): void;
+    positionMarginBoxOptions(marginBoxDialog: HTMLElement, showMarginboxOptionsBtn: Element): void;
+    scrollToGlobalComment(id: string): void;
+    commentOptionsOnScroll(): void;
+    toggleShowMore(element: Element): void;
+    setTrackStyle(): void;
+}
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/marginboxes/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/marginboxes/index.ts"],"names":[],"mappings":"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"}

package/dist/marginboxes/index.js

@@ -2,13 +2,29 @@ import { DiffDOM, stringToObj } from "diff-dom";
 import fastdom from "fastdom";
 import { cancelPromise, findTarget } from "fwtoolkit";
 import { READ_ONLY_ROLES } from "../index.js";
-import { getCommentDuringCreationDecoration, getFootnoteMarkers, getSelectedChanges } from "../state_plugins/index.js";
+import { getCommentDuringCreationDecoration, getFootnoteMarkers } from "../state_plugins/index.js";
+import { getSelectedChanges } from "../state_plugins/track/index.js";
 import { globalCommentsTemplate, marginBoxOptions, marginBoxesTemplate, marginboxFilterTemplate } from "./templates.js";
 /* Functions related to layouting of comments */
 export class ModMarginboxes {
+    editor;
+    activeCommentStyle;
+    filterOptions;
+    commentColors;
+    dd;
+    marginBoxesContainerString;
+    marginBoxesContainerObj;
+    globalCommentsContainerString;
+    globalCommentsContainerObj;
+    marginBoxesPlacementStyle;
+    marginBoxes;
+    marginBoxesContainer;
+    globalCommentsContainer;
+    activeCommentStyleElement;
+    trackOptionsStyleElement;
     constructor(editor) {
-        editor.mod.marginboxes = this;
         this.editor = editor;
+        this.editor.mod.marginboxes = this;
         this.activeCommentStyle = "";
         this.filterOptions = {
             track: true,
@@ -36,6 +52,10 @@ export class ModMarginboxes {
         this.globalCommentsContainerObj = stringToObj(this.globalCommentsContainerString);
         this.marginBoxesPlacementStyle = "";
         this.marginBoxes = [];
+        this.marginBoxesContainer = null;
+        this.globalCommentsContainer = null;
+        this.activeCommentStyleElement = null;
+        this.trackOptionsStyleElement = null;
     }
     init() {
         // Add two elements to hold dynamic CSS info about comments.
@@ -46,7 +66,7 @@ export class ModMarginboxes {
         this.trackOptionsStyleElement = document.getElementById("track-options-style");
         const newGlobalCommentButton = document.getElementById("new-global-comment");
         if (newGlobalCommentButton &&
-            READ_ONLY_ROLES.includes(this.editor.docInfo.access_rights)) {
+            READ_ONLY_ROLES.includes(this.editor.docInfo.access_rights || "")) {
             newGlobalCommentButton.classList.add("fw-hide");
         }
         this.bindEvents();
@@ -63,53 +83,68 @@ export class ModMarginboxes {
                     // do not react to clicks on checkboxes within sub menus
                     break;
                 case findTarget(event, ".margin-box-filter-comments-author", el):
-                    this.filterOptions.commentsAuthor = Number.parseInt(el.target.dataset.id);
-                    this.view(this.editor.currentView);
-                    break;
+                    {
+                        const target = el.target;
+                        this.filterOptions.commentsAuthor = Number.parseInt(target?.dataset.id || "0");
+                        this.view(this.editor.currentView);
+                        break;
+                    }
                 case findTarget(event, ".margin-box-filter-comments-assigned", el):
-                    this.filterOptions.assigned = Number.parseInt(el.target.dataset.id);
-                    this.view(this.editor.currentView);
-                    break;
-                case findTarget(event, ".show-marginbox-options-submenu", el):
+                    {
+                        const target = el.target;
+                        this.filterOptions.assigned = Number.parseInt(target?.dataset.id || "0");
+                        this.view(this.editor.currentView);
+                        break;
+                    }
+                case findTarget(event, ".show-marginbox-options-submenu", el): {
+                    const target = el.target;
                     this.closeAllMenus(".marginbox-options-submenu.fw-open");
-                    Array.from(el.target.parentElement.children)
-                        .find(node => node.matches(".marginbox-options-submenu"))
-                        .classList.add("fw-open");
+                    const submenu = Array.from(target?.parentElement?.children || []).find(node => node.matches(".marginbox-options-submenu"));
+                    submenu?.classList.add("fw-open");
                     break;
-                case findTarget(event, ".show-marginbox-options", el):
+                }
+                case findTarget(event, ".show-marginbox-options", el): {
+                    const target = el.target;
                     this.closeAllMenus();
-                    if (el.target.parentElement.classList.contains("margin-box-filter-button")) {
-                        Array.from(el.target.parentElement.children)
-                            .find(node => node.matches(".fw-marginbox-options"))
-                            .classList.add("fw-open");
+                    if (target?.parentElement?.classList.contains("margin-box-filter-button")) {
+                        const options = Array.from(target.parentElement.children).find(node => node.matches(".fw-marginbox-options"));
+                        if (options) {
+                            ;
+                            options.classList.add("fw-open");
+                        }
                     }
                     else {
                         let resolved = false;
-                        if (el.target.parentElement?.parentElement) {
+                        if (target?.parentElement?.parentElement) {
                             resolved =
-                                el.target.parentElement.parentElement.classList.contains("resolved");
+                                target.parentElement.parentElement.classList.contains("resolved");
                         }
                         const user = this.editor.user;
                         const docInfo = this.editor.docInfo;
-                        const elData = el.target.dataset;
+                        const elData = target.dataset;
                         const comment = {
                             answer: elData.hasOwnProperty("answer"),
-                            id: elData.id,
-                            commentId: elData.commentid,
-                            user: Number(elData.commentuser),
-                            resolved: resolved
+                            id: elData.id || "",
+                            commentId: elData.commentid || "",
+                            user: Number(elData.commentuser || 0),
+                            resolved
                         };
                         document.body.insertAdjacentHTML("beforeend", marginBoxOptions(comment, user, docInfo));
                         const marginboxOptions = document.body.querySelector(".comment-answer-options.fw-marginbox-options");
-                        marginboxOptions.classList.add("fw-open");
-                        this.positionMarginBoxOptions(marginboxOptions, el.target);
+                        if (marginboxOptions && target) {
+                            marginboxOptions.classList.add("fw-open");
+                            this.positionMarginBoxOptions(marginboxOptions, target);
+                        }
                     }
                     break;
-                case findTarget(event, ".margin-box-filter-track-author", el):
-                    this.filterOptions.trackAuthor = Number.parseInt(el.target.dataset.id);
+                }
+                case findTarget(event, ".margin-box-filter-track-author", el): {
+                    const target = el.target;
+                    this.filterOptions.trackAuthor = Number.parseInt(target?.dataset.id || "0");
                     this.setTrackStyle();
                     this.view(this.editor.currentView);
                     break;
+                }
                 case findTarget(event, "#margin-box-filter-track", el):
                     this.filterOptions.track = !this.filterOptions.track;
                     this.setTrackStyle();
@@ -123,31 +158,49 @@ export class ModMarginboxes {
                     this.filterOptions.info = !this.filterOptions.info;
                     this.view(this.editor.currentView);
                     break;
-                case findTarget(event, ".margin-box.comment.inactive", el):
-                    {
-                        const commentId = el.target.dataset.id;
-                        const comment = this.editor.mod.comments.store.findComment(commentId);
-                        if (!comment?.isGlobal) {
-                            this.editor.mod.comments.interactions.deactivateSelectedChanges();
-                        }
-                        this.editor.mod.comments.interactions.activateComment(commentId);
-                        this.scrollToGlobalComment(commentId);
+                case findTarget(event, ".margin-box.comment.inactive", el): {
+                    const target = el.target;
+                    const commentId = target?.dataset.id;
+                    if (!commentId) {
+                        break;
                     }
+                    const comment = this.editor.mod.comments.store.findComment(commentId);
+                    if (!comment?.isGlobal) {
+                        this.editor.mod.comments.interactions.deactivateSelectedChanges();
+                    }
+                    this.editor.mod.comments.interactions.activateComment(commentId);
+                    this.scrollToGlobalComment(commentId);
                     break;
+                }
                 case findTarget(event, ".margin-box.track.inactive", el): {
+                    const target = el.target;
                     let boxNumber = 0;
-                    let seekItem = el.target;
-                    while (seekItem.previousElementSibling) {
+                    let seekItem = target;
+                    while (seekItem?.previousElementSibling) {
                         boxNumber += 1;
                         seekItem = seekItem.previousElementSibling;
                     }
                     const box = this.marginBoxes[boxNumber];
-                    this.editor.mod.track.activateTrack(box.view, box.type, box.pos);
+                    switch (box.type) {
+                        case "insertion":
+                        case "deletion":
+                        case "format_change":
+                        case "block_change":
+                            this.editor.mod.track.activateTrack(box.view, box.type, box.pos);
+                            break;
+                        default:
+                            break;
+                    }
                     break;
                 }
                 case findTarget(event, ".margin-box.comment.fw-active .show-more-less", el):
-                    this.toggleShowMore(el);
-                    break;
+                    {
+                        const target = el.target;
+                        if (target) {
+                            this.toggleShowMore(target);
+                        }
+                        break;
+                    }
                 default:
                     this.closeAllMenus();
                     this.closeAllLongComments();
@@ -155,22 +208,22 @@ export class ModMarginboxes {
             }
         });
         document.body.addEventListener("change", evt => {
-            switch (evt.target.id) {
+            const target = evt.target;
+            switch (target?.id) {
                 case "margin-box-filter-comments-resolved":
-                    this.filterOptions.commentsResolved = evt.target.checked;
+                    this.filterOptions.commentsResolved = target.checked;
                     this.view(this.editor.currentView);
                     break;
                 case "margin-box-filter-comments-only-major":
-                    this.filterOptions.commentsOnlyMajor =
-                        evt.target.checked;
+                    this.filterOptions.commentsOnlyMajor = target.checked;
                     this.view(this.editor.currentView);
                     break;
                 case "margin-box-filter-info-help":
-                    this.filterOptions.help = evt.target.checked;
+                    this.filterOptions.help = target.checked;
                     this.view(this.editor.currentView);
                     break;
                 case "margin-box-filter-info-warning":
-                    this.filterOptions.warning = evt.target.checked;
+                    this.filterOptions.warning = target.checked;
                     this.view(this.editor.currentView);
                     break;
             }
@@ -180,7 +233,7 @@ export class ModMarginboxes {
     closeAllMenus(selector = ".marginbox-options-submenu.fw-open, .fw-marginbox-options.fw-open") {
         document.querySelectorAll(selector).forEach(el => {
             if (el.classList.contains("comment-answer-options")) {
-                el.parentElement.removeChild(el);
+                el.parentElement?.removeChild(el);
             }
             else {
                 el.classList.remove("fw-open");
@@ -193,11 +246,13 @@ export class ModMarginboxes {
             return false;
         }
         this.editor.mod.comments.interactions.activateSelectedComment(view);
+        return;
     }
     updateDOM() {
         // Handle the layout of the comments on the screen.
         // DOM write phase
-        const marginBoxes = [], globalComments = [], referrers = [], selectedChanges = getSelectedChanges(this.editor.currentView.state);
+        const marginBoxes = [], globalComments = [], referrers = [];
+        const selectedChanges = getSelectedChanges(this.editor.currentView.state);
         let fnIndex = 0, fnPosCount = 0, lastNodeTracks = [], lastNode = this.editor.view.state.doc;
         this.activeCommentStyle = "";
         this.editor.view.state.doc.descendants((node, pos) => {
@@ -220,10 +275,12 @@ export class ModMarginboxes {
                     }
                     lastFnNodeTracks = this.getMarginBoxes(fnNode, fnPos, pos, lastFnNode, lastFnNodeTracks, "footnote", marginBoxes, referrers, selectedChanges, this.editor.view.state.selection);
                     lastFnNode = fnNode;
+                    return;
                 });
                 fnIndex++;
                 fnPosCount += footnote.nodeSize;
             }
+            return;
         });
         // Add a comment that is currently under construction to the list.
         if (this.editor.mod.comments.store.commentDuringCreation) {
@@ -308,18 +365,22 @@ export class ModMarginboxes {
         if (this.marginBoxesContainerString !== marginBoxesHTML) {
             const newMarginBoxesContainerObj = stringToObj(marginBoxesHTML);
             const diff = this.dd.diff(this.marginBoxesContainerObj, newMarginBoxesContainerObj);
-            this.dd.apply(this.marginBoxesContainer, diff);
+            if (this.marginBoxesContainer) {
+                this.dd.apply(this.marginBoxesContainer, diff);
+            }
             this.marginBoxesContainerString = marginBoxesHTML;
             this.marginBoxesContainerObj = newMarginBoxesContainerObj;
         }
         if (this.globalCommentsContainerString !== globalCommentsHTML) {
             const newGlobalCommentsContainerObj = stringToObj(globalCommentsHTML);
             const diff = this.dd.diff(this.globalCommentsContainerObj, newGlobalCommentsContainerObj);
-            this.dd.apply(this.globalCommentsContainer, diff);
+            if (this.globalCommentsContainer) {
+                this.dd.apply(this.globalCommentsContainer, diff);
+            }
             this.globalCommentsContainerString = globalCommentsHTML;
             this.globalCommentsContainerObj = newGlobalCommentsContainerObj;
         }
-        if (this.activeCommentStyleElement.innerHTML != this.activeCommentStyle) {
+        if (this.activeCommentStyleElement) {
             this.activeCommentStyleElement.innerHTML = this.activeCommentStyle;
         }
         const marginBoxFilterHTML = marginboxFilterTemplate({
@@ -336,7 +397,8 @@ export class ModMarginboxes {
             marginBoxFilterElement.innerHTML = marginBoxFilterHTML;
         }
         return new Promise(resolve => {
-            fastdom.measure(() => {
+            const fd = fastdom;
+            fd.measure(() => {
                 // DOM read phase
                 let marginBoxesPlacementStyle = "";
                 if (getComputedStyle(marginBoxFilterElement).position ===
@@ -404,7 +466,7 @@ export class ModMarginboxes {
                         const pos = mboxPlacement.pos - initialOffset;
                         let css = "";
                         if (pos !== totalOffset) {
-                            let topMargin = Number.parseInt(pos - totalOffset);
+                            let topMargin = Math.trunc(pos - totalOffset);
                             if (selectionInTitle) {
                                 topMargin = Math.max(topMargin, 0);
                             }
@@ -416,7 +478,8 @@ export class ModMarginboxes {
                     })
                         .join("");
                     if (firstActiveIndex > -1) {
-                        const topMenuHeight = this.editor.dom.querySelector("header").offsetHeight;
+                        const topMenuHeight = this.editor.dom.querySelector("header")
+                            ?.offsetHeight || 0;
                         const refDistanceFromTop = this.editor.view.coordsAtPos(referrers[firstActiveIndex]).top;
                         if (refDistanceFromTop - topMenuHeight < 0 ||
                             refDistanceFromTop > window.innerHeight - 30) {
@@ -424,17 +487,19 @@ export class ModMarginboxes {
                             window.scrollBy({
                                 left: 0,
                                 top: scrollTop,
-                                behavior: "smooth",
-                                block: "center"
+                                behavior: "smooth"
                             });
                         }
                     }
                 }
-                fastdom.mutate(() => {
+                fd.mutate(() => {
                     //DOM write phase
                     if (this.marginBoxesPlacementStyle !==
                         marginBoxesPlacementStyle) {
-                        document.getElementById("margin-box-placement-style").innerHTML = marginBoxesPlacementStyle;
+                        const placementStyleEl = document.getElementById("margin-box-placement-style");
+                        if (placementStyleEl) {
+                            placementStyleEl.innerHTML = marginBoxesPlacementStyle;
+                        }
                         this.marginBoxesPlacementStyle =
                             marginBoxesPlacementStyle;
                     }
@@ -452,14 +517,14 @@ export class ModMarginboxes {
             .index(0), fnMarker = getFootnoteMarkers(this.editor.view.state)[fnIndex];
         return fnMarker.from;
     }
-    getMarginBoxes(node, pos, refPos, lastNode, lastNodeTracks, view, marginBoxes, referrers, selectedChanges, selection // Selection in main editor
-    ) {
+    getMarginBoxes(node, pos, refPos, lastNode, lastNodeTracks, view, marginBoxes, referrers, selectedChanges, selection) {
+        const selectionLike = selection;
         if (node.attrs.help) {
             // Help/instruction margin boxes
             const helpBox = {
                 type: "help",
                 data: {
-                    active: selection.$anchor.node(1) === node ? true : false,
+                    active: selectionLike.$anchor.node(1) === node ? true : false,
                     help: node.attrs.help
                 }
             };
@@ -470,7 +535,7 @@ export class ModMarginboxes {
             const warningBox = {
                 type: "warning",
                 data: {
-                    active: selection.node && selection.node === node,
+                    active: selectionLike.node && selectionLike.node === node,
                     warning: gettext("A cross reference has lost its target.")
                 }
             };
@@ -481,15 +546,17 @@ export class ModMarginboxes {
             mark.attrs.href.charAt(0) === "#" &&
             !mark.attrs.title)) {
             const linkMark = node.marks.find(mark => mark.type.name === "link");
-            const warningBox = {
-                type: "warning",
-                data: {
-                    active: linkMark.isInSet(selection.$anchor.marks()),
-                    warning: gettext("An internal link has lost its target.")
-                }
-            };
-            marginBoxes.push(warningBox);
-            referrers.push(refPos);
+            if (linkMark) {
+                const warningBox = {
+                    type: "warning",
+                    data: {
+                        active: linkMark.isInSet(selectionLike.$anchor.marks()),
+                        warning: gettext("An internal link has lost its target.")
+                    }
+                };
+                marginBoxes.push(warningBox);
+                referrers.push(refPos);
+            }
         }
         const commentIds = node.isInline || node.isLeaf
             ? this.editor.mod.comments.interactions.findCommentIds(node)
@@ -526,17 +593,20 @@ export class ModMarginboxes {
                 (["insertion", "deletion"].includes(track.type) ||
                     (track.type === "format_change" &&
                         track.data.before.length ===
-                            lastTrack.data.before.length &&
+                            lastTrack.data.before
+                                .length &&
                         track.data.after.length ===
-                            lastTrack.data.after.length &&
+                            lastTrack.data.after
+                                .length &&
                         track.data.before.every(markName => lastTrack.data.before.includes(markName)) &&
                         track.data.after.every(markName => lastTrack.data.after.includes(markName))) ||
                     (track.type === "block_change" &&
                         track.data.before.type ===
-                            lastTrack.data.before.type &&
-                        track.data.before.attrs.level ===
-                            lastTrack.data.before.attrs
-                                .level))))
+                            lastTrack.data.before
+                                .type &&
+                        track.data.before
+                            .attrs?.level ===
+                            lastTrack.data.before.attrs?.level))))
             : nodeTracks;
         tracks.forEach(track => {
             marginBoxes.push(Object.assign({
@@ -544,7 +614,8 @@ export class ModMarginboxes {
                 pos,
                 view,
                 active: selectedChanges[track.type] &&
-                    selectedChanges[track.type].from === pos
+                    selectedChanges[track.type]
+                        .from === pos
             }, track));
             referrers.push(refPos);
         });
@@ -590,16 +661,16 @@ export class ModMarginboxes {
     closeAllLongComments(selector = ".comment-p.show-more") {
         document.body.querySelectorAll(selector).forEach(el => {
             el.classList.remove("show-more");
-            const showMoreButton = el.parentElement.parentElement.querySelector(".show-more-less");
+            const showMoreButton = el.parentElement?.parentElement?.querySelector(".show-more-less");
             if (showMoreButton) {
-                showMoreButton.innerText = `${gettext("show more")}`;
+                showMoreButton.innerHTML = `${gettext("show more")}`;
             }
         });
     }
     positionMarginBoxOptions(marginBoxDialog, showMarginboxOptionsBtn) {
         const btnTop = showMarginboxOptionsBtn.getBoundingClientRect().top, scrollTopOffset = window.pageYOffset, mBoxRight = showMarginboxOptionsBtn
             .closest(".comment-answer-container")
-            .getBoundingClientRect().right;
+            ?.getBoundingClientRect().right || 0;
         marginBoxDialog.style.top = `${btnTop + scrollTopOffset + 30}px`;
         marginBoxDialog.style.left = `${mBoxRight - marginBoxDialog.getBoundingClientRect().width - 10}px`;
     }
@@ -608,7 +679,8 @@ export class ModMarginboxes {
         if (!commentDOM) {
             return;
         }
-        const topMenuHeight = this.editor.dom.querySelector("header").offsetHeight, rect = commentDOM.getBoundingClientRect();
+        const topMenuHeight = this.editor.dom.querySelector("header")
+            ?.offsetHeight || 0, rect = commentDOM.getBoundingClientRect();
         if (rect.top < topMenuHeight || rect.bottom > window.innerHeight - 30) {
             const scrollTop = rect.top - (topMenuHeight + 90);
             window.scrollBy({
@@ -635,13 +707,18 @@ export class ModMarginboxes {
         });
     }
     toggleShowMore(element) {
-        const commentText = element.target.parentElement.parentElement.querySelector(".comment-p");
+        const commentText = element.parentElement?.parentElement?.querySelector(".comment-p");
+        if (!commentText) {
+            return;
+        }
         commentText.classList.toggle("show-more");
         if (commentText.classList.contains("show-more")) {
-            element.target.innerText = `${gettext("show less")}`;
+            ;
+            element.innerText = `${gettext("show less")}`;
         }
         else {
-            element.target.innerText = `${gettext("show more")}`;
+            ;
+            element.innerText = `${gettext("show more")}`;
         }
     }
     setTrackStyle() {