feat: implement a method .refresh() to force rerendering of the cod…

…e editor

README.md

@@ -277,6 +277,7 @@ const editor = new JSONEditor({
 - `scrollTo(path: Path)` Scroll the editor vertically such that the specified path comes into view. The path will be expanded when needed.
 - `findElement(path: Path)` Find the DOM element of a given path. Returns `null` when not found.
 - `acceptAutoRepair(): Content` In tree mode, invalid JSON is automatically repaired when loaded. When the repair was successful, the repaired contents are rendered but not yet applied to the document itself until the user clicks "Ok" or starts editing the data. Instead of accepting the repair, the user can also click "Repair manually instead". Invoking `.acceptAutoRepair()` will programmatically accept the repair. This will trigger an update, and the method itself also returns the updated contents. In case of code mode or when the editor is not in an "accept auto repair" status, nothing will happen, and the contents will be returned as is.
+- `refresh()`. Refresh rendering of the contents, for example after changing the font size. This is only available in `code` mode.
 - `focus()`. Give the editor focus.
 - `destroy()`. Destroy the editor, remove it from the DOM.
 

src/lib/components/JSONEditor.svelte

@@ -214,6 +214,14 @@
     }
   }
 
+  export function refresh() {
+    if (refCodeMode) {
+      refCodeMode.refresh()
+    } else {
+      throw new Error(`Method refresh is not available in mode "${mode}"`)
+    }
+  }
+
   export function updateProps(props) {
     this.$set(props)
   }

src/lib/components/modes/codemode/CodeMode.svelte

@@ -564,6 +564,24 @@
     }
   }
 
+  /**
+   * Force refreshing the editor, for example after changing the font size
+   * to update the positioning of the line numbers in the gutter
+   */
+  export function refresh() {
+    debug('refresh')
+    const index = codeMirrorView.state.doc.length
+
+    // a trick to force Code Mirror to re-render the gutter values:
+    // insert a space at the end and then remove it again
+    codeMirrorView.dispatch({
+      changes: { from: index, to: index, insert: ' ' }
+    })
+    codeMirrorView.dispatch({
+      changes: { from: index, to: index + 1, insert: '' }
+    })
+  }
+
   function forceUpdateText() {
     debug('forceUpdateText', { escapeUnicodeCharacters })
 

src/routes/examples/switch_themes.svelte

@@ -29,6 +29,11 @@
     }
   }
 
+  let editorRef
+  function handleChangeFontSize() {
+    editorRef.refresh()
+  }
+
   $: console.log('contents changed:', content)
 </script>
 
@@ -50,15 +55,15 @@
   </p>
   <p>
     Font size:
-    <select bind:value={selectedFontSize}>
+    <select bind:value={selectedFontSize} on:change={handleChangeFontSize}>
       {#each fontSizes as fontSize}
         <option value={fontSize.value}>{fontSize.label}</option>
       {/each}
     </select>
   </p>
 
   <div class="editor">
-    <JSONEditor bind:content />
+    <JSONEditor bind:content bind:this={editorRef} />
   </div>
 </div>