refactor: Update TextAreaInput to conditionally render textarea based on browser compatibility

src/lib/UI/GUI/TextAreaInput.svelte

@@ -35,7 +35,7 @@
     class:mt-2={margin === 'both'}
     bind:this={highlightDom}
 >
-    {#if !highlight || !CSS.highlights}
+    {#if !highlight || !CSS.highlights || isFirefox}
         <textarea
             class="w-full h-full bg-transparent focus-within:outline-none resize-none absolute top-0 left-0 z-10 overflow-y-auto"
             class:text-transparent={highlight}
@@ -80,7 +80,7 @@
 <script lang="ts">
     import { textAreaSize, textAreaTextSize } from 'src/ts/gui/guisize'
     import { highlighter, getNewHighlightId, removeHighlight } from 'src/ts/gui/highlight'
-    import { sleep } from 'src/ts/util';
+    import { isFirefox, sleep } from 'src/ts/util';
     import { onDestroy, onMount } from 'svelte';
     export let size: 'xs'|'sm'|'md'|'lg'|'xl'|'default' = 'default'
     export let autocomplete: 'on'|'off' = 'off'

src/ts/util.ts

@@ -10,7 +10,7 @@ import { appWindow } from '@tauri-apps/api/window';
 import { isTauri } from "./storage/globalApi"
 import { Marked } from "marked"
 
-const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1
+export const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1
 
 const mconverted = new Marked({
     gfm: true,