diff options
author | Armen Kesablyan | 2012-02-22 16:26:41 -0800 |
---|---|---|
committer | Armen Kesablyan | 2012-02-22 16:26:41 -0800 |
commit | 0bd1cefea2ab350fad1a891bdc926053b799aafc (patch) | |
tree | 962f559fcc02a3dfeb297d59907e40fa153453f3 /imports/codemirror/mode/htmlmixed | |
parent | 695bc5082f48dddf66ce31480a4faefc067b38bd (diff) | |
parent | 2d2b1af8b5c0d506fe6a1cf65614101fec145970 (diff) | |
download | ninja-0bd1cefea2ab350fad1a891bdc926053b799aafc.tar.gz |
Merge branch 'refs/heads/master' into new-tool-icons
Diffstat (limited to 'imports/codemirror/mode/htmlmixed')
-rwxr-xr-x | imports/codemirror/mode/htmlmixed/htmlmixed.js | 83 | ||||
-rwxr-xr-x | imports/codemirror/mode/htmlmixed/index.html | 51 |
2 files changed, 134 insertions, 0 deletions
diff --git a/imports/codemirror/mode/htmlmixed/htmlmixed.js b/imports/codemirror/mode/htmlmixed/htmlmixed.js new file mode 100755 index 00000000..a94dc45f --- /dev/null +++ b/imports/codemirror/mode/htmlmixed/htmlmixed.js | |||
@@ -0,0 +1,83 @@ | |||
1 | CodeMirror.defineMode("htmlmixed", function(config, parserConfig) { | ||
2 | var htmlMode = CodeMirror.getMode(config, {name: "xml", htmlMode: true}); | ||
3 | var jsMode = CodeMirror.getMode(config, "javascript"); | ||
4 | var cssMode = CodeMirror.getMode(config, "css"); | ||
5 | |||
6 | function html(stream, state) { | ||
7 | var style = htmlMode.token(stream, state.htmlState); | ||
8 | if (style == "tag" && stream.current() == ">" && state.htmlState.context) { | ||
9 | if (/^script$/i.test(state.htmlState.context.tagName)) { | ||
10 | state.token = javascript; | ||
11 | state.localState = jsMode.startState(htmlMode.indent(state.htmlState, "")); | ||
12 | state.mode = "javascript"; | ||
13 | } | ||
14 | else if (/^style$/i.test(state.htmlState.context.tagName)) { | ||
15 | state.token = css; | ||
16 | state.localState = cssMode.startState(htmlMode.indent(state.htmlState, "")); | ||
17 | state.mode = "css"; | ||
18 | } | ||
19 | } | ||
20 | return style; | ||
21 | } | ||
22 | function maybeBackup(stream, pat, style) { | ||
23 | var cur = stream.current(); | ||
24 | var close = cur.search(pat); | ||
25 | if (close > -1) stream.backUp(cur.length - close); | ||
26 | return style; | ||
27 | } | ||
28 | function javascript(stream, state) { | ||
29 | if (stream.match(/^<\/\s*script\s*>/i, false)) { | ||
30 | state.token = html; | ||
31 | state.curState = null; | ||
32 | state.mode = "html"; | ||
33 | return html(stream, state); | ||
34 | } | ||
35 | return maybeBackup(stream, /<\/\s*script\s*>/, | ||
36 | jsMode.token(stream, state.localState)); | ||
37 | } | ||
38 | function css(stream, state) { | ||
39 | if (stream.match(/^<\/\s*style\s*>/i, false)) { | ||
40 | state.token = html; | ||
41 | state.localState = null; | ||
42 | state.mode = "html"; | ||
43 | return html(stream, state); | ||
44 | } | ||
45 | return maybeBackup(stream, /<\/\s*style\s*>/, | ||
46 | cssMode.token(stream, state.localState)); | ||
47 | } | ||
48 | |||
49 | return { | ||
50 | startState: function() { | ||
51 | var state = htmlMode.startState(); | ||
52 | return {token: html, localState: null, mode: "html", htmlState: state}; | ||
53 | }, | ||
54 | |||
55 | copyState: function(state) { | ||
56 | if (state.localState) | ||
57 | var local = CodeMirror.copyState(state.token == css ? cssMode : jsMode, state.localState); | ||
58 | return {token: state.token, localState: local, mode: state.mode, | ||
59 | htmlState: CodeMirror.copyState(htmlMode, state.htmlState)}; | ||
60 | }, | ||
61 | |||
62 | token: function(stream, state) { | ||
63 | return state.token(stream, state); | ||
64 | }, | ||
65 | |||
66 | indent: function(state, textAfter) { | ||
67 | if (state.token == html || /^\s*<\//.test(textAfter)) | ||
68 | return htmlMode.indent(state.htmlState, textAfter); | ||
69 | else if (state.token == javascript) | ||
70 | return jsMode.indent(state.localState, textAfter); | ||
71 | else | ||
72 | return cssMode.indent(state.localState, textAfter); | ||
73 | }, | ||
74 | |||
75 | compareStates: function(a, b) { | ||
76 | return htmlMode.compareStates(a.htmlState, b.htmlState); | ||
77 | }, | ||
78 | |||
79 | electricChars: "/{}:" | ||
80 | } | ||
81 | }); | ||
82 | |||
83 | CodeMirror.defineMIME("text/html", "htmlmixed"); | ||
diff --git a/imports/codemirror/mode/htmlmixed/index.html b/imports/codemirror/mode/htmlmixed/index.html new file mode 100755 index 00000000..63fc4120 --- /dev/null +++ b/imports/codemirror/mode/htmlmixed/index.html | |||
@@ -0,0 +1,51 @@ | |||
1 | <!doctype html> | ||
2 | <html> | ||
3 | <head> | ||
4 | <title>CodeMirror: HTML mixed mode</title> | ||
5 | <link rel="stylesheet" href="../../lib/codemirror.css"> | ||
6 | <script src="../../lib/codemirror.js"></script> | ||
7 | <script src="../xml/xml.js"></script> | ||
8 | <script src="../javascript/javascript.js"></script> | ||
9 | <script src="../css/css.js"></script> | ||
10 | <script src="htmlmixed.js"></script> | ||
11 | <link rel="stylesheet" href="../../doc/docs.css"> | ||
12 | <style>.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</style> | ||
13 | </head> | ||
14 | <body> | ||
15 | <h1>CodeMirror: HTML mixed mode</h1> | ||
16 | <form><textarea id="code" name="code"> | ||
17 | <html style="color: green"> | ||
18 | <!-- this is a comment --> | ||
19 | <head> | ||
20 | <title>Mixed HTML Example</title> | ||
21 | <style type="text/css"> | ||
22 | h1 {font-family: comic sans; color: #f0f;} | ||
23 | div {background: yellow !important;} | ||
24 | body { | ||
25 | max-width: 50em; | ||
26 | margin: 1em 2em 1em 5em; | ||
27 | } | ||
28 | </style> | ||
29 | </head> | ||
30 | <body> | ||
31 | <h1>Mixed HTML Example</h1> | ||
32 | <script> | ||
33 | function jsFunc(arg1, arg2) { | ||
34 | if (arg1 && arg2) document.body.innerHTML = "achoo"; | ||
35 | } | ||
36 | </script> | ||
37 | </body> | ||
38 | </html> | ||
39 | </textarea></form> | ||
40 | <script> | ||
41 | var editor = CodeMirror.fromTextArea(document.getElementById("code"), {mode: "text/html", tabMode: "indent"}); | ||
42 | </script> | ||
43 | |||
44 | <p>The HTML mixed mode depends on the XML, JavaScript, and CSS modes.</p> | ||
45 | |||
46 | <p><strong>MIME types defined:</strong> <code>text/html</code> | ||
47 | (redefined, only takes effect if you load this parser after the | ||
48 | XML parser).</p> | ||
49 | |||
50 | </body> | ||
51 | </html> | ||