Merge pull request #91 from DMOJ/preview-on-change

Only render Markdown again if content has changed

Author: agusmakmun

martor/static/martor/js/martor.js

@@ -125,6 +125,12 @@
             $(obj).find('.modal-help-guide').attr({'data-field-name': field_name});
             $(obj).find('.modal-emoji').attr({'data-field-name': field_name});
 
+            // Set if editor has changed.
+            editor.on('change', function(evt){
+                var value = editor.getValue();
+                textareaId.val(value);
+            });
+
             // resize the editor using `resizable.min.js`
             $('#'+editorId).resizable({
                 direction: 'bottom',
@@ -136,7 +142,12 @@
             // update the preview if this menu is clicked
             var currentTab = $('.tab.segment[data-tab=preview-tab-'+field_name+']');
             var previewTabButton = $('.item[data-tab=preview-tab-'+field_name+']');
+            var needsRefresh = true;
             var refreshPreview = function() {
+                if (!needsRefresh) {
+                    return;
+                }
+
                 var value = textareaId.val();
                 var form = new FormData();
                 form.append('content', value);
@@ -150,16 +161,16 @@
                     processData: false,
                     contentType: false,
                     success: function(response) {
-                        if(response){
-                          if (editorConfig.hljs == 'true') {
-                              $('pre').each(function (i, block) {
-                                  hljs.highlightBlock(block);
-                              });
-                          }
-                          currentTab.html(response).removeClass('martor-preview-stale');
-                          $(document).trigger('martor:preview', [currentTab]);
-                        }else {
-                          currentTab.html('<p>Nothing to preview</p>');
+                        if (response) {
+                            currentTab.html(response).removeClass('martor-preview-stale');
+                            if (editorConfig.hljs == 'true') {
+                                $('pre').each(function (i, block) {
+                                    hljs.highlightBlock(block);
+                                });
+                            }
+                            needsRefresh = false;
+                        } else {
+                            currentTab.html('<p>Nothing to preview</p>');
                         }
                     },
                     error: function(response) {
@@ -174,9 +185,12 @@
             // Set if editor has changed.
             editor.on('change', function (evt) {
                 var value = editor.getValue();
-                textareaId.val(value);
-                if (editorConfig.living === 'true') {
-                    refreshPreview();
+                if (value !== textareaId.val()) {
+                    textareaId.val(value);
+                    needsRefresh = true;
+                    if (editorConfig.living === 'true') {
+                        refreshPreview();
+                    }
                 }
             });