diff --git a/app/src/protyle/render/av/cell.ts b/app/src/protyle/render/av/cell.ts index 0665c69d8..527dcaeb6 100644 --- a/app/src/protyle/render/av/cell.ts +++ b/app/src/protyle/render/av/cell.ts @@ -473,7 +473,7 @@ export const updateCellsValue = (protyle: IProtyle, nodeElement: HTMLElement, va const avID = nodeElement.dataset.avId; const id = nodeElement.dataset.nodeId; let text = ""; - const json: IAVCellValue[] = []; + const json: IAVCellValue[][] = []; let cellElements: Element[]; if (cElements?.length > 0) { cellElements = cElements; @@ -511,7 +511,10 @@ export const updateCellsValue = (protyle: IProtyle, nodeElement: HTMLElement, va text += getCellText(item) + ((cellElements[elementIndex + 1] && item.nextElementSibling && item.nextElementSibling.isSameNode(cellElements[elementIndex + 1])) ? "\t" : "\n\n"); const oldValue = genCellValueByElement(type, item); - json.push(oldValue); + if (elementIndex === 0 || !cellElements[elementIndex - 1].isSameNode(item.previousElementSibling)) { + json.push([]); + } + json[json.length - 1].push(oldValue); // relation 为全部更新，以下类型为添加 if (type === "mAsset") { if (Array.isArray(value)) { diff --git a/app/src/protyle/util/insertHTML.ts b/app/src/protyle/util/insertHTML.ts index b462653d6..782c678e9 100644 --- a/app/src/protyle/util/insertHTML.ts +++ b/app/src/protyle/util/insertHTML.ts @@ -14,7 +14,7 @@ import {objEquals} from "../../util/functions"; const processAV = (range: Range, html: string, protyle: IProtyle, blockElement: HTMLElement) => { const tempElement = document.createElement("template"); tempElement.innerHTML = html; - let values: IAVCellValue[] = []; + let values: IAVCellValue[][] = []; if (html.endsWith("]") && html.startsWith("[")) { try { values = JSON.parse(html); @@ -23,8 +23,9 @@ const processAV = (range: Range, html: string, protyle: IProtyle, blockElement: } } else if (tempElement.content.querySelector("table")) { tempElement.content.querySelectorAll("tr").forEach(item => { + values.push([]) Array.from(item.children).forEach(cell => { - values.push({ + values[values.length - 1].push({ text: {content: cell.textContent}, type: "text" }); @@ -40,72 +41,84 @@ const processAV = (range: Range, html: string, protyle: IProtyle, blockElement: }); }); } + if (cellElements.length === 0) { + cellElements.push(blockElement.querySelector(".av__row:not(.av__row--header) .av__cell")); + } 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; + let currentRowElement: Element; + const firstColIndex = cellElements[0].getAttribute("data-col-id") + values.find(rowItem => { + if (!currentRowElement) { + currentRowElement = cellElements[0].parentElement; + } else { + currentRowElement = currentRowElement.nextElementSibling; } - const rowElement = hasClosestByClassName(item, "av__row"); - if (!rowElement) { - return; + if (!currentRowElement.classList.contains("av__row")) { + return true; } - 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") { - // 类型不能转换时就不进行替换 + let cellElement: HTMLElement; + rowItem.find(cellValue => { + if (!cellElement) { + cellElement = currentRowElement.querySelector(`.av__cell[data-col-id="${firstColIndex}"]`) as HTMLElement + } else { + cellElement = cellElement.nextElementSibling as HTMLElement + } + if (!cellElement.classList.contains("av__cell")) { + return true; + } + const type = getTypeByCellElement(cellElement) || cellElement.dataset.type as TAVCol; + if (["created", "updated", "template", "rollup"].includes(type)) { return; } - const content = cellValue[cellValue.type as "text"].content; - if (!content) { + const rowID = currentRowElement.getAttribute("data-id"); + const cellId = cellElement.getAttribute("data-id"); + const colId = cellElement.getAttribute("data-col-id"); + + const oldValue = genCellValueByElement(type, cellElement); + 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; } - 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 + 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(cellElement, cellValue); }); - undoOperations.push({ - action: "updateAttrViewCell", - id: cellId, - avID, - keyID: colId, - rowID, - data: oldValue - }); - updateAttrViewCellAnimation(item, cellValue); }); if (doOperations.length > 0) { doOperations.push({ diff --git a/app/src/protyle/wysiwyg/index.ts b/app/src/protyle/wysiwyg/index.ts index bd88ffe79..2e67cc4d6 100644 --- a/app/src/protyle/wysiwyg/index.ts +++ b/app/src/protyle/wysiwyg/index.ts @@ -308,7 +308,13 @@ export class WYSIWYG { html = "["; cellElements.forEach((item: HTMLElement, index) => { const cellText = getCellText(item); + if (index === 0 || !cellElements[index - 1].isSameNode(item.previousElementSibling)) { + html += "["; + } html += JSON.stringify(genCellValueByElement(getTypeByCellElement(item), item)) + ","; + if (index === cellElements.length - 1 || !cellElements[index + 1].isSameNode(item.nextElementSibling)) { + html = html.substring(0, html.length - 1) + "],"; + } textPlain += cellText + ((cellElements[index + 1] && item.nextElementSibling && item.nextElementSibling.isSameNode(cellElements[index + 1])) ? "\t" : "\n\n"); }); textPlain = textPlain.substring(0, textPlain.length - 2);