Rich Text: Reset Interactions Breaking IX

General
1

Hello, when I apply the fs-richtext-resetix=true attribute to my page, I’m getting several errors:

  • My lottie file is being rendered twice, and one doesn’t respond to IX
  • the FS click to copy attribute doesn’t work inside the Rich Text component

https://rill-data-2024.webflow.io/blog/code-block-sample

https://preview.webflow.com/preview/rill-data-2024?utm_medium=preview_link&utm_source=designer&utm_content=rill-data-2024&preview=b35c180dda7ec5448b97c8ccd77f9488&pageId=65b1ebefe1db4206be90e383&itemId=65b2f004fae0b06c353a36f6&locale=en&workflow=preview

2

Hey @emmett! It seems I can not debug with an override, can you test swapping the Copy to Clipboard script for this?

<!-- [Attributes by Finsweet] Copy to clipboard -->
<script
  defer
  fs-attributes-preventload="true"
  src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-copyclip@1/copyclip.js"
></script>

And adding this to the </body>, this will initialize the Copy to Clipboard after the components are added to the Rich Text

<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'richtext',
    (textInstances) => {
      console.log('richtext Successfully loaded!');
      window.fsAttributes.copyclip.init();
    },
  ]);
</script>
3

Hi @Support-Luis , thank you for this code snippet!

It almost works now.
https://rill-data-2024.webflow.io/blog/code-block-sample

Click to Copy is working properly.

The hover and click interactions work as expected, with one exception:
the Lottie SVG that I’m using for my interaction is still being duplicated when it’s embedded in the Powerful Rich Text component.

image

4

@Support-Luis Checking in on this. Do you have any advice for how I can solve this duplicate Lottie error?

5

Hey @emmett! I am not sure what is causing the duplicate of icons but I can try to find a fix for it. Can you please share a working link? The previous seems to be disabled

6

@Support-Luis I’ve re-published that same blog post, so the previous link will work now. Sorry about that.

https://rill-data-2024.webflow.io/blog/code-block-sample

7

Hey @emmett! I can confirm this only happens after the component is added to the rich text. I see you have some initial states for the animation, can we try removing these initial states within the interaction panel and instead use the effects panel?

For other solutions with reset-ix initial states have proved to break the interactions, I am curious if this is happening here.

8

Hi @Support-Luis

https://rill-data-2024.webflow.io/blog/code-block-sample

Looks like removing the initial interaction state helped quite a bit. However, the lottie file doesn’t appear initially now until hovered.

There’s no opacity applied to the Lottie or parent containers (only an overlay), and I can’t use the style or settings panel to control the lottie playback %.

Playback % can only be controlled through the Interactions panel, and it’s only being controlled with hover and click IX.

https://preview.webflow.com/preview/rill-data-2024?utm_medium=preview_link&utm_source=designer&utm_content=rill-data-2024&preview=b35c180dda7ec5448b97c8ccd77f9488&pageId=65b1ebefe1db4206be90e383&itemId=65ea434a77c93d198892e83e&locale=en&workflow=preview

9

@emmett we can fake the hover and hover out to set the Lottie how we want it once the page loads.

<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'richtext',
    (textInstances) => {
      console.log('richtext Successfully loaded!');
      window.fsAttributes.copyclip.init();
      const lottie = document.querySelector('.copy-code_button-overlay');
      const hoverIn = new MouseEvent('mouseover', {
        view: window,
        bubbles: true,
        cancelable: true,
      });

      const hoverOut = new MouseEvent('mouseout', {
        view: window,
        bubbles: true,
        cancelable: true,
      });

      lottie.dispatchEvent(hoverIn);
      lottie.dispatchEvent(hoverOut);
    },
  ]);
</script>
10

@Support-Luis thank you so much, this worked! This is solved now.

1 Like