diff --git a/website/playground/Playground.js b/website/playground/Playground.js
index cd6ad94f..488af05c 100644
--- a/website/playground/Playground.js
+++ b/website/playground/Playground.js
@@ -113,16 +113,17 @@ class Playground extends React.Component {
- {editorState.showAst ? (
-
- ) : null}
- {editorState.showDoc ? (
-
- ) : null}
-
+ {editorState.showAst ? : null}
+ {editorState.showDoc ? : null}
+
diff --git a/website/playground/panels.js b/website/playground/panels.js
index bc058860..f7a95155 100644
--- a/website/playground/panels.js
+++ b/website/playground/panels.js
@@ -10,9 +10,10 @@ class CodeMirrorPanel extends React.Component {
}
componentDidMount() {
+ const { mode, rulerColumn: column, rulerColor: color } = this.props;
this._codeMirror = CodeMirror.fromTextArea(
this._textareaRef.current,
- this.props.options
+ Object.assign({ mode, rulers: [{ column, color }] }, this.props.options)
);
this._codeMirror.on("change", this.handleChange);
this._codeMirror.setValue(this.props.value || "");
@@ -22,10 +23,17 @@ class CodeMirrorPanel extends React.Component {
this._codeMirror && this._codeMirror.toTextArea();
}
- componentDidUpdate() {
+ componentDidUpdate(prevProps) {
if (this.props.value !== this._codeMirror.getValue()) {
this._codeMirror.setValue(this.props.value);
}
+ if (this.props.mode !== prevProps.mode) {
+ this._codeMirror.setOption("mode", this.props.mode);
+ }
+ if (this.props.rulerColumn !== prevProps.rulerColumn) {
+ const { rulerColumn: column, rulerColor: color } = this.props;
+ this._codeMirror.setOption("rulers", [{ column, color }]);
+ }
}
handleChange(doc, change) {
@@ -43,7 +51,7 @@ class CodeMirrorPanel extends React.Component {
}
}
-export function InputPanel({ mode, value, onChange }) {
+export function InputPanel({ mode, rulerColumn, value, onChange }) {
return (
);
}
-export function OutputPanel({ mode, value }) {
+export function OutputPanel({ mode, rulerColumn, value }) {
return (
);