github/siyuan
4
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-05-18 10:00:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

🚸 fix https://github.com/siyuan-note/siyuan/issues/5955 1

Browse Source
This commit is contained in:
Vanessa 2022-09-28 12:13:15 +08:00
parent 2f20e64e20
commit 5bbab828d5
1 changed files with 28 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
app/src/protyle/util/table.ts
View File

@ -69,31 +69,39 @@ export const setTableAlign = (protyle: IProtyle, cellElements: HTMLElement[], no
}; };
export const insertRow = (protyle: IProtyle, range: Range, cellElement: HTMLElement, nodeElement: Element) => { export const insertRow = (protyle: IProtyle, range: Range, cellElement: HTMLElement, nodeElement: Element) => {
range.insertNode(document.createElement("wbr")); const wbrElement = document.createElement("wbr")
range.insertNode(wbrElement);
const html = nodeElement.outerHTML; const html = nodeElement.outerHTML;
wbrElement.remove();
let rowHTML = ""; let rowHTML = "";
for (let m = 0; m < cellElement.parentElement.childElementCount; m++) { for (let m = 0; m < cellElement.parentElement.childElementCount; m++) {
rowHTML += `<td align="${cellElement.parentElement.children[m].getAttribute("align") || ""}"> </td>`; rowHTML += `<td align="${cellElement.parentElement.children[m].getAttribute("align") || ""}"> </td>`;
} }
let newRowElememt: HTMLTableRowElement;
if (cellElement.tagName === "TH") { if (cellElement.tagName === "TH") {
const tbodyElement = nodeElement.querySelector("tbody"); const tbodyElement = nodeElement.querySelector("tbody");
if (tbodyElement) { if (tbodyElement) {
tbodyElement.insertAdjacentHTML("afterbegin", `<tr>${rowHTML}</tr>`); tbodyElement.insertAdjacentHTML("afterbegin", `<tr>${rowHTML}</tr>`);
newRowElememt = tbodyElement.firstElementChild as HTMLTableRowElement;
} else { } else {
cellElement.parentElement.parentElement.insertAdjacentHTML("afterend", `<tbody><tr>${rowHTML}</tr></tbody>`); cellElement.parentElement.parentElement.insertAdjacentHTML("afterend", `<tbody><tr>${rowHTML}</tr></tbody>`);
newRowElememt = cellElement.parentElement.parentElement.nextElementSibling.firstElementChild as HTMLTableRowElement;
} }
} else { } else {
cellElement.parentElement.insertAdjacentHTML("afterend", `<tr>${rowHTML}</tr>`); cellElement.parentElement.insertAdjacentHTML("afterend", `<tr>${rowHTML}</tr>`);
newRowElememt = cellElement.parentElement.nextElementSibling as HTMLTableRowElement;
} }
range.selectNodeContents(newRowElememt.cells[getColIndex(cellElement)]);
range.collapse(true);
updateTransaction(protyle, nodeElement.getAttribute("data-node-id"), nodeElement.outerHTML, html); updateTransaction(protyle, nodeElement.getAttribute("data-node-id"), nodeElement.outerHTML, html);
nodeElement.querySelector("wbr").remove();
}; };
export const insertRowAbove = (protyle: IProtyle, range: Range, cellElement: HTMLElement, nodeElement: Element) => { export const insertRowAbove = (protyle: IProtyle, range: Range, cellElement: HTMLElement, nodeElement: Element) => {
range.insertNode(document.createElement("wbr")); const wbrElement = document.createElement("wbr")
range.insertNode(wbrElement);
const html = nodeElement.outerHTML; const html = nodeElement.outerHTML;
wbrElement.remove();
let rowHTML = ""; let rowHTML = "";
let hasNone = false; let hasNone = false;
@ -123,33 +131,41 @@ export const insertRowAbove = (protyle: IProtyle, range: Range, cellElement: HTM
previousTrElement = previousTrElement.previousElementSibling; previousTrElement = previousTrElement.previousElementSibling;
} }
} }
let newRowElememt: HTMLTableRowElement
if (cellElement.parentElement.parentElement.tagName === "THEAD" && !cellElement.parentElement.previousElementSibling) { if (cellElement.parentElement.parentElement.tagName === "THEAD" && !cellElement.parentElement.previousElementSibling) {
cellElement.parentElement.parentElement.insertAdjacentHTML("beforebegin", `<thead><tr>${rowHTML}</tr></thead>`); cellElement.parentElement.parentElement.insertAdjacentHTML("beforebegin", `<thead><tr>${rowHTML}</tr></thead>`);
newRowElememt = nodeElement.querySelector("thead tr")
cellElement.parentElement.parentElement.nextElementSibling.insertAdjacentHTML("afterbegin", cellElement.parentElement.parentElement.innerHTML); cellElement.parentElement.parentElement.nextElementSibling.insertAdjacentHTML("afterbegin", cellElement.parentElement.parentElement.innerHTML);
cellElement.parentElement.parentElement.remove(); cellElement.parentElement.parentElement.remove();
} else { } else {
cellElement.parentElement.insertAdjacentHTML("beforebegin", `<tr>${rowHTML}</tr>`); cellElement.parentElement.insertAdjacentHTML("beforebegin", `<tr>${rowHTML}</tr>`);
newRowElememt = cellElement.parentElement.previousElementSibling as HTMLTableRowElement;
} }
range.selectNodeContents(newRowElememt.cells[getColIndex(cellElement)]);
range.collapse(true);
updateTransaction(protyle, nodeElement.getAttribute("data-node-id"), nodeElement.outerHTML, html); updateTransaction(protyle, nodeElement.getAttribute("data-node-id"), nodeElement.outerHTML, html);
focusByWbr(protyle.wysiwyg.element, range);
}; };
export const insertColumn = (protyle: IProtyle, nodeElement: Element, cellElement: HTMLElement, type: InsertPosition, range: Range) => { export const insertColumn = (protyle: IProtyle, nodeElement: Element, cellElement: HTMLElement, type: InsertPosition, range: Range) => {
range.insertNode(document.createElement("wbr")); const wbrElement = document.createElement("wbr")
range.insertNode(wbrElement);
const html = nodeElement.outerHTML; const html = nodeElement.outerHTML;
wbrElement.remove();
const index = getColIndex(cellElement); const index = getColIndex(cellElement);
const tableElement = nodeElement.querySelector("table"); const tableElement = nodeElement.querySelector("table");
for (let i = 0; i < tableElement.rows.length; i++) { for (let i = 0; i < tableElement.rows.length; i++) {
if (i === 0) { const colCellElement = tableElement.rows[i].cells[index]
tableElement.rows[i].cells[index].insertAdjacentHTML(type, "<th></th>"); const newCellElement = document.createElement(colCellElement.tagName)
if (colCellElement.isSameNode(cellElement)) {
newCellElement.innerHTML = "<wbr> ";
} else { } else {
tableElement.rows[i].cells[index].insertAdjacentHTML(type, "<td></td>"); newCellElement.textContent = " ";
} }
colCellElement.insertAdjacentElement(type, newCellElement);
} }
tableElement.querySelectorAll("col")[index].insertAdjacentHTML(type, "<col>"); tableElement.querySelectorAll("col")[index].insertAdjacentHTML(type, "<col>");
focusByWbr(nodeElement, range);
updateTransaction(protyle, nodeElement.getAttribute("data-node-id"), nodeElement.outerHTML, html); updateTransaction(protyle, nodeElement.getAttribute("data-node-id"), nodeElement.outerHTML, html);
nodeElement.querySelector("wbr").remove();
}; };
export const deleteRow = (protyle: IProtyle, range: Range, cellElement: HTMLElement, nodeElement: Element) => { export const deleteRow = (protyle: IProtyle, range: Range, cellElement: HTMLElement, nodeElement: Element) => {
@ -361,7 +377,7 @@ export const fixTable = (protyle: IProtyle, event: KeyboardEvent, range: Range)
if (event.key === "ArrowRight" && range.toString() === "" && if (event.key === "ArrowRight" && range.toString() === "" &&
!nodeElement.nextElementSibling && !nodeElement.nextElementSibling &&
cellElement.isSameNode(nodeElement.querySelector("table").lastElementChild.lastElementChild.lastElementChild) && cellElement.isSameNode(nodeElement.querySelector("table").lastElementChild.lastElementChild.lastElementChild) &&
getSelectionOffset(cellElement, protyle.wysiwyg.element, range).start === cellElement.textContent.length ) { getSelectionOffset(cellElement, protyle.wysiwyg.element, range).start === cellElement.textContent.length) {
event.preventDefault(); event.preventDefault();
insertEmptyBlock(protyle, "afterend", nodeElement.getAttribute("data-node-id")); insertEmptyBlock(protyle, "afterend", nodeElement.getAttribute("data-node-id"));
return true; return true;