fix: #498 pressing enter when editing a value submits form

josdejong · Nov 1, 2024 · e8c814f · e8c814f
1 parent d6c0dc5
commit e8c814f
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 58 deletions.
diff --git a/src/lib/components/controls/EditableDiv.svelte b/src/lib/components/controls/EditableDiv.svelte
@@ -86,11 +86,15 @@
     const combo = keyComboFromEvent(event)
 
     if (combo === 'Escape') {
+      event.preventDefault()
+
       handleCancel()
     }
 
     if (combo === 'Enter' || combo === 'Tab') {
       // apply changes
+      event.preventDefault()
+
       closed = true
 
       const newValue = getDomValue()

diff --git a/src/lib/components/controls/navigationBar/NavigationBarPathEditor.svelte b/src/lib/components/controls/navigationBar/NavigationBarPathEditor.svelte
@@ -72,10 +72,13 @@
     const combo = keyComboFromEvent(event)
 
     if (combo === 'Escape') {
+      event.preventDefault()
       onClose()
     }
 
     if (combo === 'Enter') {
+      event.preventDefault()
+
       validationActive = true
       const result = parseAndValidate(inputPath)
       if (result.path !== undefined) {

diff --git a/src/lib/components/modes/tablemode/TableMode.svelte b/src/lib/components/modes/tablemode/TableMode.svelte
@@ -1307,6 +1307,8 @@
     }
 
     if (combo === 'Ctrl+Enter' && isValueSelection(selection)) {
+      event.preventDefault()
+
       const value = getIn(json, selection.path)
 
       if (isUrl(value)) {

diff --git a/src/lib/components/modes/treemode/TreeMode.svelte b/src/lib/components/modes/treemode/TreeMode.svelte
@@ -1504,6 +1504,7 @@
         const parent = getIn(json, initial(path))
         if (Array.isArray(parent)) {
           // change into selection of the value
+          event.preventDefault()
           selection = createValueSelection(path)
         }
       }

diff --git a/src/routes/components/EditableValueInput.svelte b/src/routes/components/EditableValueInput.svelte
@@ -77,10 +77,12 @@
     event.stopPropagation()
 
     if (event.key === 'Enter') {
+      event.preventDefault()
       apply()
     }
 
     if (event.key === 'Escape') {
+      event.preventDefault()
       cancel()
     }
   }

diff --git a/src/routes/development/+page.svelte b/src/routes/development/+page.svelte
@@ -726,35 +726,37 @@
       </p>
       <div class="tree-editor" style="height: {height}">
         {#if $showTreeEditor}
-          <JSONEditor
-            bind:this={refTreeEditor}
-            bind:content
-            bind:selection={selectionTree}
-            bind:mode={leftEditorMode}
-            mainMenuBar={$mainMenuBar}
-            navigationBar={$navigationBar}
-            statusBar={$statusBar}
-            askToFormat={$askToFormat}
-            escapeControlCharacters={$escapeControlCharacters}
-            escapeUnicodeCharacters={$escapeUnicodeCharacters}
-            flattenColumns={$flattenColumns}
-            readOnly={$readOnly}
-            indentation={$selectedIndentation}
-            tabSize={$tabSize}
-            parser={selectedParser}
-            pathParser={selectedPathParser}
-            validator={selectedValidator}
-            {queryLanguages}
-            bind:queryLanguageId
-            {onRenderMenu}
-            onChange={onChangeTree}
-            onSelect={onSelectTree}
-            onRenderValue={$useCustomValueRenderer ? customRenderValue : renderValue}
-            {onRenderContextMenu}
-            {onChangeMode}
-            onFocus={() => console.log('onFocus tree')}
-            onBlur={() => console.log('onBlur tree', { content: refTreeEditor?.get() })}
-          />
+          <form novalidate action="/">
+            <JSONEditor
+              bind:this={refTreeEditor}
+              bind:content
+              bind:selection={selectionTree}
+              bind:mode={leftEditorMode}
+              mainMenuBar={$mainMenuBar}
+              navigationBar={$navigationBar}
+              statusBar={$statusBar}
+              askToFormat={$askToFormat}
+              escapeControlCharacters={$escapeControlCharacters}
+              escapeUnicodeCharacters={$escapeUnicodeCharacters}
+              flattenColumns={$flattenColumns}
+              readOnly={$readOnly}
+              indentation={$selectedIndentation}
+              tabSize={$tabSize}
+              parser={selectedParser}
+              pathParser={selectedPathParser}
+              validator={selectedValidator}
+              {queryLanguages}
+              bind:queryLanguageId
+              {onRenderMenu}
+              onChange={onChangeTree}
+              onSelect={onSelectTree}
+              onRenderValue={$useCustomValueRenderer ? customRenderValue : renderValue}
+              {onRenderContextMenu}
+              {onChangeMode}
+              onFocus={() => console.log('onFocus tree')}
+              onBlur={() => console.log('onBlur tree', { content: refTreeEditor?.get() })}
+            />
+          </form>
         {/if}
       </div>
 
@@ -787,35 +789,37 @@
 
       <div class="text-editor" style="height: {height}">
         {#if $showTextEditor}
-          <JSONEditor
-            bind:this={refTextEditor}
-            mode={Mode.text}
-            bind:content
-            bind:selection={selectionText}
-            mainMenuBar={$mainMenuBar}
-            navigationBar={$navigationBar}
-            statusBar={$statusBar}
-            askToFormat={$askToFormat}
-            escapeControlCharacters={$escapeControlCharacters}
-            escapeUnicodeCharacters={$escapeUnicodeCharacters}
-            flattenColumns={$flattenColumns}
-            readOnly={$readOnly}
-            indentation={$selectedIndentation}
-            tabSize={$tabSize}
-            parser={selectedParser}
-            pathParser={selectedPathParser}
-            validator={selectedValidator}
-            {queryLanguages}
-            {queryLanguageId}
-            {onChangeQueryLanguage}
-            {onRenderMenu}
-            onChange={onChangeText}
-            onSelect={onSelectText}
-            onRenderValue={$useCustomValueRenderer ? customRenderValue : renderValue}
-            {onChangeMode}
-            onFocus={() => console.log('onFocus text')}
-            onBlur={() => console.log('onBlur text', { content: refTextEditor?.get() })}
-          />
+          <form novalidate action="/">
+            <JSONEditor
+              bind:this={refTextEditor}
+              mode={Mode.text}
+              bind:content
+              bind:selection={selectionText}
+              mainMenuBar={$mainMenuBar}
+              navigationBar={$navigationBar}
+              statusBar={$statusBar}
+              askToFormat={$askToFormat}
+              escapeControlCharacters={$escapeControlCharacters}
+              escapeUnicodeCharacters={$escapeUnicodeCharacters}
+              flattenColumns={$flattenColumns}
+              readOnly={$readOnly}
+              indentation={$selectedIndentation}
+              tabSize={$tabSize}
+              parser={selectedParser}
+              pathParser={selectedPathParser}
+              validator={selectedValidator}
+              {queryLanguages}
+              {queryLanguageId}
+              {onChangeQueryLanguage}
+              {onRenderMenu}
+              onChange={onChangeText}
+              onSelect={onSelectText}
+              onRenderValue={$useCustomValueRenderer ? customRenderValue : renderValue}
+              {onChangeMode}
+              onFocus={() => console.log('onFocus text')}
+              onBlur={() => console.log('onBlur text', { content: refTextEditor?.get() })}
+            />
+          </form>
         {/if}
       </div>
 
@@ -933,8 +937,15 @@ See https://github.com/sveltejs/kit/issues/981
     min-width: 0;
   }
 
+  form {
+    flex: 1;
+    display: flex;
+  }
+
   .tree-editor,
   .text-editor {
+    display: flex;
+
     // some styling to try out if it doesn't break the styling of the editor
     line-height: 72px;
     font-size: 72px;