Provide a way to paste/edit existing CIDR notation

Author: ryuheechul

src/components/CIDR.svelte

@@ -48,7 +48,7 @@ Visualize CIDR
 </script>
 
 <div class="sm:mx--6">
-  <IPv4 bind:address bind:prefix>
+  <IPv4 bind:address bind:prefix {renderedAddress}>
     <IPv4Network
       slot="extra-bits"
       bind:address

src/components/blend/IPv4.svelte

@@ -5,6 +5,7 @@ Represent IPv4 address including prefix notation
   import BitHex from './BitHex.svelte';
   import IPv4Prefix from './IPv4Prefix.svelte';
   import InputNumberLocaled from '../parts/InputNumberLocaled.svelte';
+  import IPv4Input from '../parts/IPv4Input.svelte';
   import { assemble, disassemble, calcHosts } from '@lib/ipv4';
 
   const min = 0;
@@ -14,6 +15,7 @@ Represent IPv4 address including prefix notation
 
 <script lang="ts">
   export let address = 0xc0a80000;
+  export let renderedAddress = 'placeholder';
   export let prefix = 16;
 
   // break down into 4 octets
@@ -29,10 +31,14 @@ Represent IPv4 address including prefix notation
   };
 
   $: addresses = calcHosts(prefix) + 2;
+
+  let showingWholeInput = false;
 </script>
 
+<IPv4Input bind:address bind:prefix {renderedAddress} bind:show={showingWholeInput} />
+
 <!-- for xs only -->
-<div class="sm:hidden items-end mb-2 flex">
+<div class="sm:hidden items-end mb-2 flex" class:invisible={showingWholeInput}>
   <div class="grow" />
   <div class="flex text-2xl lt-xs:text-lg mr-2 items-center">
     <div>
@@ -70,7 +76,7 @@ Represent IPv4 address including prefix notation
 <div class="flex lt-sm:overflow-x-auto px-2 mx--2">
   <div class="grow" />
   <div>
-    <div class="flex lt-sm:hidden">
+    <div class="flex lt-sm:hidden" class:invisible={showingWholeInput}>
       {#each octets as octet, idx}
         <div class="flex-1 flex group text-2xl mb-2 relative">
           <!-- adding max-w-[[n]rem] for Firefox -->
@@ -114,7 +120,7 @@ Represent IPv4 address including prefix notation
     <div class="grow" />
   </div>
   <div class="flex flex-col lt-sm:hidden">
-    <div class="lt-sm:hidden mb-2">
+    <div class="lt-sm:hidden mb-2" class:invisible={showingWholeInput}>
       <InputNumberLocaled
         min={0}
         max={31}

src/components/parts/IPv4Input.svelte

@@ -0,0 +1,83 @@
+<!-- @component
+A convenient addition to allow pasting/editing as whole
+-->
+<script context="module" lang="ts">
+  import { pattern, parseFrom } from '@lib/ipv4';
+</script>
+
+<script lang="ts">
+  export let address = 0xc0a80000;
+  export let renderedAddress = 'placeholder';
+  export let prefix = 16;
+  export let show = false;
+
+  $: placeholder = `${renderedAddress}/${prefix}`;
+  $: inputAsWhole = placeholder;
+
+  let input: HTMLInputElement;
+  let button: HTMLButtonElement;
+
+  const selectText = (e: Event) => {
+    const elm = e.target as HTMLInputElement;
+    elm.select();
+  };
+
+  const evaluate = () => {
+    const { address: addr, prefix: pref } = parseFrom(inputAsWhole);
+    const isValid = addr > 0 && pref > 0;
+
+    if (!isValid) {
+      return;
+    }
+
+    address = addr;
+    prefix = pref;
+  };
+
+  const onBtnClick = () => {
+    show = true;
+    setTimeout(() => {
+      if (input) input.focus();
+    }, 0);
+  };
+
+  const onInputBlur = (e: Event) => {
+    // to ignore when window itself get blurred
+    if (document.activeElement === e.target) {
+      return;
+    }
+
+    show = false;
+    setTimeout(() => {
+      if (button) button.focus();
+      inputAsWhole = placeholder;
+    }, 0);
+  };
+</script>
+
+<div class="relative">
+  <div class="absolute text-gray-600 left-5 top-2 lt-sm:top-5 lt-sm:left-0 lt-xs:top--1">
+    <button
+      class="i-bi-pencil ml-1"
+      on:click={onBtnClick}
+      bind:this={button}
+      class:invisible={show}
+    />
+  </div>
+  <div
+    class="absolute font-mono text-xl lt-sm:text-2xl lt-xs:text-lg text-gray-600 left-11 top-1 lt-sm:top-3 lt-xs:top-4 lt-sm:left-9 lt-xs:left-6 z-30 w-[88%]"
+    class:hidden={!show}
+  >
+    <input
+      class="invalid:bg-yellow-100 w-full px-1 text-center rounded border border-gray sm:tracking-widest"
+      type="text"
+      bind:this={input}
+      bind:value={inputAsWhole}
+      {placeholder}
+      {pattern}
+      on:focus={selectText}
+      on:change={evaluate}
+      on:blur={onInputBlur}
+    />
+  </div>
+</div>

src/components/parts/InputNumberLocaled.svelte

@@ -66,7 +66,7 @@ Two things are enhanced:
   const onBlur = (e: Event) => {
     whenFocused = false;
 
-    // to ignore window itself get blurred - somehow not progressing to below prevents element's being invisible
+    // to ignore when window itself get blurred - somehow not progressing to below prevents element's being invisible
     if (document.activeElement === e.target) {
       return;
     }

src/lib/ipv4.ts

@@ -99,3 +99,26 @@ export const calcIP = (address: number, prefix: number): CalcIPResult => {
 
 export const newAddressFrom = (address: number, mask: number, network: number) =>
   ((address & ~mask) >>> 0) + ((network & mask) >>> 0);
+
+const patternToMatch = /^([0-9]{1,3}).([0-9]{1,3}).([0-9]{1,3}).([0-9]{1,3})\/([0-9]{1,2})$/;
+// thanks to https://stackoverflow.com/a/36760050/1570165
+const patternToTest = /^((25[0-5]|(2[0-4]|1\d|[1-9]|)\d)\.?\b){4}\/(3[0-2]|[1-2][0-9]|[0-9])$/;
+// to be inserted as https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern
+export const pattern = patternToTest.toString().slice(1, -1);
+
+const failed = { address: -1, prefix: -1 };
+
+export const parseFrom = (text: string) => {
+  const passed = patternToTest.test(text);
+
+  if (!passed) return failed;
+
+  const matched = text.match(patternToMatch);
+
+  if (!matched) return failed;
+
+  const [a, b, c, d, prefix] = matched.slice(1).map((n) => Number(n));
+  const address = assemble([a, b, c, d]);
+
+  return { address, prefix };
+};

test/lib/ipv4.test.ts

@@ -1,5 +1,53 @@
 import { expect, describe, it } from 'vitest';
-import { calcHosts, calcIP, assemble } from '../../src/lib/ipv4';
+import { calcHosts, calcIP, assemble, parseFrom } from '../../src/lib/ipv4';
+
+describe('parseFrom', () => {
+  it('1.2.3.4/5', () => {
+    expect(parseFrom('1.2.3.4/5')).toEqual({ address: assemble([1, 2, 3, 4]), prefix: 5 });
+  });
+
+  it('255.255.255.255/32', () => {
+    expect(parseFrom('255.255.255.255/32')).toEqual({
+      address: assemble([255, 255, 255, 255]),
+      prefix: 32,
+    });
+  });
+
+  it('255.255.255.255/33', () => {
+    expect(parseFrom('255.255.255.255/33')).toEqual({
+      address: -1,
+      prefix: -1,
+    });
+  });
+
+  it('256.255.255.255/32', () => {
+    expect(parseFrom('256.255.255.255/32')).toEqual({
+      address: -1,
+      prefix: -1,
+    });
+  });
+
+  it('255.256.255.255/32', () => {
+    expect(parseFrom('255.256.255.255/32')).toEqual({
+      address: -1,
+      prefix: -1,
+    });
+  });
+
+  it('255.255.256.255/32', () => {
+    expect(parseFrom('255.255.256.255/32')).toEqual({
+      address: -1,
+      prefix: -1,
+    });
+  });
+
+  it('255.255.255.256/32', () => {
+    expect(parseFrom('255.255.255.256/32')).toEqual({
+      address: -1,
+      prefix: -1,
+    });
+  });
+});
 
 describe('assemble', () => {
   it('0.0.0.0', () => {