2.2.0

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "juicy-ace-editor",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Custom Element with Ace(http://ace.c9.io/) code editor",
   "license": "MIT",
   "main": "juicy-ace-editor.html",

juicy-ace-editor.html

@@ -1,13 +1,15 @@
 <!--
     Custom Element with Ace code editor
     http://juicy.github.io/juicy-ace-editor/
-    version: 2.1.0
+    version: 2.2.0
     @demo index.html
     @license MIT
     @author
 -->
 <script src="../ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
 <script src="../ace-builds/src-noconflict/ext-searchbox.js" type="text/javascript" charset="utf-8"></script>
+<script src="../ace-builds/src-noconflict/ext-beautify.js" type="text/javascript" charset="utf-8"></script>
+
 
 <template id="juicy-ace-editor">
     <style>
@@ -74,6 +76,7 @@
             // getElementById may not be polyfilled yet
             self.container = clone.querySelector('#juicy-ace-editor-container');
             shadowRoot.appendChild(clone);
+
             return self;
         }
         connectedCallback() {
@@ -104,6 +107,8 @@
                 editor.getSession().on('change', function(event){
                     element.dispatchEvent(new CustomEvent("change", {bubbles: true, composed: true, detail: event}));
                 });
+
+                this._beautify =  ace.require("ace/ext/beautify");
             }
 
             // handle theme changes
@@ -136,6 +141,9 @@
             // container.appendChild(text);
             this._attached = true;
         }
+        beautify() {
+            this._beautify.beautify(this.editor.session);
+        }
         disconnectedCallback() {
             this._attached = false;
         }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "juicy-ace-editor",
   "description": "Custom Element wrapper for Ace code editor",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "author": "Juicy",
   "license": "MIT",
   "bugs": {