How to build notion style "editable when clicked" fields?

[tanishqkancharla]

Notion has a pattern where inputs open a modal with a text editor only when they're clicked:

What's the right way to build this pattern with Modal, Dialog, and/or Popover

[snowystinger]

I'm not sure I'm familiar with the "input" you're describing, do you have instructions for how to see one on Notion?

[tanishqkancharla]

What I'm having trouble with specifically is positioning the Popover directly above where the button is. I'm not sure how to do that with the current available props.

I have a stackblitz here: https://bolt.new/~/sb1-3cethray

But as you can see it doesn't position the popover directly above the button as Notion does. The relative attributes ("-100%") don't seem to apply to offset properties

[snowystinger]

ah, we don't currently supply any information about trigger height. You'll just want to measure that height and apply it as the offset
https://bolt.new/~/sb1-ig8cr9d2

I'm not sure what 100% would refer to anyways, trigger? document? viewport? an offset parent?

[tanishqkancharla]

I think I need access to that stackblitz

[tanishqkancharla]

Is it possible to get trigger height and measurement via hooks api?

[snowystinger]

apologies, didn't know that visibility was hidden. it should be visible to you now