React-ace: ACE set the initial value, there is no wrap effect, can not format

Created on 25 Dec 2017 · 5Comments · Source: securingsincity/react-ace

Problem

ACE set the initial value, there is no wrap effect, can not format
Version: "react-ace": "^5.8.0"

Sample code to reproduce your issue

this.state.SimBody = {"id":123456,"name":"ACE","age":111};
<AceEditor
                    readOnly={fale}
                    onChange={this.handleGetBody}
                    width="100%"
                    height="500px"
                    mode="json"
                    theme="github"
                    name="aceCodeEditor"
                    onLoad={this.onLoad}
                    fontSize={14}
                    showPrintMargin={true}
                    showGutter={true}
                    highlightActiveLine={true}
                    value={this.state.modelBody}
                    editorProps={{
                      $blockScrolling: true,
                      enableBasicAutocompletion: true,
                      enableLiveAutocompletion: true,
                      enableSnippets: true
                    }}
                    setOptions={{
                      showLineNumbers: true,
                      tabSize: 2
                    }}/>

References

React-ace
Progress on: #
It will show like this

I expect like this

Source

Bobcui001

Most helpful comment

@Bobcui001 the editor doesn't auto format json as you describe. However to get it into that format JSON.stringify(this.state.modelBody, null, '\t'); This should pretty print the json as you describe.

securingsincity on 28 Dec 2017

👍6

All 5 comments

securingsincity on 28 Dec 2017

👍6

hi, JSON.stringify(this.state.modelBody, null, '\t') did not work,
when I input

and setValue( JSON.stringify(this.state.modelBody, null, '\t')), it returned:

@securingsincity

Aaron-Lei on 21 Mar 2019

@Aaron-Lei try
JSON.stringify(JSON.parse(this.state.modelBody), null, 2);

where the third param is the number of spaces you want.

jorgepvenegas on 28 May 2019

Same issue of @Aaron-Lei

BrunoQuaresma on 2 Jul 2019

I'm running into this issue as well. I'll see if I can look into it when I have some extra time.

EDIT
So this will happen if you're running JSON.stringify twice on the same string. You need to run JSON.parse for each JSON.stringify, otherwise you risk adding additional slashes.

In my case, I was stringifying in both useEffect and in state management.