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

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

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