Fix some Markdown and add basic textarea helper

Signed-off-by: Skia <skia@libskia.so>

core/static/core/style.scss

@@ -326,7 +326,21 @@ tbody > tr {
   }
 }
 
-em {
+sup {
+  vertical-align: super;
+  font-size: smaller;
+}
+
+sub {
+  vertical-align: sub;
+  font-size: smaller;
+}
+
+b, strong {
+  font-weight: bold;
+}
+
+i, em {
   font-style: italic;
 }
 
@@ -335,7 +349,7 @@ em {
   font-weight: bold;
 }
 
-.underline {
+u, .underline {
   text-decoration: underline;
 }
 
@@ -470,21 +484,6 @@ em {
   border: solid #333 2px;
 }
 
-/*-------------------------------MARKDOWN------------------------------*/
-
-.markdown {
-  margin: 0px;
-  padding: 0px;
-  code {
-    font-family: monospace;
-    color: $white-color;
-    background: $black-color;
-    display: inline-block;
-    padding: 4px;
-    line-height: 120%;
-  }
-}
-
 /*---------------------------------PAGE--------------------------------*/
 
 .page_content {
@@ -508,15 +507,6 @@ textarea {
 /*------------------------------FORUM----------------------------------*/
 
 #forum {
-  a {
-    color: $black-color;
-  }
-
-  a:hover {
-    color: #424242;
-    text-decoration: underline;
-  }
-
   .topic {
     border: solid $primary-neutral-color 1px;
     padding: 1px;
@@ -750,3 +740,45 @@ label {
     vertical-align: middle;
   }
 }
+
+/*-------------------------------MARKDOWN------------------------------*/
+
+.markdown {
+  margin: 0px;
+  padding: 0px;
+  code {
+    font-family: monospace;
+    color: $white-color;
+    background: $black-color;
+    display: inline-block;
+    padding: 4px;
+    line-height: 120%;
+  }
+  a {
+    color: $primary-light-color;
+  }
+  a:hover {
+    text-decoration: underline;
+  }
+}
+
+.markdown_editor {
+  margin-top: 5px;
+}
+
+.markdown_editor a {
+  border: solid 1px $black-color;
+  padding: 2px;
+  min-width: 1em;
+  display: inline-block;
+  text-align: center;
+  margin: 0px 1px;
+}
+
+.markdown_editor a:hover {
+  text-decoration: none;
+  cursor: pointer;
+  box-shadow: 0px 0px 1px 1px $secondary-light-color;
+  transition: all 0.1s linear;
+}
+

core/templates/core/base.jinja

@@ -192,6 +192,74 @@ jQuery.datetimepicker.setLocale('{{ request.LANGUAGE_CODE|lower }}');
 $('.select_datetime').datetimepicker({
         format: 'Y-m-d H:i:s',
         });
+
+function add_syntax(e, choice) {
+    ta = $(e).parent().children('textarea')[0];
+    ta.focus();
+    var start = ta.selectionStart;
+    var end = ta.selectionEnd;
+    var before = ta.value.substring(0, start);
+    var after = ta.value.substring(end);
+    var between = ta.value.substring(start, end);
+    switch (choice) {
+        case "bold":
+            ta.value = before + "**" + between + "**" + after;
+            ta.selectionEnd = end + 2;
+            break;
+        case "italic":
+            ta.value = before + "*" + between + "*" + after;
+            ta.selectionEnd = end + 1;
+            break;
+        case "underline":
+            ta.value = before + "__" + between + "__" + after;
+            ta.selectionEnd = end + 2;
+            break;
+        case "strike":
+            ta.value = before + "~~" + between + "~~" + after;
+            ta.selectionEnd = end + 2;
+            break;
+        case "sub":
+            ta.value = before + "_" + between + "_" + after;
+            ta.selectionEnd = end + 1;
+            break;
+        case "sup":
+            ta.value = before + "^" + between + "^" + after;
+            ta.selectionEnd = end + 1;
+            break;
+        case "link":
+            if (between === "") {
+                between = "https://";
+            }
+            name = "{% trans %}name{% endtrans %}";
+            ta.value = before + "[" + name + "](" + between + ")" + after;
+            ta.selectionStart = start + 1;
+            ta.selectionEnd = start + 1 + name.length;
+            break;
+        case "image":
+            if (between === "") {
+                between = "{% trans %}https://path/to/image.gif{% endtrans %}";
+            }
+            alt = "{% trans %}alternative text{% endtrans %}";
+            ta.value = before + "![" + alt + "](" + between + "?42% \"{% trans %}Title{% endtrans %}\")" + after;
+            ta.selectionStart = start + 2;
+            ta.selectionEnd = start + 2 + alt.length;
+            break;
+    }
+}
+
+$(document).ready(function() {
+    textarea = $('.markdown_editor textarea');
+    editor = textarea.parent();
+    editor.prepend('<a onclick="javascript:add_syntax(this, \'image\')">{% trans %}Image{% endtrans %}</a>');
+    editor.prepend('<a onclick="javascript:add_syntax(this, \'link\')">{% trans %}Link{% endtrans %}</a>');
+    editor.prepend('<a onclick="javascript:add_syntax(this, \'sup\')"><sup>{% trans %}sup{% endtrans %}</sup></a>');
+    editor.prepend('<a onclick="javascript:add_syntax(this, \'sub\')"><sub>{% trans %}sub{% endtrans %}</sub></a>');
+    editor.prepend('<a onclick="javascript:add_syntax(this, \'strike\')"><del>{% trans %}S{% endtrans %}</del></a>');
+    editor.prepend('<a onclick="javascript:add_syntax(this, \'underline\')"><u>{% trans %}U{% endtrans %}</u></a>');
+    editor.prepend('<a onclick="javascript:add_syntax(this, \'italic\')"><i>{% trans %}I{% endtrans %}</i></a>');
+    editor.prepend('<a onclick="javascript:add_syntax(this, \'bold\')"><b>{% trans %}B{% endtrans %}</b></a>');
+    console.log(textarea.parent());
+});
         </script>
         {% endblock %}
     </body>