Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2026-01-03 15:28:49 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

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

Browse source
This commit is contained in:
Vanessa 2025-03-11 23:43:05 +08:00
parent 650493dcdb
commit 15ec12e4db
4 changed files with 67 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

6
app/src/assets/scss/protyle/_protyle.scss
View file

@ -409,6 +409,12 @@
}
}
.protyle-cursor {
position: absolute;
right: 0;
top: 0;
}
table[contenteditable="false"] + .protyle-action__table > .table__resize {
display: none;
}

41
app/src/protyle/render/mathRender.ts
View file

@ -4,6 +4,7 @@ import {Constants} from "../../constants";
import {hasNextSibling, hasPreviousSibling} from "../wysiwyg/getBlock";
import {hasClosestBlock} from "../util/hasClosest";
import {looseJsonParse} from "../../util/functions";
import {genRenderFrame} from "./util";
export const mathRender = (element: Element, cdn = Constants.PROTYLE_CDN, maxWidth = false) => {
let mathElements: Element[] = [];
@ -24,43 +25,40 @@ export const mathRender = (element: Element, cdn = Constants.PROTYLE_CDN, maxWid
return;
}
mathElement.setAttribute("data-render", "true");
let renderElement = mathElement;
if (mathElement.tagName === "DIV") {
renderElement = mathElement.firstElementChild as HTMLElement;
}
let macros = {};
try {
macros = looseJsonParse(window.siyuan.config.editor.katexMacros || "{}");
} catch (e) {
console.warn("KaTex macros is not JSON", e);
}
const isBlock = mathElement.tagName === "DIV";
try {
renderElement.innerHTML = window.katex.renderToString(Lute.UnEscapeHTMLStr(mathElement.getAttribute("data-content")), {
displayMode: mathElement.tagName === "DIV",
const mathHTML = window.katex.renderToString(Lute.UnEscapeHTMLStr(mathElement.getAttribute("data-content")), {
displayMode: isBlock,
output: "html",
macros,
trust: true, // REF: https://katex.org/docs/supported#html
strict: (errorCode) => errorCode === "unicodeTextInMathMode" ? "ignore" : "warn",
});
renderElement.classList.remove("ft__error");
const blockElement = hasClosestBlock(mathElement);
if (mathElement.tagName === "DIV") {
renderElement.firstElementChild.setAttribute("contenteditable", "false");
if (renderElement.childElementCount < 2) {
// 不能使用 contenteditable="false"，否则光标无法移动到该块
renderElement.insertAdjacentHTML("beforeend", `<span style="position: absolute;right: 0;top: 0;">${Constants.ZWSP}</span>`);
}
if (isBlock) {
genRenderFrame(mathElement);
mathElement.firstElementChild.firstElementChild.classList.remove("ft__error");
mathElement.firstElementChild.firstElementChild.setAttribute("contenteditable", "false");
mathElement.firstElementChild.firstElementChild.innerHTML = mathHTML;
// https://github.com/siyuan-note/siyuan/issues/3541
const baseElements = renderElement.querySelectorAll(".base");
const baseElements = mathElement.querySelectorAll(".base");
if (baseElements.length > 0) {
baseElements[baseElements.length - 1].insertAdjacentHTML("afterend", "<span class='fn__flex-1'></span>");
}
// https://github.com/siyuan-note/siyuan/issues/4334
const newlineElement = renderElement.querySelector(".katex-html > .newline");
const newlineElement = mathElement.querySelector(".katex-html > .newline");
if (newlineElement) {
newlineElement.parentElement.style.display = "block";
}
} else {
mathElement.classList.remove("ft__error");
mathElement.innerHTML = mathHTML;
if (blockElement && mathElement.getBoundingClientRect().width > blockElement.clientWidth) {
mathElement.style.maxWidth = "100%";
mathElement.style.overflowX = "auto";
@ -110,7 +108,7 @@ export const mathRender = (element: Element, cdn = Constants.PROTYLE_CDN, maxWid
// export pdf
if (maxWidth) {
setTimeout(() => {
if (mathElement.tagName === "DIV") {
if (isBlock) {
const katexElement = mathElement.querySelector(".katex-display");
if (katexElement.clientWidth < katexElement.scrollWidth) {
katexElement.firstElementChild.setAttribute("style", `font-size:${katexElement.clientWidth * 100 / katexElement.scrollWidth}%`);
@ -123,8 +121,15 @@ export const mathRender = (element: Element, cdn = Constants.PROTYLE_CDN, maxWid
});
}
} catch (e) {
renderElement.innerHTML = e.message;
renderElement.classList.add("ft__error");
if (isBlock) {
genRenderFrame(mathElement);
mathElement.firstElementChild.firstElementChild.setAttribute("contenteditable", "false");
mathElement.firstElementChild.firstElementChild.innerHTML = e.message;
mathElement.firstElementChild.firstElementChild.classList.add("ft__error");
} else {
mathElement.innerHTML = e.message;
mathElement.classList.add("ft__error");
}
}
});
});

13
app/src/protyle/render/util.ts
View file

@ -17,15 +17,20 @@ export const genIconHTML = (element?: false | HTMLElement) => {
</div>`;
};
export const genRenderFrame = (renderElement:Element) => {
if (renderElement.querySelector(".protyle-icons")) {
export const genRenderFrame = (renderElement: Element) => {
if (renderElement.querySelector(".protyle-cursor")) {
return;
}
renderElement.insertAdjacentHTML("afterbegin",`<div class="protyle-icons${isInEmbedBlock(renderElement) ? " fn__none" : ""}">
const type = renderElement.getAttribute("data-type");
if (type === "NodeBlockQueryEmbed") {
renderElement.insertAdjacentHTML("afterbegin", `<div class="protyle-icons${isInEmbedBlock(renderElement) ? " fn__none" : ""}">
<span aria-label="${window.siyuan.languages.refresh}" class="b3-tooltips__nw b3-tooltips protyle-icon protyle-action__reload protyle-icon--first"><svg class="fn__rotate"><use xlink:href="#iconRefresh"></use></svg></span>
<span aria-label="${window.siyuan.languages.update} SQL" class="b3-tooltips__nw b3-tooltips protyle-icon protyle-action__edit"><svg><use xlink:href="#iconEdit"></use></svg></span>
<span aria-label="${window.siyuan.languages.more}" class="b3-tooltips__nw b3-tooltips protyle-icon protyle-action__menu protyle-icon--last"><svg><use xlink:href="#iconMore"></use></svg></span>
</div><div style="position: absolute;">${Constants.ZWSP}</div>`)
</div><div class="protyle-cursor">${Constants.ZWSP}</div>`);
} else if (type==="NodeMathBlock") {
renderElement.firstElementChild.innerHTML = `<span></span><span class="protyle-cursor">${Constants.ZWSP}</span>`;
}
}
export const processClonePHElement = (item: Element) => {

41
app/src/protyle/util/selection.ts
View file

@ -151,8 +151,17 @@ export const getEditorRange = (element: Element) => {
return range;
}
}
if (element.classList.contains("li") || element.classList.contains("list")) {
return getEditorRange(element.querySelector("[data-node-id]"));
}
// 代码块过长，在代码块的下一个块前删除，代码块会滚动到顶部，因粗需要 preventScroll
(element as HTMLElement).focus({preventScroll: true});
if (!range) {
range = document.createRange();
}
let targetElement;
if (element.classList.contains("table")) {
// 当光标不在表格区域中时表格无法被复制 https://ld246.com/article/1650510736504
@ -160,13 +169,23 @@ export const getEditorRange = (element: Element) => {
} else {
targetElement = getContenteditableElement(element);
if (!targetElement) {
targetElement = element;
const type = element.getAttribute("data-type");
if (type === "NodeThematicBreak") {
targetElement= element.firstElementChild;
} else if (type === "NodeBlockQueryEmbed") {
targetElement = element.lastElementChild.previousElementSibling?.firstChild;
} else if (["NodeMathBlock", "NodeHTMLBlock"].includes(type)) {
targetElement = element.lastElementChild.previousElementSibling?.lastElementChild?.firstChild;
} else if (type === "NodeVideo") {
targetElement = element.firstElementChild.firstChild;
} else if (type === "NodeAudio") {
targetElement = element.firstElementChild.lastChild;
}
} else if (targetElement.tagName === "TABLE") {
// 文档中开头为表格，获取错误 https://ld246.com/article/1663408335459?r=88250
targetElement = targetElement.querySelector("th") || element.querySelector("td");
}
}
range = targetElement.ownerDocument.createRange();
range.setStart(targetElement || element, 0);
range.collapse(true);
return range;
@ -552,21 +571,19 @@ export const focusBlock = (element: Element, parentElement?: HTMLElement, toStar
range.setStart(element.lastElementChild.previousElementSibling.firstChild, 0);
range.collapse(true);
setRange = true;
} else if (["NodeMathBlock", "NodeHTMLBlock"].includes(type)) {
if (element.lastElementChild.previousElementSibling?.lastElementChild?.firstChild) {
// https://ld246.com/article/1655714737572
range.selectNodeContents(element.lastElementChild.previousElementSibling.lastElementChild.firstChild);
range.collapse(true);
} else if (element.lastElementChild.previousElementSibling) {
range.selectNodeContents(element.lastElementChild.previousElementSibling);
range.collapse(true);
}
} else if (type === "NodeMathBlock") {
genRenderFrame(element);
range.setStart(element.firstElementChild.lastElementChild.firstChild, 0);
setRange = true;
} else if (type === "NodeHTMLBlock") {
range.selectNodeContents(element.lastElementChild.previousElementSibling.lastElementChild.firstChild, 0);
range.collapse(true);
setRange = true;
} else if (type === "NodeIFrame" || type === "NodeWidget") {
range.setStart(element, 0);
setRange = true;
} else if (type === "NodeVideo") {
range.setStart(element.firstElementChild, 0);
range.setStart(element.firstElementChild.firstChild, 0);
setRange = true;
} else if (type === "NodeAudio") {
range.setStart(element.firstElementChild.lastChild, 0);