Add a MarkdownInput widget, and make use of it

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

core/static/core/style.scss

@@ -515,6 +515,12 @@ textarea {
       margin: 1px;
       font-size: smaller;
     }
+    a {
+      color: $black-color;
+    }
+    a:hover {
+      text-decoration: underline;
+    }
   }
 
   .tools {
@@ -551,6 +557,12 @@ textarea {
       margin: 1px;
       font-size: smaller;
     }
+    a {
+      color: $black-color;
+    }
+    a:hover {
+      text-decoration: underline;
+    }
   }
 
   .category {

core/templates/core/base.jinja

@@ -248,8 +248,7 @@ function add_syntax(e, choice) {
 }
 
 $(document).ready(function() {
-    textarea = $('.markdown_editor textarea');
-    editor = textarea.parent();
+    editor = $('.markdown_editor');
     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>');
@@ -258,7 +257,6 @@ $(document).ready(function() {
     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 %}

core/views/forms.py

@@ -27,7 +27,7 @@ from django import forms
 from django.db import transaction
 from django.core.exceptions import ValidationError
 from django.contrib.auth import logout, login, authenticate
-from django.forms import CheckboxSelectMultiple, Select, DateInput, TextInput, DateTimeInput
+from django.forms import CheckboxSelectMultiple, Select, DateInput, TextInput, DateTimeInput, Textarea
 from django.utils.translation import ugettext_lazy as _
 from django.utils.translation import ugettext
 from phonenumber_field.widgets import PhoneNumberInternationalFallbackWidget
@@ -73,6 +73,13 @@ class SelectDate(DateInput):
             attrs = {'class': "select_date"}
         return super(SelectDate, self).render(name, value, attrs)
 
+class MarkdownInput(Textarea):
+    def render(self, name, value, attrs=None):
+        output = '<div class="markdown_editor">%(content)s</div>' % {
+                'content': super(MarkdownInput, self).render(name, value, attrs),
+                }
+        return output
+
 class SelectFile(TextInput):
     def render(self, name, value, attrs=None):
         if attrs:

core/views/page.py

@@ -30,10 +30,10 @@ from django.views.generic.edit import UpdateView, CreateView, DeleteView
 from django.contrib.auth.decorators import login_required, permission_required
 from django.utils.decorators import method_decorator
 from django.forms.models import modelform_factory
-from django.forms import CheckboxSelectMultiple
+from django.forms import CheckboxSelectMultiple, modelform_factory
 
 from core.models import Page, PageRev, LockError
-from core.views.forms import PagePropForm
+from core.views.forms import PagePropForm, MarkdownInput
 from core.views import CanViewMixin, CanEditMixin, CanEditPropMixin, CanCreateMixin
 
 class PageListView(CanViewMixin, ListView):
@@ -147,7 +147,7 @@ class PagePropView(CanEditPropMixin, UpdateView):
 
 class PageEditView(CanEditMixin, UpdateView):
     model = PageRev
-    fields = ['title', 'content',]
+    form_class = modelform_factory(model=PageRev, fields=['title', 'content',], widgets={'content': MarkdownInput})
     template_name = 'core/pagerev_edit.jinja'
 
     def get_object(self):