Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

BulletList and OrderedList Extensions throwing Console Error

See original GitHub issue

Describe the bug When adding the following Extensions to an TipTap Editor Instance, the complete Menubar is broken (not displayed)

Steps to Reproduce / Codesandbox Example Steps to reproduce the behavior:

Import BulletList and/or OrderedList Extension
Implement them like in examples
Reload the Component containing the Editor

JS Code:

`import {Editor, EditorContent, EditorMenuBar} from ‘tiptap’ import { Bold, Heading, Italic, Underline, Strike, Code, BulletList, } from ‘tiptap-extensions’

export default { name: “Description”, components: { EditorMenuBar, EditorContent }, data() { return { editor: null, content: ‘’ } }, mounted() { this.editor = new Editor({ extensions: [ new Bold(), new Italic(), new Underline(), new Strike(), new Code(), new BulletList(), new Heading({ levels: [1, 2, 3, 4, 5, 6] }) ], content: “”, onUpdate: ({state, getHTML, getJSON, transaction}) => { this.$emit(‘set-content’, getHTML()) } }) }, beforeDestroy() { this.editor.destroy() } }`

Template:

<editor-menu-bar :editor="editor" v-slot="{ commands, isActive }"> <div> <button type="button" :class="{ 'is-active' : isActive.bold() }" v-on:click="commands.bold"> Bold </button> <button type="button" :class="{ 'is-active' : isActive.italic() }" v-on:click="commands.italic"> Italic </button> <button type="button" :class="{ 'is-active' : isActive.underline() }" v-on:click="commands.underline"> Underline </button> <button type="button" :class="{ 'is-active' : isActive.strike() }" v-on:click="commands.strike"> Strike </button> <button type="button" :class="{ 'is-active' : isActive.code() }" v-on:click="commands.code"> Code </button> <button type="button" :class="{ 'is-active' : isActive.heading({level: 1}) }" v-on:click="commands.heading({level:1})"> H1 </button> <button type="button" :class="{ 'is-active' : isActive.heading({level: 2}) }" v-on:click="commands.heading({level:2})"> H2 </button> <button type="button" :class="{ 'is-active' : isActive.heading({level: 3}) }" v-on:click="commands.heading({level:3})"> H3 </button> <button type="button" :class="{ 'is-active' : isActive.heading({level: 4}) }" v-on:click="commands.heading({level:4})"> H4 </button> <button type="button" :class="{ 'is-active' : isActive.heading({level: 5}) }" v-on:click="commands.heading({level:5})"> H5 </button> <button type="button" :class="{ 'is-active' : isActive.heading({level: 6}) }" v-on:click="commands.heading({level:6})"> H6 </button> <button type="button" :class="{ 'is-active' : isActive.bullet_list() }" v-on:click="commands.bullet_list()"> Bullet List </button> </div> </editor-menu-bar> <editor-content class="form-control" :editor="editor"></editor-content>

Expected behavior Bullet List and Ordered List should be usable in Editor

Environment