From 16da9932e106134c310bd943aa1c6244ac0b9530 Mon Sep 17 00:00:00 2001
From: BaoLe106 <lgbaoo.106@gmail.com>
Date: Thu, 21 Sep 2023 01:46:00 +0800
Subject: [PATCH] markdown_editor ver2

---
 .../markdown_editor/markdown_editor.html      | 119 ++++++++++++++++--
 1 file changed, 107 insertions(+), 12 deletions(-)

diff --git a/templates/markdown_editor/markdown_editor.html b/templates/markdown_editor/markdown_editor.html
index 7da7924..b07668a 100644
--- a/templates/markdown_editor/markdown_editor.html
+++ b/templates/markdown_editor/markdown_editor.html
@@ -5,20 +5,38 @@
     main {
       overflow: hidden;
     }
+    .form-area {
+      float: left;
+      width: 47%;
+      /* height: 604px; */
+      /* background-color: #acabab;  */
+      /* padding: 20px; */
+    }
     .left-markdown{
       float: left;
       width: 47%;
-      height: 620px;
+      height: 50%;
+      /* flex: 1; */
       /* background-color: #acabab;  */
       padding: 20px;
     }
-    .right-markdown{
+    .wmd-preview{
       float: right;
-      width: 47%;
-      height: 620px;
-      background-color: #6b6b6b;
+      margin-top: 0;
+    }
+    .width-controller{
+      width: 51%;
+      /* flex: 1; */
+    }
+    .right-markdown{
+      /* float: right; */
+      /* width: 51%; */
+      height: 427px;
+      /* flex: 1; */
+      /* background-color: #6b6b6b; */
+      overflow-y: scroll;
       /* #f0f0f0;  */
-      padding: 20px;
+      /* padding: 20px; */
     }
   </style>
 {% endblock %}
@@ -26,7 +44,7 @@
 {% block body %}
   <script>
     $(document).ready(function(){
-      $("#inputField").on("keyup", function() {
+      $("#wmd-input-id_body").on("keyup", function() {
         const csrfToken = "{{ csrf_token }}";
         $.ajax({
           url: "{{url('blog_preview')}}",
@@ -49,12 +67,89 @@
       });
     });
   </script>
-  <div class="left-markdown">
-    <form id="post-form" method="POST" >
-      {% csrf_token %}
-      <textarea  id="inputField" cols="105" rows="40" value=" "></textarea>
+  <!-- <div class="left-markdown">
+        <form id="post-form" method="POST" >
+        {% csrf_token %}
+        <textarea  id="inputField" cols="105" rows="40" value=" "></textarea>
+        </form>
+    </div> -->
+  <div id="new-comment" class="form-area" style="">
+
+    <form class="comment-submit-form" action="" method="post">
+      <input type="hidden" name="csrfmiddlewaretoken" value="Ngk7TfY2iIW4e9cPitl05k1c7xNUsVk9kCTkrAFveVmmcIhjRKv4GLtItKANAvae"> <input type="hidden" name="parent" id="id_parent">
+      <div class="comment-post-wrapper">
+        <div id="comment-form-body"><div class="wmd-wrapper image-upload-enabled">
+          <div class="wmd-panel">
+            <div id="wmd-button-bar-id_body"><ul id="wmd-button-row-id_body" class="wmd-button-row">
+              <li class="wmd-button wmd-bold-button wmd-button-active" id="wmd-bold-button-id_body" title="Strong <strong> Ctrl+B"></li>
+              <li class="wmd-button wmd-italic-button wmd-button-active" id="wmd-italic-button-id_body" title="Emphasis <em> Ctrl+I"></li>
+              <li class="wmd-spacer wmd-spacer1" id="wmd-spacer1-id_body"></li>
+              <li class="wmd-button wmd-latex-button wmd-button-active" id="wmd-latex-button-id_body" title="Latex embed - Ctrl+M"></li>
+              <li class="wmd-button wmd-latex-button-display wmd-button-active" id="wmd-latex-button-display-id_body" title="Latex display embed - Ctrl+Space"></li>
+              <li class="wmd-spacer wmd-spacer2" id="wmd-spacer2-id_body"></li>
+              <li class="wmd-button wmd-link-button wmd-button-active" id="wmd-link-button-id_body" title="Hyperlink <a> Ctrl+L"></li>
+              <li class="wmd-button wmd-user-reference-button wmd-button-active" id="wmd-user-reference-button-id_body" title="User reference"></li>
+              <li class="wmd-button wmd-quote-button wmd-button-active" id="wmd-quote-button-id_body" title="Blockquote <blockquote> Ctrl+Q"></li>
+              <li class="wmd-button wmd-code-button wmd-button-active" id="wmd-code-button-id_body" title="Code Sample <pre><code> Ctrl+K"></li>
+              <li class="wmd-button wmd-image-button wmd-button-active" id="wmd-image-button-id_body" title="Image <img> Ctrl+G"></li>
+              <li class="wmd-spacer wmd-spacer3" id="wmd-spacer3-id_body"></li>
+              <li class="wmd-button wmd-olist-button wmd-button-active" id="wmd-olist-button-id_body" title="Numbered List <ol> Ctrl+O"></li>
+              <li class="wmd-button wmd-ulist-button wmd-button-active" id="wmd-ulist-button-id_body" title="Bulleted List <ul> Ctrl+U"></li>
+              <li class="wmd-button wmd-heading-button wmd-button-active" id="wmd-heading-button-id_body" title="Heading <h2>/<h2> Ctrl+H"></li>
+              <li class="wmd-button wmd-hr-button wmd-button-active" id="wmd-hr-button-id_body" title="Horizontal Rule <hr> Ctrl+R"></li>
+              <li class="wmd-spacer wmd-spacer3" id="wmd-spacer3-id_body"></li>
+              <li class="wmd-button wmd-admonition-button wmd-button-active" id="wmd-admonition-button-id_body" title="Admonition"></li>
+              <li class="wmd-button wmd-spoiler-button wmd-button-active" id="wmd-spoiler-button-id_body" title="Spoiler"></li>
+              <li class="wmd-spacer wmd-spacer4" id="wmd-spacer4-id_body"></li>
+              <li class="wmd-button wmd-undo-button wmd-button-active" id="wmd-undo-button-id_body" title="Undo - Ctrl+Z"></li>
+              <li class="wmd-button wmd-redo-button wmd-button-inactive" id="wmd-redo-button-id_body" title="Redo - Ctrl+Shift+Z"></li></ul></div>
+            <textarea id="wmd-input-id_body" class=" wmd-input" name="body" required=""></textarea>
+          </div>
+          <div id="id_body-preview" data-preview-url="/widgets/preview/comment" data-textarea-id="wmd-input-id_body" data-timeout="1000" class="wmd-panel wmd-preview dmmd-preview dmmd-no-button">
+            <div class="dmmd-preview-update"><i class="fa fa-refresh"></i> Update Preview</div>
+            <div class="dmmd-preview-content content-description"></div>
+          </div>
+          <div class="pagedown-image-upload">
+            <h2>Insert Image</h2>
+            <div class="form-row">
+              <div>
+                <label class="label">From the web</label>
+                <input class="url-input" type="text" placeholder="http://">
+              </div>
+            </div>
+            <div class="form-row">
+              <div>
+                <label class="label">From your computer</label>
+                <input class="file-input" type="file" name="image" id="file" data-action="/pagedown/image-upload/" accept="image/*">
+              </div>
+            </div>
+            <div class="submit-row">
+              <div class="submit-loading"></div>
+              <input class="submit-input show" type="submit" value="Save" name="_addanother">
+              <p class="deletelink-box"><a href="#" class="close-image-upload deletelink">Cancel</a></p>
+            </div>
+          </div>
+        </div></div>
+      </div>
+      <hr>
+      <input style="float:right" type="submit" value="Post!" class="button">
     </form>
   </div>
-  <div class="right-markdown" id="display"></div>
+
+
+  <!-- <div id="comments" class="comment-area"></div> -->
+
+  <div id="id_body-preview" data-preview-url="/widgets/preview/comment" data-textarea-id="wmd-input-id_body" data-timeout="1000" class="width-controller wmd-panel wmd-preview dmmd-preview dmmd-no-button dmmd-preview-has-content">
+    <div class="right-markdown dmmd-preview-content content-description" id="display"></div>
+
+  </div>
+
+  <!-- <script>
+        var right=document.getElementById("new-comment").style.height;
+        var left=document.getElementById("id_body-preview").style.height;
+        
+        document.getElementById('id_body-preview').style.height=right;
+        
+    </script> -->
 {% endblock %}