mirror of
https://github.com/oxynote/oxynote.git
synced 2026-10-18 11:29:20 +02:00
37 lines
931 B
Vue
37 lines
931 B
Vue
<script setup lang="ts">
|
|
import { EditorContent, useEditor } from "@tiptap/vue-3"
|
|
import { CommentClass, CommentExtensions } from "./utils"
|
|
import { cn } from "~/lib/utils"
|
|
|
|
const props = defineProps<{
|
|
content: Record<string, any>
|
|
}>()
|
|
|
|
const editor = useEditor({
|
|
editorProps: {
|
|
attributes: {
|
|
class: cn(CommentClass),
|
|
spellcheck: "false",
|
|
},
|
|
},
|
|
content: props.content,
|
|
extensions: CommentExtensions,
|
|
editable: false,
|
|
})
|
|
|
|
// Update editor content when prop changes (needed for virtual scroller item recycling)
|
|
watchDeep(
|
|
() => props.content,
|
|
(newContent) => {
|
|
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- content originates from an untyped api payload and may be nullish at runtime despite the prop type
|
|
if (editor.value && newContent) {
|
|
editor.value.commands.setContent(newContent)
|
|
}
|
|
},
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<EditorContent v-if="editor" :editor="editor" />
|
|
</template>
|