Vue 3 script setup editor is undefined

[kskrlinnorth2]

What’s the bug you are facing?

Vue 3 script setup implementation throws error when setting active class on command button.

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

Windows 10, Chrome Version 103.0.5060.134 (Official Build) (64-bit)

How can we reproduce the bug on our side?

This is my Vue 3 component for tiptap editor. Inside template I must use v-if="editor" because if I don't use it I get error that isActive() can't be called on undefined, however if I don't use any logic to set active class then I don't need v-if and click command works.

<script setup>
import { useEditor, EditorContent } from "@tiptap/vue-3";
import StarterKit from "@tiptap/starter-kit";

const props = defineProps(["modelValue"]);
const emit = defineEmits(["update:modelValue"]);

const editor = useEditor({
  content: props.modelValue,
  extensions: [StarterKit],
  onUpdate: ({ editor }) => {
    console.log("Updated", editor.getText(), editor.getHTML());
    emit("update:modelValue", editor.getText().length ? editor.getHTML() : "");
  },
});
</script>

<template>
  <div v-if="editor">
    <button
      :class="{ active: editor.isActive() }"
      @click="editor.chain().focus().toggleBold().run()"
    >
      Bold
    </button>
    <editor-content :editor="editor" />
  </div>
</template>

This is template that doesn't work.. I don't see any errors about this code, it's same as in documentation.

<template>
  <div>
    <button
      :class="{ active: editor.isActive('bold') }"
      @click="editor.chain().focus().toggleBold().run()"
    >
      Bold
    </button>
    <editor-content :editor="editor" />
  </div>
</template>

This works, without dynamic class and without if, when I put :class everything breaks with mentioned error (editor undefined):

<template>
  <div>
    <button @click="editor.chain().focus().toggleBold().run()">Bold</button>
    <editor-content :editor="editor" />
  </div>
</template>

What did you expect to happen?

I expect to use it as documented (without extra if condition). Also I would like to know the reason why editor is undefined inside :class, but works normally onclick and when passing it to editor-content component.

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. 💖

[mhrahul]

what I did const editorshort = useEditor({ extensions: [StarterKit], content: "", onUpdate: ({ editor }) => { // console.log("Updated", editor.getText(), editor.getHTML()); product.productsdetails = editor.getHTML(); }, }); And it works for me.

[github-actions[bot]]

This issue is stale because it has been open 45 days with no activity. Remove stale label or comment or this will be closed in 7 days