+ real time markdown preview

Also created admin plugin templates for the Bootstrap theme

src/Plugins/Admin/AdminPlugin.php

@@ -101,7 +101,7 @@ class AdminPlugin extends AntPlugin
     {
         $antCMS = new AntCMS;
         $pageTemplate = $antCMS->getPageLayout();
-        $HTMLTemplate = $antCMS->getThemeTemplate('textarea_edit_layout');
+        $HTMLTemplate = $antCMS->getThemeTemplate('markdown_edit_layout');
         $pages = AntPages::getPages();
         $currentConfig = AntConfig::currentConfig();
 

src/Themes/Bootstrap/Templates/markdown_edit_layout.html

@@ -0,0 +1,31 @@
+<div class="container">
+  <div class="row">
+    <div class="col-md-6">
+      <h3>Page Content</h3>
+      <form action="<!--AntCMS-ActionURL-->" method="post">
+        <textarea id="markdown-input" name="textarea" rows="100" style="width: 100%; height: 100%;"
+          class="form-control"><!--AntCMS-TextAreaContent--></textarea>
+        <input type="submit" value="Save">
+      </form>
+    </div>
+
+    <div class="col-md-6">
+      <h3>Page Preview</h3>
+      <div id="markdown-output"></div>
+      <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+      <script>
+        const input = document.getElementById("markdown-input");
+        const output = document.getElementById("markdown-output");
+
+        function parseMarkdown() {
+          const inputValue = input.value.replace(/--AntCMS--.*--AntCMS--/s, "");
+          output.innerHTML = marked.parse(inputValue);
+        }
+
+        parseMarkdown();
+
+        input.addEventListener("input", parseMarkdown);
+      </script>
+    </div>
+  </div>
+</div>

src/Themes/Bootstrap/Templates/textarea_edit_layout.html

@@ -0,0 +1,5 @@
+<form action="<!--AntCMS-ActionURL-->" method="post">
+  <textarea name="textarea" rows="25" cols="75" type="text" <textarea id="markdown-input" name="textarea" rows="100"
+    style="width: 100%; height: 100%;" class="form-control"><!--AntCMS-TextAreaContent--></textarea>
+  <input type="submit" value="Save">
+</form>

src/Themes/Default/Templates/markdown_edit_layout.html

@@ -0,0 +1,31 @@
+<div class="container mx-auto">
+  <div class="flex">
+    <div class="w-1/2">
+      <h3 class="text-2xl font-bold">Page Content</h3>
+      <form action="<!--AntCMS-ActionURL-->" method="post">
+        <textarea id="markdown-input" name="textarea" rows="100" style="width: 100%; height: 100%;"
+        class="form-textarea p-3 border-gray-200 bg-gray-100 dark:bg-zinc-900 dark:border-gray-700"><!--AntCMS-TextAreaContent--></textarea>
+        <input type="submit" value="Save">
+      </form>
+    </div>
+
+    <div class="w-1/2">
+      <h3 class="text-2xl font-bold">Page Preview</h3>
+      <div id="markdown-output"></div>
+      <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+      <script>
+        const input = document.getElementById("markdown-input");
+        const output = document.getElementById("markdown-output");
+
+        function parseMarkdown() {
+          const inputValue = input.value.replace(/--AntCMS--.*--AntCMS--/s, "");
+          output.innerHTML = marked.parse(inputValue);
+        }
+
+        parseMarkdown();
+
+        input.addEventListener("input", parseMarkdown);
+      </script>
+    </div>
+  </div>
+</div>