🚸 Add cbor format auto detect

app.vue

@@ -8,7 +8,7 @@
           <label for="cbor-value">CBOR</label>
           <div>
             <label for="cbor-encoding">Encoding</label>
-            <select id="cbor-encoding" v-model="cborEncoding">
+            <select @change="jsonToCbor" id="cbor-encoding" v-model="cborEncoding">
               <option value="base64">base64</option>
               <option value="hex">hex</option>
             </select>
@@ -73,9 +73,15 @@ useHead({
   ],
 })
 
-onMounted(() => {
-  jsonToCbor()
-})
+function isBase64(input: string) {
+  const base64Pattern = /^(?:[A-Za-z0-9+/]{4})*(?:[A-Za-z0-9+/]{2}==|[A-Za-z0-9+/]{3}=)?$/;
+  return base64Pattern.test(input);
+}
+
+function isHex(input: string) {
+  const hexPattern = /^[0-9A-Fa-f]+$/;
+  return hexPattern.test(input);
+}
 
 function stringToBuffer(input: string) {
   if (cborEncoding.value === 'base64') {
@@ -87,6 +93,11 @@ function stringToBuffer(input: string) {
 
 function cborToJson() {
   try {
+    if (isBase64(cborValue.value) && !isHex(cborValue.value)) {
+      cborEncoding.value = 'base64'
+    } else if (!isBase64(cborValue.value) && isHex(cborValue.value)) {
+      cborEncoding.value = 'hex'
+    }
     const cbor = decode(stringToBuffer(cborValue.value))
     jsonValue.value = JSON.stringify(cbor, null, 2)
   } catch (e) {
@@ -106,8 +117,6 @@ function jsonToCbor() {
     cborValue.value = (e as Error).message
   }
 }
-
-watch(cborEncoding, () => jsonToCbor())
 </script>
 
 <style scoped>