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

✨ https://github.com/siyuan-note/siyuan/issues/8665

Browse source
This commit is contained in:
Vanessa 2023-07-28 15:20:34 +08:00
parent 77ed675a6f
commit a231b9e128
4 changed files with 40 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

81
app/src/protyle/hint/extend.ts
View file

@ -317,6 +317,35 @@ export const hintTag = (key: string, protyle: IProtyle): IHintData[] => {
return []; return [];
}; };
export const genHintItemHTML = (item: IBlock) => {
let iconHTML;
if (item.type === "NodeDocument" && item.ial.icon) {
iconHTML = unicode2Emoji(item.ial.icon, "b3-list-item__graphic popover__block", true);
iconHTML = iconHTML.replace('popover__block"', `popover__block" data-id="${item.id}"`);
} else {
iconHTML = `<svg class="b3-list-item__graphic popover__block" data-id="${item.id}"><use xlink:href="#${getIconByType(item.type)}"></use></svg>`;
}
let attrHTML = "";
if (item.name) {
attrHTML += `<span class="fn__flex"><svg class="b3-list-item__hinticon"><use xlink:href="#iconN"></use></svg><span>${item.name}</span></span><span class="fn__space"></span>`;
}
if (item.alias) {
attrHTML += `<span class="fn__flex"><svg class="b3-list-item__hinticon"><use xlink:href="#iconA"></use></svg><span>${item.alias}</span></span><span class="fn__space"></span>`;
}
if (item.memo) {
attrHTML += `<span class="fn__flex"><svg class="b3-list-item__hinticon"><use xlink:href="#iconM"></use></svg><span>${item.memo}</span></span>`;
}
if (attrHTML) {
attrHTML = `<div class="fn__flex b3-list-item__meta b3-list-item__showall">${attrHTML}</div>`;
}
return `${attrHTML}<div class="b3-list-item__first">
${iconHTML}
<span class="b3-list-item__text">${item.content}</span>
</div>
<div class="b3-list-item__meta b3-list-item__showall" style="margin-bottom: 4px">${item.hPath}</div>`;
}
export const hintRef = (key: string, protyle: IProtyle, isQuick = false): IHintData[] => { export const hintRef = (key: string, protyle: IProtyle, isQuick = false): IHintData[] => {
const nodeElement = hasClosestBlock(getEditorRange(protyle.wysiwyg.element).startContainer); const nodeElement = hasClosestBlock(getEditorRange(protyle.wysiwyg.element).startContainer);
protyle.hint.genLoading(protyle); protyle.hint.genLoading(protyle);
@ -337,37 +366,13 @@ export const hintRef = (key: string, protyle: IProtyle, isQuick = false): IHintD
}); });
} }
response.data.blocks.forEach((item: IBlock) => { response.data.blocks.forEach((item: IBlock) => {
let iconHTML;
if (item.type === "NodeDocument" && item.ial.icon) {
iconHTML = unicode2Emoji(item.ial.icon, "b3-list-item__graphic popover__block", true);
iconHTML = iconHTML.replace('popover__block"', `popover__block" data-id="${item.id}"`);
} else {
iconHTML = `<svg class="b3-list-item__graphic popover__block" data-id="${item.id}"><use xlink:href="#${getIconByType(item.type)}"></use></svg>`;
}
let attrHTML = "";
if (item.name) {
attrHTML += `<span class="fn__flex"><svg class="b3-list-item__hinticon"><use xlink:href="#iconN"></use></svg><span>${item.name}</span></span><span class="fn__space"></span>`;
}
if (item.alias) {
attrHTML += `<span class="fn__flex"><svg class="b3-list-item__hinticon"><use xlink:href="#iconA"></use></svg><span>${item.alias}</span></span><span class="fn__space"></span>`;
}
if (item.memo) {
attrHTML += `<span class="fn__flex"><svg class="b3-list-item__hinticon"><use xlink:href="#iconM"></use></svg><span>${item.memo}</span></span>`;
}
if (attrHTML) {
attrHTML = `<div class="fn__flex b3-list-item__meta b3-list-item__showall">${attrHTML}</div>`;
}
let value = `<span data-type="block-ref" data-id="${item.id}" data-subtype="d">${item.name || item.refText}</span>`; let value = `<span data-type="block-ref" data-id="${item.id}" data-subtype="d">${item.name || item.refText}</span>`;
if (isQuick) { if (isQuick) {
value = `<span data-type="block-ref" data-id="${item.id}" data-subtype="s">${key}</span>`; value = `<span data-type="block-ref" data-id="${item.id}" data-subtype="s">${key}</span>`;
} }
dataList.push({ dataList.push({
value, value,
html: `${attrHTML}<div class="b3-list-item__first"> html: genHintItemHTML(item),
${iconHTML}
<span class="b3-list-item__text">${item.content}</span>
</div>
<div class="b3-list-item__meta b3-list-item__showall" style="margin-bottom: 4px">${item.hPath}</div>`,
}); });
}); });
if (isQuick) { if (isQuick) {
@ -401,33 +406,9 @@ export const hintEmbed = (key: string, protyle: IProtyle): IHintData[] => {
}, (response) => { }, (response) => {
const dataList: IHintData[] = []; const dataList: IHintData[] = [];
response.data.blocks.forEach((item: IBlock) => { response.data.blocks.forEach((item: IBlock) => {
let iconHTML;
if (item.type === "NodeDocument" && item.ial.icon) {
iconHTML = unicode2Emoji(item.ial.icon, "b3-list-item__graphic popover__block", true);
iconHTML = iconHTML.replace('popover__block"', `popover__block" data-id="${item.id}"`);
} else {
iconHTML = `<svg class="b3-list-item__graphic popover__block" data-id="${item.id}"><use xlink:href="#${getIconByType(item.type)}"></use></svg>`;
}
let attrHTML = "";
if (item.name) {
attrHTML += `<span class="fn__flex"><svg class="b3-list-item__hinticon"><use xlink:href="#iconN"></use></svg>${item.name}</span><span class="fn__space"></span>`;
}
if (item.alias) {
attrHTML += `<span class="fn__flex"><svg class="b3-list-item__hinticon"><use xlink:href="#iconA"></use></svg>${item.alias}</span><span class="fn__space"></span>`;
}
if (item.memo) {
attrHTML += `<span class="fn__flex"><svg class="b3-list-item__hinticon"><use xlink:href="#iconM"></use></svg>${item.memo}</span>`;
}
if (attrHTML) {
attrHTML = `<div class="fn__flex b3-list-item__meta b3-list-item__showall">${attrHTML}</div>`;
}
dataList.push({ dataList.push({
value: `{{select * from blocks where id='${item.id}'}}`, value: `{{select * from blocks where id='${item.id}'}}`,
html: `${attrHTML}<div class="b3-list-item__first"> html: genHintItemHTML(item),
${iconHTML}
<span class="b3-list-item__text">${item.content}</span>
</div>
<div class="b3-list-item__meta b3-list-item__showall" style="margin-bottom: 4px">${item.hPath}</div>`,
}); });
}); });
if (dataList.length === 0) { if (dataList.length === 0) {

36
app/src/protyle/hint/index.ts
View file

@ -8,7 +8,7 @@ import {
getSelectionOffset, getSelectionOffset,
getSelectionPosition getSelectionPosition
} from "../util/selection"; } from "../util/selection";
import {hintEmbed, hintRef, hintSlash} from "./extend"; import {genHintItemHTML, hintEmbed, hintRef, hintSlash} from "./extend";
import {getSavePath} from "../../util/newFile"; import {getSavePath} from "../../util/newFile";
import {upDownHint} from "../../util/upDownHint"; import {upDownHint} from "../../util/upDownHint";
import {setPosition} from "../../util/setPosition"; import {setPosition} from "../../util/setPosition";
@ -238,7 +238,7 @@ ${unicode2Emoji(emoji.unicode)}</button>`;
} }
} }
public getHTMLByData(data: IHintData[], hasSearch = false) { private getHTMLByData(data: IHintData[], hasSearch = false) {
let hintsHTML = ""; let hintsHTML = "";
if (hasSearch) { if (hasSearch) {
hintsHTML = '<input style="margin: 0 4px 4px 4px" class="b3-text-field"><div style="flex: 1;overflow:auto;">'; hintsHTML = '<input style="margin: 0 4px 4px 4px" class="b3-text-field"><div style="flex: 1;overflow:auto;">';
@ -338,39 +338,17 @@ ${unicode2Emoji(emoji.unicode)}</button>`;
let searchHTML = ""; let searchHTML = "";
if (response.data.newDoc) { if (response.data.newDoc) {
const blockRefText = `((newFile "${oldValue}"${Constants.ZWSP}'${response.data.k}${Lute.Caret}'))`; const blockRefText = `((newFile "${oldValue}"${Constants.ZWSP}'${response.data.k}${Lute.Caret}'))`;
searchHTML += `<button class="b3-list-item b3-list-item--two fn__block${response.data.blocks.length === 0 ? " b3-list-item--focus" : ""}" data-value="${encodeURIComponent(blockRefText)}"><div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconFile"></use></svg> searchHTML += `<button style="width: calc(100% - 16px)" class="b3-list-item b3-list-item--two${response.data.blocks.length === 0 ? " b3-list-item--focus" : ""}" data-value="${encodeURIComponent(blockRefText)}"><div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconFile"></use></svg>
<span class="b3-list-item__text">${window.siyuan.languages.newFile} <mark>${response.data.k}</mark></span></div></button>`; <span class="b3-list-item__text">${window.siyuan.languages.newFile} <mark>${response.data.k}</mark></span></div></button>`;
} }
response.data.blocks.forEach((item: IBlock, index: number) => { response.data.blocks.forEach((item: IBlock, index: number) => {
let iconHTML;
if (item.type === "NodeDocument" && item.ial.icon) {
iconHTML = unicode2Emoji(item.ial.icon, "b3-list-item__graphic popover__block", true);
iconHTML = iconHTML.replace('popover__block"', `popover__block" data-id="${item.id}"`);
} else {
iconHTML = `<svg class="b3-list-item__graphic popover__block" data-id="${item.id}"><use xlink:href="#${getIconByType(item.type)}"></use></svg>`;
}
let attrHTML = "";
if (item.name) {
attrHTML += `<span class="fn__flex"><svg class="b3-list-item__hinticon"><use xlink:href="#iconN"></use></svg><span>${item.name}</span></span><span class="fn__space"></span>`;
}
if (item.alias) {
attrHTML += `<span class="fn__flex"><svg class="b3-list-item__hinticon"><use xlink:href="#iconA"></use></svg><span>${item.alias}</span></span><span class="fn__space"></span>`;
}
if (item.memo) {
attrHTML += `<span class="fn__flex"><svg class="b3-list-item__hinticon"><use xlink:href="#iconM"></use></svg><span>${item.memo}</span></span>`;
}
if (attrHTML) {
attrHTML = `<div class="fn__flex b3-list-item__meta b3-list-item__showall">${attrHTML}</div>`;
}
const blockRefHTML = `<span data-type="block-ref" data-id="${item.id}" data-subtype="s">${oldValue}</span>`; const blockRefHTML = `<span data-type="block-ref" data-id="${item.id}" data-subtype="s">${oldValue}</span>`;
searchHTML += `<button class="b3-list-item b3-list-item--two fn__block${index === 0 ? " b3-list-item--focus" : ""}" data-value="${encodeURIComponent(blockRefHTML)}">${attrHTML}<div class="b3-list-item__first"> searchHTML += `<button style="width: calc(100% - 16px)" class="b3-list-item b3-list-item--two${index === 0 ? " b3-list-item--focus" : ""}" data-value="${encodeURIComponent(blockRefHTML)}">
${iconHTML} ${genHintItemHTML(item)}
<span class="b3-list-item__text">${item.content}</span> </button>`;
</div>
<div class="b3-list-item__meta b3-list-item__showall" style="margin-bottom: 4px">${item.hPath}</div></button>`;
}); });
if (searchHTML === "") { if (searchHTML === "") {
searchHTML = `<button class="b3-list-item b3-list-item--two fn__block" data-value="">${window.siyuan.languages.emptyContent}</button>`; searchHTML = `<button style="width: calc(100% - 16px)" class="b3-list-item b3-list-item--two" data-value="">${window.siyuan.languages.emptyContent}</button>`;
} }
this.element.lastElementChild.innerHTML = searchHTML; this.element.lastElementChild.innerHTML = searchHTML;
}); });

2
app/src/protyle/render/av/cell.ts
View file

@ -344,7 +344,7 @@ export const popTextCell = (protyle: IProtyle, cellElements: HTMLElement[]) => {
const style = `style="position:absolute;left: ${cellRect.left}px;top: ${cellRect.top}px;width:${Math.max(cellRect.width, 200)}px;height: ${cellRect.height}px"`; const style = `style="position:absolute;left: ${cellRect.left}px;top: ${cellRect.top}px;width:${Math.max(cellRect.width, 200)}px;height: ${cellRect.height}px"`;
const blockElement = hasClosestBlock(cellElements[0]); const blockElement = hasClosestBlock(cellElements[0]);
if (type === "block" || type === "text") { if (type === "block" || type === "text") {
html = `<textarea ${style} class="b3-text-field">${cellElements[0].textContent}</textarea>`; html = `<textarea ${style} class="b3-text-field">${cellElements[0].firstElementChild.textContent}</textarea>`;
} else if (type === "number") { } else if (type === "number") {
html = `<input type="number" value="${cellElements[0].textContent}" ${style} class="b3-text-field">`; html = `<input type="number" value="${cellElements[0].textContent}" ${style} class="b3-text-field">`;
} else if (["select", "mSelect"].includes(type) && blockElement) { } else if (["select", "mSelect"].includes(type) && blockElement) {

2
app/src/protyle/render/av/render.ts
View file

@ -64,7 +64,7 @@ style="width: ${column.width || "200px"}">${getCalcValue(column) || '<svg><use x
} else if (cell.valueType === "block") { } else if (cell.valueType === "block") {
text = `<span class="av__celltext">${cell.value?.block.content || ""}</span>`; text = `<span class="av__celltext">${cell.value?.block.content || ""}</span>`;
if (cell.value?.block.id) { if (cell.value?.block.id) {
text += `<span class="b3-chip b3-chip--small" data-type="block-ref" data-id="${cell.value.block.id}" data-subtype="s">${window.siyuan.languages.openBy}</span>`; text += `<span class="b3-chip b3-chip--info b3-chip--small" data-type="block-ref" data-id="${cell.value.block.id}" data-subtype="s">${window.siyuan.languages.openBy}</span>`;
} }
} else if (cell.valueType === "number") { } else if (cell.valueType === "number") {
text = `<span class="av__celltext">${cell.value?.number.content || ""}</span>`; text = `<span class="av__celltext">${cell.value?.number.content || ""}</span>`;