Skip to content

Commit 91d4689

Browse files
authored
Option to hide/show string quotes (#54)
1 parent 613342b commit 91d4689

File tree

6 files changed

+28
-5
lines changed

6 files changed

+28
-5
lines changed

README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,7 @@ The only *required* value is `data`.
106106
| `searchDebounceTime` | `number` | `350` | Debounce time when `searchText` changes |
107107
| `keySort` | `boolean\|CompareFunction` | `false` | If `true`, object keys will be ordered (using default JS `.sort()`). A [compare function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) can also be provided to define sorting behaviour. |
108108
| `showArrayIndices` | `boolean` | `true` | Whether or not to display the index (as a property key) for array elements. |
109+
| `showStringQuotes` | `boolean` | `true` | Whether or not to display string values in "quotes". |
109110
| `showCollectionCount` | `boolean\|"when-closed"` | `true` | Whether or not to display the number of items in each collection (object or array). |
110111
| `defaultValue` | `any\|DefaultValueFilterFunction` | `null` | When a new property is added, it is initialised with this value. A function can be provided with the same input as the `FilterFunction`s, but should output a value. This allows a different default value to be used depending on the data state (e.g. default for top level is an object, but a string elsewhere.) |
111112
| `stringTruncate` | `number` | `250` | String values longer than this many characters will be displayed truncated (with `...`). The full string will always be visible when editing. |

demo/src/App.tsx

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ function App() {
5151
const [allowCopy, setAllowCopy] = useState(true)
5252
const [sortKeys, setSortKeys] = useState(false)
5353
const [showIndices, setShowIndices] = useState(true)
54+
const [showStringQuotes, setShowStringQuotes] = useState(true)
5455
const [defaultNewValue, setDefaultNewValue] = useState('New data!')
5556
const [isSaving, setIsSaving] = useState(false)
5657
const [searchText, setSearchText] = useState('')
@@ -284,6 +285,7 @@ function App() {
284285
keySort={sortKeys}
285286
defaultValue={demoData[selectedData]?.defaultValue ?? defaultNewValue}
286287
showArrayIndices={showIndices}
288+
showStringQuotes={showStringQuotes}
287289
minWidth={'min(500px, 95vw)'}
288290
maxWidth="min(650px, 90vw)"
289291
className="block-shadow"
@@ -483,12 +485,12 @@ function App() {
483485
</Flex>
484486
<Flex w="100%" justify="flex-start">
485487
<Checkbox
486-
id="sortKeysCheckbox"
487-
isChecked={sortKeys}
488-
onChange={() => setSortKeys(!sortKeys)}
488+
id="showStringQuotesCheckbox"
489+
isChecked={showStringQuotes}
490+
onChange={() => setShowStringQuotes(!showStringQuotes)}
489491
w="50%"
490492
>
491-
Sort Object keys
493+
Show String quotes
492494
</Checkbox>
493495
<Checkbox
494496
id="showIndicesCheckbox"
@@ -499,6 +501,16 @@ function App() {
499501
Show Array indices
500502
</Checkbox>
501503
</Flex>
504+
<Flex w="100%" justify="flex-start">
505+
<Checkbox
506+
id="sortKeysCheckbox"
507+
isChecked={sortKeys}
508+
onChange={() => setSortKeys(!sortKeys)}
509+
w="50%"
510+
>
511+
Sort Object keys
512+
</Checkbox>
513+
</Flex>
502514
<HStack className="inputRow" pt={2}>
503515
<FormLabel className="labelWidth" textAlign="right">
504516
Default new value

src/JsonEditor.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ const Editor: React.FC<JsonEditorProps> = ({
4141
searchDebounceTime = 350,
4242
keySort = false,
4343
showArrayIndices = true,
44+
showStringQuotes = true,
4445
defaultValue = null,
4546
minWidth = 250,
4647
maxWidth = 'min(600px, 90vw)',
@@ -179,6 +180,7 @@ const Editor: React.FC<JsonEditorProps> = ({
179180
enableClipboard,
180181
keySort,
181182
showArrayIndices,
183+
showStringQuotes,
182184
indent,
183185
defaultValue,
184186
stringTruncate,

src/ValueNodeWrapper.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ export const ValueNodeWrapper: React.FC<ValueNodeProps> = (props) => {
4040
searchText,
4141
showLabel,
4242
stringTruncate,
43+
showStringQuotes,
4344
indent,
4445
translate,
4546
customNodeDefinitions,
@@ -192,6 +193,7 @@ export const ValueNodeWrapper: React.FC<ValueNodeProps> = (props) => {
192193
handleCancel,
193194
path,
194195
stringTruncate,
196+
showStringQuotes,
195197
nodeData,
196198
translate,
197199
}

src/ValueNodes.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export const StringValue: React.FC<InputProps & { value: string }> = ({
2121
handleEdit,
2222
handleCancel,
2323
stringTruncate,
24+
showStringQuotes,
2425
nodeData,
2526
}) => {
2627
const { getStyles } = useTheme()
@@ -48,7 +49,9 @@ export const StringValue: React.FC<InputProps & { value: string }> = ({
4849
className="jer-value-string"
4950
style={getStyles('string', nodeData)}
5051
>
51-
&quot;{truncate(value, stringTruncate)}&quot;
52+
{showStringQuotes ? '"' : ''}
53+
{truncate(value, stringTruncate)}
54+
{showStringQuotes ? '"' : ''}
5255
</div>
5356
)
5457
}

src/types.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ export interface JsonEditorProps {
2828
searchDebounceTime?: number
2929
keySort?: boolean | CompareFunction
3030
showArrayIndices?: boolean
31+
showStringQuotes?: boolean
3132
defaultValue?: unknown
3233
minWidth?: string | number
3334
maxWidth?: string | number
@@ -144,6 +145,7 @@ export type ValueData = string | number | boolean
144145
export interface ValueNodeProps extends BaseNodeProps {
145146
data: ValueData
146147
showLabel: boolean
148+
showStringQuotes: boolean
147149
}
148150

149151
export interface CustomNodeProps<T = Record<string, unknown>> extends BaseNodeProps {
@@ -188,6 +190,7 @@ export interface InputProps {
188190
handleCancel: () => void
189191
path: CollectionKey[]
190192
stringTruncate: number
193+
showStringQuotes: boolean
191194
nodeData: NodeData
192195
translate: TranslateFunction
193196
}

0 commit comments

Comments
 (0)