Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2026-03-11 23:22:33 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Vanessa 2023-06-10 16:27:52 +08:00
parent bf96331cf6
commit f56d6de5ce
9 changed files with 138 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

65
app/src/protyle/render/av/cell.ts
View file

@ -1,3 +1,66 @@
export const popTextCell = () => {
import {transaction} from "../../wysiwyg/transaction";
import {hasClosestBlock} from "../../util/hasClosest";
export const popTextCell = (protyle: IProtyle, cellElement: HTMLElement) => {
const index = parseInt(cellElement.getAttribute("data-index"))
const tableElement = cellElement.parentElement.parentElement
const colCellElement = tableElement.firstElementChild.children[index + 1];
const type = colCellElement.getAttribute("data-dtype") as TAVCol;
const cellRect = cellElement.getBoundingClientRect()
let html = ""
if (type === "block") {
html = `<textarea style="position:absolute;left: ${cellRect.left}px;top: ${cellRect.top}px" class="b3-text-field fn__size200">${cellElement.textContent}</textarea>`;
}
document.body.insertAdjacentHTML("beforeend", `<div class="av__mask">
${html}
</div>`);
const avMaskElement = document.querySelector(".av__mask");
const inputElement = avMaskElement.querySelector(".b3-text-field") as HTMLInputElement;
if (inputElement) {
inputElement.select();
inputElement.addEventListener("blur", () => {
updateCellValue(protyle, cellElement, type)
})
inputElement.addEventListener("keydown", (event) => {
if (event.isComposing) {
return
}
if (event.key === "Escape" || event.key === "Enter") {
updateCellValue(protyle, cellElement, type)
event.preventDefault();
event.stopPropagation();
}
})
}
avMaskElement.addEventListener("click", (event) => {
if ((event.target as HTMLElement).classList.contains("av__mask")) {
avMaskElement?.remove();
}
})
};
const updateCellValue = (protyle: IProtyle, cellElement: HTMLElement, type: TAVCol) => {
const avMaskElement = document.querySelector(".av__mask");
const inputElement = avMaskElement.querySelector(".b3-text-field") as HTMLInputElement;
const blockElement = hasClosestBlock(cellElement)
if (!blockElement) {
return
}
transaction(protyle, [{
action: "updateAttrViewCell",
id: blockElement.getAttribute("data-node-id"),
rowID: blockElement.getAttribute("data-av-id"),
type,
data: inputElement.value,
}], [{
action: "updateAttrViewCell",
id: blockElement.getAttribute("data-node-id"),
rowID: blockElement.getAttribute("data-av-id"),
type,
data: cellElement.textContent.trim(),
}]);
setTimeout(() => {
avMaskElement.remove();
})
}