Merge branch 'refs/heads/main' into v1

src/routes/+page.svelte

@@ -35,6 +35,9 @@
     <li>
       <a href="examples/custom_value_renderer">Custom value renderer (password, enum, action)</a>
     </li>
+    <li>
+      <a href="examples/custom_value_renderer2">Custom value renderer 2 (editable input)</a>
+    </li>
     <li>
       <a href="examples/json_schema_validation">JSON Schema validation</a>
     </li>

src/routes/components/EditableValueInput.svelte

@@ -0,0 +1,124 @@
+<svelte:options immutable={true} />
+
+<script lang="ts">
+  import { compileJSONPointer, type JSONPath } from 'immutable-json-patch'
+  import {
+    createValueSelection,
+    type OnPatch,
+    type OnSelect,
+    type ValueNormalization
+  } from 'svelte-jsoneditor'
+
+  export let value: unknown
+  export let path: JSONPath
+  export let enforceString: boolean
+  export let normalization: ValueNormalization
+  export let onSelect: OnSelect
+  export let onPatch: OnPatch
+  export let focus: () => void
+
+  export let inputValue: string = normalization.escapeValue(value)
+
+  function convert(value: string): unknown {
+    if (enforceString) {
+      return value
+    }
+
+    if (value === '') {
+      return ''
+    }
+
+    const valueTrim = value.trim()
+
+    if (valueTrim === 'null') {
+      return null
+    }
+
+    if (valueTrim === 'true') {
+      return true
+    }
+
+    if (valueTrim === 'false') {
+      return false
+    }
+
+    const number = Number(value)
+    if (!isNaN(number)) {
+      return number
+    }
+
+    return value
+  }
+
+  function apply() {
+    console.log('apply')
+    onPatch([
+      {
+        op: 'replace',
+        path: compileJSONPointer(path),
+        value: convert(normalization.unescapeValue(inputValue))
+      }
+    ])
+
+    focus()
+  }
+
+  function cancel() {
+    onSelect(createValueSelection(path, false))
+
+    focus()
+  }
+
+  function handleMouseDown(event: MouseEvent) {
+    event.stopPropagation()
+  }
+
+  function handleKeyDown(event: KeyboardEvent) {
+    event.stopPropagation()
+
+    if (event.key === 'Enter') {
+      apply()
+    }
+
+    if (event.key === 'Escape') {
+      cancel()
+    }
+  }
+</script>
+
+<!-- svelte-ignore a11y-autofocus -->
+<input
+  bind:value={inputValue}
+  class="jse-value jse-custom-input"
+  on:mousedown={handleMouseDown}
+  on:keydown={handleKeyDown}
+  autofocus
+/>
+<button type="button" class="apply" on:click={apply}>Apply</button>
+<button type="button" class="cancel" on:click={cancel}>Cancel</button>
+
+<style>
+  input.jse-value.jse-custom-input {
+    font-family: inherit;
+    font-size: inherit;
+    color: inherit;
+    border: none;
+    background: white important;
+    outline: 2px solid red;
+  }
+
+  button {
+    font-family: inherit;
+    font-size: inherit;
+    border: none;
+    color: white;
+    background: red;
+    outline: 2px solid red;
+    margin-left: 0.5em;
+    cursor: pointer;
+
+    &:hover {
+      background: rgb(255, 68, 68);
+    }
+  }
+</style>

src/routes/examples/custom_value_renderer2/+page.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+  import {
+    JSONEditor,
+    ReadonlyValue,
+    type RenderValueComponentDescription,
+    type RenderValueProps
+  } from 'svelte-jsoneditor'
+  import EditableValueInput from '../../components/EditableValueInput.svelte'
+
+  let content = {
+    text: undefined, // can be used to pass a stringified JSON document instead
+    json: {
+      array: [1, 2, 3],
+      boolean: true,
+      color: '#82b92c',
+      null: null,
+      number: 123,
+      object: { a: 'b', c: 'd' },
+      string: 'Hello World'
+    }
+  }
+
+  function onRenderValue(props: RenderValueProps): RenderValueComponentDescription[] {
+    const {
+      path,
+      value,
+      parser,
+      readOnly,
+      enforceString,
+      isEditing,
+      normalization,
+      searchResultItems,
+      onSelect,
+      onPatch,
+      focus
+    } = props
+
+    if (isEditing && !readOnly) {
+      return [
+        {
+          component: EditableValueInput,
+          props: {
+            value,
+            path,
+            enforceString,
+            normalization,
+            onSelect,
+            onPatch,
+            focus
+          }
+        }
+      ]
+    }
+
+    return [
+      {
+        component: ReadonlyValue,
+        props: { path, value, readOnly, parser, normalization, searchResultItems, onSelect }
+      }
+    ]
+  }
+</script>
+
+<svelte:head>
+  <title>Custom value renderer (editable input) | svelte-jsoneditor</title>
+</svelte:head>
+
+<h1>Custom value renderer 2 (editable input)</h1>
+
+<p>
+  Provide a custom <code>onRenderValue</code> method, which demonstrates how to create a fully editable
+  input field. The same can be used to for example create an embedded code editor.
+</p>
+
+<div class="editor">
+  <JSONEditor bind:content {onRenderValue} />
+</div>
+
+<style>
+  .editor {
+    width: 700px;
+    height: 400px;
+  }
+
+  p {
+    max-width: 700px;
+  }
+</style>