Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2026-02-21 14:34:06 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

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

Browse source
This commit is contained in:
Vanessa 2026-02-20 15:37:44 +08:00
parent e7b04229c5
commit 6e4db37c08
2 changed files with 88 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

80
app/src/menus/protyle.ts
View file

@ -2400,18 +2400,46 @@ export const tableMenu = (protyle: IProtyle, nodeElement: Element, cellElement:
${window.siyuan.languages.insertRowBefore.replace("${x}", `<span class="fn__space"></span><input style="width:64px" type="number" step="1" min="1" value="1" placeholder="${window.siyuan.languages.enterKey}" class="b3-text-field"><span class="fn__space"></span>`)}
</div>`,
accelerator: window.siyuan.config.keymap.editor.table.insertRowAbove.custom,
click: (element: HTMLElement) => {
insertRowAbove(protyle, range, cellElement, nodeElement, parseInt(element.querySelector("input").value));
bind(element: HTMLElement) {
const inputElement = element.querySelector("input");
element.addEventListener("click", () => {
if (document.activeElement === inputElement) {
return;
}
insertRowAbove(protyle, range, cellElement, nodeElement);
window.siyuan.menus.menu.remove();
});
inputElement.addEventListener("keydown", (event: KeyboardEvent) => {
if (!event.isComposing && event.key === "Enter") {
insertRowAbove(protyle, range, cellElement, nodeElement, parseInt(element.querySelector("input").value));
window.siyuan.menus.menu.remove();
}
});
}
});
if (!nextHasNone || (nextHasNone && !nextHasRowSpan && nextHasColSpan)) {
insertMenus.push({
id: "insertRowBelow",
icon: "iconAfter",
label: window.siyuan.languages.insertRowBelow,
label: `<div class="fn__flex" style="align-items: center;">
${window.siyuan.languages.insertRowAfter.replace("${x}", `<span class="fn__space"></span><input style="width:64px" type="number" step="1" min="1" value="1" placeholder="${window.siyuan.languages.enterKey}" class="b3-text-field"><span class="fn__space"></span>`)}
</div>`,
accelerator: window.siyuan.config.keymap.editor.table.insertRowBelow.custom,
click: () => {
insertRow(protyle, range, cellElement, nodeElement);
bind(element: HTMLElement) {
const inputElement = element.querySelector("input");
element.addEventListener("click", () => {
if (document.activeElement === inputElement) {
return;
}
insertRow(protyle, range, cellElement, nodeElement);
window.siyuan.menus.menu.remove();
});
inputElement.addEventListener("keydown", (event: KeyboardEvent) => {
if (!event.isComposing && event.key === "Enter") {
insertRow(protyle, range, cellElement, nodeElement, parseInt(element.querySelector("input").value));
window.siyuan.menus.menu.remove();
}
});
}
});
}
@ -2419,10 +2447,25 @@ ${window.siyuan.languages.insertRowBefore.replace("${x}", `<span class="fn__spac
insertMenus.push({
id: "insertColumnLeft",
icon: "iconInsertLeft",
label: window.siyuan.languages.insertColumnLeft,
label: `<div class="fn__flex" style="align-items: center;">
${window.siyuan.languages.insertColumnLeft1.replace("${x}", `<span class="fn__space"></span><input style="width:64px" type="number" step="1" min="1" value="1" placeholder="${window.siyuan.languages.enterKey}" class="b3-text-field"><span class="fn__space"></span>`)}
</div>`,
accelerator: window.siyuan.config.keymap.editor.table.insertColumnLeft.custom,
click: () => {
insertColumn(protyle, nodeElement, cellElement, "beforebegin", range);
bind(element: HTMLElement) {
const inputElement = element.querySelector("input");
element.addEventListener("click", () => {
if (document.activeElement === inputElement) {
return;
}
insertColumn(protyle, nodeElement, cellElement, "beforebegin", range);
window.siyuan.menus.menu.remove();
});
inputElement.addEventListener("keydown", (event: KeyboardEvent) => {
if (!event.isComposing && event.key === "Enter") {
insertColumn(protyle, nodeElement, cellElement, "beforebegin", range, parseInt(element.querySelector("input").value));
window.siyuan.menus.menu.remove();
}
});
}
});
}
@ -2430,10 +2473,25 @@ ${window.siyuan.languages.insertRowBefore.replace("${x}", `<span class="fn__spac
insertMenus.push({
id: "insertColumnRight",
icon: "iconInsertRight",
label: window.siyuan.languages.insertColumnRight,
label: `<div class="fn__flex" style="align-items: center;">
${window.siyuan.languages.insertColumnRight1.replace("${x}", `<span class="fn__space"></span><input style="width:64px" type="number" step="1" min="1" value="1" placeholder="${window.siyuan.languages.enterKey}" class="b3-text-field"><span class="fn__space"></span>`)}
</div>`,
accelerator: window.siyuan.config.keymap.editor.table.insertColumnRight.custom,
click: () => {
insertColumn(protyle, nodeElement, cellElement, "afterend", range);
bind(element: HTMLElement) {
const inputElement = element.querySelector("input");
element.addEventListener("click", () => {
if (document.activeElement === inputElement) {
return;
}
insertColumn(protyle, nodeElement, cellElement, "afterend", range);
window.siyuan.menus.menu.remove();
});
inputElement.addEventListener("keydown", (event: KeyboardEvent) => {
if (!event.isComposing && event.key === "Enter") {
insertColumn(protyle, nodeElement, cellElement, "afterend", range, parseInt(element.querySelector("input").value));
window.siyuan.menus.menu.remove();
}
});
}
});
}

34
app/src/protyle/util/table.ts
View file

@ -90,7 +90,7 @@ export const setTableAlign = (protyle: IProtyle, cellElements: HTMLElement[], no
focusByWbr(tableElement, range);
};
export const insertRow = (protyle: IProtyle, range: Range, cellElement: HTMLElement, nodeElement: Element) => {
export const insertRow = (protyle: IProtyle, range: Range, cellElement: HTMLElement, nodeElement: Element, count = 1) => {
const wbrElement = document.createElement("wbr");
range.insertNode(wbrElement);
const html = nodeElement.outerHTML;
@ -104,14 +104,14 @@ export const insertRow = (protyle: IProtyle, range: Range, cellElement: HTMLElem
if (cellElement.tagName === "TH") {
const tbodyElement = nodeElement.querySelector("tbody");
if (tbodyElement) {
tbodyElement.insertAdjacentHTML("afterbegin", `<tr>${rowHTML}</tr>`);
tbodyElement.insertAdjacentHTML("afterbegin", `<tr>${rowHTML}</tr>`.repeat(count));
newRowElement = tbodyElement.firstElementChild as HTMLTableRowElement;
} else {
cellElement.parentElement.parentElement.insertAdjacentHTML("afterend", `<tbody><tr>${rowHTML}</tr></tbody>`);
cellElement.parentElement.parentElement.insertAdjacentHTML("afterend", `<tbody>${`<tr>${rowHTML}</tr>`.repeat(count)}</tbody>`);
newRowElement = cellElement.parentElement.parentElement.nextElementSibling.firstElementChild as HTMLTableRowElement;
}
} else {
cellElement.parentElement.insertAdjacentHTML("afterend", `<tr>${rowHTML}</tr>`);
cellElement.parentElement.insertAdjacentHTML("afterend", `<tr>${rowHTML}</tr>`.repeat(count));
newRowElement = cellElement.parentElement.nextElementSibling as HTMLTableRowElement;
}
range.selectNodeContents(newRowElement.cells[getColIndex(cellElement)]);
@ -160,10 +160,10 @@ export const insertRowAbove = (protyle: IProtyle, range: Range, cellElement: HTM
if (cellElement.parentElement.parentElement.tagName === "THEAD" && !cellElement.parentElement.previousElementSibling) {
cellElement.parentElement.parentElement.insertAdjacentHTML("beforebegin", `<thead><tr>${rowHTML}</tr></thead>`);
newRowElement = nodeElement.querySelector("thead tr");
cellElement.parentElement.parentElement.nextElementSibling.insertAdjacentHTML("afterbegin", cellElement.parentElement.parentElement.innerHTML.replace(/<th/g, "<td").replace(/<\/th>/g, "</td>"));
if (count > 1) {
cellElement.parentElement.parentElement.nextElementSibling.insertAdjacentHTML("afterbegin", `<tr>${rowHTML.replace(/<th/g, "<td").replace(/<\/th>/g, "</td>")}</tr>`.repeat(count - 1));
}
cellElement.parentElement.parentElement.nextElementSibling.insertAdjacentHTML("afterbegin", cellElement.parentElement.parentElement.innerHTML.replace(/<th/g, "<td").replace(/<\/th>/g, "</td>"));
cellElement.parentElement.parentElement.remove();
} else {
cellElement.parentElement.insertAdjacentHTML("beforebegin", `<tr>${rowHTML}</tr>`.repeat(count));
@ -176,7 +176,7 @@ export const insertRowAbove = (protyle: IProtyle, range: Range, cellElement: HTM
scrollToView(nodeElement, newRowElement, protyle);
};
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, count = 1) => {
const wbrElement = document.createElement("wbr");
range.insertNode(wbrElement);
const html = nodeElement.outerHTML;
@ -185,19 +185,23 @@ export const insertColumn = (protyle: IProtyle, nodeElement: Element, cellElemen
const tableElement = nodeElement.querySelector("table");
for (let i = 0; i < tableElement.rows.length; i++) {
const colCellElement = tableElement.rows[i].cells[index];
const newCellElement = document.createElement(colCellElement.tagName);
colCellElement.insertAdjacentElement(type, newCellElement);
const tag = colCellElement.tagName.toLowerCase();
let html = "";
if (colCellElement === cellElement) {
newCellElement.innerHTML = "<wbr> ";
// 滚动条横向定位
if (newCellElement.offsetLeft + newCellElement.clientWidth > nodeElement.firstElementChild.scrollLeft + nodeElement.firstElementChild.clientWidth) {
nodeElement.firstElementChild.scrollLeft = newCellElement.offsetLeft + newCellElement.clientWidth - nodeElement.firstElementChild.clientWidth;
}
html = `<${tag}><wbr> </${tag}>` + `<${tag}> </${tag}>`.repeat(count - 1);
} else {
newCellElement.textContent = " ";
html = `<${tag}> </${tag}>`.repeat(count);
}
colCellElement.insertAdjacentHTML(type, html);
}
tableElement.querySelectorAll("col")[index].insertAdjacentHTML(type, "<col style='min-width: 60px;'>");
// 滚动条横向定位
if (type === "afterend" && cellElement.offsetLeft + cellElement.clientWidth + 60 >
nodeElement.firstElementChild.scrollLeft + nodeElement.firstElementChild.clientWidth) {
nodeElement.firstElementChild.scrollLeft = cellElement.offsetLeft + cellElement.clientWidth + 60 - nodeElement.firstElementChild.clientWidth;
} else if (type === "beforebegin" && cellElement.offsetLeft - 60 * count < nodeElement.firstElementChild.scrollLeft) {
nodeElement.firstElementChild.scrollLeft = cellElement.offsetLeft - 60 * count;
}
tableElement.querySelectorAll("col")[index].insertAdjacentHTML(type, "<col style='min-width: 60px;'>".repeat(count));
focusByWbr(nodeElement, range);
updateTransaction(protyle, nodeElement.getAttribute("data-node-id"), nodeElement.outerHTML, html);
};