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

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

Browse source
This commit is contained in:
Vanessa 2024-08-15 11:21:05 +08:00
parent 216dc408ff
commit f5ddcd2bbb
6 changed files with 29 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
app/src/assets/scss/component/_typography.scss
View file

@ -554,36 +554,31 @@
}
}
&-linenumber {
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
&-linenumber__rows {
pointer-events: none;
user-select: none;
counter-reset: linenumber;
font-size: 85%;
box-sizing: border-box;
font-family: var(--b3-font-family-code);
margin-right: 1em;
min-width: 1.2em;
text-align: right;
&__rows {
& > span {
pointer-events: none;
user-select: none;
counter-reset: linenumber;
font-size: 85%;
box-sizing: border-box;
font-family: var(--b3-font-family-code);
margin-right: 1em;
min-width: 1.2em;
text-align: right;
display: block;
& > span {
pointer-events: none;
&::before {
counter-increment: linenumber;
content: counter(linenumber);
color: var(--b3-theme-on-surface);
display: block;
&::before {
counter-increment: linenumber;
content: counter(linenumber);
color: var(--b3-theme-on-surface);
display: block;
text-align: right;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
direction: rtl;
}
text-align: right;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
direction: rtl;
}
}
}

4
app/src/menus/protyle.ts
View file

@ -2100,8 +2100,8 @@ export const setFold = (protyle: IProtyle, nodeElement: Element, isOpen?: boolea
}
nodeElement.removeAttribute("fold");
// https://github.com/siyuan-note/siyuan/issues/4411
nodeElement.querySelectorAll(".protyle-linenumber").forEach((item: HTMLElement) => {
lineNumberRender(item);
nodeElement.querySelectorAll(".protyle-linenumber__rows").forEach((item: HTMLElement) => {
lineNumberRender(item.parentElement);
});
} else {
if (typeof isOpen === "boolean" && isOpen) {

6
app/src/protyle/render/highlightRender.ts
View file

@ -89,8 +89,7 @@ export const highlightRender = (element: Element, cdn = Constants.PROTYLE_CDN) =
const codeText = block.textContent;
if (!isPreview && (lineNumber === "true" || (lineNumber !== "false" && window.siyuan.config.editor.codeSyntaxHighlightLineNum))) {
// 需要先添加 class 以防止抖动 https://ld246.com/article/1648116585443
block.classList.add("protyle-linenumber");
block.innerHTML = '<div class="protyle-linenumber__rows"></div><div style="flex: 1"></div>'
block.firstElementChild.classList.add("protyle-linenumber__rows")
lineNumberRender(block);
}
@ -116,11 +115,10 @@ export const lineNumberRender = (block: HTMLElement) => {
if (!window.siyuan.config.editor.codeSyntaxHighlightLineNum && lineNumber !== "true") {
return;
}
block.classList.add("protyle-linenumber");
// clientHeight 总是取的整数
block.parentElement.style.lineHeight = `${((parseInt(block.parentElement.style.fontSize) || window.siyuan.config.editor.fontSize) * 1.625 * 0.85).toFixed(0)}px`;
const lineNumberTemp = document.createElement("div");
lineNumberTemp.className = "hljs protyle-linenumber";
lineNumberTemp.className = "hljs";
lineNumberTemp.setAttribute("style", `box-sizing: border-box;width: calc(100% - 3.6em);position: absolute;padding-top:0 !important;padding-bottom:0 !important;min-height:auto !important;white-space:${block.style.whiteSpace};word-break:${block.style.wordBreak};font-variant-ligatures:${block.style.fontVariantLigatures};`);
lineNumberTemp.setAttribute("contenteditable", "true");
block.insertAdjacentElement("afterend", lineNumberTemp);

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

@ -1195,12 +1195,6 @@ export class Toolbar {
nodeElement.innerHTML = `<div spin="1"></div><div class="protyle-attr" contenteditable="false">${Constants.ZWSP}</div>`;
processRender(nodeElement);
} else {
const lineNumber = nodeElement.getAttribute("linenumber");
if (lineNumber === "true" || (lineNumber !== "false" && window.siyuan.config.editor.codeSyntaxHighlightLineNum)) {
editElement.classList.add("protyle-linenumber");
} else {
editElement.classList.remove("protyle-linenumber");
}
(editElement as HTMLElement).textContent = editElement.textContent;
editElement.removeAttribute("data-render");
highlightRender(nodeElement);

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

@ -73,8 +73,8 @@ export const initUI = (protyle: IProtyle) => {
wheelTimeout = window.setTimeout(() => {
fetchPost("/api/setting/setEditor", window.siyuan.config.editor);
if (window.siyuan.config.editor.codeSyntaxHighlightLineNum) {
protyle.wysiwyg.element.querySelectorAll(".code-block .protyle-linenumber").forEach((block: HTMLElement) => {
lineNumberRender(block);
protyle.wysiwyg.element.querySelectorAll(".code-block .protyle-linenumber__rows").forEach((block: HTMLElement) => {
lineNumberRender(block.parentElement);
});
}
}, Constants.TIMEOUT_LOAD);

3
app/src/protyle/util/resize.ts
View file

@ -28,7 +28,8 @@ export const resize = (protyle: IProtyle) => {
}
});
}
protyle.wysiwyg.element.querySelectorAll(".code-block .protyle-linenumber").forEach((block: HTMLElement) => {
protyle.wysiwyg.element.querySelectorAll(".code-block .protyle-linenumber__rows").forEach((item: HTMLElement) => {
const block = item.parentElement;
if ((window.siyuan.config.editor.codeSyntaxHighlightLineNum && block.parentElement.getAttribute("lineNumber") !== "false" &&
window.siyuan.config.editor.codeLineWrap && block.parentElement.getAttribute("linewrap") !== "false") ||
(block.parentElement.getAttribute("lineNumber") === "true" && block.parentElement.getAttribute("linewrap") === "true")) {