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

🎨 fix https://github.com/siyuan-note/siyuan/issues/5163

Browse source
This commit is contained in:
Vanessa 2022-06-12 22:06:19 +08:00
parent 56b73be686
commit ed92f9147c
3 changed files with 88 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -847,7 +847,7 @@ export const tableMenu = (protyle: IProtyle, nodeElement: Element, cellElement:
accelerator: window.siyuan.config.keymap.editor.general.alignLeft.custom,
label: window.siyuan.languages.alignLeft,
click: () => {
setTableAlign(protyle, cellElement, nodeElement, "left", range);
setTableAlign(protyle, [cellElement], nodeElement, "left", range);
}
});
menus.push({
@ -855,7 +855,7 @@ export const tableMenu = (protyle: IProtyle, nodeElement: Element, cellElement:
label: window.siyuan.languages.alignCenter,
accelerator: window.siyuan.config.keymap.editor.general.alignCenter.custom,
click: () => {
setTableAlign(protyle, cellElement, nodeElement, "center", range);
setTableAlign(protyle, [cellElement], nodeElement, "center", range);
}
});
menus.push({
@ -863,7 +863,7 @@ export const tableMenu = (protyle: IProtyle, nodeElement: Element, cellElement:
label: window.siyuan.languages.alignRight,
accelerator: window.siyuan.config.keymap.editor.general.alignRight.custom,
click: () => {
setTableAlign(protyle, cellElement, nodeElement, "right", range);
setTableAlign(protyle, [cellElement], nodeElement, "right", range);
}
});
menus.push({

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

@ -39,25 +39,29 @@ const goPreviousCell = (cellElement: HTMLElement, range: Range, isSelected = tru
return previousElement;
};
export const setTableAlign = (protyle: IProtyle, cellElement: HTMLElement, nodeElement: Element, type: string, range: Range) => {
export const setTableAlign = (protyle: IProtyle, cellElements: HTMLElement[], nodeElement: Element, type: string, range: Range) => {
range.insertNode(document.createElement("wbr"));
const html = nodeElement.outerHTML;
const tableElement = nodeElement.querySelector("table");
const columnCnt = tableElement.rows[0].cells.length;
const rowCnt = tableElement.rows.length;
let currentColumn = 0;
const currentColumns:number[] = [];
for (let i = 0; i < rowCnt; i++) {
for (let j = 0; j < columnCnt; j++) {
if (tableElement.rows[i].cells[j].isSameNode(cellElement)) {
currentColumn = j;
if (tableElement.rows[i].cells[j].isSameNode(cellElements[currentColumns.length])) {
currentColumns.push(j);
}
}
if (currentColumns.length > 0) {
break;
}
}
}
for (let k = 0; k < rowCnt; k++) {
tableElement.rows[k].cells[currentColumn].setAttribute("align", type);
currentColumns.forEach(item => {
tableElement.rows[k].cells[item].setAttribute("align", type);
})
}
updateTransaction(protyle, nodeElement.getAttribute("data-node-id"), nodeElement.outerHTML, html);
nodeElement.querySelector("wbr").remove();
@ -414,21 +418,21 @@ export const fixTable = (protyle: IProtyle, event: KeyboardEvent, range: Range)
return true;
}
// 剧左
// 居左
if (matchHotKey(window.siyuan.config.keymap.editor.general.alignLeft.custom, event)) {
setTableAlign(protyle, cellElement, nodeElement, "left", range);
setTableAlign(protyle, [cellElement], nodeElement, "left", range);
event.preventDefault();
return true;
}
// 剧中
// 居中
if (matchHotKey(window.siyuan.config.keymap.editor.general.alignCenter.custom, event)) {
setTableAlign(protyle, cellElement, nodeElement, "center", range);
setTableAlign(protyle, [cellElement], nodeElement, "center", range);
event.preventDefault();
return true;
}
// 剧右
// 居右
if (matchHotKey(window.siyuan.config.keymap.editor.general.alignRight.custom, event)) {
setTableAlign(protyle, cellElement, nodeElement, "right", range);
setTableAlign(protyle, [cellElement], nodeElement, "right", range);
event.preventDefault();
return true;
}

67
app/src/protyle/wysiwyg/index.ts
View file

@ -53,6 +53,7 @@ import {isCtrl} from "../util/compatibility";
import {MenuItem} from "../../menus/Menu";
import {fetchPost} from "../../util/fetch";
import {onGet} from "../util/onGet";
import {setTableAlign} from "../util/table";
export class WYSIWYG {
public lastHTMLs: { [key: string]: string } = {};
@ -1044,6 +1045,72 @@ export class WYSIWYG {
}
}
}).element);
window.siyuan.menus.menu.append(new MenuItem({
icon: "iconAlignLeft",
accelerator: window.siyuan.config.keymap.editor.general.alignLeft.custom,
label: window.siyuan.languages.alignLeft,
click: () => {
if (tableBlockElement) {
const selectCellElements: HTMLTableCellElement[] = [];
const scrollLeft = tableBlockElement.firstElementChild.scrollLeft;
tableBlockElement.querySelectorAll("th, td").forEach((item: HTMLTableCellElement) => {
if (!item.classList.contains("fn__none") &&
item.offsetLeft + 6 > tableSelectElement.offsetLeft + scrollLeft && item.offsetLeft + item.clientWidth - 6 < tableSelectElement.offsetLeft + scrollLeft + tableSelectElement.clientWidth &&
item.offsetTop + 6 > tableSelectElement.offsetTop && item.offsetTop + item.clientHeight - 6 < tableSelectElement.offsetTop + tableSelectElement.clientHeight &&
(selectCellElements.length === 0 || (selectCellElements.length > 0 && item.offsetTop === selectCellElements[0].offsetTop))) {
selectCellElements.push(item);
}
});
tableBlockElement.querySelector("table").classList.remove("select");
tableSelectElement.removeAttribute("style");
setTableAlign(protyle, selectCellElements, tableBlockElement, "left", getEditorRange(tableBlockElement));
}
}
}).element);
window.siyuan.menus.menu.append(new MenuItem({
icon: "iconAlignCenter",
accelerator: window.siyuan.config.keymap.editor.general.alignCenter.custom,
label: window.siyuan.languages.alignCenter,
click: () => {
if (tableBlockElement) {
const selectCellElements: HTMLTableCellElement[] = [];
const scrollLeft = tableBlockElement.firstElementChild.scrollLeft;
tableBlockElement.querySelectorAll("th, td").forEach((item: HTMLTableCellElement) => {
if (!item.classList.contains("fn__none") &&
item.offsetLeft + 6 > tableSelectElement.offsetLeft + scrollLeft && item.offsetLeft + item.clientWidth - 6 < tableSelectElement.offsetLeft + scrollLeft + tableSelectElement.clientWidth &&
item.offsetTop + 6 > tableSelectElement.offsetTop && item.offsetTop + item.clientHeight - 6 < tableSelectElement.offsetTop + tableSelectElement.clientHeight &&
(selectCellElements.length === 0 || (selectCellElements.length > 0 && item.offsetTop === selectCellElements[0].offsetTop))) {
selectCellElements.push(item);
}
});
tableBlockElement.querySelector("table").classList.remove("select");
tableSelectElement.removeAttribute("style");
setTableAlign(protyle, selectCellElements, tableBlockElement, "center", getEditorRange(tableBlockElement));
}
}
}).element);
window.siyuan.menus.menu.append(new MenuItem({
icon: "iconAlignRight",
accelerator: window.siyuan.config.keymap.editor.general.alignRight.custom,
label: window.siyuan.languages.alignRight,
click: () => {
if (tableBlockElement) {
const selectCellElements: HTMLTableCellElement[] = [];
const scrollLeft = tableBlockElement.firstElementChild.scrollLeft;
tableBlockElement.querySelectorAll("th, td").forEach((item: HTMLTableCellElement) => {
if (!item.classList.contains("fn__none") &&
item.offsetLeft + 6 > tableSelectElement.offsetLeft + scrollLeft && item.offsetLeft + item.clientWidth - 6 < tableSelectElement.offsetLeft + scrollLeft + tableSelectElement.clientWidth &&
item.offsetTop + 6 > tableSelectElement.offsetTop && item.offsetTop + item.clientHeight - 6 < tableSelectElement.offsetTop + tableSelectElement.clientHeight &&
(selectCellElements.length === 0 || (selectCellElements.length > 0 && item.offsetTop === selectCellElements[0].offsetTop))) {
selectCellElements.push(item);
}
});
tableBlockElement.querySelector("table").classList.remove("select");
tableSelectElement.removeAttribute("style");
setTableAlign(protyle, selectCellElements, tableBlockElement, "right", getEditorRange(tableBlockElement));
}
}
}).element);
window.siyuan.menus.menu.element.classList.remove("fn__none");
setPosition(window.siyuan.menus.menu.element, mouseUpEvent.clientX - 16, mouseUpEvent.clientY - 46);
}