feat(beautify): added buttons to beautify code

technikhil314 · Sep 13, 2024 · 4847c83 · 4847c83
1 parent 7c31bc1
commit 4847c83
Showing 1 changed file with 68 additions and 2 deletions.
diff --git a/pages/v2/index.vue b/pages/v2/index.vue
@@ -16,7 +16,7 @@
       </section>
       <form class="flex flex-col w-full gap-4" @submit="checkForm">
         <section class="flex w-full gap-4 editor-wrapper">
-          <div class="flex flex-col w-1/2 gap-4">
+          <div class="relative flex flex-col w-1/2 gap-4">
             <label for="lhsLabel" class="relative">
               <input
                 id="lhsLabel"
@@ -33,8 +33,41 @@
               name="lhs"
               class="h-screen p-2 border border-gray-600 rounded-md editor"
             ></div>
+            <button
+              aria-label="Beautify entered text"
+              type="button"
+              title="Beautify"
+              class="
+                absolute
+                p-2
+                transition-all
+                rounded-sm
+                top-16
+                right-3
+                aspect-square
+                dark:hover:bg-slate-600 dark:bg-slate-600/50
+                hover:bg-slate-300
+                bg-gray-300/50
+              "
+              @click="
+                lhsEditor.trigger('editor', 'editor.action.formatDocument')
+              "
+            >
+              <svg
+                viewBox="0 0 15 15"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                width="15"
+                height="15"
+              >
+                <path
+                  d="M0 7.5h2m13 0h-2m-8 7H3.5a2 2 0 01-2-2v-10a2 2 0 012-2H5m5 14h1.5a2 2 0 002-2v-10a2 2 0 00-2-2H10"
+                  stroke="currentColor"
+                ></path>
+              </svg>
+            </button>
           </div>
-          <div class="flex flex-col w-1/2 gap-4">
+          <div class="relative flex flex-col w-1/2 gap-4">
             <label for="lhsLabel" class="relative">
               <input
                 id="rhsLabel"
@@ -51,6 +84,39 @@
               name="rhs"
               class="h-screen p-2 border border-gray-600 rounded-md editor"
             ></div>
+            <button
+              aria-label="Beautify entered text"
+              type="button"
+              title="Beautify"
+              class="
+                absolute
+                p-2
+                transition-all
+                rounded-sm
+                top-16
+                right-3
+                aspect-square
+                dark:hover:bg-slate-600 dark:bg-slate-600/50
+                hover:bg-slate-300
+                bg-gray-300/50
+              "
+              @click="
+                rhsEditor.trigger('editor', 'editor.action.formatDocument')
+              "
+            >
+              <svg
+                viewBox="0 0 15 15"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                width="15"
+                height="15"
+              >
+                <path
+                  d="M0 7.5h2m13 0h-2m-8 7H3.5a2 2 0 01-2-2v-10a2 2 0 012-2H5m5 14h1.5a2 2 0 002-2v-10a2 2 0 00-2-2H10"
+                  stroke="currentColor"
+                ></path>
+              </svg>
+            </button>
           </div>
         </section>
         <div class="self-end flex-grow-0 w-full mt-4 text-center">