Side-by-side live editing for markdown

InvenTree/InvenTree/settings.py

@@ -17,6 +17,8 @@ import logging
 import tempfile
 import yaml
 
+from datetime import datetime
+
 from django.utils.translation import gettext_lazy as _
 
 
@@ -163,6 +165,9 @@ REST_FRAMEWORK = {
 
 WSGI_APPLICATION = 'InvenTree.wsgi.application'
 
+# Markdown configuration
+MARKDOWNX_MEDIA_PATH = datetime.now().strftime('markdownx/%Y/%m/%d')
+
 DATABASES = {}
 
 """

InvenTree/InvenTree/static/css/inventree.css

@@ -5,6 +5,29 @@
     --basic-color: #333;
 }
 
+.markdownx .row {
+    margin: 5px;
+    padding: 5px;
+    border: 1px solid #cce;
+    border-radius: 4px;
+}
+
+.markdownx-editor {
+    width: 100%;
+    border: 1px solid #cce;
+    border-radius: 3px;
+    padding: 10px;
+}
+
+.panel-content {
+    padding: 10px;
+}
+
+.markdownx-preview {
+    border: 1px solid #cce;
+    border-radius: 3px;
+    padding: 10px;
+}
 
 .qr-code {
     max-width: 400px;

InvenTree/part/templates/markdownx/widget.html

@@ -0,0 +1,10 @@
+{% load i18n %}
+
+<div class="markdownx row">
+    <div class="markdown col-md-6">
+        {% include 'django/forms/widgets/textarea.html' %}
+    </div>
+    <div class="markdown col-md-6">
+        <div class="markdownx-preview"></div>
+    </div>
+</div>

InvenTree/part/templates/part/notes.html

@@ -17,7 +17,8 @@
     
     {{ form }}
 
-    <input type="submit" value="Update" />
+    <input type="submit" value='{% trans "Save Notes" %}'/>
+    
 </form>
 
 {{ form.media }}
@@ -25,7 +26,11 @@
 {% else %}
 
 <div class='panel panel-default'>
-    <div class='panel-body'>
+    <div class='panel-heading'>
+        {% trans "Notes" %}
+        <button class='btn btn-default' id='edit-notes'>Edit</button>
+    </div>
+    <div class='panel-content'>
         {{ part.notes | markdownify }}
     </div>
 </div>
@@ -33,3 +38,11 @@
 {% endif %}
 
 {% endblock %}
+
+{% block js_ready %}
+
+$("#edit-notes").click(function() {
+    location.href = "{% url 'part-notes' part.id %}?edit=1";
+});
+
+{% endblock %}