adam-acs/inertia/components/JsonEditor.vue

<script setup lang="ts">
import { onMounted, onBeforeUnmount, ref, watch } from 'vue'
import { JSONEditor, type Content, type OnChangeStatus } from 'vanilla-jsoneditor'

const props = defineProps<{
  modelValue: string
}>()

const emit = defineEmits<{
  'update:modelValue': [value: string]
}>()

const editorRef = ref<HTMLElement>()
let editor: JSONEditor | null = null

onMounted(() => {
  if (!editorRef.value) return

  let initialContent: Content
  try {
    initialContent = { json: JSON.parse(props.modelValue) }
  } catch {
    initialContent = { text: props.modelValue }
  }

  editor = new JSONEditor({
    target: editorRef.value,
    props: {
      content: initialContent,
      onChange: (content: Content, _previousContent: Content, _status: OnChangeStatus) => {
        if ('json' in content) {
          emit('update:modelValue', JSON.stringify(content.json))
        } else if ('text' in content) {
          emit('update:modelValue', content.text)
        }
      },
    },
  })
})

watch(
  () => props.modelValue,
  (newValue) => {
    if (!editor) return
    const currentContent = editor.get()
    const currentText = 'json' in currentContent
      ? JSON.stringify(currentContent.json)
      : currentContent.text
    if (currentText !== newValue) {
      try {
        editor.set({ json: JSON.parse(newValue) })
      } catch {
        editor.set({ text: newValue })
      }
    }
  }
)

onBeforeUnmount(() => {
  if (editor) {
    editor.destroy()
    editor = null
  }
})
</script>

<template>
  <div ref="editorRef" class="json-editor-container"></div>
</template>

<style scoped>
.json-editor-container {
  min-height: 150px;
}
</style>