0ct0pu5/siyuan
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Vanessa 2024-11-18 16:23:38 +08:00
parent b7297bdf42
commit 02edf47cda
6 changed files with 21 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
app/src/protyle/render/av/blockAttr.ts
View file

@ -1,6 +1,6 @@
import {fetchPost} from "../../../util/fetch";
import {addCol, getColIconByType} from "./col";
import {escapeAttr} from "../../../util/escape";
import {escapeAriaLabel, escapeAttr, escapeHtml} from "../../../util/escape";
import * as dayjs from "dayjs";
import {popTextCell, updateCellsValue} from "./cell";
import {hasClosestBlock, hasClosestByAttribute, hasClosestByClassName} from "../../util/hasClosest";
@ -71,7 +71,7 @@ export const genAVValueHTML = (value: IAVCellValue) => {
if (value.type === "select" && index > 0) {
return;
}
html += `<span class="b3-chip b3-chip--middle" style="background-color:var(--b3-font-background${item.color});color:var(--b3-font-color${item.color})">${item.content}</span>`;
html += `<span class="b3-chip b3-chip--middle" style="background-color:var(--b3-font-background${item.color});color:var(--b3-font-color${item.color})">${escapeHtml(item.content)}</span>`;
});
break;
case "mAsset":
@ -156,6 +156,7 @@ export const renderAVAttribute = (element: HTMLElement, id: string, protyle: IPr
key: {
type: TAVCol,
name: string,
desc: string,
icon: string,
id: string,
options?: {
@ -182,9 +183,9 @@ export const renderAVAttribute = (element: HTMLElement, id: string, protyle: IPr
table.keyValues?.forEach(item => {
innerHTML += `<div class="block__icons av__row" data-id="${id}" data-col-id="${item.key.id}">
<div class="block__icon" draggable="true"><svg><use xlink:href="#iconDrag"></use></svg></div>
<div class="block__logo ariaLabel fn__pointer" data-type="editCol" data-position="parentW" aria-label="${escapeAttr(item.key.name)}">
<div class="block__logo ariaLabel fn__pointer" data-type="editCol" data-position="parentW" aria-label="${escapeAriaLabel(item.key.name)}<div class='ft__on-surface'>${escapeAriaLabel(item.key.desc)}</div>">
${item.key.icon ? unicode2Emoji(item.key.icon, "block__logoicon", true) : `<svg class="block__logoicon"><use xlink:href="#${getColIconByType(item.key.type)}"></use></svg>`}
<span>${item.key.name}</span>
<span>${escapeHtml(item.key.name)}</span>
</div>
<div data-av-id="${table.avID}" data-col-id="${item.values[0].keyID}" data-block-id="${item.values[0].blockID}" data-id="${item.values[0].id}" data-type="${item.values[0].type}"
data-options="${item.key?.options ? escapeAttr(JSON.stringify(item.key.options)) : "[]"}"

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

@ -14,7 +14,7 @@ import {Constants} from "../../../constants";
import {hintRef} from "../../hint/extend";
import {pathPosix} from "../../../util/pathName";
import {mergeAddOption} from "./select";
import {escapeAttr} from "../../../util/escape";
import {escapeAttr, escapeHtml} from "../../../util/escape";
import {electronUndo} from "../../undo";
const renderCellURL = (urlContent: string) => {
@ -798,7 +798,7 @@ export const renderCell = (cellValue: IAVCellValue, rowIndex = 0) => {
if (cellValue.type === "select" && index > 0) {
return;
}
text += `<span class="b3-chip" style="background-color:var(--b3-font-background${item.color});color:var(--b3-font-color${item.color})">${item.content}</span>`;
text += `<span class="b3-chip" style="background-color:var(--b3-font-background${item.color});color:var(--b3-font-color${item.color})">${escapeHtml(item.content)}</span>`;
});
} else if (cellValue.type === "date") {
const dataValue = cellValue ? cellValue.date : null;

6
app/src/protyle/render/av/col.ts
View file

@ -92,7 +92,7 @@ export const getEditHTML = (options: {
<div class="fn__flex">
<span class="b3-menu__avemoji" data-col-type="${colData.type}" data-icon="${colData.icon}" data-type="update-icon">${colData.icon ? unicode2Emoji(colData.icon) : `<svg style="width: 14px;height: 14px"><use xlink:href="#${getColIconByType(colData.type)}"></use></svg>`}</span>
<div class="b3-form__icona fn__size200">
<input data-type="name" class="b3-text-field b3-form__icona-input" type="text" value="${colData.name}">
<input data-type="name" class="b3-text-field b3-form__icona-input" type="text">
<svg data-position="top" class="b3-form__icona-icon ariaLabel" aria-label="${colData.desc ? escapeAriaLabel(colData.desc) : window.siyuan.languages.addDesc}"><use xlink:href="#iconInfo"></use></svg>
</div>
</div>
@ -276,6 +276,7 @@ export const bindEditEvent = (options: {
}
});
nameElement.select();
nameElement.value = colData.name;
const descElement = options.menuElement.querySelector('.b3-text-field[data-type="desc"]') as HTMLTextAreaElement;
nameElement.nextElementSibling.addEventListener("click", () => {
const descPanelElement = descElement.parentElement
@ -669,7 +670,7 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen
<div class="fn__flex">
<span class="b3-menu__avemoji">${cellElement.dataset.icon ? unicode2Emoji(cellElement.dataset.icon) : `<svg style="height: 14px;width: 14px;"><use xlink:href="#${getColIconByType(type)}"></use></svg>`}</span>
<div class="b3-form__icona fn__size200">
<input class="b3-text-field b3-form__icona-input" type="text" value="${oldValue}">
<input class="b3-text-field b3-form__icona-input" type="text">
<svg data-position="top" class="b3-form__icona-icon ariaLabel" aria-label="${oldDesc ? escapeAriaLabel(oldDesc) : window.siyuan.languages.addDesc}"><use xlink:href="#iconInfo"></use></svg>
</div>
</div>
@ -706,6 +707,7 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen
event.stopPropagation();
});
const inputElement = element.querySelector("input");
inputElement.value = oldValue;
inputElement.addEventListener("keydown", (event: KeyboardEvent) => {
if (event.isComposing) {
return;

4
app/src/protyle/render/av/render.ts
View file

@ -134,7 +134,7 @@ export const avRender = (element: Element, protyle: IProtyle, cb?: () => void, v
tableHTML += `<div class="av__cell av__cell--header ariaLabel" data-col-id="${column.id}" draggable="true"
data-icon="${column.icon}" data-dtype="${column.type}" data-wrap="${column.wrap}" data-pin="${column.pin}"
data-desc="${escapeAttr(column.desc)}" data-position="top"
aria-label="${escapeAriaLabel(column.name)}<br><div class='ft__on-surface'>${escapeAriaLabel(column.desc || "")}</div>"
aria-label="${escapeAriaLabel(column.name)}<div class='ft__on-surface'>${escapeAriaLabel(column.desc || "")}</div>"
style="width: ${column.width || "200px"};">
${column.icon ? unicode2Emoji(column.icon, "av__cellheadericon", true) : `<svg class="av__cellheadericon"><use xlink:href="#${getColIconByType(column.type)}"></use></svg>`}
<span class="av__celltext fn__flex-1">${escapeHtml(column.name)}</span>
@ -202,7 +202,7 @@ ${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value, rowIndex)}
let tabHTML = "";
let viewData: IAVView;
response.data.views.forEach((item: IAVView) => {
tabHTML += `<div data-position="top" data-id="${item.id}" data-page="${item.pageSize}" aria-label="${escapeAriaLabel(item.name)}<br><div class='ft__on-surface'>${escapeAriaLabel(item.desc || "")}</div>" class="ariaLabel item${item.id === response.data.viewID ? " item--focus" : ""}">
tabHTML += `<div data-position="top" data-id="${item.id}" data-page="${item.pageSize}" aria-label="${escapeAriaLabel(item.name)}<div class='ft__on-surface'>${escapeAriaLabel(item.desc || "")}</div>" class="ariaLabel item${item.id === response.data.viewID ? " item--focus" : ""}">
${item.icon ? unicode2Emoji(item.icon, "item__graphic", true) : '<svg class="item__graphic"><use xlink:href="#iconTable"></use></svg>'}
<span class="item__text">${escapeHtml(item.name)}</span>
</div>`;

11
app/src/protyle/render/av/select.ts
View file

@ -6,7 +6,7 @@ import {upDownHint} from "../../../util/upDownHint";
import {bindEditEvent, getEditHTML} from "./col";
import {updateAttrViewCellAnimation} from "./action";
import {genAVValueHTML} from "./blockAttr";
import {escapeAriaLabel, escapeAttr} from "../../../util/escape";
import {escapeAriaLabel, escapeAttr, escapeHtml} from "../../../util/escape";
import {genCellValueByElement, getTypeByCellElement} from "./cell";
let cellValues: IAVCellValue[];
@ -28,11 +28,11 @@ const filterSelectHTML = (key: string, options: {
if (!key ||
(key.toLowerCase().indexOf(item.name.toLowerCase()) > -1 ||
item.name.toLowerCase().indexOf(key.toLowerCase()) > -1)) {
html += `<button data-type="addColOptionOrCell" class="b3-menu__item" data-name="${item.name}" data-desc="${item.desc||""}" draggable="true" data-color="${item.color}">
html += `<button data-type="addColOptionOrCell" class="b3-menu__item" data-name="${escapeAttr(item.name)}" data-desc="${escapeAttr(item.desc || "")}" draggable="true" data-color="${item.color}">
<svg class="b3-menu__icon fn__grab"><use xlink:href="#iconDrag"></use></svg>
<div class="fn__flex-1">
<span class="b3-chip" style="background-color:var(--b3-font-background${item.color});color:var(--b3-font-color${item.color})">
<span class="fn__ellipsis">${item.name}</span>
<span class="fn__ellipsis">${escapeHtml(item.name)}</span>
</span>
</div>
<svg class="b3-menu__action" data-type="setColOption"><use xlink:href="#iconEdit"></use></svg>
@ -212,7 +212,7 @@ export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement,
label: `<div>
<div class="fn__flex">
<div class="b3-form__icona fn__size200">
<input class="b3-text-field b3-form__icona-input" type="text" value="${name}">
<input class="b3-text-field b3-form__icona-input" type="text">
<svg data-position="top" class="b3-form__icona-icon ariaLabel" aria-label="${desc ? escapeAriaLabel(desc) : window.siyuan.languages.addDesc}"><use xlink:href="#iconInfo"></use></svg>
</div>
</div>
@ -231,6 +231,7 @@ export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement,
menu.close();
}
});
inputElement.value = name;
const descElement = element.querySelector("textarea")
inputElement.nextElementSibling.addEventListener("click", () => {
const descPanelElement = descElement.parentElement
@ -597,7 +598,7 @@ export const getSelectHTML = (data: IAVTable, cellElements: HTMLElement[], init
const selected: string[] = [];
cellValues[0].mSelect?.forEach((item) => {
selected.push(item.content);
selectedHTML += `<div class="b3-chip b3-chip--middle" data-content="${escapeAttr(item.content)}" style="background-color:var(--b3-font-background${item.color});color:var(--b3-font-color${item.color})">${item.content}<svg class="b3-chip__close" data-type="removeCellOption"><use xlink:href="#iconCloseRound"></use></svg></div>`;
selectedHTML += `<div class="b3-chip b3-chip--middle" data-content="${escapeAttr(item.content)}" style="background-color:var(--b3-font-background${item.color});color:var(--b3-font-color${item.color})">${escapeHtml(item.content)}<svg class="b3-chip__close" data-type="removeCellOption"><use xlink:href="#iconCloseRound"></use></svg></div>`;
});
return `<div class="b3-menu__items">

3
app/src/protyle/render/av/view.ts
View file

@ -121,6 +121,7 @@ export const bindViewEvent = (options: {
}
});
inputElement.select();
inputElement.value = inputElement.dataset.value;
const descElement = options.menuElement.querySelector('.b3-text-field[data-type="desc"]') as HTMLTextAreaElement;
inputElement.nextElementSibling.addEventListener("click", () => {
const descPanelElement = descElement.parentElement
@ -202,7 +203,7 @@ export const getViewHTML = (data: IAV) => {
<div class="fn__flex">
<span class="b3-menu__avemoji" data-type="update-view-icon">${view.icon ? unicode2Emoji(view.icon) : '<svg style="height: 14px;width: 14px"><use xlink:href="#iconTable"></use></svg>'}</span>
<div class="b3-form__icona fn__size200">
<input data-type="name" class="b3-text-field b3-form__icona-input" type="text" value="${escapeAttr(view.name)}" data-value="${escapeAttr(view.name)}">
<input data-type="name" class="b3-text-field b3-form__icona-input" type="text" data-value="${escapeAttr(view.name)}">
<svg data-position="top" class="b3-form__icona-icon ariaLabel" aria-label="${view.desc ? escapeAriaLabel(view.desc) : window.siyuan.languages.addDesc}"><use xlink:href="#iconInfo"></use></svg>
</div>
</div>