feat: highlight issues in editor

Author: drainpixie

website/src/index.html

@@ -33,10 +33,12 @@ <h2>Install</h2>
       </div>
       <h2>Try it</h2>
       <p>Paste or type some text below.</p>
-      <div>
+      <div id="editor">
         <textarea id="input" rows="8">
 This is very unique and literally perfect.</textarea
         >
+        <!-- prettier-ignore -->
+        <div id="preview">This is <span class="highlight" title="Comparison of an uncomparable: 'very unique' is not comparable.">very unique</span> and literally perfect.</div>
       </div>
 
       <h3>Issues</h3>
@@ -56,9 +58,39 @@ <h3>Issues</h3>
     <%- include('partials/footer.ejs') %>
 
     <script>
+      const baseApiURL = "<%= apiURL %>";
+
       const input = document.getElementById("input");
       const issues = document.getElementById("issues");
-      const baseApiURL = "<%= apiURL %>";
+      const preview = document.getElementById("preview");
+
+      function highlight(text, issues) {
+        const spans = [...issues].sort((a, b) => a.span[0] - b.span[0]);
+
+        let result = "";
+        let cursor = 0;
+
+        for (const { span, message } of spans) {
+          let [start, end] = span;
+
+          start--;
+          end--;
+
+          if (start < cursor) {
+            continue;
+          }
+
+          result += text.slice(cursor, start);
+          result += `<span class="highlight" title="${message}">`;
+          result += text.slice(start, end);
+          result += `</span>`;
+
+          cursor = end;
+        }
+
+        result += text.slice(cursor);
+        return result;
+      }
 
       function debounce(fn, delay) {
         let timer;
@@ -72,6 +104,8 @@ <h3>Issues</h3>
       async function check() {
         if (input.value.trim() === "") {
           issues.innerHTML = "<li>No issues found.</li>";
+          preview.textContent = input.value;
+
           return;
         }
 
@@ -100,8 +134,14 @@ <h3>Issues</h3>
           li.innerHTML = `<em>${issue.check_path}</em> ${issue.message}`;
           issues.appendChild(li);
         }
+
+        preview.innerHTML = highlight(input.value, json.data);
       }
 
+      input.addEventListener(
+        "input",
+        () => (preview.textContent = input.value),
+      );
       input.addEventListener("input", debounce(check, 300));
     </script>
   </body>

website/src/styles.css

@@ -1,25 +1,41 @@
 @import "./reset.css";
 
-body {
-  font-family:
-    "Georgia", "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
-  line-height: 1.65;
-  color: #171717;
-  background-color: #fafafa;
+:root {
+  --bg: #fafafa;
+  --fg: #171717;
+  --serif:
+    Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
+  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  --focus-ring: 0 0 0 2px #4f46e5;
 }
 
-h1,
-h2,
-h3 {
-  font-family: "Merriweather", "Georgia", serif;
+body {
+  font-family: var(--serif);
+  line-height: 1.65;
+  color: var(--fg);
+  background-color: var(--bg);
 }
 
-main {
+main,
+footer {
   max-width: 42rem;
   margin: 4rem auto;
   padding: 0 1.5rem;
 }
 
+footer {
+  margin-top: 0;
+  padding-bottom: 2rem;
+  text-align: center;
+}
+
+h1,
+h2,
+h3 {
+  font-family: "Merriweather", Georgia, serif;
+  font-weight: 600;
+}
+
 h1 {
   font-size: 2.25rem;
   line-height: 2.5rem;
@@ -28,19 +44,12 @@ h1 {
 
 h2 {
   font-size: 1.5rem;
-  font-weight: 600;
-}
-
-h3 {
-  font-weight: 600;
 }
 
 p {
   font-size: 1.125rem;
   color: #404040;
-
-  margin-top: 0.3rem !important;
-  margin-bottom: 0.8rem !important;
+  margin: 0.3rem 0 0.8rem !important;
 }
 
 p.sm {
@@ -54,55 +63,43 @@ a {
 }
 
 a:hover {
-  color: #171717;
+  color: var(--fg);
+}
+
+em {
+  font-style: italic;
+  color: #2c2c2c;
+  margin-right: 0.05rem;
 }
 
 pre {
   font-size: 0.875rem;
   margin-top: 0.75rem;
+  padding: 1rem;
   background-color: #fff;
   border: 1px solid #d4d4d4;
-  color: #171717;
-  padding: 1rem;
   border-radius: 0.5rem;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
   line-height: 1.5rem;
   white-space: pre-wrap;
   word-break: break-word;
   cursor: pointer;
   transition: border-color 0.2s;
+  color: var(--fg);
+  font-family: var(--mono);
 }
 
 pre:hover {
   border-color: #a3a3a3;
 }
 
-pre:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #4f46e5;
-}
-
-pre:hover {
-  border-color: #a3a3a3;
-}
-
-pre:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #4f46e5;
-}
-
 code:not(pre code) {
   padding: 0.1em 0.2em;
   border-radius: 4px;
-  font-family: monospace;
   font-size: 0.75em;
   background-color: #fff;
   border: 1px solid #d4d4d4;
-  color: #171717;
-}
-
-code {
-  font-family: inherit;
+  font-family: var(--mono);
+  color: var(--fg);
 }
 
 code .blue {
@@ -126,23 +123,52 @@ code .amber {
   color: #f59e0b;
 }
 
-textarea {
+textarea,
+#preview {
   width: 100%;
-  border: 1px solid #d4d4d4;
-  border-radius: 0.5rem;
   padding: 1rem;
-  font-family: Georgia, Cambria, "Times New Roman", Times, serif;
   line-height: 1.5rem;
+  font-size: 1rem;
+  border-radius: 0.5rem;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  font-family: var(--serif);
 }
 
+textarea {
+  border: 1px solid #d4d4d4;
+  resize: vertical;
+  caret-color: black;
+  color: transparent;
+  z-index: 100;
+}
+
+textarea::selection {
+  background: rgba(251, 255, 36, 0.6);
+  color: transparent;
+}
+
+pre:focus,
 textarea:focus {
   outline: none;
-  box-shadow: 0 0 0 2px #4f46e5;
+  box-shadow: var(--focus-ring);
 }
 
-footer {
-  max-width: 42rem;
-  margin: 0 auto;
-  padding: 0 1.5rem 2rem;
-  text-align: center;
+#editor {
+  position: relative;
+  width: 100%;
+}
+
+#preview {
+  position: absolute;
+  top: 0;
+  left: 0;
+  border: 1px solid transparent;
+  pointer-events: none;
+}
+
+.highlight {
+  background-color: #fbff24;
+  color: var(--fg);
 }