docs(markdown-to-html): use regex to match new API (#19417)

* fix(markdown-to-html): use regex to match new API

* fix test to reflect change

Co-authored-by: Annie Wang <annieyw@google.com>

Author: annieyw

tools/markdown-to-html/docs-marked-renderer.spec.ts

@@ -49,11 +49,9 @@ describe('DocsMarkdownRenderer', () => {
          {
           "example": "exampleName",
           "file": "example-html.html",
-          "region": "some-region",
+          "region": "some-region"
          }
         ) -->`);
-
-    // TODO(annieyw): I think DocsMarkedRenderer#html needs to be fixed for the new API?
     expectEqualIgnoreLeadingWhitespace(result, `<div material-docs-example="
          {
           "example": "exampleName",

tools/markdown-to-html/docs-marked-renderer.ts

@@ -64,7 +64,7 @@ export class DocsMarkdownRenderer extends Renderer {
    *   {
    *    "example": "exampleName",
    *    "file": "example-html.html",
-   *    "region": "some-region",
+   *    "region": "some-region"
    *   }
    *  ) -->`
    *  turns into
@@ -78,20 +78,21 @@ export class DocsMarkdownRenderer extends Renderer {
    *  `<div material-docs-example="name"></div>`
    */
   html(html: string) {
-        html = html.replace(exampleCommentRegex, (_match: string, content: string) => {
-              if (content.startsWith('{')) {
-                  const {example, file, region} = JSON.parse(content);
-                  return `<div material-docs-example="${example}"
-                               file="${file}"
-                               region="${region}"></div>`;
-              } else {
-                  return `<div material-docs-example="${content}"></div>`;
-              }
-          }
-        );
-
-        return super.html(html);
-    }
+    html = html.replace(exampleCommentRegex, (_match: string, content: string) => {
+        // using [\s\S]* because .* does not match line breaks
+        if (content.match(/\{[\s\S]*\}/g)) {
+          const {example, file, region} = JSON.parse(content);
+          return `<div material-docs-example="${example}"
+                             file="${file}"
+                             region="${region}"></div>`;
+        } else {
+          return `<div material-docs-example="${content}"></div>`;
+        }
+      }
+    );
+
+    return super.html(html);
+  }
 
   /**
    * Method that will be called after a markdown file has been transformed to HTML. This method