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 @@