Custom block with content-type="none" formatting toolbar appears as small dot

[jehaad1]

Describe the bug
When selecting a custom block content-type="none" with no default props (align, text color, bg color), the formatting toolbar appears as a small dot, when it should be hidden

To Reproduce
I have this custom hr block with no default values, check this when I select it

Take a closer look at this zoom image

Misc

• Node version: Latest
• Package manager: NPM
• Browser: Arc
• I'm a sponsor and would appreciate if you could look into this sooner than later 💖

[matthewlipski]

Kind of odd since there should already be this CSS in the BlockNote styles that handles this:

.bn-mantine .bn-toolbar:empty {
  display: none;
}

Either way, try adding it manually to see if it fixes it

[jehaad1]

I came with another solution that's more supported by browsers:

.bn-mantine .bn-toolbar:empty,
.bn-mantine .bn-toolbar:not(:has(*)) {
  @apply !hidden !opacity-0 !bg-transparent;
}

Since your code is already in the core of the library css, it doesn't work for me because my browser (Arc) doesn't support ":empty" pseudo-class yet, but support ":not(:has(*))".

you can add it to the library css