Skip to main content

Command Palette

Search for a command to run...

my first blocknote contribution: closing the popover

tiny change, huge for me

Updated
2 min read

i’ve always loved tools that make you forget there’s code underneath. everything feels clean, fluid, inevitable… the kind of products where it seems like ui just melts away.

but of course, every smooth interaction is hiding about a hundred tiny edge cases. wanting to learn more about what makes a smooth product tick, i finally peeked behind the curtain and decided to contribute to blocknote, a notion-style text editor. i’ve been a notion fan for years, and blocknote felt like the perfect way to learn how these kinds of editors actually work, while giving something back to the tools i enjoy using.

finding an issue

i didn’t start with a grand feature idea. i scrolled through open issues and saw #1696: “link popover does not close when using static formatting toolbar.”

low priority, and labeled “good first issue.” couldn’t have been more perfect.

setting up

blocknote is a pnpm/nx monorepo with packages for core, react, and multiple ui layers (mantine, shadcn, ariakit). the static toolbar lives in mantine.

it took me a hot minute (and A LOT of broken builds) to get the docs site running locally. i even gutted half the demo pages just to isolate the one example i needed: static formatting toolbar. it was super janky, but it worked.

the fix

the difference between the floating toolbar (which was the working one) and the static one (which didn’t) came down to state management:

  • the floating toolbar’s plugin explicitly closes the popover after submit

  • while static toolbar never calls setOpened(false) and therefore stays frozen in time and space.

so the fix was literally like five lines in CreateLinkButton.tsx:

editLink={(url) => {
  update(url);
  setOpened(false);
  editor.focus();
}}

it’s a tiny change, but now the popover closes like it should.

demo

before: link applied, popover stayed open.
after: link applied, popover closes.

screen recording

what i learned

  • monorepos feel like a maze at first, but you get good at pattern-spotting fast.

  • many bugs are really just “someone forgot to update state.”

  • you don’t need a huge feature to start contributing to repos, even small ui fixes matter.

it’s a tiny change, but it feels huge. i went from “i don’t even know where to start” to opening a pr that closes a bug.

makes me appreciate how much thought goes into these little interactions. that’s the kind of invisible polish i’ve always loved about products like figma, duolingo, slack, notion.

this isn’t the end, though! i’m so excited to dive in even deeper into blocknote. ✨