json‐editor for svelte

JSON Editor 에디터를 svelte 컴포넌트로 만들어서 사용할 수 있습니다.
에디터를 svelte 컴포넌트로 감싸서 사용하여 기능을 이용합니다.

component source

json-editor.svelte

<div bind:this={_editor}></div>

<script>
import { onMount, onDestroy, createEventDispatcher } from 'svelte'
import JsonEditor from '@redgoose/json-editor'
import '@redgoose/json-editor/css'

const dispatch = createEventDispatcher()
export let theme = 'light'
export let live = true
export let src = {}
let _editor
let editor

$: if (editor) {
  editor.options.theme = theme
  editor.options.live = live
}

function onUpdate({ detail })
{
  dispatch('update', detail)
}

function onContext({ detail })
{
  dispatch('context', detail)
}

onMount(() => {
  editor = new JsonEditor(_editor, {
    live,
    theme,
  })
  _editor.addEventListener('update', onUpdate)
  _editor.addEventListener('context', onContext)
  editor.replace(src, false)
  dispatch('init', { instance: editor })
})

onDestroy(() => {
  editor.destroy()
})
</script>

먼저 이렇게 svelte 파일을 작성하여 보관해 둡니다.
이 컴포넌트 파일을 사용하여 에디터로 쓰게 될것입니다.

usage

먼저 패키지를 설치합니다.

npm install @redgoose/json-editor

패키지를 설치한 후에 만들어뒀던 래퍼 svelte 컴포넌트를 불러와서 사용합니다.

<JsonEditor/>

<script>
import JsonEditor from './json-editor.svelte'
</script>

props

• src: 데이터 값 (마운트 하는 시점에만 에디터에 적용됩니다!)
• theme: 다크모드에 대한 값
• live: 데이터가 업데이트 될때마다 update이벤트를 실행할지에 대한 여부

src props값과 에디터의 내용은 서로 분리되어 있기 때문에 값이 변한다고 에디터에 자동으로 업데이트 되지 않습니다.
에디터의 내용은 그대로 두고 외부에서 에디터의 내용을 변경하려면 에디터 인스턴스의 replace()나 import() 메서드를 이용하는것을 권장드립니다.

method

svelte 래퍼 컴포넌트에서 필요한 메서드를 만들어 기능을 확장시킬 수 있습니다.
하지만 에디터 인스턴스 객체를 접근하여 에디터의 기능을 사용할 수 있는것을 참고해주세요.

event

init

에디터 컴포넌트를 시작할때 호출되는 이벤트. 에디터 인스턴스를 가져올 수 있습니다.

<JsonEditor on:init={onInit}/>

<script>
function onInit({ detail })
{
  editor = detail.instance
}
</script>

update

<JsonEditor on:init={onUpdate}/>

<script>
function onUpdate({ detail })
{
  console.log('updated data', detail)
}
</script>

context

<JsonEditor on:init={onContext}/>

<script>
function onContext({ detail })
{
  console.log('open context menu', detail)
}
</script>

demo code

마지막으로 테스트로 작성한 컴포넌트를 불러오는 데모와 프로젝트를 남겨둡니다.

<article class="app">
  <header class="header">
    <h1>json-editor demo</h1>
    <p>svelte version</p>
  </header>
  <div class="content">
    <div class="content__editor">
      <JsonEditor
        src={src}
        theme="light"
        live={true}
        on:init={onInit}
        on:update={onUpdate}
        on:context={onContext}/>
    </div>
    <div class="content__preview">
      <pre>{_preview}</pre>
    </div>
  </div>
  <nav class="controller">
    <button type="button" on:click={exportData}>
      export data
    </button>
  </nav>
</article>

<script>
import JsonEditor from './components/json-editor/index.svelte'

let editor
let src = { foo: 'bar' }

$: _preview = JSON.stringify(src, null, 2)

function onInit({ detail })
{
  editor = detail.instance
}

function onUpdate({ detail })
{
  src = detail
}

function onContext({ detail })
{
  console.log('open context menu', detail)
}

function exportData()
{
  console.log('export data', editor.export(undefined))
}
</script>

project file

svelte-demo.zip