fix(editor): use edit enable
This commit is contained in:
parent
80dc35eabb
commit
34420b623c
@ -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;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user