Fill playground editor

Author: slowcheetah

web/src/js/hljs-run.js

@@ -16,7 +16,7 @@ export default class RunButtonPlugin {
     runButton.addEventListener('click', (event) => {
       event.preventDefault();
       const hash = encodeURIComponent(text);
-      window.location.href = `.${this.playgroundUrl}?hash=${hash}`;
+      window.location.href = `.${this.playgroundUrl}#${hash}`;
     });
     const wrapper = document.createElement("div");
     wrapper.classList.add('hljs-run');

web/src/js/playground.js

@@ -11,15 +11,15 @@ const resultBlock = document.querySelector('.result');
 codeOutput.textContent = codeInput.value;
 hljs.highlightElement(codeOutput);
 
-codeInput.addEventListener('input', (event) => {
+codeInput.addEventListener('input', () => {
   codeOutput.removeAttribute('data-highlighted');
   let val = codeInput.value;
   if (val[val.length - 1] === "\n") val += ' ';
   codeOutput.textContent = val;
   hljs.highlightElement(codeOutput);
 });
 
-codeInput.addEventListener('scroll', (event) => {
+codeInput.addEventListener('scroll', () => {
   codeOutput.scrollTop = codeInput.scrollTop;
   codeOutput.scrollLeft = codeInput.scrollLeft;
 });
@@ -49,14 +49,27 @@ console.warn = function (...args) {
     resultBlock.innerHTML += `<div class="console warn">${arg}</div>`;
   });
 }
-runButton.addEventListener('click', (event) => {
+runButton.addEventListener('click', () => {
   resultBlock.innerHTML = '';
   const code = codeInput.value;
   try {
     Function(code)();
   } catch (e) {
     console.error(e);
   }
-})
+});
 
 resizeObserver.observe(codeInput);
+
+addEventListener("DOMContentLoaded", (event) => {
+  let hash = location.hash.slice(1);
+  if (hash) {
+    try {
+      hash = decodeURIComponent(hash);
+    } catch (error) {
+      hash = hash.replace(/%[0-F]{2}/ig, decodeURIComponent);
+    }
+    codeInput.value = hash;
+    codeInput.dispatchEvent(new Event('input', { bubbles: true }));
+  }
+});