Don't validate html comments (exercism#7861)

* Don't validate html comments

* Recognise svg selfclosing tags

* Add tests

Author: dem4ron

app/javascript/components/bootcamp/CSSExercisePage/LHS/ControlButtons.tsx

@@ -17,6 +17,7 @@ import { runHtmlChecks } from '../checks/runHtmlChecks'
 import { CheckResult } from '../checks/runChecks'
 import { runCssChecks } from '../checks/runCssChecks'
 import { validateHtml5 } from '../../common/validateHtml5/validateHtml5'
+import { normalizeHtmlText } from '../../common/validateHtml5/normalizeHtmlText'
 
 export function ControlButtons({
   getEditorValues,
@@ -54,7 +55,8 @@ export function ControlButtons({
     let firstFailingCheck: CheckResult | null = null
 
     if (htmlValue.length > 0) {
-      const isHTMLValid = validateHtml5(htmlValue)
+      const normalizedHtml = normalizeHtmlText(htmlValue)
+      const isHTMLValid = validateHtml5(normalizedHtml)
 
       if (!isHTMLValid.isValid) {
         toast.error(

app/javascript/components/bootcamp/FrontendExercisePage/LHS/LHS.tsx

@@ -11,12 +11,13 @@ import { useFrontendExercisePageStore } from '../store/frontendExercisePageStore
 import toast from 'react-hot-toast'
 import { wrapJSCode } from './wrapJSCode'
 import { validateHtml5 } from '../../common/validateHtml5/validateHtml5'
+import { normalizeHtmlText } from '../../common/validateHtml5/normalizeHtmlText'
 
 export type TabIndex = 'html' | 'css' | 'javascript'
 
 export const TabsContext = createContext<TabContext>({
   current: 'html',
-  switchToTab: () => { },
+  switchToTab: () => {},
 })
 
 export function LHS() {
@@ -59,7 +60,8 @@ export function LHS() {
     const htmlText = htmlEditorRef.current.state.doc.toString()
 
     if (htmlText.length > 0) {
-      const isHTMLValid = validateHtml5(htmlText)
+      const normalizedHtml = normalizeHtmlText(htmlText)
+      const isHTMLValid = validateHtml5(normalizedHtml)
 
       if (!isHTMLValid.isValid) {
         setTab('html')

app/javascript/components/bootcamp/common/validateHtml5/normalizeHtmlText.ts

@@ -0,0 +1,8 @@
+export function normalizeHtmlText(html: string) {
+  // remove comments
+  html = html.replace(/<!--[\s\S]*?-->/g, '')
+  // remove svg
+  html = html.replace(/<svg[\s\S]*?<\/svg>/g, '')
+
+  return html
+}

app/javascript/components/bootcamp/common/validateHtml5/rules/checkVoidTagClosure.ts

@@ -1,6 +1,6 @@
 export function checkVoidTagClosure(html: string): void {
   const voidRegex =
-    /<(area|base|br|col|embed|hr|img|input|link|meta|source|track|wbr)\b[^<>]*?(?!>)$/gim
+    /<(area|base|br|col|embed|hr|img|input|link|meta|source|track|wbr|circle|ellipse|line|path|polygon|polyline|rect|stop|use|image)\b[^<>]*?(?!>)$/gim
 
   const malformedVoidTag = html.match(voidRegex)
 

app/javascript/components/bootcamp/common/validateHtml5/voidElements.ts

@@ -1,5 +1,6 @@
 // list of elements that don't require a closing tag
 export const voidElements = new Set([
+  // HTML void elements
   'area',
   'base',
   'br',
@@ -13,6 +14,17 @@ export const voidElements = new Set([
   'source',
   'track',
   'wbr',
+  // svg
+  'circle',
+  'ellipse',
+  'line',
+  'path',
+  'polygon',
+  'polyline',
+  'rect',
+  'stop',
+  'use',
+  'image',
 ])
 
 export function isVoidElement(tagName: string): boolean {

test/javascript/utils/normalizeHtmlText.test.ts

@@ -0,0 +1,45 @@
+import { normalizeHtmlText } from '../../../app/javascript/components/bootcamp/common/validateHtml5/normalizeHtmlText'
+
+describe('normalizeHtmlText', () => {
+  it('removes HTML comments', () => {
+    expect(normalizeHtmlText('<p>Hello</p><!-- comment -->')).toBe(
+      '<p>Hello</p>'
+    )
+  })
+
+  it('removes multiple comments', () => {
+    expect(normalizeHtmlText('<!--A--><div>Content</div><!--B-->')).toBe(
+      '<div>Content</div>'
+    )
+  })
+
+  it('removes SVG block', () => {
+    expect(normalizeHtmlText('<div><svg><circle /></svg></div>')).toBe(
+      '<div></div>'
+    )
+  })
+
+  it('removes multiline SVG and comments', () => {
+    const cleaned = normalizeHtmlText(`
+      <div>
+        <!-- Comment -->
+        <svg>
+          <rect />
+        </svg>
+        Text
+      </div>
+    `)
+    expect(cleaned.replace(/\s+/g, ' ').trim()).toBe('<div> Text </div>')
+  })
+
+  it('removes multiple SVGs and comments', () => {
+    const result = normalizeHtmlText(`
+      <!-- top -->
+      <svg><circle /></svg>
+      <p>Hello</p>
+      <svg><rect /></svg>
+      <!-- bottom -->
+    `)
+    expect(result.replace(/\s+/g, ' ').trim()).toBe('<p>Hello</p>')
+  })
+})