feat: Enhance Snippet Builder #46

builder/index.html

@@ -5,8 +5,8 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>VS Code Snippets Builder</title>
-    <script type="module" src=https://js.arcgis.com/calcite-components/1.8.0/calcite.esm.js></script>
-    <link rel="stylesheet" type="text/css" href=https://js.arcgis.com/calcite-components/1.8.0/calcite.css />
+    <script type="module" src="https://js.arcgis.com/calcite-components/2.13.0/calcite.esm.js"></script>
+    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.13.0/calcite.css" />
 
     <link
       rel="stylesheet"
@@ -101,6 +101,66 @@ <h2>Custom Snippet</h2>
           </span>
           <calcite-input required id="name"></calcite-input>
         </calcite-label>
+        <calcite-label layout="default">
+          <span
+            >Language Snippet Scope<sup>*</sup>
+            <calcite-popover-manager>
+              <calcite-popover
+                label="Popover label"
+                reference-element="language-scope-popover"
+              >
+                <div>
+                  <p>
+                    <b>Language Snippet Scope</b><br />
+                    Determines which programming languages or file types a 
+                    snippet will appear in.
+                  </p>
+                  <p>
+                    <b>Recommendations</b><br />
+                    You can select multiple scopes for your snippet e.g "javascript, html"
+                  </p>
+                </div>
+              </calcite-popover>
+              <calcite-icon
+                icon="question"
+                scale="s"
+                class="popover"
+                id="language-scope-popover"
+              ></calcite-icon>
+            </calcite-popover-manager>
+          </span>
+          <div id="language-selection">
+            <label>
+              <input type="checkbox" value="json" id="lang-json" />
+              JSON
+            </label>
+            <label>
+              <input type="checkbox" value="css" id="lang-css" />
+              CSS
+            </label>
+            <label>
+              <input type="checkbox" value="html" id="lang-html" />
+              HTML
+            </label>
+            <label>
+              <input type="checkbox" value="scss" id="lang-scss" />
+              SCSS
+            </label>
+            <br>
+            <label>
+              <input type="checkbox" value="javascript" id="lang-javascript" />
+              JavaScript
+            </label>
+            <label>
+              <input type="checkbox" value="typescript" id="lang-typescript" />
+              TypeScript
+            </label>
+            <label>
+              <input type="checkbox" value="typescriptreact" id="lang-typescriptreact" />
+              TypeScript JSX
+            </label>
+          </div>
+        </calcite-label>
         <calcite-label layout="default">
           <span> Description
           <calcite-popover-manager>
@@ -129,7 +189,7 @@ <h2>Custom Snippet</h2>
             ></calcite-icon>
           </calcite-popover-manager>
           </span>
-          <calcite-input required type="textarea" id="desc"></calcite-input>
+          <calcite-text-area required id="desc"></calcite-text-area>
         </calcite-label>
         <calcite-label layout="default">
           <span>
@@ -162,13 +222,53 @@ <h2>Custom Snippet</h2>
             </calcite-popover-manager>
           </span>
 
-          <calcite-input required type="textarea" id="body"></calcite-input>
+          <calcite-text-area required id="body"></calcite-text-area>
+        </calcite-label>
+        <calcite-label layout="default">
+          <span
+          >Import Snippet<sup></sup>
+            <calcite-popover-manager>
+              <calcite-popover
+                label="Popover label"
+                reference-element="import-snippet-popover"
+              >
+              <div>
+                <p>
+                  <b>Import Snippet</b><br />
+                 Upload JSON snippet files directly from the computer.
+                </p>
+                <p>
+                <p>
+                  <b>Recommendations</b><br />
+                  Ensure that the JSON snippet file adheres to the correct format, including 
+                  required fields such as <b>name</b>, <b>prefix</b>, <b>body</b>, and <b>description</b>. 
+                </p>
+              </div>
+            </calcite-popover>
+            <calcite-icon
+              icon="question"
+              scale="s"
+              class="popover"
+              id="import-snippet-popover"
+            ></calcite-icon>
+          </calcite-popover-manager>
+        </span>
+
+         <input type="file" id="import-snippet" accept=".json", value=".\builder\sample.json">
+
+         <p>
+          For a sample snippet file, download <a href="sample.json" download>sample.json</a>.
+        </p>
+
         </calcite-label>
       </div>
 
       <div id="codePreview">
         <h2>Custom snippet code:</h2>
-        <pre><code id="snippets"></code></pre>
+        <pre>
+          <code id="snippets"></code>
+          <button id="copy-button"> Copy </button>
+        </pre>
         <p>
           Do you think more users would benefit from this snippet? <br />
           If so, please consider

builder/main.css

@@ -16,8 +16,10 @@
 #codePreview {
   float: left;
   padding: 1rem;
+  position: relative;
 }
-textarea#body {
+#desc,
+#body {
   height: 200px;
 }
 .screenshot {
@@ -61,4 +63,26 @@ calcite-popover div {
 }
 p{
   font-size: .9rem;
+}
+pre {
+  position: relative;
+}
+#copy-button {
+  position: absolute;
+  top: 1.4em;
+  right: 0px;
+  padding: 2px 8px 2px 8px;
+  margin-top: 3px;
+  margin-right: 6px;
+  border-radius: 2px;
+  background: none;
+  color: #ccc;
+  border: none;
+  cursor: pointer;
+}
+#copy-button:hover {
+  background-color: #80808080;
+}
+#language-selection label {
+  margin-right: 12px;
 }

builder/main.js

@@ -1,6 +1,7 @@
 let snippet = {
   name: "",
   prefix: "",
+  scope: [],
   desc: "",
   body: "",
   parse: (body) => {
@@ -26,12 +27,32 @@ ${x}
   toString: () => {
     return `"${snippet.name}": {
 "prefix": "${snippet.prefix}",
+"scope": "${Array.isArray(snippet.scope) ? snippet.scope.join(', ') : ''}",
 "body": ${snippet.parse(snippet.body)},
 "description": "${snippet.desc}"
 }`;
   },
 };
 
+document.querySelectorAll('#language-selection input[type="checkbox"]').forEach((checkbox) => {
+  checkbox.addEventListener("change", function () {
+    if (!Array.isArray(snippet.scope)) {
+      snippet.scope = [];
+    }
+    if (this.checked) {
+      if (!snippet.scope.includes(this.value)) {
+        snippet.scope.push(this.value);
+      }
+    } else {
+      const index = snippet.scope.indexOf(this.value);
+      if (index > -1) {
+        snippet.scope.splice(index, 1);
+      }
+    }
+    renderSnippet();
+  });
+});
+
 function renderSnippet() {
   document.getElementById("snippets").innerText = snippet.toString();
   hljs.highlightAll();
@@ -58,14 +79,88 @@ Code:
 ${snippet.toString()}
 \`\`\`
 `);
+
   document.querySelector(
     "calcite-button"
   ).href = `${repoUrl}/issues/new?title=${title}&body=${body}`;
 }
 
-document.querySelectorAll("calcite-input").forEach((item) => {
+const inputElement = document.getElementById("import-snippet");
+if (inputElement) {
+  inputElement.addEventListener("change", (event) => {
+    const file = event.target.files[0];
+  console.log("Selected file:", file);
+
+  if (file) {
+    const reader = new FileReader();
+
+    reader.onload = function(e) {
+      try {
+        const fileContent = e.target.result;
+        console.log("File content:", fileContent);
+
+        const snippetObject = JSON.parse(fileContent);
+
+      const firstSnippet = Object.values(snippetObject)[0];
+      snippet.name = Object.keys(snippetObject)[0];
+      snippet.prefix = firstSnippet.prefix;
+      snippet.scope = firstSnippet.scope.split(', ');
+      snippet.body = firstSnippet.body.join('\n');
+      snippet.desc = firstSnippet.description;
+
+      document.getElementById("name").value = snippet.name;
+      document.getElementById("prefix").value = snippet.prefix;
+      document.getElementById("desc").value = snippet.desc;
+      document.getElementById("body").value = snippet.body;
+
+      document.querySelectorAll('#language-selection input[type="checkbox"]').forEach((checkbox) => {
+        const scopeValues = checkbox.value.split(',').map(scope => scope.trim());
+        checkbox.checked = snippet.scope.includes(checkbox.value);
+        checkbox.checked = scopeValues.some(scope => snippet.scope.includes(scope));
+      });
+
+      renderSnippet();
+
+      } catch (error) {
+        console.error("Failed to parse the snippet JSON: ", error);
+        document.getElementById("snippets").innerText = "Error parsing JSON. Please upload a valid snippet.";
+      }
+    };
+
+    reader.readAsText(file);
+  }
+  });
+} else {
+  console.error("Element with ID 'import-snippet' not found.");
+}
+
+const copyButton = document.getElementById("copy-button");
+
+copyButton.addEventListener("click", (event) => {
+  event.preventDefault();
+  const snippetText = snippet.toString();
+  navigator.clipboard.writeText(snippetText)
+    .then(() => {
+      copyButton.textContent = "Copied";
+    })
+    setTimeout(() => {
+      copyButton.textContent = "Copy";
+    }, 1000);    
+});
+
+document.querySelectorAll("calcite-input:not([type='file'])").forEach((item) => {
+  item.addEventListener("keyup", (evt) => {
+    snippet[evt.target.closest("calcite-input:not([type='file'])").id] = evt.target.value.replace(
+      /\"/g,
+      '\\"'
+    );
+    renderSnippet();
+  });
+});
+
+document.querySelectorAll("calcite-text-area").forEach((item) => {
   item.addEventListener("keyup", (evt) => {
-    snippet[evt.target.closest("calcite-input").id] = evt.target.value.replace(
+    snippet[evt.target.closest("calcite-text-area").id] = evt.target.value.replace(
       /\"/g,
       '\\"'
     );

builder/sample.json

@@ -0,0 +1,10 @@
+{
+    "A JavaScript only snippet": {
+        "scope": "javascript", 
+        "prefix": "myConsoleLog",
+        "body": [
+            "console.log(\"Hello Map\");"
+        ],
+        "description": "Console log \"Hello Map\""
+    }
+  }