- Prettier
+Prettier
-
-
-
+
+
-
diff --git a/website/static/playground.js b/website/static/playground.js
index 562e3fa4e..8d4debf67 100644
--- a/website/static/playground.js
+++ b/website/static/playground.js
@@ -8,6 +8,20 @@ var docEditor;
var astEditor;
var outputEditor;
+var OPTIONS = [
+ "printWidth",
+ "tabWidth",
+ "singleQuote",
+ "trailingComma",
+ "bracketSpacing",
+ "jsxBracketSameLine",
+ "parser",
+ "semi",
+ "useTabs",
+ "doc",
+ "ast"
+];
+
var state = (function loadState(hash) {
try {
return JSON.parse(hash);
@@ -30,12 +44,14 @@ var worker = new Worker("/worker.js");
worker.onmessage = function(message) {
if (prettierVersion === "?") {
prettierVersion = message.data.version;
- document.querySelector(".version").textContent = prettierVersion;
+ document.getElementById("version").textContent = prettierVersion;
}
if (outputEditor && docEditor && astEditor) {
outputEditor.setValue(message.data.formatted);
docEditor.setValue(message.data.doc || "");
astEditor.setValue(message.data.ast || "");
+ document.getElementById("button-report-issue").search =
+ "body=" + encodeURIComponent(createIssueTemplate());
}
};
@@ -43,153 +59,8 @@ worker.onmessage = function(message) {
worker.postMessage({ text: "", options: state.options });
window.onload = function() {
- var OPTIONS = [
- "printWidth",
- "tabWidth",
- "singleQuote",
- "trailingComma",
- "bracketSpacing",
- "jsxBracketSameLine",
- "parser",
- "semi",
- "useTabs",
- "doc",
- "ast"
- ];
state.options && setOptions(state.options);
- function setOptions(options) {
- OPTIONS.forEach(function(option) {
- var elem = document.getElementById(option);
- if (elem.tagName === "SELECT") {
- elem.value = options[option];
- } else if (elem.type === "number") {
- elem.value = options[option];
- } else {
- var isInverted = elem.hasAttribute("data-inverted");
- elem.checked = isInverted ? !options[option] : options[option];
- }
- });
- }
-
- function getOptions() {
- var options = {};
- OPTIONS.forEach(function(option) {
- var elem = document.getElementById(option);
- if (elem.tagName === "SELECT") {
- options[option] = elem.value;
- } else if (elem.type === "number") {
- options[option] = Number(elem.value);
- } else {
- var isInverted = elem.hasAttribute("data-inverted");
- options[option] = isInverted ? !elem.checked : elem.checked;
- }
- });
- 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" &&
- typeof history === "object" &&
- typeof history.replaceState === "function"
- ) {
- var url = new URL(location);
- url.hash = hash;
- history.replaceState(null, null, url);
- } else {
- location.hash = hash;
- }
- }
-
- function setCodemirrorMode(editor, mode) {
- editor.setOption("mode", mode);
- CodeMirror.autoLoadMode(editor, mode);
- }
-
- function formatAsync() {
- var options = getOptions();
-
- var mode = util.getCodemirrorMode(options);
- setCodemirrorMode(inputEditor, mode);
- setCodemirrorMode(outputEditor, mode);
-
- outputEditor.setOption("rulers", [
- { column: options.printWidth, color: "#444444" }
- ]);
- document.querySelector(".ast").style.display = options.ast ? "" : "none";
- document.querySelector(".doc").style.display = options.doc ? "" : "none";
-
- var value = encodeURIComponent(
- JSON.stringify(
- Object.assign({ content: inputEditor.getValue(), options: options })
- )
- );
- replaceHash(value);
- worker.postMessage({
- text: inputEditor.getValue(),
- options: options,
- ast: options.ast,
- doc: options.doc
- });
- }
-
- 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);
- }
-
CodeMirror.modeURL =
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/mode/%N/%N.js";
@@ -227,16 +98,28 @@ window.onload = function() {
setCodemirrorMode(docEditor, "javascript");
setCodemirrorMode(astEditor, "javascript");
- Array.from(document.querySelectorAll("textarea")).forEach(function(element) {
- element.classList.remove("loading");
- });
+ var editors = document.querySelectorAll(".editor");
+ for (var i = 0; i < editors.length; i++) {
+ editors[i].classList.remove("loading");
+ }
inputEditor.setValue(state.content);
document.querySelector(".options-container").onchange = formatAsync;
- var clipboard = new Clipboard(".copy-markdown", {
- text: function() {
- return createMarkdown();
+ document.getElementById("button-clear").onclick = function() {
+ inputEditor.setValue("");
+ };
+
+ var clipboard = new Clipboard("#button-copy-link, #button-copy-markdown", {
+ text: function(trigger) {
+ switch (trigger.id) {
+ case "button-copy-link":
+ return window.location.href;
+ case "button-copy-markdown":
+ return createMarkdown();
+ default:
+ return "";
+ }
}
});
clipboard.on("success", function(e) {
@@ -247,13 +130,149 @@ window.onload = function() {
});
};
+function setOptions(options) {
+ OPTIONS.forEach(function(option) {
+ var elem = document.getElementById(option);
+ if (elem.tagName === "SELECT") {
+ elem.value = options[option];
+ } else if (elem.type === "number") {
+ elem.value = options[option];
+ } else {
+ var isInverted = elem.hasAttribute("data-inverted");
+ elem.checked = isInverted ? !options[option] : options[option];
+ }
+ });
+}
+
+function getOptions() {
+ var options = {};
+ OPTIONS.forEach(function(option) {
+ var elem = document.getElementById(option);
+ if (elem.tagName === "SELECT") {
+ options[option] = elem.value;
+ } else if (elem.type === "number") {
+ options[option] = Number(elem.value);
+ } else {
+ var isInverted = elem.hasAttribute("data-inverted");
+ options[option] = isInverted ? !elem.checked : elem.checked;
+ }
+ });
+ 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" &&
+ typeof history === "object" &&
+ typeof history.replaceState === "function"
+ ) {
+ var url = new URL(location);
+ url.hash = hash;
+ history.replaceState(null, null, url);
+ } else {
+ location.hash = hash;
+ }
+}
+
+function setCodemirrorMode(editor, mode) {
+ editor.setOption("mode", mode);
+ CodeMirror.autoLoadMode(editor, mode);
+}
+
+function formatAsync() {
+ var options = getOptions();
+
+ var mode = util.getCodemirrorMode(options);
+ setCodemirrorMode(inputEditor, mode);
+ setCodemirrorMode(outputEditor, mode);
+
+ outputEditor.setOption("rulers", [
+ { column: options.printWidth, color: "#444444" }
+ ]);
+ document.querySelector(".ast").style.display = options.ast ? "" : "none";
+ document.querySelector(".doc").style.display = options.doc ? "" : "none";
+
+ var value = encodeURIComponent(
+ JSON.stringify(
+ Object.assign({ content: inputEditor.getValue(), options: options })
+ )
+ );
+ replaceHash(value);
+ worker.postMessage({
+ text: inputEditor.getValue(),
+ options: options,
+ ast: options.ast,
+ doc: options.doc
+ });
+}
+
+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 createIssueTemplate() {
+ return [createMarkdown(), "", "**Expected behavior:**", ""].join("\n");
+}
+
+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 util = (function() {
function formatMarkdown(input, output, version, url, options, cliOptions) {
var syntax = getMarkdownSyntax(options);
var optionsString = formatCLIOptions(cliOptions);
return [
- "**Prettier " + version,
+ "**Prettier " + version + "**",
"[Playground link](" + url + ")",
optionsString === "" ? null : codeBlock(optionsString),
"",