JSFiddle - React, Tailwind, and code Playground

by lid0

HTML

<!--
After making changes to the playground. 
click on "Copy Link" and paste/replace the content in the Template tag below
-->
<template id=code>


  https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHRlbXBsYXRlPlxuICA8aDE+e3sgbXNnIH19PC9oMT5cblxuICA8Q29tcCA6b3JkZXI9XCJvcmRlclwiPlxuICA8L0NvbXA+XG4gIDxwPlxuICA8YnV0dG9uIEBjbGljaz1cIm9yZGVyPSdELU0tWSdcIj5ELU0tWVlZWTwvYnV0dG9uPlxuICA8YnV0dG9uIEBjbGljaz1cIm9yZGVyPSdZLU0tRCdcIj5ZWVlZLU0tRDwvYnV0dG9uPlxuICA8YnV0dG9uIEBjbGljaz1cIm9yZGVyPSdNLUQtWSdcIj5NLUQtWVlZWTwvYnV0dG9uPiAgXG4gIDwvcD5cbiAgXG5cbjwvdGVtcGxhdGU+XG5cbjxzY3JpcHQgc2V0dXA+XG4gIGltcG9ydCB7cmVmfSBmcm9tICd2dWUnXG4gIGltcG9ydCBDb21wIGZyb20gXCIuL0NvbXAudnVlXCJcblx0Y29uc3QgbXNnID0gJ0Zvcm1hdCBEYXRlJ1xuICB2YXIgb3JkZXIgPSByZWYoXCJELU0tWVwiKVxuIFxuICAvLzxETyBOT1QgUkVNT1ZFPlxuICBwYXJlbnQucGFyZW50LnBvc3RNZXNzYWdlKHBhcmVudC5sb2NhdGlvbi5oYXNoLFwiKlwiKVxuICAvLzwvRE8gTk9UIFJFTU9WRT5cbjwvc2NyaXB0PlxuXG5cblxuIiwiQ29tcC52dWUiOiI8dGVtcGxhdGU+XG5cbkZvcm1hdCBDb2RlOiB7e29yZGVyfX1cblxuICA8aDE+XG4gIDx0ZW1wbGF0ZSB2LWZvcj1cIih2LGspIGluIG9yZGVyXCI+XG4gICAgPHNwYW4gY29udGVudGVkaXRhYmxlIHYtaWY9XCJ2PT0nRCdcIj57e2RhdGUuZ2V0RGF0ZSgpfX08L3NwYW4+XG4gICAgPHNwYW4gY29udGVudGVkaXRhYmxlIHYtaWY9XCJ2PT0nTSdcIj57e2RhdGUuZ2V0TW9udGgoKSsxfX08L3NwYW4+XG4gICAgPHNwYW4gY29udGVudGVkaXRhYmxlIHYtaWY9XCJ2PT0nWSdcIj57e2RhdGUuZ2V0RnVsbFllYXIoKX19PC9zcGFuPlxuICAgIDx0ZW1wbGF0ZSBjb250ZW50ZWRpdGFibGUgdi1pZj1cInY9PSctJ1wiPi08L3RlbXBsYXRlPlxuICAgIFxuICA8L3RlbXBsYXRlPiAgXG4gIDwvaDE+XG4gIFxuXG48L3RlbXBsYXRlPlxuXG48c2NyaXB0IHNldHVwPlxuICBkZWZpbmVQcm9wcyh7XG4gICAgb3JkZXI6e1xuICAgICAgdHlwZTpbU3RyaW5nLEFycmF5XVxuICAgIH1cbiAgfSlcbiAgY29uc3QgZGF0ZSA9IG5ldyBEYXRlKCk7XG48L3NjcmlwdD5cblxuPHN0eWxlIHNjb3BlZD5cbiAgc3BhbiB7XG4gICAgYm9yZGVyOjFweCBzb2xpZCBncmF5O1xuICAgIHBhZGRpbmc6NXB4O1xuICB9XG48L3N0eWxlPiJ9


</template>


<iframe id="frm1" sandbox="allow-top-navigation allow-same-origin allow-scripts"></iframe>

<div class="sfcContainer">
  <a id="sfcLink" class="sfcLink" href="">Link</a>
  <a id="sfcLink2" class="sfcLink sfcLink2" href="#">Open...

CSS

.sfcContainer {
  position: fixed;
  top: 0px;
  display: block;
  width: 100%;
  height: 25px;

  background: #5a9faa;
}

.sfcLink {

  top: 0px;
  z-index: 100;
  background: black;
  color: white;
  padding: 5px;
}

.sfcLink2 {
  left: 0px;
  top: 30px;
}

.sfcLink:hover {

  background: #696969;

}

body {
  margin: 0;
  padding: 0;
  height: 100%;
}

iframe {
  margin-top: 20px;
  ;
  width: 100%;
  height: 95vh;
}

JavaScript

// author liblib
var codeEl = document.getElementById('code');
var frm1 = document.getElementById("frm1")



function getCode() {
  var codeFromTemplate = codeEl.innerHTML.trim();
  if (codeFromTemplate[0] == "#") {
    return "https://sfc.vuejs.org/" + codeFromTemplate
  } else if (codeFromTemplate.startsWith("https://")) {

    return codeFromTemplate;
  } else {
    alert("invalid code in template")
  }
}


var sfcLink = document.getElementById("sfcLink")
var sfcLink2 = document.getElementById("sfcLink2")

sfcLink.addEventListener('click', function(evt) {
  evt.preventDefault();
  copyToClipboard(sfcLink.href)
  alert("new playground link was copied to clipboard. dont forget to update template in js fiddle.")
  sfcLink.innerHTML += " [copied to clipboard]"
  setTimeout(function() {
    sfcLink.innerHTML = "Link (edits " + changes + ")"
  }, 700)
})

sfcLink2.addEventListener('click', function(evt) {
  alert("DSADAS")
  window.open(sfcLink.href, "_blank")
});


function refreshLink() {
  if (changes > 0) {
    sfcLink.innerHTML = "Link (edits " + changes + ")"
  } else {
    sfcLink.innerHTML = "Copy Link"
  }
}


window.addEventListener("message", function(evt) {
  //console.log(evt)
  changes++;
  codeEl.innerHTML = evt
  sfcLink.href = "https://sfc.vuejs.org/" + evt.data
  refreshLink()

})


var code = getCode()
frm1.src = code;
var changes = -1












function copyToClipboard(text) {
  if (window.clipboardData && window.clipboardData.setData) {
    // Internet Explorer-specific code path to prevent textarea being shown while dialog is visible.
    return window.clipboardData.setData("Text", text);

  } else if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
    var textarea = document.createElement("textarea");
    textarea.textContent = text;
    textarea.style.position = "fixed"; // Prevent scrolling to bottom of page in Microsoft Edge.
    document.body.appendChild(textarea);
    textarea.select();
    try {
     ...