Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-09-22 00:20:47 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Vanessa 2025-08-10 12:10:39 +08:00
parent aaf1d9896a
commit 2cd76dc288
11 changed files with 25 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app/src/assets/scss/business/_av.scss
View file

@ -605,7 +605,7 @@
white-space: nowrap;
}
&[data-block-id] > .block__icon[data-type="copy"] {
&[data-dtype="block"] > .block__icon[data-type="copy"] {
display: none;
}

2
app/src/assets/scss/protyle/_wysiwyg.scss
View file

@ -823,7 +823,7 @@
}
}
.av__row .av__cell[data-block-id] > .block__icon[data-type="copy"] {
.av__row .av__cell[data-dtype="block"] > .block__icon[data-type="copy"] {
display: flex;
}
}

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

@ -439,7 +439,7 @@ ${genHintItemHTML(item)}
if (!rowElement) {
return;
}
const previousID = cellElement.dataset.blockId;
const previousID = rowElement.dataset.id;
const avID = nodeElement.getAttribute("data-av-id");
let tempElement = document.createElement("div");
tempElement.innerHTML = value.replace(/<mark>/g, "").replace(/<\/mark>/g, "");

4
app/src/protyle/render/av/action.ts
View file

@ -355,7 +355,7 @@ export const avContextmenu = (protyle: IProtyle, rowElement: HTMLElement, positi
}
const menu = new Menu();
const rowElements = blockElement.querySelectorAll(".av__row--select:not(.av__row--header), .av__gallery-item--select");
const keyCellElement = rowElements[0].querySelector(".av__cell[data-block-id]") as HTMLElement;
const keyCellElement = rowElements[0].querySelector('.av__cell[data-dtype="block"]') as HTMLElement;
const ids = Array.from(rowElements).map(item => item.getAttribute("data-id"));
if (rowElements.length === 1 && keyCellElement.getAttribute("data-detached") !== "true") {
/// #if !MOBILE
@ -569,7 +569,7 @@ export const avContextmenu = (protyle: IProtyle, rowElement: HTMLElement, positi
const sourceIds: string[] = [];
rowElements.forEach(item => {
const rowId = item.getAttribute("data-id");
const blockValue = genCellValueByElement("block", item.querySelector(".av__cell[data-block-id]"));
const blockValue = genCellValueByElement("block", item.querySelector('.av__cell[data-dtype="block"]'));
srcs.push({
content: blockValue.block.content,
id: rowId,

14
app/src/protyle/render/av/blockAttr.ts
View file

@ -23,9 +23,9 @@ const genAVRollupHTML = (value: IAVCellValue) => {
switch (value.type) {
case "block":
if (value?.isDetached) {
html = `<span data-id="${value.block?.id}">${value.block?.content || window.siyuan.languages.untitled}</span>`;
html = `<span>${value.block?.content || window.siyuan.languages.untitled}</span>`;
} else {
html = `<span data-type="block-ref" data-id="${value.block?.id}" data-subtype="s" class="av__celltext--ref">${value.block?.content || window.siyuan.languages.untitled}</span>`;
html = `<span data-type="block-ref" data-id="${value.block.id}" data-subtype="s" class="av__celltext--ref">${value.block?.content || window.siyuan.languages.untitled}</span>`;
}
break;
case "text":
@ -62,7 +62,7 @@ export const genAVValueHTML = (value: IAVCellValue) => {
let html = "";
switch (value.type) {
case "block":
html = `<input value="${escapeAttr(value.block.content)}" type="text" class="b3-text-field b3-text-field--text fn__flex-1" placeholder="${window.siyuan.languages.empty}">`;
html = `<input data-id="${value.block.id}" value="${escapeAttr(value.block.content)}" type="text" class="b3-text-field b3-text-field--text fn__flex-1" placeholder="${window.siyuan.languages.empty}">`;
break;
case "text":
html = `<textarea style="resize: vertical" rows="${(value.text?.content || "").split("\n").length}" class="b3-text-field b3-text-field--text fn__flex-1" placeholder="${window.siyuan.languages.empty}">${value.text?.content || ""}</textarea>`;
@ -130,7 +130,7 @@ export const genAVValueHTML = (value: IAVCellValue) => {
value?.relation?.contents?.forEach((item) => {
if (item && item.block) {
if (item?.isDetached) {
html += `<span class="av__cell--relation"><span>➖ </span><span class="av__celltext" data-id="${item.block?.id}">${Lute.EscapeHTMLStr(item.block.content || window.siyuan.languages.untitled)}</span></span>`;
html += `<span class="av__cell--relation"><span>➖ </span><span class="av__celltext">${Lute.EscapeHTMLStr(item.block.content || window.siyuan.languages.untitled)}</span></span>`;
} else {
// data-block-id 用于更新 emoji
html += `<span class="av__cell--relation" data-block-id="${item.block.id}"><span class="b3-menu__avemoji" data-unicode="${item.block.icon || ""}">${unicode2Emoji(item.block.icon || window.siyuan.storage[Constants.LOCAL_IMAGES].file)}</span><span data-type="block-ref" data-id="${item.block.id}" data-subtype="s" class="av__celltext av__celltext--ref">${Lute.EscapeHTMLStr(item.block.content || window.siyuan.languages.untitled)}</span></span>`;
@ -198,7 +198,7 @@ export const renderAVAttribute = (element: HTMLElement, id: string, protyle: IPr
${item.key.icon ? unicode2Emoji(item.key.icon, "block__logoicon", true) : `<svg class="block__logoicon"><use xlink:href="#${getColIconByType(item.key.type)}"></use></svg>`}
<span>${escapeHtml(item.key.name)}</span>
</div>
<div data-av-id="${table.avID}" data-col-id="${item.values[0].keyID}" data-block-id="${item.values[0].blockID}" data-id="${item.values[0].id}" data-type="${item.values[0].type}"
<div data-av-id="${table.avID}" data-col-id="${item.values[0].keyID}" data-row-id="${item.values[0].blockID}" data-id="${item.values[0].id}" data-type="${item.values[0].type}"
data-options="${item.key?.options ? escapeAttr(JSON.stringify(item.key.options)) : "[]"}"
${["text", "number", "date", "url", "phone", "template", "email"].includes(item.values[0].type) ? "" : `placeholder="${window.siyuan.languages.empty}"`}
class="fn__flex-1 fn__flex${["url", "text", "number", "email", "phone", "block"].includes(item.values[0].type) ? "" : " custom-attr__avvalue"}${["created", "updated"].includes(item.values[0].type) ? " custom-attr__avvalue--readonly" : ""}">${genAVValueHTML(item.values[0])}</div>
@ -424,7 +424,7 @@ class="fn__flex-1 fn__flex${["url", "text", "number", "email", "phone", "block"]
value = {
block: {
content: item.value,
id: item.parentElement.dataset.blockId,
id: item.dataset.id,
},
isDetached: false
};
@ -432,7 +432,7 @@ class="fn__flex-1 fn__flex${["url", "text", "number", "email", "phone", "block"]
fetchPost("/api/av/setAttributeViewBlockAttr", {
avID: item.parentElement.dataset.avId,
keyID: item.parentElement.dataset.colId,
rowID: item.parentElement.dataset.blockId,
rowID: item.parentElement.dataset.rowId,
value
}, (setResponse) => {
if (type === "number") {

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

@ -909,13 +909,10 @@ export const renderCellAttr = (cellElement: Element, value: IAVCellValue) => {
cellElement.classList.add("av__cell-uncheck");
}
} else if (value.type === "block") {
if (value.block.id) {
// 不能设置为空，否则编辑后会临时无 id
cellElement.setAttribute("data-block-id", value.block.id);
}
if (value.isDetached) {
cellElement.setAttribute("data-detached", "true");
} else {
cellElement.querySelector(".av__celltext").setAttribute("data-id", value.block.id);
cellElement.removeAttribute("data-detached");
}
}
@ -1032,7 +1029,7 @@ const renderRollup = (cellValue: IAVCellValue) => {
}
} else if (cellValue.type === "block") {
if (cellValue?.isDetached) {
text = `<span class="av__celltext" data-id="${cellValue.block?.id}">${Lute.EscapeHTMLStr(cellValue.block?.content || window.siyuan.languages.untitled)}</span>`;
text = `<span class="av__celltext">${Lute.EscapeHTMLStr(cellValue.block?.content || window.siyuan.languages.untitled)}</span>`;
} else {
text = `<span data-type="block-ref" data-id="${cellValue.block?.id}" data-subtype="s" class="av__celltext av__celltext--ref">${Lute.EscapeHTMLStr(cellValue.block?.content || window.siyuan.languages.untitled)}</span>`;
}

11
app/src/protyle/render/av/gallery/item.ts
View file

@ -4,7 +4,6 @@ import {fetchPost} from "../../../../util/fetch";
import {setPage} from "../row";
import {Constants} from "../../../../constants";
import {clearSelect} from "../../../util/clearSelect";
import {hasClosestByClassName} from "../../../util/hasClosest";
export const insertGalleryItemAnimation = (options: {
blockElement: HTMLElement;
@ -39,19 +38,11 @@ ${fieldType === "block" ? ' data-detached="true"' : ""}>${renderCell(genCellValu
clearSelect(["galleryItem"], options.blockElement);
let html = "";
const coverClass = sideItemElement?.querySelector(".av__gallery-cover")?.className || "fn__none";
options.srcIDs.forEach((id) => {
const blockCellElement = options.blockElement.querySelector(`[data-block-id="${id}"]`);
if (!blockCellElement) {
options.srcIDs.forEach(() => {
html += `<div class="av__gallery-item" data-type="ghost">
<div class="${coverClass}"><span style="width: 100%;height: 100%;border-radius: var(--b3-border-radius) var(--b3-border-radius) 0 0;" class="av__pulse"></span></div>
<div class="av__gallery-fields">${cellsHTML}</div>
</div>`;
} else {
const galleryItemElement = hasClosestByClassName(blockCellElement, "av__gallery-item");
if (galleryItemElement) {
galleryItemElement.classList.add("av__gallery-item--select");
}
}
});
if (sideItemElement) {
sideItemElement.insertAdjacentHTML("afterend", html);

1
app/src/protyle/render/av/gallery/render.ts
View file

@ -73,7 +73,6 @@ aria-label="${ariaLabel}"
data-position="5west"
data-id="${cell.id}"
data-field-id="${data.fields[fieldsIndex].id}"
${cell.valueType === "block" ? 'data-block-id="' + (cell.value.block.id || "") + '"' : ""}
data-dtype="${cell.valueType}"
${cell.value?.isDetached ? ' data-detached="true"' : ""}
style="${cell.bgColor ? `background-color:${cell.bgColor};` : ""}

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

@ -193,7 +193,7 @@ style="width: ${column.width || "200px"}">${getCalcValue(column) || `<svg><use x
checkClass = cell.value?.checkbox?.checked ? " av__cell-check" : " av__cell-uncheck";
}
contentHTML += `<div class="av__cell${checkClass}" data-id="${cell.id}" data-col-id="${data.columns[index].id}"
${cell.valueType === "block" ? 'data-block-id="' + (cell.value.block.id || "") + '"' : ""} data-wrap="${data.columns[index].wrap}"
data-wrap="${data.columns[index].wrap}"
data-dtype="${data.columns[index].type}"
${cell.value?.isDetached ? ' data-detached="true"' : ""}
style="width: ${data.columns[index].width || "200px"};
@ -725,7 +725,7 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
});
}
if (operation.srcs.length === 1) {
const popCellElement = item.querySelector(`.av__body${groupQuery} .av__cell[data-block-id="${operation.srcs[0].id}"]`) as HTMLElement;
const popCellElement = item.querySelector(`.av__body${groupQuery} [data-id="${operation.srcs[0].id}"] .av__cell[data-dtype="block"]`) as HTMLElement;
if (popCellElement) {
popTextCell(protyle, [popCellElement], "block");
}

12
app/src/protyle/render/av/row.ts
View file

@ -154,16 +154,10 @@ ${colType === "block" ? ' data-detached="true"' : ""}>${renderCell(genCellValue(
});
let html = "";
clearSelect(["cell", "row"], options.blockElement);
options.srcIDs.forEach((id) => {
const blockCellElement = options.blockElement.querySelector(`[data-block-id="${id}"]`);
if (!blockCellElement) {
options.srcIDs.forEach(() => {
html += `<div class="av__row" data-type="ghost">
${cellsHTML}
</div>`;
} else {
addDragFill(blockCellElement);
blockCellElement.classList.add("av__cell--select");
}
});
previousElement.insertAdjacentHTML("afterend", html);
fetchPost("/api/av/getAttributeViewAddingBlockDefaultValues", {
@ -357,10 +351,10 @@ export const deleteRow = (blockElement: HTMLElement, protyle: IProtyle) => {
const undoOperations: IOperation[] = [];
const blockIds: string[] = [];
rowElements.forEach(item => {
blockIds.push(item.querySelector(".av__cell[data-block-id]").getAttribute("data-block-id"));
blockIds.push(item.getAttribute("data-id"));
});
rowElements.forEach(item => {
const blockValue = genCellValueByElement("block", item.querySelector(".av__cell[data-block-id]"));
const blockValue = genCellValueByElement("block", item.querySelector('.av__cell[data-dtype="block"]'));
undoOperations.push({
action: "insertAttrViewBlock",
avID,

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

@ -19,6 +19,7 @@ import {updateCellsValue} from "../render/av/cell";
import {input} from "../wysiwyg/input";
import {fetchPost} from "../../util/fetch";
import {isIncludeCell} from "./table";
import {getFieldIdByCellElement} from "../render/av/row";
const processAV = (range: Range, html: string, protyle: IProtyle, blockElement: HTMLElement) => {
const tempElement = document.createElement("template");
@ -111,7 +112,7 @@ const processAV = (range: Range, html: string, protyle: IProtyle, blockElement:
const selectCellElement = blockElement.querySelector(".av__cell--select") as HTMLElement;
if (selectCellElement) {
const sourceId = contenteditableElement.firstElementChild.getAttribute("data-id");
const previousID = selectCellElement.dataset.blockId;
const previousID = getFieldIdByCellElement(selectCellElement, blockElement.getAttribute("data-av-type") as TAVView);
transaction(protyle, [{
action: "replaceAttrViewBlock",
avID,