[FIX] playground: keep ace editor alive between mounting/remounting

closes #136

extras/playground/app.js

@@ -287,10 +287,11 @@ class TabbedEditor extends owl.Component {
         this.sessions[tab].setUndoManager(new ace.UndoManager());
       }
     }
+    this.editor = null;
   }
 
   mounted() {
-    this.editor = ace.edit(this.refs.editor);
+    this.editor = this.editor || ace.edit(this.refs.editor);
 
     this.editor.setValue(this.props[this.state.currentTab], -1);
     this.editor.setFontSize("12px");
@@ -317,11 +318,6 @@ class TabbedEditor extends owl.Component {
     this.editor.resize();
   }
 
-  willUnmount() {
-    this.editor.destroy();
-    delete this.editor;
-  }
-
   setTab(tab) {
     if (this.state.currentTab !== tab) {
       this.state.currentTab = tab;

extras/playground/templates.xml

@@ -22,27 +22,22 @@
           <a class="btn flash" t-on-click="downloadCode" title="Download a Zip with this Code"><i class="fas fa-download"></i></a>
           <a class="layout-selector flash" t-on-click="toggleLayout" title="Toggle Layout"><i class="fas"  t-att-class="state.splitLayout ?  'fa-toggle-on' : 'fa-toggle-off'"></i></a>
         </div>
+        <t t-widget="TabbedEditor"
+            js="state.js"
+            css="!state.splitLayout and state.css"
+            xml="!state.splitLayout and state.js"
+            t-on-updateCode="updateCode"
+            t-att-style="topEditorStyle"/>
         <t t-if="state.splitLayout">
-          <t t-widget="TabbedEditor"
-             js="state.js"
-             css="false"
-             xml="false"
-             t-on-updateCode="updateCode"
-             t-att-style="topEditorStyle"/>
           <div class="separator horizontal"/>
           <t t-widget="TabbedEditor" t-keepalive="1"
-             js="false" css="state.css" xml="state.xml" resizeable="true"
+             js="false"
+             css="state.css"
+             xml="state.xml"
+             resizeable="true"
              t-on-updateCode="updateCode"
              t-on-updatePanelHeight="updatePanelHeight"/>
         </t>
-        <t t-else="1">
-          <t t-widget="TabbedEditor"
-          js="state.js"
-          css="state.css"
-          xml="state.xml"
-          display="'js|xml|css'"
-          t-on-updateCode="updateCode"/>
-        </t>
       </div>
       <div class="separator vertical" t-on-mousedown="onMouseDown"/>
       <div class="right-pane"  t-att-style="rightPaneStyle">