diff --git a/src/core/settings.ts b/src/core/settings.ts index 2bb58dc..4a2fcd5 100644 --- a/src/core/settings.ts +++ b/src/core/settings.ts @@ -607,6 +607,33 @@ export class ExcalidrawSettingTab extends PluginSettingTab { containerEl.addClass("excalidraw-settings"); this.containerEl.empty(); + // ------------------------------------------------ + // Search and Settings to Clipboard + // ------------------------------------------------ + + const search = new ContentSearcher(containerEl); + + + const notebookLM = search.getSearchBarWrapper().createDiv("setting-item-description excalidraw-settings-links-container"); + notebookLM.createEl("a",{ + href: "https://notebooklm.google.com/notebook/42d76a2f-c11d-4002-9286-1683c43d0ab0", + attr: { + "aria-label": t("NOTEBOOKLM_LINK_ARIA"), + "style": "margin: auto;" + }}, + (a)=> { + //Lucide: message-circle-question-mark + a.innerHTML = `${ + t("NOTEBOOKLM_LINK_TEXT") + }`; + } + ); + + + // ------------------------------------------------ + // Promo links + // ------------------------------------------------ + const coffeeDiv = containerEl.createDiv("coffee"); coffeeDiv.addClass("ex-coffee-div"); const coffeeLink = coffeeDiv.createEl("a", { @@ -665,13 +692,6 @@ export class ExcalidrawSettingTab extends PluginSettingTab { }); }); - // ------------------------------------------------ - // Search and Settings to Clipboard - // ------------------------------------------------ - - const searcher = new ContentSearcher(containerEl); - containerEl.prepend(searcher.getSearchBarWrapper()); - // ------------------------------------------------ // Saving // ------------------------------------------------ diff --git a/src/lang/locale/en.ts b/src/lang/locale/en.ts index 9c91b40..9330949 100644 --- a/src/lang/locale/en.ts +++ b/src/lang/locale/en.ts @@ -201,6 +201,8 @@ export default { //settings.ts + NOTEBOOKLM_LINK_ARIA: "Ask NotebookLM for help about the plugin. This model is pre-loaded with all my video transcripts, release notes and other helpful content. Chat with NotebookLM to explore my 250+ videos and the Excalidraw documentation.", + NOTEBOOKLM_LINK_TEXT: "Learn the Plugin. Access the NotebookLM knowledgebase.", LINKS_BUGS_ARIA: "Report bugs and raise feature requsts on the plugin's GitHub page", LINKS_BUGS: "Report Bugs", LINKS_YT_ARIA: "Check out my YouTube channel to learn about Visual Thinking and Excalidraw", diff --git a/src/shared/Dialogs/ScriptInstallPrompt.ts b/src/shared/Dialogs/ScriptInstallPrompt.ts index 6c3f97f..e3bf107 100644 --- a/src/shared/Dialogs/ScriptInstallPrompt.ts +++ b/src/shared/Dialogs/ScriptInstallPrompt.ts @@ -20,8 +20,7 @@ export class ScriptInstallPrompt extends Modal { this.contentDiv = document.createElement("div"); this.contentEl.appendChild(this.contentDiv); - const searcher = new ContentSearcher(this.contentDiv); - this.contentEl.prepend(searcher.getSearchBarWrapper()); + new ContentSearcher(this.contentDiv); this.containerEl.classList.add("excalidraw-scriptengine-install"); try { diff --git a/src/shared/components/ContentSearcher.ts b/src/shared/components/ContentSearcher.ts index 9449de5..73b58e9 100644 --- a/src/shared/components/ContentSearcher.ts +++ b/src/shared/components/ContentSearcher.ts @@ -16,6 +16,7 @@ export class ContentSearcher { this.contentDiv = contentDiv; this.createSearchElements(); this.setupEventListeners(); + contentDiv.prepend(this.getSearchBarWrapper()); } /** @@ -239,12 +240,32 @@ export class ContentSearcher { const nextActiveHighlight = highlights[nextActiveIndex]; nextActiveHighlight.classList.add("active-highlight"); - nextActiveHighlight.scrollIntoView({ - behavior: "smooth", - block: "nearest", - }); + + // Expand all parent details elements + this.expandParentDetails(nextActiveHighlight); + + // Use setTimeout to ensure DOM has time to update after expanding details + setTimeout(() => { + nextActiveHighlight.scrollIntoView({ + behavior: "smooth", + block: "nearest", + }); + }, 100); // Update the hit count this.hitCount.textContent = `${nextActiveIndex + 1} / ${highlights.length}`; } + + /** + * Expand all parent
elements to make the element visible + */ + private expandParentDetails(element: HTMLElement): void { + let parent = element.parentElement; + while (parent) { + if (parent.tagName === "DETAILS") { + parent.setAttribute("open", ""); + } + parent = parent.parentElement; + } + } } diff --git a/styles.css b/styles.css index e3ee8dc..e3cad19 100644 --- a/styles.css +++ b/styles.css @@ -622,12 +622,15 @@ textarea.excalidraw-wysiwyg, .excalidraw input { } .excalidraw-settings-links-container { - display: flex; /* Align SVG and text horizontally */ - align-items: center; /* Center SVG and text vertically */ - text-decoration: none; /* Remove underline from links */ - color: inherit; /* Inherit text color */ - text-align: center; - gap: 0.3em; + align-items: center; + color: inherit; + display: flex; + gap: .3em; + text-align: center; + text-decoration: none; + flex-wrap: wrap; + justify-content: center; + flex-direction: row; } .excalidraw-settings-links-container a {