Merge branch 'main' into dev

webdevnerdstuff · webdevnerdstuff · commit 7f506fd1a8f6 · 2024-12-12T10:39:40.000-08:00
diff --git a/.release-it.json b/.release-it.json
@@ -0,0 +1,13 @@
+{
+  "git": {
+    "commitMessage": "chore: release ${version}",
+    "tagName": "v${version}"
+  },
+  "npm": {
+    "publish": true
+  },
+  "github": {
+    "release": true,
+    "releaseName": "v${version}"
+  }
+}
diff --git a/dist/vue-code-block.cjs.js b/dist/vue-code-block.cjs.js
diff --git a/dist/vue-code-block.es.js b/dist/vue-code-block.es.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wdns/vue-code-block",
-	"version": "2.3.3",
+	"version": "2.3.4",
 	"description": "Vue 3 CodeBlock - Highlight your code with ease using this syntax highlighting component powered by PrismJS or Highlight.js.",
 	"private": false,
 	"publishConfig": {
diff --git a/src/plugin/VCodeBlock.vue b/src/plugin/VCodeBlock.vue
@@ -96,19 +96,13 @@
 				:class="`language-${settings.lang}`"
 				:style="preTagStyles"
 			>
-				<code
-					v-if="prismPlugin"
-					:class="`language-${settings.lang} ${settings.browserWindow ? 'v-code-block--code-browser' : ''} ${settings.highlightjs ? 'hljs' : ''}`"
-					:style="codeTagStyles"
-					v-text="computedCode"
-				></code>
-				<code
-					v-else
-					:class="`language-${settings.lang} ${settings.browserWindow ? 'v-code-block--code-browser' : ''} ${settings.highlightjs ? 'hljs' : ''}`"
-					:style="codeTagStyles"
-					v-html="renderedCode"
-				></code>
-			</pre>
+		<code v-if="prismPlugin"
+			:class="`language-${settings.lang} ${settings.browserWindow ? 'v-code-block--code-browser' : ''} ${settings.highlightjs ? 'hljs' : ''}`"
+			:style="codeTagStyles" v-text="computedCode"></code>
+		<code v-else
+			:class="`language-${settings.lang} ${settings.browserWindow ? 'v-code-block--code-browser' : ''} ${settings.highlightjs ? 'hljs' : ''}`"
+			:style="codeTagStyles" v-html="renderedCode"></code>
+	</pre>
 		</div>
 	</div>
 </template>
@@ -332,10 +326,29 @@ function checkLibrary(): void {
 	}
 }
 
+function isValidJSON(str: string): boolean {
+	try {
+		JSON.parse(str);
+		return true;
+	}
+	catch (e) {
+		return false;
+	}
+}
+
 function convertCode(): void {
 	if (settings.value.lang === 'json') {
 		const propsCode = settings.value.code.toString();
-		convertedCode.value = JSON.stringify(JSON.parse(propsCode), null, settings.value.indent);
+
+		// Check if the code is valid JSON //
+		if (isValidJSON(propsCode)) {
+			convertedCode.value = JSON.stringify(JSON.parse(propsCode), null, settings.value.indent);
+			return;
+		}
+
+		// Change lang to text if not valid JSON to prevent errors //
+		settings.value.lang = 'text';
+		convertedCode.value = propsCode;
 		return;
 	}
 
diff --git a/src/plugin/__tests__/__snapshots__/VCodeBlock.test.ts.snap b/src/plugin/__tests__/__snapshots__/VCodeBlock.test.ts.snap
@@ -1,37 +1,5 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`VCodeBlock Component > Component > should ... 1`] = `
-{
-  "browserWindow": false,
-  "code": "",
-  "codeBlockRadius": "0.5rem",
-  "copyButton": true,
-  "copyFailedText": "Copy failed!",
-  "copyIcons": true,
-  "copySuccessText": "Copied!",
-  "copyTab": true,
-  "copyText": "Copy Code",
-  "cssPath": undefined,
-  "floatingTabs": true,
-  "globalOptions": false,
-  "height": "auto",
-  "highlightjs": true,
-  "indent": 2,
-  "label": "",
-  "lang": "javascript",
-  "languages": undefined,
-  "maxHeight": "auto",
-  "persistentCopyButton": false,
-  "prismPlugin": false,
-  "prismjs": false,
-  "runTab": false,
-  "runText": "Run",
-  "tabGap": "0.25rem",
-  "tabs": false,
-  "theme": "neon-bunny",
-}
-`;
-
 exports[`VCodeBlock Component > Component > should mount the component 1`] = `
 {
   "browserWindow": false,

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@wdns/vue-code-block",`
`3`		`- "version": "2.3.3",`
	`3`	`+ "version": "2.3.4",`
`4`	`4`	`"description": "Vue 3 CodeBlock - Highlight your code with ease using this syntax highlighting component powered by PrismJS or Highlight.js.",`
`5`	`5`	`"private": false,`
`6`	`6`	`"publishConfig": {`