<script lang="ts">
    import AE_Comp_Editor_CodeMirror from './AE_Comp_Editor_CodeMirror.svelte';
    import { browser } from '$app/environment';

    interface Props {
        html_text?: string;
        placeholder?: string;
        classes?: string;
    }

    let {
        html_text = $bindable(''),
        placeholder = 'Type your text here...',
        classes = ''
    }: Props = $props();
</script>

<div class="block w-full h-full {classes}">
    {#if browser}
        <AE_Comp_Editor_CodeMirror
            bind:content={html_text}
            {placeholder}
            class_li="p-1 transition-all duration-1000"
        />
    {:else}
        <!-- server / prerender placeholder to avoid SSR loading CM -->
        <div class="p-2 text-sm text-surface-600-400">Editor (client only)</div>
    {/if}
</div>
