Add support for ReJSON-RL type keys

package.json

@@ -1,6 +1,6 @@
 {
   "name": "redis-gui",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "private": true,
   "description": "Graphical UI for managing Redis databases",
   "author": {

packages/renderer/src/components/Elements/Content/ReJsonContent.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { useRedis } from '/@/use/redis'
+import { useToaster } from '/@/use/toaster'
+import Value from '/@/components/Elements/Value.vue'
+import CenteredLoader from '/@/components/Elements/CenteredLoader.vue'
+import { useReloadOnKeyUpdate } from '/@/use/reloadOnKeyUpdate'
+
+const props = defineProps<{
+  name: string,
+}>()
+
+const value = ref('')
+const isLoading = ref(true)
+
+const redis = useRedis()
+const toaster = useToaster()
+
+const save = async ({value: newValue}: { value: string }) => {
+  try {
+    await redis.client?.sendCommand(['JSON.SET', props.name, '$', newValue])
+    value.value = newValue
+    toaster.success('Saved')
+  } catch (error) {
+    toaster.error(String(error))
+  }
+}
+
+const load = async () => {
+  isLoading.value = true
+  value.value = await redis.client?.sendCommand(['JSON.GET', props.name])
+  isLoading.value = false
+}
+
+onMounted(load)
+useReloadOnKeyUpdate(props.name, () => load())
+</script>
+
+<template>
+  <div class="overflow-y-auto">
+    <Value v-if="!isLoading" class="relative" :value="value" without-delete @save="save" />
+    <CenteredLoader v-if="isLoading" />
+  </div>
+</template>

packages/renderer/src/components/Elements/KeyContent.vue

@@ -13,6 +13,7 @@ import HashContent from '/@/components/Elements/Content/HashContent.vue'
 import ListContent from '/@/components/Elements/Content/ListContent.vue'
 import SetContent from '/@/components/Elements/Content/SetContent.vue'
 import StringContent from '/@/components/Elements/Content/StringContent.vue'
+import ReJsonContent from '/@/components/Elements/Content/ReJsonContent.vue'
 import ZSetContent from '/@/components/Elements/Content/ZSetContent.vue'
 import ConfirmDialog from '/@/components/Elements/ConfirmDialog.vue'
 import IFrameModal from '/@/components/Elements/IFrameModal.vue'
@@ -77,6 +78,8 @@ const typeDocs = computed(() => {
       return 'https://redis.io/topics/data-types#sets'
     case 'zset':
       return 'https://redis.io/topics/data-types#sorted-sets'
+    case 'ReJSON-RL':
+      return 'https://redis.io/docs/stack/json'
     case 'string':
       return 'https://redis.io/topics/data-types#strings'
     default:
@@ -98,6 +101,8 @@ const currentContent = computed(() => {
       return SetContent
     case 'zset':
       return ZSetContent
+    case 'ReJSON-RL':
+      return ReJsonContent
     default:
       return StringContent
   }