kindwolf.org Git repositories codemirror-mode-ipaddr / master index.html
master

Tree @master (Download .tar.gz)

index.html @masterraw · history · blame

<!doctype html>

<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>CodeMirror IP addresses (ipaddr) mode</title>
		<link
			rel="stylesheet"
			href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/codemirror.min.css"
			integrity="sha512-xIf9AdJauwKIVtrVRZ0i4nHP61Ogx9fSRAkCLecmE2dL/U8ioWpDvFCAy4dcfecN72HHB9+7FfQj3aiO68aaaw=="
			crossorigin="anonymous"
			referrerpolicy="no-referrer" />
		<style>
			.CodeMirror {
				border-top: 1px solid black;
				border-bottom: 1px solid black;
				height: 100%;
			}
			td > .CodeMirror {
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<h1>CodeMirror IP addresses (ipaddr) mode</h1>
		<p>
			This is a <a href="https://codemirror.net/">CodeMirror</a> mode that brings
			syntax highlighting for IP addresses.
		</p>
		<h2 id="h2mime">MIME types defined</h2>
		<p>
			<ul>
				<li>text/x-ip-address (default)</li>
				<li>text/x-ipv4-address (consider IPv6 addresses as errors)</li>
				<li>text/x-ipv6-address (consider IPv4 addresses as errors)</li>
			</ul>
		</p>

		<h2 id="h2formats">Supported formats</h2>
		<table>
			<thead>
				<tr>
					<th></th>
					<th>IPv6</th>
					<th>IPv4</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Addresses</td>
					<td><textarea data-mime="text/x-ipv6-address">2a01:7c8:aab0:26e:5054:ff:fe3a:8388</textarea></td>
					<td><textarea data-mime="text/x-ipv4-address">149.210.142.219</textarea></td>
				</tr>
				<tr>
					<td>CIDR</td>
					<td><textarea data-mime="text/x-ipv6-address">2a01:7c8::/32</textarea></td>
					<td><textarea data-mime="text/x-ipv4-address">149.210.128.0/17</textarea></td>
				</tr>
				<tr>
					<td>Ranges</td>
					<td><textarea data-mime="text/x-ipv6-address">2a01:07c8::-2a01:07c8:ffff:ffff:ffff:ffff:ffff:ffff</textarea></td>
					<td><textarea data-mime="text/x-ipv4-address">149.210.128.0-149.210.255.255</textarea></td>
				</tr>
				<tr>
					<td>Dual addresses</td>
					<td colspan="2"><textarea data-mime="text/x-ipv6-address">2a01:7c8:aab0:26e:5054:ff:1.2.3.4</textarea></td>
				</tr>
			</tbody>
		</table>

		<h2 id="h2options">Options:</h2>
		<p>
			<ul>
				<li>ipv4_ranges: boolean: accept IPv4 ranges, e.g. 10.0.0.0-10.255.255.255</li>
				<li>ipv6_ranges: boolean: accept IPv6 ranges, e.g. 2001:0db8::-2001:0db8:ffff::</li>
				<li>ipv4_cidr: boolean: accept IPv4 CIDR suffixes, e.g. 10.0.0.0/8</li>
				<li>ipv6_cidr: boolean: accept IPv6 CIDR suffixes, e.g. 2001:db8::/32</li>
				<li>strict: boolean: strict mode</li>
			</ul>
			All options above default to true.
		</p>

		<h2 id="h2strict">Strict mode</h2>
		If strict mode is enabled, only one value (address, range or CIDR) will be parsed; everything else will be marked as erroneous.
		Example with an IP range:
		<textarea data-mime="text/x-ip-address">
127.0.0.1-127.255.255.255 127.0.0.2
127.0.0.3 ::1
Everything on other lines
is considered erroneous</textarea>
		If strict mode is disabled, codemirror-mode-ipaddr parses and highlights all IP addresses in the text editor:
		<textarea data-mime="text/x-ip-address" data-strict="false">
127.0.0.1-127.255.255.255 127.0.0.2
127.0.0.3 ::1
Spaces and contents other than IP addresses
are still considered erroneous</textarea>

		<h2 id="h2tests">Various tests</h2>
		<p>
			IPv4-only textarea
		</p>
		<textarea data-mime="text/x-ipv4-address" data-strict="false">
Correct addresses, CIDR and ranges:
127.0.0.1 149.210.142.219
   10.0.0.0/8      10.0.0.0-10.255.255.255
 172.16.0.0/12   172.16.0.0-172.31.255.255
192.168.0.0/16  192.168.0.0-192.168.255.255
 100.64.0.0/10   100.64.0.0-100.127.255.255
149.210.128.0/17

Erroneous addresses:
256.255.255.255
255.256.255.255
255.255.256.255
255.255.255.256
256.255.255.256
255.256.256.255
256.255.256.255
255.256.255.256

Erroneous CIDR: 1.2.3.45/33
Erroneous ranges:
192.256.0.0-192.168.255.255
192.168.0.0-192.256.255.255</textarea>
		<p>
			IPv6-only textarea
		</p>
		<textarea data-mime="text/x-ipv6-address" data-strict="false">
Correct addresses, CIDR and ranges
2001:db8:3333:4444:5555:6666:7777:8888
2001:db8:3333:4444:CCCC:DDDD:EEEE:FFFF
2001:db8::
::1234:5678
2001:db8::1234:5678
2001:0db8:0001:0000:0000:0ab9:C0A8:0102
2001:db8:1::ab9:C0A8:102
::

2001:0db8:0000:0000:0000:0000:0000:0000-2001:0db8:ffff:ffff:ffff:ffff:ffff:ffff
2001:0db8::-2001:0db8:ffff:ffff:ffff:ffff:ffff:ffff

::1
2a01:7c8:aab0:26e:5054:ff:fe3a:8388
2a01:7c8::/32

Incorrect address:
2a01:7c8:aab0:26e:5054:ff:fe3a::

Dual addreses, some of them too long:
2001:db8:3333:4444:5555:6666:1.2.3.4
::11.22.33.44
2001:db8::123.123.123.123
::1234:5678:91.123.4.56
::1234:5678:1.2.3.4
2001:db8::1234:5678:5.6.7.8

b1::2.7.2.8
b1:b2::2.7.2.8
b1:b2:b3::2.7.2.8
b1:b2:b3:b4::2.7.2.8
b1:b2:b3:b4:b5::2.8.2.9
::b3:b4:b5:b6:b7:2.8.2.9
::b3:b4:b5:b6:2.7.2.8
::b4:b5:b6:2.7.2.8
::b5:b6:2.7.2.8
::b6:2.7.2.8
::2.7.2.8</textarea>
		<p>
			IPv4+IPv6 textarea:
		</p>
	<textarea data-mime="text/x-ip-address" data-strict="false">
1.2.3.4
2001::1:2:3:4</textarea>
		<script
			src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/codemirror.min.js"
			integrity="sha512-ZTpbCvmiv7Zt4rK0ltotRJVRaSBKFQHQTrwfs6DoYlBYzO1MA6Oz2WguC+LkV8pGiHraYLEpo7Paa+hoVbCfKw=="
			crossorigin="anonymous"
			referrerpolicy="no-referrer">
		</script>
		<script src="src/ipaddr.js"></script>
		<script>
			function demo(textarea) {
				var mime = textarea.attributes['data-mime'];
				if (!mime) return;

				var conf = {
					lineNumbers: textarea.value.split('\n').length > 1,
					indentWithTabs: true,
					showCursorWhenSelecting: true,
					mode: { name: mime.value },
				};
				if (textarea.attributes['data-strict']) conf.mode.strict = false;
				CodeMirror.fromTextArea(textarea, conf);
			}
			var i, textareas = document.getElementsByTagName('textarea');
			for (i = 0; i < textareas.length; ++ i) demo(textareas[i]);
		</script>
	</body>
</html>