fix(editor): image paste handling

This commit is contained in:
kolaente 2023-11-21 13:23:05 +01:00
parent c3e53970de
commit f45303c2e3
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
2 changed files with 25 additions and 12 deletions

View File

@ -493,14 +493,20 @@ function setLink() {
onMounted(() => { onMounted(() => {
internalMode.value = initialMode internalMode.value = initialMode
document.addEventListener('paste', handleImagePaste) nextTick(() => {
const input = tiptapInstanceRef.value.querySelectorAll('.tiptap__editor')[0].children[0]
input.addEventListener('paste', handleImagePaste)
})
if (editShortcut !== '') { if (editShortcut !== '') {
document.addEventListener('keydown', setFocusToEditor) document.addEventListener('keydown', setFocusToEditor)
} }
}) })
onBeforeUnmount(() => { onBeforeUnmount(() => {
document.removeEventListener('paste', handleImagePaste) nextTick(() => {
const input = tiptapInstanceRef.value.querySelectorAll('.tiptap__editor')[0].children[0]
input.removeEventListener('paste', handleImagePaste)
})
if (editShortcut !== '') { if (editShortcut !== '') {
document.removeEventListener('keydown', setFocusToEditor) document.removeEventListener('keydown', setFocusToEditor)
} }
@ -510,11 +516,12 @@ function handleImagePaste(event) {
if (event?.clipboardData?.items?.length === 0) { if (event?.clipboardData?.items?.length === 0) {
return return
} }
event.preventDefault() event.preventDefault()
const image = event.clipboardData.items[0] const image = event.clipboardData.items[0]
if (image.kind === 'file' && image.type.startsWith('image/')) { if (image.kind === 'file' && image.type.startsWith('image/')) {
console.log('img', image.getAsFile())
uploadAndInsertFiles([image.getAsFile()]) uploadAndInsertFiles([image.getAsFile()])
} }
} }

View File

@ -218,13 +218,19 @@ const actions = computed(() => {
]))) ])))
}) })
function attachmentUpload( async function attachmentUpload(files: File[] | FileList): (Promise<string[]>) {
file: File,
onSuccess: (url: string) => void, const uploadPromises: Promise<string>[] = []
// eslint-disable-next-line @typescript-eslint/no-unused-vars
onError: (error: string) => void, files.forEach((file: File) => {
) { const promise = new Promise<string>((resolve) => {
return uploadFile(props.taskId, file, onSuccess) uploadFile(props.taskId, file, (uploadedFileUrl: string) => resolve(uploadedFileUrl))
})
uploadPromises.push(promise)
})
return await Promise.all(uploadPromises)
} }
const taskCommentService = shallowReactive(new TaskCommentService()) const taskCommentService = shallowReactive(new TaskCommentService())
@ -299,7 +305,7 @@ async function editComment() {
if (commentEdit.comment === '') { if (commentEdit.comment === '') {
return return
} }
if (changeTimeout.value !== null) { if (changeTimeout.value !== null) {
clearTimeout(changeTimeout.value) clearTimeout(changeTimeout.value)
} }
@ -368,7 +374,7 @@ async function deleteComment(commentToDelete: ITaskComment) {
} }
.image.is-avatar { .image.is-avatar {
border-radius: 100%; border-radius: 100%;
} }
.media-content { .media-content {