From 8b99527604a0f1dbe511c0974359df0bfc187ee6 Mon Sep 17 00:00:00 2001
From: Jos de Jong <wjosdejong@gmail.com>
Date: Sun, 16 Aug 2020 11:44:28 +0200
Subject: [PATCH] Implement option mode

---
 public/index.html                |  3 ++-
 src/components/JSONEditor.svelte | 10 +++++++++-
 src/main.js                      |  3 +++
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/public/index.html b/public/index.html
index 05a3ad0..34132f3 100644
--- a/public/index.html
+++ b/public/index.html
@@ -52,7 +52,7 @@
 	</p>
 
 	<script type="module">
-		import jsoneditor from './dist/es/jsoneditor.js'
+		import jsoneditor, { TreeMode } from './dist/es/jsoneditor.js'
 
 		const doc = {
 			'array': [1, 2, 3, {
@@ -93,6 +93,7 @@
 
 		const testEditor = jsoneditor({
 			target: document.getElementById('testEditorContainer'),
+			mode: TreeMode,
 			doc,
 			onChangeJson: doc => console.log('onChangeJson', doc),
 			validate: doc => {
diff --git a/src/components/JSONEditor.svelte b/src/components/JSONEditor.svelte
index b78cb9d..563ab2c 100644
--- a/src/components/JSONEditor.svelte
+++ b/src/components/JSONEditor.svelte
@@ -3,8 +3,16 @@
   import TreeMode from './treemode/TreeMode.svelte'
 
   export let config = {}
+  let mode
+  let restConfig
+
+  $: {
+    let { _mode, ..._restConfig } = config
+    mode = _mode
+    restConfig = _restConfig
+  }
 </script>
 
 <Modal>
-	<TreeMode {...config} />
+  <svelte:component this={mode || TreeMode} {...restConfig} />
 </Modal>
diff --git a/src/main.js b/src/main.js
index f2dca41..2e5d56d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,4 +1,5 @@
 import JSONEditor from './components/JSONEditor.svelte'
+import _TreeMode from './components/treemode/TreeMode.svelte'
 
 export default function jsoneditor (config) {
 	const { target, ...restConfig } = config
@@ -11,4 +12,6 @@ export default function jsoneditor (config) {
 	})
 }
 
+export const TreeMode = _TreeMode
+
 export { createAjvValidator } from './plugins/createAjvValidator.mjs'