fix(editor): show editor if there is no content initially
This commit is contained in:
parent
3cb1e7dede
commit
af13d68c48
@ -118,7 +118,6 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import {computed, nextTick, onBeforeUnmount, onMounted, ref, watch} from 'vue'
|
||||
import {refDebounced} from '@vueuse/core'
|
||||
|
||||
import EditorToolbar from './EditorToolbar.vue'
|
||||
|
||||
@ -173,6 +172,7 @@ import {Placeholder} from '@tiptap/extension-placeholder'
|
||||
import {eventToHotkeyString} from '@github/hotkey'
|
||||
import {mergeAttributes} from '@tiptap/core'
|
||||
import {createRandomID} from '@/helpers/randomId'
|
||||
import {isEditorContentEmpty} from '@/helpers/editorContentEmpty'
|
||||
|
||||
const tiptapInstanceRef = ref<HTMLInputElement | null>(null)
|
||||
|
||||
@ -272,7 +272,6 @@ const {
|
||||
showSave = false,
|
||||
placeholder = '',
|
||||
editShortcut = '',
|
||||
// initialMode = 'edit',
|
||||
} = defineProps<{
|
||||
modelValue: string,
|
||||
uploadCallback?: UploadCallback,
|
||||
@ -281,29 +280,12 @@ const {
|
||||
showSave?: boolean,
|
||||
placeholder?: string,
|
||||
editShortcut?: string,
|
||||
// initialMode?: Mode,
|
||||
}>()
|
||||
|
||||
const emit = defineEmits(['update:modelValue', 'save'])
|
||||
|
||||
const inputHTML = ref('')
|
||||
const internalMode = ref<Mode>('edit')
|
||||
const isEditing = computed(() => {
|
||||
console.log('isEditing', {
|
||||
// initialMode,
|
||||
internal: internalMode.value,
|
||||
result: internalMode.value === 'edit' && isEditEnabled,
|
||||
})
|
||||
return internalMode.value === 'edit' && isEditEnabled
|
||||
})
|
||||
|
||||
// watch(
|
||||
// () => initialMode,
|
||||
// () => {
|
||||
// console.log('watch', initialMode)
|
||||
// internalMode.value === initialMode
|
||||
// },
|
||||
// )
|
||||
const isEditing = computed(() => internalMode.value === 'edit' && isEditEnabled)
|
||||
|
||||
const editor = useEditor({
|
||||
content: modelValue,
|
||||
@ -391,15 +373,17 @@ const editor = useEditor({
|
||||
BubbleMenu,
|
||||
],
|
||||
onUpdate: () => {
|
||||
// inputHTML.value = editor.value!.getHTML()
|
||||
console.log('onUpdate')
|
||||
bubbleNow()
|
||||
},
|
||||
})
|
||||
|
||||
// Grundidee: Den Edit Mode intern entscheiden ohne Möglichkeit von außen
|
||||
// Problem: Der editor setzt den content irgendwie aus Gründen immer wieder auf leer, so dass der edit mode dann wieder enabled wird obwohl content da ist
|
||||
// --> Heißt eigentlich, dass der Content im Editor und der content in der Komponente nicht der gleiche ist, das ist schonmal ein grundsätzliches Problem
|
||||
watch(
|
||||
() => isEditing.value,
|
||||
() => {
|
||||
editor.value?.setEditable(isEditing.value)
|
||||
},
|
||||
{immediate: true},
|
||||
)
|
||||
|
||||
watch(
|
||||
() => modelValue,
|
||||
@ -410,19 +394,16 @@ watch(
|
||||
return
|
||||
}
|
||||
|
||||
console.log('content', value)
|
||||
|
||||
editor.value.commands.setContent(value, false)
|
||||
// inputHTML.value = value
|
||||
},
|
||||
{immediate: true}
|
||||
{immediate: true},
|
||||
)
|
||||
|
||||
// const debouncedInputHTML = refDebounced(inputHTML, 1000)
|
||||
// watch(debouncedInputHTML, () => bubbleNow())
|
||||
|
||||
function bubbleNow() {
|
||||
console.log('bubbleNow')
|
||||
if (editor.value?.getHTML() === modelValue) {
|
||||
return
|
||||
}
|
||||
|
||||
emit('update:modelValue', editor.value?.getHTML())
|
||||
}
|
||||
|
||||
@ -436,23 +417,11 @@ function bubbleSave() {
|
||||
|
||||
function setEdit(focus: boolean = true) {
|
||||
internalMode.value = 'edit'
|
||||
editor.value?.setEditable(isEditing.value)
|
||||
if (focus) {
|
||||
editor.value?.commands.focus()
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => isEditing.value,
|
||||
() => {
|
||||
nextTick(() => {
|
||||
// console.log('wathcer is edit', isEditing.value)
|
||||
setEdit(false)
|
||||
})
|
||||
},
|
||||
{immediate: true},
|
||||
)
|
||||
|
||||
onBeforeUnmount(() => editor.value?.destroy())
|
||||
|
||||
const uploadInputRef = ref<HTMLInputElement | null>(null)
|
||||
@ -522,15 +491,18 @@ function setLink() {
|
||||
.run()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// internalMode.value = initialMode
|
||||
nextTick(() => {
|
||||
const input = tiptapInstanceRef.value?.querySelectorAll('.tiptap__editor')[0]?.children[0]
|
||||
input?.addEventListener('paste', handleImagePaste)
|
||||
})
|
||||
onMounted(async () => {
|
||||
if (editShortcut !== '') {
|
||||
document.addEventListener('keydown', setFocusToEditor)
|
||||
}
|
||||
|
||||
await nextTick()
|
||||
|
||||
const input = tiptapInstanceRef.value?.querySelectorAll('.tiptap__editor')[0]?.children[0]
|
||||
input?.addEventListener('paste', handleImagePaste)
|
||||
|
||||
internalMode.value = isEditorContentEmpty(modelValue) ? 'edit' : 'preview'
|
||||
editor.value?.commands.setContent(modelValue, false)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
@ -568,9 +540,9 @@ function setFocusToEditor(event) {
|
||||
}
|
||||
event.preventDefault()
|
||||
|
||||
// if (initialMode === 'preview' && isEditEnabled && !isEditing.value) {
|
||||
// internalMode.value = 'edit'
|
||||
// }
|
||||
if (!isEditing.value && isEditEnabled) {
|
||||
internalMode.value = 'edit'
|
||||
}
|
||||
|
||||
editor.value?.commands.focus()
|
||||
}
|
||||
|
@ -31,14 +31,13 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref, computed, watch, nextTick} from 'vue'
|
||||
import {ref, computed, watch} from 'vue'
|
||||
|
||||
import CustomTransition from '@/components/misc/CustomTransition.vue'
|
||||
import Editor from '@/components/input/AsyncEditor'
|
||||
|
||||
import type {ITask} from '@/modelTypes/ITask'
|
||||
import {useTaskStore} from '@/stores/tasks'
|
||||
import {isEditorContentEmpty} from '@/helpers/editorContentEmpty'
|
||||
|
||||
type AttachmentUploadFunction = (file: File, onSuccess: (attachmentUrl: string) => void) => Promise<string>
|
||||
|
||||
@ -63,15 +62,10 @@ const saving = ref(false)
|
||||
const taskStore = useTaskStore()
|
||||
const loading = computed(() => taskStore.isLoading)
|
||||
|
||||
const editorMode = ref('preview')
|
||||
|
||||
watch(
|
||||
() => modelValue.description,
|
||||
value => {
|
||||
description.value = value
|
||||
nextTick(() => {
|
||||
editorMode.value = isEditorContentEmpty(value) ? 'edit' : 'preview'
|
||||
})
|
||||
},
|
||||
{immediate: true},
|
||||
)
|
||||
|
@ -6,7 +6,8 @@
|
||||
'is-modal': isModal,
|
||||
}"
|
||||
>
|
||||
<div class="task-view">
|
||||
<!-- Removing everything until the task is loaded to prevent empty initialization of other components -->
|
||||
<div class="task-view" v-if="visible">
|
||||
<Heading
|
||||
:task="task"
|
||||
@update:task="Object.assign(task, $event)"
|
||||
@ -605,7 +606,8 @@ watch(
|
||||
}
|
||||
|
||||
try {
|
||||
Object.assign(task.value, await taskService.get({id}))
|
||||
const loaded = await taskService.get({id})
|
||||
Object.assign(task.value, loaded)
|
||||
attachmentStore.set(task.value.attachments)
|
||||
taskColor.value = task.value.hexColor
|
||||
setActiveFields()
|
||||
|
Reference in New Issue
Block a user