🎉 Full EMOJI Support! 🎉

.gitignore

@@ -1,3 +1,4 @@
 .DS_Store
 node_modules
 dist/
+.idea/

README.md

@@ -25,6 +25,7 @@ For more advanced, controlled typing effects, TypeIt comes with companion functi
 -   Define strings programmatically or directly in the HTML (a useful fallback in case user doesn't have JavaScript enabled, as well as for SEO).
 -   Handle HTML (even nested tags!) with ease, preserving all of its attributes (classes, ids, etc.).
 -   Offered as an ES module for modern bundlers, or a UMD library for loading via a traditional `<script>` tags.
+-   Can optionally support ➡️ 🔥 Emojis 🔥 ⬅️ and other Graphemes with [orling/grapheme-splitter](https://github.com/orling/grapheme-splitter)!
 
 ## License Options
 
@@ -56,4 +57,4 @@ I'd love to see and share it! [Send me a message](https://macarthur.me/contact)
 
 ## Need Help?
 
-If you're working with a custom implementation of TypeIt and would like some help, I'm available for hire. [Get in touch!](https://macarthur.me/contact)
+If you're working with a custom implementation of TypeIt and would like some help, I'm available for hire. [Get in touch!](https://macarthur.me/contact)

packages/typeit/__tests__/__snapshots__/TypeIt.test.js.snap

@@ -540,6 +540,7 @@ exports[`reset() Successfully resets when called. 1`] = `
   "speed": 100,
   "startDelay": 250,
   "startDelete": false,
+  "stringSpliterator": [Function],
   "strings": [
     "This is my string!",
   ],

packages/typeit/__tests__/helpers/__snapshots__/chunkStrings.test.js.snap

@@ -355,6 +355,42 @@ exports[`maybeChunkStringAsHtml() Should correctly transform non-HTML string as
 ]
 `;
 
+exports[`maybeChunkStringAsHtml() Should return correctly split string with emoji. 1`] = `
+[
+  A,
+  n,
+   ,
+  🍕,
+   ,
+  e,
+  m,
+  o,
+  j,
+  i,
+   ,
+  🌷,
+   ,
+  f,
+  i,
+  l,
+  l,
+  e,
+  d,
+   ,
+  👍,
+   ,
+  s,
+  t,
+  r,
+  i,
+  n,
+  g,
+  .,
+   ,
+  ⬆️,
+]
+`;
+
 exports[`maybeChunkStringAsHtml() Should return noderized string when setting is enabled. 1`] = `
 [
   A,

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

@@ -1,54 +1,58 @@
 import {
-  chunkStringAsHtml,
   maybeChunkStringAsHtml,
   walkElementNodes,
 } from "../../src/helpers/chunkStrings";
-import expandTextNodes from "../../src/helpers/expandTextNodes";
+import GraphemeSplitter from "grapheme-splitter";
+import {
+  defaultChunkStringAsHtml,
+  defaultExpandTextNodes,
+  defaultMaybeChunkStringAsHtml,
+} from "./util";
 
 beforeEach(() => {
   document.body.innerHTML = "";
 });
 
 test("Parses normal string correctly.", () => {
-  let result = chunkStringAsHtml("Hello, this is my string.");
+  let result = defaultChunkStringAsHtml("Hello, this is my string.");
 
   expect(result).toMatchSnapshot();
 });
 
 test("Parses single HTML tag.", () => {
-  let result = chunkStringAsHtml(
+  let result = defaultChunkStringAsHtml(
     "Hello, this is some <strong>bold</strong> text."
   );
 
   expect(result).toMatchSnapshot();
 });
 
 test("Parses multiple HTML tags.", () => {
-  let result = chunkStringAsHtml(
+  let result = defaultChunkStringAsHtml(
     "Hello, this is some <strong>bold</strong> text, and some <i>italicized</i> text."
   );
 
   expect(result).toMatchSnapshot();
 });
 
 test("Parses HTML tag at beginning of string.", () => {
-  let result = chunkStringAsHtml(
+  let result = defaultChunkStringAsHtml(
     "<strong>Hello!</strong> This is some text with HTML at the beginning."
   );
 
   expect(result).toMatchSnapshot();
 });
 
 test("Parses HTML tag at end of string.", () => {
-  let result = chunkStringAsHtml(
+  let result = defaultChunkStringAsHtml(
     "This is some text with HTML at the <em>end.</em>"
   );
 
   expect(result).toMatchSnapshot();
 });
 
 test("Parses HTML tag with attributes.", () => {
-  let result = chunkStringAsHtml(
+  let result = defaultChunkStringAsHtml(
     'This string has an <strong class="strong-class" id="strong-id" data-whatever="data-att">element</strong> with attributes.'
   );
 
@@ -58,13 +62,23 @@ test("Parses HTML tag with attributes.", () => {
 describe("maybeChunkStringAsHtml()", () => {
   test("Should return noderized string when setting is enabled.", () => {
     expect(
-      maybeChunkStringAsHtml("A <em>fancy</em> string.")
+      defaultMaybeChunkStringAsHtml("A <em>fancy</em> string.")
     ).toMatchSnapshot();
   });
 
   test("Should correctly transform non-HTML string as character objects.", () => {
     expect(
-      maybeChunkStringAsHtml("A <em>fancy</em> string.", false)
+      defaultMaybeChunkStringAsHtml("A <em>fancy</em> string.", false)
+    ).toMatchSnapshot();
+  });
+  test("Should return correctly split string with emoji.", () => {
+    const splitter = new GraphemeSplitter();
+    expect(
+      maybeChunkStringAsHtml(
+        "An 🍕 emoji 🌷 filled 👍 string. ⬆️",
+        false,
+        (str) => splitter.splitGraphemes(str)
+      )
     ).toMatchSnapshot();
   });
 });
@@ -73,7 +87,7 @@ describe("walkElementNodes()", () => {
   test("Gathers correct number of nodes with original parents attached.", () => {
     setHTML`<h2 id="heading">A<span>B<small>C</small></span></h2>`;
 
-    const el = expandTextNodes(document.getElementById("heading"));
+    const el = defaultExpandTextNodes(document.getElementById("heading"));
     const result = walkElementNodes(el);
     const thirdNode = result[2];
 
@@ -89,7 +103,7 @@ describe("walkElementNodes()", () => {
   test("Reverses nodes when parameter is passed.", () => {
     setHTML`<h2 id="heading">ABC</h2>`;
 
-    const el = expandTextNodes(document.getElementById("heading"));
+    const el = defaultExpandTextNodes(document.getElementById("heading"));
     const result = walkElementNodes(el, true);
 
     expect(result[0].textContent).toEqual("C");
@@ -98,7 +112,7 @@ describe("walkElementNodes()", () => {
   test("Excludes cursor.", () => {
     setHTML`<h2 id="heading"><span>123</span><i class="ti-cursor">|</i></h2>`;
 
-    const el = expandTextNodes(document.getElementById("heading"));
+    const el = defaultExpandTextNodes(document.getElementById("heading"));
     const result = walkElementNodes(el);
     const cursor = result.find((n) => n?.classList?.contains("ti-cursor"));
 

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

@@ -1,9 +1,10 @@
 import countStepsToSelector from "../../src/helpers/countStepsToSelector";
 import { chunkStringAsHtml } from "../../src/helpers/chunkStrings";
 import Queue from "../../src/Queue";
+import { DEFAULT_OPTIONS } from "../../src/constants";
 
 let buildQueueFromString = (str) => {
-  let chunks = chunkStringAsHtml(str);
+  let chunks = chunkStringAsHtml(str, DEFAULT_OPTIONS.stringSpliterator);
   let queue = new Queue([]);
 
   chunks.forEach((char) => {

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

@@ -1,15 +1,20 @@
 import expandTextNodes from "../../src/helpers/expandTextNodes";
+import { DEFAULT_OPTIONS } from "../../src/constants";
 
 const getTextNodes = (element) => {
   return [...element.childNodes].filter((n) => n.nodeType === 3);
 };
 
+const defaultExpandTextNodes = (element) => {
+  return expandTextNodes(element, DEFAULT_OPTIONS.stringSpliterator);
+};
+
 describe("simple content", () => {
   it("expands text nodes", () => {
     setHTML(`<span>hello</span>`);
 
     const element = document.querySelector("span");
-    expandTextNodes(element);
+    defaultExpandTextNodes(element);
 
     expect(element.childNodes).toHaveLength(5);
     expect(element.innerHTML).toEqual("hello");
@@ -21,7 +26,7 @@ describe("simple HTML", () => {
     setHTML(`<span>hello, <strong>pal!</strong></span>`);
 
     const element = document.querySelector("span");
-    expandTextNodes(element);
+    defaultExpandTextNodes(element);
 
     expect(getTextNodes(element)).toHaveLength(7);
     expect(getTextNodes(element.querySelector("strong"))).toHaveLength(4);
@@ -34,7 +39,7 @@ describe("nested HTML", () => {
     setHTML(`<span>hello, <strong>there, <em>pal!</em></strong></span>`);
 
     const element = document.querySelector("span");
-    expandTextNodes(element);
+    defaultExpandTextNodes(element);
 
     expect(getTextNodes(element)).toHaveLength(7);
     expect(getTextNodes(element.querySelector("strong"))).toHaveLength(7);
@@ -50,7 +55,7 @@ describe("emojis", () => {
     setHTML(`<span>good job 👍.</span>`);
 
     const element = document.querySelector("span");
-    expandTextNodes(element);
+    defaultExpandTextNodes(element);
 
     expect(getTextNodes(element)).toHaveLength(11);
     expect(element.innerHTML).toEqual("good job 👍.");

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

@@ -1,16 +1,29 @@
 import getAllChars from "../../src/helpers/getAllChars";
 import expandTextNodes from "../../src/helpers/expandTextNodes";
+import GraphemeSplitter from "grapheme-splitter";
+import { defaultExpandTextNodes, defaultGetAllChars } from "./util";
 
 describe("element is an input", () => {
-  setHTML`
+  test("it should return the input contents", () => {
+    setHTML`
         <input id="el" type="text" value="hello!" />
     `;
 
-  test("it should return the input contents", () => {
-    const result = getAllChars(document.getElementById("el"));
+    const result = defaultGetAllChars(document.getElementById("el"));
 
     expect(result).toEqual(["h", "e", "l", "l", "o", "!"]);
   });
+  test("it should return the input contents when containing emoji", () => {
+    setHTML`
+        <input id="el" type="text" value="⬆️ m̅" />
+    `;
+    const splitter = new GraphemeSplitter();
+    const result = getAllChars(document.getElementById("el"), (str) =>
+      splitter.splitGraphemes(str)
+    );
+
+    expect(result).toEqual(["⬆️", " ", "m̅"]);
+  });
 });
 
 describe("element is not an element", () => {
@@ -19,9 +32,9 @@ describe("element is not an element", () => {
             <span id="el">howdy.</span>
         `;
 
-    expandTextNodes(document.getElementById("el"));
+    defaultExpandTextNodes(document.getElementById("el"));
 
-    const result = getAllChars(document.getElementById("el"));
+    const result = defaultGetAllChars(document.getElementById("el"));
 
     expect(result.map((n) => n.nodeValue)).toEqual([
       ".",
@@ -33,14 +46,49 @@ describe("element is not an element", () => {
     ]);
   });
 
+  test("it should return simple contents correctly when emoji are present", () => {
+    setHTML`
+            <span id="el">👍 howdy 🤯 🌷 Ĺo͂řȩm̅</span>
+        `;
+    const splitter = new GraphemeSplitter();
+
+    expandTextNodes(document.getElementById("el"), (str) =>
+      splitter.splitGraphemes(str)
+    );
+
+    const result = getAllChars(document.getElementById("el"), (str) =>
+      splitter.splitGraphemes(str)
+    );
+
+    expect(result.map((n) => n.nodeValue)).toEqual([
+      "m̅",
+      "ȩ",
+      "ř",
+      "o͂",
+      "Ĺ",
+      " ",
+      "🌷",
+      " ",
+      "🤯",
+      " ",
+      "y",
+      "d",
+      "w",
+      "o",
+      "h",
+      " ",
+      "👍",
+    ]);
+  });
+
   test("it should ignore cursor", () => {
     setHTML`
             <span id="el">greet<i class="ti-cursor">|</i>ings!</span>
         `;
 
-    expandTextNodes(document.getElementById("el"));
+    defaultExpandTextNodes(document.getElementById("el"));
 
-    const result = getAllChars(document.getElementById("el"));
+    const result = defaultGetAllChars(document.getElementById("el"));
 
     expect(result.map((n) => n.nodeValue)).toEqual([
       "!",