Bullet list getting rendered to DOM but not working

[arrpitsharrma]

I am working on tiptap integration with Vue where Bold, Ordered List, Italics and Underline is working. But Bullet-List is not working.

As soon as I remove the list-style: none from CSS, bullet-list shows up. But I am not able to change the CSS with my custom code.

[hanspagel]

I tried this:

ul {
  list-style: none;
  border: 10px solid red;
}

https://codesandbox.io/s/vue-issue-template-ovpou?file=/src/App.vue

But couldn’t find an issue with tiptap. Would you please provide a code sandbox with your code? Here is a starting point: https://codesandbox.io/s/vue-issue-template-h0g28

I’ll reopen it then.

[tsangaris]

Hey guys,

Any news on this one?

[philippkuehn]

We need a demo that reproduces this issue.

[tsangaris]

We need a demo that reproduces this issue.

This is a demo, but it works just fine here (except the issue of TypeError: Cannot read property 'isActive' of null): https://codesandbox.io/s/vue-issue-template-forked-yzk0q?file=/src/App.vue

I am using VueJS with Laravel and Tailwind. What I ended doing to overcome this "list-style: none" issue on "ul" and "ol" was to target these elements in my scoped css:

<style lang="css" scoped>
    ::v-deep .ProseMirror > * + * {
      margin-top: 0.75em;
    }

    ::v-deep .ProseMirror ol {
      padding: 0 1rem;
      list-style: decimal !important;
    }

    ::v-deep .ProseMirror ul {
      padding: 0 1rem;
      list-style: disc !important;
    }
</style>

As for the issue I get (TypeError: Cannot read property 'isActive' of null) I overcome this by creating a method named isActiveFixed():

isActiveFixed(mark) {
  if (this.editor != null) {
    return this.editor.isActive(mark);
  }

  return false;
},

I assume this is caused by the data property "editor" that is initialized as "null". By checking if the editor is not "null", I managed to overcome this problem.

PS: Thanks for your great work!

[philippkuehn]

This is a demo, but it works just fine here

Then this demo doesn’t help me at all 😅

except the issue of TypeError: Cannot read property 'isActive' of null

On first render, editor is null because it’s created in the mounted hook. The recommended way is to add a v-if="editor" to your menus.

[tsangaris]

This is a demo, but it works just fine here

Then this demo doesn’t help me at all 😅

except the issue of TypeError: Cannot read property 'isActive' of null

On first render, editor is null because it’s created in the mounted hook. The recommended way is to add a v-if="editor" to your menus.

Maybe is some weird issue with TailwindCSS and TailwindUI? Dont really know..

[Sumis34]

If you are working with Tailwind you have to add the typography plugin for Lists to render correctly.

[caturbgs]

My workaround is that I'm using tailwind CSS. it has some style that formats HTML.

So, I'm just overriding that styling using this and adding that on index.css at the file.

@layer base {
  ul, ol {
    list-style: revert;
  }
}

[mmohades]

If you're using TailwindCSS, you need to style your lists as they're defaulted to no style. Here's an example:

  const editor = useEditor({
    extensions: [
      StarterKit, BulletList.configure({
        HTMLAttributes: {
          class: 'list-disc'
        }
      })
    ],
    content: ''
  });

Read more about Tailwind list styles.

[OkeleyeVickkk]

If you are working with Tailwind you have to add the typography plugin for Lists to render correctly.

For anybody coming here to check this, this is the best solution that works without any issue

[Ansub]

Thanks @OkeleyeVick that was a quick fix!

[kravenhunter]

I wanted to add my five cents also. Or you use base configure like StarterKit and configure extensions inside of it as :

     StarterKit.configure({
        bulletList:{
          HTMLAttributes: {
           class: "bullet_class",
          },
        },
        orderedList:{
  HTMLAttributes: {
            class: "order_class",
          },
        },
        heading: {
          HTMLAttributes: {
            class: "headers_class",
          },
        },})

or you customize editor by adding extension into extensions: [ BulletList, OrderedList] but before you need to remove StarterKit. When I'm adding all extensions with StarterKit in nuxt project I'm getting the error => @tiptap_vue-3.js:3262 [tiptap warn]: Duplicate extension names found: ['bulletList', 'orderedList', 'listItem']. This can lead to issues.

[hadiqaiser]

If you are working with Tailwind you have to add the typography plugin for Lists to render correctly.

For anybody coming here to check this, this is the best solution that works without any issue

Yes this do return default style but it also add additonal margins which we then need to manually handle.