diff --git a/tools/playground/app.js b/tools/playground/app.js
index 49a5e87d..e721452e 100644
--- a/tools/playground/app.js
+++ b/tools/playground/app.js
@@ -284,15 +284,7 @@ class TabbedEditor extends owl.Component {
this.setTab = owl.utils.debounce(this.setTab, 250, true);
this.sessions = {};
- for (let tab of ["js", "xml", "css"]) {
- if (props[tab]) {
- this.sessions[tab] = new ace.EditSession(props[tab], MODES[tab]);
- this.sessions[tab].setOption("useWorker", false);
- const tabSize = tab === "xml" ? 2 : 4;
- this.sessions[tab].setOption("tabSize", tabSize);
- this.sessions[tab].setUndoManager(new ace.UndoManager());
- }
- }
+ this._setupSessions(props);
this.editor = null;
}
@@ -317,9 +309,19 @@ class TabbedEditor extends owl.Component {
});
}
+ willUpdateProps(nextProps) {
+ this._setupSessions(nextProps);
+ }
+
patched() {
const session = this.sessions[this.state.currentTab];
- session.setValue(this.props[this.state.currentTab], -1);
+ let content = this.props[this.state.currentTab];
+ if (content === false) {
+ const tab = this.props.js ? "js" : this.props.xml ? "xml" : "css";
+ content = this.props[tab];
+ this.state.currentTab = tab;
+ }
+ session.setValue(content, -1);
this.editor.setSession(session);
this.editor.resize();
}
@@ -347,6 +349,18 @@ class TabbedEditor extends owl.Component {
});
}
}
+
+ _setupSessions(props) {
+ for (let tab of ["js", "xml", "css"]) {
+ if (props[tab] && !this.sessions[tab]) {
+ this.sessions[tab] = new ace.EditSession(props[tab], MODES[tab]);
+ this.sessions[tab].setOption("useWorker", false);
+ const tabSize = tab === "xml" ? 2 : 4;
+ this.sessions[tab].setOption("tabSize", tabSize);
+ this.sessions[tab].setUndoManager(new ace.UndoManager());
+ }
+ }
+ }
}
//------------------------------------------------------------------------------
diff --git a/tools/playground/templates.xml b/tools/playground/templates.xml
index 1c67cc6d..ffeb442d 100644
--- a/tools/playground/templates.xml
+++ b/tools/playground/templates.xml
@@ -27,7 +27,7 @@