SOLVED: SVG HTML code does not copy with copy/paste function

Bugs
1

Bricks Version: 1.5.3
Browser: Chrome 90
OS: Windows, chrome, lastest.
URL: Tailwind Template For Bricks Builder – CTA 03 - Nintu - a SaaS marketing agency

[Please describe in as much detail as possible how we can replicate this bug]

Soo, not sure if intentional or not but when copy/pasting via the clipboard, the code element wipes out some of the content. I’m seeing this mostly with SVG’s (font awesome svg’s as well as custom ones), when pasting an element that has these the svg code that lives in a HTML block goes away…

Might there be a workaround to keep it?

Here is how I’m using it:

Create section I want to re-use in the future.
Save section.
Copy section to clipboard.
Paste clipboard content into custom field
Link custom field to button
Copy custom field content using clipboard.js
Paste content onto new page
Everything comes across correctly except for the SVG code.

2

Origninal code block looks like this:

image

Pasted code block looks like this:
image

3

Hi Alex,
Thanks so much for your report!

Can you record a short screencast and show/explain the problem?
That would make it a lot easier. Thanks!

Best regards,
timmse

4

Absolutely, will record and send over today asap :slight_smile: Thank you for your reply.

5

Hi @timmse & team,

I recorded a quick video explain what’s happening and what I’m trying to achieve. Hope this helps :slight_smile:

6

Hey Alex,
Thanks so much for the video! That helped a loooot :smiley:

I just recreated this the easy way:

  1. I created a section, inserted a code element, inserted SVG code, and set the code block to execute.
  2. then I copied the whole section and pasted it into VS Code to see if the SVG code is still there - and it is.
  3. I copied everything from VS Code and pasted it on the canvas - the code block, including SVG code, is still there.

This means that the problem is probably caused by the custom field that removes the code as it could potentially be malicious :thinking:

I don’t know which custom field plugin you’re using, but please take a look at this ACF article - it might help: ACF | HTML Escaping

Best regards,
timmse

7

Thank you so so so much!!! Really appreciate the help :pray: :raised_hands: :+1:

8

Let me know when you get it up and running :slight_smile:

9

Mhhh… No luck :disappointed_relieved:

I am using ACF, I’ve tried both setting myself as an unfiltered user as well as adding the SVG exception but am not having much luck with either. I’ve attached a screenshot of my functions file below.

You’re 100% correct that it works fine when copy/pasting from VS code.

Also conscious that this probably goes beyond normal bricks support, but really do appreciate your help @timmse <3

image
image1043×931 43 KB

10

Quick update:
I don’t think it’s the ACF field that’s causing the error. It looks like the content there is being saved correctly, just what is being copied to clipboard through the clipboard.js script is sanitized.

Not sure if this is what bricks is pushing via the custom field or something built into clipboard.js

Will do some more homework and revert.

Thank you again for all the help and support <3

11

Another quick update.

The content is being pulled through an acf text field and then embedded as an attribute on a button (image attached below). When I then look at that content on the front-end (via inspecting the button and seeing the attribute-data, that data is once again missing the SVG code.

Unfortunately this is about where my development skills end, and am getting into new territory, might the attribute data be changed in any way by bricks?

image
image2201×915 121 KB
(builder attributes + acf field)
image
image1823×1141 437 KB
(front-end inspector of element)

12

Another other update.

Ignore what I wrote above. This is definitely an ACF/wordpress thing. If the code is just pasted into bricks it outputs fine.

Going back to try and figure out how to allow this type of content through wordpress/acf. If you have any other ideas they are more than welcomes! Will post a solution here if/when I find one.

13

Looks like a WP thing or perhaps Bricks is running it through strip_tags.

I wrote a tutorial on how to set up Copy to Clipboard button (doesn’t provide an answer to your question though).

1 Like
14

Thanks Sridhar, I’ve almost got it working, hopefully tonight i get there.

Essentially, it works with ACF extras as a code field.

But íts like fighting a hydra, new issue is that ACF extras + lightspeedcache triggers a fatal error. They’re not very happy with each other.

Spoke to metabox today who said it should work fine so will try again with metabox when im back at a PC.
Have an affiliate code?

15

I’ll send it via PM.

But shouldn’t it be possible with the free version of MB? Is it not a standard text type of field?

16

Many many hours later, and with much less hair on my head I finally found the solution!

XMP!!!

Turns out there was no sanitization going on, the matabox guys pointed out that my code and SVG’s are just being rendered. fuck me. What a journey!!!

Thank you again @Sridhar and @timmse

#RESOLVED

1 Like
17

What is XMP?

(Post must have at least 20 characters)

18

It disables code from rendering, but ive now just discovered that its no longer supported… sad.

Oh well will have to be a temporary solution and bring someone onboard to code something that can copy to clipboard without rendering it (assuming its possible, unfortunately it’s beyond my dev skills). Its been replaced by the "<“pre”> and <“code”> elements in html5 but they dont support “<” characters which is preventing me from using them.

19

We can wrap the output returned by either get_post_meta() or get_field() in htmlentities() to fix the svg html getting stripped issue.

I’ve updated my tutorial.

20

Oh awesome thank you!! I will subscribe!