This commit is contained in:
Vanessa 2022-08-18 23:44:45 +08:00
parent e2705bc2ac
commit c29b2404ea
2 changed files with 15 additions and 8 deletions

View file

@ -1037,18 +1037,18 @@ export class Toolbar {
<input style="margin: 4px 8px 8px 8px" class="b3-text-field"/> <input style="margin: 4px 8px 8px 8px" class="b3-text-field"/>
<div class="b3-list fn__flex-1 b3-list--background" style="position: relative">${html}</div> <div class="b3-list fn__flex-1 b3-list--background" style="position: relative">${html}</div>
</div> </div>
<div style="width: 260px;display: ${isMobile() ? "none" : "flex"};padding: 8px;overflow: auto;justify-content: center;align-items: center;"></div> <div style="width: 520px;${isMobile() ? "display:none" : ""};overflow: auto;"></div>
</div>`; </div>`;
const listElement = this.subElement.querySelector(".b3-list"); const listElement = this.subElement.querySelector(".b3-list");
const previewElement = this.subElement.firstElementChild.lastElementChild; const previewElement = this.subElement.firstElementChild.lastElementChild;
previewTemplate(listElement.firstElementChild.getAttribute("data-value"), previewElement) previewTemplate(listElement.firstElementChild.getAttribute("data-value"), previewElement, protyle.block.parentID)
listElement.addEventListener("mouseover", (event) => { listElement.addEventListener("mouseover", (event) => {
const target = event.target as HTMLElement; const target = event.target as HTMLElement;
const hoverItemElement = hasClosestByClassName(target, "b3-list-item"); const hoverItemElement = hasClosestByClassName(target, "b3-list-item");
if (!hoverItemElement) { if (!hoverItemElement) {
return; return;
} }
previewTemplate(hoverItemElement.getAttribute("data-value"), previewElement) previewTemplate(hoverItemElement.getAttribute("data-value"), previewElement, protyle.block.parentID)
}); });
const inputElement = this.subElement.querySelector("input"); const inputElement = this.subElement.querySelector("input");
inputElement.addEventListener("keydown", (event: KeyboardEvent) => { inputElement.addEventListener("keydown", (event: KeyboardEvent) => {
@ -1060,7 +1060,7 @@ export class Toolbar {
if (!isEmpty) { if (!isEmpty) {
const currentElement = upDownHint(listElement, event); const currentElement = upDownHint(listElement, event);
if (currentElement) { if (currentElement) {
previewTemplate(currentElement.getAttribute("data-value"), previewElement) previewTemplate(currentElement.getAttribute("data-value"), previewElement, protyle.block.parentID)
} }
} }
if (event.key === "Enter") { if (event.key === "Enter") {
@ -1086,7 +1086,7 @@ export class Toolbar {
searchHTML += `<div data-value="${item.path}" class="b3-list-item${index === 0 ? " b3-list-item--focus" : ""}">${item.content}</div>`; searchHTML += `<div data-value="${item.path}" class="b3-list-item${index === 0 ? " b3-list-item--focus" : ""}">${item.content}</div>`;
}); });
listElement.innerHTML = searchHTML || `<li class="b3-list--empty">${window.siyuan.languages.emptyContent}</li>`; listElement.innerHTML = searchHTML || `<li class="b3-list--empty">${window.siyuan.languages.emptyContent}</li>`;
previewTemplate(response.data.blocks[0].path, previewElement); previewTemplate(response.data.blocks[0]?.path, previewElement, protyle.block.parentID);
}); });
}); });
this.subElement.lastElementChild.addEventListener("click", (event) => { this.subElement.lastElementChild.addEventListener("click", (event) => {

View file

@ -1,7 +1,14 @@
import {fetchPost} from "../../util/fetch"; import {fetchPost} from "../../util/fetch";
export const previewTemplate = (pathString: string, element: Element) => { export const previewTemplate = (pathString: string, element: Element, parentId: string) => {
fetchPost("/api/file/getFile", {path: pathString.replace(window.siyuan.config.system.dataDir.substring(0, window.siyuan.config.system.dataDir.length - 4), "")}, (response) => { if (!pathString) {
element.innerHTML = `<div class="b3-typography">${response.data}</div>`; element.innerHTML = ""
return;
}
fetchPost("/api/template/render", {
id: parentId,
path: pathString
}, (response) => {
element.innerHTML = `<div class="protyle-wysiwyg" style="padding: 8px">${response.data.content.replace(/contenteditable="true"/g, "")}</div>`;
}) })
} }