Better MDEditor API with dynamic initialization to fully support lists. (look at window.MDEditors) (#239)

themes/grav/js/admin-all.js

@@ -490,6 +490,14 @@ $(function () {
 
             holder.append(newItem);
             button.data('key-index', ++key);
+
+            // process markdown editors
+            var field = newItem.find('[name]').filter('textarea'),
+                name = field.attr('name');
+
+            if (field.length && field.data('grav-mdeditor') && typeof MDEditors !== 'undefined') {
+                MDEditors.add(field);
+            }
         });
     });
 

themes/grav/js/mdeditor.js

@@ -1,6 +1,4 @@
 ((function(){
-    var editors = [];
-
     var toolbarIdentifiers = [ 'bold', 'italic', 'strike', 'link', 'image', 'blockquote', 'listUl', 'listOl' ];
     if (typeof window.customToolbarElements !== 'undefined') {
         window.customToolbarElements.forEach(function(customToolbarElement) {
@@ -89,7 +87,7 @@
     ].join('');
 
     var MDEditor = function(editor, options){
-        var tpl = template, $this = this,
+        var tpl = '' + template, $this = this,
             task = 'task' + GravAdmin.config.param_sep;
 
         this.defaults = {
@@ -101,7 +99,7 @@
             lblPreview   : '<i class="fa fa-fw fa-eye"></i>',
             lblCodeview  : '<i class="fa fa-fw fa-code"></i>',
             lblMarkedview: '<i class="fa fa-fw fa-code"></i>'
-        }
+        };
 
         this.element = $(editor);
         this.options = $.extend({}, this.defaults, options);
@@ -173,15 +171,15 @@
                 $this.editor.refresh();
 
                 if ($this.activetab == 'preview') {
-                    $('.grav-mdeditor-toolbar').fadeOut();
+                    $this.mdeditor.find('.grav-mdeditor-toolbar').fadeOut();
                     setTimeout(function() {
-                        $('.grav-mdeditor-preview-text').fadeIn();
-                    }, 500);
+                        $this.mdeditor.find('.grav-mdeditor-preview-text').fadeIn();
+                    }, 250);
                 } else {
-                    $('.grav-mdeditor-preview-text').fadeOut();
+                    $this.mdeditor.find('.grav-mdeditor-preview-text').fadeOut();
                     setTimeout(function() {
-                        $('.grav-mdeditor-toolbar').fadeIn();
-                    }, 500);
+                        $this.mdeditor.find('.grav-mdeditor-toolbar').fadeIn();
+                    }, 250);
                 }
             }
         });
@@ -218,7 +216,7 @@
             if($this.mdeditor.is(":visible")) $this.fit();
         });*/
 
-        editors.push(this);
+        MDEditors.editors[this.element.attr('name')] = this;
 
 
         // Methods
@@ -461,7 +459,7 @@
             $.extend(editor, {
 
                 enableMarkdown: function() {
-                    enableMarkdown()
+                    enableMarkdown();
                     this.render();
                 },
                 disableMarkdown: function() {
@@ -520,23 +518,44 @@
                     }
                 });
             }
-        }
+        };
 
 
         // toolbar actions
         this._initToolbar($this);
         this._buildtoolbar();
+
+        return this;
+    };
+
+    var MDEditors = {
+        editors: {},
+        init: function() {
+            var element;
+            $('textarea[data-grav-mdeditor]').each(function() {
+                element = $(this);
+                if (!element.parents('[data-collection-template="new"]').length) {
+                    MDEditors.add(element);
                 }
+            });
+        },
+
+        add: function(editor) {
+            editor = $(editor);
+
+            var mdeditor;
+            if (!editor.data('mededitor')) {
+                mdeditor = new MDEditor(editor, JSON.parse(editor.attr('data-grav-mdeditor') || '{}'));
+            }
+
+            return mdeditor || MDEditors.editors[editor.attr('name')];
+        }
+    };
 
     // init
     $(function(){
-        var editor;
-        $('textarea[data-grav-mdeditor]').each(function() {
-            editor = $(this);
-
-            if (!editor.data('mdeditor')) {
-                new MDEditor(editor, JSON.parse(editor.attr('data-grav-mdeditor') || '{}'));
-            }
+        MDEditors.init();
     });
-    })
+
+    window.MDEditors = MDEditors;
 })());