[FIX] put cursor inside html

closes #624

Author: yelizariev

assets/demos.js

@@ -118,6 +118,18 @@ document.addEventListener('DOMContentLoaded', function () {
     backSpeed: 0,
     loop: true,
   });
+
+  new Typed("#typed7", {
+      stringsElement: '#typed-strings-2',
+      backSpeed: 10,
+      typeSpeed: 30,
+      backDelay: 3000,
+      cursorChar: "🐫",
+      smartBackspace: true,
+      loop: true,
+  });
+
+
 });
 
 function prettyLog(str) {

index.html

@@ -161,6 +161,57 @@ <h2 id="bulk">Bulk Typing</h2>
   });
     </code>
   </pre>
+
+
+      <hr />
+
+      <h2 id="basic">Article</h2>
+      <div class="type-wrap">
+        <div id="typed-strings-2"><span>
+
+        <h1>A long time ago in a galaxy far, far away....</h1>
+        <p>
+            The JavaScript universe was in disarray, with developers struggling to bring order to their code. Amidst this chaos, a powerful library emerged from the digital cosmos: <strong>typed.umd.js</strong>. Forged by the ingenious minds at Yargs, this Universal Module Definition (UMD) compatible artifact became a beacon of hope for those seeking to wield the Force of type safety in their JavaScript projects.
+        </p>
+        <p>
+            <strong>Typed.umd.js</strong> is a lightweight, versatile library designed to enhance JavaScript with static typing capabilities, bridging the gap between the dynamic nature of the language and the structured discipline of TypeScript-like environments. Compatible with Node.js, browsers, and various module systems (CommonJS, AMD, and global scripts), it empowers developers to define and enforce type contracts across their applications, reducing errors and boosting maintainability.
+        </p>
+        <h2>Key Features of typed.umd.js</h2>
+        <ul>
+            <li><strong>Type Annotations</strong>: Seamlessly integrate type definitions into JavaScript code, allowing for runtime type checking without the need for a full TypeScript setup.</li>
+            <li><strong>Cross-Platform Compatibility</strong>: Its UMD format ensures it works in any environment, from ancient browser scripts to modern Node.js modules.</li>
+            <li><strong>Minimal Footprint</strong>: Lightweight and unobtrusive, it adds type safety without bloating your project.</li>
+            <li><strong>Interoperability</strong>: Plays well with existing JavaScript ecosystems, making it easy to adopt incrementally in legacy codebases.</li>
+        </ul>
+        <p>
+            Developers across the galaxy have hailed <strong>typed.umd.js</strong> as a unifying force, enabling them to write robust, scalable code while maintaining the flexibility of JavaScript. Whether you're building a starship-grade web application or a small utility droid, this library is your ally in the battle against runtime errors.
+        </p>
+        <p>
+            To harness its power, simply include <strong>typed.umd.js</strong> in your project via a CDN or npm (<code>npm install typed</code>), and start defining types like a Jedi Master crafting a lightsaber. For full documentation, consult the ancient texts at the <a href="https://github.com/yargs/typed.js" target="_blank">Yargs GitHub repository</a>.
+        </p>
+        <p><strong>May the types be with you!</strong></p>
+
+
+
+        </span></div>
+        <span id="typed7">Typed</span>
+      </div>
+
+      <pre>
+    <code class="javascript">
+  var typed = new Typed("#typed7", {
+    stringsElement: '#typed-strings-2',
+    backSpeed: 10,
+    typeSpeed: 30,
+    backDelay: 3000,
+    cursorChar: "🐫",
+    smartBackspace: true
+  });
+    </code>
+  </pre>
+
+
+
     </div>
 
     <script type="text/javascript">

src/typed.js

@@ -332,6 +332,14 @@ export default class Typed {
     if (this.pause.status) return;
     if (this.cursorBlinking === isBlinking) return;
     this.cursorBlinking = isBlinking;
+    const typedCursor = this.el.querySelector('#cursor');
+    if (typedCursor){
+        if (isBlinking) {
+            typedCursor.classList.add('typed-cursor--blink');
+        } else {
+            typedCursor.classList.remove('typed-cursor--blink');
+        }
+    }
     if (isBlinking) {
       this.cursor.classList.add('typed-cursor--blink');
     } else {
@@ -391,7 +399,7 @@ export default class Typed {
       if (this.isInput) {
         this.el.value = str;
       } else if (this.contentType === 'html') {
-        this.el.innerHTML = str;
+        this.el.innerHTML = str + this.cursor.outerHTML;
       } else {
         this.el.textContent = str;
       }
@@ -424,9 +432,11 @@ export default class Typed {
     if (!this.showCursor) return;
     if (this.cursor) return;
     this.cursor = document.createElement('span');
+    this.cursor.id = "cursor";
     this.cursor.className = 'typed-cursor';
     this.cursor.setAttribute('aria-hidden', true);
     this.cursor.innerHTML = this.cursorChar;
+    if (this.contentType === 'html') return;
     this.el.parentNode &&
       this.el.parentNode.insertBefore(this.cursor, this.el.nextSibling);
   }