Add styling to markdown preview

tildes/scss/modules/_form.scss

@@ -44,6 +44,16 @@ select.form-select:not([multiple]) {
   }
 }
 
+.form-markdown-preview {
+  @extend %links-text;
+  @extend %lists-text;
+
+  min-height: 8rem;
+  padding: 0.4rem;
+  border: 1px dashed;
+  overflow: auto;
+}
+
 .form-buttons {
   display: flex;
   flex-direction: row-reverse;

tildes/scss/themes/_theme_base.scss

@@ -323,6 +323,10 @@
     border-color: map-get($theme, "border");
   }
 
+  .form-markdown-preview {
+    border-color: map-get($theme, "border");
+  }
+
   .form-select {
     border-color: map-get($theme, "border");
 

tildes/static/js/behaviors/comment-reply-button.js

@@ -37,7 +37,7 @@ $.onmount('[data-js-comment-reply-button]', function() {
         clone.querySelector('form').setAttribute('data-ic-post-to', postURL);
         clone.querySelector('textarea').setAttribute('id', markdownID);
 
-        var preview = clone.querySelector('[data-js-markdown-preview]');
+        var preview = clone.querySelector('.form-markdown-preview');
         preview.setAttribute('id', previewID);
 
         clone.querySelector('[data-js-markdown-preview-tab] .btn')

tildes/static/js/behaviors/markdown-edit-tab.js

@@ -4,7 +4,7 @@
 $.onmount('[data-js-markdown-edit-tab]', function() {
     $(this).click(function(event) {
         var $editTextarea = $(this).closest('form').find('[name="markdown"]');
-        var $previewDiv = $(this).closest('form').find('[data-js-markdown-preview]');
+        var $previewDiv = $(this).closest('form').find('.form-markdown-preview');
 
         $editTextarea.removeClass('d-none');
         $previewDiv.addClass('d-none');

tildes/static/js/behaviors/markdown-preview-tab.js

@@ -4,7 +4,7 @@
 $.onmount('[data-js-markdown-preview-tab]', function() {
     $(this).click(function(event) {
         var $editTextarea = $(this).closest('form').find('[name="markdown"]');
-        var $previewDiv = $(this).closest('form').find('[data-js-markdown-preview]');
+        var $previewDiv = $(this).closest('form').find('.form-markdown-preview');
 
         $editTextarea.addClass('d-none');
         $previewDiv.removeClass('d-none');

tildes/tildes/templates/macros/forms.jinja2

@@ -28,7 +28,7 @@
       data-js-ctrl-enter-submit-form
       {% if auto_focus %}data-js-auto-focus{% endif %}
     >{% if text %}{{ text }}{% endif %}</textarea>
-    <div id="{{ id }}-preview" class="d-none" data-js-markdown-preview></div>
+    <div id="{{ id }}-preview" class="form-markdown-preview d-none"></div>
   </div>
 {% endmacro %}