Tiptap: isActive.bold is not a function

[philippkuehn]

It seems you forgot to import the bold extension?

[PrimozRome]

Hmm you are right I see in the example code now.

I didn't know I need to do this. It's not mentioned in the docs for adding a menu bar.

[philippkuehn]

Yeah sorry for that. The docs are bad at the moment ☹️

[PrimozRome]

No worries, I can live with that.

[PrimozRome]

@philippkuehn after that I am still getting error for commands Invalid handler for event "click": got undefined. I must be still missing something?

<template>
  <div>
        <editor-menu-bar :editor="editor">
          <div
            slot-scope="{ commands, isActive }"
            class="html-eidor-menu">
            <button
              :class="{ 'is-active': false }"
              class="menubar__button"
              @click="commands.bold">
              <i class="fa fa-bold"/>
            </button>
          </div>
        </editor-menu-bar>

        <editor-content
          ref="input"
          :editor="editor"
          :editable="readonly || disabled"
          class="html-editor"
        />
  </div>
</template>

<script>
import { Editor, EditorMenuBar, EditorContent } from 'tiptap'
import { Bold } from 'tiptap-extensions'

export default {
  name: 'HtmlInput',

  components: {
    EditorMenuBar,
    EditorContent
  },

  data() {
    return {
      editor: new Editor({
        extensions: [
          new Bold()
        ]
      })
    };
  },

  mounted() {
    this.editor = new Editor({
      content: '<p>This is just a boring paragraph</p>',
    })
  },

  beforeDestroy() {
    this.editor.destroy()
  }
}
</script>

[philippkuehn]

You are overwriting the editor in your mounted hook. You can set your content in data:

  data() {
    return {
      editor: new Editor({
        extensions: [
          new Bold()
        ],
        content: '<p>This is just a boring paragraph</p>',
      })
    };
  },

[bdrtsky]

I have similiar error. Code above is not working https://github.com/scrumpy/tiptap/issues/152