fix(format/html): fix extra characters getting added in attribute quo…

…tes (#5128)

crates/biome_html_formatter/src/html/auxiliary/string.rs

@@ -8,8 +8,9 @@ impl FormatNodeRule<HtmlString> for FormatHtmlString {
         let HtmlStringFields { value_token } = node.as_fields();
 
         // Prettier always uses double quotes for HTML strings, regardless of configuration.
+        // Unless the string contains a double quote, in which case it uses single quotes.
         if let Ok(value) = value_token.as_ref() {
-            let value_text = value.text().trim();
+            let value_text = value.text_trimmed();
 
             if !(value_text.starts_with('"') && value_text.ends_with('"')) {
                 let contains_double_quote = value_text.contains('"');
@@ -18,9 +19,12 @@ impl FormatNodeRule<HtmlString> for FormatHtmlString {
                     && value_text.ends_with('\'')
                     && !contains_double_quote
                 {
-                    value.text_range().add_start(1.into()).sub_end(1.into())
+                    value
+                        .text_trimmed_range()
+                        .add_start(1.into())
+                        .sub_end(1.into())
                 } else {
-                    value.text_range()
+                    value.text_trimmed_range()
                 };
 
                 if !contains_double_quote {

crates/biome_html_formatter/tests/specs/html/attributes/single-quotes.html.snap

@@ -28,5 +28,5 @@ Indent script and style: false
 -----
 
 ```html
-<img src="foo.png'" alt='should keep "these" quotes' />
+<img src="foo.png" alt='should keep "these" quotes' />
 ```

crates/biome_html_formatter/tests/specs/prettier/html/attributes/attributes.html.snap

@@ -90,29 +90,6 @@ and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
 ```diff
 --- Prettier
 +++ Biome
-@@ -1,6 +1,6 @@
--<input name="address" maxlength="200" />
-+<input name="address " maxlength="200" />
-+<input name="address'" maxlength="200" />
- <input name="address" maxlength="200" />
--<input name="address" maxlength="200" />
- <div class="foo"></div>
- <div class="foo"></div>
- <div class="foo bar"></div>
-@@ -18,11 +18,11 @@
- <div attribute="">String</div>
- <div attribute="">String</div>
- <div attribute>String</div>
--<div attribute="">String</div>
- <div attribute="">String</div>
-+<div attribute="'">String</div>
- <div attribute>String</div>
- <div attribute="">String</div>
--<div attribute="">String</div>
-+<div attribute="' ">String</div>
- <div attribute="attribute = attribute"></div>
- <div ATTRIBUTE>String</div>
- <div ATTRIBUTE="">String</div>
 @@ -61,8 +61,14 @@
    data-index-number="12314"
    data-parent="cars"
@@ -138,8 +115,8 @@ and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
 # Output
 
 ```html
-<input name="address " maxlength="200" />
-<input name="address'" maxlength="200" />
+<input name="address" maxlength="200" />
+<input name="address" maxlength="200" />
 <input name="address" maxlength="200" />
 <div class="foo"></div>
 <div class="foo"></div>
@@ -159,10 +136,10 @@ and HTML5 Apps. It also documents Mozilla products, like Firefox OS."
 <div attribute="">String</div>
 <div attribute>String</div>
 <div attribute="">String</div>
-<div attribute="'">String</div>
+<div attribute="">String</div>
 <div attribute>String</div>
 <div attribute="">String</div>
-<div attribute="' ">String</div>
+<div attribute="">String</div>
 <div attribute="attribute = attribute"></div>
 <div ATTRIBUTE>String</div>
 <div ATTRIBUTE="">String</div>

crates/biome_html_formatter/tests/specs/prettier/html/whitespace/display-inline-block.html.snap

@@ -40,15 +40,6 @@ Click here! Click here! Click here! Click here! Click here! Click here!
  </div>
  <div>
    <button>
-@@ -20,6 +21,6 @@
-   </button>
- </div>
- <video src="brave.webm">
--  <track kind="subtitles" src="brave.en.vtt" srclang="en" label="English" />
--  <track kind="subtitles" src="brave.en.vtt" srclang="en" label="English" />
-+  <track kind="subtitles " src="brave.en.vtt " srclang="en " label="English" />
-+  <track kind="subtitles " src="brave.en.vtt " srclang="en " label="English" />
- </video>
 ```
 
 # Output
@@ -77,7 +68,7 @@ Click here! Click here! Click here! Click here! Click here! Click here!
   </button>
 </div>
 <video src="brave.webm">
-  <track kind="subtitles " src="brave.en.vtt " srclang="en " label="English" />
-  <track kind="subtitles " src="brave.en.vtt " srclang="en " label="English" />
+  <track kind="subtitles" src="brave.en.vtt" srclang="en" label="English" />
+  <track kind="subtitles" src="brave.en.vtt" srclang="en" label="English" />
 </video>
 ```