use buttons instead of links to avoid medium-editor conflicts (#355)

Author: linkesch

spec/core.spec.js

@@ -115,7 +115,7 @@ describe('Core', function () {
         jasmine.clock().tick(101);
 
         expect(this.$el.find('.medium-insert-buttons').css('display')).toBe('block');
-        expect(this.$el.find('.medium-insert-buttons a[data-addon="embeds"]').parent().css('display')).toBe('none');
+        expect(this.$el.find('.medium-insert-buttons button[data-addon="embeds"]').parent().css('display')).toBe('none');
     });
 
     it('hides plugin\'s buttons after clicking on non-empty paragraph', function () {

src/js/core.js

@@ -440,7 +440,7 @@
 
         if (activeAddon) {
             $buttons.find('li').hide();
-            $buttons.find('a[data-addon="' + activeAddon + '"]').parent().show();
+            $buttons.find('button[data-addon="' + activeAddon + '"]').parent().show();
         }
     };
 
@@ -523,7 +523,7 @@
      */
 
     Core.prototype.addonAction = function (e) {
-        var $a = $(e.target).is('a') ? $(e.target) : $(e.target).closest('a'),
+        var $a = $(e.currentTarget),
             addon = $a.data('addon'),
             action = $a.data('action');
 

src/js/templates.js

@@ -4,15 +4,15 @@ this["MediumInsert"]["Templates"] = this["MediumInsert"]["Templates"] || {};
 this["MediumInsert"]["Templates"]["src/js/templates/core-buttons.hbs"] = Handlebars.template({"1":function(container,depth0,helpers,partials,data) {
     var stack1, helper, alias1=depth0 != null ? depth0 : {}, alias2=helpers.helperMissing, alias3="function";
 
-  return "            <li><a data-addon=\""
+  return "            <li><button data-addon=\""
     + container.escapeExpression(((helper = (helper = helpers.key || (data && data.key)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"key","hash":{},"data":data}) : helper)))
     + "\" data-action=\"add\" class=\"medium-insert-action\">"
     + ((stack1 = ((helper = (helper = helpers.label || (depth0 != null ? depth0.label : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"label","hash":{},"data":data}) : helper))) != null ? stack1 : "")
-    + "</a></li>\n";
+    + "</button></li>\n";
 },"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
     var stack1;
 
-  return "<div class=\"medium-insert-buttons\" contenteditable=\"false\" style=\"display: none\">\n    <a class=\"medium-insert-buttons-show\">+</a>\n    <ul class=\"medium-insert-buttons-addons\" style=\"display: none\">\n"
+  return "<div class=\"medium-insert-buttons\" contenteditable=\"false\" style=\"display: none\">\n    <button class=\"medium-insert-buttons-show\"><span>+</span></button>\n    <ul class=\"medium-insert-buttons-addons\" style=\"display: none\">\n"
     + ((stack1 = helpers.each.call(depth0 != null ? depth0 : {},(depth0 != null ? depth0.addons : depth0),{"name":"each","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "    </ul>\n</div>\n";
 },"useData":true});

src/js/templates/core-buttons.hbs

@@ -1,8 +1,8 @@
 <div class="medium-insert-buttons" contenteditable="false" style="display: none">
-    <a class="medium-insert-buttons-show">+</a>
+    <button class="medium-insert-buttons-show"><span>+</span></button>
     <ul class="medium-insert-buttons-addons" style="display: none">
         {{#each addons}}
-            <li><a data-addon="{{@key}}" data-action="add" class="medium-insert-action">{{{label}}}</a></li>
+            <li><button data-addon="{{@key}}" data-action="add" class="medium-insert-action">{{{label}}}</button></li>
         {{/each}}
     </ul>
 </div>

src/sass/_core.scss

@@ -31,27 +31,29 @@
         position: absolute;
         color: #ddd;
         font-size: 0.9em;
-        a {
-            text-decoration: underline;
-            cursor: pointer;
-        }
-
-        .medium-insert-buttons-show {
-            box-sizing: border-box;
+        button {
             display: block;
+            cursor: pointer;
+            color: #ddd;
+            background: #fff;
             width: 32px;
             height: 32px;
-            margin-top: -5px;
+            box-sizing: border-box;
             border-radius: 20px;
-            border: 1px solid;
-            font-size: 25px;
-            line-height: 28px;
+            border: 1px solid #ddd;
+            line-height: 30px;
             text-align: center;
-            text-decoration: none;
-            background: #fff;
+            padding: 0;
+        }
+
+        .medium-insert-buttons-show {
+            font-size: 25px;
             transform: rotate(0);
             transition: transform 100ms;
-
+            span {
+                display: block;
+                margin-top: -4px;
+            }
             &.medium-insert-buttons-rotate {
                 transition: transform 250ms;
                 transform: rotate(45deg);
@@ -69,21 +71,9 @@
             top: -32px;
             li {
                 display: inline-block;
-                background-color: #fff;
-                a {
-                    box-sizing: border-box;
-                    display: inline-block;
-                    margin: 0 5px;
-                    width: 32px;
-                    height: 32px;
-                    border-radius: 20px;
-                    border: 1px solid;
-                    font-size: 20px;
-                    line-height: 28px;
-                    text-align: center;
-                    .fa {
-                        font-size: 15px;
-                    }
+                margin: 0 5px;
+                .fa {
+                    font-size: 15px;
                 }
             }
         }