vikunja/frontend
Archived
6
39
Fork 49
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

fix(editor): use edit enable

Browse Source
This commit is contained in:
kolaente 2023-10-21 19:29:19 +02:00
parent 80dc35eabb
commit 34420b623c
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
1 changed files with 17 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,12 +1,12 @@
<template> <template>
<div class="tiptap"> <div class="tiptap">
<EditorToolbar <EditorToolbar
v-if="editor" v-if="editor && isEditEnabled"
:editor="editor" :editor="editor"
:upload-callback="uploadCallback" :upload-callback="uploadCallback"
/> />
<BubbleMenu <BubbleMenu
v-if="editor" v-if="editor && isEditEnabled"
:editor="editor" :editor="editor"
class="editor-bubble__wrapper" class="editor-bubble__wrapper"
> >
@ -59,14 +59,15 @@
<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}" :class="{'tiptap__editor-is-empty': isEmpty, 'tiptap__editor-is-edit-enabled': isEditEnabled}"
:editor="editor" :editor="editor"
/> />
<input <input
v-if="isEditEnabled"
type="file" type="file"
id="tiptap__image-upload" id="tiptap__image-upload"
class="is-hidden" class="is-hidden"
@ -74,7 +75,7 @@
@change="addImage" @change="addImage"
/> />
<ul class="actions d-print-none" v-if="bottomActions.length > 0"> <ul class="tiptap__editor-actions d-print-none" v-if="bottomActions.length > 0">
<li v-if="isEditEnabled && showSave"> <li v-if="isEditEnabled && showSave">
<BaseButton <BaseButton
@click="bubbleSave" @click="bubbleSave"
@ -260,10 +261,17 @@ function bubbleSave() {
const editor = useEditor({ const editor = useEditor({
content: inputHTML.value, content: inputHTML.value,
editable: isEditEnabled,
extensions: [ extensions: [
StarterKit, StarterKit,
Placeholder.configure({ Placeholder.configure({
placeholder: t('input.editor.placeholder'), placeholder: () => {
if (!isEditEnabled) {
return ''
}
return t('input.editor.placeholder')
},
}), }),
Typography, Typography,
Underline, Underline,
@ -411,11 +419,11 @@ function handleImagePaste(event) {
min-height: 10rem; min-height: 10rem;
transition: box-shadow $transition; transition: box-shadow $transition;
border-radius: $radius; border-radius: $radius;
&: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 { &:focus-within, &:focus, &.tiptap__editor-is-empty {
.tiptap p.is-empty::before { .tiptap p.is-empty::before {
display: block; display: block;