Ace editor set value or insert like structure of dom

i cant set value or insert to ACE editor like the structure of dom

my code like this

html

<div contenteditable="true" id="proseMirror">
    <p>insert any text1</p>
    <div>
         <p>insert any text2</p>
    </div>
</div>
<div id="editor"></div>

javascript

【build ace editor】
ace.require('ace/ext/language_tools');
const editor = ace.edit('proseMirror');
editor.$blockScrolling = Infinity;
editor.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true
});
editor.setTheme('ace/theme/vibrant_ink');
editor.getSession().setMode('ace/mode/html');
editor.setHighlightActiveLine(true);

【insert to ace editor】
const inputElement = $(this).parents('.textEditable').find('.proseMirror')[0];
editor.setValue(inputElement.innerHTML);

i want make it like this

```
<p>insert any text1</p>
```
```
<div>
```
```
    <p>insert any text2</p>
```
```
</div>
```

but will be this

<p>insert any text1</p><div><p>insert any text2</p></div>

Solution

You can use beautify extension

var beautify = ace.require("ace/ext/beautify");
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/javascript");
beautify.beautify(editor.session);

#editor { 
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

<!DOCTYPE html>
<html lang="en">
<head>
<style>
</style>
</head>
<body>
<div id="editor">function foo(items) { var x = "All this is syntax highlighted"; return x; }</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/mode-javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/theme-monokai.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ext-beautify.min.js"></script>
</body>
</html>