From: Ardis Lu <ardisglu@gmail.com>
Date: Thu, 15 Aug 2024 05:39:49 +0000 (-0700)
Subject: Add button to delete all lines in the Solidity code that do not contain events
X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=58233d9ccd2cdeab0af550ed96dbe6d7688fc283;p=event-hashes

Add button to delete all lines in the Solidity code that do not contain events

This button is useful for identifying the original event definitions and for making permalinks smaller.
---

diff --git a/index.html b/index.html
index 7ff7775..0a2f7db 100644
--- a/index.html
+++ b/index.html
@@ -204,6 +204,10 @@
         cursor: help;
       }
     }
+
+    #clear-code {
+      display: none;
+    }
   </style>
 </head>
 
@@ -222,6 +226,15 @@
           <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
         </svg>
       </button>
+      <button id="clear-code" title="Delete all lines that do not contain events" aria-label="Delete all lines that do not contain events">
+        <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M11 12H3" />
+          <path d="M16 6H3" />
+          <path d="M16 18H3" />
+          <path d="m19 10-4 4" />
+          <path d="m15 10 4 4" />
+        </svg>
+      </button>
     </div>
     <textarea id="code" placeholder="event Transfer(address indexed _from, address indexed _to, uint256 _value)" autocomplete="off" spellcheck="false"></textarea>
 
@@ -275,8 +288,10 @@
       check: '<polyline points="20 6 9 17 4 12"/>',
       permalink: '<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>',
       download: '<path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/><path d="M12 18v-6"/><path d="m9 15 3 3 3-3"/>',
-      clipboard: '<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>'
+      clipboard: '<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>',
+      clear: '<path d="M11 12H3"/><path d="M16 6H3"/><path d="M16 18H3"/><path d="m19 10-4 4"/><path d="m15 10 4 4"/>'
     }
+    const originalEvents = [];
 
     async function textToGzipBase64(text) {
       const stream = new Blob([text]).stream();
@@ -338,6 +353,7 @@
     }
 
     function getEvents(code) {
+      originalEvents.length = 0;
       const events = [];
       let position = 0;
       let strict = false;
@@ -362,6 +378,7 @@
           const lookaheadLine = code.substring(start, end + 1).replaceAll('\n', '');
           try {
             const normalizedEvent = normalizeEvent(lookaheadLine, strict);
+            originalEvents.push(lookaheadLine);
             events.push(normalizedEvent);
           }
           catch { }
@@ -369,6 +386,7 @@
         }
         try {
           const normalizedEvent = normalizeEvent(line, strict);
+          originalEvents.push(line);
           events.push(normalizedEvent);
         }
         catch {
@@ -403,6 +421,12 @@
         noEventsMessage.style.setProperty('display', 'revert');
         return;
       }
+      if (textarea.value.length > originalEvents.join('\n').length) {
+        document.querySelector('#clear-code').style.display = 'unset';
+      }
+      else {
+        document.querySelector('#clear-code').style.display = 'none';
+      }
 
       for (const event of uniqueEvents) {
         const byteArray = keccak256(encoder.encode(event));
@@ -437,6 +461,13 @@
       debounceButton(e.target, icons['permalink'], 'Copy permalink to clipboard');
     });
 
+    document.querySelector('#clear-code').addEventListener('click', e => {
+      textarea.select();
+      // Using deprecated function is required to preserve undo/redo behavior
+      document.execCommand('insertText', false, originalEvents.join('\n').replaceAll(/\s{2,}/g, ' ')); // .replaceAll flattens multi-line definitions
+      e.target.style.display = 'none';
+    });
+
     document.querySelector('#download-table').addEventListener('click', e => {
       const csv = '"' + table.innerText.replaceAll('"', '""').replaceAll('\t', '","').replaceAll('\n', '"\n"') + '"';
       const file = new File([csv], `Event_Hashes_${Date.now()}`, { type: 'text/csv' });