vitalif
/
prettier
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Playground: Add support for rangeStart and rangeEnd (#4216) 

This allows users to more easily reproduce and report issues such as:

- https://github.com/prettier/prettier/issues/3789
- https://github.com/prettier/prettier/issues/4206
...etc...
master
James Henry 2018-04-04 15:54:05 -04:00 committed by Joseph Frazier
parent 93caa7642e
commit 74ad0014aa
3 changed files with 146 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
website/pages/playground/index.html
View File

@ -20,25 +20,25 @@
<link rel="icon" href="/icon.png">
<link rel="apple-touch-icon" href="/icon.png">
<link rel="stylesheet" crossorigin href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/codemirror.css">
<link rel="stylesheet" crossorigin href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/codemirror.css">
<script src="/markdown.js"></script>
<script src="/playground.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/codemirror.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/mode/javascript/javascript.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/mode/xml/xml.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/mode/jsx/jsx.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/mode/css/css.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/mode/markdown/markdown.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/addon/display/placeholder.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/addon/display/rulers.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/addon/search/searchcursor.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/addon/edit/matchbrackets.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/addon/edit/closebrackets.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/addon/comment/comment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/addon/wrap/hardwrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/keymap/sublime.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/codemirror.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/mode/javascript/javascript.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/mode/xml/xml.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/mode/jsx/jsx.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/mode/css/css.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/mode/markdown/markdown.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/addon/display/placeholder.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/addon/display/rulers.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/addon/search/searchcursor.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/addon/edit/matchbrackets.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/addon/edit/closebrackets.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/addon/comment/comment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/addon/wrap/hardwrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/keymap/sublime.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lz-string/1.4.4/lz-string.min.js"></script>
@ -134,6 +134,12 @@
<label><input type="checkbox" id="insertPragma"> --insert-pragma</label>
<label><input type="checkbox" id="requirePragma"> --require-pragma</label>
</details>
<details class="sub-options">
<summary>Range</summary>
<label>The selected range will be highlighted in yellow in the input editor</label>
<label>--range-start <input type="number" min="0" id="rangeStart"></label>
<label>--range-end <input type="number" min="0" id="rangeEnd"></label>
</details>
<details class="sub-options">
<summary>Debug</summary>

110
website/static/playground.js
View File

@ -23,6 +23,8 @@ var OPTIONS = [
"requirePragma",
"proseWrap",
"arrowParens",
"rangeStart",
"rangeEnd",
"doc",
"ast",
"output2"
@ -37,6 +39,91 @@ const DEFAULT_OPTIONS = {
content: ""
};
function createRangeOverlay(rangeStartLocation, rangeEndLocation) {
var rangeStartLine = rangeStartLocation.line;
var rangeEndLine = rangeEndLocation.line;
var rangeStartPos = rangeStartLocation.pos;
var rangeEndPos = rangeEndLocation.pos;
var isEndOnSameLineAsStart = rangeStartLine === rangeEndLine;
var highlightedToken = "searching";
return {
token: function(stream) {
var currentLine = stream.lineOracle.line;
// we are on the line containing rangeStart
if (currentLine === rangeStartLine) {
// on the same line as, but not reached rangeStart yet,
// jump straight to it
if (rangeStartPos > stream.pos) {
stream.pos = rangeStartPos;
return;
}
// the rangeEnd is on the same line as the rangeStart
if (isEndOnSameLineAsStart) {
// we are still within the range,
// keep iterating along the string stream,
// marking it as highlighted
if (stream.pos < rangeEndPos) {
stream.pos += 1;
return highlightedToken;
}
// we've moved outside of the range
// just skip to the end
return stream.skipToEnd();
}
// keep iterating along the string stream,
// marking it as highlighted
stream.pos += 1;
return highlightedToken;
}
// we are on the line containing rangeEnd
if (currentLine === rangeEndLine) {
// keep iterating along the string stream,
// marking it as highlighted
if (rangeEndPos > stream.pos) {
stream.pos += 1;
return highlightedToken;
}
// we've moved outside of the range
// just skip to the end
return stream.skipToEnd();
}
// we are on a line which is completely included
// within the range, mark it all as highlighted
if (currentLine > rangeStartLine && currentLine < rangeEndLine) {
stream.skipToEnd();
return highlightedToken;
}
// no action can be required on the current line
// as it must fall outside of the range,
// so just skip to the end
return stream.skipToEnd();
}
};
}
function indexToEditorLocation(editorContent, index) {
var line = 0;
var count = 0;
var startIndex = 0;
for (var c, i = 0; count < index && i < editorContent.length; i++) {
count++;
c = editorContent[i];
if (c === "\n") {
line++;
startIndex = count;
}
}
return {
line: line,
pos: count - startIndex
};
}
window.onload = function() {
var state = (function loadState(hash) {
var parsed;
@ -279,6 +366,8 @@ function getCodemirrorMode(options) {
}
}
var inputEditorOverlay;
function formatAsync() {
var options = getOptions();
setEditorStyles();
@ -289,6 +378,27 @@ function formatAsync() {
)
);
replaceHash(value);
if (
typeof options.rangeStart === "number" &&
typeof options.rangeEnd === "number"
) {
var rangeStartLocation = indexToEditorLocation(
inputEditor.getValue(),
options.rangeStart
);
var rangeEndLocation = indexToEditorLocation(
inputEditor.getValue(),
options.rangeEnd
);
inputEditor.removeOverlay(inputEditorOverlay);
inputEditorOverlay = createRangeOverlay(
rangeStartLocation,
rangeEndLocation
);
inputEditor.addOverlay(inputEditorOverlay);
}
worker.postMessage({
text: inputEditor.getValue() || getExample(options.parser),
options: options,

30
website/static/service-worker.js
View File

@ -20,21 +20,21 @@ toolbox.precache([
"lib/sw-toolbox.js",
// CodeMirror
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/codemirror.css",
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/codemirror.js",
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/mode/javascript/javascript.js",
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/mode/xml/xml.js",
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/mode/jsx/jsx.js",
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/mode/css/css.js",
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/mode/markdown/markdown.js",
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/addon/display/placeholder.js",
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/addon/display/rulers.js",
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/addon/search/searchcursor.js",
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/addon/edit/matchbrackets.js",
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/addon/edit/closebrackets.js",
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/addon/comment/comment.js",
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/addon/wrap/hardwrap.js",
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/keymap/sublime.js",
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/codemirror.css",
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/codemirror.js",
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/mode/javascript/javascript.js",
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/mode/xml/xml.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/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/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/closebrackets.js",
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/addon/comment/comment.js",
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/addon/wrap/hardwrap.js",
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/keymap/sublime.js",
"https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js",
"https://cdnjs.cloudflare.com/ajax/libs/lz-string/1.4.4/lz-string.min.js",