diff --git a/app/src/protyle/util/table.ts b/app/src/protyle/util/table.ts index 873a31878..7d0d4b6fb 100644 --- a/app/src/protyle/util/table.ts +++ b/app/src/protyle/util/table.ts @@ -1,6 +1,6 @@ import {updateTransaction} from "../wysiwyg/transaction"; import {getSelectionOffset, focusByWbr, focusByRange, focusBlock} from "./selection"; -import {hasClosestBlock, hasClosestByMatchTag} from "./hasClosest"; +import {hasClosestBlock, hasClosestByClassName, hasClosestByMatchTag} from "./hasClosest"; import {matchHotKey} from "./hotKey"; import {isNotCtrl} from "./compatibility"; import {scrollCenter} from "../../util/highlightById"; @@ -371,10 +371,6 @@ export const fixTable = (protyle: IProtyle, event: KeyboardEvent, range: Range) return false; } - if (nodeElement.classList.contains("protyle-wysiwyg--select")) { - return false; - } - // shift+enter 软换行 if (event.key === "Enter" && event.shiftKey && isNotCtrl(event) && !event.altKey) { const wbrElement = document.createElement("wbr"); @@ -400,164 +396,167 @@ export const fixTable = (protyle: IProtyle, event: KeyboardEvent, range: Range) event.preventDefault(); return true; } - // enter 光标跳转到下一行同列 - if (isNotCtrl(event) && !event.shiftKey && !event.altKey && event.key === "Enter") { - event.preventDefault(); - const trElement = cellElement.parentElement as HTMLTableRowElement; - if ((!trElement.nextElementSibling && trElement.parentElement.tagName === "TBODY") || - (trElement.parentElement.tagName === "THEAD" && !trElement.parentElement.nextElementSibling)) { + + if (!nodeElement.classList.contains("protyle-wysiwyg--select") && !hasClosestByClassName(nodeElement, "protyle-wysiwyg--select")) { + // enter 光标跳转到下一行同列 + if (isNotCtrl(event) && !event.shiftKey && !event.altKey && event.key === "Enter") { + event.preventDefault(); + const trElement = cellElement.parentElement as HTMLTableRowElement; + if ((!trElement.nextElementSibling && trElement.parentElement.tagName === "TBODY") || + (trElement.parentElement.tagName === "THEAD" && !trElement.parentElement.nextElementSibling)) { + insertEmptyBlock(protyle, "afterend", nodeElement.getAttribute("data-node-id")); + return true; + } + let nextElement = trElement.nextElementSibling as HTMLTableRowElement; + if (!nextElement) { + nextElement = trElement.parentElement.nextElementSibling.firstChild as HTMLTableRowElement; + } + if (!nextElement) { + return true; + } + range.selectNodeContents(nextElement.cells[getColIndex(cellElement)]); + range.collapse(true); + scrollCenter(protyle); + return true; + } + // 表格后无内容时,按右键需新建空块 + if (event.key === "ArrowRight" && range.toString() === "" && + !nodeElement.nextElementSibling && + cellElement.isSameNode(nodeElement.querySelector("table").lastElementChild.lastElementChild.lastElementChild) && + getSelectionOffset(cellElement, protyle.wysiwyg.element, range).start === cellElement.textContent.length) { + event.preventDefault(); insertEmptyBlock(protyle, "afterend", nodeElement.getAttribute("data-node-id")); return true; } - let nextElement = trElement.nextElementSibling as HTMLTableRowElement; - if (!nextElement) { - nextElement = trElement.parentElement.nextElementSibling.firstChild as HTMLTableRowElement; - } - if (!nextElement) { - return true; - } - range.selectNodeContents(nextElement.cells[getColIndex(cellElement)]); - range.collapse(true); - scrollCenter(protyle); - return true; - } - // 表格后无内容时,按右键需新建空块 - if (event.key === "ArrowRight" && range.toString() === "" && - !nodeElement.nextElementSibling && - cellElement.isSameNode(nodeElement.querySelector("table").lastElementChild.lastElementChild.lastElementChild) && - getSelectionOffset(cellElement, protyle.wysiwyg.element, range).start === cellElement.textContent.length) { - event.preventDefault(); - insertEmptyBlock(protyle, "afterend", nodeElement.getAttribute("data-node-id")); - return true; - } - // tab:光标移向下一个 cell - if (event.key === "Tab" && isNotCtrl(event)) { - if (event.shiftKey) { - // shift + tab 光标移动到前一个 cell - goPreviousCell(cellElement, range); + // tab:光标移向下一个 cell + if (event.key === "Tab" && isNotCtrl(event)) { + if (event.shiftKey) { + // shift + tab 光标移动到前一个 cell + goPreviousCell(cellElement, range); + event.preventDefault(); + return true; + } + + let nextElement = cellElement.nextElementSibling; + if (!nextElement) { + if (cellElement.parentElement.nextElementSibling) { + nextElement = cellElement.parentElement.nextElementSibling.firstElementChild; + } else if (cellElement.parentElement.parentElement.tagName === "THEAD" && + cellElement.parentElement.parentElement.nextElementSibling) { + nextElement = + cellElement.parentElement.parentElement.nextElementSibling.firstElementChild.firstElementChild; + } else { + nextElement = null; + } + } + if (nextElement) { + range.selectNodeContents(nextElement); + } else { + insertRow(protyle, range, cellElement, nodeElement); + range.selectNodeContents(nodeElement.querySelector("tbody").lastElementChild.firstElementChild); + } event.preventDefault(); return true; } - let nextElement = cellElement.nextElementSibling; - if (!nextElement) { - if (cellElement.parentElement.nextElementSibling) { - nextElement = cellElement.parentElement.nextElementSibling.firstElementChild; - } else if (cellElement.parentElement.parentElement.tagName === "THEAD" && - cellElement.parentElement.parentElement.nextElementSibling) { - nextElement = - cellElement.parentElement.parentElement.nextElementSibling.firstElementChild.firstElementChild; + if (event.key === "ArrowUp" && isNotCtrl(event) && !event.shiftKey && !event.altKey) { + const startContainer = range.startContainer as HTMLElement; + let previousBrElement; + if (startContainer.nodeType !== 3 && (startContainer.tagName === "TH" || startContainer.tagName === "TD")) { + previousBrElement = (startContainer.childNodes[Math.min(range.startOffset, startContainer.childNodes.length - 1)] as HTMLElement); + } else if (startContainer.parentElement.tagName === "SPAN") { + previousBrElement = startContainer.parentElement.previousElementSibling; } else { - nextElement = null; + previousBrElement = startContainer.previousElementSibling; } - } - if (nextElement) { - range.selectNodeContents(nextElement); - } else { - insertRow(protyle, range, cellElement, nodeElement); - range.selectNodeContents(nodeElement.querySelector("tbody").lastElementChild.firstElementChild); - } - event.preventDefault(); - return true; - } - - if (event.key === "ArrowUp" && isNotCtrl(event) && !event.shiftKey && !event.altKey) { - const startContainer = range.startContainer as HTMLElement; - let previousBrElement; - if (startContainer.nodeType !== 3 && (startContainer.tagName === "TH" || startContainer.tagName === "TD")) { - previousBrElement = (startContainer.childNodes[Math.min(range.startOffset, startContainer.childNodes.length - 1)] as HTMLElement); - } else if (startContainer.parentElement.tagName === "SPAN") { - previousBrElement = startContainer.parentElement.previousElementSibling; - } else { - previousBrElement = startContainer.previousElementSibling; - } - while (previousBrElement) { - if (previousBrElement.tagName === "BR" && hasPreviousSibling(previousBrElement)) { + while (previousBrElement) { + if (previousBrElement.tagName === "BR" && hasPreviousSibling(previousBrElement)) { + return false; + } + previousBrElement = previousBrElement.previousElementSibling; + } + const trElement = cellElement.parentElement as HTMLTableRowElement; + let previousElement = trElement.previousElementSibling as HTMLTableRowElement; + if (!previousElement) { + previousElement = trElement.parentElement.previousElementSibling.lastElementChild as HTMLTableRowElement; + } + if (!previousElement || previousElement?.tagName === "COL") { return false; } - previousBrElement = previousBrElement.previousElementSibling; + range.selectNodeContents(previousElement.cells[getColIndex(cellElement)]); + range.collapse(false); + scrollCenter(protyle); + event.preventDefault(); + return true; } - const trElement = cellElement.parentElement as HTMLTableRowElement; - let previousElement = trElement.previousElementSibling as HTMLTableRowElement; - if (!previousElement) { - previousElement = trElement.parentElement.previousElementSibling.lastElementChild as HTMLTableRowElement; - } - if (!previousElement || previousElement?.tagName === "COL") { - return false; - } - range.selectNodeContents(previousElement.cells[getColIndex(cellElement)]); - range.collapse(false); - scrollCenter(protyle); - event.preventDefault(); - return true; - } - if (event.key === "ArrowDown" && isNotCtrl(event) && !event.shiftKey && !event.altKey) { - const endContainer = range.endContainer as HTMLElement; - let nextBrElement; - if (endContainer.nodeType !== 3 && (endContainer.tagName === "TH" || endContainer.tagName === "TD")) { - nextBrElement = (endContainer.childNodes[Math.max(0, range.endOffset - 1)] as HTMLElement)?.nextElementSibling; - } else if (endContainer.parentElement.tagName === "SPAN") { - nextBrElement = endContainer.parentElement.nextElementSibling; - } else { - nextBrElement = endContainer.nextElementSibling; - } - while (nextBrElement) { - if (nextBrElement.tagName === "BR" && nextBrElement.nextSibling) { + if (event.key === "ArrowDown" && isNotCtrl(event) && !event.shiftKey && !event.altKey) { + const endContainer = range.endContainer as HTMLElement; + let nextBrElement; + if (endContainer.nodeType !== 3 && (endContainer.tagName === "TH" || endContainer.tagName === "TD")) { + nextBrElement = (endContainer.childNodes[Math.max(0, range.endOffset - 1)] as HTMLElement)?.nextElementSibling; + } else if (endContainer.parentElement.tagName === "SPAN") { + nextBrElement = endContainer.parentElement.nextElementSibling; + } else { + nextBrElement = endContainer.nextElementSibling; + } + while (nextBrElement) { + if (nextBrElement.tagName === "BR" && nextBrElement.nextSibling) { + return false; + } + nextBrElement = nextBrElement.nextElementSibling; + } + const trElement = cellElement.parentElement as HTMLTableRowElement; + if ((!trElement.nextElementSibling && trElement.parentElement.tagName === "TBODY") || + (trElement.parentElement.tagName === "THEAD" && !trElement.parentElement.nextElementSibling)) { return false; } - nextBrElement = nextBrElement.nextElementSibling; + let nextElement = trElement.nextElementSibling as HTMLTableRowElement; + if (!nextElement) { + nextElement = trElement.parentElement.nextElementSibling.firstChild as HTMLTableRowElement; + } + if (!nextElement) { + return false; + } + range.selectNodeContents(nextElement.cells[getColIndex(cellElement)]); + range.collapse(true); + scrollCenter(protyle); + event.preventDefault(); + return true; } - const trElement = cellElement.parentElement as HTMLTableRowElement; - if ((!trElement.nextElementSibling && trElement.parentElement.tagName === "TBODY") || - (trElement.parentElement.tagName === "THEAD" && !trElement.parentElement.nextElementSibling)) { - return false; - } - let nextElement = trElement.nextElementSibling as HTMLTableRowElement; - if (!nextElement) { - nextElement = trElement.parentElement.nextElementSibling.firstChild as HTMLTableRowElement; - } - if (!nextElement) { - return false; - } - range.selectNodeContents(nextElement.cells[getColIndex(cellElement)]); - range.collapse(true); - scrollCenter(protyle); - event.preventDefault(); - return true; - } - // Backspace:光标移动到前一个 cell - if (isNotCtrl(event) && !event.shiftKey && !event.altKey && event.key === "Backspace" - && getSelectionOffset(cellElement, protyle.wysiwyg.element, range).start === 0 && range.toString() === "" && - // 空换行无法删除 https://github.com/siyuan-note/siyuan/issues/2732 - (range.startOffset === 0 || (range.startOffset === 1 && cellElement.querySelectorAll("br").length === 1))) { - const previousCellElement = goPreviousCell(cellElement, range, false); - if (!previousCellElement && nodeElement.previousElementSibling) { - focusBlock(nodeElement.previousElementSibling, undefined, false); + // Backspace:光标移动到前一个 cell + if (isNotCtrl(event) && !event.shiftKey && !event.altKey && event.key === "Backspace" + && getSelectionOffset(cellElement, protyle.wysiwyg.element, range).start === 0 && range.toString() === "" && + // 空换行无法删除 https://github.com/siyuan-note/siyuan/issues/2732 + (range.startOffset === 0 || (range.startOffset === 1 && cellElement.querySelectorAll("br").length === 1))) { + const previousCellElement = goPreviousCell(cellElement, range, false); + if (!previousCellElement && nodeElement.previousElementSibling) { + focusBlock(nodeElement.previousElementSibling, undefined, false); + } + scrollCenter(protyle); + event.preventDefault(); + return true; } - scrollCenter(protyle); - event.preventDefault(); - return true; - } - // 居左 - if (matchHotKey(window.siyuan.config.keymap.editor.general.alignLeft.custom, event)) { - 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); - event.preventDefault(); - return true; - } - // 居右 - if (matchHotKey(window.siyuan.config.keymap.editor.general.alignRight.custom, event)) { - setTableAlign(protyle, [cellElement], nodeElement, "right", range); - event.preventDefault(); - return true; + // 居左 + if (matchHotKey(window.siyuan.config.keymap.editor.general.alignLeft.custom, event)) { + 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); + event.preventDefault(); + return true; + } + // 居右 + if (matchHotKey(window.siyuan.config.keymap.editor.general.alignRight.custom, event)) { + setTableAlign(protyle, [cellElement], nodeElement, "right", range); + event.preventDefault(); + return true; + } } const tableElement = nodeElement.querySelector("table"); diff --git a/app/src/protyle/wysiwyg/keydown.ts b/app/src/protyle/wysiwyg/keydown.ts index 845a681dd..6feef09f5 100644 --- a/app/src/protyle/wysiwyg/keydown.ts +++ b/app/src/protyle/wysiwyg/keydown.ts @@ -1356,8 +1356,10 @@ export const keydown = (protyle: IProtyle, editorElement: HTMLElement) => { } if (matchHotKey(window.siyuan.config.keymap.editor.list.outdent.custom, event)) { const selectElements = protyle.wysiwyg.element.querySelectorAll(".protyle-wysiwyg--select"); - if (selectElements.length > 0 && selectElements[0].getAttribute("data-type") === "NodeListItem") { - listOutdent(protyle, Array.from(selectElements), range); + if (selectElements.length > 0) { + if (selectElements[0].getAttribute("data-type") === "NodeListItem") { + listOutdent(protyle, Array.from(selectElements), range); + } event.preventDefault(); event.stopPropagation(); return true; @@ -1368,10 +1370,13 @@ export const keydown = (protyle: IProtyle, editorElement: HTMLElement) => { return true; } } + if (matchHotKey(window.siyuan.config.keymap.editor.list.indent.custom, event)) { const selectElements = protyle.wysiwyg.element.querySelectorAll(".protyle-wysiwyg--select"); - if (selectElements.length > 0 && selectElements[0].getAttribute("data-type") === "NodeListItem") { - listIndent(protyle, Array.from(selectElements), range); + if (selectElements.length > 0) { + if (selectElements[0].getAttribute("data-type") === "NodeListItem") { + listIndent(protyle, Array.from(selectElements), range); + } event.preventDefault(); event.stopPropagation(); return true;