Hyperlink in RichText seems to cause hiding of whole element

Developing with Prismic
1

Hi!
This is my first time posting here, and I will try to include as much information as possible since I don't know where the issue is caused. I've been in contact with Prismic support who advised me to post a question in the forum. I also thought about posting this on Stack Overflow since I do not know what's causing it, but since it doesn't seem to be an issue with a regular link (just a problem with a link inside RichText) I thought I'd post it here to see if somebody has run into something similar.

I'm using React + Next, and I'm creating a cookie banner using react-cookie-consent. Inside the Cookie banner, I'm having a RichText field displayed. Everything works as expected until I add a hyperlink in the RichText field. If I do that, weird things start happening:

  1. The editor in Prismic starts blinking and/or disappears when I try to edit (see the video in the end). I'm still able to save the RichText with the hyperlink though.
  2. The actual component with the RichText field in it gets a lot of styling applied to hide it (see the image in the end). This doesn't happen in incognito mode or firefox, so I guess that has to do with my Chrome settings or Adblocker or something, but can my Adblocker really mess up the Prismic editor as well?

Any advice is appreciated since I don't really know where to start.
Thanks in advance,
Matilda

Skärmavbild 2021-09-25 kl. 11.50.32
Skärmavbild 2021-09-25 kl. 11.50.32990×792 136 KB

2

Addition:
I tried commenting out the Cookie Component (the npm package I used) and it makes no difference. The issue seems to be limited to links inside Rich Text.
I've deleted the Banner document and created a new one, the same thing happens.

Here's the JSON:

{
  "Main": {
    "text": {
      "type": "StructuredText",
      "config": {
        "multi": "paragraph, preformatted, heading1, heading2, heading3, heading4, heading5, heading6, strong, em, hyperlink, list-item, o-list-item, rtl",
        "label": "Text"
      }
    }
  }
}
4

After a lot of investigation, I found the culprit. An extension called Cookie Notice Blocker that I don't remember installing. Apparently, it works by applying CSS rules to cookie banners and popups to hide them :woman_shrugging:

5

Thanks for posting this question, and the solution, @technigo! Let me know if you have any more issues :slight_smile:

Sam

1 Like
6

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.