Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,89 @@ | ||
| <!doctype html> | ||
|
|
||
| <title>CodeMirror: JSX mode</title> | ||
| <meta charset="utf-8"/> | ||
| <link rel=stylesheet href="../../doc/docs.css"> | ||
|
|
||
| <link rel="stylesheet" href="../../lib/codemirror.css"> | ||
| <script src="../../lib/codemirror.js"></script> | ||
| <script src="../javascript/javascript.js"></script> | ||
| <script src="../xml/xml.js"></script> | ||
| <script src="jsx.js"></script> | ||
| <style type="text/css">.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</style> | ||
| <div id=nav> | ||
| <a href="http://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../../doc/logo.png"></a> | ||
|
|
||
| <ul> | ||
| <li><a href="../../index.html">Home</a> | ||
| <li><a href="../../doc/manual.html">Manual</a> | ||
| <li><a href="https://github.com/codemirror/codemirror">Code</a> | ||
| </ul> | ||
| <ul> | ||
| <li><a href="../index.html">Language modes</a> | ||
| <li><a class=active href="#">JSX</a> | ||
| </ul> | ||
| </div> | ||
|
|
||
| <article> | ||
| <h2>JSX mode</h2> | ||
|
|
||
| <div><textarea id="code" name="code">// Code snippets from http://facebook.github.io/react/docs/jsx-in-depth.html | ||
|
|
||
| // Rendering HTML tags | ||
| var myDivElement = <div className="foo" />; | ||
| ReactDOM.render(myDivElement, document.getElementById('example')); | ||
|
|
||
| // Rendering React components | ||
| var MyComponent = React.createClass({/*...*/}); | ||
| var myElement = <MyComponent someProperty={true} />; | ||
| ReactDOM.render(myElement, document.getElementById('example')); | ||
|
|
||
| // Namespaced components | ||
| var Form = MyFormComponent; | ||
|
|
||
| var App = ( | ||
| <Form> | ||
| <Form.Row> | ||
| <Form.Label /> | ||
| <Form.Input /> | ||
| </Form.Row> | ||
| </Form> | ||
| ); | ||
|
|
||
| // Attribute JavaScript expressions | ||
| var person = <Person name={window.isLoggedIn ? window.name : ''} />; | ||
|
|
||
| // Boolean attributes | ||
| <input type="button" disabled />; | ||
| <input type="button" disabled={true} />; | ||
|
|
||
| // Child JavaScript expressions | ||
| var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>; | ||
|
|
||
| // Comments | ||
| var content = ( | ||
| <Nav> | ||
| {/* child comment, put {} around */} | ||
| <Person | ||
| /* multi | ||
| line | ||
| comment */ | ||
| name={window.isLoggedIn ? window.name : ''} // end of line comment | ||
| /> | ||
| </Nav> | ||
| ); | ||
| </textarea></div> | ||
|
|
||
| <script> | ||
| var editor = CodeMirror.fromTextArea(document.getElementById("code"), { | ||
| lineNumbers: true, | ||
| mode: "jsx" | ||
| }) | ||
| </script> | ||
|
|
||
| <p>JSX Mode for <a href="http://facebook.github.io/react">React</a>'s | ||
| JavaScript syntax extension.</p> | ||
|
|
||
| <p><strong>MIME types defined:</strong> <code>text/jsx</code>.</p> | ||
|
|
||
| </article> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| // CodeMirror, copyright (c) by Marijn Haverbeke and others | ||
| // Distributed under an MIT license: http://codemirror.net/LICENSE | ||
|
|
||
| (function(mod) { | ||
| if (typeof exports == "object" && typeof module == "object") // CommonJS | ||
| mod(require("../../lib/codemirror"), require("../xml/xml"), require("../javascript/javascript")) | ||
| else if (typeof define == "function" && define.amd) // AMD | ||
| define(["../../lib/codemirror", "../xml/xml", "../javascript/javascript"], mod) | ||
| else // Plain browser env | ||
| mod(CodeMirror) | ||
| })(function(CodeMirror) { | ||
| "use strict" | ||
|
|
||
| function copyContext(context) { | ||
| return {state: CodeMirror.copyState(context.mode, context.state), | ||
| mode: context.mode, | ||
| depth: context.depth, | ||
| prev: context.prev && copyContext(context.prev)} | ||
| } | ||
|
|
||
| CodeMirror.defineMode("jsx", function(config) { | ||
| var xmlMode = CodeMirror.getMode(config, "xml") | ||
| var jsMode = CodeMirror.getMode(config, "javascript") | ||
|
|
||
| return { | ||
| startState: function() { | ||
| return {context: {state: CodeMirror.startState(jsMode), mode: jsMode}} | ||
| }, | ||
|
|
||
| copyState: function(state) { | ||
| return {context: copyContext(state.context)} | ||
| }, | ||
|
|
||
| token: function(stream, state) { | ||
| var cx = state.context | ||
| if (cx.mode == xmlMode) { | ||
| if (stream.peek() == "{") { | ||
| xmlMode.skipAttribute(cx.state) | ||
| state.context = {state: CodeMirror.startState(jsMode, xmlMode.indent(cx.state, "")), | ||
| mode: jsMode, | ||
| depth: 1, | ||
| prev: state.context} | ||
| return jsMode.token(stream, state.context.state) | ||
| } else { // FIXME skip attribute | ||
| var style = xmlMode.token(stream, cx.state), cur, brace | ||
| if (/\btag\b/.test(style) && !cx.state.context && /^\/?>$/.test(stream.current())) | ||
| state.context = state.context.prev | ||
| else if (!style && (brace = (cur = stream.current()).indexOf("{")) > -1) | ||
| stream.backUp(cur.length - brace) | ||
| return style | ||
| } | ||
| } else { // jsMode | ||
| if (stream.peek() == "<" && jsMode.expressionAllowed(stream, cx.state)) { | ||
| jsMode.skipExpression(cx.state) | ||
| state.context = {state: CodeMirror.startState(xmlMode, jsMode.indent(cx.state, "")), | ||
| mode: xmlMode, | ||
| prev: state.context} | ||
| return xmlMode.token(stream, state.context.state) | ||
| } else { | ||
| var style = jsMode.token(stream, cx.state) | ||
| if (!style && cx.depth != null) { | ||
| var cur = stream.current() | ||
| if (cur == "{") { | ||
| cx.depth++ | ||
| } else if (cur == "}") { | ||
| if (--cx.depth == 0) state.context = state.context.prev | ||
| } | ||
| } | ||
| return style | ||
| } | ||
| } | ||
| }, | ||
|
|
||
| indent: function(state, textAfter, fullLine) { | ||
| return state.context.mode.indent(state.context.state, textAfter, fullLine) | ||
| }, | ||
|
|
||
| innerMode: function(state) { | ||
| return state.context[state.context.length - 1] | ||
This comment has been minimized.
Sorry, something went wrong.
This comment has been minimized.
Sorry, something went wrong. 
marijnh
Author
Member
|
||
| } | ||
| } | ||
| }, "xml", "javascript") | ||
|
|
||
| CodeMirror.defineMIME("text/jsx", "jsx") | ||
| }) | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| // CodeMirror, copyright (c) by Marijn Haverbeke and others | ||
| // Distributed under an MIT license: http://codemirror.net/LICENSE | ||
|
|
||
| (function() { | ||
| var mode = CodeMirror.getMode({indentUnit: 2}, "jsx") | ||
| function MT(name) { test.mode(name, mode, Array.prototype.slice.call(arguments, 1)) } | ||
|
|
||
| MT("selfclose", | ||
| "[keyword var] [def x] [operator =] [bracket&tag <] [tag foo] [bracket&tag />] [operator +] [number 1];") | ||
|
|
||
| MT("openclose", | ||
| "([bracket&tag <][tag foo][bracket&tag >]hello [atom &][bracket&tag </][tag foo][bracket&tag >][operator ++])") | ||
|
|
||
| MT("attr", | ||
| "([bracket&tag <][tag foo] [attribute abc]=[string 'value'][bracket&tag >]hello [atom &][bracket&tag </][tag foo][bracket&tag >][operator ++])") | ||
|
|
||
| MT("braced_attr", | ||
| "([bracket&tag <][tag foo] [attribute abc]={[number 10]}[bracket&tag >]hello [atom &][bracket&tag </][tag foo][bracket&tag >][operator ++])") | ||
|
|
||
| MT("braced_text", | ||
| "([bracket&tag <][tag foo][bracket&tag >]hello {[number 10]} [atom &][bracket&tag </][tag foo][bracket&tag >][operator ++])") | ||
|
|
||
| MT("nested_tag", | ||
| "([bracket&tag <][tag foo][bracket&tag ><][tag bar][bracket&tag ></][tag bar][bracket&tag ></][tag foo][bracket&tag >][operator ++])") | ||
|
|
||
| MT("nested_jsx", | ||
| "[keyword return] (", | ||
| " [bracket&tag <][tag foo][bracket&tag >]", | ||
| " say {[number 1] [operator +] [bracket&tag <][tag bar] [attribute attr]={[number 10]}[bracket&tag />]}!", | ||
| " [bracket&tag </][tag foo][bracket&tag >][operator ++]", | ||
| ")") | ||
|
|
||
| MT("preserve_js_context", | ||
| "[variable x] [operator =] [string-2 `quasi${][bracket&tag <][tag foo][bracket&tag />][string-2 }quoted`]") | ||
| })() |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@marijnh would be nice to return an object with the mode property here so that we can have addons like code folding work seamlessly.
This seems to work for me locally and is such a trivial issue - i didn't think it warranted a PR also I was not too sure of any additional implications.