diff --git a/website/playground/EditorState.js b/website/playground/EditorState.js index 9dde7abed..aa508c0f1 100644 --- a/website/playground/EditorState.js +++ b/website/playground/EditorState.js @@ -11,9 +11,12 @@ export default class extends React.Component { showSidebar: false, showAst: false, showDoc: false, + showSecondFormat: false, toggleSidebar: () => this.setState(stateToggler("showSidebar")), toggleAst: () => this.setState(stateToggler("showAst")), - toggleDoc: () => this.setState(stateToggler("showDoc")) + toggleDoc: () => this.setState(stateToggler("showDoc")), + toggleSecondFormat: () => + this.setState(stateToggler("showSecondFormat")) }, storage.get("editor_state") ); diff --git a/website/playground/Playground.js b/website/playground/Playground.js index 5c8be7dcd..7cd848a99 100644 --- a/website/playground/Playground.js +++ b/website/playground/Playground.js @@ -54,6 +54,7 @@ class Playground extends React.Component { this.setState(state => ({ options: getDefaultOptions(state.availableOptions) })); + this.getCurrentUrl = () => window.location.href; } componentDidMount() { @@ -88,6 +89,20 @@ class Playground extends React.Component { })); } + getMarkdown(formatted, reformatted, full) { + const { availableOptions, content, options, version } = this.state; + return formatMarkdown( + content, + formatted, + reformatted || "", + version, + window.location.href, + options, + getCliOptions(availableOptions, options), + full + ); + } + render() { const { availableOptions, content, loaded, options } = this.state; @@ -104,8 +119,9 @@ class Playground extends React.Component { options={options} debugAst={editorState.showAst} debugDoc={editorState.showDoc} + secondFormat={editorState.showSecondFormat} > - {({ formatted, debugAst, debugDoc }) => ( + {({ formatted, debugAst, debugDoc, reformatted }) => (
@@ -126,6 +142,11 @@ class Playground extends React.Component { checked={editorState.showDoc} onChange={editorState.toggleDoc} /> +
@@ -161,11 +189,17 @@ class Playground extends React.Component {
- + Copy link - - + this.getMarkdown(formatted, reformatted)}> + Copy markdown + + Report issue
@@ -180,6 +214,37 @@ class Playground extends React.Component { } } +function getReportLink(reportBody) { + return `https://github.com/prettier/prettier/issues/new?body=${encodeURIComponent( + reportBody + )}`; +} + +function getCliOptions(availableOptions, options) { + const cliOptions = []; + for (let i = 0; i < availableOptions.length; i++) { + const option = availableOptions[i]; + let value = options[option.name]; + + if (option.type === "boolean") { + if ((value && !option.inverted) || (!value && option.inverted)) { + cliOptions.push([option.cliName, true]); + } + } else if (value !== option.default) { + cliOptions.push([option.cliName, value]); + } + } + return cliOptions; +} + +function getSecondFormat(formatted, reformatted) { + return formatted === "" + ? "" + : formatted === reformatted + ? "✓ Second format is unchanged." + : reformatted; +} + function getDefaultOptions(availableOptions) { return availableOptions.reduce((acc, option) => { acc[option.name] = option.default; diff --git a/website/playground/PrettierFormat.js b/website/playground/PrettierFormat.js index 1bc21c698..bd4cee25d 100644 --- a/website/playground/PrettierFormat.js +++ b/website/playground/PrettierFormat.js @@ -11,21 +11,36 @@ export default class extends React.Component { } componentDidUpdate(prevProps) { - const { code, options, debugAst, debugDoc } = this.props; + const { code, options, debugAst, debugDoc, secondFormat } = this.props; if ( prevProps.code !== code || prevProps.options !== options || prevProps.debugAst !== debugAst || - prevProps.debugDoc !== debugDoc + prevProps.debugDoc !== debugDoc || + prevProps.secondFormat !== secondFormat ) { this.format(); } } format() { - const { code, options, worker, debugAst, debugDoc } = this.props; + const { + code, + options, + worker, + debugAst, + debugDoc, + secondFormat + } = this.props; worker - .postMessage({ type: "format", code, options, debugAst, debugDoc }) + .postMessage({ + type: "format", + code, + options, + debugAst, + debugDoc, + secondFormat + }) .then(result => this.setState(result)); } diff --git a/website/playground/buttons.js b/website/playground/buttons.js index eb8ae0eac..cc51ecd02 100644 --- a/website/playground/buttons.js +++ b/website/playground/buttons.js @@ -19,7 +19,10 @@ export class ClipboardButton extends React.Component { componentDidMount() { this.clipboard = new ClipboardJS(this.ref.current, { - text: () => this.props.clipboardValue + text: () => { + const { copy } = this.props; + return typeof copy === "function" ? copy() : copy; + } }); this.clipboard.on("success", () => this.showTooltip("Copied!")); this.clipboard.on("error", () => this.showTooltip("Press ctrl+c to copy")); diff --git a/website/static/worker.js b/website/static/worker.js index dc61af0ff..d33e4cf64 100644 --- a/website/static/worker.js +++ b/website/static/worker.js @@ -91,7 +91,8 @@ self.onmessage = function(event) { const response = { formatted: formatCode(message.code, options), debugAst: null, - debugDoc: null + debugDoc: null, + reformatted: null }; if (message.debugAst) { @@ -127,6 +128,10 @@ self.onmessage = function(event) { } } + if (message.secondFormat) { + response.reformatted = formatCode(response.formatted, options) + } + self.postMessage({ uid: uid, message: response