feat: support code editor (#105)

* feat: support code editor

* Update codeblock

* refactor: remove unused class

---------

Co-authored-by: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com>

styles/globals.css

@@ -33,6 +33,7 @@
     --ring: 240 10% 3.9%;
 
     --radius: 0.5rem;
+    --overlay: rgba(0, 0, 0, 0.2);
   }
 
   .dark {
@@ -63,6 +64,8 @@
     --border: 240 3.7% 15.9%;
     --input: 240 4% 10%;
     --ring: 240 4.9% 83.9%;
+
+    --overlay:  rgba(0, 0, 0, 0.5);
   }
 }
 
@@ -86,13 +89,7 @@
 .xterm .xterm-screen {
   overflow: hidden;
 }
-/* .no-scrollbar::-webkit-scrollbar {
-  display: none;
-}
-.no-scrollbar {
-  -ms-overflow-style: none;
-  scrollbar-width: none; */
-/* } */
+
 @layer utilities {
   /* Chrome, Safari and Opera */
   .no-scrollbar::-webkit-scrollbar {
@@ -110,16 +107,24 @@
   font-weight: 500;
   letter-spacing: 0px !important;
 }
-.xterm-rows {
-  /* padding-left: 1rem;
-  padding-right: 1rem; */
-  /* padding-top: 1rem;
-  padding-bottom: 1rem; */
+
+/* Codemirror */
+.cm-editor {
+  @apply w-full h-full rounded-md overflow-hidden border border-solid border-border outline-none;
 }
 
-/* .xterm-cursor {
-  background-color: transparent !important;
-  border-color: transparent !important;
-  outline: none !important;
-  outline-offset: 0px !important;
-} */
+.cm-editor .cm-scroller {
+  font-family: inherit;
+  line-height: inherit;
+}
+
+.cm-editor.cm-focused {
+  @apply outline-none;
+}
+
+/* fix: placeholder bg */
+.cm-editor .cm-activeLine:has(.cm-placeholder) {
+  background-color: transparent;
+}
+
+