#50 Option to hide/show string quotes

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.                                                                                                                                                                        |

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() {
                   </Flex>
                   <Flex w="100%" justify="flex-start">
                     <Checkbox
-                      id="sortKeysCheckbox"
-                      isChecked={sortKeys}
-                      onChange={() => setSortKeys(!sortKeys)}
+                      id="showStringQuotesCheckbox"
+                      isChecked={showStringQuotes}
+                      onChange={() => setShowStringQuotes(!showStringQuotes)}
                       w="50%"
                     >
-                      Sort Object keys
+                      Show String quotes
                     </Checkbox>
                     <Checkbox
                       id="showIndicesCheckbox"
@@ -499,6 +501,16 @@ function App() {
                       Show Array indices
                     </Checkbox>
                   </Flex>
+                  <Flex w="100%" justify="flex-start">
+                    <Checkbox
+                      id="sortKeysCheckbox"
+                      isChecked={sortKeys}
+                      onChange={() => setSortKeys(!sortKeys)}
+                      w="50%"
+                    >
+                      Sort Object keys
+                    </Checkbox>
+                  </Flex>
                   <HStack className="inputRow" pt={2}>
                     <FormLabel className="labelWidth" textAlign="right">
                       Default new value

src/JsonEditor.tsx

@@ -41,6 +41,7 @@ const Editor: React.FC<JsonEditorProps> = ({
   searchDebounceTime = 350,
   keySort = false,
   showArrayIndices = true,
+  showStringQuotes = true,
   defaultValue = null,
   minWidth = 250,
   maxWidth = 'min(600px, 90vw)',
@@ -179,6 +180,7 @@ const Editor: React.FC<JsonEditorProps> = ({
     enableClipboard,
     keySort,
     showArrayIndices,
+    showStringQuotes,
     indent,
     defaultValue,
     stringTruncate,

src/ValueNodeWrapper.tsx

@@ -40,6 +40,7 @@ export const ValueNodeWrapper: React.FC<ValueNodeProps> = (props) => {
     searchText,
     showLabel,
     stringTruncate,
+    showStringQuotes,
     indent,
     translate,
     customNodeDefinitions,
@@ -192,6 +193,7 @@ export const ValueNodeWrapper: React.FC<ValueNodeProps> = (props) => {
     handleCancel,
     path,
     stringTruncate,
+    showStringQuotes,
     nodeData,
     translate,
   }

src/ValueNodes.tsx

@@ -21,6 +21,7 @@ export const StringValue: React.FC<InputProps & { value: string }> = ({
   handleEdit,
   handleCancel,
   stringTruncate,
+  showStringQuotes,
   nodeData,
 }) => {
   const { getStyles } = useTheme()
@@ -48,7 +49,9 @@ export const StringValue: React.FC<InputProps & { value: string }> = ({
       className="jer-value-string"
       style={getStyles('string', nodeData)}
     >
-      &quot;{truncate(value, stringTruncate)}&quot;
+      {showStringQuotes ? '"' : ''}
+      {truncate(value, stringTruncate)}
+      {showStringQuotes ? '"' : ''}
     </div>
   )
 }

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<T = Record<string, unknown>> extends BaseNodeProps {
@@ -188,6 +190,7 @@ export interface InputProps {
   handleCancel: () => void
   path: CollectionKey[]
   stringTruncate: number
+  showStringQuotes: boolean
   nodeData: NodeData
   translate: TranslateFunction
 }