Merge pull request #2816 from SchrodingersGat/markdown-editor

Markdown editor

InvenTree/InvenTree/test_views.py

@@ -72,7 +72,7 @@ class ViewTests(TestCase):
         """
 
         # Change this number as more javascript files are added to the index page
-        N_SCRIPT_FILES = 38
+        N_SCRIPT_FILES = 39
 
         content = self.get_index_page()
 

InvenTree/build/templates/build/detail.html

@@ -3,7 +3,6 @@
 {% load i18n %}
 {% load inventree_extras %}
 {% load status_codes %}
-{% load markdownify %}
 
 {% block sidebar %}
 {% include "build/sidebar.html" %}
@@ -309,24 +308,16 @@
 
 <div class='panel panel-hidden' id='panel-notes'>
     <div class='panel-heading'>
-        <div class='row'>
+        <div class='d-flex flex-wrap'>
-            <div class='col-sm-6'>
+            <h4>{% trans "Build Notes" %}</h4>
-                <h4>{% trans "Build Notes" %}</h4>
+            {% include "spacer.html" %}
-            </div>
+            <div class='btn-group' role='group'>
-            <div class='col-sm-6'>
+                {% include "notes_buttons.html" %}
-                <div class='btn-group float-right'>
-                    <button type='button' id='edit-notes' title='{% trans "Edit Notes" %}' class='btn btn-small btn-outline-secondary'>
-                        <span class='fas fa-edit'>      
-                        </span>
-                    </button>
-                </div>
             </div>
         </div>
     </div>
     <div class='panel-content'>
-        {% if build.notes %}
+        <textarea id='build-notes'></textarea>
-        {{ build.notes | markdownify }}
-        {% endif %}
     </div>
 </div>
 
@@ -392,17 +383,18 @@ onPanelLoad('attachments', function() {
 });
 
 onPanelLoad('notes', function() {
-    $('#edit-notes').click(function() {
+
-        constructForm('{% url "api-build-detail" build.pk %}', {
+    setupNotesField(
-            fields: {
+        'build-notes',
-                notes: {
+        '{% url "api-build-detail" build.pk %}',
-                    multiline: true,
+        {
-                }
+            {% if roles.build.change %}
-            },
+            editable: true,
-            title: '{% trans "Edit Notes" %}',
+            {% else %}
-            reload: true,
+            editable: false,
-        });
+            {% endif %}
-    });
+        }
+    );
 });
 
 function reloadTable() {

InvenTree/company/templates/company/detail.html

@@ -1,7 +1,6 @@
 {% extends "company/company_base.html" %}
 {% load static %}
 {% load i18n %}
-{% load markdownify %}
 
 {% block sidebar %}
 {% include 'company/sidebar.html' %}
@@ -181,24 +180,16 @@
 
 <div class='panel panel-hidden' id='panel-company-notes'>
     <div class='panel-heading'>
-        <div class='row'>
+        <div class='d-flex flex-wrap'>
-            <div class='col-sm-6'>
+            <h4>{% trans "Company Notes" %}</h4>
-                <h4>{% trans "Company Notes" %}</h4>
+            {% include "spacer.html" %}
-            </div>
+            <div class='btn-group' role='group'>
-            <div class='col-sm-6'>
+                {% include "notes_buttons.html" %}
-                <div class='btn-group float-right'>
-                    <button type='button' id='edit-notes' title='{% trans "Edit Notes" %}' class='btn btn-small btn-outline-secondary'>
-                        <span class='fas fa-edit'>      
-                        </span>
-                    </button>
-                </div>
             </div>
         </div>
     </div>
     <div class='panel-content'>
-        {% if company.notes %}
+        <textarea id='company-notes'></textarea>
-        {{ company.notes | markdownify }}
-        {% endif %}
     </div>
 </div>
 
@@ -207,16 +198,15 @@
 {% block js_ready %}
 {{ block.super }}
 
-    $('#edit-notes').click(function() {
+    onPanelLoad('company-notes', function() {
-        constructForm('{% url "api-company-detail" company.pk %}', {
+
-            fields: {
+        setupNotesField(
-                notes: {
+            'company-notes',
-                    multiline: true,
+            '{% url "api-company-detail" company.pk %}',
-                }
+            {
-            },
+                editable: true,
-            title: '{% trans "Edit Notes" %}',
+            }
-            reload: true,
+        )
-        });
     });
 
     loadStockTable($("#assigned-stock-table"), {
@@ -230,18 +220,37 @@
         filterTarget: '#filter-list-customerstock',
     });
 
-    {% if company.is_customer %}
+    onPanelLoad('company-stock', function() {
-    loadSalesOrderTable("#sales-order-table", {
+
-        url: "{% url 'api-so-list' %}",
+        loadStockTable($('#stock-table'), {
-        params: {
+            url: "{% url 'api-stock-list' %}",
-            customer: {{ company.id }},
+            params: {
-        }
+                company: {{ company.id }},
+                part_detail: true,
+                supplier_part_detail: true,
+                location_detail: true,
+            },
+            buttons: [
+                '#stock-options',
+            ],
+            filterKey: "companystock",
+        });
     });
 
-    $("#new-sales-order").click(function() {
+    {% if company.is_customer %}
+    onPanelLoad('panel-sales-orders', function() {
+        loadSalesOrderTable("#sales-order-table", {
+            url: "{% url 'api-so-list' %}",
+            params: {
+                customer: {{ company.id }},
+            }
+        });
 
-        createSalesOrder({
+        $("#new-sales-order").click(function() {
-            customer: {{ company.pk }},
+
+            createSalesOrder({
+                customer: {{ company.pk }},
+            });
         });
     });
     {% endif %}
@@ -270,20 +279,6 @@
 
     {% endif %}
 
-    loadStockTable($('#stock-table'), {
-        url: "{% url 'api-stock-list' %}",
-        params: {
-            company: {{ company.id }},
-            part_detail: true,
-            supplier_part_detail: true,
-            location_detail: true,
-        },
-        buttons: [
-            '#stock-options',
-        ],
-        filterKey: "companystock",
-    });
-
     {% if company.is_manufacturer %}
 
     function reloadManufacturerPartTable() {

InvenTree/order/templates/order/purchase_order_detail.html

@@ -4,7 +4,6 @@
 {% load status_codes %}
 {% load i18n %}
 {% load static %}
-{% load markdownify %}
 
 {% block sidebar %}
 {% include 'order/po_sidebar.html' %}
@@ -71,24 +70,16 @@
 
 <div class='panel panel-hidden' id='panel-order-notes'>
     <div class='panel-heading'>
-        <div class='row'>
+        <div class='d-flex flex-wrap'>
-            <div class='col-sm-6'>
+            <h4>{% trans "Order Notes" %}</h4>
-                <h4>{% trans "Order Notes" %}</h4>
+            {% include "spacer.html" %}
-            </div>
+            <div class='btn-group' role='group'>
-            <div class='col-sm-6'>
+                {% include "notes_buttons.html" %}
-                <div class='btn-group float-right'>
-                    <button type='button' id='edit-notes' title='{% trans "Edit Notes" %}' class='btn btn-outline-secondary'>
-                        <span class='fas fa-edit'>      
-                        </span>
-                    </button>
-                </div>
             </div>
         </div>
     </div>
     <div class='panel-content'>
-        {% if order.notes %}
+        <textarea id='order-notes'></textarea>
-        {{ order.notes | markdownify }}
-        {% endif %}
     </div>
 </div>
 
@@ -98,16 +89,18 @@
 
 {{ block.super }}
 
-    $('#edit-notes').click(function() {
+    onPanelLoad('order-notes', function() {
-        constructForm('{% url "api-po-detail" order.pk %}', {
+        setupNotesField(
-            fields: {
+            'order-notes',
-                notes: {
+            '{% url "api-po-detail" order.pk %}',
-                    multiline: true,
+            {
-                }
+                {% if roles.purchase_order.change %}
-            },
+                editable: true,
-            title: '{% trans "Edit Notes" %}',
+                {% else %}
-            reload: true,
+                editable: false,
-        });
+                {% endif %}
+            }
+        );
     });
 
     enableDragAndDrop(

InvenTree/order/templates/order/sales_order_detail.html

@@ -4,7 +4,6 @@
 {% load status_codes %}
 {% load i18n %}
 {% load static %}
-{% load markdownify %}
 
 {% block sidebar %}
 {% include "order/so_sidebar.html"  %}
@@ -118,24 +117,16 @@
 
 <div class='panel panel-hidden' id='panel-order-notes'>
     <div class='panel-heading'>
-        <div class='row'>
+        <div class='d-flex flex-wrap'>
-            <div class='col-sm-6'>
+            <h4>{% trans "Order Notes" %}</h4>
-                <h4>{% trans "Order Notes" %}</h4>
+            {% include "spacer.html" %}
-            </div>
+            <div class='btn-group' role='group'>
-            <div class='col-sm-6'>
+                {% include "notes_buttons.html" %}
-                <div class='btn-group float-right'>
-                    <button type='button' id='edit-notes' title='{% trans "Edit Notes" %}' class='btn outline-secondary'>
-                        <span class='fas fa-edit'>      
-                        </span>
-                    </button>
-                </div>
             </div>
         </div>
     </div>
     <div class='panel-content'>
-        {% if order.notes %}
+        <textarea id='order-notes'></textarea>
-        {{ order.notes | markdownify }}
-        {% endif %}
     </div>
 </div>
 
@@ -176,16 +167,18 @@
         });
     });
 
-    $('#edit-notes').click(function() {
+    onPanelLoad('order-notes', function() {
-        constructForm('{% url "api-so-detail" order.pk %}', {
+        setupNotesField(
-            fields: {
+            'order-notes',
-                notes: {
+            '{% url "api-so-detail" order.pk %}',
-                    multiline: true,
+            {
-                }
+                {% if roles.purchase_order.change %}
-            },
+                editable: true,
-            title: '{% trans "Edit Notes" %}',
+                {% else %}
-            reload: true,
+                editable: false,
-        });
+                {% endif %}
+            }
+        );
     });
 
     enableDragAndDrop(

InvenTree/part/templates/part/detail.html

@@ -3,7 +3,6 @@
 {% load i18n %}
 {% load inventree_extras %}
 {% load crispy_forms_tags %}
-{% load markdownify %}
 
 {% block sidebar %}
 {% include 'part/part_sidebar.html' %}
@@ -134,24 +133,16 @@
 
 <div class='panel panel-hidden' id='panel-part-notes'>
     <div class='panel-heading'>
-        <div class='row'>
+        <div class='d-flex flex-wrap'>
-            <div class='col-sm-6'>
+            <h4>{% trans "Part Notes" %}</h4>
-                <h4>{% trans "Notes" %}</h4>
+            {% include "spacer.html" %}
-            </div>
+            <div class='btn-group' role='group'>
-            <div class='col-sm-6'>
+                {% include "notes_buttons.html" %}
-                <div class='btn-group float-right'>
-                    <button type='button' id='edit-notes' title='{% trans "Edit Notes" %}' class='btn btn-outline-secondary'>
-                        <span class='fas fa-edit'>      
-                        </span>
-                    </button>
-                </div>
             </div>
         </div>
     </div>
     <div class='panel-content'>
-        {% if part.notes %}
+        <textarea id='part-notes'></textarea>
-        {{ part.notes | markdownify }}
-        {% endif %}
     </div>
 </div>
 
@@ -419,6 +410,18 @@
 {% block js_ready %}
     {{ block.super }}
 
+    // Load the "notes" tab
+    onPanelLoad('part-notes', function() {
+
+        setupNotesField(
+            'part-notes',
+            '{% url "api-part-detail" part.pk %}',
+            {
+                editable: {% if roles.part.change %}true{% else %}false{% endif %},
+            }
+        );
+    });
+
     // Load the "scheduling" tab
     onPanelLoad('scheduling', function() {
         loadPartSchedulingChart('part-schedule-chart', {{ part.pk }});
@@ -832,36 +835,6 @@
         });
     });
 
-    $('#edit-notes').click(function() {
-        constructForm('{% url "api-part-detail" part.pk %}', {
-            fields: {
-                notes: {
-                    multiline: true,
-                }
-            },
-            title: '{% trans "Edit Part Notes" %}',
-            reload: true,
-        });
-    });
-
-    $(".slidey").change(function() {
-        var field = $(this).attr('fieldname');
-
-        var checked = $(this).prop('checked');
-
-        var data = {};
-
-        data[field] = checked;
-        // Update the particular field
-        inventreePut("{% url 'api-part-detail' part.id %}",
-            data,
-            {
-                method: 'PATCH',
-                reloadOnSuccess: true,
-            },
-        );
-    });
-
     onPanelLoad("part-parameters", function() {
         loadPartParameterTable(
             '#parameter-table', 

InvenTree/report/templates/report/inventree_po_report.html

@@ -4,7 +4,6 @@
 {% load report %}
 {% load barcode %}
 {% load inventree_extras %}
-{% load markdownify %}
 
 {% block page_margin %}
 margin: 2cm;

InvenTree/stock/templates/stock/item.html

@@ -4,7 +4,6 @@
 {% load inventree_extras %}
 {% load i18n %}
 {% load l10n %}
-{% load markdownify %}
 
 {% block sidebar %}
 {% include "stock/stock_sidebar.html" %}
@@ -133,24 +132,16 @@
 
 <div class='panel panel-hidden' id='panel-notes'>
     <div class='panel-heading'>
-        <div class='row'>
+        <div class='d-flex flex-wrap'>
-            <div class='col-sm-6'>
+            <h4>{% trans "Stock Item Notes" %}</h4>
-                <h4>{% trans "Stock Item Notes" %}</h4>
+            {% include "spacer.html" %}
-            </div>
+            <div class='btn-group' role='group'>
-            <div class='col-sm-6'>
+                {% include "notes_buttons.html" %}
-                <div class='btn-group float-right'>
-                    <button type='button' id='edit-notes' title='{% trans "Edit Notes" %}' class='btn btn-small btn-outline-secondary'>
-                        <span class='fas fa-edit'>      
-                        </span>
-                    </button>
-                </div>
             </div>
         </div>
     </div>
     <div class='panel-content'>
-        {% if item.notes %}
+        <textarea id='stock-notes'></textarea>
-        {{ item.notes | markdownify }}
-        {% endif %}
     </div>
 </div>
 
@@ -235,18 +226,21 @@
                 reload: true,
             }
         );
+
     });
     
-    $('#edit-notes').click(function() {
+    onPanelLoad('notes', function() {
-        constructForm('{% url "api-stock-detail" item.pk %}', {
+        setupNotesField(
-            fields: {
+            'stock-notes',
-                notes: {
+            '{% url "api-stock-detail" item.pk %}',
-                    multiline: true,
+            {
-                }
+                {% if roles.stock.change and user_owns_item %}
-            },
+                editable: true,
-            title: '{% trans "Edit Notes" %}',
+                {% else %}
-            reload: true,
+                editable: false,
-        });
+                {% endif %}
+            }
+        );
     });
 
     enableDragAndDrop(

InvenTree/templates/InvenTree/settings/settings.html

@@ -89,7 +89,7 @@ $('table').find('.boolean-setting').change(function() {
         },
         {
             method: 'PATCH',
-            onSuccess: function(data) {
+            success: function(data) {
             },
             error: function(xhr) {
                 showApiError(xhr, url);

InvenTree/templates/base.html

@@ -48,6 +48,7 @@
 <link rel="stylesheet" href="{% static 'select2/css/select2-bootstrap-5-theme.css' %}">
 <link rel="stylesheet" href="{% static 'fullcalendar/main.css' %}">
 <link rel="stylesheet" href="{% static 'script/jquery-ui/jquery-ui.min.css' %}">
+<link rel="stylesheet" href="{% static 'easymde/easymde.min.css' %}">
 
 <link rel="stylesheet" href="{% static 'css/inventree.css' %}">
 
@@ -160,6 +161,7 @@
 <script type='text/javascript' src="{% static 'script/chart.js' %}"></script>
 <script type='text/javascript' src="{% static 'script/moment.js' %}"></script>
 <script type='text/javascript' src="{% static 'script/chartjs-adapter-moment.js' %}"></script>
+<script type='text/javascript' src="{% static 'easymde/easymde.min.js' %}"></script>
     
 <script type='text/javascript' src="{% static 'script/clipboard.min.js' %}"></script>
 <script type='text/javascript' src="{% static 'script/randomColor.min.js' %}"></script>

InvenTree/templates/js/translated/helpers.js

@@ -10,6 +10,7 @@
     makeProgressBar,
     renderLink,
     select2Thumbnail,
+    setupNotesField,
     thumbnailImage
     yesNoLabel,
 */
@@ -221,3 +222,93 @@ function renderLink(text, url, options={}) {
 
     return `<a href="${url}">${text}</a>`;
 }
+
+
+function setupNotesField(element, url, options={}) {
+
+    var editable = options.editable || false;
+
+    // Read initial notes value from the URL
+    var initial = null;
+
+    inventreeGet(url, {}, {
+        async: false,
+        success: function(response) {
+            initial = response[options.notes_field || 'notes'];
+        },
+    });
+
+    var toolbar_icons = [
+        'preview', '|',
+    ];
+
+    if (editable) {
+        // Heading icons
+        toolbar_icons.push('heading-1', 'heading-2', 'heading-3', '|');
+            
+        // Font style
+        toolbar_icons.push('bold', 'italic', 'strikethrough', '|');
+        
+        // Text formatting
+        toolbar_icons.push('unordered-list', 'ordered-list', 'code', 'quote', '|');
+        
+        // Elements
+        toolbar_icons.push('table', 'link', 'image');
+    }
+
+    // Markdown syntax guide
+    toolbar_icons.push('|', 'guide');
+
+    const mde = new EasyMDE({
+        element: document.getElementById(element),
+        initialValue: initial,
+        toolbar: toolbar_icons,
+        shortcuts: [],
+    });
+
+
+    // Hide the toolbar
+    $(`#${element}`).next('.EasyMDEContainer').find('.editor-toolbar').hide();
+
+    if (!editable) {
+        // Set readonly
+        mde.codemirror.setOption('readOnly', true);
+            
+        // Hide the "edit" and "save" buttons
+        $('#edit-notes').hide();
+        $('#save-notes').hide();
+        
+    } else {
+        mde.togglePreview();
+
+        // Add callback for "edit" button
+        $('#edit-notes').click(function() {
+            $('#edit-notes').hide();
+            $('#save-notes').show();
+
+            // Show the toolbar
+            $(`#${element}`).next('.EasyMDEContainer').find('.editor-toolbar').show();     
+
+            mde.togglePreview();
+        });
+
+        // Add callback for "save" button
+        $('#save-notes').click(function() {
+
+            var data = {};
+
+            data[options.notes_field || 'notes'] = mde.value();
+
+            inventreePut(url, data, {
+                method: 'PATCH',
+                success: function(response) {
+                    showMessage('{% trans "Notes updated" %}', {style: 'success'});
+                },
+                error: function(xhr) {
+                    showApiError(xhr, url);
+                }
+            });
+        });
+    }
+}
+

InvenTree/templates/notes_buttons.html

@@ -0,0 +1,8 @@
+{% load i18n %}
+
+<button type='button' id='edit-notes' title='{% trans "Edit" %}' class='btn btn-primary'>
+    <span class='fas fa-edit'></span> {% trans "Edit" %}
+</button>
+<button type='button' id='save-notes' title='{% trans "Save" %}' class='btn btn-success' style='display: none;'>
+    <span class='fas fa-save'></span> {% trans "Save" %}
+</button>

requirements.txt

@@ -1,5 +1,6 @@
 # Please keep this list sorted
-Django==3.2.12                   # Django package
+Django==3.2.12                  # Django package
+bleach==4.1.0                   # HTML santization
 certifi                         # Certifi is (most likely) installed through one of the requirements above
 coreapi==2.3.0                  # API documentation
 coverage==5.3                   # Unit test coverage