0ct0pu5/siyuan
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

🎨 https://github.com/siyuan-note/siyuan/issues/13343

Browse source
This commit is contained in:
Vanessa 2024-12-07 11:19:57 +08:00
parent 04806ea4b9
commit 594e7f8cee
7 changed files with 36 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/src/history/history.ts
View file

@ -15,7 +15,7 @@ import {openModel} from "../mobile/menu/model";
import {closeModel} from "../mobile/util/closePanel";
import {App} from "../index";
import {resizeSide} from "./resizeSide";
import {searchMarkRender, searchTextMarkRender} from "../protyle/render/searchMarkRender";
import {isSupportCSSHL, searchMarkRender, searchTextMarkRender} from "../protyle/render/searchMarkRender";
let historyEditor: Protyle;
@ -695,7 +695,7 @@ const bindEvent = (app: App, element: Element, dialog?: Dialog) => {
} else if (type === "doc") {
fetchPost("/api/history/getDocHistoryContent", {
historyPath: dataPath,
highlight: CSS && CSS.highlights ? true : false,
highlight: !isSupportCSSHL(),
k: (firstPanelElement.querySelector(".b3-text-field") as HTMLInputElement).value
}, (response) => {
if (response.data.isLargeDoc) {
@ -712,7 +712,7 @@ const bindEvent = (app: App, element: Element, dialog?: Dialog) => {
protyle: historyEditor.protyle,
action: [Constants.CB_GET_HISTORY, Constants.CB_GET_HTML],
});
searchMarkRender(historyEditor.protyle, historyEditor.protyle.wysiwyg.element.querySelectorAll('span[data-type~="search-mark"]'));
searchMarkRender(historyEditor.protyle, ["TODO"]);
}
});
}

6
app/src/layout/dock/Backlink.ts
View file

@ -10,7 +10,7 @@ import {openFileById} from "../../editor/util";
import {Protyle} from "../../protyle";
import {MenuItem} from "../../menus/Menu";
import {App} from "../../index";
import {searchMarkRender} from "../../protyle/render/searchMarkRender";
import {isSupportCSSHL, searchMarkRender} from "../../protyle/render/searchMarkRender";
export class Backlink extends Model {
public element: HTMLElement;
@ -437,7 +437,7 @@ export class Backlink extends Model {
fetchPost(isMention ? "/api/ref/getBackmentionDoc" : "/api/ref/getBacklinkDoc", {
defID: this.blockId,
refTreeID: docId,
highlight: CSS && CSS.highlights ? true : false,
highlight: !isSupportCSSHL(),
keyword: isMention ? this.inputsElement[1].value : this.inputsElement[0].value,
}, (response) => {
svgElement.removeAttribute("disabled");
@ -458,7 +458,7 @@ export class Backlink extends Model {
}
});
editor.protyle.notebookId = liElement.getAttribute("data-notebook-id");
searchMarkRender(editor.protyle, editor.protyle.wysiwyg.element.querySelectorAll('span[data-type~="search-mark"]'));
searchMarkRender(editor.protyle, ["TODO"]);
this.editors.push(editor);
});
}

7
app/src/protyle/index.ts
View file

@ -42,6 +42,7 @@ import {hasClosestBlock} from "./util/hasClosest";
import {setStorageVal} from "./util/compatibility";
import {merge} from "./util/merge";
import {getAllModels} from "../layout/getAll";
import {isSupportCSSHL} from "./render/searchMarkRender";
export class Protyle {
@ -73,15 +74,15 @@ export class Protyle {
options: mergedOptions,
block: {},
highlight: {
mark: CSS?.highlights ? new Highlight() : undefined,
markHL: CSS?.highlights ? new Highlight() : undefined,
mark: isSupportCSSHL() ? new Highlight() : undefined,
markHL: isSupportCSSHL() ? new Highlight() : undefined,
ranges: [],
rangeIndex: 0,
styleElement: document.createElement("style"),
}
};
if (CSS?.highlights) {
if (isSupportCSSHL()) {
const styleId = genUUID();
this.protyle.highlight.styleElement.dataset.uuid = styleId;
this.protyle.highlight.styleElement.textContent = `.protyle-wysiwyg::highlight(search-mark-${styleId}) {background-color: var(--b3-protyle-inline-mark-background);color: var(--b3-protyle-inline-mark-color);}

10
app/src/protyle/render/searchMarkRender.ts
View file

@ -1,5 +1,5 @@
export const searchMarkRender = (protyle: IProtyle, matchElements: NodeListOf<Element>) => {
if (matchElements.length === 0 || !CSS || !CSS.highlights) {
export const searchMarkRender = (protyle: IProtyle, keys: string[]) => {
if (!isSupportCSSHL()) {
return;
}
protyle.highlight.markHL.clear();
@ -30,7 +30,11 @@ export const searchMarkRender = (protyle: IProtyle, matchElements: NodeListOf<El
export const searchTextMarkRender = (element: HTMLElement, k: string[]) => {
if (!CSS || !CSS.highlights) {
if (!isSupportCSSHL()) {
return;
}
}
export const isSupportCSSHL = () => {
return !!(CSS && CSS.highlights);
}

7
app/src/protyle/scroll/saveScroll.ts
View file

@ -4,6 +4,7 @@ import {fetchPost} from "../../util/fetch";
import {onGet} from "../util/onGet";
import {Constants} from "../../constants";
import {setStorageVal} from "../util/compatibility";
import {isSupportCSSHL} from "../render/searchMarkRender";
export const saveScroll = (protyle: IProtyle, getObject = false) => {
if (!protyle.wysiwyg.element.firstElementChild || window.siyuan.config.readonly) {
@ -73,7 +74,7 @@ export const getDocByScroll = (options: {
query: options.protyle.query?.key,
queryMethod: options.protyle.query?.method,
queryTypes: options.protyle.query?.types,
highlight: CSS && CSS.highlights ? true : false,
highlight: !isSupportCSSHL(),
}, response => {
if (response.code === 1) {
fetchPost("/api/filetree/getDoc", {
@ -81,7 +82,7 @@ export const getDocByScroll = (options: {
query: options.protyle.query?.key,
queryMethod: options.protyle.query?.method,
queryTypes: options.protyle.query?.types,
highlight: CSS && CSS.highlights ? true : false,
highlight: !isSupportCSSHL(),
}, response => {
onGet({
data: response,
@ -113,7 +114,7 @@ export const getDocByScroll = (options: {
query: options.protyle.query?.key,
queryMethod: options.protyle.query?.method,
queryTypes: options.protyle.query?.types,
highlight: CSS && CSS.highlights ? true : false,
highlight: !isSupportCSSHL(),
}, response => {
onGet({
data: response,

10
app/src/protyle/util/reload.ts
View file

@ -4,7 +4,7 @@ import {getDocByScroll, saveScroll} from "../scroll/saveScroll";
import {renderBacklink} from "../wysiwyg/renderBacklink";
import {hasClosestByClassName} from "./hasClosest";
import {preventScroll} from "../scroll/preventScroll";
import {searchMarkRender} from "../render/searchMarkRender";
import {isSupportCSSHL, searchMarkRender} from "../render/searchMarkRender";
import {restoreLuteMarkdownSyntax} from "./paste";
export const reloadProtyle = (protyle: IProtyle, focus: boolean, updateReadonly?: boolean) => {
@ -40,12 +40,12 @@ export const reloadProtyle = (protyle: IProtyle, focus: boolean, updateReadonly?
fetchPost(isMention ? "/api/ref/getBackmentionDoc" : "/api/ref/getBacklinkDoc", {
defID: protyle.element.getAttribute("data-defid"),
refTreeID: protyle.block.rootID,
highlight: CSS && CSS.highlights ? true : false,
highlight: !isSupportCSSHL(),
keyword: isMention ? inputsElement[1].value : inputsElement[0].value,
}, response => {
protyle.options.backlinkData = isMention ? response.data.backmentions : response.data.backlinks;
renderBacklink(protyle, protyle.options.backlinkData);
searchMarkRender(protyle, protyle.wysiwyg.element.querySelectorAll('span[data-type~="search-mark"]'));
searchMarkRender(protyle, ["TODO"]);
});
}
} else {
@ -55,9 +55,9 @@ export const reloadProtyle = (protyle: IProtyle, focus: boolean, updateReadonly?
focus,
scrollAttr: saveScroll(protyle, true) as IScrollAttr,
updateReadonly,
cb () {
cb() {
if (protyle.query?.key) {
searchMarkRender(protyle, protyle.wysiwyg.element.querySelectorAll('span[data-type~="search-mark"]'));
searchMarkRender(protyle, ["TODO"]);
}
}
});

19
app/src/search/util.ts
View file

@ -51,7 +51,7 @@ import {addClearButton} from "../util/addClearButton";
import {checkFold} from "../util/noRelyPCFunction";
import {getUnRefList, openSearchUnRef, unRefMoreMenu} from "./unRef";
import {getDefaultType} from "./getDefault";
import {searchMarkRender} from "../protyle/render/searchMarkRender";
import {isSupportCSSHL, searchMarkRender} from "../protyle/render/searchMarkRender";
export const toggleReplaceHistory = (searchElement: Element) => {
const list = window.siyuan.storage[Constants.LOCAL_SEARCHKEYS];
@ -1161,7 +1161,7 @@ const renderNextSearchMark = (options: {
target: Element,
}) => {
const contentRect = options.edit.protyle.contentElement.getBoundingClientRect();
if (CSS?.highlights) {
if (isSupportCSSHL()) {
options.edit.protyle.highlight.markHL.clear();
options.edit.protyle.highlight.mark.clear();
options.edit.protyle.highlight.rangeIndex++;
@ -1221,7 +1221,7 @@ export const getArticle = (options: {
mode: zoomIn ? 0 : 3,
size: zoomIn ? Constants.SIZE_GET_MAX : window.siyuan.config.editor.dynamicLoadBlocks,
zoom: zoomIn,
highlight:CSS && CSS.highlights ? true : false,
highlight: !isSupportCSSHL(),
}, getResponse => {
options.edit.protyle.query = {
key: options.value || null,
@ -1234,17 +1234,18 @@ export const getArticle = (options: {
protyle: options.edit.protyle,
action: zoomIn ? [Constants.CB_GET_ALL, Constants.CB_GET_HTML] : [Constants.CB_GET_HTML],
});
const matchElements = options.edit.protyle.wysiwyg.element.querySelectorAll('span[data-type~="search-mark"]');
if (matchElements.length === 0) {
return;
}
const contentRect = options.edit.protyle.contentElement.getBoundingClientRect();
let matchRectTop: number;
if (CSS?.highlights) {
if (isSupportCSSHL()) {
options.edit.protyle.highlight.rangeIndex = 0;
searchMarkRender(options.edit.protyle, matchElements);
searchMarkRender(options.edit.protyle, ["TODO"]);
matchRectTop = options.edit.protyle.highlight.ranges[0].getBoundingClientRect().top;
} else {
const matchElements = options.edit.protyle.wysiwyg.element.querySelectorAll('span[data-type~="search-mark"]');
if (matchElements.length === 0) {
return;
}
matchElements[0].classList.add("search-mark--hl");
matchRectTop = matchElements[0].getBoundingClientRect().top;
}