diff --git a/app/src/protyle/render/av/asset.ts b/app/src/protyle/render/av/asset.ts index 7be73da84..c4ad8ebf6 100644 --- a/app/src/protyle/render/av/asset.ts +++ b/app/src/protyle/render/av/asset.ts @@ -18,7 +18,6 @@ import {genCellValueByElement, getTypeByCellElement} from "./cell"; export const bindAssetEvent = (options: { protyle: IProtyle, - data: IAV, menuElement: HTMLElement, cellElements: HTMLElement[], blockElement: Element @@ -41,7 +40,6 @@ export const bindAssetEvent = (options: { }); updateAssetCell({ protyle: options.protyle, - data: options.data, cellElements: options.cellElements, addValue: value, blockElement: options.blockElement @@ -91,7 +89,6 @@ ${contentHTML} export const updateAssetCell = (options: { protyle: IProtyle, - data: IAV, cellElements: HTMLElement[], replaceValue?: IAVCellAssetValue[], addValue?: IAVCellAssetValue[], @@ -107,7 +104,10 @@ export const updateAssetCell = (options: { if (!options.blockElement.contains(item)) { const rowElement = hasClosestByClassName(item, "av__row"); if (rowElement) { - item = options.cellElements[elementIndex] = options.blockElement.querySelector(`.av__row[data-id="${rowElement.dataset.id}"] .av__cell[data-col-id="${item.dataset.colId}"]`) as HTMLElement; + item = options.cellElements[elementIndex] = + (options.blockElement.querySelector(`.av__row[data-id="${rowElement.dataset.id}"] .av__cell[data-col-id="${item.dataset.colId}"]`) || + // block attr + options.blockElement.querySelector(`.fn__flex-1[data-col-id="${item.dataset.colId}"]`)) as HTMLElement; } } const cellValue = genCellValueByElement(getTypeByCellElement(item) || item.dataset.type as TAVCol, item); @@ -134,12 +134,13 @@ export const updateAssetCell = (options: { } else { cellValue.mAsset = mAssetValue; } + const avID = options.blockElement.getAttribute("data-av-id") cellDoOperations.push({ action: "updateAttrViewCell", id: cellValue.id, keyID: colId, rowID, - avID: options.data.id, + avID, data: cellValue }); cellUndoOperations.push({ @@ -147,20 +148,9 @@ export const updateAssetCell = (options: { id: cellValue.id, keyID: colId, rowID, - avID: options.data.id, + avID, data: oldValue }); - options.data.view.rows.find(row => { - if (row.id === rowID) { - row.cells.find(cell => { - if (cell.id === cellValue.id) { - cell.value = cellValue; - return true; - } - }); - return true; - } - }); if (item.classList.contains("custom-attr__avvalue")) { item.innerHTML = genAVValueHTML(cellValue); } else { @@ -173,7 +163,6 @@ export const updateAssetCell = (options: { menuElement.innerHTML = getAssetHTML(options.cellElements); bindAssetEvent({ protyle: options.protyle, - data: options.data, menuElement, cellElements: options.cellElements, blockElement: options.blockElement @@ -185,7 +174,7 @@ export const updateAssetCell = (options: { } }; -export const editAssetItem = (protyle: IProtyle, data: IAV, cellElements: HTMLElement[], target: HTMLElement, blockElement: Element) => { +export const editAssetItem = (protyle: IProtyle, cellElements: HTMLElement[], target: HTMLElement, blockElement: Element) => { const linkAddress = target.dataset.content; const type = target.dataset.type as "image" | "file"; const menu = new Menu("av-asset-edit", () => { @@ -195,7 +184,6 @@ export const editAssetItem = (protyle: IProtyle, data: IAV, cellElements: HTMLEl } updateAssetCell({ protyle, - data, cellElements, blockElement, updateValue: { @@ -236,14 +224,13 @@ ${window.siyuan.languages.title} click() { updateAssetCell({ protyle, - data, cellElements, blockElement, removeIndex: parseInt(target.dataset.index) }); } }); - openMenu(protyle ? protyle.app : window.siyuan.ws.app, linkAddress, false, true); + openMenu(protyle ? protyle.app : window.siyuan.ws.app, linkAddress, false, false); if (linkAddress?.startsWith("assets/")) { window.siyuan.menus.menu.append(new MenuItem(exportAsset(linkAddress)).element); } @@ -263,7 +250,7 @@ ${window.siyuan.languages.title} } }; -export const addAssetLink = (protyle: IProtyle, data: IAV, cellElements: HTMLElement[], target: HTMLElement, blockElement: Element) => { +export const addAssetLink = (protyle: IProtyle, cellElements: HTMLElement[], target: HTMLElement, blockElement: Element) => { const menu = new Menu("av-asset-link", () => { const textElements = menu.element.querySelectorAll("textarea"); if (!textElements[0].value) { @@ -271,7 +258,6 @@ export const addAssetLink = (protyle: IProtyle, data: IAV, cellElements: HTMLEle } updateAssetCell({ protyle, - data, cellElements, blockElement, addValue: [{ @@ -303,7 +289,7 @@ ${window.siyuan.languages.title} menu.element.querySelector("textarea").focus(); }; -export const dragUpload = (files: string[], protyle: IProtyle, cellElement: HTMLElement, avID: string) => { +export const dragUpload = (files: string[], protyle: IProtyle, cellElement: HTMLElement) => { const msgId = showMessage(window.siyuan.languages.uploading, 0); fetchPost("/api/asset/insertLocalAssets", { assetPaths: files, @@ -331,18 +317,11 @@ export const dragUpload = (files: string[], protyle: IProtyle, cellElement: HTML }); } }); - fetchPost("/api/av/renderAttributeView", { - id: avID, - pageSize: parseInt(blockElement.getAttribute("data-page-size")) || undefined, - viewID: blockElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW) - }, (response) => { - updateAssetCell({ - protyle, - blockElement, - data: response.data as IAV, - cellElements: [cellElement], - addValue - }); + updateAssetCell({ + protyle, + blockElement, + cellElements: [cellElement], + addValue }); } }); diff --git a/app/src/protyle/render/av/blockAttr.ts b/app/src/protyle/render/av/blockAttr.ts index a1f5497ef..0dec96bd2 100644 --- a/app/src/protyle/render/av/blockAttr.ts +++ b/app/src/protyle/render/av/blockAttr.ts @@ -167,14 +167,13 @@ export const renderAVAttribute = (element: HTMLElement, id: string, protyle: IPr avID: string avName: string }) => { - html += `
-
`; + html += `
${innerHTML}
` + + if (element.innerHTML) { + // 防止 blockElement 找不到 + element.querySelector(`div[data-node-id="${id}"]`).innerHTML = innerHTML; + } }); if (element.innerHTML === "") { let dragBlockElement: HTMLElement; @@ -355,8 +360,8 @@ class="fn__flex-1 fn__flex${["url", "text", "number", "email", "phone", "block"] target = target.parentElement; } }); + element.innerHTML = html; } - element.innerHTML = html; element.querySelectorAll(".b3-text-field--text").forEach((item: HTMLInputElement) => { item.addEventListener("change", () => { let value; diff --git a/app/src/protyle/render/av/openMenuPanel.ts b/app/src/protyle/render/av/openMenuPanel.ts index 5d588e128..ff5ec37b0 100644 --- a/app/src/protyle/render/av/openMenuPanel.ts +++ b/app/src/protyle/render/av/openMenuPanel.ts @@ -137,7 +137,6 @@ export const openMenuPanel = (options: { } else if (options.type === "asset") { bindAssetEvent({ protyle: options.protyle, - data, menuElement, cellElements: options.cellElements, blockElement: options.blockElement @@ -182,6 +181,11 @@ export const openMenuPanel = (options: { return; }); avPanelElement.addEventListener("drop", (event) => { + if (!window.siyuan.dragElement) { + event.preventDefault(); + event.stopPropagation(); + return; + } window.siyuan.dragElement.style.opacity = ""; const sourceElement = window.siyuan.dragElement; window.siyuan.dragElement = undefined; @@ -314,7 +318,6 @@ export const openMenuPanel = (options: { }); updateAssetCell({ protyle: options.protyle, - data, cellElements: options.cellElements, replaceValue, blockElement: options.blockElement @@ -436,6 +439,10 @@ export const openMenuPanel = (options: { }); let dragoverElement: HTMLElement; avPanelElement.addEventListener("dragover", (event: DragEvent) => { + if (event.dataTransfer.types.includes("Files")) { + event.preventDefault(); + return; + } const target = event.target as HTMLElement; let targetElement = hasClosestByAttribute(target, "draggable", "true"); if (!targetElement) { @@ -1133,7 +1140,7 @@ export const openMenuPanel = (options: { event.stopPropagation(); break; } else if (type === "addAssetLink") { - addAssetLink(options.protyle, data, options.cellElements, target, options.blockElement); + addAssetLink(options.protyle, options.cellElements, target, options.blockElement); event.preventDefault(); event.stopPropagation(); break; @@ -1161,7 +1168,6 @@ export const openMenuPanel = (options: { } updateAssetCell({ protyle: options.protyle, - data, cellElements: options.cellElements, addValue: [value], blockElement: options.blockElement @@ -1197,7 +1203,7 @@ export const openMenuPanel = (options: { event.stopPropagation(); break; } else if (type === "editAssetItem") { - editAssetItem(options.protyle, data, options.cellElements, target.parentElement, options.blockElement); + editAssetItem(options.protyle, options.cellElements, target.parentElement, options.blockElement); event.preventDefault(); event.stopPropagation(); break; diff --git a/app/src/protyle/util/editorCommonEvent.ts b/app/src/protyle/util/editorCommonEvent.ts index 9c265d69d..872dc88a9 100644 --- a/app/src/protyle/util/editorCommonEvent.ts +++ b/app/src/protyle/util/editorCommonEvent.ts @@ -1058,7 +1058,7 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => { for (let i = 0; i < event.dataTransfer.files.length; i++) { files.push(event.dataTransfer.files[i].path); } - dragUpload(files, protyle, cellElement, avElement.dataset.avId); + dragUpload(files, protyle, cellElement); } } } diff --git a/app/src/protyle/wysiwyg/index.ts b/app/src/protyle/wysiwyg/index.ts index 960e61b5b..95a3ebd80 100644 --- a/app/src/protyle/wysiwyg/index.ts +++ b/app/src/protyle/wysiwyg/index.ts @@ -92,6 +92,7 @@ import { import {openEmojiPanel, unicode2Emoji} from "../../emoji"; import {openLink} from "../../editor/openLink"; import {mathRender} from "../render/mathRender"; +import {editAssetItem} from "../render/av/asset"; export class WYSIWYG { public lastHTMLs: { [key: string]: string } = {};