Помните, как раньше, в Vue 2, чтобы добавить на лету свойство объекта нужно было использовать Vue.set, и как мы радовались, когда вышла версия 3 на Proxy и всё стало работать само?

Пытался я сегодня завести редактор Tiptap на ЧИСТЕЙШЕМ проекте Vue. В связи с этим, хочу предложить небольшой интерактив на понимание принципов работы Vue 3.

Ниже привожу код компонента с созданием редактора. При клике на кнопку "Test" мы получаем 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>