2 files changed, 131 insertions, 0 deletions
diff --git a/js/codemirror/mode/htmlmixed/htmlmixed.js b/js/codemirror/mode/htmlmixed/htmlmixed.js
new file mode 100644
index 00000000..fa30a13f
--- /dev/null
+++ b/js/codemirror/mode/htmlmixed/htmlmixed.js
@@ -0,0 +1,79 @@
+CodeMirror.defineMode("htmlmixed", function(config, parserConfig) {
+  var htmlMode = CodeMirror.getMode(config, {name: "xml", htmlMode: true});
+  var jsMode = CodeMirror.getMode(config, "javascript");
+  var cssMode = CodeMirror.getMode(config, "css");
+  function html(stream, state) {
+    var style = htmlMode.token(stream, state.htmlState);
+    if (style == "tag" && stream.current() == ">" && state.htmlState.context) {
+      if (/^script$/i.test(state.htmlState.context.tagName)) {
+        state.token = javascript;
+        state.localState = jsMode.startState(htmlMode.indent(state.htmlState, ""));
+        state.mode = "javascript";
+      }
+      else if (/^style$/i.test(state.htmlState.context.tagName)) {
+        state.token = css;
+        state.localState = cssMode.startState(htmlMode.indent(state.htmlState, ""));
+        state.mode = "css";
+      }
+    }
+    return style;
+  }
+  function maybeBackup(stream, pat, style) {
+    var cur = stream.current();
+    var close = cur.search(pat);
+    if (close > -1) stream.backUp(cur.length - close);
+    return style;
+  }
+  function javascript(stream, state) {
+    if (stream.match(/^<\/\s*script\s*>/i, false)) {
+      state.token = html;
+      state.curState = null;
+      state.mode = "html";
+      return html(stream, state);
+    }
+    return maybeBackup(stream, /<\/\s*script\s*>/,
+                       jsMode.token(stream, state.localState));
+  }
+  function css(stream, state) {
+    if (stream.match(/^<\/\s*style\s*>/i, false)) {
+      state.token = html;
+      state.localState = null;
+      state.mode = "html";
+      return html(stream, state);
+    }
+    return maybeBackup(stream, /<\/\s*style\s*>/,
+                       cssMode.token(stream, state.localState));
+  }
+  return {
+    startState: function() {
+      var state = htmlMode.startState();
+      return {token: html, localState: null, mode: "html", htmlState: state};
+    },
+    copyState: function(state) {
+      if (state.localState)
+        var local = CodeMirror.copyState(state.token == css ? cssMode : jsMode, state.localState);
+      return {token: state.token, localState: local, mode: state.mode,
+              htmlState: CodeMirror.copyState(htmlMode, state.htmlState)};
+    },
+    token: function(stream, state) {
+      return state.token(stream, state);
+    },
+    indent: function(state, textAfter) {
+      if (state.token == html || /^\s*<\//.test(textAfter))
+        return htmlMode.indent(state.htmlState, textAfter);
+      else if (state.token == javascript)
+        return jsMode.indent(state.localState, textAfter);
+      else
+        return cssMode.indent(state.localState, textAfter);
+    },
+    electricChars: "/{}:"
+  }
+});
+CodeMirror.defineMIME("text/html", "htmlmixed");
diff --git a/js/codemirror/mode/htmlmixed/index.html b/js/codemirror/mode/htmlmixed/index.html
new file mode 100644
index 00000000..6d62b355
--- /dev/null
+++ b/js/codemirror/mode/htmlmixed/index.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<html>
+  <head>
+    <title>CodeMirror 2: HTML mixed mode</title>
+    <link rel="stylesheet" href="../../lib/codemirror.css">
+    <script src="../../lib/codemirror.js"></script>
+    <script src="../xml/xml.js"></script>
+    <script src="../javascript/javascript.js"></script>
+    <script src="../css/css.js"></script>
+    <link rel="stylesheet" href="../../theme/default.css">
+    <script src="htmlmixed.js"></script>
+    <link rel="stylesheet" href="../../css/docs.css">
+    <style>.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</style>
+  </head>
+  <body>
+    <h1>CodeMirror 2: HTML mixed mode</h1>
+    <form><textarea id="code" name="code">
+<html style="color: green">
+  <!-- this is a comment -->
+  <head>
+    <title>Mixed HTML Example</title>
+    <style type="text/css">
+      h1 {font-family: comic sans; color: #f0f;}
+      div {background: yellow !important;}
+      body {
+        max-width: 50em;
+        margin: 1em 2em 1em 5em;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Mixed HTML Example</h1>
+    <script>
+      function jsFunc(arg1, arg2) {
+        if (arg1 && arg2) document.body.innerHTML = "achoo";
+      }
+    </script>
+  </body>
+</html>
+</textarea></form>
+    <script>
+      var editor = CodeMirror.fromTextArea(document.getElementById("code"), {mode: "text/html", tabMode: "indent"});
+    </script>
+    <p>The HTML mixed mode depends on the XML, JavaScript, and CSS modes.</p>
+    <p><strong>MIME types defined:</strong> <code>text/html</code>
+    (redefined, only takes effect if you load this parser after the
+    XML parser).</p>
+  </body>
+</html>

diff --git a/js/codemirror/mode/htmlmixed/htmlmixed.js b/js/codemirror/mode/htmlmixed/htmlmixed.js new file mode 100644 index 00000000..fa30a13f --- /dev/null +++ b/js/codemirror/mode/htmlmixed/htmlmixed.js
@@ -0,0 +1,79 @@
	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(/^<\/\sscript\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, /<\/\sscript\s>/,
	36	jsMode.token(stream, state.localState));
	37	}
	38	function css(stream, state) {
	39	if (stream.match(/^<\/\sstyle\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, /<\/\sstyle\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	electricChars: "/{}:"
	76	}
	77	});
	78
	79	CodeMirror.defineMIME("text/html", "htmlmixed");


diff --git a/js/codemirror/mode/htmlmixed/index.html b/js/codemirror/mode/htmlmixed/index.html new file mode 100644 index 00000000..6d62b355 --- /dev/null +++ b/js/codemirror/mode/htmlmixed/index.html
@@ -0,0 +1,52 @@
	1	<!doctype html>
	2	<html>
	3	<head>
	4	<title>CodeMirror 2: 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	<link rel="stylesheet" href="../../theme/default.css">
	11	<script src="htmlmixed.js"></script>
	12	<link rel="stylesheet" href="../../css/docs.css">
	13	<style>.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</style>
	14	</head>
	15	<body>
	16	<h1>CodeMirror 2: HTML mixed mode</h1>
	17	<form><textarea id="code" name="code">
	18	<html style="color: green">
	19	<!-- this is a comment -->
	20	<head>
	21	<title>Mixed HTML Example</title>
	22	<style type="text/css">
	23	h1 {font-family: comic sans; color: #f0f;}
	24	div {background: yellow !important;}
	25	body {
	26	max-width: 50em;
	27	margin: 1em 2em 1em 5em;
	28	}
	29	</style>
	30	</head>
	31	<body>
	32	<h1>Mixed HTML Example</h1>
	33	<script>
	34	function jsFunc(arg1, arg2) {
	35	if (arg1 && arg2) document.body.innerHTML = "achoo";
	36	}
	37	</script>
	38	</body>
	39	</html>
	40	</textarea></form>
	41	<script>
	42	var editor = CodeMirror.fromTextArea(document.getElementById("code"), {mode: "text/html", tabMode: "indent"});
	43	</script>
	44
	45	<p>The HTML mixed mode depends on the XML, JavaScript, and CSS modes.</p>
	46
	47	<p><strong>MIME types defined:</strong> <code>text/html</code>
	48	(redefined, only takes effect if you load this parser after the
	49	XML parser).</p>
	50
	51	</body>
	52	</html>