Tiptap: Extensions Lists not work

Created on 4 Feb 2020  路  3Comments  路  Source: ueberdosis/tiptap

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)
bug

All 3 comments

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

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.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

glavdir picture glavdir  路  3Comments

asseti6 picture asseti6  路  3Comments

Auxxxxlx picture Auxxxxlx  路  3Comments

santicros picture santicros  路  3Comments

chrisjbrown picture chrisjbrown  路  3Comments