Blocknote hallucinating UI outside of container

[MyTotoro]

Describe the bug Blocknote out-of-bounds UI Hallucinations. Basically the text control appears outside the bounds of the blocknote container. It's possible to interact with it and it's quite odd, it seems like it appears when clicking on input fields / it's bound on focus for input fields (see gif and input 3 where the blocknote UI appears). It's hard to replicate consistently to appear in the same spot but it's very consistent in that it's a problem / a ghost artifact

To Reproduce I can reproduce this just by spacing out input components, I use ShadCN and Tailwind here

import { createFileRoute } from '@tanstack/react-router';
import { Input } from '@/components/ui/input.tsx';

export const Route = createFileRoute('/_auth/app/test')({
  component: () => (
    <div className="flex h-full items-center justify-center">
      <div className="space-y-25 flex w-[600px] flex-col justify-center bg-white p-5">
        <h4 className="text-xl font-semibold">Testing Page</h4>
        <label htmlFor="asdfasdf" className="pt-10 text-sm">
          Random Input Label 1
        </label>
        <div className="pt-5">
          <Input id="asdfasdf" />
        </div>
        <label htmlFor="asdfasdf2" className="pt-10 text-sm">
          Random Input Label 2
        </label>
        <div className="pt-5">
          <Input id="asdfasdf2" />
        </div>
        <EditorInputDescriptions
          textContent={[
            { type: 'paragraph', content: [] },
            { type: 'paragraph', content: [] },
            { type: 'paragraph', content: [] },
            { type: 'paragraph', content: [] },
            { type: 'paragraph', content: [] },
            { type: 'paragraph', content: [] },
          ]}
        >
          <>Description&#160;</>
        </EditorInputDescriptions>
        <label htmlFor="asdfasdf3" className="pt-10 text-sm">
          Random Input Label 3
        </label>
        <div className="pt-5">
          <Input id="asdfasdf3" />
        </div>
        <label htmlFor="asdfasdf4" className="pt-10 text-sm">
          Random Input Label 4
        </label>
        <div className="pt-5">
          <Input id="asdfasdf4" />
        </div>
        <label htmlFor="asdfasdf5" className="pt-10 text-sm">
          Random Input Label 5
        </label>
        <div className="pt-5">
          <Input id="asdfasdf5" />
        </div>
      </div>
    </div>
  ),
});

The EditorInputDescriptions is just a wrapper which is basically copy and pasted from https://www.blocknotejs.org/examples/basic/saving-loading

Misc

• Node version: node: 'v22.0.0', npm: '10.5.1'
• Browser: Chrome
• [ ] I'm a sponsor and would appreciate if you could look into this sooner than later 💖

[francesco-bosia]

+1 also getting this, npm, node 21.7.0, multiple Editor instances per page. Using the mantine editor implementation in a Shadcn+Tailwind project. The "ghost" UI appears in every other instance of the editor in the page and sometime as a "ghost" handle as described above.

[candidcalcifer]

+1 I get the same issue too, the icon appears multiple times outside the input field even when selecting other items on the page, it also shows on top of dropdowns when they're selected, when selecting one input field, others will be highlighted as well and show the icons as if you're also active in that input

[NerminKarapandzic]

+1, having the same issue