MarkdownEditor.

Web/templates/dashboard/blog_page.html.ep

@@ -29,11 +29,8 @@
     </div>
 
     <div class="mb-3">
-        <label for="pageContent" class="form-label">
+        <label for="pageContent" class="form-label">Page Content</label>
-            Page Content - 
+        <textarea class="form-control" id="markdown_editor_panel" name="pageContent" rows="25"></textarea>
-            See <a target="_blank" href="https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax">Markdown Syntax Docs</a>
-        </label>
-        <textarea class="form-control" id="pageContent" name="pageContent" rows="25"></textarea>
     </div>
 
     <div class="mb-3">

Web/templates/dashboard/blog_page_edit.html.ep

@@ -18,11 +18,8 @@
     </div>
 
     <div class="mb-3">
-        <label for="pageContent" class="form-label">
+        <label for="pageContent" class="form-label">Page Content</label>
-            Page Content - 
+        <textarea class="form-control" id="markdown_editor_panel" name="pageContent" rows="25"><%= $blog_page->markdown %></textarea>
-            See <a target="_blank" href="https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax">Markdown Syntax Docs</a>
-        </label>
-        <textarea class="form-control" id="pageContent" name="pageContent" rows="25"><%= $blog_page->markdown %></textarea>
     </div>
 
     <div class="mb-3">

Web/templates/dashboard/blog_post.html.ep

@@ -29,11 +29,7 @@
 
     <div class="row">
         <div class="mb-3">
-            <label for="postContent" class="form-label">
+            <textarea class="form-control" id="markdown_editor_panel" name="postContent" rows="25"><%= $c->stash->{form_content} %></textarea>
-                Post Content - 
-                See <a target="_blank" href="https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax">Markdown Syntax Docs</a>
-            </label>
-            <textarea class="form-control" id="postContent" name="postContent" rows="25"><%= $c->stash->{form_content} %></textarea>
         </div>
     </div>
 

Web/templates/dashboard/blog_post_edit.html.ep

@@ -23,21 +23,16 @@
     </div>
 
     <div class="row">
-        <div class="mt-3">
+        <div class="mt-3 mb-3">
             <input type="submit" class="btn btn-primary btn-sm float-end" width="100%" value="Update Post">
         </div>
     </div>
 
     <div class="row">
         <div class="mb-3">
-            <label for="postContent" class="form-label">
+            <textarea class="form-control" id="markdown_editor_panel" name="postContent" rows="25"><%= $post->markdown %></textarea>
-                Post Content - 
-                See <a target="_blank" href="https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax">Markdown Syntax Docs</a>
-            </label>
-            <textarea class="form-control" id="postContent" name="postContent" rows="25"><%= $post->markdown %></textarea>
         </div>
     </div>
-
 </form>
 
 <a href="<%= $c->url_for( 'show_dashboard_blog_post_alter', { id => $blog->id } )->query(mdfile => $post->filename)  %>">Advanced Editor</a>

Web/templates/layouts/standard.html.ep

@@ -32,6 +32,21 @@
         <meta http-equiv="refresh" content="<%= $c->stash->{http_refresh} %>">
     % }
 
+    <!-- Markdown Editor -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
+    <script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
+
+    <!-- Syntax hilighting, used by Markdown Editor -->
+    <script src="https://cdn.jsdelivr.net/highlight.js/latest/highlight.min.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/highlight.js/latest/styles/github.min.css">
+
+    <!-- The Markdown Editor side by side and fullscreen panels need this CSS code, otherwise the sidebar and
+        header overlay the editor. https://github.com/sparksuite/simplemde-markdown-editor/issues/610
+    -->
+    <style>
+        .editor-toolbar.fullscreen, .CodeMirror-fullscreen { z-index: 1021 !important; }
+    </style>
+
 </head>
 <body>
     <header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
@@ -183,6 +198,12 @@
     <script src="/assets/js/dashboard.js"></script>
     
     <script type="text/javascript">
+        var simplemde = new SimpleMDE({
+            element: document.getElementById("markdown_editor_panel"),
+            promptURLs: true,
+            codeSyntaxHighlighting: true,
+        });
+
         $(document).ready(function () {
             flatpickr('.datepicker', {
                 enableTime: true,