@fiduswriter/editor 0.1.0

package/dist/marginboxes/index.js

@@ -0,0 +1,674 @@
+import { DiffDOM, stringToObj } from "diff-dom";
+import fastdom from "fastdom";
+import { cancelPromise, findTarget } from "fwtoolkit";
+import { READ_ONLY_ROLES } from "..";
+import { getCommentDuringCreationDecoration, getFootnoteMarkers, getSelectedChanges } from "../state_plugins";
+import { globalCommentsTemplate, marginBoxOptions, marginBoxesTemplate, marginboxFilterTemplate } from "./templates";
+/* Functions related to layouting of comments */
+export class ModMarginboxes {
+    constructor(editor) {
+        editor.mod.marginboxes = this;
+        this.editor = editor;
+        this.activeCommentStyle = "";
+        this.filterOptions = {
+            track: true,
+            comments: true,
+            info: true,
+            help: true,
+            warning: true,
+            commentsResolved: false,
+            author: 0,
+            assigned: 0
+        };
+        this.commentColors = {
+            isMajor: "#f4c9d9",
+            marker: "#f9f9f9",
+            active: "#fffacf"
+        };
+        this.dd = new DiffDOM({
+            valueDiffing: false
+        });
+        this.marginBoxesContainerString =
+            '<div id="margin-box-container"><div></div></div>';
+        this.marginBoxesContainerObj = stringToObj(this.marginBoxesContainerString);
+        this.globalCommentsContainerString =
+            '<div id="global-comment-container"><div></div></div>';
+        this.globalCommentsContainerObj = stringToObj(this.globalCommentsContainerString);
+        this.marginBoxesPlacementStyle = "";
+        this.marginBoxes = [];
+    }
+    init() {
+        // Add two elements to hold dynamic CSS info about comments.
+        document.body.insertAdjacentHTML("beforeend", '<style type="text/css" id="active-comment-style"></style><style type="text/css" id="track-options-style"></style><style type="text/css" id="margin-box-placement-style"></style>');
+        this.marginBoxesContainer = document.getElementById("margin-box-container");
+        this.globalCommentsContainer = document.getElementById("global-comment-container");
+        this.activeCommentStyleElement = document.getElementById("active-comment-style");
+        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)) {
+            newGlobalCommentButton.classList.add("fw-hide");
+        }
+        this.bindEvents();
+    }
+    bindEvents() {
+        // Bind all the click events related to the margin box filter
+        document.body.addEventListener("click", event => {
+            const el = {};
+            switch (true) {
+                case findTarget(event, "#new-global-comment", el):
+                    this.editor.mod.comments.interactions.createNewGlobalComment();
+                    break;
+                case findTarget(event, ".margin-box-filter-check", el):
+                    // 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;
+                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):
+                    this.closeAllMenus(".marginbox-options-submenu.fw-open");
+                    Array.from(el.target.parentElement.children)
+                        .find(node => node.matches(".marginbox-options-submenu"))
+                        .classList.add("fw-open");
+                    break;
+                case findTarget(event, ".show-marginbox-options", el):
+                    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");
+                    }
+                    else {
+                        let resolved = false;
+                        if (el.target.parentElement?.parentElement) {
+                            resolved =
+                                el.target.parentElement.parentElement.classList.contains("resolved");
+                        }
+                        const user = this.editor.user;
+                        const docInfo = this.editor.docInfo;
+                        const elData = el.target.dataset;
+                        const comment = {
+                            answer: elData.hasOwnProperty("answer"),
+                            id: elData.id,
+                            commentId: elData.commentid,
+                            user: Number(elData.commentuser),
+                            resolved: 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);
+                    }
+                    break;
+                case findTarget(event, ".margin-box-filter-track-author", el):
+                    this.filterOptions.trackAuthor = Number.parseInt(el.target.dataset.id);
+                    this.setTrackStyle();
+                    this.view(this.editor.currentView);
+                    break;
+                case findTarget(event, "#margin-box-filter-track", el):
+                    this.filterOptions.track = !this.filterOptions.track;
+                    this.setTrackStyle();
+                    this.view(this.editor.currentView);
+                    break;
+                case findTarget(event, "#margin-box-filter-comments", el):
+                    this.filterOptions.comments = !this.filterOptions.comments;
+                    this.view(this.editor.currentView);
+                    break;
+                case findTarget(event, "#margin-box-filter-info", el):
+                    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);
+                    }
+                    break;
+                case findTarget(event, ".margin-box.track.inactive", el): {
+                    let boxNumber = 0;
+                    let seekItem = el.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);
+                    break;
+                }
+                case findTarget(event, ".margin-box.comment.fw-active .show-more-less", el):
+                    this.toggleShowMore(el);
+                    break;
+                default:
+                    this.closeAllMenus();
+                    this.closeAllLongComments();
+                    break;
+            }
+        });
+        document.body.addEventListener("change", evt => {
+            switch (evt.target.id) {
+                case "margin-box-filter-comments-resolved":
+                    this.filterOptions.commentsResolved = evt.target.checked;
+                    this.view(this.editor.currentView);
+                    break;
+                case "margin-box-filter-comments-only-major":
+                    this.filterOptions.commentsOnlyMajor =
+                        evt.target.checked;
+                    this.view(this.editor.currentView);
+                    break;
+                case "margin-box-filter-info-help":
+                    this.filterOptions.help = evt.target.checked;
+                    this.view(this.editor.currentView);
+                    break;
+                case "margin-box-filter-info-warning":
+                    this.filterOptions.warning = evt.target.checked;
+                    this.view(this.editor.currentView);
+                    break;
+            }
+        }, false);
+        setTimeout(this.commentOptionsOnScroll, 100);
+    }
+    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);
+            }
+            else {
+                el.classList.remove("fw-open");
+            }
+        });
+    }
+    view(view) {
+        // Give up if the user is currently editing a comment.
+        if (this.editor.mod.comments.interactions.isCurrentlyEditing()) {
+            return false;
+        }
+        this.editor.mod.comments.interactions.activateSelectedComment(view);
+    }
+    updateDOM() {
+        // Handle the layout of the comments on the screen.
+        // DOM write phase
+        const marginBoxes = [], globalComments = [], referrers = [], 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) => {
+            if (node.attrs.hidden) {
+                return false;
+            }
+            lastNodeTracks = this.getMarginBoxes(node, pos, pos, lastNode, lastNodeTracks, "main", marginBoxes, referrers, selectedChanges, this.editor.view.state.selection);
+            lastNode = node;
+            if (node.type.name === "footnote") {
+                let lastFnNode = this.editor.mod.footnotes.fnEditor.view.state.doc, lastFnNodeTracks = [];
+                const footnote = lastFnNode.childCount > fnIndex
+                    ? lastFnNode.child(fnIndex)
+                    : false;
+                if (!footnote) {
+                    return;
+                }
+                this.editor.mod.footnotes.fnEditor.view.state.doc.nodesBetween(fnPosCount, fnPosCount + footnote.nodeSize, (fnNode, fnPos) => {
+                    if (fnPos < fnPosCount) {
+                        return false;
+                    }
+                    lastFnNodeTracks = this.getMarginBoxes(fnNode, fnPos, pos, lastFnNode, lastFnNodeTracks, "footnote", marginBoxes, referrers, selectedChanges, this.editor.view.state.selection);
+                    lastFnNode = fnNode;
+                });
+                fnIndex++;
+                fnPosCount += footnote.nodeSize;
+            }
+        });
+        // Add a comment that is currently under construction to the list.
+        if (this.editor.mod.comments.store.commentDuringCreation) {
+            const comment = this.editor.mod.comments.store.commentDuringCreation.comment;
+            if (comment.isGlobal) {
+                globalComments.push({
+                    type: "comment",
+                    data: comment,
+                    view: "main",
+                    pos: this.editor.view.state.doc.content.size,
+                    active: true
+                });
+                this.activeCommentStyle +=
+                    ".active-comment, .active-comment .comment {background-color: #fffacf !important;}";
+            }
+            else {
+                const deco = getCommentDuringCreationDecoration(this.editor.view.state);
+                let pos, view;
+                if (deco) {
+                    pos = deco.from;
+                    view = "main";
+                }
+                else {
+                    const fnDeco = getCommentDuringCreationDecoration(this.editor.mod.footnotes.fnEditor.view.state);
+                    if (fnDeco) {
+                        pos = this.fnPosToPos(fnDeco.from);
+                        view = "footnote";
+                    }
+                }
+                if (pos) {
+                    let index = 0;
+                    // We need the position of the new comment in relation to the other
+                    // comments in order to insert it in the right place
+                    while (referrers.length > index && referrers[index] < pos) {
+                        index++;
+                    }
+                    marginBoxes.splice(index, 0, {
+                        type: "comment",
+                        data: comment,
+                        view,
+                        pos,
+                        active: true
+                    });
+                    referrers.splice(index, 0, pos);
+                    this.activeCommentStyle +=
+                        ".active-comment, .active-comment .comment {background-color: #fffacf !important;}";
+                }
+            }
+        }
+        // Add global comments at the bottom of the main column.
+        Object.values(this.editor.mod.comments.store.comments).forEach(comment => {
+            if (!comment.isGlobal) {
+                return;
+            }
+            const active = comment.id ===
+                this.editor.mod.comments.interactions.activeCommentId;
+            globalComments.push({
+                type: "comment",
+                data: comment,
+                view: "main",
+                pos: this.editor.view.state.doc.content.size,
+                active
+            });
+        });
+        const marginBoxesHTML = marginBoxesTemplate({
+            marginBoxes,
+            user: this.editor.user,
+            docInfo: this.editor.docInfo,
+            editComment: this.editor.mod.comments.interactions.editComment,
+            activeCommentAnswerId: this.editor.mod.comments.interactions.activeCommentAnswerId,
+            filterOptions: this.filterOptions
+        });
+        const globalCommentsHTML = globalCommentsTemplate({
+            globalComments,
+            user: this.editor.user,
+            docInfo: this.editor.docInfo,
+            editComment: this.editor.mod.comments.interactions.editComment,
+            activeCommentAnswerId: this.editor.mod.comments.interactions.activeCommentAnswerId,
+            filterOptions: this.filterOptions
+        });
+        this.marginBoxes = marginBoxes;
+        if (this.marginBoxesContainerString !== marginBoxesHTML) {
+            const newMarginBoxesContainerObj = stringToObj(marginBoxesHTML);
+            const diff = this.dd.diff(this.marginBoxesContainerObj, newMarginBoxesContainerObj);
+            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);
+            this.globalCommentsContainerString = globalCommentsHTML;
+            this.globalCommentsContainerObj = newGlobalCommentsContainerObj;
+        }
+        if (this.activeCommentStyleElement.innerHTML != this.activeCommentStyle) {
+            this.activeCommentStyleElement.innerHTML = this.activeCommentStyle;
+        }
+        const marginBoxFilterHTML = marginboxFilterTemplate({
+            marginBoxes,
+            filterOptions: this.filterOptions,
+            pastParticipants: this.editor.mod.collab.pastParticipants
+        });
+        const marginBoxFilterElement = document.getElementById("margin-box-filter");
+        if (!marginBoxFilterElement) {
+            // User has navigated away already.
+            return cancelPromise();
+        }
+        if (marginBoxFilterElement.innerHTML != marginBoxFilterHTML) {
+            marginBoxFilterElement.innerHTML = marginBoxFilterHTML;
+        }
+        return new Promise(resolve => {
+            fastdom.measure(() => {
+                // DOM read phase
+                let marginBoxesPlacementStyle = "";
+                if (getComputedStyle(marginBoxFilterElement).position ===
+                    "fixed") {
+                    // We are in mobile/tablet mode. We don't need to place margin boxes.
+                }
+                else {
+                    const marginBoxesDOM = document.querySelectorAll("#margin-box-container .margin-box");
+                    if (marginBoxesDOM.length !== referrers.length ||
+                        !marginBoxesDOM.length) {
+                        // Number of comment boxes and referrers differ.
+                        // This isn't right. Abort.
+                        resolve();
+                        return;
+                    }
+                    const bodyTop = document.body.getBoundingClientRect().top, marginBoxPlacements = Array.from(marginBoxesDOM).map((mboxDOM, index) => {
+                        const mboxDOMRect = mboxDOM.getBoundingClientRect();
+                        return {
+                            height: mboxDOMRect.height,
+                            refPos: this.editor.view.coordsAtPos(referrers[index]).top - bodyTop
+                        };
+                    }), firstActiveIndex = marginBoxes.findIndex(mBox => mBox.active), firstActiveMboxPlacement = marginBoxPlacements[firstActiveIndex];
+                    let activeIndex = firstActiveIndex, currentPos = 0;
+                    while (activeIndex > -1) {
+                        const mboxPlacement = marginBoxPlacements[activeIndex];
+                        if (mboxPlacement.height === 0) {
+                            mboxPlacement.pos = currentPos;
+                        }
+                        else if (mboxPlacement === firstActiveMboxPlacement) {
+                            mboxPlacement.pos = mboxPlacement.refPos;
+                        }
+                        else {
+                            mboxPlacement.pos = Math.min(currentPos - 2 - mboxPlacement.height, mboxPlacement.refPos);
+                        }
+                        currentPos = mboxPlacement.pos;
+                        activeIndex--;
+                    }
+                    if (firstActiveIndex > -1) {
+                        currentPos =
+                            firstActiveMboxPlacement.pos +
+                                firstActiveMboxPlacement.height;
+                        activeIndex = firstActiveIndex + 1;
+                    }
+                    else {
+                        activeIndex = 0;
+                    }
+                    while (activeIndex < marginBoxPlacements.length) {
+                        const mboxPlacement = marginBoxPlacements[activeIndex];
+                        mboxPlacement.pos = Math.max(currentPos + 2, mboxPlacement.refPos);
+                        currentPos = mboxPlacement.pos + mboxPlacement.height;
+                        activeIndex++;
+                    }
+                    const initialOffset = document.body.classList.contains("header-closed")
+                        ? 72 + 90
+                        : 225 + 90;
+                    const $head = this.editor.view.state.selection.$head;
+                    const selectionInTitle = $head.depth > 0 &&
+                        Array.from({ length: $head.depth }, (_, index) => index + 1).some(depth => $head.node(depth).type.name === "title");
+                    let totalOffset = 0;
+                    marginBoxesPlacementStyle = marginBoxPlacements
+                        .map((mboxPlacement, index) => {
+                        if (mboxPlacement.height === 0) {
+                            return "";
+                        }
+                        const pos = mboxPlacement.pos - initialOffset;
+                        let css = "";
+                        if (pos !== totalOffset) {
+                            let topMargin = Number.parseInt(pos - totalOffset);
+                            if (selectionInTitle) {
+                                topMargin = Math.max(topMargin, 0);
+                            }
+                            css += `#margin-box-container div.margin-box:nth-of-type(${index + 1}) {margin-top: ${topMargin}px;}\n`;
+                            totalOffset += topMargin;
+                        }
+                        totalOffset += mboxPlacement.height;
+                        return css;
+                    })
+                        .join("");
+                    if (firstActiveIndex > -1) {
+                        const topMenuHeight = this.editor.dom.querySelector("header").offsetHeight;
+                        const refDistanceFromTop = this.editor.view.coordsAtPos(referrers[firstActiveIndex]).top;
+                        if (refDistanceFromTop - topMenuHeight < 0 ||
+                            refDistanceFromTop > window.innerHeight - 30) {
+                            const scrollTop = refDistanceFromTop - (topMenuHeight + 90);
+                            window.scrollBy({
+                                left: 0,
+                                top: scrollTop,
+                                behavior: "smooth",
+                                block: "center"
+                            });
+                        }
+                    }
+                }
+                fastdom.mutate(() => {
+                    //DOM write phase
+                    if (this.marginBoxesPlacementStyle !==
+                        marginBoxesPlacementStyle) {
+                        document.getElementById("margin-box-placement-style").innerHTML = marginBoxesPlacementStyle;
+                        this.marginBoxesPlacementStyle =
+                            marginBoxesPlacementStyle;
+                    }
+                    if (this.editor.mod.comments.store.commentDuringCreation) {
+                        this.editor.mod.comments.store.commentDuringCreation.inDOM = true;
+                    }
+                    resolve();
+                });
+            });
+        });
+    }
+    fnPosToPos(fnPos) {
+        const fnIndex = this.editor.mod.footnotes.fnEditor.view.state.doc
+            .resolve(fnPos)
+            .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
+    ) {
+        if (node.attrs.help) {
+            // Help/instruction margin boxes
+            const helpBox = {
+                type: "help",
+                data: {
+                    active: selection.$anchor.node(1) === node ? true : false,
+                    help: node.attrs.help
+                }
+            };
+            marginBoxes.push(helpBox);
+            referrers.push(refPos);
+        }
+        if (node.type.name === "cross_reference" && !node.attrs.title) {
+            const warningBox = {
+                type: "warning",
+                data: {
+                    active: selection.node && selection.node === node,
+                    warning: gettext("A cross reference has lost its target.")
+                }
+            };
+            marginBoxes.push(warningBox);
+            referrers.push(refPos);
+        }
+        if (node.marks.find(mark => mark.type.name === "link" &&
+            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);
+        }
+        const commentIds = node.isInline || node.isLeaf
+            ? this.editor.mod.comments.interactions.findCommentIds(node)
+            : [];
+        const nodeTracks = node.attrs.track
+            ? node.attrs.track.map(track => {
+                const nodeTrack = {
+                    type: track.type,
+                    data: {
+                        user: track.user,
+                        username: track.username,
+                        date: track.date
+                    }
+                };
+                if (track.type === "block_change") {
+                    nodeTrack.data.before = track.before;
+                }
+                return nodeTrack;
+            })
+            : node.marks
+                .filter(mark => ["deletion", "format_change"].includes(mark.type.name) ||
+                (mark.type.name === "insertion" &&
+                    !mark.attrs.approved))
+                .map(mark => ({ type: mark.type.name, data: mark.attrs }));
+        // Filter out trackmarks already present in the last node (if it's an inline node).
+        const tracks = node.isInline === lastNode.isInline
+            ? nodeTracks.filter(track => !lastNodeTracks.find(lastTrack => track.type === lastTrack.type &&
+                track.data.user === lastTrack.data.user &&
+                track.data.date === lastTrack.data.date &&
+                (node.isInline || // block level changes almost always need new boxes
+                    (node.type.name === "paragraph" &&
+                        lastNode.type.name === "list_item" &&
+                        lastTrack.type === "insertion")) && // Don't show first paragraphs in list items.
+                (["insertion", "deletion"].includes(track.type) ||
+                    (track.type === "format_change" &&
+                        track.data.before.length ===
+                            lastTrack.data.before.length &&
+                        track.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))))
+            : nodeTracks;
+        tracks.forEach(track => {
+            marginBoxes.push(Object.assign({
+                node,
+                pos,
+                view,
+                active: selectedChanges[track.type] &&
+                    selectedChanges[track.type].from === pos
+            }, track));
+            referrers.push(refPos);
+        });
+        if (!commentIds.length && !tracks.length) {
+            return nodeTracks;
+        }
+        commentIds.forEach(commentId => {
+            const comment = this.editor.mod.comments.store.findComment(commentId);
+            if (!comment ||
+                (this.filterOptions.commentsOnlyMajor && !comment.isMajor) ||
+                (!this.filterOptions.commentsResolved && comment.resolved)) {
+                // We have no comment with this ID. Ignore the referrer.
+                return;
+            }
+            if (marginBoxes.find(marginBox => marginBox.data === comment)) {
+                // comment already placed
+                return;
+            }
+            const active = comment.id ===
+                this.editor.mod.comments.interactions.activeCommentId;
+            if (this.filterOptions.comments) {
+                if (active) {
+                    this.activeCommentStyle += `.comment[data-id="${comment.id}"], .comment[data-id="${comment.id}"] .comment {background-color: ${this.commentColors.active} !important;}`;
+                }
+                else if (comment.isMajor) {
+                    this.activeCommentStyle += `#paper-editable .comment[data-id="${comment.id}"] {background-color: ${this.commentColors.isMajor};}`;
+                }
+                else {
+                    this.activeCommentStyle += `#paper-editable .comment[data-id="${comment.id}"] {background-color: ${this.commentColors.marker};}`;
+                }
+            }
+            marginBoxes.push({
+                type: "comment",
+                data: comment,
+                pos,
+                view,
+                active
+            });
+            referrers.push(refPos);
+        });
+        return nodeTracks;
+    }
+    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");
+            if (showMoreButton) {
+                showMoreButton.innerText = `${gettext("show more")}`;
+            }
+        });
+    }
+    positionMarginBoxOptions(marginBoxDialog, showMarginboxOptionsBtn) {
+        const btnTop = showMarginboxOptionsBtn.getBoundingClientRect().top, scrollTopOffset = window.pageYOffset, mBoxRight = showMarginboxOptionsBtn
+            .closest(".comment-answer-container")
+            .getBoundingClientRect().right;
+        marginBoxDialog.style.top = `${btnTop + scrollTopOffset + 30}px`;
+        marginBoxDialog.style.left = `${mBoxRight - marginBoxDialog.getBoundingClientRect().width - 10}px`;
+    }
+    scrollToGlobalComment(id) {
+        const commentDOM = document.querySelector(`#global-comments #margin-box-${id}`);
+        if (!commentDOM) {
+            return;
+        }
+        const topMenuHeight = this.editor.dom.querySelector("header").offsetHeight, rect = commentDOM.getBoundingClientRect();
+        if (rect.top < topMenuHeight || rect.bottom > window.innerHeight - 30) {
+            const scrollTop = rect.top - (topMenuHeight + 90);
+            window.scrollBy({
+                left: 0,
+                top: scrollTop,
+                behavior: "smooth"
+            });
+        }
+    }
+    commentOptionsOnScroll() {
+        document
+            .querySelectorAll(".comment-answer-container")
+            .forEach(element => {
+            element.addEventListener("scroll", () => {
+                const scrollTop = element.scrollTop;
+                const marginBoxOption = Array.from(element.children).find(node => node.matches(".show-marginbox-options"));
+                if (scrollTop > 50) {
+                    marginBoxOption?.classList.add("fw-hide");
+                }
+                else {
+                    marginBoxOption?.classList.remove("fw-hide");
+                }
+            });
+        });
+    }
+    toggleShowMore(element) {
+        const commentText = element.target.parentElement.parentElement.querySelector(".comment-p");
+        commentText.classList.toggle("show-more");
+        if (commentText.classList.contains("show-more")) {
+            element.target.innerText = `${gettext("show less")}`;
+        }
+        else {
+            element.target.innerText = `${gettext("show more")}`;
+        }
+    }
+    setTrackStyle() {
+        if (!this.filterOptions.track) {
+            this.trackOptionsStyleElement.innerHTML = `span.insertion, .selected-insertion, .selected-format_change, .selected-block_change {
+                color: inherit !important;
+                background-color: inherit !important;
+            }
+            span.deletion {
+                display: none;
+            }`;
+        }
+        else if (this.filterOptions.trackAuthor) {
+            this.trackOptionsStyleElement.innerHTML = `span.insertion:not([data-user="${this.filterOptions.trackAuthor}"]),
+            span.insertion:not([data-user="${this.filterOptions.trackAuthor}"]) .selected-insertion,
+            .selected-format_change:not([data-user="${this.filterOptions.trackAuthor}"]),
+            .selected-block_change:not([data-user="${this.filterOptions.trackAuthor}"]) {
+                color: inherit !important;
+                background-color: inherit !important;
+            }
+            span.deletion:not([data-user="${this.filterOptions.trackAuthor}"]) {
+                display: none;
+            }`;
+        }
+        else {
+            this.trackOptionsStyleElement.innerHTML = "";
+        }
+    }
+}
+//# sourceMappingURL=index.js.map