ami/tl-vikunja
1
0
Fork 0
Code

fix(editor): always show placeholder when empty

Browse Source
This commit is contained in:
kolaente 2023-10-21 19:18:28 +02:00
parent 0ef775e9b9
commit cb1d2b3834
No known key found for this signature in database
GPG Key ID: F40E70337AB24C9B
1 changed files with 19 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -59,10 +59,13 @@
<icon :icon="['fa', 'fa-link']"/> <icon :icon="['fa', 'fa-link']"/>
</BaseButton> </BaseButton>
</BubbleMenu> </BubbleMenu>
<editor-content <editor-content
class="tiptap__editor" class="tiptap__editor"
:class="{'tiptap__editor-is-empty': isEmpty}"
:editor="editor" :editor="editor"
/> />
<input <input
type="file" type="file"
id="tiptap__image-upload" id="tiptap__image-upload"
@ -102,7 +105,7 @@ const tiptapRegex = new RegExp(`${TIPTAP_TEXT_VALUE_PREFIX}`, 's')
</script> </script>
<script setup lang="ts"> <script setup lang="ts">
import {ref, watch, onBeforeUnmount, nextTick, onMounted} from 'vue' import {ref, watch, onBeforeUnmount, nextTick, onMounted, computed} from 'vue'
import {marked} from 'marked' import {marked} from 'marked'
import {refDebounced} from '@vueuse/core' import {refDebounced} from '@vueuse/core'
@ -202,6 +205,8 @@ watch(
{immediate: true}, {immediate: true},
) )
const isEmpty = computed(() => inputHTML.value === '')
function onImageAdded() { function onImageAdded() {
bubbleSave() bubbleSave()
loadImages() loadImages()
@ -409,17 +414,24 @@ function handleImagePaste(event) {
&:focus-within, &:focus { &:focus-within, &:focus {
box-shadow: 0 0 0 2px hsla(var(--primary-hsl), 0.5); box-shadow: 0 0 0 2px hsla(var(--primary-hsl), 0.5);
}
&:focus-within, &:focus, &.tiptap__editor-is-empty {
.tiptap p.is-empty::before { .tiptap p.is-empty::before {
content: attr(data-placeholder); display: block;
color: var(--grey-400);
pointer-events: none;
height: 0;
float: left;
} }
} }
} }
.tiptap p.is-empty::before {
display: none;
content: attr(data-placeholder);
color: var(--grey-400);
pointer-events: none;
height: 0;
float: left;
}
// Basic editor styles // Basic editor styles
.ProseMirror { .ProseMirror {
padding: .5rem; padding: .5rem;