diff --git a/website/playground/Playground.js b/website/playground/Playground.js index 0732cea1..c75fd503 100644 --- a/website/playground/Playground.js +++ b/website/playground/Playground.js @@ -1,9 +1,10 @@ import React from "react"; -import { Button, LinkButton } from "./buttons"; +import { Button, ClipboardButton, LinkButton } from "./buttons"; import EditorState from "./EditorState"; import { DebugPanel, InputPanel, OutputPanel } from "./panels"; import PrettierFormat from "./PrettierFormat"; +import VersionLink from "./VersionLink"; import { shallowEqual } from "./helpers"; import * as urlHash from "./urlHash"; import formatMarkdown from "./markdown"; @@ -92,94 +93,121 @@ class Playground extends React.Component { if (!loaded) return "Loading..."; return ( - - {editorState => ( -
-
- - {categorizeOptions( - availableOptions, - (category, categoryOptions) => ( - - {categoryOptions.map(option => ( - - ) - )} - - - - -
- -
-
- - {({ formatted, debugAst, debugDoc }) => ( -
- + + + {editorState => ( +
+
+ + {categorizeOptions( + availableOptions, + (category, categoryOptions) => ( + + {categoryOptions.map(option => ( + + ) + )} + + - {editorState.showAst ? ( - - ) : null} - {editorState.showDoc ? ( - - ) : null} - + +
+
- )} - -
-
-
- - + + + {({ formatted, debugAst, debugDoc }) => ( +
+ + {editorState.showAst ? ( + + ) : null} + {editorState.showDoc ? ( + + ) : null} + +
+ )} +
-
- - - - Report issue - +
+
+ + +
+
+ + Copy link + + + + Report issue + +
-
- )} - + )} + + ); } } +function createVersionLink(version) { + const link = document.createElement("a"); + const match = version.match(/^\d+\.\d+\.\d+-pr.(\d+)$/); + if (match) { + link.href = "https://github.com/prettier/prettier/pull/" + match[1]; + link.textContent = `PR #${match[1]}`; + } else { + if (version.match(/\.0$/)) { + link.href = + "https://github.com/prettier/prettier/releases/tag/" + version; + } else { + link.href = + "https://github.com/prettier/prettier/blob/master/CHANGELOG.md#" + + version.replace(/\./g, ""); + } + link.textContent = `v${version}`; + } + return link; +} + function categorizeOptions(availableOptions, render) { const optionsByCategory = availableOptions.reduce((acc, option) => { let options; diff --git a/website/playground/VersionLink.js b/website/playground/VersionLink.js new file mode 100644 index 00000000..23b5384a --- /dev/null +++ b/website/playground/VersionLink.js @@ -0,0 +1,26 @@ +import React from "react"; +import ReactDOM from "react-dom"; + +const root = document.getElementById("version"); + +export default function({ version }) { + const match = version.match(/^\d+\.\d+\.\d+-.(\d+)$/); + let href; + if (match) { + href = `pull/${match[1]}`; + } else if (version.match(/\.0$/)) { + href = `releases/tag/${version}`; + } else { + href = `blob/master/CHANGELOG.md#${version.replace(/\./g, "")}`; + } + return ReactDOM.createPortal( + + {match ? `PR #${match[1]}` : `v${version}`} + , + root + ); +} diff --git a/website/playground/buttons.js b/website/playground/buttons.js index 422aea7d..a2cba42a 100644 --- a/website/playground/buttons.js +++ b/website/playground/buttons.js @@ -1,9 +1,51 @@ import React from "react"; +import ClipboardJS from "clipboard"; -export function Button(props) { - return + ); + } } diff --git a/website/webpack.config.js b/website/webpack.config.js index 2de88e38..3a21fdeb 100644 --- a/website/webpack.config.js +++ b/website/webpack.config.js @@ -21,6 +21,7 @@ module.exports = { ] }, externals: { + clipboard: 'ClipboardJS', codemirror: "CodeMirror", react: "React", "react-dom": "ReactDOM"