ami/tl-vikunja
1
0
Fork 0
Code

fix(editor): don't allow image upload when it's not possible to do it

Browse Source
This commit is contained in:
kolaente 2024-03-13 16:59:57 +01:00
parent 17e222edfd
commit 99c5524115
No known key found for this signature in database
GPG Key ID: F40E70337AB24C9B
2 changed files with 24 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/components/input/editor/EditorToolbar.vue
View File

@ -139,7 +139,7 @@
<BaseButton <BaseButton
v-tooltip="$t('input.editor.image')" v-tooltip="$t('input.editor.image')"
class="editor-toolbar__button" class="editor-toolbar__button"
@click="openImagePicker" @click="e => emit('imageUploadClicked', e)"
> >
<span class="icon"> <span class="icon">
<icon icon="fa-image" /> <icon icon="fa-image" />
@ -347,16 +347,14 @@ const {
editor: Editor, editor: Editor,
}>() }>()
const emit = defineEmits(['imageUploadClicked'])
const tableMode = ref(false) const tableMode = ref(false)
function toggleTableMode() { function toggleTableMode() {
tableMode.value = !tableMode.value tableMode.value = !tableMode.value
} }
function openImagePicker() {
document.getElementById('tiptap__image-upload').click()
}
function setLink(event) { function setLink(event) {
setLinkInEditor(event.target.getBoundingClientRect(), editor) setLinkInEditor(event.target.getBoundingClientRect(), editor)
} }

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

@ -6,7 +6,7 @@
<EditorToolbar <EditorToolbar
v-if="editor && isEditing" v-if="editor && isEditing"
:editor="editor" :editor="editor"
:upload-callback="uploadCallback" @imageUploadClicked="triggerImageInput"
/> />
<BubbleMenu <BubbleMenu
v-if="editor && isEditing" v-if="editor && isEditing"
@ -489,6 +489,15 @@ function uploadAndInsertFiles(files: File[] | FileList) {
}) })
} }
function triggerImageInput(event) {
if (typeof uploadCallback !== 'undefined') {
uploadInputRef.value?.click()
return
}
addImage(event)
}
async function addImage(event) { async function addImage(event) {
if (typeof uploadCallback !== 'undefined') { if (typeof uploadCallback !== 'undefined') {
@ -522,16 +531,20 @@ onMounted(async () => {
await nextTick() await nextTick()
const input = tiptapInstanceRef.value?.querySelectorAll('.tiptap__editor')[0]?.children[0] if (typeof uploadCallback !== 'undefined') {
input?.addEventListener('paste', handleImagePaste) const input = tiptapInstanceRef.value?.querySelectorAll('.tiptap__editor')[0]?.children[0]
input?.addEventListener('paste', handleImagePaste)
}
setModeAndValue(modelValue) setModeAndValue(modelValue)
}) })
onBeforeUnmount(() => { onBeforeUnmount(() => {
nextTick(() => { nextTick(() => {
const input = tiptapInstanceRef.value?.querySelectorAll('.tiptap__editor')[0]?.children[0] if (typeof uploadCallback !== 'undefined') {
input?.removeEventListener('paste', handleImagePaste) 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)
@ -558,10 +571,10 @@ function handleImagePaste(event) {
// See https://github.com/github/hotkey/discussions/85#discussioncomment-5214660 // See https://github.com/github/hotkey/discussions/85#discussioncomment-5214660
function setFocusToEditor(event) { function setFocusToEditor(event) {
if(event.target.shadowRoot) { if (event.target.shadowRoot) {
return return
} }
const hotkeyString = eventToHotkeyString(event) const hotkeyString = eventToHotkeyString(event)
if (!hotkeyString) return if (!hotkeyString) return
if (hotkeyString !== editShortcut || if (hotkeyString !== editShortcut ||
@ -600,7 +613,7 @@ watch(
() => isEditing.value, () => isEditing.value,
async editing => { async editing => {
await nextTick() await nextTick()
let checkboxes = tiptapInstanceRef.value?.querySelectorAll('[data-checked]') let checkboxes = tiptapInstanceRef.value?.querySelectorAll('[data-checked]')
if (typeof checkboxes === 'undefined' || checkboxes.length === 0) { if (typeof checkboxes === 'undefined' || checkboxes.length === 0) {
// For some reason, this works when we check a second time. // For some reason, this works when we check a second time.