`TextElement.toString()` puts the element text back at the first `><` of the start tag, so an attribute value containing `><` swallows the text of `<style>`, `<script>`, `<title>` and `<textarea>`

// Minimal reproduction 2 of 2: TextElement.toString() re-inserts the element text at the
// FIRST "><" of the serialized start tag, which can be inside an attribute value.
//
//   npm install [email protected] && node repro-text-element-first-match.mjs
//
// Exit code 1 = the defect reproduces; 0 = the element text stays between its tags.
//
// Cause (esm/html/text-element.js): the text is put back with
//   toString.call(this.cloneNode()).replace('><', () => `>${this.textContent}<`)
// String.prototype.replace with a string pattern replaces only the first match. The clone has
// no children, so the only "><" that is guaranteed to be the end of the start tag is the one
// before the closing tag; any "><" inside an attribute value comes first.
// HTMLStyleElement, HTMLScriptElement, HTMLTitleElement and HTMLTextAreaElement all extend
// TextElement.
import { createRequire } from 'node:module';
import { parseHTML } from 'linkedom';

const { version } = createRequire(import.meta.url)('linkedom/package.json');
console.log(`linkedom ${version}`);

const SHELL = '<!doctype html><html><head></head><body></body></html>';
const TEXT = '.caption{color:red}';
const ATTRIBUTE_VALUE = 'a><b.css';

let failed = 0;
for (const tag of ['style', 'script', 'title', 'textarea']) {
  const { document } = parseHTML(SHELL);
  const el = document.createElement(tag);
  el.setAttribute('data-src', ATTRIBUTE_VALUE);
  el.textContent = TEXT;

  const html = el.outerHTML;
  const reparsed = parseHTML(`<!doctype html><html><body>${html}</body></html>`);
  const back = reparsed.document.querySelector(tag);
  const textBack = back?.textContent;
  const attributeBack = back?.getAttribute('data-src');

  const ok = textBack === TEXT && attributeBack === ATTRIBUTE_VALUE;
  if (!ok) failed += 1;
  console.log(
    `${ok ? 'ok  ' : 'FAIL'} <${tag} data-src=${JSON.stringify(ATTRIBUTE_VALUE)}> with text ${JSON.stringify(TEXT)}\n` +
      `       outerHTML:        ${html}\n` +
      `       text after parse: ${JSON.stringify(textBack)}   (expected ${JSON.stringify(TEXT)})\n` +
      `       attr after parse: ${JSON.stringify(attributeBack)}   (expected ${JSON.stringify(ATTRIBUTE_VALUE)})`,
  );
}

console.log(failed === 0 ? 'RESULT: element text stays inside the element' : `RESULT: ${failed} of 4 elements corrupted, defect reproduces`);
process.exit(failed === 0 ? 0 : 1);

// Verifies the two patches proposed in the two reports (Attr.toString and TextElement.toString).
// It patches linkedom in-process only, to show that each proposal removes the failure
// reproduced by repro-attr-html-escape.mjs and repro-text-element-first-match.mjs.
//
//   npm install [email protected] && node verify-suggested-fixes.mjs
import { createRequire } from 'node:module';
import { parseHTML } from 'linkedom';

const { version } = createRequire(import.meta.url)('linkedom/package.json');
console.log(`linkedom ${version}`);

const { document } = parseHTML('<!doctype html><html><head></head><body></body></html>');
const HTMLStyleElementProto = Object.getPrototypeOf(document.createElement('style'));
const TextElementProto = Object.getPrototypeOf(HTMLStyleElementProto); // esm/html/text-element.js
const HTMLElementProto = Object.getPrototypeOf(TextElementProto);
const AttrProto = Object.getPrototypeOf(document.createAttribute('x')); // esm/interface/attr.js

// Proposal 2: put the text back at the LAST "><" of the childless clone's serialization, which
// is always the boundary between the start tag and the end tag.
const elementToString = HTMLElementProto.toString;
TextElementProto.toString = function toString() {
  const outerHTML = elementToString.call(this.cloneNode());
  const at = outerHTML.lastIndexOf('><');
  return `${outerHTML.slice(0, at + 1)}${this.textContent}${outerHTML.slice(at + 1)}`;
};

// Proposal 1: escape `&` and U+00A0 (and keep `"`) in HTML-document attribute values.
// Empty values keep linkedom's own boolean-attribute shorthand.
const attrToString = AttrProto.toString;
AttrProto.toString = function toString() {
  const { value } = this;
  if (!value) return attrToString.call(this);
  const escaped = value.replace(/&/g, '&amp;').replace(/\u00a0/g, '&nbsp;').replace(/"/g, '&quot;');
  return `${this.name}="${escaped}"`;
};

let failed = 0;
const check = (label, ok) => {
  if (!ok) failed += 1;
  console.log(`${ok ? 'ok  ' : 'FAIL'} ${label}`);
};

for (const value of ['A &amp; B', '&#0 ', 'a & b', 'a b']) {
  const doc = parseHTML('<!doctype html><html><body><div id="t"></div></body></html>').document;
  const el = doc.getElementById('t');
  el.setAttribute('data-x', value);
  const back = parseHTML(`<!doctype html><html><body>${el.outerHTML}</body></html>`).document
    .getElementById('t')
    .getAttribute('data-x');
  check(`attribute value ${JSON.stringify(value)} survives serialize + parse`, back === value);
}

for (const tag of ['style', 'script', 'title', 'textarea']) {
  const doc = parseHTML('<!doctype html><html><head></head><body></body></html>').document;
  const el = doc.createElement(tag);
  el.setAttribute('data-src', 'a><b.css');
  el.textContent = '.caption{color:red}';
  const back = parseHTML(`<!doctype html><html><body>${el.outerHTML}</body></html>`).document.querySelector(tag);
  check(
    `<${tag}> keeps its text and its attribute value`,
    back.textContent === '.caption{color:red}' && back.getAttribute('data-src') === 'a><b.css',
  );
}

// Elements without attributes, with `$` patterns in the text, and with empty text still serialize as before.
const plain = parseHTML('<!doctype html><html><head></head><body></body></html>').document.createElement('style');
plain.textContent = "a{content:'$&'}";
check('childless attribute-free <style> serializes as <style>text</style>', plain.outerHTML === "<style>a{content:'$&'}</style>");
const empty = parseHTML('<!doctype html><html><head></head><body></body></html>').document.createElement('script');
check('empty <script> serializes as <script></script>', empty.outerHTML === '<script></script>');

console.log(failed === 0 ? 'RESULT: both proposals fix the reproductions' : `RESULT: ${failed} check(s) failed`);
process.exit(failed === 0 ? 0 : 1);