include rulers
parent
602f47c185
commit
3ab84ad343
|
@ -113,16 +113,17 @@ class Playground extends React.Component {
|
||||||
<div className="editors">
|
<div className="editors">
|
||||||
<InputPanel
|
<InputPanel
|
||||||
mode="jsx"
|
mode="jsx"
|
||||||
|
rulerColumn={options.printWidth}
|
||||||
value={content}
|
value={content}
|
||||||
onChange={this.setContent}
|
onChange={this.setContent}
|
||||||
/>
|
/>
|
||||||
{editorState.showAst ? (
|
{editorState.showAst ? <DebugPanel value={"ast here"} /> : null}
|
||||||
<DebugPanel value={"ast here"} />
|
{editorState.showDoc ? <DebugPanel value={"doc here"} /> : null}
|
||||||
) : null}
|
<OutputPanel
|
||||||
{editorState.showDoc ? (
|
mode="jsx"
|
||||||
<DebugPanel value={"doc here"} />
|
value={formatted}
|
||||||
) : null}
|
rulerColumn={options.printWidth}
|
||||||
<OutputPanel mode="jsx" value={formatted} />
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="bottom-bar">
|
<div className="bottom-bar">
|
||||||
|
|
|
@ -10,9 +10,10 @@ class CodeMirrorPanel extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
|
const { mode, rulerColumn: column, rulerColor: color } = this.props;
|
||||||
this._codeMirror = CodeMirror.fromTextArea(
|
this._codeMirror = CodeMirror.fromTextArea(
|
||||||
this._textareaRef.current,
|
this._textareaRef.current,
|
||||||
this.props.options
|
Object.assign({ mode, rulers: [{ column, color }] }, this.props.options)
|
||||||
);
|
);
|
||||||
this._codeMirror.on("change", this.handleChange);
|
this._codeMirror.on("change", this.handleChange);
|
||||||
this._codeMirror.setValue(this.props.value || "");
|
this._codeMirror.setValue(this.props.value || "");
|
||||||
|
@ -22,10 +23,17 @@ class CodeMirrorPanel extends React.Component {
|
||||||
this._codeMirror && this._codeMirror.toTextArea();
|
this._codeMirror && this._codeMirror.toTextArea();
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidUpdate() {
|
componentDidUpdate(prevProps) {
|
||||||
if (this.props.value !== this._codeMirror.getValue()) {
|
if (this.props.value !== this._codeMirror.getValue()) {
|
||||||
this._codeMirror.setValue(this.props.value);
|
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) {
|
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 (
|
return (
|
||||||
<CodeMirrorPanel
|
<CodeMirrorPanel
|
||||||
options={{
|
options={{
|
||||||
|
@ -52,23 +60,27 @@ export function InputPanel({ mode, value, onChange }) {
|
||||||
autoCloseBrackets: true,
|
autoCloseBrackets: true,
|
||||||
matchBrackets: true,
|
matchBrackets: true,
|
||||||
showCursorWhenSelecting: true,
|
showCursorWhenSelecting: true,
|
||||||
tabWidth: 2,
|
tabWidth: 2
|
||||||
mode
|
|
||||||
}}
|
}}
|
||||||
|
mode={mode}
|
||||||
|
rulerColumn={rulerColumn}
|
||||||
|
rulerColor="#eeeeee"
|
||||||
value={value}
|
value={value}
|
||||||
onChange={onChange}
|
onChange={onChange}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function OutputPanel({ mode, value }) {
|
export function OutputPanel({ mode, rulerColumn, value }) {
|
||||||
return (
|
return (
|
||||||
<CodeMirrorPanel
|
<CodeMirrorPanel
|
||||||
options={{
|
options={{
|
||||||
readOnly: true,
|
readOnly: true,
|
||||||
lineNumbers: true,
|
lineNumbers: true
|
||||||
mode
|
|
||||||
}}
|
}}
|
||||||
|
mode={mode}
|
||||||
|
rulerColumn={rulerColumn}
|
||||||
|
rulerColor="#444444"
|
||||||
value={value}
|
value={value}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in New Issue