How can I centralize a TipTap editor instance in a Pinia store without breaking reactivity?

Below is one explanation and solution that helped me resolve similar issues:

The Issue

When you put the TipTap Editor instance into the Pinia store, you’re storing a complex, non-serializable object. If you wrap it with a deep reactive reference using ref(), Vue tries to recursively convert all inner properties to reactive proxies. The Editor instance contains its own observables and functions, and this deep conversion can either result in excessive recursion (leading to errors) or break reactivity by interfering with its internal state tracking.

What to Do

Since you don’t need deep reactivity for the Editor instance (you want to call its methods, not have Vue react to every little change inside it), use a shallow ref. In a shallow ref, only the container is reactive; the nested properties are left unmodified.

Example

Below is an updated version of your setup that uses shallowRef in the Pinia store and ensures you return the state and actions from the store:

JAVASCRIPTCopied
// editorStore.js
import { defineStore } from 'pinia'
import { shallowRef, ref } from 'vue'
import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'

export const useEditorStore = defineStore('editor', () => {
  // Use shallowRef to store the editor instance
  const editorRef = shallowRef(null)
  const textEditorContent = ref('')

  const initializeEditor = () => {
    // Create a new Editor instance using the current content
    editorRef.value = new Editor({
      editable: true,
      extensions: [StarterKit],
      content: textEditorContent.value,
    })
  }

  return { editorRef, textEditorContent, initializeEditor }
})

Then in your component:

VUECopied
<template>
  <div>
    <editor-content :editor="editor" spellcheck="false" />
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { useEditorStore } from '@/stores/editorStore'

const editorStore = useEditorStore()
// Directly use the shallowRef from the store
const editor = editorStore.editorRef

onMounted(() => {
  editorStore.initializeEditor()
})
</script>

Key Points

• Shallow Ref: By using shallowRef for the Editor instance, you prevent Vue’s reactivity system from traversing into inner properties that could create recursion or cause performance issues.

• Return Store Values: In your Pinia store, don’t forget to return the reactive values and functions so they’re available for your components.

• Non-reactive Object: The Editor object is non-serializable and contains internal states that shouldn’t be deeply observed; shallowRef is the right tool here.

Following this approach should centralize your TipTap state effectively without causing recursion or breaking reactivity for the parts that you actually care about.