fix(tokenizer): treat textarea as special tag

src/Tokenizer.spec.ts

@@ -33,6 +33,9 @@ describe("Tokenizer", () => {
         it("for self-closing title tag", () => {
             expect(tokenize("<title /><div></div>")).toMatchSnapshot();
         });
+        it("for self-closing textarea tag", () => {
+            expect(tokenize("<textarea /><div></div>")).toMatchSnapshot();
+        });
     });
 
     describe("should support standard special tags", () => {
@@ -45,6 +48,28 @@ describe("Tokenizer", () => {
         it("for normal sitle tag", () => {
             expect(tokenize("<title></title><div></div>")).toMatchSnapshot();
         });
+        it("for normal textarea tag", () => {
+            expect(
+                tokenize("<textarea></textarea><div></div>"),
+            ).toMatchSnapshot();
+        });
+    });
+
+    describe("should treat html inside special tags as text", () => {
+        it("for div inside script tag", () => {
+            expect(tokenize("<script><div></div></script>")).toMatchSnapshot();
+        });
+        it("for div inside style tag", () => {
+            expect(tokenize("<style><div></div></style>")).toMatchSnapshot();
+        });
+        it("for div inside title tag", () => {
+            expect(tokenize("<title><div></div></title>")).toMatchSnapshot();
+        });
+        it("for div inside textarea tag", () => {
+            expect(
+                tokenize("<textarea><div></div></textarea>"),
+            ).toMatchSnapshot();
+        });
     });
 
     describe("should correctly mark attributes", () => {

src/Tokenizer.ts

@@ -69,6 +69,7 @@ const enum State {
 
     // Special tags
     BeforeSpecialS, // Decide if we deal with `<script` or `<style`
+    BeforeSpecialT, // Decide if we deal with `<title` or `<textarea`
     SpecialStartSequence,
     InSpecialTag,
 
@@ -134,6 +135,9 @@ const Sequences = {
     ScriptEnd: new Uint8Array([0x3c, 0x2f, 0x73, 0x63, 0x72, 0x69, 0x70, 0x74]), // `</script`
     StyleEnd: new Uint8Array([0x3c, 0x2f, 0x73, 0x74, 0x79, 0x6c, 0x65]), // `</style`
     TitleEnd: new Uint8Array([0x3c, 0x2f, 0x74, 0x69, 0x74, 0x6c, 0x65]), // `</title`
+    TextareaEnd: new Uint8Array([
+        0x3c, 0x2f, 0x74, 0x65, 0x78, 0x74, 0x61, 0x72, 0x65, 0x61,
+    ]), // `</textarea`
 };
 
 export default class Tokenizer {
@@ -383,13 +387,14 @@ export default class Tokenizer {
         } else if (this.isTagStartChar(c)) {
             const lower = c | 0x20;
             this.sectionStart = this.index;
-            if (!this.xmlMode && lower === Sequences.TitleEnd[2]) {
-                this.startSpecial(Sequences.TitleEnd, 3);
+            if (this.xmlMode) {
+                this.state = State.InTagName;
+            } else if (lower === Sequences.ScriptEnd[2]) {
+                this.state = State.BeforeSpecialS;
+            } else if (lower === Sequences.TitleEnd[2]) {
+                this.state = State.BeforeSpecialT;
             } else {
-                this.state =
-                    !this.xmlMode && lower === Sequences.ScriptEnd[2]
-                        ? State.BeforeSpecialS
-                        : State.InTagName;
+                this.state = State.InTagName;
             }
         } else if (c === CharCodes.Slash) {
             this.state = State.BeforeClosingTagName;
@@ -586,6 +591,18 @@ export default class Tokenizer {
         }
     }
 
+    private stateBeforeSpecialT(c: number): void {
+        const lower = c | 0x20;
+        if (lower === Sequences.TitleEnd[3]) {
+            this.startSpecial(Sequences.TitleEnd, 4);
+        } else if (lower === Sequences.TextareaEnd[3]) {
+            this.startSpecial(Sequences.TextareaEnd, 4);
+        } else {
+            this.state = State.InTagName;
+            this.stateInTagName(c); // Consume the token again
+        }
+    }
+
     private startEntity() {
         this.baseState = this.state;
         this.state = State.InEntity;
@@ -727,6 +744,10 @@ export default class Tokenizer {
                     this.stateBeforeSpecialS(c);
                     break;
                 }
+                case State.BeforeSpecialT: {
+                    this.stateBeforeSpecialT(c);
+                    break;
+                }
                 case State.InAttributeValueNq: {
                     this.stateInAttributeValueNoQuotes(c);
                     break;

src/__snapshots__/Tokenizer.spec.ts.snap

@@ -425,6 +425,37 @@ exports[`Tokenizer should support self-closing special tags for self-closing sty
 ]
 `;
 
+exports[`Tokenizer should support self-closing special tags for self-closing textarea tag 1`] = `
+[
+  [
+    "onopentagname",
+    1,
+    9,
+  ],
+  [
+    "onselfclosingtag",
+    11,
+  ],
+  [
+    "onopentagname",
+    13,
+    16,
+  ],
+  [
+    "onopentagend",
+    16,
+  ],
+  [
+    "onclosetag",
+    19,
+    22,
+  ],
+  [
+    "onend",
+  ],
+]
+`;
+
 exports[`Tokenizer should support self-closing special tags for self-closing title tag 1`] = `
 [
   [
@@ -563,3 +594,147 @@ exports[`Tokenizer should support standard special tags for normal style tag 1`]
   ],
 ]
 `;
+
+exports[`Tokenizer should support standard special tags for normal textarea tag 1`] = `
+[
+  [
+    "onopentagname",
+    1,
+    9,
+  ],
+  [
+    "onopentagend",
+    9,
+  ],
+  [
+    "onclosetag",
+    12,
+    20,
+  ],
+  [
+    "onopentagname",
+    22,
+    25,
+  ],
+  [
+    "onopentagend",
+    25,
+  ],
+  [
+    "onclosetag",
+    28,
+    31,
+  ],
+  [
+    "onend",
+  ],
+]
+`;
+
+exports[`Tokenizer should treat html inside special tags as text for div inside script tag 1`] = `
+[
+  [
+    "onopentagname",
+    1,
+    7,
+  ],
+  [
+    "onopentagend",
+    7,
+  ],
+  [
+    "ontext",
+    8,
+    19,
+  ],
+  [
+    "onclosetag",
+    21,
+    27,
+  ],
+  [
+    "onend",
+  ],
+]
+`;
+
+exports[`Tokenizer should treat html inside special tags as text for div inside style tag 1`] = `
+[
+  [
+    "onopentagname",
+    1,
+    6,
+  ],
+  [
+    "onopentagend",
+    6,
+  ],
+  [
+    "ontext",
+    7,
+    18,
+  ],
+  [
+    "onclosetag",
+    20,
+    25,
+  ],
+  [
+    "onend",
+  ],
+]
+`;
+
+exports[`Tokenizer should treat html inside special tags as text for div inside textarea tag 1`] = `
+[
+  [
+    "onopentagname",
+    1,
+    9,
+  ],
+  [
+    "onopentagend",
+    9,
+  ],
+  [
+    "ontext",
+    10,
+    21,
+  ],
+  [
+    "onclosetag",
+    23,
+    31,
+  ],
+  [
+    "onend",
+  ],
+]
+`;
+
+exports[`Tokenizer should treat html inside special tags as text for div inside title tag 1`] = `
+[
+  [
+    "onopentagname",
+    1,
+    6,
+  ],
+  [
+    "onopentagend",
+    6,
+  ],
+  [
+    "ontext",
+    7,
+    18,
+  ],
+  [
+    "onclosetag",
+    20,
+    25,
+  ],
+  [
+    "onend",
+  ],
+]
+`;