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