Merge pull request #51 from joaompneves/string-escaping-option

Create an option to opt-out of string escaping

Author: Kikobeats

README.md

@@ -81,6 +81,7 @@ import ReactJsonView from '@microlink/react-json-view'
 | `quotesOnKeys`               | `boolean`                                        | `true`                   | Set to `false` to remove quotes from keys (e.g., `"name":` vs. `name:`).                                                                                                                                                                                                  |
 | `validationMessage`          | `string`                                         | "Validation Error"       | Custom message for validation failures to `onEdit`, `onAdd`, or `onDelete` callbacks.                                                                                                                                                                                     |
 | `displayArrayKey`            | `boolean`                                        | `true`                   | When set to `true`, the index of the elements prefix values.                                                                                                                                                                                                              |
+| `escapeStrings`              | `boolean`                                        | `true`                   | When set to `true`, strings sequences such as \n, \t, \r, \f will be escaped.                                                                                                                                                                                                              |
 
 #### Callbacks
 

index.d.ts

@@ -159,6 +159,12 @@ export interface ReactJsonViewProps {
    * Default: (e) => e.metaKey || e.ctrlKey
    */
   keyModifier?: (event: Event, type: 'edit' | 'submit') => boolean
+  /**
+   * Set to true to escape strings sequences such as \n, \t, \r, \f
+   *
+   * Default: true
+   */
+  escapeStrings?: boolean
 }
 
 export interface OnCopyProps {

src/js/components/DataTypes/String.js

@@ -41,16 +41,18 @@ export default class extends React.PureComponent {
     const type_name = 'string'
     const { collapsed } = this.state
     const { props } = this
-    const { collapseStringsAfterLength, theme } = props
+    const { collapseStringsAfterLength, theme, escapeStrings } = props
     let { value } = props
     const collapsible = toType(collapseStringsAfterLength) === 'integer'
     const style = { style: { cursor: 'default' } }
 
-    value = escapeString(value)
-
+    if (escapeStrings) {
+      value = escapeString(value)
+    }
+    
     if (collapsible && value.length > collapseStringsAfterLength) {
       style.style.cursor = 'pointer'
-      if (this.state.collapsed) {
+      if (collapsed) {
         value = (
           <span>
             {value.substring(0, collapseStringsAfterLength)}

src/js/index.js

@@ -46,6 +46,7 @@ class ReactJsonView extends React.PureComponent {
     groupArraysAfterLength: 100,
     indentWidth: 4,
     enableClipboard: true,
+    escapeStrings: true,
     displayObjectSize: true,
     displayDataTypes: true,
     onEdit: false,

test/tests/js/components/DataTypes/String-test.js

@@ -58,11 +58,25 @@ describe('<JsonString />', function () {
     const props = {
       value: '\\\n\t\r\f\\n',
       displayDataTypes: false,
+      escapeStrings: true,
       theme: 'rjv-default'
     }
     const component = mount(<JsonString {...props} />).render()
     expect(component.find('.string-value').text()).to.equal(
       '"\\\\\\n\\t\\r\\f\\\\n"'
     )
   })
+
+  it('string with special escape sequences is not escaped', function () {
+    const props = {
+      value: '\\\n\t\r\f\\n',
+      displayDataTypes: false,
+      escapeStrings: false,
+      theme: 'rjv-default'
+    }
+    const component = mount(<JsonString {...props} />).render()
+    expect(component.find('.string-value').text()).to.equal(
+      '"\\\n\t\n\f\\n"'
+    )
+  })
 })