feat: make the option askToFormat configurable (fix #252)

josdejong · Apr 17, 2023 · 5e5494f · 5e5494f
1 parent 961628d
commit 5e5494f
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -193,6 +193,7 @@ const editor = new JSONEditor({
 - `mainMenuBar: boolean` Show the main menu bar. Default value is `true`.
 - `navigationBar: boolean` Show the navigation bar with, where you can see the selected path and navigate through your document from there. Default value is `true`.
 - `statusBar: boolean` Show a status bar at the bottom of the `'text'` editor, showing information about the cursor location and selected contents. Default value is `true`.
+- `askToFormat: boolean` When `true` (default), the user will be asked whether he/she wants to format the JSON document when a compact document is loaded or pasted in `'text'` mode. Only applicable to `'text'` mode.
 - `readOnly: boolean` Open the editor in read-only mode: no changes can be made, non-relevant buttons are hidden from the menu, and the context menu is not enabled. Default value is `false`.
 - `indentation: number | string` Number of spaces use for indentation when stringifying JSON, or a string to be used as indentation like `'\t'` to use a tab as indentation, or `' '` to use 4 spaces (which is equivalent to configuring `indentation: 4`). See also property `tabSize`.
 - `tabSize: number` When indentation is configured as a tab character (`indentation: '\t'`), `tabSize` configures how large a tab character is rendered. Default value is `4`. Only applicable to `text` mode.

diff --git a/src/lib/components/JSONEditor.svelte b/src/lib/components/JSONEditor.svelte
@@ -68,6 +68,7 @@
   export let mainMenuBar = true
   export let navigationBar = true
   export let statusBar = true
+  export let askToFormat = true
   export let escapeControlCharacters = false
   export let escapeUnicodeCharacters = false
   export let flattenColumns = true
@@ -373,6 +374,7 @@
         mainMenuBar,
         navigationBar,
         statusBar,
+        askToFormat,
         escapeControlCharacters,
         escapeUnicodeCharacters,
         flattenColumns,
@@ -433,6 +435,7 @@
             {indentation}
             {tabSize}
             {statusBar}
+            {askToFormat}
             {mainMenuBar}
             {navigationBar}
             {escapeControlCharacters}

diff --git a/src/lib/components/modals/JSONEditorModal.svelte b/src/lib/components/modals/JSONEditorModal.svelte
@@ -42,6 +42,7 @@
   export let mainMenuBar: boolean
   export let navigationBar: boolean
   export let statusBar: boolean
+  export let askToFormat: boolean
   export let escapeControlCharacters: boolean
   export let escapeUnicodeCharacters: boolean
   export let flattenColumns: boolean
@@ -204,6 +205,7 @@
         {indentation}
         {tabSize}
         {statusBar}
+        {askToFormat}
         {mainMenuBar}
         {navigationBar}
         {escapeControlCharacters}

diff --git a/src/lib/components/modes/JSONEditorRoot.svelte b/src/lib/components/modes/JSONEditorRoot.svelte
@@ -39,6 +39,7 @@
   export let mainMenuBar: boolean
   export let navigationBar: boolean
   export let statusBar: boolean
+  export let askToFormat: boolean
   export let escapeControlCharacters: boolean
   export let escapeUnicodeCharacters: boolean
   export let flattenColumns: boolean
@@ -232,6 +233,7 @@
     {tabSize}
     {mainMenuBar}
     {statusBar}
+    {askToFormat}
     {escapeUnicodeCharacters}
     {parser}
     {validator}

diff --git a/src/lib/components/modes/textmode/TextMode.svelte b/src/lib/components/modes/textmode/TextMode.svelte
@@ -77,6 +77,7 @@
   export let readOnly: boolean
   export let mainMenuBar: boolean
   export let statusBar: boolean
+  export let askToFormat: boolean
   export let externalContent: Content
   export let indentation: number | string
   export let tabSize: number
@@ -112,7 +113,6 @@
 
   let onChangeDisabled = false
   let acceptTooLarge = false
-  let askToFormat = true
 
   let validationErrors: ValidationError[] = []
   const linterCompartment = new Compartment()

diff --git a/src/lib/types.ts b/src/lib/types.ts
@@ -422,6 +422,7 @@ export interface JSONEditorPropsOptional {
   mainMenuBar?: boolean
   navigationBar?: boolean
   statusBar?: boolean
+  askToFormat?: boolean
   escapeControlCharacters?: boolean
   escapeUnicodeCharacters?: boolean
   flattenColumns?: true

diff --git a/src/routes/development/+page.svelte b/src/routes/development/+page.svelte
@@ -211,6 +211,7 @@
   const mainMenuBar = useLocalStorage('svelte-jsoneditor-demo-mainMenuBar', true)
   const navigationBar = useLocalStorage('svelte-jsoneditor-demo-navigationBar', true)
   const statusBar = useLocalStorage('svelte-jsoneditor-demo-statusBar', true)
+  const askToFormat = useLocalStorage('svelte-jsoneditor-demo-askToFormat', true)
   const escapeControlCharacters = useLocalStorage(
     'svelte-jsoneditor-demo-escapeControlCharacters',
     false
@@ -396,6 +397,9 @@
     <label>
       <input type="checkbox" bind:checked={$statusBar} /> statusBar
     </label>
+    <label>
+      <input type="checkbox" bind:checked={$askToFormat} /> askToFormat
+    </label>
     <label>
       <input type="checkbox" bind:checked={$escapeControlCharacters} /> escapeControlCharacters
     </label>
@@ -630,6 +634,7 @@
             mainMenuBar={$mainMenuBar}
             navigationBar={$navigationBar}
             statusBar={$statusBar}
+            askToFormat={$askToFormat}
             escapeControlCharacters={$escapeControlCharacters}
             escapeUnicodeCharacters={$escapeUnicodeCharacters}
             flattenColumns={$flattenColumns}
@@ -678,6 +683,7 @@
             mainMenuBar={$mainMenuBar}
             navigationBar={$navigationBar}
             statusBar={$statusBar}
+            askToFormat={$askToFormat}
             escapeControlCharacters={$escapeControlCharacters}
             escapeUnicodeCharacters={$escapeUnicodeCharacters}
             flattenColumns={$flattenColumns}