fix: added consistent support for xml declarations

sergeleger · sergeleger · commit ea2d63581e6f · 2025-07-16T12:59:43.000-03:00
diff --git a/packages/studio-web/src/app/b64.service.ts b/packages/studio-web/src/app/b64.service.ts
@@ -60,7 +60,11 @@ export class B64Service {
   }
 
   xmlToB64(xml: Document) {
-    return this.utf8_to_b64(new XMLSerializer().serializeToString(xml));
+    return this.utf8_to_b64(
+      new XMLSerializer()
+        .serializeToString(xml)
+        .replace("?><read", "?>\n<read"),
+    );
   }
 
   blobToB64(blob: any) {
diff --git a/packages/studio-web/src/app/editor/editor.component.ts b/packages/studio-web/src/app/editor/editor.component.ts
@@ -287,37 +287,63 @@ export class EditorComponent implements OnDestroy, OnInit, AfterViewInit {
     const parser = new DOMParser();
     const readalong = parser.parseFromString(text, "text/html");
     const element = readalong.querySelector("read-along");
-
     if (element === undefined || element === null) {
       return undefined;
     }
 
-    // Store the element as parsed XML
-    // Create body element, which mysteriously gets removed from the text element.
-    let textNode = element.querySelector("text");
-    if (textNode && !textNode.querySelector("body")) {
-      const body = document.createElement("body");
-      body.id = "t0b0";
-      while (textNode.hasChildNodes()) {
-        // @ts-ignore
-        body.appendChild(textNode.firstChild);
+    // What is the appropriate source for the XML read along document? Either it was
+    // encoded in the element's href attribute, or included as a child element of the
+    // <read-along /> element.
+    //
+    // Prioritize the href implementation since it is more common.
+    const href = element.getAttribute("href");
+    if (href) {
+      const reply = await fetch(href);
+      if (reply.ok) {
+        // FIXME: potential zip-bombing?
+        let xmlString = await reply.text();
+        if (!xmlString.startsWith("<?xml")) {
+          xmlString = `<?xml version='1.0' encoding='utf-8'?>\n` + xmlString;
+        }
+
+        this.editorService.rasControl$.setValue(
+          parser.parseFromString(xmlString, "application/xml"),
+        );
+      }
+    } else {
+      // Store the element as parsed XML
+      // Create body element, which gets removed from the text element. This occurs
+      // because the document was parsed with text/html mimetype which only allows
+      // a single <body /> element as a child of <html />.
+      let textNode = element.querySelector("text");
+      if (textNode && !textNode.querySelector("body")) {
+        const body = document.createElement("body");
+        body.id = "t0b0";
+        while (textNode.hasChildNodes()) {
+          // @ts-ignore
+          body.appendChild(textNode.firstChild);
+        }
+        textNode.appendChild(body);
+      }
+
+      // Similar issue, the document was parsed with a text/html mimetype, attributes
+      // in HTML are always lowercased.
+      const serializer = new XMLSerializer();
+      let xmlString = serializer
+        .serializeToString(element)
+        .replace(/arpabet=/g, "ARPABET=") // Our DTD says ARPABET is upper case
+        .replace(/xmlns="[\w\/\:\.]*"/g, ""); // Our DTD does not accept xmlns that the parser inserts
+      if (!xmlString.startsWith("<?xml")) {
+        xmlString = `<?xml version='1.0' encoding='utf-8'?>\n` + xmlString;
       }
-      textNode.appendChild(body);
+
+      this.editorService.rasControl$.setValue(
+        parser.parseFromString(xmlString, "application/xml"),
+      ); // re-parse as XML
     }
-    const serializer = new XMLSerializer();
-    const xmlString = serializer
-      .serializeToString(element)
-      .replace(/arpabet=/g, "ARPABET=") // Our DTD says ARPABET is upper case
-      .replace(/xmlns="[\w\/\:\.]*"/g, ""); // Our DTD does not accept xmlns that the parser inserts
-    //console.log(xmlString);
-    this.editorService.rasControl$.setValue(
-      parser.parseFromString(xmlString, "text/xml"),
-    ); // re-parse as XML
-    //console.log(this.editorService.rasControl$.value);
 
     // Oh, there's an audio file, okay, try to load it
     const audio = element.getAttribute("audio");
-
     if (audio !== null) {
       const reply = await fetch(audio);
       // Did that work? Great!
@@ -328,20 +354,11 @@ export class EditorComponent implements OnDestroy, OnInit, AfterViewInit {
         );
       }
     }
-    // Is read-along linked (including data URI) or embedded?
-    const href = element.getAttribute("href");
-    if (href === null) {
-      if (this.editorService.rasControl$.value) {
-        this.createSegments(this.editorService.rasControl$.value);
-      }
-    } else {
-      const reply = await fetch(href);
-      if (reply.ok) {
-        const text2 = await reply.text();
-        // FIXME: potential zip-bombing?
-        this.parseReadalong(text2);
-      }
+
+    if (this.editorService.rasControl$.value) {
+      this.createSegments(this.editorService.rasControl$.value);
     }
+
     return readalong.querySelector("body")?.innerHTML;
   }
 
diff --git a/packages/studio-web/src/app/ras.service.ts b/packages/studio-web/src/app/ras.service.ts
@@ -1,4 +1,4 @@
-import { catchError, Observable, of, take } from "rxjs";
+import { map, Observable } from "rxjs";
 
 import { HttpClient } from "@angular/common/http";
 import { Injectable } from "@angular/core";
@@ -72,7 +72,15 @@ export class RasService {
   }
 
   assembleReadalong$(body: ReadAlongRequest): Observable<ReadAlong> {
-    return this.http.post<ReadAlong>(this.baseURL + "/assemble", body);
+    return this.http.post<ReadAlong>(this.baseURL + "/assemble", body).pipe(
+      map((ras: ReadAlong) => {
+        if (!ras.processed_ras.startsWith("<?xml")) {
+          ras.processed_ras =
+            `<?xml version='1.0' encoding='utf-8'?>\n` + ras.processed_ras;
+        }
+        return ras;
+      }),
+    );
   }
   getLangs$(): Observable<Array<SupportedLanguage>> {
     return this.http.get<Array<SupportedLanguage>>(this.baseURL + "/langs");
diff --git a/packages/studio-web/src/app/shared/download/download.service.ts b/packages/studio-web/src/app/shared/download/download.service.ts
@@ -344,9 +344,9 @@ Please host all assets on your server, include the font and package imports defi
       // - add .readalong file
       await this.updateTranslations(rasXML, readalong);
 
-      const xmlString = this.xmlSerializer.serializeToString(
-        rasXML.documentElement,
-      );
+      const xmlString = this.xmlSerializer
+        .serializeToString(rasXML)
+        .replace("?><read", "?>\n<read");
       const rasFile = new Blob([xmlString], { type: "application/xml" });
       assetsFolder?.file(`${basename}.readalong`, rasFile);
       // - add index.html file
@@ -448,7 +448,7 @@ Use the text editor to paste the snippet below in your WordPress page:
         .convertRasFormat$(
           {
             dur: audio.duration,
-            ras: new XMLSerializer().serializeToString(rasXML.documentElement),
+            ras: new XMLSerializer().serializeToString(rasXML),
           },
           selectedOutputFormat,
         )

Original file line number	Diff line number	Diff line change
`@@ -60,7 +60,11 @@ export class B64Service {`
`60`	`60`	`}`
`61`	`61`
`62`	`62`	`xmlToB64(xml: Document) {`
`63`		`- return this.utf8_to_b64(new XMLSerializer().serializeToString(xml));`
	`63`	`+ return this.utf8_to_b64(`
	`64`	`+ new XMLSerializer()`
	`65`	`+ .serializeToString(xml)`
	`66`	`+ .replace("?><read", "?>\n<read"),`
	`67`	`+ );`
`64`	`68`	`}`
`65`	`69`
`66`	`70`	`blobToB64(blob: any) {`