优化高亮范围，去除面包屑的高亮

Misuzu2027 · Sep 19, 2024 · 8d689fc · 8d689fc
1 parent 81f4c83
commit 8d689fc
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 19 deletions.
diff --git a/plugin.json b/plugin.json
@@ -2,7 +2,7 @@
   "name": "syplugin-dual-doc-list",
   "author": "Misuzu2027",
   "url": "https://github.com/Misuzu2027/syplugin-dual-doc-list",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "minAppVersion": "3.0.12",
   "backends": [
     "all"

diff --git a/src/components/doc-list/DocListManager.ts b/src/components/doc-list/DocListManager.ts
@@ -111,9 +111,6 @@ export class DocListManager {
         }
 
 
-        console.log(fileTreeDocElement);
-
-
         this.embedDocListSvelte = new DocList({
             target: docListElement,
             props: {

diff --git a/src/components/doc-list/doc-list.svelte b/src/components/doc-list/doc-list.svelte
@@ -366,12 +366,15 @@
         // 如果被查找节点不是聚焦状态，节点文档是当前查看文档，节点的文档element 存在，文档element 包含查找的节点
         let activeDocTab = getActiveTab();
         if (activeDocTab) {
-            let activeNodeId = activeDocTab
+            let activeDocContentElement = activeDocTab.querySelector(
+                "div.protyle-content",
+            ) as HTMLElement;
+            let activeNodeId = activeDocContentElement
                 .querySelector("div.protyle-title.protyle-wysiwyg--attr")
                 ?.getAttribute("data-node-id");
             if (activeNodeId == blockId) {
                 let matchFocusRangePromise = highlightElementTextByCss(
-                    activeDocTab,
+                    activeDocContentElement,
                     lastKeywords,
                     previewProtyleMatchFocusIndex,
                 );
@@ -628,6 +631,7 @@
 
     async function afterOpenDocTab(docTabPromise: Promise<ITab>) {
         let docTab = await docTabPromise;
+        console.log("afterOpenDocTab");
         let lastDocumentContentElement = docTab.panelElement
             .children[1] as HTMLElement;
 

diff --git a/src/index.scss b/src/index.scss
@@ -1,3 +1,15 @@
+::highlight(dual-doc-list-search-result-mark) {
+    background-color: var(--b3-protyle-inline-mark-background);
+    color: var(--b3-protyle-inline-mark-color);
+}
+
+::highlight(dual-doc-list-search-result-focus) {
+    background-color: var(--b3-theme-primary-lighter);
+    color: var(--b3-protyle-inline-mark-color);
+}
+
+
+
 .box-path__icon {
     position: relative;
     // cursor: pointer;

diff --git a/src/service/search/search-sql.ts b/src/service/search/search-sql.ts
@@ -44,7 +44,7 @@ export function generateDocumentListSql(
 
 
     let contentParamSql = " ";
-    
+
     if (keywords && keywords.length > 0) {
         let concatConcatFieldSql = getConcatFieldSql("concatContent", includeConcatFields);
         columns.push(` ${concatConcatFieldSql} `);

diff --git a/src/service/search/search-util.ts b/src/service/search/search-util.ts
@@ -1,7 +1,7 @@
 import { EnvConfig } from "@/config/EnvConfig";
 import { BlockItem, DocumentQueryCriteria } from "@/models/search-model";
 import { SettingConfig } from "@/models/setting-model";
-import { getBlockIndex, getBlocksIndexes, listDocsByPath, sql } from "@/utils/api";
+import { getBlockIndex, getBlocksIndexes, getDocInfo, listDocsByPath, sql } from "@/utils/api";
 import { isArrayEmpty, isArrayNotEmpty } from "@/utils/array-util";
 import { convertIalStringToObject, convertIconInIal } from "@/utils/icon-util";
 import { containsAllKeywords, isStrBlank, isStrNotBlank, } from "@/utils/string-util";
@@ -125,14 +125,15 @@ export async function queryDocumentByDb(
         // console.log("queryDocumentByDb", filse);
     
         // 尝试使用 getDocInfo 接口，这个接口不错，不过数据量大了终归很费时间。决定从业务角度改变，舍弃子文档数量等排序方式。
-        // let docInfoPromises = [];
-        // for (const document of documentSearchResults) {
-        //     let apiPromise = getDocInfo(document.id);
-        //     docInfoPromises.push(apiPromise);
-        // }
-        // let docInfos = await Promise.all(docInfoPromises);
-        // console.log("queryDocumentByDb", docInfos);
     */
+    // let docInfoPromises = [];
+    // for (const document of documentSearchResults) {
+    //     let apiPromise = getDocInfo(document.id);
+    //     docInfoPromises.push(apiPromise);
+    // }
+    // let docInfos = await Promise.all(docInfoPromises);
+    // console.log("queryDocumentByDb", docInfos);
+
     let documentItems = processQueryResults(
         documentSearchResults,
         keywords,

diff --git a/src/utils/html-util.ts b/src/utils/html-util.ts
@@ -100,11 +100,11 @@ export async function highlightElementTextByCss(
     const searchResultsHighlight = new Highlight(...allMatchRanges);
 
     // Register the Highlight object in the registry.
-    CSS.highlights.set("search-result-mark", searchResultsHighlight);
+    CSS.highlights.set("dual-doc-list-search-result-mark", searchResultsHighlight);
 
     if (matchFocusRange) {
         CSS.highlights.set(
-            "search-result-focus",
+            "dual-doc-list-search-result-focus",
             new Highlight(matchFocusRange),
         );
         return matchFocusRange;
@@ -153,8 +153,8 @@ export function scrollByRange(matchRange: Range, position: ScrollLogicalPosition
 
 
 export function clearCssHighlights() {
-    CSS.highlights.delete("search-result-mark");
-    CSS.highlights.delete("search-result-focus");
+    CSS.highlights.delete("dual-doc-list-search-result-mark");
+    CSS.highlights.delete("dual-doc-list-search-result-focus");
 }
 
 // 查找包含指定元素的最近的滚动容器