tutuca 0.9.38 → 0.9.40

package/dist/tutuca-dev.js

@@ -2468,8 +2468,11 @@ var DEFAULT_SCOPE_BOUNDARIES = new Set([
   "th",
   "marquee",
   "object",
+  "select",
   "template"
 ]);
+var MATHML_TEXT_INTEGRATION_POINT_NAMES = new Set(["mi", "mo", "mn", "ms", "mtext"]);
+var SVG_HTML_INTEGRATION_POINT_NAMES = new Set(["foreignobject", "desc", "title"]);
 var SCOPE_LIST_ITEM = new Set([...DEFAULT_SCOPE_BOUNDARIES, "ol", "ul"]);
 var SCOPE_BUTTON = new Set([...DEFAULT_SCOPE_BOUNDARIES, "button"]);
 var SCOPE_DEFAULT = DEFAULT_SCOPE_BOUNDARIES;
@@ -2574,6 +2577,12 @@ var STANDARD_SVG_CAMEL_ATTRS = new Set([
   "zoomAndPan"
 ]);
 var MATHML_CAMEL_ATTRS = new Set(["definitionURL"]);
+var SVG_ATTR_LOWERCASE_TO_CAMEL = new Map;
+for (const camel of STANDARD_SVG_CAMEL_ATTRS)
+  SVG_ATTR_LOWERCASE_TO_CAMEL.set(camel.toLowerCase(), camel);
+var MATHML_ATTR_LOWERCASE_TO_CAMEL = new Map;
+for (const camel of MATHML_CAMEL_ATTRS)
+  MATHML_ATTR_LOWERCASE_TO_CAMEL.set(camel.toLowerCase(), camel);
 var FOREIGN_BREAKOUT_TAGS = new Set([
   "b",
   "big",
@@ -2668,7 +2677,6 @@ var SELECT_BREAKOUT_TAGS = new Set(["input", "keygen", "textarea", "select"]);
 var MODES = Object.freeze({
   inBody: "inBody",
   inTable: "inTable",
-  inTableText: "inTableText",
   inCaption: "inCaption",
   inColumnGroup: "inColumnGroup",
   inTableBody: "inTableBody",
@@ -2676,8 +2684,7 @@ var MODES = Object.freeze({
   inCell: "inCell",
   inSelect: "inSelect",
   inSelectInTable: "inSelectInTable",
-  inTemplate: "inTemplate",
-  text: "text"
+  inTemplate: "inTemplate"
 });
 var NS = Object.freeze({
   html: "html",
@@ -2705,6 +2712,8 @@ var FRAGMENT_CONTEXT_MODES = Object.freeze({
 // tools/core/htmllinter.js
 var HTML_TAG_NAME_HAS_UPPERCASE = "HTML_TAG_NAME_HAS_UPPERCASE";
 var HTML_SVG_TAG_WILL_LOWERCASE = "HTML_SVG_TAG_WILL_LOWERCASE";
+var HTML_SVG_ATTR_WILL_LOWERCASE = "HTML_SVG_ATTR_WILL_LOWERCASE";
+var HTML_MATHML_ATTR_WILL_LOWERCASE = "HTML_MATHML_ATTR_WILL_LOWERCASE";
 var HTML_TAG_NOT_ALLOWED_IN_PARENT = "HTML_TAG_NOT_ALLOWED_IN_PARENT";
 var HTML_TEXT_NOT_ALLOWED_IN_PARENT = "HTML_TEXT_NOT_ALLOWED_IN_PARENT";
 var HTML_VOID_ELEMENT_HAS_CLOSE_TAG = "HTML_VOID_ELEMENT_HAS_CLOSE_TAG";
@@ -2712,6 +2721,13 @@ var HTML_DUPLICATE_FORM = "HTML_DUPLICATE_FORM";
 var HTML_NESTED_INTERACTIVE = "HTML_NESTED_INTERACTIVE";
 var HTML_MISNESTED_FORMATTING = "HTML_MISNESTED_FORMATTING";
 var HTML_UNEXPECTED_END_TAG = "HTML_UNEXPECTED_END_TAG";
+var HTML_DUPLICATE_ATTRIBUTE = "HTML_DUPLICATE_ATTRIBUTE";
+var HTML_ATTRIBUTES_ON_END_TAG = "HTML_ATTRIBUTES_ON_END_TAG";
+var HTML_SELF_CLOSING_END_TAG = "HTML_SELF_CLOSING_END_TAG";
+var HTML_MISSING_ATTRIBUTE_VALUE = "HTML_MISSING_ATTRIBUTE_VALUE";
+var HTML_CDATA_IN_HTML_NAMESPACE = "HTML_CDATA_IN_HTML_NAMESPACE";
+var HTML_BOGUS_COMMENT = "HTML_BOGUS_COMMENT";
+var HTML_UNCLOSED_BEFORE_END = "HTML_UNCLOSED_BEFORE_END";
 var LEVEL_ERROR = "error";
 var LEVEL_WARN = "warn";
 var TABLE_SCOPE_TAGS = new Set([
@@ -2726,6 +2742,18 @@ var TABLE_SCOPE_TAGS = new Set([
   "table"
 ]);
 var TABLE_BODY_CELL_TAGS = new Set(["td", "th"]);
+var IMPLIED_END_TAGS = new Set([
+  "dd",
+  "dt",
+  "li",
+  "optgroup",
+  "option",
+  "p",
+  "rb",
+  "rp",
+  "rt",
+  "rtc"
+]);
 function lintHtml(html, onFinding, opts = {}) {
   const TokenizerClass = opts.TokenizerClass ?? HtmlTokenizer;
   const ctx = new LinterCtx(html, onFinding, opts);
@@ -2766,30 +2794,75 @@ class LinterCtx {
       this.openElements.push({ name: "select", ns: NS.html, start: -1 });
     }
     this.insertionMode = ctxInfo.mode;
-    this.originalInsertionMode = MODES.inBody;
     this.templateInsertionModes = ctxName === "template" ? [MODES.inTemplate] : [];
     this.activeFormatting = [];
-    this.formPointer = null;
     this.framesetOk = true;
     this.svgCamelElements = opts.svgCamelElements ?? STANDARD_SVG_CAMEL_ELEMENTS;
-    this.transparentTagPrefixes = opts.transparentTagPrefixes ?? [];
+    this.transparentTagPrefixes = (opts.transparentTagPrefixes ?? []).map((p) => p.toLowerCase());
     this.currentTagName = "";
     this.currentTagRawName = "";
     this.currentTagStart = 0;
+    this.currentAttrs = [];
+    this.currentAttr = null;
     this.tokenizer = null;
-    this.textRestoreMode = null;
   }
   onopentagname(start, end) {
     const raw = this.html.slice(start, end);
     this.currentTagRawName = raw;
     this.currentTagName = raw.toLowerCase();
     this.currentTagStart = start;
+    this.currentAttrs = [];
+    this.currentAttr = null;
+  }
+  onattribname(start, end) {
+    const rawName = this.html.slice(start, end);
+    this.currentAttr = {
+      name: rawName.toLowerCase(),
+      rawName,
+      nameStart: start,
+      value: null,
+      valueStart: -1,
+      valueEnd: -1,
+      quote: QuoteType.NoValue
+    };
+  }
+  onattribdata(start, end) {
+    if (!this.currentAttr)
+      return;
+    this.currentAttr.valueStart = start;
+    this.currentAttr.valueEnd = end;
+    this.currentAttr.value = this.html.slice(start, end);
+  }
+  onattribend(quote, _end) {
+    const a = this.currentAttr;
+    if (!a)
+      return;
+    a.quote = quote;
+    const dup = this.currentAttrs.find((x) => x.name === a.name);
+    if (dup) {
+      this.report(HTML_DUPLICATE_ATTRIBUTE, LEVEL_WARN, a.nameStart, {
+        name: a.name,
+        firstAt: dup.nameStart
+      });
+    } else {
+      this.currentAttrs.push(a);
+    }
+    if (a.quote === QuoteType.Unquoted && a.value === "") {
+      this.report(HTML_MISSING_ATTRIBUTE_VALUE, LEVEL_WARN, a.nameStart, {
+        name: a.name
+      });
+    }
+    this.currentAttr = null;
   }
-  onattribname(_start, _end) {}
-  onattribdata(_start, _end) {}
   onattribentity(_cp) {}
-  onattribend(_quote, _end) {}
   ontextentity(_cp, _end) {}
+  getAttr(name) {
+    const a = this.currentAttrs.find((x) => x.name === name);
+    return a ? a.value : null;
+  }
+  hasAttr(name) {
+    return this.currentAttrs.some((x) => x.name === name);
+  }
   onopentagend(endIndex) {
     this.handleStartTag(false, endIndex);
   }
@@ -2799,20 +2872,56 @@ class LinterCtx {
   onclosetag(start, end) {
     const raw = this.html.slice(start, end);
     const name = raw.toLowerCase();
+    let i = end;
+    let lastNonWs = -1;
+    while (i < this.html.length) {
+      const c = this.html.charCodeAt(i);
+      if (c === 62)
+        break;
+      if (c !== 32 && c !== 9 && c !== 10 && c !== 13 && c !== 12)
+        lastNonWs = i;
+      i++;
+    }
+    if (lastNonWs >= 0) {
+      if (this.html.charCodeAt(lastNonWs) === 47 && lastNonWs === i - 1) {
+        let firstNonWs = -1;
+        for (let j = end;j < lastNonWs; j++) {
+          const c2 = this.html.charCodeAt(j);
+          if (c2 !== 32 && c2 !== 9 && c2 !== 10 && c2 !== 13 && c2 !== 12) {
+            firstNonWs = j;
+            break;
+          }
+        }
+        if (firstNonWs < 0) {
+          this.report(HTML_SELF_CLOSING_END_TAG, LEVEL_WARN, start, { tag: name });
+        } else {
+          this.report(HTML_ATTRIBUTES_ON_END_TAG, LEVEL_WARN, start, { tag: name });
+        }
+      } else {
+        this.report(HTML_ATTRIBUTES_ON_END_TAG, LEVEL_WARN, start, { tag: name });
+      }
+    }
     this.handleEndTag(name, start);
   }
   ontext(start, end) {
     if (start >= end)
       return;
+    const top = this.currentNode();
+    if (top && top.ns !== NS.html && !this.isIntegrationPoint(top))
+      return;
     this.handleText(start, end);
   }
-  oncomment(_start, _end, _endOffset) {}
+  oncomment(start, _end, endOffset) {
+    if (endOffset === 0) {
+      this.report(HTML_BOGUS_COMMENT, LEVEL_WARN, start, {
+        mode: this.insertionMode
+      });
+    }
+  }
   oncdata(start, _end, _endOffset) {
     if (this.currentNamespace() === NS.html) {
-      this.report(HTML_TAG_NOT_ALLOWED_IN_PARENT, LEVEL_WARN, start, {
-        tag: "[CDATA[",
-        mode: this.insertionMode,
-        action: "ignored"
+      this.report(HTML_CDATA_IN_HTML_NAMESPACE, LEVEL_WARN, start, {
+        mode: this.insertionMode
       });
     }
   }
@@ -2850,14 +2959,37 @@ class LinterCtx {
       const f = this.openElements[i];
       if (f.name === target && f.ns === NS.html)
         return true;
-      if (f.ns === NS.html && scopeSet.has(f.name))
-        return false;
-      if (f.ns !== NS.html) {
+      if (f.ns === NS.html) {
+        if (scopeSet.has(f.name))
+          return false;
+      } else if (this.isScopeBoundary(f)) {
         return false;
       }
     }
     return false;
   }
+  isScopeBoundary(frame) {
+    if (frame.ns === NS.math) {
+      return MATHML_TEXT_INTEGRATION_POINT_NAMES.has(frame.name) || frame.name === "annotation-xml";
+    }
+    if (frame.ns === NS.svg) {
+      return SVG_HTML_INTEGRATION_POINT_NAMES.has(frame.name);
+    }
+    return false;
+  }
+  isIntegrationPoint(frame) {
+    if (frame.ns === NS.math) {
+      if (MATHML_TEXT_INTEGRATION_POINT_NAMES.has(frame.name))
+        return true;
+      if (frame.name === "annotation-xml" && frame.htmlIntegration)
+        return true;
+      return false;
+    }
+    if (frame.ns === NS.svg) {
+      return SVG_HTML_INTEGRATION_POINT_NAMES.has(frame.name);
+    }
+    return false;
+  }
   hasInDefaultScope(target) {
     return this.hasInScope(target, SCOPE_DEFAULT);
   }
@@ -2928,13 +3060,43 @@ class LinterCtx {
         });
       }
     }
+    const targetNs = ns !== NS.html ? ns : name === "svg" ? NS.svg : name === "math" ? NS.math : NS.html;
+    if (targetNs === NS.svg) {
+      for (const a of this.currentAttrs) {
+        const canonical = SVG_ATTR_LOWERCASE_TO_CAMEL.get(a.name);
+        if (canonical && a.rawName !== canonical) {
+          this.report(HTML_SVG_ATTR_WILL_LOWERCASE, LEVEL_ERROR, a.nameStart, {
+            raw: a.rawName,
+            canonical
+          });
+        }
+      }
+    } else if (targetNs === NS.math) {
+      for (const a of this.currentAttrs) {
+        const canonical = MATHML_ATTR_LOWERCASE_TO_CAMEL.get(a.name);
+        if (canonical && a.rawName !== canonical) {
+          this.report(HTML_MATHML_ATTR_WILL_LOWERCASE, LEVEL_ERROR, a.nameStart, {
+            raw: a.rawName,
+            canonical
+          });
+        }
+      }
+    }
     if (this.isTransparentTag(name))
       return;
-    if (ns !== NS.html && !this.shouldBreakoutFromForeign(name)) {
+    const top = this.currentNode();
+    const inForeign = ns !== NS.html && !(top && this.isIntegrationPoint(top));
+    if (inForeign && !this.shouldBreakoutFromForeign(name)) {
       this.startTagInForeign(name, raw, selfClosing, start);
       return;
     }
-    if (ns !== NS.html && this.shouldBreakoutFromForeign(name)) {
+    if (inForeign && this.shouldBreakoutFromForeign(name)) {
+      this.report(HTML_TAG_NOT_ALLOWED_IN_PARENT, LEVEL_WARN, start, {
+        tag: raw,
+        parent: this.currentNode()?.name ?? "(root)",
+        mode: this.insertionMode,
+        action: "foreign-breakout"
+      });
       while (this.openElements.length && this.currentNode()?.ns !== NS.html) {
         this.openElements.pop();
       }
@@ -2944,20 +3106,28 @@ class LinterCtx {
   shouldBreakoutFromForeign(name) {
     if (FOREIGN_BREAKOUT_TAGS.has(name))
       return true;
-    if (name === "font")
-      return true;
+    if (name === "font") {
+      return this.hasAttr("color") || this.hasAttr("face") || this.hasAttr("size");
+    }
     return false;
   }
   startTagInForeign(name, raw, selfClosing, start) {
     const ns = name === "svg" ? NS.svg : name === "math" ? NS.math : this.currentNamespace();
     const top = this.currentNode();
-    if (top && top.ns === NS.math && MATHML_TEXT_INTEGRATION_POINTS.has(top.name) && name !== "mglyph" && name !== "malignmark") {
+    if (top && this.isIntegrationPoint(top) && name !== "mglyph" && name !== "malignmark") {
       this.dispatchStartTag(name, raw, selfClosing, start, start + raw.length);
       return;
     }
     if (selfClosing)
       return;
-    this.push(raw, ns, start);
+    const frame = { name, ns, start };
+    if (ns === NS.math && name === "annotation-xml") {
+      const enc = (this.getAttr("encoding") ?? "").toLowerCase();
+      if (enc === "text/html" || enc === "application/xhtml+xml") {
+        frame.htmlIntegration = true;
+      }
+    }
+    this.openElements.push(frame);
   }
   dispatchStartTag(name, raw, selfClosing, start, endIndex) {
     switch (this.insertionMode) {
@@ -2967,10 +3137,6 @@ class LinterCtx {
         return this.startInBody(name, raw, selfClosing, start, endIndex);
       case MODES.inTable:
         return this.startInTable(name, raw, selfClosing, start, endIndex);
-      case MODES.inTableText:
-        this.flushTableText();
-        this.insertionMode = this.originalInsertionMode;
-        return this.dispatchStartTag(name, raw, selfClosing, start, endIndex);
       case MODES.inCaption:
         return this.startInCaption(name, raw, selfClosing, start, endIndex);
       case MODES.inColumnGroup:
@@ -2985,8 +3151,6 @@ class LinterCtx {
         return this.startInSelect(name, raw, selfClosing, start, endIndex);
       case MODES.inSelectInTable:
         return this.startInSelectInTable(name, raw, selfClosing, start, endIndex);
-      case MODES.text:
-        return;
     }
   }
   startInBody(name, raw, selfClosing, start, _endIndex) {
@@ -3028,7 +3192,7 @@ class LinterCtx {
       return;
     }
     if (name === "form") {
-      if (this.formPointer !== null && !this.openElementsHas("template")) {
+      if (this.openElementsHas("form") && !this.openElementsHas("template")) {
         this.report(HTML_DUPLICATE_FORM, LEVEL_ERROR, start, {
           tag: raw,
           mode: this.insertionMode
@@ -3038,7 +3202,6 @@ class LinterCtx {
       if (this.hasInButtonScope("p"))
         this.implicitlyClose("p", start, raw);
       this.push(raw, NS.html, start);
-      this.formPointer = this.currentNode();
       return;
     }
     if (name === "li") {
@@ -3111,7 +3274,7 @@ class LinterCtx {
       return;
     }
     if (name === "a") {
-      if (this.openElementsHas("a") || this.activeFormattingHas("a")) {
+      if (this.activeFormattingHas("a")) {
         this.report(HTML_NESTED_INTERACTIVE, LEVEL_WARN, start, {
           tag: raw,
           mode: this.insertionMode
@@ -3128,7 +3291,7 @@ class LinterCtx {
       return;
     }
     if (name === "nobr") {
-      if (this.hasInDefaultScope("nobr")) {
+      if (this.activeFormattingHas("nobr")) {
         this.report(HTML_NESTED_INTERACTIVE, LEVEL_WARN, start, {
           tag: raw,
           mode: this.insertionMode
@@ -3212,7 +3375,6 @@ class LinterCtx {
       if (e === null)
         break;
       if (e.name === name) {
-        this.activeFormatting.splice(i, 1);
         const idx = this.openElements.indexOf(e);
         if (idx >= 0)
           this.openElements.splice(idx, 1);
@@ -3305,6 +3467,9 @@ class LinterCtx {
       return this.startInBody(name, raw, selfClosing, start, endIndex);
     }
     if (name === "input") {
+      const type = (this.getAttr("type") ?? "").toLowerCase();
+      if (type === "hidden")
+        return;
       this.report(HTML_TAG_NOT_ALLOWED_IN_PARENT, LEVEL_WARN, start, {
         tag: raw,
         parent: "table",
@@ -3340,18 +3505,6 @@ class LinterCtx {
       this.openElements.pop();
     }
   }
-  flushTableText() {
-    if (!this.pendingTableText)
-      return;
-    const { hasNonWhitespace, start, snippet } = this.pendingTableText;
-    if (hasNonWhitespace) {
-      this.report(HTML_TEXT_NOT_ALLOWED_IN_PARENT, LEVEL_ERROR, start, {
-        mode: this.originalInsertionMode,
-        snippet
-      });
-    }
-    this.pendingTableText = null;
-  }
   startInCaption(name, raw, selfClosing, start, endIndex) {
     if (name === "caption" || name === "col" || name === "colgroup" || name === "tbody" || name === "td" || name === "tfoot" || name === "th" || name === "thead" || name === "tr") {
       if (this.hasInTableScope("caption")) {
@@ -3584,14 +3737,24 @@ class LinterCtx {
       return;
     const ns = this.currentNamespace();
     if (ns !== NS.html) {
-      for (let i = this.openElements.length - 1;i >= 0; i--) {
-        const f = this.openElements[i];
-        if (f.ns === NS.html)
+      let stackIdx = this.openElements.length - 1;
+      let first = true;
+      while (stackIdx > 0) {
+        const f = this.openElements[stackIdx];
+        if (!first && f.ns === NS.html)
           break;
-        if (f.name.toLowerCase() === name) {
-          this.openElements.length = i;
+        if (f.ns !== NS.html && f.name.toLowerCase() === name) {
+          this.openElements.length = stackIdx;
           return;
         }
+        if (first) {
+          this.report(HTML_UNEXPECTED_END_TAG, LEVEL_WARN, start, {
+            tag: name,
+            mode: this.insertionMode
+          });
+          first = false;
+        }
+        stackIdx--;
       }
     }
     if (VOID_ELEMENTS.has(name)) {
@@ -3622,19 +3785,33 @@ class LinterCtx {
       });
       return;
     }
+    const endIsTableStructural = TABLE_SCOPE_TAGS.has(name);
     for (let i = this.openElements.length - 1;i >= 0; i--) {
       const f = this.openElements[i];
       if (f.ns === NS.html && f.name === name) {
+        for (let j = this.openElements.length - 1;j > i; j--) {
+          const popped = this.openElements[j];
+          if (popped.ns === NS.html && popped.name !== name && !IMPLIED_END_TAGS.has(popped.name) && !(endIsTableStructural && TABLE_SCOPE_TAGS.has(popped.name))) {
+            this.report(HTML_UNCLOSED_BEFORE_END, LEVEL_WARN, start, {
+              tag: name,
+              unclosed: popped.name,
+              mode: this.insertionMode
+            });
+            break;
+          }
+        }
         this.openElements.length = i;
-        if (name === "form")
-          this.formPointer = null;
         if (TABLE_SCOPE_TAGS.has(name) || name === "select" || name === "template") {
           this.resetInsertionModeAppropriately();
         }
         return;
       }
-      if (f.ns === NS.html && SPECIAL_ELEMENTS.has(f.name)) {
-        break;
+      if (f.ns === NS.html && SPECIAL_ELEMENTS.has(f.name) && !IMPLIED_END_TAGS.has(f.name) && !(endIsTableStructural && TABLE_SCOPE_TAGS.has(f.name))) {
+        this.report(HTML_UNEXPECTED_END_TAG, LEVEL_WARN, start, {
+          tag: name,
+          mode: this.insertionMode
+        });
+        return;
       }
     }
   }
@@ -4294,6 +4471,24 @@ function lintIdToMessage(id, info) {
       return `Misnested formatting tag </${info.tag}> — adoption agency will reorder nodes${fmtLocationSuffix(info)}`;
     case "HTML_UNEXPECTED_END_TAG":
       return `Unexpected end tag </${info.tag}>${fmtLocationSuffix(info)}`;
+    case "HTML_UNCLOSED_BEFORE_END":
+      return `<${info.unclosed}> still open when </${info.tag}> was seen — implicitly closed${fmtLocationSuffix(info)}`;
+    case "HTML_DUPLICATE_ATTRIBUTE":
+      return `Duplicate attribute '${info.name}' — second occurrence dropped${fmtLocationSuffix(info)}`;
+    case "HTML_ATTRIBUTES_ON_END_TAG":
+      return `Attributes on end tag </${info.tag}> — dropped by the parser${fmtLocationSuffix(info)}`;
+    case "HTML_SELF_CLOSING_END_TAG":
+      return `Self-closing end tag </${info.tag}/> — trailing '/' is meaningless${fmtLocationSuffix(info)}`;
+    case "HTML_MISSING_ATTRIBUTE_VALUE":
+      return `Attribute '${info.name}' is missing a value${fmtLocationSuffix(info)}`;
+    case "HTML_CDATA_IN_HTML_NAMESPACE":
+      return `CDATA section in HTML namespace — reinterpreted as a bogus comment${fmtLocationSuffix(info)}`;
+    case "HTML_BOGUS_COMMENT":
+      return `Bogus comment — content dropped by the parser${fmtLocationSuffix(info)}`;
+    case "HTML_SVG_ATTR_WILL_LOWERCASE":
+      return `SVG attribute '${info.raw}' will be rewritten to '${info.canonical}'${fmtLocationSuffix(info)}`;
+    case "HTML_MATHML_ATTR_WILL_LOWERCASE":
+      return `MathML attribute '${info.raw}' will be rewritten to '${info.canonical}'${fmtLocationSuffix(info)}`;
     case "LINT_ERROR":
       return info.message;
     default: