Merge pull request #277 from itteco/master

Fix JavaScript-based embeds

Author: linkesch

spec/embeds.spec.js

@@ -336,4 +336,24 @@ describe('Embeds addon', function () {
         expect($serialized.find('.medium-insert-embeds').attr('contenteditable')).toBeUndefined();
         expect($serialized.find('.medium-insert-embeds-overlay').length).toEqual(0);
     });
+
+    it('uses data-embed-code as container html for javascript-based embeds', function() {
+        var html = '<div class="medium-insert-embeds"><figure class="medium-insert-embed"><div data-embed-code="<div>good-value</div>">bad-value</div></figure></div>',
+            editor, $serialized;
+
+        $('#fixtures').html('<div class="editable">' + html + '</div>');
+        this.$el = $('.editable');
+
+        editor = new MediumEditor(this.$el.get(0));
+
+        this.$el.mediumInsert({
+            editor: editor,
+            addons: {
+                embeds: {}
+            }
+        });
+
+        $serialized = $(editor.serialize()['element-0'].value);
+        expect($serialized.find('[data-embed-code]').html()).toEqual('<div>good-value</div>');
+    });
 });

src/js/core.js

@@ -136,6 +136,12 @@
 
             $data.find('.medium-insert-buttons').remove();
 
+            // Restore original embed code from embed wrapper attribute value.
+            $data.find('[data-embed-code]').each(function() {
+                var $this = $(this);
+                $this.html($this.attr('data-embed-code'));
+            });
+
             data[key].value = $data.html();
         });
 

src/js/embeds.js

@@ -298,10 +298,25 @@
             success: function(data) {
                 var html = data && data.html;
 
-                if (data && !data.html && data.type === 'photo' && data.url) {
+                if (data && !html && data.type === 'photo' && data.url) {
                     html = '<img src="' + data.url + '" alt="">';
                 }
 
+                if (!html) {
+                    // Prevent render empty embed.
+                    $.proxy(that, 'convertBadEmbed', url)();
+                    return;
+                }
+
+                if (html && html.indexOf('</script>') > -1) {
+                    // Store embed code with <script> tag inside wrapper attribute value.
+                    // Make nice attribute value escaping using jQuery.
+                    var $div = $('<div>')
+                        .attr('data-embed-code', html)
+                        .html(html);
+                    html = $('<div>').append($div).html();
+                }
+
                 $.proxy(that, 'embed', html)();
             },
             error: function(jqXHR, textStatus, errorThrown) {