different instances of a keyed plugin

[idesignzone]

Trying to use the Image Upload
I get error "Adding different instances of a keyed plugin (plugin$)"

This part seems to cause the problem

TiptapImageUpload.configure({
  acceptMimes: ['image/jpeg', 'image/gif', 'image/png', 'image/jpg'],
  upload: uploadImage,
}),

"nuxt-tiptap-editor": "^2.3.1",
"nuxt": "^4.1.1",

[Dima282717799]

Got same issue

`<script setup lang="ts">
import { MAX_LENGTH_CHAT_TEXT } from '@/utils/constants'
import { Placeholder } from '@tiptap/extension-placeholder'
import { TextAlign } from '@tiptap/extension-text-align'
import { Underline } from '@tiptap/extension-underline'
import { StarterKit } from '@tiptap/starter-kit'
import { EditorContent, useEditor } from '@tiptap/vue-3'
import { onBeforeUnmount, watch } from 'vue'

const props = defineProps<{
modelValue: string
placeholder?: string
disabled?: boolean
}>()

const emit = defineEmits<{
(e: 'update:modelValue', value: string): void
(e: 'textLength', value: number): void
}>()

const editor = useEditor({
content: props.modelValue,
extensions: [
StarterKit,
TextAlign.configure({ types: ['heading', 'paragraph'] }),
Placeholder.configure({ placeholder: props.placeholder ?? 'Write something...' }),
Underline,
],
onUpdate({ editor }) {
if (props.disabled) return
const currentContent = editor.getText()

if (currentContent.length > MAX_LENGTH_CHAT_TEXT) {
  const trimmed = currentContent.slice(0, MAX_LENGTH_CHAT_TEXT)
  editor.commands.setContent(trimmed)
  emit('update:modelValue', editor.getHTML())
} else {
  emit('update:modelValue', editor.getHTML())
}
emit('textLength', editor.getText().length)

},
})

// Синхронізація з modelValue
watch(
() => props.modelValue,
newValue => {
if (!editor) return
if (editor.value.getHTML() !== newValue) {
editor.value.commands.setContent(newValue)
}
},
)

// Знищення редактора при демонтажі
onBeforeUnmount(() => {
if (editor.value) editor?.value.destroy()
})
</script>

<style lang="scss"> .ProseMirror { padding: 0.5rem; outline: none; word-break: break-all; p { margin-block-end: 0; } p.is-editor-empty:first-child::before { block-size: 0; color: #adb5bd; content: attr(data-placeholder); float: inline-start; pointer-events: none; } } </style>

`