Correctly remove empty HTML tags when necessary.

README.md

@@ -224,7 +224,7 @@ You can modify the options for the plugin by passing in JSON upon instantiation.
 | lifeLike      | (boolean) Will make the typing pace irregular, as if a real person is doing it.  | true |
 | cursor    | (boolean) Show a blinking cursor at the end of the string(s).  | true  |
 | cursorSpeed    | (number in milliseconds) The blinking speed of the cursor.  | 1000  |
-| cursorChar    | (string) The character used for the cursor. HTML works too! | '|' |
+| cursorChar    | (string) The character used for the cursor. HTML works too! | pipe |
 | breakLines    | (boolean) Choose whether you want multiple strings to be printed on top of each other (`breakLines: true`), or if you want each string to be deleted and replaced by the next one (`breakLines: false`).  | true  |
 | nextStringDelay    | (number in milliseconds) The amount of time (milliseconds) between typing the next string when multiple strings are defined.  | 750  |
 | startDelete    | (boolean) Whether to begin instance by deleting strings inside element, and then typing what strings are defined via JSON or companion functions. | false  |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "typeit",
-  "version": "5.4.0",
+  "version": "5.4.1",
   "description": "The most versatile animated typing utility on the planet.",
   "author": "Alex MacArthur <alex@macarthur.me> (https://macarthur.me)",
   "license": "GPL-2.0",
@@ -14,7 +14,7 @@
     "dist/"
   ],
   "scripts": {
-    "build": "rollup -c && prettier src/* --write",
+    "build": "rollup -c && prettier src/* --write && prettier tests/* --write",
     "watch": "rollup -c -w",
     "serve": "concurrently --kill-others \"rollup -c -w\" \"node serve.js\"",
     "test": "jest tests",
@@ -24,6 +24,7 @@
     "javascript",
     "animated",
     "typing",
+    "typing effect",
     "typewriter",
     "typewriter effect",
     "type effect",

src/instance.js

@@ -232,7 +232,9 @@ export default class Instance {
 
     this.element.insertAdjacentHTML(
       "beforeend",
-      `<span style="${this.style}${visibilityStyle}" class="ti-cursor">${this.options.cursorChar}</span>`
+      `<span style="${this.style}${visibilityStyle}" class="ti-cursor">${
+        this.options.cursorChar
+      }</span>`
     );
   }
 
@@ -468,7 +470,13 @@ export default class Instance {
         }
       }
 
-      this.elementContainer.innerHTML = textArray.join("");
+      //-- Make the content a string again, AND strip out any empty HTML tags.
+      //-- We want do strip empty tags here and ONLY here because when we're
+      //-- typing new content inside an HTML tag, there is momentarily an empty
+      //-- tag we want to keep.
+      this.elementContainer.innerHTML = textArray
+        .join("")
+        .replace(/<[^\/>][^>]*><\/[^>]+>/, "");
 
       //-- Delete again! Don't call directly, to respect possible pauses.
       if (chars === null) {

tests/base.test.js

@@ -1,48 +1,45 @@
-import TypeIt from '../src/typeit';
+import TypeIt from "../src/typeit";
 
-test('Returns an object with base properties.', () => {
-
-  document.body.innerHTML =
-    `<div>'
+test("Returns an object with base properties.", () => {
+  document.body.innerHTML = `<div>'
       <span id="element"></span>
     </div>`;
 
-  const instance = new TypeIt('#element', {});
+  const instance = new TypeIt("#element", {});
 
-  expect(Object.keys(instance).sort()).toEqual(['elements', 'id', 'instances', 'args'].sort());
+  expect(Object.keys(instance).sort()).toEqual(
+    ["elements", "id", "instances", "args"].sort()
+  );
 });
 
-test('Destroys instances successfully.', () => {
-
+test("Destroys instances successfully.", () => {
   jest.useFakeTimers();
 
-  document.body.innerHTML =
-    `<div>'
+  document.body.innerHTML = `<div>'
       <span id="element"></span>
     </div>`;
 
-  const instance = new TypeIt('#element', {
-    strings: 'This is my string!'
+  const instance = new TypeIt("#element", {
+    strings: "This is my string!"
   });
 
   jest.runAllTimers();
 
   instance.destroy();
 
   expect(instance.instances).toHaveLength(0);
-  expect(document.body.querySelector('.ti-cursor')).toEqual(null);
+  expect(document.body.querySelector(".ti-cursor")).toEqual(null);
 });
 
-test('Redefines defaults correctly.', () => {
-  document.body.innerHTML =
-    `<div>'
+test("Redefines defaults correctly.", () => {
+  document.body.innerHTML = `<div>'
       <span id="element"></span>
     </div>`;
 
-  expect(typeof window.TypeItDefaults).toBe('object');
+  expect(typeof window.TypeItDefaults).toBe("object");
 
   window.TypeItDefaults.speed = 25;
-  const instance = new TypeIt('#element', {});
+  const instance = new TypeIt("#element", {});
 
   expect(instance.instances[0].options.speed).toEqual(25);
   expect(instance.instances[0].options.speed).not.toEqual(26);

tests/options.test.js

@@ -1,53 +1,49 @@
-import TypeIt from '../src/typeit';
+import TypeIt from "../src/typeit";
 
-test('Cursor should function by default.', () => {
-
-  document.body.innerHTML =
-    `<div>'
+test("Cursor should function by default.", () => {
+  document.body.innerHTML = `<div>'
       <span id="element"></span>
     </div>`;
 
-  const instance = new TypeIt('#element', {
+  const instance = new TypeIt("#element", {
     strings: ["This should have a default cursor."]
   });
 
-  let cursorCharacter = document.getElementById('element').querySelector('.ti-cursor').innerHTML;
+  let cursorCharacter = document
+    .getElementById("element")
+    .querySelector(".ti-cursor").innerHTML;
 
-  expect(cursorCharacter).toBe('|');
+  expect(cursorCharacter).toBe("|");
 });
 
-test('Changes cursor character correctly.', () => {
-
-  document.body.innerHTML =
-    `<div>'
+test("Changes cursor character correctly.", () => {
+  document.body.innerHTML = `<div>'
       <span id="element"></span>
     </div>`;
 
-  const instance = new TypeIt('#element', {
+  const instance = new TypeIt("#element", {
     strings: ["This should have a custom cursor."],
-    cursorChar: '$'
+    cursorChar: "$"
   });
 
-  let cursorCharacter = document.getElementById('element').querySelector('.ti-cursor').innerHTML;
+  let cursorCharacter = document
+    .getElementById("element")
+    .querySelector(".ti-cursor").innerHTML;
 
-  expect(cursorCharacter).toBe('$');
+  expect(cursorCharacter).toBe("$");
 });
 
-test('Turning off cursor should work.', () => {
-
-  document.body.innerHTML =
-    `<div>'
+test("Turning off cursor should work.", () => {
+  document.body.innerHTML = `<div>'
       <span id="element"></span>
     </div>`;
 
-  const instance = new TypeIt('#element', {
+  const instance = new TypeIt("#element", {
     strings: ["This should have no cursor."],
     cursor: false
   });
 
-  let visibilityStyle = document.getElementById('element').style.visibility;
+  let visibilityStyle = document.getElementById("element").style.visibility;
 
-  expect(visibilityStyle).toBe('');
+  expect(visibilityStyle).toBe("");
 });
-
-