feat(playground): use real code sample (#4770)
* feat(playground): double click to insert example * fix: correct condition * feat: real code sample * fix: remove unnecessary updateValue * feat: auto-select on focusmaster
parent
61d5eeadd3
commit
b4a92c6ee5
|
@ -42,17 +42,17 @@ class Playground extends React.Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super();
|
super();
|
||||||
|
|
||||||
const { content, options } = urlHash.read();
|
const original = urlHash.read();
|
||||||
|
|
||||||
const defaultOptions = util.getDefaults(
|
const defaultOptions = util.getDefaults(
|
||||||
props.availableOptions,
|
props.availableOptions,
|
||||||
ENABLED_OPTIONS
|
ENABLED_OPTIONS
|
||||||
);
|
);
|
||||||
|
|
||||||
this.state = {
|
const options = Object.assign(defaultOptions, original.options);
|
||||||
content: content || "",
|
const content = original.content || getCodeSample(options.parser);
|
||||||
options: Object.assign(defaultOptions, options)
|
|
||||||
};
|
this.state = { content, options };
|
||||||
|
|
||||||
this.handleOptionValueChange = this.handleOptionValueChange.bind(this);
|
this.handleOptionValueChange = this.handleOptionValueChange.bind(this);
|
||||||
|
|
||||||
|
@ -82,12 +82,20 @@ class Playground extends React.Component {
|
||||||
handleOptionValueChange(option, value) {
|
handleOptionValueChange(option, value) {
|
||||||
this.setState(state => {
|
this.setState(state => {
|
||||||
const options = Object.assign({}, state.options);
|
const options = Object.assign({}, state.options);
|
||||||
|
|
||||||
if (option.type === "int" && isNaN(value)) {
|
if (option.type === "int" && isNaN(value)) {
|
||||||
delete options[option.name];
|
delete options[option.name];
|
||||||
} else {
|
} else {
|
||||||
options[option.name] = value;
|
options[option.name] = value;
|
||||||
}
|
}
|
||||||
return { options };
|
|
||||||
|
const content =
|
||||||
|
state.content === "" ||
|
||||||
|
state.content === getCodeSample(state.options.parser)
|
||||||
|
? getCodeSample(options.parser)
|
||||||
|
: state.content;
|
||||||
|
|
||||||
|
return { options, content };
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -96,7 +104,7 @@ class Playground extends React.Component {
|
||||||
const { availableOptions, version } = this.props;
|
const { availableOptions, version } = this.props;
|
||||||
|
|
||||||
return formatMarkdown(
|
return formatMarkdown(
|
||||||
content || getCodeSample(options.parser),
|
content,
|
||||||
formatted,
|
formatted,
|
||||||
reformatted || "",
|
reformatted || "",
|
||||||
version,
|
version,
|
||||||
|
@ -116,7 +124,7 @@ class Playground extends React.Component {
|
||||||
{editorState => (
|
{editorState => (
|
||||||
<PrettierFormat
|
<PrettierFormat
|
||||||
worker={worker}
|
worker={worker}
|
||||||
code={content || getCodeSample(options.parser)}
|
code={content}
|
||||||
options={options}
|
options={options}
|
||||||
debugAst={editorState.showAst}
|
debugAst={editorState.showAst}
|
||||||
debugDoc={editorState.showDoc}
|
debugDoc={editorState.showDoc}
|
||||||
|
@ -177,7 +185,7 @@ class Playground extends React.Component {
|
||||||
mode={util.getCodemirrorMode(options.parser)}
|
mode={util.getCodemirrorMode(options.parser)}
|
||||||
ruler={options.printWidth}
|
ruler={options.printWidth}
|
||||||
value={content}
|
value={content}
|
||||||
placeholder={getCodeSample(options.parser)}
|
codeSample={getCodeSample(options.parser)}
|
||||||
overlayStart={options.rangeStart}
|
overlayStart={options.rangeStart}
|
||||||
overlayEnd={options.rangeEnd}
|
overlayEnd={options.rangeEnd}
|
||||||
onChange={this.setContent}
|
onChange={this.setContent}
|
||||||
|
|
|
@ -9,6 +9,7 @@ class CodeMirrorPanel extends React.Component {
|
||||||
this._cached = "";
|
this._cached = "";
|
||||||
this._overlay = null;
|
this._overlay = null;
|
||||||
this.handleChange = this.handleChange.bind(this);
|
this.handleChange = this.handleChange.bind(this);
|
||||||
|
this.handleFocus = this.handleFocus.bind(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
|
@ -25,6 +26,7 @@ class CodeMirrorPanel extends React.Component {
|
||||||
options
|
options
|
||||||
);
|
);
|
||||||
this._codeMirror.on("change", this.handleChange);
|
this._codeMirror.on("change", this.handleChange);
|
||||||
|
this._codeMirror.on("focus", this.handleFocus);
|
||||||
|
|
||||||
this.updateValue(this.props.value || "");
|
this.updateValue(this.props.value || "");
|
||||||
this.updateOverlay();
|
this.updateOverlay();
|
||||||
|
@ -35,7 +37,7 @@ class CodeMirrorPanel extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidUpdate(prevProps) {
|
componentDidUpdate(prevProps) {
|
||||||
if (this.props.readOnly && this.props.value !== this._cached) {
|
if (this.props.value !== this._cached) {
|
||||||
this.updateValue(this.props.value);
|
this.updateValue(this.props.value);
|
||||||
}
|
}
|
||||||
if (
|
if (
|
||||||
|
@ -47,9 +49,6 @@ class CodeMirrorPanel extends React.Component {
|
||||||
if (this.props.mode !== prevProps.mode) {
|
if (this.props.mode !== prevProps.mode) {
|
||||||
this._codeMirror.setOption("mode", this.props.mode);
|
this._codeMirror.setOption("mode", this.props.mode);
|
||||||
}
|
}
|
||||||
if (this.props.placeholder !== prevProps.placeholder) {
|
|
||||||
this._codeMirror.setOption("placeholder", this.props.placeholder);
|
|
||||||
}
|
|
||||||
if (this.props.ruler !== prevProps.ruler) {
|
if (this.props.ruler !== prevProps.ruler) {
|
||||||
this._codeMirror.setOption("rulers", [makeRuler(this.props)]);
|
this._codeMirror.setOption("rulers", [makeRuler(this.props)]);
|
||||||
}
|
}
|
||||||
|
@ -74,6 +73,12 @@ class CodeMirrorPanel extends React.Component {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
handleFocus(/* codeMirror, event */) {
|
||||||
|
if (this._codeMirror.getValue() === this.props.codeSample) {
|
||||||
|
this._codeMirror.execCommand("selectAll");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
handleChange(doc, change) {
|
handleChange(doc, change) {
|
||||||
if (change.origin !== "setValue") {
|
if (change.origin !== "setValue") {
|
||||||
this._cached = doc.getValue();
|
this._cached = doc.getValue();
|
||||||
|
@ -150,7 +155,7 @@ export function InputPanel(props) {
|
||||||
autoCloseBrackets={true}
|
autoCloseBrackets={true}
|
||||||
matchBrackets={true}
|
matchBrackets={true}
|
||||||
showCursorWhenSelecting={true}
|
showCursorWhenSelecting={true}
|
||||||
tabWidth={2}
|
tabSize={4}
|
||||||
rulerColor="#eeeeee"
|
rulerColor="#eeeeee"
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -141,10 +141,6 @@ header h1 {
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
pre.CodeMirror-placeholder {
|
|
||||||
color: #888888;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bottom-bar {
|
.bottom-bar {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
|
@ -28,7 +28,6 @@ toolbox.precache([
|
||||||
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/mode/jsx/jsx.js",
|
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/mode/jsx/jsx.js",
|
||||||
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/mode/css/css.js",
|
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/mode/css/css.js",
|
||||||
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/mode/markdown/markdown.js",
|
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/mode/markdown/markdown.js",
|
||||||
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/addon/display/placeholder.js",
|
|
||||||
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/addon/display/rulers.js",
|
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/addon/display/rulers.js",
|
||||||
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/addon/search/searchcursor.js",
|
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/addon/search/searchcursor.js",
|
||||||
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/addon/edit/matchbrackets.js",
|
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/addon/edit/matchbrackets.js",
|
||||||
|
|
Loading…
Reference in New Issue