Media embed can break the Vizy field if there are quotes in the title

Mosnar commented 1 year ago

Describe the bug

If a YouTube video is entered with a double-quote character in the title, Vizy will fail to parse the JSON it produces after saving the entry.

Steps to reproduce

Create a new entry with a Vizy field
Add Media Embed with "https://www.youtube.com/watch?v=FKE2rYZ2MtA"
Everything appears to work (even live preview)
Save the entry

Craft CMS version

4.4.9

Plugin version

2.1.4

Multi-site?

No

Additional context

Here's the JSON from the field in the database:

[{"type":"mediaEmbed","attrs":{"url":"https:\/\/www.youtube.com\/watch?v=FKE2rYZ2MtA","data":{"title":"\"I'M GONNA PUT SOME DIRT IN YOUR EYE\" in different languages","author_name":"Svyatozar in different languages","author_url":"https:\/\/www.youtube.com\/@svyatozar","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https:\/\/www.youtube.com\/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https:\/\/i.ytimg.com\/vi\/FKE2rYZ2MtA\/hqdefault.jpg","html":"<iframe width=\"200\" height=\"113\" src=\"https:\/\/www.youtube.com\/embed\/FKE2rYZ2MtA?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen title=\"&quot;I&#39;M GONNA PUT SOME DIRT IN YOUR EYE&quot; in different languages\"><\/iframe>"}}},{"type":"paragraph","attrs":[],"content":[{"type":"text","text":"Test"}]}]

Here's the console error in the CMS:

zy.js:43 SyntaxError: Expected ',' or '}' after property value in JSON at position 748
    at JSON.parse (<anonymous>)
    at Proxy.decodeHtml (VizyInput.vue:372:25)
    at Proxy.valueToContent (VizyInput.vue:358:26)
    at Proxy.mounted (VizyInput.vue:169:27)
    at runtime-core.esm-bundler.js:2757:40
    at No (runtime-core.esm-bundler.js:173:22)
    at Yr (runtime-core.esm-bundler.js:182:21)
    at Gm.t.__weh.t.__weh (runtime-core.esm-bundler.js:2731:29)
    at xp (runtime-core.esm-bundler.js:359:46)
    at Ae (runtime-core.esm-bundler.js:6281:9)

engram-design commented 1 year ago

Fixed for the next release. To get this early, run composer require verbb/vizy:"dev-craft-4 as 2.1.4"