Vue3 TypeError: editor.chain is not a function from within script setup.

[cpt-n3mo]

What’s the bug you are facing?

cant use editor.chain() from within script setup.. it does work from template..

Which browser was this experienced in? Are any special extensions installed?

firefox

How can we reproduce the bug on our side?

<template>
<div>
             <div v-for="menuItem of mainMenuButtons">
                <icon :id="menuItem.name" @click="menuItem.cmd"  :icon="menuItem.icon" />
            </div>
</div>
</template>

<script setup>
import {ref,computed} from 'vue'

import { useEditor, EditorContent } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'
import Underline from '@tiptap/extension-underline'

const editor = useEditor({
    content: '<p>I’m running Tiptap with </p><p>I’m running Tiptap with </p>',
    autofocus: false,
    editable: true,
    injectCSS: false,
    extensions: [
        StarterKit,
        Underline
    ],

})

const mainMenuButtons = ref([
    {
        name: 'bold',
        cmd: editor.chain().focus().toggleBold().run(),
        icon: ['fa', 'bold']
    },
    {
        name: 'italic',
        cmd: editor.chain().focus().toggleItalic().run(),
        icon: ['fa', 'italic']
    },
    {
        name: 'underline',
        cmd: editor.chain().focus().toggleUnderline().run(),
        icon: ['fa', 'underline']
    },
])
</script>

Can you provide a CodeSandbox?

See above

What did you expect to happen?

Same as in template

Anything to add? (optional)

const test = () =>{
    console.log(editor.value.chain().focus().toggleItalic().run())
}
returns true

const test = () =>{
    editor.value.chain().focus().toggleItalic().run()
} 
also works.

so it seems when editor commands are set as variables, inside a array or on a object, editor.value is undefined,

Did you update your dependencies?

• [X] Yes, I’ve updated my dependencies to use the latest version of all packages.

Are you sponsoring us?

• [ ] Yes, I’m a sponsor. 💖

[cpt-n3mo]

as a workaround call them as a function like so

const mainMenuButtons = ref([
    {
        name: 'bold',
        cmd: () => editor.value.chain().focus().toggleItalic().run(),
        icon: ['fa', 'bold']
    }])

[DarthCanard]

I ran into the same issue, but not using .value was the mistake :) Took me some time to figure, new to Vue (Nuxt) !

    {
    title: 'Bold',
    action: () => editor.value.chain().focus().toggleBold().run(),
    isDisabled: () => !editor.value.can().chain().focus().toggleBold().run(),
    isActive: () => editor.value.isActive('bold'),
  },

instead of :

  {
    title: 'Bold',
    action: () => editor.chain().focus().toggleBold().run(),
    isDisabled: () => !editor.can().chain().focus().toggleBold().run(),
    isActive: () => editor.isActive('bold'),
  },