feat: create a Svelte examples section

README.md

@@ -18,7 +18,10 @@ npm install svelte-jsoneditor
 
 ## Use
 
-See the [/examples](/examples) section for some full examples.
+### Examples
+
+- Svelte examples: [/src/routes/examples](/src/routes/examples)
+- Plain JavaScript examples: [/examples/browser](/examples/browser)
 
 ### SvelteKit setup
 
@@ -66,10 +69,11 @@ Create a JSONEditor with two-way binding `bind:json`:
     object: { a: 'b', c: 'd' },
     string: 'Hello World'
   }
+  let text = undefined // used when in code mode
 </script>
 
 <div>
-  <JSONEditor bind:json />
+  <JSONEditor bind:json bind:text />
 </div>
 ```
 
@@ -82,16 +86,17 @@ Or one-way binding:
   let json = {
     greeting: 'Hello World'
   }
+  let text = undefined // used when in code mode
 
-  function onChange(content) {
+  function handleChange(content) {
     // content is an object { json: JSON | undefined, text: string | undefined }
     console.log('onChange: ', content)
     json = content.json
   }
 </script>
 
 <div>
-  <JSONEditor json="{json}" onChange="{onChange}" />
+  <JSONEditor {json} {text} onChange="{handleChange}" />
 </div>
 ```
 
@@ -125,6 +130,9 @@ Browser example loading the ES module:
           }
         }
       })
+
+      // use methods get, getText, set, setText, update, updateText, and onChange
+      // to get data in or out of the editor. Use updateProps to update properties.
     </script>
   </body>
 </html>
@@ -142,7 +150,7 @@ Svelte component:
 </script>
 
 <div>
-  <JSONEditor json="{json}" />
+  <JSONEditor {json} {text} />
 </div>
 ```
 

src/app.css

@@ -13,4 +13,31 @@ body {
   box-sizing: border-box;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
     'Helvetica Neue', sans-serif;
+  line-height: 1.5em;
+}
+
+h1 {
+  color: #ff3e00;
+  text-transform: uppercase;
+  font-size: 1.5em;
+  font-weight: 100;
+}
+
+h2 {
+  color: #4d4d4d;
+  text-transform: uppercase;
+  font-size: 1em;
+  font-weight: 400;
+}
+
+a {
+  color: #156fc5;
+}
+
+a:hover {
+  color: #0f508d;
+}
+
+p {
+  max-width: 700px;
 }

src/routes/development/DevelopmentApp.svelte → src/routes/development.svelte

@@ -1,3 +1,8 @@
+<script context="module" lang="ts">
+  export const prerender = true
+  export const ssr = false
+</script>
+
 <script lang="ts">
   import { createAjvValidator, JSONEditor } from '$lib'
   import { useLocalStorage } from '$lib/utils/localStorageUtils.js'
@@ -83,6 +88,10 @@
   }
 </script>
 
+<svelte:head>
+  <title>development application | svelte-jsoneditor</title>
+</svelte:head>
+
 <div class="demo-app">
   <h1>svelte-jsoneditor development application</h1>
   <p>
@@ -264,13 +273,6 @@
 </div>
 
 <style>
-  h1 {
-    color: #ff3e00;
-    text-transform: uppercase;
-    font-size: 1.5em;
-    font-weight: 100;
-  }
-
   .columns {
     display: flex;
     gap: 20px;

src/routes/examples/basic_usage_one_way_binding.svelte

@@ -0,0 +1,42 @@
+<script>
+  import { JSONEditor } from '$lib' // replace this with 'svelte-jsoneditor'
+
+  let json = {
+    array: [1, 2, 3],
+    boolean: true,
+    color: '#82b92c',
+    null: null,
+    number: 123,
+    object: { a: 'b', c: 'd' },
+    string: 'Hello World'
+  }
+  let text = undefined // used when in code mode
+
+  function handleChange(content) {
+    console.log('contents changed:', { json, text })
+    json = content.json
+    text = content.text
+  }
+</script>
+
+<svelte:head>
+  <title>Basic usage (one-way binding) | svelte-jsoneditor</title>
+</svelte:head>
+
+<h1>Basic usage (one-way binding)</h1>
+
+<p>
+  Use JSONEditor with one-way binding: pass read-only properties <code>json</code> and
+  <code>text</code>, and pass an <code>onChange</code> callback function to receive changes.
+</p>
+
+<div class="editor">
+  <JSONEditor {json} {text} onChange={handleChange} />
+</div>
+
+<style>
+  .editor {
+    width: 700px;
+    height: 400px;
+  }
+</style>

src/routes/examples/basic_usage_two_way_binding.svelte

@@ -0,0 +1,38 @@
+<script>
+  import { JSONEditor } from '$lib' // replace this with 'svelte-jsoneditor'
+
+  let json = {
+    array: [1, 2, 3],
+    boolean: true,
+    color: '#82b92c',
+    null: null,
+    number: 123,
+    object: { a: 'b', c: 'd' },
+    string: 'Hello World'
+  }
+  let text = undefined // used when in code mode
+
+  $: console.log('contents changed:', { json, text })
+</script>
+
+<svelte:head>
+  <title>Basic usage (two-way binding) | svelte-jsoneditor</title>
+</svelte:head>
+
+<h1>Basic usage (two-way binding)</h1>
+
+<p>
+  Use JSONEditor utilizing two-way binding: bind properties <code>json</code> and
+  <code>text</code>, so they will automatically update on changes.
+</p>
+
+<div class="editor">
+  <JSONEditor bind:json bind:text />
+</div>
+
+<style>
+  .editor {
+    width: 700px;
+    height: 400px;
+  }
+</style>

src/routes/examples/custom_dynamic_styling.svelte

@@ -0,0 +1,55 @@
+<script>
+  import { JSONEditor } from '$lib' // replace this with 'svelte-jsoneditor'
+
+  let json = {
+    array: [1, 2, 3],
+    boolean: true,
+    color: '#82b92c',
+    null: null,
+    number: 123,
+    object: { a: 'b', c: 'd' },
+    string: 'Hello World'
+  }
+  let text = undefined // used when in code mode
+
+  function handleClassName(path, value) {
+    if (JSON.stringify(path) === '["object","c"]' || JSON.stringify(path) === '["string"]') {
+      return 'custom-class-highlight'
+    }
+
+    if (value === true || value === false) {
+      return 'custom-class-boolean'
+    }
+  }
+</script>
+
+<svelte:head>
+  <title>Custom, dynamic styling | svelte-jsoneditor</title>
+</svelte:head>
+
+<h1>Custom, dynamic styling</h1>
+
+<p>
+  You can apply dynamic styling depending on the document contents using <code>onClassName</code>.
+  In this example, all boolean values get a red background, and nodes with paths
+  <code>/string</code> and <code>/object/c</code> get a green background.
+</p>
+
+<div class="editor">
+  <JSONEditor bind:json bind:text onClassName={handleClassName} />
+</div>
+
+<style>
+  .editor {
+    width: 700px;
+    height: 400px;
+  }
+
+  :global(.json-node.custom-class-highlight .contents) {
+    background: #bfff66;
+  }
+
+  :global(.json-node.custom-class-boolean .value) {
+    background: #ffb5c2;
+  }
+</style>

src/routes/examples/custom_menu_buttons.svelte

@@ -0,0 +1,74 @@
+<script>
+  import { JSONEditor } from '$lib' // replace this with 'svelte-jsoneditor'
+  import { faCopy } from '@fortawesome/free-regular-svg-icons'
+
+  let json = {
+    array: [1, 2, 3],
+    boolean: true,
+    color: '#82b92c',
+    null: null,
+    number: 123,
+    object: { a: 'b', c: 'd' },
+    string: 'Hello World'
+  }
+  let text = undefined // used when in code mode
+
+  function handleCopy() {
+    console.log('Custom copy button clicked')
+
+    const contents = text !== undefined ? text : JSON.stringify(json, null, 2)
+
+    navigator.clipboard.writeText(contents).catch((err) => console.error(err))
+  }
+
+  function handleRenderMenu(mode, items) {
+    const separator = {
+      separator: true
+    }
+
+    const customCopyButton = {
+      onClick: handleCopy,
+      icon: faCopy,
+      title: 'Copy document to clipboard',
+      className: 'custom-copy-button'
+    }
+
+    const space = {
+      space: true
+    }
+
+    const itemsWithoutSpace = items.slice(0, items.length - 2)
+
+    return itemsWithoutSpace.concat([separator, customCopyButton, space])
+  }
+</script>
+
+<svelte:head>
+  <title>Custom menu buttons | svelte-jsoneditor</title>
+</svelte:head>
+
+<h1>Custom menu buttons</h1>
+
+<p>
+  You can add/remove buttons from the main menu using <code>onRenderMenu</code>. In this example a
+  button is added to quickly copy the document to the clipboard.
+</p>
+
+<div class="editor">
+  <JSONEditor bind:json bind:text onRenderMenu={handleRenderMenu} />
+</div>
+
+<style>
+  .editor {
+    width: 700px;
+    height: 400px;
+  }
+
+  :global(.custom-copy-button) {
+    background: #ff3e00 !important;
+  }
+  :global(.custom-copy-button:hover),
+  :global(.custom-copy-button:active) {
+    background: #ff632f !important;
+  }
+</style>