From 7952f31e63e03b1646ad056110c1226769ed1860 Mon Sep 17 00:00:00 2001
From: Samuel Degueldre <sad@odoo.com>
Date: Mon, 13 May 2024 15:21:43 +0200
Subject: [PATCH] [FIX] playground: correctly escape backslashes and
 interpolation sigils

Previously, if you used a backslash in a template on the playground, it
would be interpreted as an escape sequence, and if you wrote "${" it
would likely crash, as it would be treated as an interpolation sigil in
the context of the script element injected inside the playground's
iframe.

A previous fix already escaped backticks, this commit completes the
escaping by escaping the two other things that have special meaning
within template literals.
---
 docs/playground/playground.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/docs/playground/playground.js b/docs/playground/playground.js
index 7ff6e48b7..7230bf541 100644
--- a/docs/playground/playground.js
+++ b/docs/playground/playground.js
@@ -41,9 +41,6 @@ const loadFile = (path) => {
  * Make an iframe, with all the js, css and xml properly injected.
  */
 function makeCodeIframe(js, css, xml) {
-  // escape backticks in the xml so they don't close the template string
-  const escapedXml = xml.replace(/`/g, '\\\`');
-
   const iframe = document.createElement("iframe");
   iframe.onload = () => {
     const doc = iframe.contentDocument;
@@ -55,6 +52,8 @@ function makeCodeIframe(js, css, xml) {
 
     const script = doc.createElement("script");
     script.type = "module";
+    // escape characters with special meaning in template literals
+    const escapedXml = xml.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$\{/, "\\${");
     script.textContent = `const TEMPLATES = \`${escapedXml}\`\n${js}`;
     doc.body.appendChild(script);