Skip to content

Commit

Permalink
🎨 #9886
Browse files Browse the repository at this point in the history
  • Loading branch information
@Vanessa219
Vanessa219 committed Dec 15, 2023
1 parent 0e58605 commit 26c424c
Show file tree
Hide file tree
Showing 5 changed files with 157 additions and 37 deletions.
10 changes: 2 additions & 8 deletions app/src/protyle/render/av/action.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,14 @@ import {hasClosestBlock, hasClosestByAttribute, hasClosestByClassName} from "../
import {transaction} from "../../wysiwyg/transaction";
import {openEditorTab} from "../../../menus/util";
import {copySubMenu} from "../../../menus/commonMenuItem";
import {getTypeByCellElement, popTextCell} from "./cell";
import {getCellText, getTypeByCellElement, popTextCell} from "./cell";
import {getColIconByType, showColMenu} from "./col";
import {insertAttrViewBlockAnimation, setPageSize, stickyRow, updateHeader} from "./row";
import {emitOpenMenu} from "../../../plugin/EventBus";
import {addCol} from "./col";
import {openMenuPanel} from "./openMenuPanel";
import {hintRef} from "../../hint/extend";
import {focusByRange} from "../../util/selection";
import {writeText} from "../../util/compatibility";
import {showMessage} from "../../../dialog/message";
import {previewImage} from "../../preview/image";
import {isLocalPath, pathPosix} from "../../../util/pathName";
Expand Down Expand Up @@ -42,12 +41,7 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle

const copyElement = hasClosestByAttribute(event.target, "data-type", "copy");
if (copyElement) {
const textElement = copyElement.previousElementSibling;
if (textElement.querySelector(".av__cellicon")) {
writeText(`${textElement.firstChild.textContent} → ${textElement.lastChild.textContent}`);
} else {
writeText(textElement.textContent);
}
getCellText(hasClosestByClassName(copyElement, "av__cell"));
showMessage(window.siyuan.languages.copied);
event.preventDefault();
event.stopPropagation();
Expand Down
133 changes: 128 additions & 5 deletions app/src/protyle/render/av/cell.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,68 @@ import {transaction} from "../../wysiwyg/transaction";
import {hasClosestBlock, hasClosestByClassName} from "../../util/hasClosest";
import {openMenuPanel} from "./openMenuPanel";
import {updateAttrViewCellAnimation} from "./action";
import {isNotCtrl} from "../../util/compatibility";
import {isNotCtrl, writeText} from "../../util/compatibility";
import {objEquals} from "../../../util/functions";
import {fetchPost} from "../../../util/fetch";
import {focusBlock} from "../../util/selection";
import * as dayjs from "dayjs";

export const getCellText = (cellElement: HTMLElement | false) => {
if (!cellElement) {
return
}
const textElement = cellElement.querySelector(".av__celltext");
if (textElement) {
if (textElement.querySelector(".av__cellicon")) {
writeText(`${textElement.firstChild.textContent} → ${textElement.lastChild.textContent}`);
} else {
writeText(textElement.textContent);
}
} else {
writeText(cellElement.textContent);
}
}

const genCellValueByElement = (colType: TAVCol, cellElement: HTMLElement) => {
let cellValue: IAVCellValue;
if (colType === "number") {
const value = cellElement.querySelector(".av__celltext").getAttribute("data-content")
cellValue = {
type: colType,
number: {
content: parseFloat(value) || 0,
isNotEmpty: !!value
}
};
} else if (["text", "block", "url", "phone", "email", "template"].includes(colType)) {
cellValue = {
type: colType,
[colType]: {
content: cellElement.querySelector(".av__celltext").textContent.trim()
}
};
} else if (colType === "mSelect" || colType === "select") {
const mSelect: IAVCellSelectValue[] = []
cellElement.querySelectorAll(".b3-chip").forEach((item: HTMLElement) => {
mSelect.push({
content: item.textContent.trim(),
color: item.style.color.replace("var(--b3-font-color", "").replace(")", "")
})
})
cellValue = {
type: colType,
mSelect
};
} else if (["date", "created", "updated"].includes(colType)) {
debugger;
cellValue = {
type: colType,
[colType]: JSON.parse(cellElement.querySelector(".av__celltext").getAttribute("data-value"))
};
}
return cellValue;
}

export const genCellValue = (colType: TAVCol, value: string | any) => {
let cellValue: IAVCellValue;
if (typeof value === "string") {
Expand All @@ -24,6 +80,7 @@ export const genCellValue = (colType: TAVCol, value: string | any) => {
cellValue = {
type: colType,
number: {
content: 0,
isNotEmpty: false
}
};
Expand Down Expand Up @@ -177,7 +234,7 @@ export const popTextCell = (protyle: IProtyle, cellElements: HTMLElement[], type
} else if (type === "date") {
openMenuPanel({protyle, blockElement, type: "date", cellElements});
} else if (type === "checkbox") {
updateCellValue(protyle, type, cellElements);
updateCellValueByInput(protyle, type, cellElements);
}
if (!hasClosestByClassName(cellElements[0], "custom-attr")) {
cellElements[0].classList.add("av__cell--select");
Expand Down Expand Up @@ -210,7 +267,7 @@ export const popTextCell = (protyle: IProtyle, cellElements: HTMLElement[], type
}
if (event.key === "Escape" || event.key === "Tab" ||
(event.key === "Enter" && !event.shiftKey && isNotCtrl(event))) {
updateCellValue(protyle, type, cellElements);
updateCellValueByInput(protyle, type, cellElements);
if (event.key === "Tab") {
protyle.wysiwyg.element.dispatchEvent(new KeyboardEvent("keydown", {
shiftKey: event.shiftKey,
Expand All @@ -228,13 +285,13 @@ export const popTextCell = (protyle: IProtyle, cellElements: HTMLElement[], type
}
avMaskElement.addEventListener("click", (event) => {
if ((event.target as HTMLElement).classList.contains("av__mask")) {
updateCellValue(protyle, type, cellElements);
updateCellValueByInput(protyle, type, cellElements);
avMaskElement?.remove();
}
});
};

const updateCellValue = (protyle: IProtyle, type: TAVCol, cellElements: HTMLElement[]) => {
const updateCellValueByInput = (protyle: IProtyle, type: TAVCol, cellElements: HTMLElement[]) => {
const rowElement = hasClosestByClassName(cellElements[0], "av__row");
if (!rowElement) {
return;
Expand Down Expand Up @@ -377,3 +434,69 @@ const updateCellValue = (protyle: IProtyle, type: TAVCol, cellElements: HTMLElem
item.remove();
});
};

export const updateCellsValue = (protyle: IProtyle, nodeElement: HTMLElement) => {
const doOperations: IOperation[] = []
const undoOperations: IOperation[] = []

const avID = nodeElement.dataset.avId
const id = nodeElement.dataset.nodeId
let text = ''
const cellElements: Element[] = Array.from(nodeElement.querySelectorAll(".av__cell--select")) || [];
if (cellElements.length === 0) {
nodeElement.querySelectorAll(".av__row--select:not(.av__row--header)").forEach(rowElement => {
rowElement.querySelectorAll(".av__cell").forEach(cellElement => {
cellElements.push(cellElement)
})
});
}
cellElements.forEach((item: HTMLElement) => {
const rowElement = hasClosestByClassName(item, "av__row");
if (!rowElement) {
return;
}
const type = getTypeByCellElement(item);
if (["created", "updated", "template"].includes(type)) {
return;
}
const rowID = rowElement.getAttribute("data-id");
const cellId = item.getAttribute("data-id");
const colId = item.getAttribute("data-col-id");

text += getCellText(item);

doOperations.push({
action: "updateAttrViewCell",
id: cellId,
avID,
keyID: colId,
rowID,
data: genCellValue(type, "")
});
undoOperations.push({
action: "updateAttrViewCell",
id: cellId,
avID,
keyID: colId,
rowID,
data: genCellValueByElement(type, item)
});
if (!hasClosestByClassName(cellElements[0], "custom-attr")) {
updateAttrViewCellAnimation(item);
}
})
if (doOperations.length > 0) {
doOperations.push({
action: "doUpdateUpdated",
id,
data: dayjs().format("YYYYMMDDHHmmss"),
})
undoOperations.push({
action: "doUpdateUpdated",
id,
data: nodeElement.getAttribute("updated"),
})
transaction(protyle, doOperations, undoOperations);
}
return text;
}
4 changes: 2 additions & 2 deletions app/src/protyle/render/av/render.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,8 +161,8 @@ style="width: ${column.width || "200px"}">${getCalcValue(column) || '<svg><use x
text += `<span class="b3-chip" style="background-color:var(--b3-font-background${item.color});color:var(--b3-font-color${item.color})">${item.content}</span>`;
});
} else if (cell.valueType === "date") {
text = '<span class="av__celltext">';
const dataValue = cell.value ? cell.value.date : null;
text = `<span class="av__celltext" data-value='${JSON.stringify(dataValue)}'>`;
if (dataValue && dataValue.isNotEmpty) {
text += dayjs(dataValue.content).format(dataValue.isNotTime ? "YYYY-MM-DD" : "YYYY-MM-DD HH:mm");
}
Expand All @@ -171,8 +171,8 @@ style="width: ${column.width || "200px"}">${getCalcValue(column) || '<svg><use x
}
text += "</span>";
} else if (["created", "updated"].includes(cell.valueType)) {
text = '<span class="av__celltext">';
const dataValue = cell.value ? cell.value[cell.valueType as "date"] : null;
text = `<span class="av__celltext" data-value='${JSON.stringify(dataValue)}'>`;
if (dataValue && dataValue.isNotEmpty) {
text += dayjs(dataValue.content).format("YYYY-MM-DD HH:mm");
}
Expand Down
34 changes: 25 additions & 9 deletions app/src/protyle/wysiwyg/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,7 @@ import {showColMenu} from "../render/av/col";
import {openViewMenu} from "../render/av/view";
import {avRender} from "../render/av/render";
import {checkFold} from "../../util/noRelyPCFunction";
import {getCellText, updateCellsValue} from "../render/av/cell";

export class WYSIWYG {
public lastHTMLs: { [key: string]: string } = {};
Expand Down Expand Up @@ -241,9 +242,10 @@ export class WYSIWYG {
return;
}
const selectImgElement = nodeElement.querySelector(".img--select");
const selectAVElement = nodeElement.querySelector(".av__row--select, .av__cell--select");
let selectElements = Array.from(protyle.wysiwyg.element.querySelectorAll(".protyle-wysiwyg--select"));
if (selectElements.length === 0 && range.toString() === "" && !range.cloneContents().querySelector("img") &&
!selectImgElement) {
!selectImgElement && !selectAVElement) {
nodeElement.classList.add("protyle-wysiwyg--select");
countBlockWord([nodeElement.getAttribute("data-node-id")]);
selectElements = [nodeElement];
Expand Down Expand Up @@ -282,6 +284,20 @@ export class WYSIWYG {
}
});
}
} else if (selectAVElement) {
const cellElements: Element[] = Array.from(nodeElement.querySelectorAll(".av__cell--select")) || [];
if (cellElements.length === 0) {
nodeElement.querySelectorAll(".av__row--select:not(.av__row--header)").forEach(rowElement => {
rowElement.querySelectorAll(".av__cell").forEach(cellElement => {
cellElements.push(cellElement)
})
});
}
cellElements.forEach((item: HTMLElement) => {
const cellText = getCellText(item);
html += cellText;
textPlain += cellText;
});
} else {
const tempElement = document.createElement("div");
// https://github.com/siyuan-note/siyuan/issues/5540
Expand Down Expand Up @@ -1091,18 +1107,14 @@ export class WYSIWYG {
event.preventDefault();
return;
}
if (nodeElement.classList.contains("av")) {
updateAVName(protyle, nodeElement);
event.stopPropagation();
return;
}

event.stopPropagation();
event.preventDefault();
const selectImgElement = nodeElement.querySelector(".img--select");
const selectAVElement = nodeElement.querySelector(".av__row--select, .av__cell--select");
let selectElements = Array.from(protyle.wysiwyg.element.querySelectorAll(".protyle-wysiwyg--select"));
if (selectElements.length === 0 && range.toString() === "" && !range.cloneContents().querySelector("img") &&
!selectImgElement) {
!selectImgElement && !selectAVElement) {
nodeElement.classList.add("protyle-wysiwyg--select");
selectElements = [nodeElement];
}
Expand Down Expand Up @@ -1131,6 +1143,8 @@ export class WYSIWYG {
// Ctrl+X 剪切后光标应跳到下一行行首 https://github.com/siyuan-note/siyuan/issues/5485
focusBlock(nextElement);
}
} else if (selectAVElement) {
html = updateCellsValue(protyle, nodeElement);
} else {
const id = nodeElement.getAttribute("data-node-id");
const oldHTML = nodeElement.outerHTML;
Expand Down Expand Up @@ -1234,7 +1248,9 @@ export class WYSIWYG {
tempElement.append(range.extractContents());
let parentElement: Element | false;
// https://ld246.com/article/1647689760545
if (nodeElement.classList.contains("table")) {
if (nodeElement.classList.contains("av")) {
updateAVName(protyle, nodeElement);
} else if (nodeElement.classList.contains("table")) {
parentElement = hasClosestByMatchTag(range.startContainer, "TD") || hasClosestByMatchTag(range.startContainer, "TH");
} else {
parentElement = getContenteditableElement(nodeElement);
Expand Down Expand Up @@ -1267,7 +1283,7 @@ export class WYSIWYG {
getContenteditableElement(nodeElement).removeAttribute("data-render");
highlightRender(nodeElement);
}
if (nodeElement.parentElement.parentElement && !isFoldHeading) {
if (nodeElement.parentElement.parentElement && !isFoldHeading && !nodeElement.classList.contains("av")) {
// 选中 heading 时，使用删除的 transaction
updateTransaction(protyle, id, nodeElement.outerHTML, oldHTML);
}
Expand Down
13 changes: 0 additions & 13 deletions app/src/protyle/wysiwyg/keydown.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1398,19 +1398,6 @@ export const keydown = (protyle: IProtyle, editorElement: HTMLElement) => {
return;
}

// 支持非编辑块复制 https://ld246.com/article/1695353747104
if ((matchHotKey("⌘X", event) || matchHotKey("⌘C", event)) &&
selectText === "" &&
!nodeElement.querySelector(".img--select")) {
if (protyle.wysiwyg.element.querySelectorAll(".protyle-wysiwyg--select").length === 0) {
if (nodeElement.dataset.type !== "NodeHTMLBlock") {
// html 块不需要选中 https://github.com/siyuan-note/siyuan/issues/8706
nodeElement.classList.add("protyle-wysiwyg--select");
}
}
// 复制块不能单纯的 BlockDOM2StdMd，否则 https://github.com/siyuan-note/siyuan/issues/9362
}

if (matchHotKey(window.siyuan.config.keymap.editor.general.vLayout.custom, event)) {
event.preventDefault();
event.stopPropagation();
Expand Down

0 comments on commit 26c424c

Please sign in to comment.