From 1827d65d935c0ff40f9ccc2cbeba113727c80b86 Mon Sep 17 00:00:00 2001 From: Simon Lydell Date: Sun, 10 Sep 2017 20:09:06 +0200 Subject: [PATCH 01/17] Add a "Copy as markdown" button to the playground --- website/pages/playground/index.html | 67 +++++++++++++- website/static/playground.js | 135 +++++++++++++++++++++++++++- 2 files changed, 200 insertions(+), 2 deletions(-) diff --git a/website/pages/playground/index.html b/website/pages/playground/index.html index 936baa6b..65024c22 100644 --- a/website/pages/playground/index.html +++ b/website/pages/playground/index.html @@ -35,6 +35,7 @@ + @@ -221,6 +283,9 @@ + prettier version - (master) + / master

diff --git a/website/static/playground.js b/website/static/playground.js index 33ee0162..f611e79a 100644 --- a/website/static/playground.js +++ b/website/static/playground.js @@ -1,6 +1,6 @@ /* eslint-env browser */ /* eslint no-var: off, strict: off, prefer-arrow-callback: off */ -/* global CodeMirror prettierVersion */ +/* global Clipboard CodeMirror prettierVersion */ var state = (function loadState(hash) { try { @@ -69,6 +69,36 @@ window.onload = function() { return options; } + function getCLIOptions() { + return OPTIONS.sort() + .map(function(option) { + var elem = document.getElementById(option); + var match = elem.parentNode.textContent.match(/--\S+/); + if (!match) { + return null; + } + var name = match[0]; + if (elem.tagName === "SELECT") { + if (elem.value === elem.options[0].value) { + return null; + } + return [name, elem.value]; + } else if (elem.type === "number") { + if (elem.value === elem.getAttribute("value")) { + return null; + } + return [name, elem.value]; + } else if (elem.type === "checkbox") { + if (!elem.checked) { + return null; + } + return [name, true]; + } + return null; + }) + .filter(Boolean); + } + function replaceHash(hash) { if ( typeof URL === "function" && @@ -110,6 +140,32 @@ window.onload = function() { }); } + function createMarkdown() { + var input = inputEditor.getValue(); + var output = outputEditor.getValue(); + var options = getOptions(); + var cliOptions = getCLIOptions(); + var markdown = util.formatMarkdown( + input, + output, + prettierVersion, + window.location.href, + options, + cliOptions + ); + return markdown; + } + + function showTooltip(elem, text) { + var tooltip = document.createElement("span"); + tooltip.className = "tooltip"; + tooltip.textContent = text; + elem.appendChild(tooltip); + window.setTimeout(function() { + elem.removeChild(tooltip); + }, 2000); + } + var editorOptions = { lineNumbers: true, keyMap: "sublime", @@ -151,4 +207,81 @@ window.onload = function() { inputEditor.setValue(state.content); document.querySelector(".options-container").onchange = formatAsync; document.querySelector(".version").innerText = prettierVersion; + + var clipboard = new Clipboard(".copy-markdown", { + text: function() { + return createMarkdown(); + } + }); + clipboard.on("success", function(e) { + showTooltip(e.trigger, "Copied!"); + }); + clipboard.on("error", function(e) { + showTooltip(e.trigger, "Press ctrl+c to copy"); + }); }; + +var util = (function() { + function formatMarkdown(input, output, version, url, options, cliOptions) { + var syntax = getMarkdownSyntax(options); + var optionsString = formatCLIOptions(cliOptions); + + return [ + "**Prettier " + version + " / master**", + "[Playground link](" + url + ")", + optionsString === "" ? null : codeBlock(optionsString), + "", + "**Input:**", + codeBlock(input, syntax), + "", + "**Output:**", + codeBlock(output, syntax) + ] + .filter(function(part) { + return part != null; + }) + .join("\n"); + } + + function getMarkdownSyntax(options) { + switch (options.parser) { + case "babylon": + case "flow": + return "jsx"; + case "typescript": + return "tsx"; + case "postcss": + return "scss"; + default: + return options.parser; + } + } + + function formatCLIOptions(cliOptions) { + return cliOptions + .map(function(option) { + var name = option[0]; + var value = option[1]; + return value === true ? name : name + " " + value; + }) + .join("\n"); + } + + function codeBlock(content, syntax) { + var backtickSequences = content.match(/`+/g) || []; + var longestBacktickSequenceLength = Math.max.apply( + null, + backtickSequences.map(function(backticks) { + return backticks.length; + }) + ); + var fenceLength = Math.max(3, longestBacktickSequenceLength + 1); + var fence = Array(fenceLength + 1).join("`"); + return [fence + (syntax || ""), content, fence].join("\n"); + } + + return { + formatMarkdown: formatMarkdown, + getMarkdownSyntax: getMarkdownSyntax + }; +})(); From a768740945b57e5c622589713795438f36223ffb Mon Sep 17 00:00:00 2001 From: Simon Lydell Date: Mon, 11 Sep 2017 19:28:17 +0200 Subject: [PATCH 02/17] Update issue template --- .github/ISSUE_TEMPLATE.md | 21 +++++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md index 10b7e8dd..356fa46f 100644 --- a/.github/ISSUE_TEMPLATE.md +++ b/.github/ISSUE_TEMPLATE.md @@ -1,15 +1,24 @@ - + **Prettier Version:** 1.6.1 / master +([Playground link](https://prettier.io/playground/#.....)) -**Code** - -([playground](https://prettier.io/playground/#.....)) +**Input:** +```js +// code snippet +``` +**Output:** ```js // code snippet ``` **Expected behavior:** - -**Actual behavior:** \ No newline at end of file From cdb7c0d4e3f1f7862ad74411499aded3882ece79 Mon Sep 17 00:00:00 2001 From: Simon Lydell Date: Mon, 11 Sep 2017 19:55:15 +0200 Subject: [PATCH 03/17] Set playground Codemirror mode based on parser --- website/pages/playground/index.html | 2 +- website/static/playground.js | 21 ++++++++++++++++++++- 2 files changed, 21 insertions(+), 2 deletions(-) diff --git a/website/pages/playground/index.html b/website/pages/playground/index.html index 65024c22..4c641a07 100644 --- a/website/pages/playground/index.html +++ b/website/pages/playground/index.html @@ -27,7 +27,7 @@ - + diff --git a/website/static/playground.js b/website/static/playground.js index f611e79a..a8b4fa68 100644 --- a/website/static/playground.js +++ b/website/static/playground.js @@ -116,6 +116,12 @@ window.onload = function() { function formatAsync() { var options = getOptions(); + var mode = util.getCodemirrorMode(options); + inputEditor.setOption("mode", mode); + outputEditor.setOption("mode", mode); + CodeMirror.autoLoadMode(inputEditor, mode); + CodeMirror.autoLoadMode(outputEditor, mode); + outputEditor.setOption("rulers", [ { column: options.printWidth, color: "#444444" } ]); @@ -166,6 +172,9 @@ window.onload = function() { }, 2000); } + CodeMirror.modeURL = + "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/mode/%N/%N.js"; + var editorOptions = { lineNumbers: true, keyMap: "sublime", @@ -257,6 +266,15 @@ var util = (function() { } } + function getCodemirrorMode(options) { + switch (options.parser) { + case "postcss": + return "css"; + default: + return "javascript"; + } + } + function formatCLIOptions(cliOptions) { return cliOptions .map(function(option) { @@ -282,6 +300,7 @@ var util = (function() { return { formatMarkdown: formatMarkdown, - getMarkdownSyntax: getMarkdownSyntax + getMarkdownSyntax: getMarkdownSyntax, + getCodemirrorMode: getCodemirrorMode }; })(); From d6eeaae29bee840ca10d7cd0a9e4626a56f06b9b Mon Sep 17 00:00:00 2001 From: Simon Lydell Date: Mon, 11 Sep 2017 19:59:03 +0200 Subject: [PATCH 04/17] Fix some playground HTML errors and warnings --- website/pages/playground/index.html | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/website/pages/playground/index.html b/website/pages/playground/index.html index 4c641a07..1a0ab6df 100644 --- a/website/pages/playground/index.html +++ b/website/pages/playground/index.html @@ -278,7 +278,7 @@
- +

Prettier

 @@ -296,7 +296,7 @@
-
+
@@ -311,34 +311,34 @@
-
+ -
+
Options
- - + +
- - - - - + + + + +
- - + +
-
+