diff --git a/app/appearance/themes/daylight/theme.css b/app/appearance/themes/daylight/theme.css index b57815604..0b5d18c23 100644 --- a/app/appearance/themes/daylight/theme.css +++ b/app/appearance/themes/daylight/theme.css @@ -95,8 +95,8 @@ --b3-width-transition: width .2s cubic-bezier(0, 0, .2, 1) 0ms; /* 阴影 */ - --b3-point-shadow: 0 3px 6px rgba(140,149,159,0.15); - --b3-dialog-shadow: 0 8px 24px rgba(140,149,159,0.2); + --b3-point-shadow: 0 3px 6px rgba(140, 149, 159, 0.15); + --b3-dialog-shadow: 0 8px 24px rgba(140, 149, 159, 0.2); /* 图表颜色 */ --b3-graph-p-point: #076f7e; @@ -136,6 +136,7 @@ --b3-protyle-inline-s-color: #202124; --b3-protyle-inline-link-color: #4285f4; --b3-protyle-inline-mark-background: rgb(252, 212, 126); + --b3-protyle-inline-mark-hl-background: #fffd38; --b3-protyle-inline-mark-color: #202124; --b3-protyle-inline-tag-color: #5f6368; --b3-protyle-inline-blockref-color: #8250df; diff --git a/app/appearance/themes/midnight/theme.css b/app/appearance/themes/midnight/theme.css index c31b595d9..ae410cc76 100644 --- a/app/appearance/themes/midnight/theme.css +++ b/app/appearance/themes/midnight/theme.css @@ -136,6 +136,7 @@ --b3-protyle-inline-s-color: #e8eaed; --b3-protyle-inline-link-color: #8ab4f8; --b3-protyle-inline-mark-background: rgb(50, 89, 61); + --b3-protyle-inline-mark-hl-background: #fffd38; --b3-protyle-inline-mark-color: #e8eaed; --b3-protyle-inline-tag-color: #9aa0a6; --b3-protyle-inline-blockref-color: #8957e5; diff --git a/app/src/assets/scss/protyle/_wysiwyg.scss b/app/src/assets/scss/protyle/_wysiwyg.scss index 1b67c3cf1..b7784ee16 100644 --- a/app/src/assets/scss/protyle/_wysiwyg.scss +++ b/app/src/assets/scss/protyle/_wysiwyg.scss @@ -186,10 +186,10 @@ span[data-type~="search-mark"] { background-color: var(--b3-protyle-inline-mark-background); color: var(--b3-protyle-inline-mark-color); - } - span.current-search-highlight-mark{ - background-color:lightgreen; + &.search-mark--hl { + background-color: var(--b3-protyle-inline-mark-hl-background);; + } } span[data-type="virtual-block-ref"] { diff --git a/app/src/search/util.ts b/app/src/search/util.ts index f95eab452..8a37d5d3d 100644 --- a/app/src/search/util.ts +++ b/app/src/search/util.ts @@ -486,21 +486,18 @@ export const genSearch = (config: ISearchOption, element: Element, closeCB?: () } else if (!target.classList.contains("b3-list-item--focus")) { searchPanelElement.querySelector(".b3-list-item--focus").classList.remove("b3-list-item--focus"); target.classList.add("b3-list-item--focus"); - target.removeAttribute("data-highlight-idx") getArticle({ edit, id: target.getAttribute("data-node-id"), k: getKey(target) }); searchInputElement.focus(); - } else { - // 点击相同搜索结果,根据是否按下ctrl键来决定重置高亮,还是高亮下一个 - highlightSearchItem({ + } else if (target.classList.contains("b3-list-item--focus")) { + renderNextSearchMark({ edit, id: target.getAttribute("data-node-id"), target, - isCtrl:event.ctrlKey - }) + }); searchInputElement.focus(); } }, Constants.TIMEOUT_DBLCLICK); @@ -1119,44 +1116,25 @@ const getKey = (element: HTMLElement) => { return [...new Set(keys)].join(" "); }; -const highlightSearchItem=(options: { +const renderNextSearchMark = (options: { id: string, edit: Protyle, - target?:any, - isCtrl?:boolean -})=>{ + target: Element, +}) => { let matchElement - let target=options.target - // 移除当前高亮的词 - options.edit.protyle.wysiwyg.element.querySelector(".current-search-highlight-mark")?.classList.remove("current-search-highlight-mark") - if(target){ - let hl_idx_s=target.getAttribute("data-highlight-idx") - let allMatchElements = options.edit.protyle.wysiwyg.element.querySelectorAll(`div[data-node-id="${options.id}"] span[data-type~="search-mark"]`); - if(allMatchElements.length>0){ - // 将要高亮的索引 - let idx_to_hl - if(!options.isCtrl){ - // 重置,回到第一个高亮 - idx_to_hl=0 - }else { - // 高亮下一个 - if (hl_idx_s == null){ - idx_to_hl=1 - }else { - let hl_idx =parseInt(hl_idx_s) - idx_to_hl=hl_idx+1 - } - } - if (idx_to_hl >= allMatchElements.length) { - idx_to_hl=0 - } - target.setAttribute("data-highlight-idx",String(idx_to_hl)) - matchElement=allMatchElements[idx_to_hl] + const allMatchElements = Array.from(options.edit.protyle.wysiwyg.element.querySelectorAll(`div[data-node-id="${options.id}"] span[data-type~="search-mark"]`)); + allMatchElements.find((item, itemIndex) => { + if (item.classList.contains("search-mark--hl")) { + item.classList.remove("search-mark--hl") + matchElement = allMatchElements[itemIndex + 1] + return; } + }) + if (!matchElement) { + matchElement = allMatchElements[0] } if (matchElement) { - // 高亮并居中 - matchElement.classList.add("current-search-highlight-mark") + matchElement.classList.add("search-mark--hl"); const contentRect = options.edit.protyle.contentElement.getBoundingClientRect(); options.edit.protyle.contentElement.scrollTop = options.edit.protyle.contentElement.scrollTop + matchElement.getBoundingClientRect().top - contentRect.top - contentRect.height / 2; } @@ -1179,7 +1157,7 @@ const getArticle = (options: { onGet(getResponse, options.edit.protyle, foldResponse.data ? [Constants.CB_GET_ALL, Constants.CB_GET_HTML] : [Constants.CB_GET_HL, Constants.CB_GET_HTML]); const matchElement = options.edit.protyle.wysiwyg.element.querySelector(`div[data-node-id="${options.id}"] span[data-type="search-mark"]`); if (matchElement) { - matchElement.classList.add("current-search-highlight-mark") + matchElement.classList.add("search-mark--hl"); const contentRect = options.edit.protyle.contentElement.getBoundingClientRect(); options.edit.protyle.contentElement.scrollTop = options.edit.protyle.contentElement.scrollTop + matchElement.getBoundingClientRect().top - contentRect.top - contentRect.height / 2; }