feat: move from easymde to tiptap editor (#2222)
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/2222
This commit is contained in:
@ -66,7 +66,6 @@
|
||||
</CustomTransition>
|
||||
</div>
|
||||
<editor
|
||||
:hasPreview="true"
|
||||
:is-edit-enabled="canWrite && c.author.id === currentUserId"
|
||||
:upload-callback="attachmentUpload"
|
||||
:upload-enabled="true"
|
||||
@ -83,6 +82,7 @@
|
||||
}"
|
||||
:bottom-actions="actions[c.id]"
|
||||
:show-save="true"
|
||||
initial-mode="preview"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -114,12 +114,12 @@
|
||||
taskCommentService.loading &&
|
||||
!isCommentEdit,
|
||||
}"
|
||||
:hasPreview="false"
|
||||
:upload-callback="attachmentUpload"
|
||||
:upload-enabled="true"
|
||||
:placeholder="$t('task.comment.placeholder')"
|
||||
v-if="editorActive"
|
||||
v-model="newComment.comment"
|
||||
@save="addComment()"
|
||||
/>
|
||||
</div>
|
||||
<div class="field">
|
||||
|
@ -18,21 +18,20 @@
|
||||
</h3>
|
||||
<editor
|
||||
:is-edit-enabled="canWrite"
|
||||
:upload-callback="attachmentUpload"
|
||||
:upload-enabled="true"
|
||||
:upload-callback="uploadCallback"
|
||||
:placeholder="$t('task.description.placeholder')"
|
||||
:empty-text="$t('task.description.empty')"
|
||||
:show-save="true"
|
||||
edit-shortcut="e"
|
||||
v-model="task.description"
|
||||
@update:model-value="saveWithDelay"
|
||||
@save="save"
|
||||
:initial-mode="task.description === '' ? 'edit' : 'preview'"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref, computed, watch, type PropType} from 'vue'
|
||||
import {ref, computed, watch} from 'vue'
|
||||
|
||||
import CustomTransition from '@/components/misc/CustomTransition.vue'
|
||||
import Editor from '@/components/input/AsyncEditor'
|
||||
@ -41,19 +40,17 @@ import type {ITask} from '@/modelTypes/ITask'
|
||||
import {useTaskStore} from '@/stores/tasks'
|
||||
import TaskModel from '@/models/task'
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Object as PropType<ITask>,
|
||||
required: true,
|
||||
},
|
||||
attachmentUpload: {
|
||||
required: true,
|
||||
},
|
||||
canWrite: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
type AttachmentUploadFunction = (file: File, onSuccess: (attachmentUrl: string) => void) => Promise<string>
|
||||
|
||||
const {
|
||||
modelValue,
|
||||
attachmentUpload,
|
||||
canWrite,
|
||||
} = defineProps<{
|
||||
modelValue: ITask,
|
||||
attachmentUpload: AttachmentUploadFunction,
|
||||
canWrite: boolean,
|
||||
}>()
|
||||
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
@ -67,7 +64,7 @@ const taskStore = useTaskStore()
|
||||
const loading = computed(() => taskStore.isLoading)
|
||||
|
||||
watch(
|
||||
props.modelValue,
|
||||
() => modelValue,
|
||||
(value) => {
|
||||
task.value = value
|
||||
},
|
||||
@ -106,5 +103,20 @@ async function save() {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function uploadCallback(files: File[] | FileList): (Promise<string[]>) {
|
||||
|
||||
const uploadPromises: Promise<string>[] = []
|
||||
|
||||
files.forEach((file: File) => {
|
||||
const promise = new Promise<string>((resolve) => {
|
||||
attachmentUpload(file, (uploadedFileUrl: string) => resolve(uploadedFileUrl))
|
||||
})
|
||||
|
||||
uploadPromises.push(promise)
|
||||
})
|
||||
|
||||
return await Promise.all(uploadPromises)
|
||||
}
|
||||
</script>
|
||||
|
||||
|
Reference in New Issue
Block a user