Unable to select text

[alexblack]

I am just getting started with react-notion-x, and it seems great so far. Except I hit one strange issue - when I render a notion page with simple text using the the text in the browser is not selectable, eg I can't select portions of the text with the mouse like you can on basically every other website.

If I use the chrome inspector to delete <div class="notion-viewport"/> then it works as expected. Is there a work around for this? It seems like this div is over top of everything else preventing normal use.

My render code looks like this:

<NotionRenderer recordMap={data} fullPage={false} darkMode={false} />

[mcintyre94]

Appreciate it doesn't help you much, but I can't repro this. Do you see it on every Notion page or just some? If you're not sure you could try the demo page: 067dd719a912471ea9a3ac10710e7fdf. And if it is only on some pages, do you have a public one that repros it?

[alexblack]

One key for me is fullPage={false}, it doesn't happen with fullPage={true}. If you were trying it with fullPage={false} then I'll see if I can provide a repro.

[mcintyre94]

Gotcha, I'm seeing the same thing with fullPage={false} - same case of needing to remove that notion-viewport class to fix it too.

[alexblack]

Gotcha, I'm seeing the same thing with fullPage={false} - same case of needing to remove that notion-viewport class to fix it too.

Phew. I also found another work around, I added this CSS:

/* Fix issue where the user is prevented from selecting text: https://github.com/NotionX/react-notion-x/issues/81 */
.notion-viewport {
  z-index: -1;
}

[andrewvo89]

By setting .notion-viewport to z-index: -1, that fixes the highlighting text issue however other page elements (not rendered by notion) can't be selected or clicked on (i.e. anchor tags).
Removing <div class="notion-viewport"/> is not an option as it breaks the image zoom feature when clicking on a notion rendered image.

[eagor]

maybe try

.notion-viewport {
   pointer-events: none;
}

[d-ivashchuk]

I have the same problem now with notion-viewport covering the screen and now allowing any interactions on the page 🤷‍♂️

[andrewvo89]

@d-ivashchuk

maybe try

.notion-viewport {
   pointer-events: none;
}

[d-ivashchuk]

It does help with selecting text, but for example for expandable details it still does not work properly 🤷🏻‍♂️

[transitive-bullshit]

This should be fixed now. Please let me know if it's still an issue.