ContentSearcher.ts, added to ScriptInstallPrompt.ts and Settings.ts

Author: zsviczian

src/core/settings.ts

@@ -46,6 +46,7 @@ import { HotkeyEditor } from "src/shared/Dialogs/HotkeyEditor";
 import { getExcalidrawViews } from "src/utils/obsidianUtils";
 import { createSliderWithText } from "src/utils/sliderUtils";
 import { PDFExportSettingsComponent, PDFExportSettings } from "src/shared/Dialogs/PDFExportSettingsComponent";
+import { ContentSearcher } from "src/shared/components/ContentSearcher";
 
 export interface ExcalidrawSettings {
   disableDoubleClickTextEditing: boolean;
@@ -668,35 +669,8 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
     // Search and Settings to Clipboard
     // ------------------------------------------------
 
-    const settingActions = containerEl.createDiv("ex-settings-actions");
-    const settingActionsContainer = settingActions.createDiv("setting-item-description ex-setting-actions-container");
-    const clipboardActionEl = settingActionsContainer.createEl("a", {attr: { "aria-label": t("SETTINGS_COPY_TO_CLIPBOARD_ARIA") }});
-    clipboardActionEl.innerHTML = getIcon("clipboard-copy").outerHTML + t("SETTINGS_COPY_TO_CLIPBOARD");
-    clipboardActionEl.onClickEvent(e => {
-      // Get the full HTML content first
-      const fullHtml = containerEl.outerHTML;
-      
-      // Find the index of the first <hr> element
-      const startIndex = fullHtml.indexOf('<hr');
-      
-      // Extract HTML from the first <hr> element onwards
-      const html = startIndex > -1 ? fullHtml.substring(startIndex) : fullHtml;
-
-      function replaceHeading(html:string,level:number):string {
-        const re = new RegExp(`<summary class="excalidraw-setting-h${level}">([^<]+)<\/summary>`,"g");
-        return html.replaceAll(re,`<summary class="excalidraw-setting-h${level}"><h${level}>$1</h${level}></summary>`);
-      }
-
-      let x = replaceHeading(html,1);
-      x = replaceHeading(x,2);
-      x = replaceHeading(x,3);
-      x = replaceHeading(x,4);
-      x = x.replaceAll(/<div class="setting-item-name">([^<]+)<\/div>/g,"<h5>$1</h5>");
-
-      const md = htmlToMarkdown(x);
-      window.navigator.clipboard.writeText(md);
-      new Notice(t("SETTINGS_COPIED_TO_CLIPBOARD"));
-    });
+    const searcher = new ContentSearcher(containerEl);
+    containerEl.prepend(searcher.getSearchBarWrapper());
 
     // ------------------------------------------------
     // Saving

src/lang/locale/en.ts

@@ -192,6 +192,14 @@ export default {
   SAVE_IS_TAKING_LONG: "Saving your previous file is taking a long time. Please wait...",
   SAVE_IS_TAKING_VERY_LONG: "For better performance, consider splitting large drawings into several smaller files.",
 
+  //ContentSearcher.ts
+  SEARCH_COPIED_TO_CLIPBOARD: "Markdown ready on clipboard",
+  SEARCH_COPY_TO_CLIPBOARD_ARIA: "Copy the entire dialog to the clipboard as Markdown. Ideal for use with tools like ChatGPT to search and understand.",
+  SEARCH_NEXT: "Next",
+  SEARCH_PREVIOUS: "Previous",
+
+
+
   //settings.ts
   LINKS_BUGS_ARIA: "Report bugs and raise feature requsts on the plugin's GitHub page",
   LINKS_BUGS: "Report Bugs",
@@ -205,10 +213,6 @@ export default {
   LINKS_BOOK_ARIA: "Read Sketch Your Mind, my book on Visual Thinking",
   LINKS_BOOK: "Read the Book",
 
-  SETTINGS_COPIED_TO_CLIPBOARD: "Markdown ready on clipboard",
-  SETTINGS_COPY_TO_CLIPBOARD: "Copy as Text",
-  SETTINGS_COPY_TO_CLIPBOARD_ARIA: "Copy the entire settings dialog to the clipboard as Markdown. Ideal for use with tools like ChatGPT to search and understand the settings.",
-
   RELEASE_NOTES_NAME: "Display Release Notes after update",
   RELEASE_NOTES_DESC:
     "<b><u>Toggle ON:</u></b> Display release notes each time you update Excalidraw to a newer version.<br>" +

src/shared/Dialogs/ReleaseNotes.ts

@@ -25,8 +25,10 @@ export class ReleaseNotes extends Modal {
   async onClose() {
     this.contentEl.empty();
     await this.plugin.loadSettings();
-    this.plugin.settings.previousRelease = PLUGIN_VERSION
-    await this.plugin.saveSettings();
+    if(this.plugin.settings.previousRelease !== PLUGIN_VERSION) {
+      this.plugin.settings.previousRelease = PLUGIN_VERSION;
+      await this.plugin.saveSettings();
+    }
   }
 
   async createForm() {
@@ -39,7 +41,8 @@ export class ReleaseNotes extends Modal {
           .slice(0, 10)
           .join("\n\n---\n")
       : FIRST_RUN;
-    await MarkdownRenderer.renderMarkdown(
+    await MarkdownRenderer.render(
+      this.app,
       message,
       this.contentEl,
       "",

src/shared/Dialogs/ScriptInstallPrompt.ts

@@ -1,80 +1,28 @@
 import { MarkdownRenderer, Modal, Notice, request } from "obsidian";
 import ExcalidrawPlugin from "../../core/main";
-import { errorlog, escapeRegExp } from "../../utils/utils";
+import { errorlog } from "../../utils/utils";
 import { log } from "src/utils/debugHelper";
+import { ContentSearcher } from "../components/ContentSearcher";
 
 const URL =
   "https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/index-new.md";
 
 export class ScriptInstallPrompt extends Modal {
   private contentDiv: HTMLDivElement;
+
   constructor(private plugin: ExcalidrawPlugin) {
     super(plugin.app);
     //    this.titleEl.setText(t("INSTAL_MODAL_TITLE"));
   }
 
   async onOpen(): Promise<void> {
-    const searchBarWrapper = document.createElement("div");
-    searchBarWrapper.classList.add('search-bar-wrapper');
-
-
-    const searchBar = document.createElement("input");
-    searchBar.type = "text";
-    searchBar.id = "search-bar";
-    searchBar.placeholder = "Search...";
-    //searchBar.style.width = "calc(100% - 120px)"; // space for the buttons and hit count
-
-    const nextButton = document.createElement("button");
-    nextButton.textContent = "→";
-    nextButton.onclick = () => this.navigateSearchResults("next");
-
-    const prevButton = document.createElement("button");
-    prevButton.textContent = "←";
-    prevButton.onclick = () => this.navigateSearchResults("previous");
-
-    const hitCount = document.createElement("span");
-    hitCount.id = "hit-count";
-    hitCount.classList.add('hit-count');
-
-    searchBarWrapper.appendChild(prevButton);
-    searchBarWrapper.appendChild(nextButton);
-    searchBarWrapper.appendChild(searchBar);
-    searchBarWrapper.appendChild(hitCount);
-
-    this.contentEl.prepend(searchBarWrapper);
-
-    searchBar.addEventListener("input", (e) => {
-      this.clearHighlights();
-      const searchTerm = (e.target as HTMLInputElement).value;
-      
-      if (searchTerm && searchTerm.length > 0) {
-        this.highlightSearchTerm(searchTerm);
-        const totalHits = this.contentDiv.querySelectorAll("mark.search-highlight").length;
-        hitCount.textContent = totalHits > 0 ? `1/${totalHits}` : "";
-        setTimeout(()=>this.navigateSearchResults("next"));
-      } else {
-        hitCount.textContent = "";
-      }
-    });
-    
-
-    searchBar.addEventListener("keydown", (e) => {
-      // If Ctrl/Cmd + F is pressed, focus on search bar
-      if ((e.ctrlKey || e.metaKey) && e.key === "f") {
-        e.preventDefault();
-        searchBar.focus();
-      }
-      // If Enter is pressed, navigate to next result
-      else if (e.key === "Enter") {
-        e.preventDefault();
-        this.navigateSearchResults(e.shiftKey ? "previous" : "next");
-      }
-    });
-
     this.contentEl.classList.add("excalidraw-scriptengine-install");
     this.contentDiv = document.createElement("div");
     this.contentEl.appendChild(this.contentDiv);
 
+    const searcher = new ContentSearcher(this.contentDiv);
+    this.contentEl.prepend(searcher.getSearchBarWrapper());
+
     this.containerEl.classList.add("excalidraw-scriptengine-install");
     try {
       const source = await request({ url: URL });
@@ -111,99 +59,6 @@ export class ScriptInstallPrompt extends Modal {
     }
   }
 
-  highlightSearchTerm(searchTerm: string): void {
-    // Create a walker to traverse text nodes
-    const walker = document.createTreeWalker(
-      this.contentDiv,
-      NodeFilter.SHOW_TEXT,
-      {
-        acceptNode: (node: Text) => {
-          return node.nodeValue!.toLowerCase().includes(searchTerm.toLowerCase()) ?
-            NodeFilter.FILTER_ACCEPT : 
-            NodeFilter.FILTER_REJECT;
-        }
-      }
-    );
-
-    const nodesToReplace: Text[] = [];
-    while (walker.nextNode()) {
-      nodesToReplace.push(walker.currentNode as Text);
-    }
-
-    nodesToReplace.forEach(node => {
-      const nodeContent = node.nodeValue!;
-      const newNode = document.createDocumentFragment();
-
-      let lastIndex = 0;
-      let match;
-      const regex = new RegExp(escapeRegExp(searchTerm), 'gi');
-
-      // Iterate over all matches in the text node
-      while ((match = regex.exec(nodeContent)) !== null) {
-        const before = document.createTextNode(nodeContent.slice(lastIndex, match.index));
-        const highlighted = document.createElement('mark');
-        highlighted.className = 'search-highlight';
-        highlighted.textContent = match[0];
-        highlighted.classList.add('search-result');
-
-        newNode.appendChild(before);
-        newNode.appendChild(highlighted);
-
-        lastIndex = regex.lastIndex;
-      }
-      newNode.appendChild(document.createTextNode(nodeContent.slice(lastIndex)));
-      node.replaceWith(newNode);
-    });
-  }
-
-  
-  clearHighlights(): void {
-    this.contentDiv.querySelectorAll("mark.search-highlight").forEach((el) => {
-      el.outerHTML = el.innerHTML;
-    });
-  }
-  
-  navigateSearchResults(direction: "next" | "previous"): void {
-    const highlights: HTMLElement[] = Array.from(
-      this.contentDiv.querySelectorAll("mark.search-highlight")
-    );
-    
-    if (highlights.length === 0) return;
-  
-    const currentActiveIndex = highlights.findIndex((highlight) =>
-      highlight.classList.contains("active-highlight")
-    );
-  
-    if (currentActiveIndex !== -1) {
-      highlights[currentActiveIndex].classList.remove("active-highlight");
-      highlights[currentActiveIndex].style.border = "none";
-    }
-  
-    let nextActiveIndex = 0;
-    if (direction === "next") {
-      nextActiveIndex =
-        currentActiveIndex === highlights.length - 1
-          ? 0
-          : currentActiveIndex + 1;
-    } else if (direction === "previous") {
-      nextActiveIndex =
-        currentActiveIndex === 0
-          ? highlights.length - 1
-          : currentActiveIndex - 1;
-    }
-  
-    const nextActiveHighlight = highlights[nextActiveIndex];
-    nextActiveHighlight.classList.add("active-highlight");
-    nextActiveHighlight.scrollIntoView({
-      behavior: "smooth",
-      block: "nearest",
-    });
-    
-    // Update the hit count
-    const hitCount = document.getElementById("hit-count");
-    hitCount.textContent = `${nextActiveIndex + 1}/${highlights.length}`;
-  }  
-
   onClose(): void {
     this.contentEl.empty();
   }