Validate HTML code (exercism#7849)

dem4ron · web-flow · commit 55ade4d3057c · 2025-05-21T14:45:14.000+01:00
* Add linter error for unclosed html tags * Validate html * Only check htmlstrings with length * Add custom html5 validator (exercism#7856) * Add a shameless version * Check for voidtag closure * Simplify and test checkNesting * Remove useless walkDom, add voidtag tests * Check for opening tag termination * Correct import * Add check for non-void selfclosing * Add tests for checkNonVoidSelfClose * Use one styling for all lint messages * Remove parse5
diff --git a/app/javascript/components/bootcamp/CSSExercisePage/LHS/ControlButtons.tsx b/app/javascript/components/bootcamp/CSSExercisePage/LHS/ControlButtons.tsx
@@ -13,6 +13,8 @@ import { readOnlyRangesStateField } from '../../JikiscriptExercisePage/CodeMirro
 import { runHtmlChecks } from '../checks/runHtmlChecks'
 import { CheckResult } from '../checks/runChecks'
 import { runCssChecks } from '../checks/runCssChecks'
+import toast from 'react-hot-toast'
+import { validateHtml5 } from '../../common/validateHtml5/validateHtml5'
 
 export function ControlButtons({
   getEditorValues,
@@ -49,6 +51,17 @@ export function ControlButtons({
     let status: 'pass' | 'fail' = 'fail'
     let firstFailingCheck: CheckResult | null = null
 
+    if (htmlValue.length > 0) {
+      const isHTMLValid = validateHtml5(htmlValue)
+
+      if (!isHTMLValid.isValid) {
+        toast.error(
+          `Your HTML is invalid (${isHTMLValid.errorMessage}). Please check the linter and look for hints on how to fix it.`
+        )
+        return
+      }
+    }
+
     const htmlChecks = await runHtmlChecks(exercise.htmlChecks, htmlValue)
     const cssChecks = await runCssChecks(exercise.cssChecks, cssValue)
 
diff --git a/app/javascript/components/bootcamp/CSSExercisePage/LHS/HTMLEditor.tsx b/app/javascript/components/bootcamp/CSSExercisePage/LHS/HTMLEditor.tsx
@@ -1,7 +1,10 @@
 import React, { useContext, useMemo } from 'react'
 import { html } from '@codemirror/lang-html'
 import { CSSExercisePageContext } from '../CSSExercisePageContext'
-import { htmlLinter } from '../SimpleCodeMirror/extensions/htmlLinter'
+import {
+  htmlLinter,
+  lintTooltipTheme,
+} from '../SimpleCodeMirror/extensions/htmlLinter'
 import { SimpleCodeMirror } from '../SimpleCodeMirror/SimpleCodeMirror'
 import { useCSSExercisePageStore } from '../store/cssExercisePageStore'
 import { EditorView } from 'codemirror'
@@ -85,6 +88,7 @@ export function HTMLEditor({ defaultCode }: { defaultCode: string }) {
           autoCloseTags: false,
         }),
         htmlTheme,
+        lintTooltipTheme,
         htmlLinter,
         readOnlyRangeDecoration(),
         initReadOnlyRangesExtension(),
diff --git a/app/javascript/components/bootcamp/CSSExercisePage/SimpleCodeMirror/extensions/htmlLinter.ts b/app/javascript/components/bootcamp/CSSExercisePage/SimpleCodeMirror/extensions/htmlLinter.ts
@@ -1,10 +1,17 @@
 import { HTMLHint } from 'htmlhint'
 import { linter as cmLinter, Diagnostic } from '@codemirror/lint'
+import { EditorView } from 'codemirror'
 
 export const htmlLinter = cmLinter((view) => {
   const code = view.state.doc.toString()
   const messages = HTMLHint.verify(code, {
     'tag-pair': true,
+    'attr-no-duplication': true,
+    'attr-unsafe-chars': true,
+    'tagname-lowercase': true,
+    'attr-lowercase': true,
+    'id-unique': true,
+    'spec-char-escape': true,
   })
 
   const diagnostics: Diagnostic[] = messages.map((msg) => ({
@@ -17,3 +24,29 @@ export const htmlLinter = cmLinter((view) => {
 
   return diagnostics
 })
+
+export const lintTooltipTheme = EditorView.theme({
+  '.cm-tooltip-hover.cm-tooltip.cm-tooltip-below': {
+    borderRadius: '8px',
+  },
+
+  '.cm-tooltip .cm-tooltip-lint': {
+    backgroundColor: 'var(--backgroundColorF)',
+    borderRadius: '8px',
+    color: 'var(--textColor6)',
+    border: '1px solid var(--borderColor6)',
+    padding: '4px 8px',
+    fontSize: '14px',
+    fontFamily: 'poppins',
+  },
+  'span.cm-diagnosticText': {
+    display: 'block',
+    marginBottom: '8px',
+  },
+  '.cm-diagnostic.cm-diagnostic-error': {
+    borderColor: '#EB5757',
+  },
+  '.cm-diagnostic.cm-diagnostic-warning': {
+    borderColor: '#F69605',
+  },
+})
diff --git a/app/javascript/components/bootcamp/FrontendExercisePage/LHS/LHS.tsx b/app/javascript/components/bootcamp/FrontendExercisePage/LHS/LHS.tsx
@@ -9,14 +9,14 @@ import { cleanUpEditorErrorState, showJsError } from './showJsError'
 import { useHandleJsErrorMessage } from './useHandleJsErrorMessage'
 import { useFrontendExercisePageStore } from '../store/frontendExercisePageStore'
 import toast from 'react-hot-toast'
-import { validateHtml } from './validateHtml'
 import { wrapJSCode } from './wrapJSCode'
+import { validateHtml5 } from '../../common/validateHtml5/validateHtml5'
 
 export type TabIndex = 'html' | 'css' | 'javascript'
 
 export const TabsContext = createContext<TabContext>({
   current: 'html',
-  switchToTab: () => {},
+  switchToTab: () => { },
 })
 
 export function LHS() {
@@ -59,12 +59,12 @@ export function LHS() {
     const htmlText = htmlEditorRef.current.state.doc.toString()
 
     if (htmlText.length > 0) {
-      const isHTMLValid = validateHtml(htmlText)
+      const isHTMLValid = validateHtml5(htmlText)
 
       if (!isHTMLValid.isValid) {
         setTab('html')
         toast.error(
-          `Your HTML is invalid. Please check the linter and look for unclosed tags.`
+          `Your HTML is invalid (${isHTMLValid.errorMessage}). Please check the linter and look for hints on how to fix it.`
         )
         return
       }
diff --git a/app/javascript/components/bootcamp/FrontendExercisePage/LHS/Panels/HTMLPanel/HTMLEditor.tsx b/app/javascript/components/bootcamp/FrontendExercisePage/LHS/Panels/HTMLPanel/HTMLEditor.tsx
@@ -11,7 +11,10 @@ import {
   initReadOnlyRangesExtension,
 } from '@/components/bootcamp/JikiscriptExercisePage/CodeMirror/extensions'
 import { moveCursorByPasteLength } from '@/components/bootcamp/JikiscriptExercisePage/CodeMirror/extensions/move-cursor-by-paste-length'
-import { htmlLinter } from '@/components/bootcamp/CSSExercisePage/SimpleCodeMirror/extensions/htmlLinter'
+import {
+  htmlLinter,
+  lintTooltipTheme,
+} from '@/components/bootcamp/CSSExercisePage/SimpleCodeMirror/extensions/htmlLinter'
 import { htmlTheme } from '@/components/bootcamp/CSSExercisePage/LHS/htmlTheme'
 import { EditorView } from 'codemirror'
 
@@ -72,29 +75,3 @@ export function HTMLEditor() {
     />
   )
 }
-
-export const lintTooltipTheme = EditorView.theme({
-  '.cm-tooltip-hover.cm-tooltip.cm-tooltip-below': {
-    borderRadius: '8px',
-  },
-
-  '.cm-tooltip .cm-tooltip-lint': {
-    backgroundColor: 'var(--backgroundColorF)',
-    borderRadius: '8px',
-    color: 'var(--textColor6)',
-    border: '1px solid var(--borderColor6)',
-    padding: '4px 8px',
-    fontSize: '14px',
-    fontFamily: 'poppins',
-  },
-  'span.cm-diagnosticText': {
-    display: 'block',
-    marginBottom: '8px',
-  },
-  '.cm-diagnostic.cm-diagnostic-error': {
-    borderColor: '#EB5757',
-  },
-  '.cm-diagnostic.cm-diagnostic-warning': {
-    borderColor: '#F69605',
-  },
-})
diff --git a/app/javascript/components/bootcamp/FrontendExercisePage/LHS/validateHtml.tsx b/app/javascript/components/bootcamp/FrontendExercisePage/LHS/validateHtml.tsx
diff --git a/app/javascript/components/bootcamp/common/validateHtml5/rules/checkNesting.ts b/app/javascript/components/bootcamp/common/validateHtml5/rules/checkNesting.ts
@@ -0,0 +1,32 @@
+import { isVoidElement } from '../voidElements'
+
+export function checkNesting(html: string): void {
+  const tagRegex = /<\/?([a-zA-Z][a-zA-Z0-9-]*)\b[^>]*?>/g
+  const tagStack: string[] = []
+
+  let match
+  while ((match = tagRegex.exec(html)) !== null) {
+    const fullMatch = match[0]
+    const tagName = match[1]
+
+    const isClosing = fullMatch.startsWith('</')
+
+    if (isClosing) {
+      const lastOpen = tagStack.pop()
+      if (!lastOpen) {
+        throw new Error(`Extra closing tag: </${tagName}>`)
+      }
+      if (lastOpen !== tagName) {
+        throw new Error(
+          `Mismatched tags: <${lastOpen}> closed by </${tagName}>`
+        )
+      }
+    } else if (!isVoidElement(tagName)) {
+      tagStack.push(tagName)
+    }
+  }
+
+  if (tagStack.length > 0) {
+    throw new Error(`Unclosed tag(s): ${tagStack.join(', ')}`)
+  }
+}
diff --git a/app/javascript/components/bootcamp/common/validateHtml5/rules/checkNonVoidSelfClose.ts b/app/javascript/components/bootcamp/common/validateHtml5/rules/checkNonVoidSelfClose.ts
@@ -0,0 +1,14 @@
+import { isVoidElement } from '../voidElements'
+
+export function checkNonVoidSelfClose(html: string): void {
+  const selfClosingRegex = /<([a-zA-Z][a-zA-Z0-9-]*)\b[^<>]*?\/>/g
+
+  let match
+  while ((match = selfClosingRegex.exec(html)) !== null) {
+    const tagName = match[1]
+
+    if (!isVoidElement(tagName)) {
+      throw new Error(`Non-void element <${tagName}/> cannot be self-closed.`)
+    }
+  }
+}
diff --git a/app/javascript/components/bootcamp/common/validateHtml5/rules/checkOpeningTagTermination.ts b/app/javascript/components/bootcamp/common/validateHtml5/rules/checkOpeningTagTermination.ts
@@ -0,0 +1,24 @@
+export function checkOpeningTagTermination(html: string): void {
+  const tagOpenRegex = /<([a-zA-Z][a-zA-Z0-9-]*)\b[^<>]*$/gm
+
+  let match
+  while ((match = tagOpenRegex.exec(html)) !== null) {
+    const tagStart = match.index
+    const nextGt = html.indexOf('>', tagStart)
+    const nextLt = html.indexOf('<', tagStart + 1)
+
+    // if there is no closing > or another < comes before it, it's unclosed
+    if (nextGt === -1 || (nextLt !== -1 && nextLt < nextGt)) {
+      const partial = html.slice(tagStart, nextLt !== -1 ? nextLt : undefined)
+      throw new Error(`Unterminated opening tag: ${partial.trim()}`)
+    }
+  }
+
+  // if the last < is after the last >, it's an unclosed tag
+  const lastOpen = html.lastIndexOf('<')
+  const lastClose = html.lastIndexOf('>')
+  if (lastOpen > lastClose) {
+    const partial = html.slice(lastOpen).trim()
+    throw new Error(`Unclosed tag at end of document: ${partial}`)
+  }
+}
diff --git a/app/javascript/components/bootcamp/common/validateHtml5/rules/checkVoidTagClosure.ts b/app/javascript/components/bootcamp/common/validateHtml5/rules/checkVoidTagClosure.ts
@@ -0,0 +1,10 @@
+export function checkVoidTagClosure(html: string): void {
+  const voidRegex =
+    /<(area|base|br|col|embed|hr|img|input|link|meta|source|track|wbr)\b[^<>]*?(?!>)$/gim
+
+  const malformedVoidTag = html.match(voidRegex)
+
+  if (malformedVoidTag) {
+    throw new Error(`Unclosed void tag: ${malformedVoidTag[0]}`)
+  }
+}
diff --git a/app/javascript/components/bootcamp/common/validateHtml5/validateHtml5.ts b/app/javascript/components/bootcamp/common/validateHtml5/validateHtml5.ts
@@ -0,0 +1,68 @@
+import { checkNesting } from './rules/checkNesting'
+import { checkNonVoidSelfClose } from './rules/checkNonVoidSelfClose'
+import { checkOpeningTagTermination } from './rules/checkOpeningTagTermination'
+import { checkVoidTagClosure } from './rules/checkVoidTagClosure'
+
+export function validateHtml5(html: string): {
+  isValid: boolean
+  errorMessage?: string
+} {
+  try {
+    if (html.includes('<') && !html.includes('>')) {
+      return {
+        isValid: false,
+        errorMessage: 'Unclosed angle bracket',
+      }
+    }
+
+    if (html.match(/<[^>]*$/)) {
+      return {
+        isValid: false,
+        errorMessage: 'Unclosed tag at end of document',
+      }
+    }
+
+    try {
+      checkNonVoidSelfClose(html)
+    } catch (err) {
+      return {
+        isValid: false,
+        errorMessage: (err as Error).message,
+      }
+    }
+
+    try {
+      checkVoidTagClosure(html)
+    } catch (err) {
+      return {
+        isValid: false,
+        errorMessage: (err as Error).message,
+      }
+    }
+
+    try {
+      checkOpeningTagTermination(html)
+    } catch (err) {
+      return {
+        isValid: false,
+        errorMessage: (err as Error).message,
+      }
+    }
+
+    try {
+      checkNesting(html)
+    } catch (err) {
+      return {
+        isValid: false,
+        errorMessage: (err as Error).message,
+      }
+    }
+
+    return { isValid: true }
+  } catch (err) {
+    return {
+      isValid: false,
+      errorMessage: (err as Error).message || 'Unknown error',
+    }
+  }
+}
diff --git a/app/javascript/components/bootcamp/common/validateHtml5/voidElements.ts b/app/javascript/components/bootcamp/common/validateHtml5/voidElements.ts
@@ -0,0 +1,20 @@
+// list of elements that don't require a closing tag
+export const voidElements = new Set([
+  'area',
+  'base',
+  'br',
+  'col',
+  'embed',
+  'hr',
+  'img',
+  'input',
+  'link',
+  'meta',
+  'source',
+  'track',
+  'wbr',
+])
+
+export function isVoidElement(tagName: string): boolean {
+  return voidElements.has(tagName.toLowerCase())
+}
diff --git a/test/javascript/utils/validateHtml5/checkNesting.test.ts b/test/javascript/utils/validateHtml5/checkNesting.test.ts
diff --git a/test/javascript/utils/validateHtml5/checkNonVoidSelfClose.test.ts b/test/javascript/utils/validateHtml5/checkNonVoidSelfClose.test.ts
diff --git a/test/javascript/utils/validateHtml5/checkOpeningTagTermination.test.ts b/test/javascript/utils/validateHtml5/checkOpeningTagTermination.test.ts
diff --git a/test/javascript/utils/validateHtml5/checkVoidTagClosure.test.ts b/test/javascript/utils/validateHtml5/checkVoidTagClosure.test.ts
