fix issue with url transforms

- the core problem was there was a check 'domNode instanceof Element',
  and now it clearly fails on things that are Element.  My guess is that
  some library upgrade (maybe react 19) caused this to not work.
- I removed the check, which may make it less efficient (?), but I put
  in a try catch just in case - which results in doing what it did
  before.
- This specifically happened with Scott's fluid mechanics book.

Author: williamstein

src/packages/frontend/components/html-ssr.tsx

@@ -26,7 +26,7 @@ import DefaultMath from "@cocalc/frontend/components/math/ssr";
 import { MathJaxConfig } from "@cocalc/util/mathjax-config";
 import { decodeHTML } from "entities";
 
-const URL_TAGS = ["src", "href", "data"];
+const URL_ATTRIBS = ["src", "href", "data"];
 
 const MATH_SKIP_TAGS = new Set<string>(MathJaxConfig.tex2jax.skipTags);
 
@@ -60,7 +60,7 @@ function getXSSOptions(urlTransform): IFilterXSSOptions | undefined {
       //         // important not to mangle this or it won't work.
       //         return value;
       //       }
-      if (urlTransform && URL_TAGS.includes(name)) {
+      if (urlTransform && URL_ATTRIBS.includes(name)) {
         // use the url transform
         return urlTransform(value, tag, name) ?? value;
       }
@@ -95,7 +95,6 @@ export default function HTML({
   }
   let options: any = {};
   options.replace = (domNode) => {
-    // console.log("domNode = ", domNode);
     if (!/^[a-zA-Z]+[0-9]?$/.test(domNode.name)) {
       // Without this, if user gives html input that is a malformed tag then all of React
       // completely crashes, which is not desirable for us.  On the other hand, I prefer not
@@ -116,78 +115,81 @@ export default function HTML({
       return <DefaultMath data={decodeHTML(data)} />;
     }
 
-    if (!(domNode instanceof Element)) return;
+    try {
+      const { name, children, attribs } = domNode;
 
-    const { name, children, attribs } = domNode;
-
-    if (name == "script") {
-      const type = domNode.attribs?.type?.toLowerCase();
-      if (type?.startsWith("math/tex")) {
-        const child = domNode.children?.[0];
-        if (child instanceof Text && child.data) {
-          let data = "$" + decodeHTML(child.data) + "$";
-          if (type.includes("display")) {
-            data = "$" + data + "$";
-          }
-          if (MathComponent != null) {
-            return <MathComponent data={data} />;
+      if (name == "script") {
+        const type = domNode.attribs?.type?.toLowerCase();
+        if (type?.startsWith("math/tex")) {
+          const child = domNode.children?.[0];
+          if (child instanceof Text && child.data) {
+            let data = "$" + decodeHTML(child.data) + "$";
+            if (type.includes("display")) {
+              data = "$" + data + "$";
+            }
+            if (MathComponent != null) {
+              return <MathComponent data={data} />;
+            }
+            return <DefaultMath data={data} />;
           }
-          return <DefaultMath data={data} />;
         }
       }
-    }
 
-    if (AnchorTagComponent != null && name == "a") {
-      return (
-        <AnchorTagComponent {...attribs}>
-          {domToReact(children as any, options)}
-        </AnchorTagComponent>
-      );
-    }
-    if (name == "iframe") {
-      // We sandbox and minimize what we allow.  Don't
-      // use {...attribs} due to srcDoc vs srcdoc.
-      // We don't allow setting the style, since that leads
-      // to a lot of attacks (i.e., making the iframe move in a
-      // sneaky way).  We have to allow-same-origin or scripts
-      // won't work at all, which is one of the main uses for
-      // iframes.  A good test is 3d graphics in Sage kernel
-      // Jupyter notebooks.
-      // TODO: Except this is a security issue, since
-      // combining allow-scripts & allow-same-origin makes it
-      // possible to remove a lot of sandboxing.
-      return (
-        <iframe
-          src={attribs.src}
-          srcDoc={attribs.srcdoc}
-          width={attribs.width}
-          height={attribs.height}
-          sandbox="allow-forms allow-scripts allow-same-origin"
-        />
-      );
-    }
+      if (AnchorTagComponent != null && name == "a") {
+        return (
+          <AnchorTagComponent {...attribs}>
+            {domToReact(children as any, options)}
+          </AnchorTagComponent>
+        );
+      }
+      if (name == "iframe") {
+        // We sandbox and minimize what we allow.  Don't
+        // use {...attribs} due to srcDoc vs srcdoc.
+        // We don't allow setting the style, since that leads
+        // to a lot of attacks (i.e., making the iframe move in a
+        // sneaky way).  We have to allow-same-origin or scripts
+        // won't work at all, which is one of the main uses for
+        // iframes.  A good test is 3d graphics in Sage kernel
+        // Jupyter notebooks.
+        // TODO: Except this is a security issue, since
+        // combining allow-scripts & allow-same-origin makes it
+        // possible to remove a lot of sandboxing.
+        return (
+          <iframe
+            src={attribs.src}
+            srcDoc={attribs.srcdoc}
+            width={attribs.width}
+            height={attribs.height}
+            sandbox="allow-forms allow-scripts allow-same-origin"
+          />
+        );
+      }
 
-    if (noSanitize && urlTransform != null && attribs != null) {
-      // since we did not sanitize the HTML (which also does urlTransform),
-      // we have to do the urlTransform here instead.
-      for (const tag of URL_TAGS) {
-        if (attribs[tag] != null) {
-          const x = urlTransform(attribs[tag]);
-          if (x != null) {
-            const props = attributesToProps(attribs);
-            props[tag] = x;
-            return React.createElement(
-              name,
-              props,
-              children && children?.length > 0
-                ? domToReact(children as any, options)
-                : undefined,
-            );
+      if (noSanitize && urlTransform != null && attribs != null) {
+        // since we did not sanitize the HTML (which also does urlTransform),
+        // we have to do the urlTransform here instead.
+        for (const attrib of URL_ATTRIBS) {
+          if (attribs[attrib] != null) {
+            const x = urlTransform(attribs[attrib]);
+            if (x != null) {
+              const props = attributesToProps(attribs);
+              props[attrib] = x;
+              return React.createElement(
+                name,
+                props,
+                children && children?.length > 0
+                  ? domToReact(children as any, options)
+                  : undefined,
+              );
+            }
           }
         }
       }
+    } catch (err) {
+      console.log("WARNING -- issue parsing HTML", err);
     }
   };
+
   if (inline) {
     return <span style={style}>{htmlReactParser(value, options)}</span>;
   } else {

src/packages/util/latex-envs.ts

@@ -9,7 +9,7 @@ export default function latexEnvs(value: string): string {
 }
 
 /*
-transformFigures -- dumb parser to turn this:
+transformFigures -- simple parser to turn this:
 
 ---
 
@@ -87,6 +87,7 @@ function transformFigures(content: string): string {
     }
 
     const md = `\n\n<div style="text-align:center;margin:20px auto;max-width:750px"><img src="${url}" style="${style}"/><br/><br/><b>Figure${figlabel}:</b> ${caption}</div>\n\n`;
+    //const md = `\n\n<img src="${url}" style="${style}"/>\n\n**Figure${figlabel}:** ${caption}\n\n`;
     content =
       content.slice(0, i) + md + content.slice(j + "\\end{figure}".length);
   }