Refactor, fix various edge cases

Added HTML output tests

src/textmarked.js

@@ -497,33 +497,35 @@ function TextMarked(textarea, settings = {}) {
       _lines.push(
         line
 
-          // Heading
-          .replace(/^#\s(.*)$/gm, '<h1>$1</h1>')
+        // Heading
+        .replace(/^#\s(.*)$/g, '<h1>$1</h1>')
 
-          // Bold
-          .replace(/\*\*(.*)\*\*/gm, '<strong>$1</strong>')
+        // Bold
+        .replace(/\*\*(.*)\*\*/g, '<strong>$1</strong>')
 
-          // Italic
-          .replace(/\*(.*)\*/gm, '<em>$1</em>')
+        // Italic
+        .replace(/\*(.*)\*/g, '<em>$1</em>')
 
-          // Blockquote
-          .replace(/^>\s(.*)$/gm, '<blockquote>$1</blockquote>')
+        // Blockquote
+        .replace(/^>\s(.*)$/g, '<blockquote>$1</blockquote>')
 
-          // Code
-          .replace(/`(.*)`/gm, '<code>$1</code>')
+        // Code
+        .replace(/`(.*)`/g, '<code>$1</code>')
 
-          // Horizontal-Rule
-          .replace(/^---$/gm, '<hr />')
+        // Horizontal-Rule
+        .replace(/^---$/g, '<hr>')
 
-          // Link
-          .replace(/^\[(.*)\]\((.*)\)$/gm, '<a href="$1">$2</a>')
+        // Image
+        .replace(/!\[([^()]+)\]\(([^()]+)\)/g, '<img src="$2" alt="$1">')
 
-          // Image
-          .replace(/^!\[(.*)\]\((.*)\)$/gm, '<img src="$1" alt="$2">')
+        // Link
+        .replace(/\[([^()]+)\]\(([^()]+)\)/g, '<a href="$2">$1</a>')
       );
 
-      // Correct break lines.
-      if (line === "" && /(h1|blockquote|hr)>$/.test(_lines[_lines.length - 2])) {
+      // Remove <BR> following a block element.
+      const lastLine = _lines[_lines.length - 2];
+
+      if (line === "" && /(h1|blockquote|hr)>$/.test(lastLine)) {
         _lines.pop();
       }
     }

test/e2e/markup.js

@@ -0,0 +1,43 @@
+'use strict';
+
+import {browser, expect, $} from '@wdio/globals';
+
+describe('HTML output', function() {
+  let editor;
+
+  beforeEach(async function() {
+    await browser.url(`${process.cwd()}/demo/index.html`);
+
+    editor = await $('.textmarked');
+  });
+
+  describe('Content', function() {
+    const text = `
+# The Raven
+
+> But the raven, sitting lonely on the placid bust, spoke only That one word, as if his soul in that one word he did outpour.
+
+Ravens in \`stories\` often act as [psychopomps](https://en.wikipedia.org/wiki/Psychopomp), connecting the **material world** with the *world of spirits*.
+
+---
+
+![Raven](https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Head_of_Raven.jpg/1920px-Head_of_Raven.jpg)
+    `;
+
+    it('should have value', async function() {
+      await editor.$('.content').addValue(text);
+
+      await $('#preview-button').click();
+
+      const output = await $('#output').getHTML();
+
+      await expect(output).toMatch('<h1>The Raven</h1>');
+      await expect(output).toMatch('<blockquote>But the raven, sitting lonely on the placid bust, spoke only That one word, as if his soul in that one word he did outpour.</blockquote>');
+      await expect(output).toMatch('<code>stories</code>');
+      await expect(output).toMatch('<a href="https://en.wikipedia.org/wiki/Psychopomp">psychopomps</a>');
+      await expect(output).toMatch('<strong>material world</strong>');
+      await expect(output).toMatch('<em>world of spirits</em>')
+      await expect(output).toMatch('<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Head_of_Raven.jpg/1920px-Head_of_Raven.jpg" alt="Raven">');
+    });
+  });
+});