chore: add apply suggestion, fix on playground

packages/website/src/components/playground.html

@@ -40,13 +40,11 @@ <h2>JavaScript </h2>
             </li>
           </ul>
         </div>
-        <div class="border-[1px] border-slate rounded flex-grow p-2 bg-gray-100 h-[400px]">
+        <div class="border-[1px] border-slate rounded flex-grow p-2 bg-gray-100 h-[400px] overflow-scroll">
           <div id="errors" class="block">
-            HERE
           </div>
-                    <pre id="fixed" class="hidden text-sm">
-                        HERE
-                    </pre>
+          <pre id="fixed" class="hidden text-sm">
+          </pre>
         </div>
       </div>
     </div>

packages/website/src/scripts/playground/app.js

@@ -20,6 +20,10 @@ class App {
       "changeLanguage",
       () => this.handleLanguageChange()
     );
+    this.model.on(
+      "autofixed",
+      () => this.view.codeEditor.setValue(this.model.getCode())
+    );
     this.view.codeEditor.on(
       "change",
       (editor) => this.handleCodeChange(editor)
@@ -37,6 +41,19 @@ class App {
         this.model.setLanguage($tab.dataset.language);
       }
     );
+    this.view.$errors.addEventListener('click', (event) => {
+      const $button = event.target.closest("button");
+      if ($button) {
+        const $li = $button.closest("li");
+        const index = Array.from($li.parentNode.children).indexOf($li);
+        const message = this.model.messages[index];
+        if ($button.textContent.includes("fix")) {
+          this.model.applyFix(message);
+        } else if ($button.textContent.includes("suggestion")) {
+          this.model.applySuggestion(message);
+        }
+      }
+    });
   }
 
   start() {

packages/website/src/scripts/playground/model.js

@@ -2,7 +2,7 @@
  * @import eslint from "eslint";
  * @import {Language} from "./language";
  * @import {RulesRecord, ParserOptions} from "./linter";
- * @typedef {"lint" | "changeLanguage"} EventType
+ * @typedef {"lint" | "changeLanguage" | "autofixed"} EventType
  */
 
 import {
@@ -74,7 +74,8 @@ export class Model {
      */
     this.observers = {
       lint: new Set(),
-      changeLanguage: new Set()
+      changeLanguage: new Set(),
+      autofixed: new Set()
     };
   }
 
@@ -157,6 +158,44 @@ export class Model {
     this.observers[type].forEach((observer) => observer());
   }
 
+  /**
+   *
+   * @param {LintMessage} message
+   */
+  applyFix(message) {
+    const {
+      fix
+    } = message;
+    if (fix) {
+      const code = this.getCode();
+      const [start, end] = fix.range;
+      const fixed = code.slice(0, start) +
+        fix.text +
+        code.slice(end);
+      this.setCode(fixed);
+      this.lint();
+      this.notify('autofixed');
+    }
+  }
+
+  applySuggestion(message) {
+    const {
+      suggestions 
+    } = message;
+    if (suggestions && suggestions.length > 0) {
+      const suggestion = suggestions[0];
+      if (suggestion.fix) {
+        const code = this.getCode();
+        const [start, end] = suggestion.fix.range;
+        const fixed = code.slice(0, start) +
+          suggestion.fix.text +
+          code.slice(end);
+        this.setCode(fixed);
+        this.lint();
+        this.notify('autofixed');
+      }
+    }
+  }
   /**
    * @returns {string}
    */

packages/website/src/scripts/playground/view.js

@@ -43,6 +43,7 @@ export class View {
     );
 
     this.$languageTabs = document.getElementById("language-tabs");
+    this.$errors = document.getElementById("errors");
   }
 
   /**
@@ -72,12 +73,10 @@ export class View {
    * @param {LintMessage[]} messages
    */
   renderErrors(messages) {
-    const $errors = document.getElementById("errors");
-
     const children = messages.
       map((message) => this.lintMessageHTML(message));
 
-    $errors.innerHTML = html`<ul class="text-sm">
+    this.$errors.innerHTML = html`<ul class="text-sm flex flex-col gap-2">
         ${children}
       </ul>`;
 
@@ -106,22 +105,29 @@ export class View {
    * @param {LintMessage} message
    */
   lintMessageHTML({
-    line, column, message, ruleId, fatal
+    line, column, message, ruleId, fatal, fix, suggestions
   }) {
     if (fatal) {
       console.error(message);
       return html`<li class="bg-red-100 text-red-800 px-2 py-1 my-1 rounded">
           ${line}:${column} - ${message}
         </li>`;
     }
-
-    return html`<li class="bg-red-100 text-red-800 px-2 py-1 my-1 rounded">
-        ${line}:${column} - ${escapeHTML(message)}(
-        <a href="/docs/rules/${ruleId.replace(
-          "@html-eslint/",
-          ""
-        )}">${ruleId}</a>
-        )
+    const rule = ruleId.replace(
+      "@html-eslint/",
+      ""
+    )
+    return html`<li class="bg-red-100 text-red-800 px-2 rounded flex items-center">
+        <span class="my-4">
+          <span>${line}:${column} - ${escapeHTML(message)}</span>
+          <a href="/docs/rules/${rule}" class="ml-1 hover:underline">(${rule})</a>
+        </span>
+        <div class="ml-auto mr-0 my-2">
+          ${fix ? html`<button class="bg-accent text-white px-4 py-1 rounded hover:opacity-80 w-max">apply fix</button>` : ""}
+          ${suggestions && suggestions.length > 0 ? html`
+            <button class="bg-accent text-white px-4 py-1 rounded hover:opacity-80 w-max">apply suggestion</button>
+          ` : ""}
+        </div>
       </li>`;
   }
 }