Add create issue button to playground

docs/index.html

@@ -12,6 +12,11 @@
       #playground-container .CodeMirror {
         border: 1px solid;
       }
+      #create-issue-btn {
+        padding: 0.2em;
+        float: right;
+        font-size: 1.5em;
+      }
       #checkboxes {
         padding-bottom: 1em;
       }
@@ -67,12 +72,13 @@ <h4>Tree</h4>
       <div id="output-container-scroll">
         <pre id="output-container" class="highlight"></pre>
       </div>
+      <button id="create-issue-btn" type="button">Create Issue</button>
     </div>
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.45.0/codemirror.min.js"></script>
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/clusterize.js/0.18.0/clusterize.min.js"></script>
     <script src="./vendor/tree-sitter.js"></script>
-    <script id="playground-script" src="./playground.js?v=2"></script>
+    <script id="playground-script" src="./playground.js?v=3"></script>
   </body>
 </html>

docs/playground.js

@@ -31,6 +31,7 @@ let tree;
   );
   const playgroundContainer = document.getElementById("playground-container");
   const queryCheckbox = document.getElementById("query-checkbox");
+  const createIssueBtn = document.getElementById("create-issue-btn");
   const queryContainer = document.getElementById("query-container");
   const queryInput = document.getElementById("query-input");
   const updateTimeSpan = document.getElementById("update-time");
@@ -75,7 +76,7 @@ let tree;
   loggingCheckbox.addEventListener("change", handleLoggingChange);
   queryCheckbox.addEventListener("change", handleQueryEnableChange);
   outputContainer.addEventListener("click", handleTreeClick);
-
+  createIssueBtn.addEventListener("click", handleCreateIssue);
   handleQueryEnableChange();
   await loadLanguage();
 
@@ -348,6 +349,25 @@ let tree;
     }
   }
 
+  function handleCreateIssue() {
+    const queryText = codeEditor.getValue();
+    const outputText = outputContainer.innerText;
+    const title = `Error parsing SQL`;
+    const body = `Error when parsing the following SQL:
+\`\`\`
+${queryText}
+\`\`\`
+Error:
+\`\`\`
+${outputText}
+\`\`\``;
+    const queryParams = `title=${encodeURIComponent(
+      title,
+    )}&body=${encodeURIComponent(body)}`;
+    const url = `https://github.com/m-novikov/tree-sitter-sql/issues/new?${queryParams}`;
+    window.open(url);
+  }
+
   function handleTreeClick(event) {
     if (event.target.tagName === "A") {
       event.preventDefault();