Support format html event attributes (#17909)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: fisker <lionkay@gmail.com>

tests/format/html/attributes/__snapshots__/format.test.js.snap

@@ -537,6 +537,98 @@ printWidth: 80
 ================================================================================
 `;
 
+exports[`event-attributes.html format 1`] = `
+====================================options=====================================
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<button onclick="alert(    '1')">click me!</button>
+
+<div onclick="handleClick(  event  )" onmouseover="showTooltip( this )" onmouseout="hideTooltip(  )">Hover me</div>
+
+<img onerror='handleError(  this  )' onload="imageLoaded(  event  )" />
+
+<button onclick="(event) =>   {  console.log('clicked');  handleClick(  event  );  }">Modern JS</button>
+
+<div onclick="processData(  { id: 123, name: 'test'  },  [ 1,  2, 3 ]  )">Data</div>
+
+<button onclick="api.user.get(  123  ).then(  data =>   updateUI( data )  )">API Call</button>
+
+<input onfocus="highlightField(  this  )" onblur="validateField( this.value )" />
+<select onchange="filterResults(  this.value,  this.selectedIndex  )">
+  <option>Option 1</option>
+</select>
+
+<button onclick="
+   alert(1);           alert(2);
+ ">Click</button>
+
+<button onclick="
+    return false
+  ">Click</button>
+
+<button onclick="
+  console.log(arguments)
+  ">Click</button>
+
+<button onclick="
+  console.log(onclick)
+  ">Click</button>
+
+=====================================output=====================================
+<button onclick="alert('1')">click me!</button>
+
+<div
+  onclick="handleClick(event)"
+  onmouseover="showTooltip(this)"
+  onmouseout="hideTooltip()"
+>
+  Hover me
+</div>
+
+<img onerror="handleError(this)" onload="imageLoaded(event)" />
+
+<button
+  onclick="
+    (event) => {
+      console.log('clicked');
+      handleClick(event);
+    }
+  "
+>
+  Modern JS
+</button>
+
+<div onclick="processData({ id: 123, name: 'test' }, [1, 2, 3])">Data</div>
+
+<button onclick="api.user.get(123).then((data) => updateUI(data))">
+  API Call
+</button>
+
+<input onfocus="highlightField(this)" onblur="validateField(this.value)" />
+<select onchange="filterResults(this.value, this.selectedIndex)">
+  <option>Option 1</option>
+</select>
+
+<button
+  onclick="
+    alert(1);
+    alert(2);
+  "
+>
+  Click
+</button>
+
+<button onclick="return false;">Click</button>
+
+<button onclick="console.log(arguments)">Click</button>
+
+<button onclick="console.log(onclick)">Click</button>
+
+================================================================================
+`;
+
 exports[`single-quotes.html format 1`] = `
 ====================================options=====================================
 parsers: ["html"]

tests/format/html/attributes/event-attributes.html

@@ -0,0 +1,32 @@
+<button onclick="alert(    '1')">click me!</button>
+
+<div onclick="handleClick(  event  )" onmouseover="showTooltip( this )" onmouseout="hideTooltip(  )">Hover me</div>
+
+<img onerror='handleError(  this  )' onload="imageLoaded(  event  )" />
+
+<button onclick="(event) =>   {  console.log('clicked');  handleClick(  event  );  }">Modern JS</button>
+
+<div onclick="processData(  { id: 123, name: 'test'  },  [ 1,  2, 3 ]  )">Data</div>
+
+<button onclick="api.user.get(  123  ).then(  data =>   updateUI( data )  )">API Call</button>
+
+<input onfocus="highlightField(  this  )" onblur="validateField( this.value )" />
+<select onchange="filterResults(  this.value,  this.selectedIndex  )">
+  <option>Option 1</option>
+</select>
+
+<button onclick="
+   alert(1);           alert(2);
+ ">Click</button>
+
+<button onclick="
+    return false
+  ">Click</button>
+
+<button onclick="
+  console.log(arguments)
+  ">Click</button>
+
+<button onclick="
+  console.log(onclick)
+  ">Click</button>

tests/format/html/attributes/no-semi/__snapshots__/format.test.js.snap

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`event-attributes.html - {"semi":false} format 1`] = `
+====================================options=====================================
+parsers: ["html"]
+printWidth: 80
+semi: false
+                                                                                | printWidth
+=====================================input======================================
+<button
+  onclick="[foo, bar].forEach((fn) => void fn())"
+></button>
+<button
+  onclick="[foo, bar].forEach((fn) => void fn()); alert(1)"
+></button>
+
+=====================================output=====================================
+<button onclick="[foo, bar].forEach((fn) => void fn())"></button>
+<button
+  onclick="
+    ;[foo, bar].forEach((fn) => void fn())
+    alert(1)
+  "
+></button>
+
+================================================================================
+`;

tests/format/html/attributes/no-semi/event-attributes.html

@@ -0,0 +1,6 @@
+<button
+  onclick="[foo, bar].forEach((fn) => void fn())"
+></button>
+<button
+  onclick="[foo, bar].forEach((fn) => void fn()); alert(1)"
+></button>

tests/format/html/attributes/no-semi/format.test.js

@@ -0,0 +1 @@
+runFormatTest(import.meta, ["html"], { semi: false });

tests/format/html/tags/__snapshots__/format.test.js.snap

@@ -656,21 +656,27 @@ printWidth: 1
 <menu>
   <li>
     <button
-      onclick="copy()"
+      onclick="
+        copy()
+      "
     >
       Copy
     </button>
   </li>
   <li>
     <button
-      onclick="cut()"
+      onclick="
+        cut()
+      "
     >
       Cut
     </button>
   </li>
   <li>
     <button
-      onclick="paste()"
+      onclick="
+        paste()
+      "
     >
       Paste
     </button>