Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Playground: Add support for rangeStart and rangeEnd #4216

Merged
merged 2 commits into from Apr 4, 2018
Merged

Playground: Add support for rangeStart and rangeEnd #4216

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
72e159d
Playground: Add support for rangeStart and rangeEnd
JamesHenry Mar 27, 2018
f2a5091
Update codemirror version in service-worker.js too
JamesHenry Apr 4, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
36 changes: 21 additions & 15 deletions website/pages/playground/index.html
View file
Open in desktop
Expand Up @@ -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>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You need to update all of these in website/static/service-worker.js as well

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

<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>

Expand Down Expand Up @@ -134,6 +134,12 @@ <h1>Prettier <span id="version"></span></h1>
<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>

Expand Down
110 changes: 110 additions & 0 deletions website/static/playground.js
View file
Open in desktop
Expand Up @@ -23,6 +23,8 @@ var OPTIONS = [
"requirePragma",
"proseWrap",
"arrowParens",
"rangeStart",
"rangeEnd",
"doc",
"ast",
"output2"
Expand All @@ -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;
Expand Down Expand Up @@ -279,6 +366,8 @@ function getCodemirrorMode(options) {
}
}

var inputEditorOverlay;

function formatAsync() {
var options = getOptions();
setEditorStyles();
Expand All @@ -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,
Expand Down
30 changes: 15 additions & 15 deletions website/static/service-worker.js
View file
Open in desktop
Expand Up @@ -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",

Expand Down