potsda.mn/mobilizon
10
4
Fork 1
Code Issues 22 Pull requests 1 Projects Releases Wiki Activity

fix(front): fix focusing text editor

Browse source 
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2024-01-09 16:55:26 +01:00
parent ba66874cc3
commit 3b7124a57b
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773
1 changed files with 13 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/components/TextEditor.vue
View file

@ -219,9 +219,10 @@
<editor-content <editor-content
class="editor__content" class="editor__content"
:class="{ editorErrorStatus }" :class="{ editorErrorStatus, editorIsFocused: focused }"
:editor="editor" :editor="editor"
v-if="editor" v-if="editor"
ref="editorContentRef"
/> />
<p v-if="editorErrorMessage" class="text-sm text-mbz-danger"> <p v-if="editorErrorMessage" class="text-sm text-mbz-danger">
{{ editorErrorMessage }} {{ editorErrorMessage }}
@ -277,6 +278,7 @@ import FormatQuoteClose from "vue-material-design-icons/FormatQuoteClose.vue";
import Undo from "vue-material-design-icons/Undo.vue"; import Undo from "vue-material-design-icons/Undo.vue";
import Redo from "vue-material-design-icons/Redo.vue"; import Redo from "vue-material-design-icons/Redo.vue";
import Placeholder from "@tiptap/extension-placeholder"; import Placeholder from "@tiptap/extension-placeholder";
import { useFocusWithin } from "@vueuse/core";
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
@ -343,7 +345,7 @@ const editor = useEditor({
"aria-label": ariaLabel.value ?? "", "aria-label": ariaLabel.value ?? "",
role: "textbox", role: "textbox",
class: class:
"prose dark:prose-invert prose-sm lg:prose-lg xl:prose-xl bg-white dark:bg-zinc-700 focus:outline-none !max-w-full", "prose dark:prose-invert prose-sm lg:prose-lg xl:prose-xl bg-white dark:bg-zinc-700 !max-w-full",
}, },
transformPastedHTML: transformPastedHTML, transformPastedHTML: transformPastedHTML,
}, },
@ -392,6 +394,9 @@ const editor = useEditor({
}, },
}); });
const editorContentRef = ref(null);
const { focused } = useFocusWithin(editorContentRef);
watch(value, (val: string) => { watch(value, (val: string) => {
if (!editor.value) return; if (!editor.value) return;
if (val !== editor.value.getHTML()) { if (val !== editor.value.getHTML()) {
@ -552,13 +557,8 @@ const checkEditorEmpty = () => {
&__content { &__content {
div.ProseMirror { div.ProseMirror {
min-height: 2.5rem; min-height: 2.5rem;
box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1);
border-radius: 4px; border-radius: 4px;
padding: 12px 6px; padding: 12px 6px;
&:focus {
outline: none;
}
} }
h1 { h1 {
@ -684,8 +684,12 @@ const checkEditorEmpty = () => {
@apply inline-block border border-zinc-600 dark:border-zinc-300 rounded py-0.5 px-1; @apply inline-block border border-zinc-600 dark:border-zinc-300 rounded py-0.5 px-1;
} }
.editor__content { .editor__content > div {
@apply border focus:border-[#2563eb] rounded border-[#6b7280]; @apply border rounded border-[#6b7280];
}
.editorIsFocused > div {
@apply ring-2 ring-[#2563eb] outline-2 outline outline-offset-2 outline-transparent;
} }
.editorErrorStatus { .editorErrorStatus {