124 lines
4.9 KiB
HTML
124 lines
4.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>CodeMirrorModes Tool</title>
|
|
|
|
<style>:root { color-scheme: light dark; }</style>
|
|
<link rel="stylesheet" href="../../UserInterface/External/CodeMirror/codemirror.css">
|
|
<link rel="stylesheet" href="../../UserInterface/Views/Variables.css">
|
|
<link rel="stylesheet" href="../../UserInterface/Views/CodeMirrorOverrides.css">
|
|
<link rel="stylesheet" href="../../UserInterface/Views/SyntaxHighlightingDefaultTheme.css">
|
|
<link rel="stylesheet" href="../../UserInterface/Views/CodeMirrorLocalOverrideURLMode.css">
|
|
<link rel="stylesheet" href="../../UserInterface/Views/CodeMirrorRegexMode.css">
|
|
<link rel="stylesheet" href="styles.css">
|
|
|
|
<script src="../../UserInterface/External/CodeMirror/codemirror.js"></script>
|
|
<script src="../../UserInterface/External/CodeMirror/clike.js"></script>
|
|
<script src="../../UserInterface/External/CodeMirror/clojure.js"></script>
|
|
<script src="../../UserInterface/External/CodeMirror/coffeescript.js"></script>
|
|
<script src="../../UserInterface/External/CodeMirror/css.js"></script>
|
|
<script src="../../UserInterface/External/CodeMirror/css.js"></script>
|
|
<script src="../../UserInterface/External/CodeMirror/htmlmixed.js"></script>
|
|
<script src="../../UserInterface/External/CodeMirror/javascript.js"></script>
|
|
<script src="../../UserInterface/External/CodeMirror/javascript.js"></script>
|
|
<script src="../../UserInterface/External/CodeMirror/jsx.js"></script>
|
|
<script src="../../UserInterface/External/CodeMirror/livescript.js"></script>
|
|
<script src="../../UserInterface/External/CodeMirror/sass.js"></script>
|
|
<script src="../../UserInterface/External/CodeMirror/sql.js"></script>
|
|
<script src="../../UserInterface/External/CodeMirror/xml.js"></script>
|
|
<script src="../../UserInterface/Views/CodeMirrorLocalOverrideURLMode.js"></script>
|
|
<script src="../../UserInterface/Views/CodeMirrorRegexMode.js"></script>
|
|
</head>
|
|
<body>
|
|
<h1>Debug CodeMirrorModes</h1>
|
|
|
|
<!-- Controls -->
|
|
<select id="mode">
|
|
<optgroup label="Web Inspector">
|
|
<option>text/x-local-override-url</option>
|
|
<option>text/x-regex</option>
|
|
</optgroup>
|
|
<optgroup label="Web">
|
|
<option>text/css</option>
|
|
<option>text/html</option>
|
|
<option>text/javascript</option>
|
|
<option>text/plain</option>
|
|
<option>text/xml</option>
|
|
</optgroup>
|
|
<optgroup id="extra-group" label="Extra Modes"></optgroup>
|
|
</select>
|
|
<button id="save-as-url">Save URL</button>
|
|
<br><br>
|
|
|
|
<!-- Editor -->
|
|
<textarea id="code" name="code"></textarea>
|
|
|
|
<script>
|
|
const modeSelect = document.getElementById("mode");
|
|
let cm = CodeMirror.fromTextArea(document.getElementById("code"), {lineNumbers: true});
|
|
|
|
function update() {
|
|
let mode = modeSelect.value;
|
|
cm.setOption("mode", mode);
|
|
|
|
let content;
|
|
switch (mode) {
|
|
case "text/x-local-override-url":
|
|
content = "http://example.com/path/?query#frag";
|
|
break;
|
|
case "text/x-regex":
|
|
content = "^\\d{2,3}.\\.*?(abc|[A-Z_])+\\1zzz$";
|
|
break;
|
|
default:
|
|
content = cm.getValue() || "";
|
|
break;
|
|
}
|
|
cm.setValue(content);
|
|
}
|
|
|
|
// Mode picker.
|
|
modeSelect.addEventListener("change", (event) => { update(); });
|
|
|
|
// Fill in additional options dynamically.
|
|
const optgroup = document.getElementById("extra-group");
|
|
let knownModes = new Set(Array.from(modeSelect.options).map((x) => x.value));
|
|
let extraModes = Object.keys(CodeMirror.mimeModes).sort();
|
|
for (let mode of extraModes) {
|
|
if (knownModes.has(mode))
|
|
continue;
|
|
knownModes.add(mode);
|
|
optgroup.appendChild(document.createElement("option")).textContent = mode;
|
|
}
|
|
|
|
// Save as URL button.
|
|
document.getElementById("save-as-url").addEventListener("click", function(event) {
|
|
let mode = modeSelect.value;
|
|
let content = cm.getValue();
|
|
window.location.search = `?mode=${encodeURIComponent(mode)}&content=${encodeURIComponent(content)}`;
|
|
});
|
|
|
|
// Initial content.
|
|
update();
|
|
|
|
// Restore better initial value from query string.
|
|
(function() {
|
|
let queryParams = {};
|
|
if (window.location.search.length > 0) {
|
|
let searchString = window.location.search.substring(1);
|
|
let groups = searchString.split("&");
|
|
for (let i = 0; i < groups.length; ++i) {
|
|
let pair = groups[i].split("=");
|
|
queryParams[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
|
|
}
|
|
}
|
|
if (queryParams.mode) {
|
|
modeSelect.value = queryParams.mode;
|
|
cm.setOption("mode", queryParams.mode);
|
|
}
|
|
if (queryParams.content)
|
|
cm.setValue(queryParams.content);
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|