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

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

Browse source
This commit is contained in:
Vanessa 2024-03-22 11:49:32 +08:00
parent 1c9594be8e
commit 5a761ab54a
2 changed files with 111 additions and 90 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -397,6 +397,13 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
Array.from(protyle.wysiwyg.element.querySelectorAll(`[data-av-id="${operation.avID}"]`)).forEach((item: HTMLElement) => { Array.from(protyle.wysiwyg.element.querySelectorAll(`[data-av-id="${operation.avID}"]`)).forEach((item: HTMLElement) => {
item.removeAttribute("data-render"); item.removeAttribute("data-render");
const updateRow = item.querySelector('.av__row[data-need-update="true"]'); const updateRow = item.querySelector('.av__row[data-need-update="true"]');
if (operation.action === "sortAttrViewCol" || operation.action === "sortAttrViewRow") {
item.querySelectorAll(".av__cell--active").forEach((item: HTMLElement) => {
item.classList.remove("av__cell--active");
item.querySelector(".av__drag-fill")?.remove();
});
addDragFill(item.querySelector(".av__cell--select"));
}
avRender(item, protyle, () => { avRender(item, protyle, () => {
const attrElement = document.querySelector(`.b3-dialog--open[data-key="${Constants.DIALOG_ATTR}"] div[data-av-id="${operation.avID}"]`) as HTMLElement; const attrElement = document.querySelector(`.b3-dialog--open[data-key="${Constants.DIALOG_ATTR}"] div[data-av-id="${operation.avID}"]`) as HTMLElement;
if (attrElement) { if (attrElement) {

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

@ -12,101 +12,115 @@ import {input} from "../wysiwyg/input";
import {objEquals} from "../../util/functions"; import {objEquals} from "../../util/functions";
const processAV = (range: Range, html: string, protyle: IProtyle, blockElement: HTMLElement) => { const processAV = (range: Range, html: string, protyle: IProtyle, blockElement: HTMLElement) => {
const tempElement = document.createElement("template")
tempElement.innerHTML = html;
let values: IAVCellValue[] = [];
if (html.endsWith("]") && html.startsWith("[")) { if (html.endsWith("]") && html.startsWith("[")) {
try { try {
const values = JSON.parse(html); values = JSON.parse(html);
const cellElements: Element[] = Array.from(blockElement.querySelectorAll(".av__cell--active, .av__cell--select")) || [];
if (cellElements.length === 0) {
blockElement.querySelectorAll(".av__row--select:not(.av__row--header)").forEach(rowElement => {
rowElement.querySelectorAll(".av__cell").forEach(cellElement => {
cellElements.push(cellElement);
});
});
}
const doOperations: IOperation[] = [];
const undoOperations: IOperation[] = [];
const avID = blockElement.dataset.avId;
const id = blockElement.dataset.nodeId;
cellElements.forEach((item: HTMLElement, elementIndex) => {
let cellValue: IAVCellValue = values[elementIndex];
if (!cellValue) {
return;
}
const rowElement = hasClosestByClassName(item, "av__row");
if (!rowElement) {
return;
}
if (!blockElement.contains(item)) {
item = cellElements[elementIndex] = blockElement.querySelector(`.av__row[data-id="${rowElement.dataset.id}"] .av__cell[data-col-id="${item.dataset.colId}"]`) as HTMLElement;
}
const type = getTypeByCellElement(item) || item.dataset.type as TAVCol;
if (["created", "updated", "template", "rollup"].includes(type)) {
return;
}
const rowID = rowElement.getAttribute("data-id");
const cellId = item.getAttribute("data-id");
const colId = item.getAttribute("data-col-id");
const oldValue = genCellValueByElement(type, item);
if (cellValue.type !== type) {
if (type === "date") {
// 类型不能转换时就不进行替换
return;
}
const content = cellValue[cellValue.type as "text"].content;
if (!content) {
return;
}
cellValue = genCellValue(type, cellValue[cellValue.type as "text"].content.toString());
} else if (cellValue.type === "block") {
cellValue.isDetached = true;
delete cellValue.block.id;
}
cellValue.id = cellId;
if ((cellValue.type === "date" && typeof cellValue.date === "string") ||
(cellValue.type === "relation" && typeof cellValue.relation === "string")) {
return;
}
if (objEquals(cellValue, oldValue)) {
return;
}
doOperations.push({
action: "updateAttrViewCell",
id: cellId,
avID,
keyID: colId,
rowID,
data: cellValue
});
undoOperations.push({
action: "updateAttrViewCell",
id: cellId,
avID,
keyID: colId,
rowID,
data: oldValue
});
updateAttrViewCellAnimation(item, cellValue);
});
if (doOperations.length > 0) {
doOperations.push({
action: "doUpdateUpdated",
id,
data: dayjs().format("YYYYMMDDHHmmss"),
});
undoOperations.push({
action: "doUpdateUpdated",
id,
data: blockElement.getAttribute("updated"),
});
transaction(protyle, doOperations, undoOperations);
}
return;
} catch (e) { } catch (e) {
console.warn("insert cell: JSON.parse error"); console.warn("insert cell: JSON.parse error");
} }
} else if (tempElement.content.querySelector("table")) {
tempElement.content.querySelectorAll("tr").forEach(item => {
Array.from(item.children).forEach(cell => {
values.push({
text: {content: cell.textContent},
type: "text"
})
})
})
}
if (values && Array.isArray(values) && values.length > 0) {
const cellElements: Element[] = Array.from(blockElement.querySelectorAll(".av__cell--active, .av__cell--select")) || [];
if (cellElements.length === 0) {
blockElement.querySelectorAll(".av__row--select:not(.av__row--header)").forEach(rowElement => {
rowElement.querySelectorAll(".av__cell").forEach(cellElement => {
cellElements.push(cellElement);
});
});
}
const doOperations: IOperation[] = [];
const undoOperations: IOperation[] = [];
const avID = blockElement.dataset.avId;
const id = blockElement.dataset.nodeId;
cellElements.forEach((item: HTMLElement, elementIndex) => {
let cellValue: IAVCellValue = values[elementIndex];
if (!cellValue) {
return;
}
const rowElement = hasClosestByClassName(item, "av__row");
if (!rowElement) {
return;
}
if (!blockElement.contains(item)) {
item = cellElements[elementIndex] = blockElement.querySelector(`.av__row[data-id="${rowElement.dataset.id}"] .av__cell[data-col-id="${item.dataset.colId}"]`) as HTMLElement;
}
const type = getTypeByCellElement(item) || item.dataset.type as TAVCol;
if (["created", "updated", "template", "rollup"].includes(type)) {
return;
}
const rowID = rowElement.getAttribute("data-id");
const cellId = item.getAttribute("data-id");
const colId = item.getAttribute("data-col-id");
const oldValue = genCellValueByElement(type, item);
if (cellValue.type !== type) {
if (type === "date") {
// 类型不能转换时就不进行替换
return;
}
const content = cellValue[cellValue.type as "text"].content;
if (!content) {
return;
}
cellValue = genCellValue(type, cellValue[cellValue.type as "text"].content.toString());
} else if (cellValue.type === "block") {
cellValue.isDetached = true;
delete cellValue.block.id;
}
cellValue.id = cellId;
if ((cellValue.type === "date" && typeof cellValue.date === "string") ||
(cellValue.type === "relation" && typeof cellValue.relation === "string")) {
return;
}
if (objEquals(cellValue, oldValue)) {
return;
}
doOperations.push({
action: "updateAttrViewCell",
id: cellId,
avID,
keyID: colId,
rowID,
data: cellValue
});
undoOperations.push({
action: "updateAttrViewCell",
id: cellId,
avID,
keyID: colId,
rowID,
data: oldValue
});
updateAttrViewCellAnimation(item, cellValue);
});
if (doOperations.length > 0) {
doOperations.push({
action: "doUpdateUpdated",
id,
data: dayjs().format("YYYYMMDDHHmmss"),
});
undoOperations.push({
action: "doUpdateUpdated",
id,
data: blockElement.getAttribute("updated"),
});
transaction(protyle, doOperations, undoOperations);
}
return;
} }
const text = protyle.lute.BlockDOM2EscapeMarkerContent(html); const text = protyle.lute.BlockDOM2EscapeMarkerContent(html);
const cellsElement: HTMLElement[] = Array.from(blockElement.querySelectorAll(".av__cell--select")); const cellsElement: HTMLElement[] = Array.from(blockElement.querySelectorAll(".av__cell--select"));