From dc431d55edde849794c7ab071c8b49cc437acede Mon Sep 17 00:00:00 2001 From: Carl Smith <5456533+CarlosNZ@users.noreply.github.com> Date: Wed, 1 May 2024 15:37:23 +1200 Subject: [PATCH] Option to hide/show string quotes --- README.md | 1 + demo/src/App.tsx | 20 ++++++++++++++++---- src/JsonEditor.tsx | 2 ++ src/ValueNodeWrapper.tsx | 2 ++ src/ValueNodes.tsx | 5 ++++- src/types.ts | 3 +++ 6 files changed, 28 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 376be1d8..a566d150 100644 --- a/README.md +++ b/README.md @@ -106,6 +106,7 @@ The only *required* value is `data`. | `searchDebounceTime` | `number` | `350` | Debounce time when `searchText` changes | | `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. | | `showArrayIndices` | `boolean` | `true` | Whether or not to display the index (as a property key) for array elements. | +| `showStringQuotes` | `boolean` | `true` | Whether or not to display string values in "quotes". | | `showCollectionCount` | `boolean\|"when-closed"` | `true` | Whether or not to display the number of items in each collection (object or array). | | `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.) | | `stringTruncate` | `number` | `250` | String values longer than this many characters will be displayed truncated (with `...`). The full string will always be visible when editing. | diff --git a/demo/src/App.tsx b/demo/src/App.tsx index bcb20939..b4024354 100644 --- a/demo/src/App.tsx +++ b/demo/src/App.tsx @@ -51,6 +51,7 @@ function App() { const [allowCopy, setAllowCopy] = useState(true) const [sortKeys, setSortKeys] = useState(false) const [showIndices, setShowIndices] = useState(true) + const [showStringQuotes, setShowStringQuotes] = useState(true) const [defaultNewValue, setDefaultNewValue] = useState('New data!') const [isSaving, setIsSaving] = useState(false) const [searchText, setSearchText] = useState('') @@ -284,6 +285,7 @@ function App() { keySort={sortKeys} defaultValue={demoData[selectedData]?.defaultValue ?? defaultNewValue} showArrayIndices={showIndices} + showStringQuotes={showStringQuotes} minWidth={'min(500px, 95vw)'} maxWidth="min(650px, 90vw)" className="block-shadow" @@ -483,12 +485,12 @@ function App() { setSortKeys(!sortKeys)} + id="showStringQuotesCheckbox" + isChecked={showStringQuotes} + onChange={() => setShowStringQuotes(!showStringQuotes)} w="50%" > - Sort Object keys + Show String quotes + + setSortKeys(!sortKeys)} + w="50%" + > + Sort Object keys + + Default new value diff --git a/src/JsonEditor.tsx b/src/JsonEditor.tsx index 2bc70b71..a67918c1 100644 --- a/src/JsonEditor.tsx +++ b/src/JsonEditor.tsx @@ -41,6 +41,7 @@ const Editor: React.FC = ({ searchDebounceTime = 350, keySort = false, showArrayIndices = true, + showStringQuotes = true, defaultValue = null, minWidth = 250, maxWidth = 'min(600px, 90vw)', @@ -179,6 +180,7 @@ const Editor: React.FC = ({ enableClipboard, keySort, showArrayIndices, + showStringQuotes, indent, defaultValue, stringTruncate, diff --git a/src/ValueNodeWrapper.tsx b/src/ValueNodeWrapper.tsx index 74406ca1..331a79b1 100644 --- a/src/ValueNodeWrapper.tsx +++ b/src/ValueNodeWrapper.tsx @@ -40,6 +40,7 @@ export const ValueNodeWrapper: React.FC = (props) => { searchText, showLabel, stringTruncate, + showStringQuotes, indent, translate, customNodeDefinitions, @@ -192,6 +193,7 @@ export const ValueNodeWrapper: React.FC = (props) => { handleCancel, path, stringTruncate, + showStringQuotes, nodeData, translate, } diff --git a/src/ValueNodes.tsx b/src/ValueNodes.tsx index d0476ac4..ed1830c8 100644 --- a/src/ValueNodes.tsx +++ b/src/ValueNodes.tsx @@ -21,6 +21,7 @@ export const StringValue: React.FC = ({ handleEdit, handleCancel, stringTruncate, + showStringQuotes, nodeData, }) => { const { getStyles } = useTheme() @@ -48,7 +49,9 @@ export const StringValue: React.FC = ({ className="jer-value-string" style={getStyles('string', nodeData)} > - "{truncate(value, stringTruncate)}" + {showStringQuotes ? '"' : ''} + {truncate(value, stringTruncate)} + {showStringQuotes ? '"' : ''} ) } diff --git a/src/types.ts b/src/types.ts index 8eedcbc1..8fa38db3 100644 --- a/src/types.ts +++ b/src/types.ts @@ -28,6 +28,7 @@ export interface JsonEditorProps { searchDebounceTime?: number keySort?: boolean | CompareFunction showArrayIndices?: boolean + showStringQuotes?: boolean defaultValue?: unknown minWidth?: string | number maxWidth?: string | number @@ -144,6 +145,7 @@ export type ValueData = string | number | boolean export interface ValueNodeProps extends BaseNodeProps { data: ValueData showLabel: boolean + showStringQuotes: boolean } export interface CustomNodeProps> extends BaseNodeProps { @@ -188,6 +190,7 @@ export interface InputProps { handleCancel: () => void path: CollectionKey[] stringTruncate: number + showStringQuotes: boolean nodeData: NodeData translate: TranslateFunction }