Colors toolbar scrolls whole screen

[MyTotoro]

Describe the bug Selecting Colors on toolbar will scroll the whole screen awkwardly. (I'm not scrolling the screen - but the whole screen is scrolling up)

const BlocknoteWrapper = React.forwardRef<HTMLDivElement, BlockNoteViewProps>(
  (props: BlockNoteViewProps, ref: React.ForwardedRef<HTMLDivElement>) => {
    const [initialContent, setInitialContent] = useState<
      PartialBlock[] | undefined | 'loading'
    >('loading');

    const editor = useMemo(() => {
      if (initialContent === 'loading') {
        return undefined;
      }
      return BlockNoteEditor.create({ initialContent });
    }, [initialContent]);

    useEffect(() => {
      // parseFromRemote(props.textContent).then((content) => {
      setInitialContent(props.textContent);
      // });
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    const debounced_save = debounce((d) => {
      if (props.saveChanges) {
        props.saveChanges(d);

        if (props.setModified) {
          props.setModified(true);
        }
      }
    }, 500);

    if (editor === undefined) {
      return 'Loading content...';
      //TODO: make this a suspense fallback
    }

    return (
      <div className="relative">
        <BlockNoteView
          editor={editor as BlockNoteEditor}
          onChange={() => {
            debounced_save(editor.document);
          }}
          ref={ref}
          editable={true}
          formattingToolbar={true}
          linkToolbar={true}
          sideMenu={true}
          slashMenu={true}
          tableHandles={true}
          className={cn(
            `mt-1.5 max-h-72 overflow-auto rounded-md border border-border-gray bg-white`,
            `${props.className ?? ''}`,
          )}
        />
      </div>
    );
  },
);

import { createLazyFileRoute } from '@tanstack/react-router';
import BlocknoteWrapper from '@/custom_components/editor/blocknote_wrapper.tsx';

export const Route = createLazyFileRoute('/_auth/app/test')({
  component: BlocknoteExample,
});

function BlocknoteExample() {
  return (
    <div className="flex h-full items-center justify-center">
      <div className="space-y-25 my-10 flex w-[600px] flex-col justify-center bg-white p-5">
        <p>
          One fine evening a young princess put on her bonnet and clogs, and
          went out to take a walk by herself in a wood; and when she came to a
          cool spring of water, that rose in the midst of it, she sat herself
          down to rest a while. Now she had a golden ball in her hand, which was
          her favourite plaything; and she was always tossing it up into the
          air, and catching it again as it fell. After a time she threw it up so
          high that she missed catching it as it fell; and the ball bounded
          away, and rolled along upon the ground, till at last it fell down into
          the spring. The princess looked into the spring after her ball, but it
          was very deep, so deep that she could not see the bottom of it. Then
          she began to bewail her loss, and said, ‘Alas! if I could only get my
          ball again, I would give all my fine clothes and jewels, and
          everything that I have in the world.’ Whilst she was speaking, a frog
          put its head out of the water, and said, ‘Princess, why do you weep so
          bitterly?’ ‘Alas!’ said she, ‘what can you do for me, you nasty frog?
          My golden ball has fallen into the spring.’ The frog said, ‘I want not
          your pearls, and jewels, and fine clothes; but if you will love me,
          and let me live with you and eat from off your golden plate, and sleep
          upon your bed, I will bring you your ball again.’ ‘What nonsense,’
          thought the princess, ‘this silly frog is talking! He can never even
          get out of the spring to visit me, though he may be able to get my
          ball for me, and therefore I will tell him he shall have what he
          asks.’ So she said to the frog, ‘Well, if you will bring me my ball, I
          will do all you ask.’ Then the frog put his head down, and dived deep
          under the water; and after a little while he came up again, with the
          ball in his mouth, and threw it on the edge of the spring. As soon as
          the young princess saw her ball, she ran to pick it up; and she was so
          overjoyed to have it in her hand again, that she never thought of the
          frog, but ran home with it as fast as she could. The frog called after
          her, ‘Stay, princess, and take me with you as you said,’ But she did
          not stop to hear a word.
        </p>
        <p>
          Whilst she was speaking, a frog put its head out of the water, and
          said, ‘Princess, why do you weep so bitterly?’ ‘Alas!’ said she, ‘what
          can you do for me, you nasty frog? My golden ball has fallen into the
          spring.’ The frog said, ‘I want not your pearls, and jewels, and fine
          clothes; but if you will love me, and let me live with you and eat
          from off your golden plate, and sleep upon your bed, I will bring you
          your ball again.’ ‘What nonsense,’ thought the princess, ‘this silly
          frog is talking! He can never even get out of the spring to visit me,
          though he may be able to get my ball for me, and therefore I will tell
          him he shall have what he asks.’ So she said to the frog, ‘Well, if
          you will bring me my ball, I will do all you ask.’ Then the frog put
          his head down, and dived deep under the water; and after a little
          while he came up again, with the ball in his mouth, and threw it on
          the edge of the spring. As soon as the young princess saw her ball,
          she ran to pick it up; and she was so overjoyed to have it in her hand
          again, that she never thought of the frog, but ran home with it as
          fast as she could. The frog called after her, ‘Stay, princess, and
          take me with you as you said,’ But she did not stop to hear a word.
        </p>
        <h1>this is my blocknote</h1>
        <BlocknoteWrapper
          textContent={[
            { type: 'paragraph', content: [] },
            { type: 'paragraph', content: [] },
            { type: 'paragraph', content: [] },
          ]}
        />
        <p>
          Then the princess ran to the door and opened it, and there she saw the
          frog, whom she had quite forgotten. At this sight she was sadly
          frightened, and shutting the door as fast as she could came back to
          her seat. The king, her father, seeing that something had frightened
          her, asked her what was the matter. ‘There is a nasty frog,’ said she,
          ‘at the door, that lifted my ball for me out of the spring this
          morning: I told him that he should live with me here, thinking that he
          could never get out of the spring; but there he is at the door, and he
          wants to come in.’
        </p>
      </div>
    </div>
  );
}

Misc

"@blocknote/core": "0.15.7",
"@blocknote/react": "0.15.7",
"@blocknote/shadcn": "0.15.7",

• Node version: { node: '20.11.1', npm: '10.5.0' }
• Package manager: npm
• Browser: Chrome
• [ ] I'm a sponsor and would appreciate if you could look into this sooner than later 💖

[candidcalcifer]

having same issue

[matthewlipski]

Can you try using BlockNoteView from @blocknote/mantine and see if you get the same issue? Just to see if the bug is related to the react or shadcn packages

[MyTotoro]

@matthewlipski good suggestion

I did some A/B testing and noticed the shadcn behavior happens on the Blocknote docs. This is opened in an incognito chrome window (with ad block extensions but no dev extensions enabled).

I tried replicating this behavior in a clean stackblitz (forked from when you create a New Issue) but it doesn't have that behavior: https://stackblitz.com/edit/github-whtt2j-niytig?file=App.tsx

It's tricky to debug what's happening to the div element as it disappears completely based on mouse interactions - so it's hard to break on attribute changes in the console. But it seems like the shadcn floating toolbar is doing some weird calculations for transform and translate and it's being mixed with some scroll behavior

[matthewlipski]

Thanks for checking this! Good to know it's ShadCN related, will fix👍