ami/tl-vikunja
1
0
Fork 0
Code

fix(editor): correctly resolve images in descriptions

Browse Source 
Resolves https://kolaente.dev/vikunja/frontend/issues/3808
This commit is contained in:
kolaente 2023-11-18 17:16:53 +01:00
parent bd83294ac0
commit d3497c96d7
No known key found for this signature in database
GPG Key ID: F40E70337AB24C9B
1 changed files with 25 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/input/editor/TipTap.vue
View File

@ -117,7 +117,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import {ref, watch, onBeforeUnmount, nextTick, onMounted, computed} from 'vue' import {computed, nextTick, onBeforeUnmount, onMounted, ref, watch} from 'vue'
import {refDebounced} from '@vueuse/core' import {refDebounced} from '@vueuse/core'
import EditorToolbar from './EditorToolbar.vue' import EditorToolbar from './EditorToolbar.vue'
@ -173,7 +173,6 @@ import {Placeholder} from '@tiptap/extension-placeholder'
import {eventToHotkeyString} from '@github/hotkey' import {eventToHotkeyString} from '@github/hotkey'
import {mergeAttributes} from '@tiptap/core' import {mergeAttributes} from '@tiptap/core'
import {createRandomID} from '@/helpers/randomId' import {createRandomID} from '@/helpers/randomId'
import {isEditorContentEmpty} from '@/helpers/editorContentEmpty'
const {t} = useI18n() const {t} = useI18n()
@ -202,9 +201,28 @@ type CacheKey = `${ITask['id']}-${IAttachment['id']}`
const loadedAttachments = ref<{ [key: CacheKey]: string }>({}) const loadedAttachments = ref<{ [key: CacheKey]: string }>({})
const CustomImage = Image.extend({ const CustomImage = Image.extend({
addAttributes() {
return {
src: {
default: null,
},
alt: {
default: null,
},
title: {
default: null,
},
id: {
default: null,
},
'data-src': {
default: null,
},
}
},
renderHTML({HTMLAttributes}) { renderHTML({HTMLAttributes}) {
if (HTMLAttributes.src?.startsWith(window.API_URL)) { if (HTMLAttributes.src?.startsWith(window.API_URL) || HTMLAttributes['data-src']?.startsWith(window.API_URL)) {
const imageUrl = HTMLAttributes['data-src'] ?? HTMLAttributes.src
const id = 'tiptap-image-' + createRandomID() const id = 'tiptap-image-' + createRandomID()
nextTick(async () => { nextTick(async () => {
@ -213,7 +231,7 @@ const CustomImage = Image.extend({
if (!img) return if (!img) return
// The url is something like /tasks/<id>/attachments/<id> // The url is something like /tasks/<id>/attachments/<id>
const parts = img.dataset?.src.slice(window.API_URL.length + 1).split('/') const parts = imageUrl.slice(window.API_URL.length + 1).split('/')
const taskId = Number(parts[1]) const taskId = Number(parts[1])
const attachmentId = Number(parts[3]) const attachmentId = Number(parts[3])
const cacheKey: CacheKey = `${taskId}-${attachmentId}` const cacheKey: CacheKey = `${taskId}-${attachmentId}`
@ -223,15 +241,14 @@ const CustomImage = Image.extend({
const attachment = new AttachmentModel({taskId: taskId, id: attachmentId}) const attachment = new AttachmentModel({taskId: taskId, id: attachmentId})
const attachmentService = new AttachmentService() const attachmentService = new AttachmentService()
const url = await attachmentService.getBlobUrl(attachment) loadedAttachments.value[cacheKey] = await attachmentService.getBlobUrl(attachment)
loadedAttachments.value[cacheKey] = url
} }
img.src = loadedAttachments.value[cacheKey] img.src = loadedAttachments.value[cacheKey]
}) })
return ['img', mergeAttributes(this.options.HTMLAttributes, { return ['img', mergeAttributes(this.options.HTMLAttributes, {
'data-src': HTMLAttributes.src, 'data-src': imageUrl,
src: '#', src: '#',
alt: HTMLAttributes.alt, alt: HTMLAttributes.alt,
title: HTMLAttributes.title, title: HTMLAttributes.title,