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

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

Browse source
This commit is contained in:
Vanessa 2024-04-12 10:18:45 +08:00
parent 541483ed29
commit 8cdcc98424
3 changed files with 49 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

101
app/src/protyle/render/av/asset.ts
View file

@ -43,8 +43,7 @@ export const bindAssetEvent = (options: {
protyle: options.protyle, protyle: options.protyle,
data: options.data, data: options.data,
cellElements: options.cellElements, cellElements: options.cellElements,
type: "addUpdate", addValue: value,
addUpdateValue: value,
blockElement: options.blockElement blockElement: options.blockElement
}); });
}); });
@ -53,20 +52,20 @@ export const bindAssetEvent = (options: {
export const getAssetHTML = (cellElements: HTMLElement[]) => { export const getAssetHTML = (cellElements: HTMLElement[]) => {
let html = ""; let html = "";
genCellValueByElement("mAsset", cellElements[0]).mAsset.forEach(item => { genCellValueByElement("mAsset", cellElements[0]).mAsset.forEach((item, index) => {
if (!item.content) { if (!item.content) {
return; return;
} }
let contentHTML; let contentHTML;
if (item.type === "image") { if (item.type === "image") {
contentHTML = `<span data-type="openAssetItem" class="fn__flex-1"> contentHTML = `<span data-type="openAssetItem" class="fn__flex-1 ariaLabel" aria-label="${item.content}">
<img style="max-height: 180px;max-width: 360px;border-radius: var(--b3-border-radius);margin: 4px 0;" src="${item.content}"/> <img style="max-height: 180px;max-width: 360px;border-radius: var(--b3-border-radius);margin: 4px 0;" src="${item.content}"/>
</span>`; </span>`;
} else { } else {
contentHTML = `<span data-type="openAssetItem" class="fn__ellipsis b3-menu__label" style="max-width: 360px">${item.name}</span>`; contentHTML = `<span data-type="openAssetItem" class="fn__ellipsis b3-menu__label ariaLabel" aria-label="${item.content}" style="max-width: 360px">${item.name}</span>`;
} }
html += `<button class="b3-menu__item" draggable="true" data-name="${item.name}" data-type="${item.type}" data-content="${item.content}"> html += `<button class="b3-menu__item" draggable="true" data-index="${index}" data-name="${item.name}" data-type="${item.type}" data-content="${item.content}">
<svg class="b3-menu__icon fn__grab"><use xlink:href="#iconDrag"></use></svg> <svg class="b3-menu__icon fn__grab"><use xlink:href="#iconDrag"></use></svg>
${contentHTML} ${contentHTML}
<svg class="b3-menu__action" data-type="editAssetItem"><use xlink:href="#iconEdit"></use></svg> <svg class="b3-menu__action" data-type="editAssetItem"><use xlink:href="#iconEdit"></use></svg>
@ -94,10 +93,10 @@ export const updateAssetCell = (options: {
protyle: IProtyle, protyle: IProtyle,
data: IAV, data: IAV,
cellElements: HTMLElement[], cellElements: HTMLElement[],
type: "replace" | "addUpdate" | "remove",
replaceValue?: IAVCellAssetValue[], replaceValue?: IAVCellAssetValue[],
addUpdateValue?: IAVCellAssetValue[], addValue?: IAVCellAssetValue[],
removeContent?: string, updateValue?: { index: number, value: IAVCellAssetValue }
removeIndex?: number,
blockElement: Element blockElement: Element
}) => { }) => {
const colId = options.cellElements[0].dataset.colId; const colId = options.cellElements[0].dataset.colId;
@ -115,33 +114,20 @@ export const updateAssetCell = (options: {
const rowID = (hasClosestByClassName(item, "av__row") as HTMLElement).dataset.id; const rowID = (hasClosestByClassName(item, "av__row") as HTMLElement).dataset.id;
const oldValue = JSON.parse(JSON.stringify(cellValue)); const oldValue = JSON.parse(JSON.stringify(cellValue));
if (elementIndex === 0) { if (elementIndex === 0) {
if (options.type === "remove") { if (typeof options.removeIndex === "number") {
cellValue.mAsset.find((oldItem, index) => { cellValue.mAsset.splice(options.removeIndex, 1);
if (oldItem.content === options.removeContent) { } else if (options.addValue?.length > 0) {
cellValue.mAsset.splice(index, 1); cellValue.mAsset = cellValue.mAsset.concat(options.addValue);
} else if (options.updateValue) {
cellValue.mAsset.find((assetItem, index) => {
if (index === options.updateValue.index) {
assetItem.content = options.updateValue.value.content;
assetItem.type = options.updateValue.value.type;
assetItem.name = options.updateValue.value.name;
return true; return true;
} }
}); });
} else if (options.type === "addUpdate") { } else if (options.replaceValue?.length > 0) {
options.addUpdateValue.forEach(newitem => {
if (!newitem.content) {
return;
}
const hasMatch = cellValue.mAsset.find(oldItem => {
if (oldItem.content === newitem.content) {
oldItem.name = newitem.name;
oldItem.type = newitem.type;
return true;
}
});
if (!hasMatch) {
if (newitem.type === "file" && !newitem.name) {
newitem.name = newitem.content;
}
cellValue.mAsset.push(newitem);
}
});
} else {
cellValue.mAsset = options.replaceValue; cellValue.mAsset = options.replaceValue;
} }
mAssetValue = cellValue.mAsset; mAssetValue = cellValue.mAsset;
@ -203,20 +189,23 @@ export const editAssetItem = (protyle: IProtyle, data: IAV, cellElements: HTMLEl
const linkAddress = target.dataset.content; const linkAddress = target.dataset.content;
const type = target.dataset.type as "image" | "file"; const type = target.dataset.type as "image" | "file";
const menu = new Menu("av-asset-edit", () => { const menu = new Menu("av-asset-edit", () => {
if (!textElement || !textElement.value || textElement.value === target.dataset.name) { if (textElements.length < 2 || !textElements[0].value ||
(textElements[0].value === linkAddress && textElements[1].value === target.dataset.name)) {
return; return;
} }
updateAssetCell({ updateAssetCell({
protyle, protyle,
data, data,
cellElements, cellElements,
type: "addUpdate",
blockElement, blockElement,
addUpdateValue: [{ updateValue: {
content: linkAddress, index: parseInt(target.dataset.index),
name: textElement.value, value: {
type content: textElements[0].value,
}] name: textElements[1].value,
type
}
}
}); });
}); });
if (menu.isOpen) { if (menu.isOpen) {
@ -226,7 +215,11 @@ export const editAssetItem = (protyle: IProtyle, data: IAV, cellElements: HTMLEl
menu.addItem({ menu.addItem({
iconHTML: "", iconHTML: "",
type: "readonly", type: "readonly",
label: `${window.siyuan.languages.title}<textarea rows="1" style="margin:4px 0;width: ${isMobile() ? "200" : "360"}px" class="b3-text-field"></textarea>`, label: `${window.siyuan.languages.link}
<textarea rows="1" style="margin:4px 0;width: ${isMobile() ? "200" : "360"}px;resize: vertical;" class="b3-text-field"></textarea>
<div class="fn__hr"></div>
${window.siyuan.languages.title}
<textarea style="width: ${isMobile() ? "200" : "360"}px;margin: 4px 0;resize: vertical;" rows="1" class="b3-text-field"></textarea>`,
}); });
} else { } else {
menu.addItem({ menu.addItem({
@ -246,8 +239,7 @@ export const editAssetItem = (protyle: IProtyle, data: IAV, cellElements: HTMLEl
data, data,
cellElements, cellElements,
blockElement, blockElement,
type: "remove", removeIndex: parseInt(target.dataset.index)
removeContent: linkAddress
}); });
} }
}); });
@ -257,9 +249,10 @@ export const editAssetItem = (protyle: IProtyle, data: IAV, cellElements: HTMLEl
window.siyuan.menus.menu.append(new MenuItem(exportAsset(linkAddress)).element); window.siyuan.menus.menu.append(new MenuItem(exportAsset(linkAddress)).element);
} }
/// #endif /// #endif
const textElement = menu.element.querySelector("textarea"); const textElements = menu.element.querySelectorAll("textarea");
if (textElement) { if (textElements.length > 1) {
textElement.value = target.dataset.name; textElements[1].value = target.dataset.name;
textElements[0].value = linkAddress;
} }
const rect = target.getBoundingClientRect(); const rect = target.getBoundingClientRect();
menu.open({ menu.open({
@ -281,8 +274,7 @@ export const addAssetLink = (protyle: IProtyle, data: IAV, cellElements: HTMLEle
data, data,
cellElements, cellElements,
blockElement, blockElement,
type: "addUpdate", addValue: [{
addUpdateValue: [{
type: "file", type: "file",
name: textElements[1].value, name: textElements[1].value,
content: textElements[0].value, content: textElements[0].value,
@ -296,10 +288,10 @@ export const addAssetLink = (protyle: IProtyle, data: IAV, cellElements: HTMLEle
iconHTML: "", iconHTML: "",
type: "readonly", type: "readonly",
label: `${window.siyuan.languages.link} label: `${window.siyuan.languages.link}
<textarea rows="1" style="margin:4px 0;width: ${isMobile() ? "200" : "360"}px" class="b3-text-field"></textarea> <textarea rows="1" style="margin:4px 0;width: ${isMobile() ? "200" : "360"}px;resize: vertical;" class="b3-text-field"></textarea>
<div class="fn__hr"></div> <div class="fn__hr"></div>
${window.siyuan.languages.title} ${window.siyuan.languages.title}
<textarea style="width: ${isMobile() ? "200" : "360"}px;margin: 4px 0;" rows="1" class="b3-text-field"></textarea>`, <textarea style="width: ${isMobile() ? "200" : "360"}px;margin: 4px 0;resize: vertical;" rows="1" class="b3-text-field"></textarea>`,
}); });
const rect = target.getBoundingClientRect(); const rect = target.getBoundingClientRect();
menu.open({ menu.open({
@ -320,18 +312,18 @@ export const dragUpload = (files: string[], protyle: IProtyle, cellElement: HTML
const blockElement = hasClosestBlock(cellElement); const blockElement = hasClosestBlock(cellElement);
if (blockElement) { if (blockElement) {
hideMessage(msgId); hideMessage(msgId);
const addUpdateValue: IAVCellAssetValue[] = []; const addValue: IAVCellAssetValue[] = [];
Object.keys(response.data.succMap).forEach(key => { Object.keys(response.data.succMap).forEach(key => {
const type = pathPosix().extname(key).toLowerCase(); const type = pathPosix().extname(key).toLowerCase();
const name = key.substring(0, key.length - type.length); const name = key.substring(0, key.length - type.length);
if (Constants.SIYUAN_ASSETS_IMAGE.includes(type)) { if (Constants.SIYUAN_ASSETS_IMAGE.includes(type)) {
addUpdateValue.push({ addValue.push({
type: "image", type: "image",
name, name,
content: response.data.succMap[key], content: response.data.succMap[key],
}); });
} else { } else {
addUpdateValue.push({ addValue.push({
type: "file", type: "file",
name, name,
content: response.data.succMap[key], content: response.data.succMap[key],
@ -348,8 +340,7 @@ export const dragUpload = (files: string[], protyle: IProtyle, cellElement: HTML
blockElement, blockElement,
data: response.data as IAV, data: response.data as IAV,
cellElements: [cellElement], cellElements: [cellElement],
type: "addUpdate", addValue
addUpdateValue
}); });
}); });
} }

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

@ -675,9 +675,9 @@ export const renderCell = (cellValue: IAVCellValue) => {
} else if (cellValue.type === "mAsset") { } else if (cellValue.type === "mAsset") {
cellValue?.mAsset?.forEach((item) => { cellValue?.mAsset?.forEach((item) => {
if (item.type === "image") { if (item.type === "image") {
text += `<img class="av__cellassetimg" src="${item.content}">`; text += `<img class="av__cellassetimg ariaLabel" aria-label="${item.content}" src="${item.content}">`;
} else { } else {
text += `<span class="b3-chip av__celltext--url" data-url="${item.content}">${item.name}</span>`; text += `<span class="b3-chip av__celltext--url ariaLabel" aria-label="${item.content}" data-url="${item.content}">${item.name}</span>`;
} }
}); });
} else if (cellValue.type === "checkbox") { } else if (cellValue.type === "checkbox") {

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

@ -310,7 +310,6 @@ export const openMenuPanel = (options: {
protyle: options.protyle, protyle: options.protyle,
data, data,
cellElements: options.cellElements, cellElements: options.cellElements,
type: "replace",
replaceValue, replaceValue,
blockElement: options.blockElement blockElement: options.blockElement
}); });
@ -1103,8 +1102,7 @@ export const openMenuPanel = (options: {
protyle: options.protyle, protyle: options.protyle,
data, data,
cellElements: options.cellElements, cellElements: options.cellElements,
type: "addUpdate", addValue: [value],
addUpdateValue: [value],
blockElement: options.blockElement blockElement: options.blockElement
}); });
window.siyuan.menus.menu.remove(); window.siyuan.menus.menu.remove();