Open
Description
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 💖