+ Language Snippet Scope
+ Determines which programming languages or file types a
+ snippet will appear in.
+
+ Recommendations
+ You can select multiple scopes for your snippet e.g "javascript, html"
+
+ Import Snippet
+ Upload JSON snippet files directly from the computer.
+
+
+ Recommendations
+ Ensure that the JSON snippet file adheres to the correct format, including
+ required fields such as name, prefix, body, and description.
+
+ For a sample snippet file, download sample.json. +
+
+
Do you think more users would benefit from this snippet?
If so, please consider
diff --git a/builder/main.css b/builder/main.css
index b770b1e..8da70fe 100644
--- a/builder/main.css
+++ b/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;
}
\ No newline at end of file
diff --git a/builder/main.js b/builder/main.js
index 907e476..460ad4f 100644
--- a/builder/main.js
+++ b/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,
'\\"'
);
diff --git a/builder/sample.json b/builder/sample.json
new file mode 100644
index 0000000..3bc84fc
--- /dev/null
+++ b/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\""
+ }
+ }
\ No newline at end of file