From bb381c134911077f62bf1110b3441dec6ce7f92a Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Fri, 10 Apr 2026 23:21:00 +0300
Subject: [PATCH] refactor(highlights): remove unnecessary logic in old layout
 (closes #5375)

---
 apps/client/src/widgets/highlights_list.ts | 97 ++--------------------
 1 file changed, 5 insertions(+), 92 deletions(-)

diff --git a/apps/client/src/widgets/highlights_list.ts b/apps/client/src/widgets/highlights_list.ts
index b6e3f2e6f0..512e8eff30 100644
--- a/apps/client/src/widgets/highlights_list.ts
+++ b/apps/client/src/widgets/highlights_list.ts
@@ -9,7 +9,6 @@ import appContext, { type EventData } from "../components/app_context.js";
 import type FNote from "../entities/fnote.js";
 import attributeService from "../services/attributes.js";
 import { t } from "../services/i18n.js";
-import katex from "../services/math.js";
 import options from "../services/options.js";
 import OnClickButtonWidget from "./buttons/onclick_button.js";
 import RightPanelWidget from "./right_panel_widget.js";
@@ -125,77 +124,6 @@ export default class HighlightsListWidget extends RightPanelWidget {
         this.triggerCommand("reEvaluateRightPaneVisibility");
     }
 
-    extractOuterTag(htmlStr: string | null) {
-        if (htmlStr === null) {
-            return null;
-        }
-        // Regular expressions that match only the outermost tag
-        const regex = /^<([a-zA-Z]+)([^>]*)>/;
-        const match = htmlStr.match(regex);
-        if (match) {
-            const tagName = match[1].toLowerCase(); // Extract tag name
-            const attributes = match[2].trim(); // Extract label attributes
-            return { tagName, attributes };
-        }
-        return null;
-    }
-
-    areOuterTagsConsistent(str1: string | null, str2: string | null) {
-        const tag1 = this.extractOuterTag(str1);
-        const tag2 = this.extractOuterTag(str2);
-        // If one of them has no label, returns false
-        if (!tag1 || !tag2) {
-            return false;
-        }
-        // Compare tag names and attributes to see if they are the same
-        return tag1.tagName === tag2.tagName && tag1.attributes === tag2.attributes;
-    }
-
-    /**
-     * Rendering formulas in strings using katex
-     *
-     * @param html Note's html content
-     * @returns The HTML content with mathematical formulas rendered by KaTeX.
-     */
-    async replaceMathTextWithKatax(html: string) {
-        const mathTextRegex = /<span class="math-tex">\\\(([\s\S]*?)\\\)<\/span>/g;
-        const matches = [...html.matchAll(mathTextRegex)];
-        let modifiedText = html;
-
-        if (matches.length > 0) {
-            // Process all matches asynchronously
-            for (const match of matches) {
-                const latexCode = match[1];
-                let rendered;
-
-                try {
-                    rendered = katex.renderToString(latexCode, {
-                        throwOnError: false
-                    });
-                } catch (e) {
-                    if (e instanceof ReferenceError && e.message.includes("katex is not defined")) {
-                        // Load KaTeX if it is not already loaded
-                        try {
-                            rendered = katex.renderToString(latexCode, {
-                                throwOnError: false
-                            });
-                        } catch (renderError) {
-                            console.error("KaTeX rendering error after loading library:", renderError);
-                            rendered = match[0]; // Fall back to original if error persists
-                        }
-                    } else {
-                        console.error("KaTeX rendering error:", e);
-                        rendered = match[0]; // Fall back to original on error
-                    }
-                }
-
-                // Replace the matched formula in the modified text
-                modifiedText = modifiedText.replace(match[0], rendered);
-            }
-        }
-        return modifiedText;
-    }
-
     async getHighlightList(content: string, optionsHighlightsList: string[]) {
         // matches a span containing background-color
         const regex1 = /<span[^>]*style\s*=\s*[^>]*background-color:[^>]*?>[\s\S]*?<\/span>/gi;
@@ -239,9 +167,6 @@ export default class HighlightsListWidget extends RightPanelWidget {
         const $highlightsList = $("<ol>");
         let prevEndIndex = -1,
             hlLiCount = 0;
-        let prevSubHtml: string | null = null;
-        // Used to determine if a string is only a formula
-        const onlyMathRegex = /^<span class="math-tex">\\\([^\)]*?\)<\/span>(?:<span class="math-tex">\\\([^\)]*?\)<\/span>)*$/;
 
         for (let match: RegExpMatchArray | null = null, hltIndex = 0; (match = combinedRegex.exec(content)) !== null; hltIndex++) {
             const subHtml = match[0];
@@ -257,25 +182,14 @@ export default class HighlightsListWidget extends RightPanelWidget {
                 // If the previous element is connected to this element in HTML, then concatenate them into one.
                 $highlightsList.children().last().append(subHtml);
             } else {
-                // TODO: can't be done with $(subHtml).text()?
-                //Can’t remember why regular expressions are used here, but modified to $(subHtml).text() works as expected
-                //const hasText = [...subHtml.matchAll(/(?<=^|>)[^><]+?(?=<|$)/g)].map(matchTmp => matchTmp[0]).join('').trim();
                 const hasText = $(subHtml).text().trim();
 
                 if (hasText) {
-                    const substring = content.substring(prevEndIndex, startIndex);
-                    //If the two elements have the same style and there are only formulas in between, append the formulas and the current element to the end of the previous element.
-                    if (this.areOuterTagsConsistent(prevSubHtml, subHtml) && onlyMathRegex.test(substring)) {
-                        const $lastLi = $highlightsList.children("li").last();
-                        $lastLi.append(await this.replaceMathTextWithKatax(substring));
-                        $lastLi.append(subHtml);
-                    } else {
-                        $highlightsList.append(
-                            $("<li>")
-                                .html(subHtml)
-                                .on("click", () => this.jumpToHighlightsList(findSubStr, hltIndex))
-                        );
-                    }
+                    $highlightsList.append(
+                        $("<li>")
+                            .html(subHtml)
+                            .on("click", () => this.jumpToHighlightsList(findSubStr, hltIndex))
+                    );
 
                     hlLiCount++;
                 } else {
@@ -284,7 +198,6 @@ export default class HighlightsListWidget extends RightPanelWidget {
                 }
             }
             prevEndIndex = endIndex;
-            prevSubHtml = subHtml;
         }
         return {
             $highlightsList,