Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-12-22 17:40:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

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

Browse source
This commit is contained in:
Vanessa 2024-12-02 00:10:03 +08:00
parent 3a53fd4a9a
commit fdee19e703
6 changed files with 16 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

10
app/src/assets/scss/protyle/_wysiwyg.scss
View file

@ -18,16 +18,6 @@
outline: none; outline: none;
} }
&::highlight(search-mark) {
background-color: var(--b3-protyle-inline-mark-background);
color: var(--b3-protyle-inline-mark-color);
}
&::highlight(search-mark-hl) {
background-color: var(--b3-theme-primary-lighter);
box-shadow: 0 0 0 .5px var(--b3-theme-on-background);
}
[data-node-id] { [data-node-id] {
position: relative; position: relative;

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

@ -77,9 +77,15 @@ export class Protyle {
markHL: new Highlight(), markHL: new Highlight(),
ranges: [], ranges: [],
rangeIndex: 0, rangeIndex: 0,
styleElement: document.createElement("style"),
} }
}; };
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);}
.protyle-wysiwyg::highlight(search-mark-hl-${styleId}) {background-color: var(--b3-theme-primary-lighter);box-shadow: 0 0 0 .5px var(--b3-theme-on-background);}`;
this.protyle.hint = new Hint(this.protyle); this.protyle.hint = new Hint(this.protyle);
if (mergedOptions.render.breadcrumb) { if (mergedOptions.render.breadcrumb) {
this.protyle.breadcrumb = new Breadcrumb(this.protyle); this.protyle.breadcrumb = new Breadcrumb(this.protyle);

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

@ -15,13 +15,15 @@ export const searchMarkRender = (protyle: IProtyle, matchElements: NodeListOf<El
item.setAttribute("data-type", item.getAttribute("data-type").replace(" search-mark", "").replace("search-mark ", "")); item.setAttribute("data-type", item.getAttribute("data-type").replace(" search-mark", "").replace("search-mark ", ""));
range.selectNodeContents(item); range.selectNodeContents(item);
} }
if (index === protyle.highlight.rangeIndex) { if (index === protyle.highlight.rangeIndex && !protyle.options.backlinkData) {
protyle.highlight.markHL.add(range); protyle.highlight.markHL.add(range);
} else { } else {
protyle.highlight.mark.add(range); protyle.highlight.mark.add(range);
} }
protyle.highlight.ranges.push(range); protyle.highlight.ranges.push(range);
}); });
CSS.highlights.set("search-mark", protyle.highlight.mark); CSS.highlights.set("search-mark-" + protyle.highlight.styleElement.dataset.uuid, protyle.highlight.mark);
CSS.highlights.set("search-mark-hl", protyle.highlight.markHL); if (!protyle.options.backlinkData) {
CSS.highlights.set("search-mark-hl-" + protyle.highlight.styleElement.dataset.uuid, protyle.highlight.markHL);
}
}; };

2
app/src/protyle/ui/initUI.ts
View file

@ -48,6 +48,8 @@ export const initUI = (protyle: IProtyle) => {
protyle.element.appendChild(protyle.toolbar.element); protyle.element.appendChild(protyle.toolbar.element);
protyle.element.appendChild(protyle.toolbar.subElement); protyle.element.appendChild(protyle.toolbar.subElement);
protyle.element.append(protyle.highlight.styleElement);
addLoading(protyle); addLoading(protyle);
setEditMode(protyle, protyle.options.mode); setEditMode(protyle, protyle.options.mode);

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

@ -1183,7 +1183,7 @@ const renderNextSearchMark = (options: {
return; return;
} }
let matchElement; let matchElement;
const allMatchElements = Array.from(options.edit.protyle.wysiwyg.element.querySelectorAll(`div[data-node-id="${options.id}"] span[data-type~="search-mark"]`)); const allMatchElements = Array.from(options.edit.protyle.wysiwyg.element.querySelectorAll('span[data-type~="search-mark"]'));
allMatchElements.find((item, itemIndex) => { allMatchElements.find((item, itemIndex) => {
if (item.classList.contains("search-mark--hl")) { if (item.classList.contains("search-mark--hl")) {
item.classList.remove("search-mark--hl"); item.classList.remove("search-mark--hl");
@ -1233,7 +1233,7 @@ export const getArticle = (options: {
protyle: options.edit.protyle, protyle: options.edit.protyle,
action: zoomIn ? [Constants.CB_GET_ALL, Constants.CB_GET_HTML] : [Constants.CB_GET_HTML], action: zoomIn ? [Constants.CB_GET_ALL, Constants.CB_GET_HTML] : [Constants.CB_GET_HTML],
}); });
const matchElements = options.edit.protyle.wysiwyg.element.querySelectorAll(`div[data-node-id="${options.id}"] span[data-type~="search-mark"]`); const matchElements = options.edit.protyle.wysiwyg.element.querySelectorAll('span[data-type~="search-mark"]');
if (matchElements.length === 0) { if (matchElements.length === 0) {
return; return;
} }

1
app/src/types/protyle.d.ts vendored
View file

@ -487,6 +487,7 @@ interface IProtyle {
markHL: Highlight markHL: Highlight
ranges: Range[] ranges: Range[]
rangeIndex: 0 rangeIndex: 0
styleElement: HTMLStyleElement
} }
getInstance: () => import("../protyle").Protyle, getInstance: () => import("../protyle").Protyle,
observerLoad?: ResizeObserver, observerLoad?: ResizeObserver,