{#if !highlight || !CSS.highlights || isFirefox}

{
                if(optimaizedInput){
                    if(inpa++ > 10){
                        value = e.currentTarget.value
                        inpa = 0
                        onInput()
                    }
                }
                else{
                    value = e.currentTarget.value
                    onInput()
                }
            }}
            on:change={(e) => {
                if(optimaizedInput){
                    value = e.currentTarget.value
                    onInput()
                }
            }}
        />
    {:else}
        <div
            class="w-full h-full bg-transparent focus-within:outline-none resize-none absolute top-0 left-0 z-10 overflow-y-auto px-4 py-2 break-words whitespace-pre-wrap"
            contenteditable="plaintext-only"
            bind:innerText={value}
            on:keydown={(e) => {
                onInput()
            }}
            translate="no"
            
        >{value ?? ''}</div>
    {/if}
</div>
<script lang="ts">
    import { textAreaSize, textAreaTextSize } from 'src/ts/gui/guisize'
    import { highlighter, getNewHighlightId, removeHighlight } from 'src/ts/gui/highlight'
    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'
    export let placeholder: string = ''
    export let value:string
    export let id:string = undefined
    export let padding = true
    export let margin:"none"|"top"|"bottom"|"both" = "none"
    export let onInput = () => {}
    export let fullwidth = false
    export let height:'20'|'24'|'28'|'32'|'36'|'full'|'default' = 'default'
    export let className = ''
    export let optimaizedInput = true
    export let highlight = false
    let highlightId = highlight ? getNewHighlightId() : 0
    let inpa = 0
    let highlightDom: HTMLDivElement
    let optiValue = value

onMount(() => {
        highlighter(highlightDom, highlightId)
    })

onDestroy(() => {
        removeHighlight(highlightId)
    })

const highlightChange = async (value:string, highlightId:number) => {
        await sleep(1)
        highlighter(highlightDom, highlightId)
    }
    
    $: optiValue = value
    $: highlightChange(value, highlightId)

</script>