fix: ignore HTML comments (#283)

Author: bahmutov

cypress/e2e/comments.md

@@ -0,0 +1,37 @@
+# Comments
+
+<!-- fiddle The selector should be escaped -->
+
+<!-- prettier-ignore-start -->
+
+```html hide
+<div data-cy="info" style="display:none;">
+  <span data-user-id="user:1"></span>
+</div>
+<div id="users">
+  <div id="user-1">John Doe</div>
+</div>
+  <div id="students">
+    <div id="user-2">Mary Sue</div>
+  </div>
+```
+
+<!-- prettier-ignore-end -->
+
+```js
+cy.wrap(42).should('equal', 42)
+```
+
+Check the HTML elements
+
+```js
+cy.get('[data-user-id="user:1"]').should('have.text', '')
+cy.get('#user-2').should('have.text', 'Mary Sue')
+```
+
+<!--
+  multi-line comment
+  goes here
+-->
+
+<!-- fiddle-end -->

src/markdown-utils.js

@@ -39,6 +39,19 @@ const extractFiddleMarkup = (s) => {
   return s
 }
 
+const isMoreThanAComment = (s) => {
+  if (!s) {
+    return false
+  }
+
+  const trimmed = s.trim()
+  return !(
+    trimmed.startsWith('<!--') &&
+    trimmed.endsWith('-->') &&
+    trimmed.length > 9
+  )
+}
+
 /**
  * Checks if the given line starts with "<!-- fiddle" or one of its variations.
  */
@@ -285,14 +298,19 @@ function extractFiddles(md) {
           hide: meta.includes('hide'),
         }
       })
+    // console.log('html maybe')
     // console.log(htmlMaybe)
 
     const htmlLiveBlockMaybe = ast.children.find(
       (s) =>
+        isMoreThanAComment(s.value) &&
         isLiveHtml(s) &&
         !isFiddleMarkup(s.value) &&
         shouldIncludeBlock(s),
     )
+    // console.log('html live block')
+    // console.log(htmlLiveBlockMaybe)
+
     const htmlMarkup = ast.children.find((s) =>
       isFiddleMarkup(s.value),
     )