Merge pull request #1119 from gavin-ts/windows-crlf

fix watch mode parsing of self-closing div in svg

ci/release/changelogs/next.md

@@ -7,3 +7,4 @@
 #### Bugfixes ⛑️
 
 - Fix a bug in ID parsing [#322](https://github.com/terrastruct/d2/issues/322)
+- Fix a bug in watch mode parsing SVG [#1119](https://github.com/terrastruct/d2/issues/1119)

d2cli/static/watch.js

@@ -25,14 +25,9 @@ function init(reconnectDelay) {
       console.debug("watch websocket received data");
     }
     if (msg.svg) {
-      // We could turn d2SVG into an actual SVG element and use outerHTML to fully replace it
-      // with the result from the renderer but unfortunately that overwrites the #d2-svg ID.
-      // Even if you add another line to set it afterwards. The parsing/interpretation of outerHTML must be async.
-      //
-      // There's no way around that short of parsing out the top level svg tag in the msg and
-      // setting innerHTML to only the actual svg innards. However then you also need to parse
-      // out the width, height and viewbox out of the top level SVG tag and update those manually.
-      d2SVG.innerHTML = msg.svg;
+      // we can't just set `d2SVG.innerHTML = msg.svg` need to parse this as xml not html
+      const parsedXML = new DOMParser().parseFromString(msg.svg, "text/xml");
+      d2SVG.replaceChildren(parsedXML.documentElement);
 
       const svgEl = d2SVG.querySelector("#d2-svg");
       // just use inner SVG in watch mode