Fix formatting of prettier-ignored unclosed elements (#15748)

changelog_unreleased/html/15748.md

@@ -0,0 +1,18 @@
+#### Fix formatting of prettier-ignored unclosed elements (#15748 by @fisker)
+
+<!-- prettier-ignore -->
+```html
+<!-- Input -->
+<!-- prettier-ignore -->
+<h1>
+Hello <span>world!
+
+<!-- Prettier stable -->
+<!-- prettier-ignore -->
+<h1>
+
+<!-- Prettier main -->
+<!-- prettier-ignore -->
+<h1>
+Hello <span>world!
+```

src/language-html/print/children.js

@@ -7,6 +7,8 @@ import {
   hardline,
 } from "../../document/builders.js";
 import { replaceEndOfLine } from "../../document/utils.js";
+import isNonEmptyArray from "../../utils/is-non-empty-array.js";
+import htmlWhitespaceUtils from "../../utils/html-whitespace-utils.js";
 import { locStart, locEnd } from "../loc.js";
 import {
   forceBreakChildren,
@@ -25,22 +27,41 @@ import {
   needsToBorrowParentClosingTagStartMarker,
 } from "./tag.js";
 
+function getEndLocation(node) {
+  const endLocation = locEnd(node);
+
+  // Element can be unclosed
+  if (
+    node.type === "element" &&
+    !node.endSourceSpan &&
+    isNonEmptyArray(node.children)
+  ) {
+    return Math.max(endLocation, getEndLocation(node.children.at(-1)));
+  }
+
+  return endLocation;
+}
+
 function printChild(childPath, options, print) {
   const child = childPath.node;
 
   if (hasPrettierIgnore(child)) {
+    const endLocation = getEndLocation(child);
+
     return [
       printOpeningTagPrefix(child, options),
       replaceEndOfLine(
-        options.originalText.slice(
-          locStart(child) +
-            (child.prev && needsToBorrowNextOpeningTagStartMarker(child.prev)
-              ? printOpeningTagStartMarker(child).length
-              : 0),
-          locEnd(child) -
-            (child.next && needsToBorrowPrevClosingTagEndMarker(child.next)
-              ? printClosingTagEndMarker(child, options).length
-              : 0),
+        htmlWhitespaceUtils.trimEnd(
+          options.originalText.slice(
+            locStart(child) +
+              (child.prev && needsToBorrowNextOpeningTagStartMarker(child.prev)
+                ? printOpeningTagStartMarker(child).length
+                : 0),
+            endLocation -
+              (child.next && needsToBorrowPrevClosingTagEndMarker(child.next)
+                ? printClosingTagEndMarker(child, options).length
+                : 0),
+          ),
         ),
       ),
       printClosingTagSuffix(child, options),

tests/format/html/prettier_ignore/__snapshots__/jsfmt.spec.js.snap

@@ -117,6 +117,60 @@ printWidth: 80
 ================================================================================
 `;
 
+exports[`issue-15738.html format 1`] = `
+====================================options=====================================
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<head></head>
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css"
+/>
+<style>marked-md:not(:defined) { display: none }</style>
+<script type="module" src="../auto.js"></script>
+<!-- prettier-ignore -->
+<marked-md display="block"><plaintext>
+# Hello world!
+
+\`\`\`html
+<p>Look at these <span id="html">HTML tags</span></p>
+<div class="box">They aren't being <code>interpreted</code> as actual HTML</div>
+\`\`\`
+
+But this HTML is <mark>actually parsed</mark> just like **normal**.
+
+> <em>Markdown</em> lets you include <strong>arbitrary</strong> <abbr>HTML</abbr> in it.
+
+=====================================output=====================================
+<head></head>
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css"
+/>
+<style>
+  marked-md:not(:defined) {
+    display: none;
+  }
+</style>
+<script type="module" src="../auto.js"></script>
+<!-- prettier-ignore -->
+<marked-md display="block"><plaintext>
+# Hello world!
+
+\`\`\`html
+<p>Look at these <span id="html">HTML tags</span></p>
+<div class="box">They aren't being <code>interpreted</code> as actual HTML</div>
+\`\`\`
+
+But this HTML is <mark>actually parsed</mark> just like **normal**.
+
+> <em>Markdown</em> lets you include <strong>arbitrary</strong> <abbr>HTML</abbr> in it.
+
+================================================================================
+`;
+
 exports[`long_lines.html format 1`] = `
 ====================================options=====================================
 parsers: ["html"]
@@ -160,3 +214,44 @@ A super long string that has been marked as ignore because it was probably gener
 
 ================================================================================
 `;
+
+exports[`unclosed.html format 1`] = `
+====================================options=====================================
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<!-- prettier-ignore -->
+<div>
+# Hello world!
+<span>
+
+=====================================output=====================================
+<!-- prettier-ignore -->
+<div>
+# Hello world!
+<span>
+
+================================================================================
+`;
+
+exports[`unclosed2.html format 1`] = `
+====================================options=====================================
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<!-- prettier-ignore -->
+<p>
+# Hello world!
+<div>
+
+=====================================output=====================================
+<!-- prettier-ignore -->
+<p>
+# Hello world!
+
+<div></div>
+
+================================================================================
+`;

tests/format/html/prettier_ignore/issue-15738.html

@@ -0,0 +1,19 @@
+<head></head>
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css"
+/>
+<style>marked-md:not(:defined) { display: none }</style>
+<script type="module" src="../auto.js"></script>
+<!-- prettier-ignore -->
+<marked-md display="block"><plaintext>
+# Hello world!
+
+```html
+<p>Look at these <span id="html">HTML tags</span></p>
+<div class="box">They aren't being <code>interpreted</code> as actual HTML</div>
+```
+
+But this HTML is <mark>actually parsed</mark> just like **normal**.
+
+> <em>Markdown</em> lets you include <strong>arbitrary</strong> <abbr>HTML</abbr> in it.

tests/format/html/prettier_ignore/unclosed.html

@@ -0,0 +1,4 @@
+<!-- prettier-ignore -->
+<div>
+# Hello world!
+<span>

tests/format/html/prettier_ignore/unclosed2.html

@@ -0,0 +1,4 @@
+<!-- prettier-ignore -->
+<p>
+# Hello world!
+<div>