diff --git a/README.md b/README.md index be7514d..3395da4 100644 --- a/README.md +++ b/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 diff --git a/index.d.ts b/index.d.ts index d08ea65..3d49b19 100644 --- a/index.d.ts +++ b/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 { diff --git a/src/js/components/DataTypes/String.js b/src/js/components/DataTypes/String.js index 4faa1d8..20c692c 100644 --- a/src/js/components/DataTypes/String.js +++ b/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 = ( {value.substring(0, collapseStringsAfterLength)} diff --git a/src/js/index.js b/src/js/index.js index 1a9733b..0819e00 100644 --- a/src/js/index.js +++ b/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, diff --git a/test/tests/js/components/DataTypes/String-test.js b/test/tests/js/components/DataTypes/String-test.js index 26e851d..2004c0a 100644 --- a/test/tests/js/components/DataTypes/String-test.js +++ b/test/tests/js/components/DataTypes/String-test.js @@ -58,6 +58,7 @@ describe('', function () { const props = { value: '\\\n\t\r\f\\n', displayDataTypes: false, + escapeStrings: true, theme: 'rjv-default' } const component = mount().render() @@ -65,4 +66,17 @@ describe('', function () { '"\\\\\\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().render() + expect(component.find('.string-value').text()).to.equal( + '"\\\n\t\n\f\\n"' + ) + }) })