feat(asset): enhance asset handling by adding storageKey and updating upload functions

This commit is contained in:
mlogclub
2026-04-17 12:54:26 +08:00
parent 2631689958
commit 0dfa783eec
7 changed files with 81 additions and 24 deletions
+37 -6
View File
@@ -22,10 +22,39 @@ import { fetchQuickReplyListAll, type AdminQuickReply } from "@/lib/api/admin"
import { generateUUID } from "@/lib/utils"
type UploadedImage = {
assetId: string
provider: string
storageKey: string
url: string
filename?: string
}
const MessageImage = Image.extend({
addAttributes() {
return {
...this.parent?.(),
dataAssetId: {
default: null,
parseHTML: (element) => element.getAttribute("data-asset-id"),
renderHTML: (attributes) =>
attributes.dataAssetId ? { "data-asset-id": attributes.dataAssetId } : {},
},
dataProvider: {
default: null,
parseHTML: (element) => element.getAttribute("data-provider"),
renderHTML: (attributes) =>
attributes.dataProvider ? { "data-provider": attributes.dataProvider } : {},
},
dataStorageKey: {
default: null,
parseHTML: (element) => element.getAttribute("data-storage-key"),
renderHTML: (attributes) =>
attributes.dataStorageKey ? { "data-storage-key": attributes.dataStorageKey } : {},
},
}
},
})
type ImMessageEditorProps = {
disabled?: boolean
uploadingAsset?: boolean
@@ -98,7 +127,7 @@ export function ImMessageEditor({
orderedList: false,
horizontalRule: false,
}),
Image,
MessageImage,
Placeholder.configure({
placeholder: "输入消息,Enter 发送,Shift + Enter 换行",
}),
@@ -200,7 +229,7 @@ export function ImMessageEditor({
removeImageByTitle(editor, placeholderId)
return
}
replaceImageSourceByTitle(editor, placeholderId, uploaded.url, uploaded.filename || "image")
replaceImageSourceByTitle(editor, placeholderId, uploaded)
} finally {
URL.revokeObjectURL(objectUrl)
requestAnimationFrame(() => {
@@ -387,8 +416,7 @@ function removeImageByTitle(editor: NonNullable<ReturnType<typeof useEditor>>, t
function replaceImageSourceByTitle(
editor: NonNullable<ReturnType<typeof useEditor>>,
title: string,
src: string,
alt: string
uploaded: UploadedImage
) {
const { state, view } = editor
let targetPos: number | null = null
@@ -404,8 +432,11 @@ function replaceImageSourceByTitle(
}
const transaction = view.state.tr.setNodeMarkup(targetPos, undefined, {
...view.state.doc.nodeAt(targetPos)?.attrs,
src,
alt,
src: uploaded.url,
alt: uploaded.filename || "image",
dataAssetId: uploaded.assetId,
dataProvider: uploaded.provider,
dataStorageKey: uploaded.storageKey,
title: "",
})
view.dispatch(transaction)