Update css

resources/comments.scss

@@ -208,11 +208,6 @@ a {
 }
 
 .comment-post-wrapper {
-    div {
-        padding-bottom: 2px;
-        padding-right: 10px;
-    }
-
     input, textarea {
         min-width: 100%;
         max-width: 100%;

resources/pagedown_widget.scss

@@ -1,3 +1,5 @@
+@import "vars";
+
 .wmd-panel {
     margin: 0;
     width: 100%;
@@ -14,7 +16,7 @@
     width: 100%;
     background: #fff;
     border: 1px solid DarkGray;
-    font-family: "Noto Sans",Arial,"Lucida Grande",sans-serif !important;
+    font-family: $monospace-fonts;
 }
 
 .wmd-preview {
@@ -23,8 +25,14 @@
 }
 
 .wmd-button-row {
-    margin: 10px 5px 5px;
+    margin-top: 10px;
+    margin-bottom: 5px;
     padding: 0;
+    display: flex;        /* Display as a flex container */
+    flex-wrap: nowrap;    /* Prevent items from wrapping */
+    overflow-x: auto;
+    white-space: nowrap;
+    gap: 3px;
 }
 
 .wmd-button {
@@ -37,8 +45,7 @@
     background-position: center;
     border-radius: 3px;
     cursor: pointer;
-    padding-left: 2px;
+    flex: 0 0 auto;
-    padding-right: 3px;
 }
 
 .wmd-bold-button {
@@ -124,7 +131,7 @@
 .wmd-spacer
 {
     display: inline-flex;
-    width: 20px;
+    width: 10px;
 }
 
 .wmd-prompt-background {

templates/markdown_editor/markdown_editor.html

@@ -1,21 +1,23 @@
+{% set layout='no_wrapper' %}
 {% extends "base.html" %}
 
 {% block media %}
   <style>
-    main{
+    body{
       overflow: hidden;
     }
     #content{
       width: 100%;
-    }
+      height: calc(100vh - 50px);
-    #content.wrapper{
+      margin-bottom: 0;
       padding: 0;
     }
-    .form-area{
+    #content-body {
-      float: left;
+      padding: 0;
-      width: 47%;
+      height: 100%;
-      height: 100%
+      display: flex;
     }
+
     .wmd-preview{
       float: right;
       margin-top: 0;
@@ -23,24 +25,33 @@
     .width-controller{
       width: 51%;
     }
-    .wmd-input{
+    #id_body-preview{
-      height: calc(100vh - 72px);
+      overflow: scroll;
     }
-    .right-markdown{
+    .form-area {
-      height: calc(100vh - 72px);
+      flex-grow: 1;
-      overflow-y: scroll;
-    }
-    .wrap{
-      display: flex;
     }
   </style>
 {% endblock %}
 
 {% block js_media %}
   <script>
-    $(document).ready(function(){
+    function debounce(func, wait) {
-      $("#wmd-input-id_body").on("keyup", function() {
+      let timeout;
-        const csrfToken = "{{ csrf_token }}";
+
+      return function executedFunction(...args) {
+        const context = this;
+        const later = () => {
+          clearTimeout(timeout);
+          func.apply(context, args);
+        };
+
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+      };
+    }
+
+    function update_preview() {
       $.ajax({
         url: "{{url('blog_preview')}}",
         type: 'POST',
@@ -54,27 +65,14 @@
         },
         error: function(error) {
           alert(error);
-            console.log(error.message)
+          console.log(error.message);
         }
       })
+    }
 
-      });
+    $(document).ready(function(){
-    });
+      const debounced_update_preview = debounce(update_preview, 250);
-  </script>
+      $("#wmd-input-id_body").on("keyup", debounced_update_preview);
-
-
-  <script>
-    document.addEventListener("DOMContentLoaded", function() {
-      const leftDiv = document.getElementById("wmd-input-id_body");
-      const rightDiv = document.getElementById("display");
-
-      leftDiv.addEventListener("scroll", function() {
-        rightDiv.scrollTop = leftDiv.scrollTop;
-      });
-
-      rightDiv.addEventListener("scroll", function() {
-        leftDiv.scrollTop = rightDiv.scrollTop;
-      });
     });
   </script>
 
@@ -96,7 +94,6 @@
 {% endblock %}
 
 {% block body %}
-  <div class="wrap">
   <div id="new-comment" class="form-area">
     <input type="hidden" name="parent" id="id_parent">
     <div class="comment-post-wrapper">
@@ -136,6 +133,5 @@
   <div id="id_body-preview" data-preview-url="{{url('comment_preview')}}" 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>
-  </div>
 {% endblock %}