feature: preserve html inside target elements

[lukePeavey]

Summary

previously, all HTML inside the target element was stripped away when the text was split.

With this feature, HTML elements inside the target element(s) will be preserved when splitting text. This will make it possible to:

• Apply custom styles to specific portions of the text
• Include interactive elements such as links or buttons within split text

Example

<div id="target">Some <a href="#">active</a> text</div>

SplitType.create('#target', { types: 'lines, words, chars' })

Result

<div id="target">
  <div class="word" style="display: inline-block; position: relative">
    <div class="char" style="display: inline-block">S</div>
    <div class="char" style="display: inline-block">o</div>
    <div class="char" style="display: inline-block">m</div>
    <div class="char" style="display: inline-block">e</div>
  </div>
  <a href="#" style="display: inline-block">
    <div class="word" style="display: inline-block; position: relative">
      <div class="char" style="display: inline-block">a</div>
      <div class="char" style="display: inline-block">c</div>
      <div class="char" style="display: inline-block">t</div>
      <div class="char" style="display: inline-block">i</div>
      <div class="char" style="display: inline-block">v</div>
      <div class="char" style="display: inline-block">e</div>
    </div>
  </a>
  <div class="word" style="display: inline-block; position: relative">
    <div class="char" style="display: inline-block">t</div>
    <div class="char" style="display: inline-block">e</div>
    <div class="char" style="display: inline-block">x</div>
    <div class="char" style="display: inline-block">t</div>
  </div>
</div>

Limitations

1. Not fully compatible with splitting text into lines

If the content of a nested element spans multiple lines, it's not possible wrap each line and preserve the nested element. GSAP's plugin has the same limitation. There might be a way to solve this in the future. But for now, this feature will have the caveat that splitting lines is not fully supported.

However, nested elements can be used when splitting lines, as long as there are no line breaks in the nested elements.

TODO

• Fix: Not working with absolute position.
  
• Fix: Unexpected white space around nested elements (when splitting lines)
  Right now, when split lines is enabled, nested elements are always treated as a word boundary. This results in unwanted white space when nested elements do not align with a word boundary.
  For example:<p id="target"><em>foo</em>, barr</p>. In this case, there should be no space after the em; it should be immediately followed by a ",". Another example is nested elements that wrap part of a word: <p id="target"><em>Some</em>thing</p>.
  
• Fix: Nested elements causing unexpected line breaks (when splitting lines)
  We use the offsetTop of each word to detect natural line breaks in the text. If the offsetTop of a nested element is slightly different than the previous word, it will trigger a line break. This often results in unwanted line breaks, especially with nested elements such as <button>. It should be possible to include nested elements that have padding/height/borders etc.
• Add storybook examples and tests for this feature
• Update documentation

For #3