When I connect BulletList or OrderedList, I see the following error
"SyntaxError: No node type or group 'list_item' found (in content expression 'list_item+')"
client.js?t=1580791374:70999 SyntaxError: No node type or group 'list_item' found (in content expression 'list_item+')
at TokenStream.err (client.js?t=1580791374:37321)
at resolveName (client.js?t=1580791374:37380)
at parseExprAtom (client.js?t=1580791374:37390)
at parseExprSubscript (client.js?t=1580791374:37340)
at parseExprSeq (client.js?t=1580791374:37334)
at parseExpr (client.js?t=1580791374:37327)
at Function.parse (client.js?t=1580791374:37155)
at new Schema (client.js?t=1580791374:38023)
at Editor.createSchema (client.js?t=1580791374:59402)
at Editor.init (client.js?t=1580791374:59312)
For lists, be sure to import ListItem
import {BulletList, OrderedList, ListItem } from 'tiptap-extensions'
When adding ListItem, I get another error
RangeError: Adding different instances of a keyed plugin (plugin$)
at eval (index.es.js?57c0:749)
at Array.forEach (<anonymous>)
at new Configuration (index.es.js?57c0:747)
at Function.create (index.es.js?57c0:885)
at Editor.createState (tiptap.esm.js?cd42:1148)
at Editor.createView (tiptap.esm.js?cd42:1233)
at Editor.init (tiptap.esm.js?cd42:1052)
at new Editor (tiptap.esm.js?cd42:1026)
at VueComponent.data (Editor.vue?50ec:30)
at getData (vue.runtime.esm.js?2b0e:4748)
Full component code if needed, but this is almost identical to what's in the docs
<template>
<div>
<editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
<cv-button
icon="list-ul"
:class="{ 'bg-gray-800': isActive.bullet_list() }"
@click="commands.bullet_list"
/>
</editor-menu-bar>
</div>
</template>
<script>
import { Editor, EditorContent, EditorMenuBar } from "tiptap";
import { BulletList, ListItem } from "tiptap-extensions";
export default {
components: {
EditorContent,
EditorMenuBar
},
props: {
content: {
type: [String, Object],
default: ""
}
},
data() {
return {
editor: new Editor({
extensions: [new BulletList(), new ListItem()],
content: this.content,
onUpdate: ({ getHTML }) => {
this.$emit("input", getHTML());
}
})
};
},
beforeDestroy() {
this.editor.destroy();
}
};
</script>
I've also tried only importing without adding to the extensions array both with and without OrderedList
When adding
ListItem, I get another errorRangeError: Adding different instances of a keyed plugin (plugin$) at eval (index.es.js?57c0:749) at Array.forEach (<anonymous>) at new Configuration (index.es.js?57c0:747) at Function.create (index.es.js?57c0:885) at Editor.createState (tiptap.esm.js?cd42:1148) at Editor.createView (tiptap.esm.js?cd42:1233) at Editor.init (tiptap.esm.js?cd42:1052) at new Editor (tiptap.esm.js?cd42:1026) at VueComponent.data (Editor.vue?50ec:30) at getData (vue.runtime.esm.js?2b0e:4748)Full component code if needed, but this is almost identical to what's in the docs
<template> <div> <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }"> <cv-button icon="list-ul" :class="{ 'bg-gray-800': isActive.bullet_list() }" @click="commands.bullet_list" /> </editor-menu-bar> </div> </template> <script> import { Editor, EditorContent, EditorMenuBar } from "tiptap"; import { BulletList, ListItem } from "tiptap-extensions"; export default { components: { EditorContent, EditorMenuBar }, props: { content: { type: [String, Object], default: "" } }, data() { return { editor: new Editor({ extensions: [new BulletList(), new ListItem()], content: this.content, onUpdate: ({ getHTML }) => { this.$emit("input", getHTML()); } }) }; }, beforeDestroy() { this.editor.destroy(); } }; </script>I've also tried only importing without adding to the extensions array both with and without
OrderedList
After importing ListItem, try to add as a new extension on your data as well. I was having the same issue as you and it worked.