kodev-org
/
vikunja
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(editor): upload image via toolbar button 

Resolves https://community.vikunja.io/t/unable-to-add-task-attachments/3329
This commit is contained in:
kolaente 2025-03-09 12:52:16 +01:00
parent ce57d85f04
commit 96ec7b17bc
No known key found for this signature in database
GPG Key ID: F40E70337AB24C9B
1 changed files with 17 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/components/input/editor/TipTap.vue
View File

@ -301,6 +301,10 @@ const internalMode = ref<Mode>('preview')
const isEditing = computed(() => internalMode.value === 'edit' && props.isEditEnabled)
const contentHasChanged = ref<boolean>(false)
// TipTap crashes when inserting an image into an empty editor.
// To work around this, we're inserting an element first, then insert the image, then remove the element.
const UPLOAD_PLACEHOLDER_ELEMENT = '<p>UPLOAD_PLACEHOLDER</p>'
let lastSavedState = ''
watch(
@ -542,18 +546,30 @@ onBeforeUnmount(() => editor.value?.destroy())
const uploadInputRef = ref<HTMLInputElement | null>(null)
function uploadAndInsertFiles(files: File[] | FileList) {
if (typeof props.uploadCallback !== 'undefined') {
if (typeof props.uploadCallback === 'undefined') {
throw new Error('Can\'t add files here')
}
props.uploadCallback(files).then(urls => {
urls?.forEach(url => {
if (editor.value?.isEmpty) {
editor.value
?.chain()
.focus()
.insertContent(UPLOAD_PLACEHOLDER_ELEMENT)
.run()
}
editor.value
?.chain()
.focus()
.setImage({src: url})
.run()
})
const html = editor.value?.getHTML().replace(UPLOAD_PLACEHOLDER_ELEMENT, '') ?? ''
editor.value?.commands.setContent(html, false)
bubbleSave()
})
}