Run code PrismJS button registration

index.js

@@ -90,6 +90,28 @@ function findSelector(start, selector) {
     }
 }
 
+function findDemoWrapper(el) {
+    while(el && el.parentNode) {
+        if(matches.call(el.parentNode, '.demo_wrapper')) {
+            return el.parentNode;
+        }
+        el = el.parentNode;
+    }
+}
+
+function findPreForToolbarBtn(el) {
+    while(el) {
+        if (el.nodeName === "PRE") {
+            return el;
+        }
+        if (matches.call(el, '.toolbar')) {
+            el = findSelector(el, 'pre');
+        } else {
+            el = el.parentNode;
+        }
+    }
+}
+
 function getStylesFromIframe(iframe) {
     var styles = iframe.contentDocument.documentElement.querySelectorAll("style");
     var cssText = "";
@@ -100,13 +122,36 @@ function getStylesFromIframe(iframe) {
 }
 
 module.exports = function() {
+    var codepens = document.querySelectorAll('div.codepen');
+    //remove the old codepen links
+    codepens.forEach(function(codepen, i){
+        var wrapper = findSelector(codepen, "pre, .demo_wrapper");
+        //the CodePen iframe wrapper has ".codepen" class too
+        if (wrapper) {
+            wrapper.setAttribute('data-has-run', true);
+            codepen.parentNode.removeChild(codepen);
+        }
+    });
 
-    document.body.addEventListener("click", function(ev){
-        if(matches.call(ev.target, ".codepen")){
-
-            var el = findSelector(ev.target, "pre, .demo_wrapper");
-            if(el && matches.call(el, "pre")) {
-                var preElement = el;
+    //Register PrismJS "Run" custom button
+    Prism.plugins.toolbar.registerButton("run-code", function(env) {
+        var demoWrapper = findDemoWrapper(env.element);
+        var pre = env.element.parentElement;
+        var hasRunBtn = demoWrapper ? demoWrapper.getAttribute("data-has-run") : pre.getAttribute("data-has-run");
+        //prevent other demos without codepen link to register Run button
+        if (hasRunBtn) {
+            var btn = document.createElement("button");
+            btn.innerHTML = "Run";
+            btn.setAttribute("data-run", "");
+            return btn;
+        }
+    });
+    document.body.addEventListener('click', function (ev) {
+        if (ev.target.getAttribute('data-run') != null) {
+            var btn = ev.target;
+            var demoWrapper = findDemoWrapper(btn);
+            if (!demoWrapper) {
+                var preElement = findPreForToolbarBtn(btn);
                 var codeElement = preElement.querySelector("code");
                 var language = codeElement.className.match(languageHTML)[1];
                 var text = codeElement.textContent;
@@ -131,31 +176,26 @@ module.exports = function() {
                     console.warn("Unable to create a codepen for this demo");
                 }
             }
-            if(el && matches.call(el, ".demo_wrapper")) {
-                var htmlCode = el.querySelector("[data-for=html] code");
-                var htmlText = htmlCode ? htmlCode.textContent.trim() : "";
-
-                var jsCode = el.querySelector("[data-for=js] code");
-                var jsText = jsCode ? jsCode.textContent.trim() : "";
-
-                var cssText = getStylesFromIframe( el.querySelector("iframe") );
-
+            if (demoWrapper && matches.call(demoWrapper, '.demo_wrapper')) {
+                var htmlCode = demoWrapper.querySelector('[data-for=html] code');
+                var htmlText = htmlCode ? htmlCode.textContent.trim() : '';
+                var jsCode = demoWrapper.querySelector('[data-for=js] code');
+                var jsText = jsCode ? jsCode.textContent.trim() : '';
+                var cssText = getStylesFromIframe(demoWrapper.querySelector('iframe'));
                 var codePen = {
                     html: htmlText,
                     js: jsText,
                     js_module: true,
-                    editors: "1011",
+                    editors: '1011',
                     css: cssText.trim()
                 };
                 cleanCodePenData(codePen);
-                if(window.CREATE_CODE_PEN) {
+                if (window.CREATE_CODE_PEN) {
                     CREATE_CODE_PEN(codePen);
                 } else {
                     createCodePen(codePen);
                 }
-
             }
-
         }
     });
 };

package.json

@@ -27,8 +27,9 @@
   "dependencies": {},
   "devDependencies": {
     "bit-docs-generate-html": "^0.1.0",
+    "bit-docs-prettify": "^0.4.1",
     "connect": "^2.14.4",
     "mocha": "^6.0.2",
-    "zombie": "^4.3.0"
+    "zombie": "^6.1.0"
   }
 }

test.js

@@ -40,6 +40,7 @@ describe("bit-docs-html-codepen-link", function() {
 			html: {
 				dependencies: {
 					"bit-docs-html-codepen-link": __dirname,
+					"bit-docs-prettify": "^0.4.0",
 					"bit-docs-tag-demo": "^0.5.3"
 				}
 			},
@@ -54,10 +55,10 @@ describe("bit-docs-html-codepen-link", function() {
 				browser.window.CREATE_CODE_PEN = function(data) {
 					createCallData.push(data);
 				};
-				var codePens = doc.querySelectorAll('.codepen');
-
-				Array.from(codePens).forEach(function(codePen) {
-					codePen.click();
+				var toolbars = doc.querySelectorAll('.toolbar');
+				toolbars.forEach(function(toolbar) {
+					var btn = toolbar.children[toolbar.children.length - 1].querySelector('button');
+					btn.click();
 				});
 				assert.deepEqual(createCallData, [{
 						html: '<my-app></my-app>',
@@ -70,8 +71,21 @@ describe("bit-docs-html-codepen-link", function() {
 						js: 'import {DefineMap} from "//unpkg.com/can@^5.0.0-pre.1/core.mjs";\nconsole.log( myCounter.count ) //-> 1',
 						js_module: true,
 						editors: '0011'
-					}
-				]);
+					},
+					{
+						css: 'h1 {color: red;}',
+						editors: '1011',
+						html: '<h1>Hi There!</h1>',
+						js: 'var code = "code";',
+						js_module: true
+					},
+					{
+						css: 'h1 {color: red;}',
+						editors: '1011',
+						html: '<h1>Hi There!</h1>',
+						js: 'var code = "code";',
+						js_module: true
+					}]);
 
 				close();
 				done();
@@ -223,4 +237,45 @@ describe("bit-docs-html-codepen-link", function() {
 	it("supports ts files", function() {
 		assert.ok(codepenData.ts, "there is a ts");
 	});
+
+	it("Registers run code button", function(done) {
+		this.timeout(60000);
+
+		var docMap = Promise.resolve({
+			index: {
+				name: "index",
+				demo: "path/to/demo.html",
+				body: fs.readFileSync(__dirname + "/test-demo.md", "utf8"),
+				codepen: [
+					["can", "//unpkg.com/can@^5.0.0-pre.1/core.mjs"]
+				]
+			}
+		});
+
+		generate(docMap, {
+			html: {
+				dependencies: {
+					"bit-docs-html-codepen-link": __dirname,
+					"bit-docs-prettify": "^0.4.0",
+					"bit-docs-tag-demo": "^0.5.3"
+				}
+			},
+			dest: path.join(__dirname, "temp"),
+			parent: "index",
+			forceBuild: true,
+			minifyBuild: false
+		}).then(function() {
+			open("temp/index.html", function(browser, close) {
+				var doc = browser.window.document;
+				var toolbars = doc.querySelectorAll(".code-toolbar");
+				toolbars.forEach(function(toolbar) {
+					var children = toolbar.children;
+					assert.equal(toolbar.children.length, 2);
+					assert.equal(children[children.length - 1].innerHTML, '<div class="toolbar-item"><button>Copy</button></div><div class="toolbar-item"><button data-run="">Run</button></div>');
+				});
+				close();
+				done();
+			}, done);
+		}, done);
+	});
 });