Fix character insertion bug.

Author: alexmacarthur

packages/typeit/.tool-versions

@@ -0,0 +1 @@
+nodejs 22.9.0

packages/typeit/__tests__/helpers/insertIntoElement.test.js

@@ -23,6 +23,42 @@ describe("an input", () => {
   });
 });
 
+describe.only("HTML", () => {
+  it("inserts a character when there's nested HTML", () => {
+    setHTML`<span id="el">
+      <span>
+        <i class="ti-cursor">|</i>
+      </span>
+    </span>`;
+
+    const el = document.getElementById("el");
+
+    insertIntoElement(el, document.createTextNode("x"));
+
+    expect(document.body.innerHTML).toEqual(
+      '<span id="el"><span>x<i class="ti-cursor">|</i></span></span>',
+    );
+  });
+
+  it("inserts a character when there's deeply nested HTML", () => {
+    setHTML`<span id="el">
+      <span>
+        <p>
+          <i class="ti-cursor">|</i>
+        </p>
+      </span>
+    </span>`;
+
+    const el = document.getElementById("el");
+
+    insertIntoElement(el, document.createTextNode("x"));
+
+    expect(document.body.innerHTML).toEqual(
+      '<span id="el"><span><p>x<i class="ti-cursor">|</i></p></span></span>',
+    );
+  });
+});
+
 describe("plain text", () => {
   it("inserts a simple character", () => {
     setHTML`<span id="el"><i class="ti-cursor">|</i></span>`;

packages/typeit/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "typeit",
-  "version": "8.8.6",
+  "version": "8.8.7",
   "description": "The most versatile animated typing utility on the planet.",
   "author": "Alex MacArthur <alex@macarthur.me> (https://macarthur.me)",
   "license": "GPL-3.0",
@@ -22,7 +22,8 @@
     "start": "vite serve examples --host 0.0.0.0",
     "test": "vitest run",
     "postinstall": "node ./scripts/notice.js",
-    "prepare": "npm run build"
+    "prepare": "npm run build",
+    "format": "prettier --write \"**/*.{js,ts}\""
   },
   "keywords": [
     "javascript",
@@ -39,6 +40,7 @@
     "url": "git+https://github.com/alexmacarthur/typeit.git"
   },
   "devDependencies": {
+    "prettier": "^3.3.3",
     "terser": "^5.36.0",
     "typescript": "^5.6.3",
     "vite": "^5.4.10",

packages/typeit/package.json

@@ -23,10 +23,20 @@ let insertIntoElement = (originalTarget: El, character: El) => {
       // "originalParent", so always fall back to the default target.
       character.originalParent || originalTarget;
 
-  target.insertBefore(
-    character as El,
-    (select("." + CURSOR_CLASS, target) as Node) || null,
-  );
+  let cursorNode = (select("." + CURSOR_CLASS, target) as Node) || null;
+
+  /**
+   * In edge cases, the target may be two levels up from the cursor node,
+   * making the cursor node's no longer an immediate child, breaking
+   * the insertBefore method.
+   *
+   * During this scenario, reassign the target to the cursor node's parent.
+   */
+  if (cursorNode && cursorNode.parentElement !== target) {
+    target = cursorNode.parentElement;
+  }
+
+  target.insertBefore(character as El, cursorNode);
 };
 
 export default insertIntoElement;