1
0

feat: move from easymde to tiptap editor (#2222)

Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/2222
This commit is contained in:
konrad
2023-10-22 13:48:57 +00:00
28 changed files with 2834 additions and 1380 deletions

View File

@ -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">

View File

@ -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>