LY @lyohajs
This post (sticker, poll or similar) has no web preview. Open in Telegram
ref передан объект (а экземпляр класса Editor, собсно, тоже объект) — Vue решает, что знает лучше нас, что нужно делать, и делает из объекта... reactive (пруф, пруф 2). Для нас это значит только одно: Vue везде вкорячит свой Proxy. ref на shallowRef: Unlike ref(), the inner value of a shallow ref is stored and exposed as-is, and will not be made deeply reactive. Only the .value access is reactive.
Vue.set, и как мы радовались, когда вышла версия 3 на Proxy и всё стало работать само? Uncaught RangeError: Applying a mismatched transaction. Я предлагаю вам подумать, почему так происходит? Сразу скажу, что дело не в HTML элементе и в не настройке редактора — этот код из документации, и там точно всё правильно. Гугление результатов не дало. Скажу лишь, что для фикса достаточно частично поменять всего одну строку.<script setup lang="ts">
import { ref, onMounted, useTemplateRef } from "vue"
import { Editor } from "@tiptap/core"
import StarterKit from "@tiptap/starter-kit"
const elemRef = useTemplateRef('elemRef')
const editorRef = ref<Editor>()
onMounted(async () => {
editorRef.value = new Editor({
element: elemRef.value,
extensions: [StarterKit],
content: "<p>Hello World!</p>",
})
})
const onClick = () => {
editorRef.value.commands.insertContent("<p>Updated</p>")
}
</script>
<template>
<div>
<div ref="elemRef" class="element"></div>
<button type="button" @click="onClick">Test</button>
</div>
</template>
@rattus-orm/core + нужная вам интеграция. На сегодняшний день поддерживаются Vuex и Pinia для Vue, Redux, Mobx и Signals для React, и фреймворк-агностик версия для Local storage. В ближайших планах — Solid.js, Svelte и Angular. 
README.md из этого репо. Если вы (как я) не понимаете, как сделать его читаемым и интересным, либо же просто не хотите запариваться — то для вас хорошие новости. Да-да, для всего есть инструмент. И я нашёл один! 