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

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

Browse source
This commit is contained in:
Vanessa 2025-03-11 11:58:19 +08:00
parent cf78303ee8
commit 8d24e0bf25
4 changed files with 24 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

17
app/src/protyle/render/blockRender.ts
View file

@ -1,10 +1,10 @@
import {hasClosestByAttribute, hasTopClosestByClassName, isInEmbedBlock} from "../util/hasClosest";
import {hasClosestByAttribute, hasTopClosestByClassName} from "../util/hasClosest";
import {fetchPost, fetchSyncPost} from "../../util/fetch";
import {processRender} from "../util/processCode";
import {highlightRender} from "./highlightRender";
import {Constants} from "../../constants";
import {genBreadcrumb, improveBreadcrumbAppearance} from "../wysiwyg/renderBacklink";
import {avRender} from "./av/render";
import {genRenderFrame} from "./util";
export const blockRender = (protyle: IProtyle, element: Element, top?: number) => {
let blockElements: Element[] = [];
@ -23,12 +23,8 @@ export const blockRender = (protyle: IProtyle, element: Element, top?: number) =
}
// 需置于请求返回前，否则快速滚动会导致重复加载 https://ld246.com/article/1666857862494?r=88250
item.setAttribute("data-render", "true");
genRenderFrame(item);
item.style.height = (item.clientHeight - 4) + "px"; // 减少抖动 https://ld246.com/article/1668669380171
item.innerHTML = `<div class="protyle-icons${isInEmbedBlock(item) ? " 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>${item.lastElementChild.outerHTML}`;
const content = Lute.UnEscapeHTMLStr(item.getAttribute("data-content"));
let breadcrumb: boolean | string = item.getAttribute("breadcrumb");
if (breadcrumb) {
@ -112,13 +108,10 @@ const renderEmbed = (blocks: {
html += `<div class="protyle-wysiwyg__embed" data-id="${blocksItem.block.id}">${breadcrumbHTML}${blocksItem.block.content}</div>`;
});
if (blocks.length > 0) {
item.lastElementChild.insertAdjacentHTML("beforebegin", html +
// 辅助上下移动时进行选中
`<div style="position: absolute;">${Constants.ZWSP}</div>`);
item.firstElementChild.insertAdjacentHTML("afterend", html);
improveBreadcrumbAppearance(item.querySelector(".protyle-wysiwyg__embed"));
} else {
item.lastElementChild.insertAdjacentHTML("beforebegin", `<div class="ft__smaller ft__secondary b3-form__space--small" contenteditable="false">${window.siyuan.languages.refExpired}</div>
<div style="position: absolute;">${Constants.ZWSP}</div>`);
item.firstElementChild.insertAdjacentHTML("afterend", `<div class="ft__smaller ft__secondary b3-form__space--small" contenteditable="false">${window.siyuan.languages.refExpired}</div>`);
}
processRender(item);

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

@ -1,3 +1,6 @@
import {isInEmbedBlock} from "../util/hasClosest";
import {Constants} from "../../constants";
export const genIconHTML = (element?: false | HTMLElement) => {
let enable = true;
if (element) {
@ -14,6 +17,17 @@ export const genIconHTML = (element?: false | HTMLElement) => {
</div>`;
};
export const genRenderFrame = (renderElement:Element) => {
if (renderElement.querySelector(".protyle-icons")) {
return;
}
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>`)
}
export const processClonePHElement = (item: Element) => {
if (item.getAttribute("data-type") === "NodeHTMLBlock") {
const phElement = item.querySelector("protyle-html");

1
app/src/protyle/util/insertHTML.ts
View file

@ -282,6 +282,7 @@ const processTable = (range: Range, html: string, protyle: IProtyle, blockElemen
export const insertHTML = (html: string, protyle: IProtyle, isBlock = false,
// 移动端插入嵌入块时，获取到的 range 为旧值
useProtyleRange = false,
// 在开头粘贴块则插入上方
insertByCursor = false) => {
if (html === "") {
return;

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

@ -8,6 +8,7 @@ import {
import {hasClosestByAttribute, hasClosestByTag} from "./hasClosest";
import {countBlockWord, countSelectWord} from "../../layout/status";
import {hideElements} from "../ui/hideElements";
import {genRenderFrame} from "../render/util";
const selectIsEditor = (editor: Element, range?: Range) => {
if (!range) {
@ -547,14 +548,9 @@ export const focusBlock = (element: Element, parentElement?: HTMLElement, toStar
range.selectNodeContents(element.firstElementChild);
setRange = true;
} else if (type === "NodeBlockQueryEmbed") {
if (element.lastElementChild.previousElementSibling?.firstChild) {
range.selectNodeContents(element.lastElementChild.previousElementSibling.firstChild);
range.collapse(true);
} else {
// https://github.com/siyuan-note/siyuan/issues/5267
range.selectNodeContents(element);
range.collapse(true);
}
genRenderFrame(element);
range.selectNodeContents(element.lastElementChild.previousElementSibling.firstChild);
range.collapse(true);
setRange = true;
} else if (["NodeMathBlock", "NodeHTMLBlock"].includes(type)) {
if (element.lastElementChild.previousElementSibling?.lastElementChild?.firstChild) {