<script lang="ts">
    let {
      content = $bindable(''),
      edit = $bindable(false),
      editorState = $bindable({editor: null})
    } = $props()
    
    import { onMount, onDestroy } from 'svelte'
    import { Editor } from '@tiptap/core'
    import { StarterKit } from '@tiptap/starter-kit'
    import { Placeholder } from '@tiptap/extensions'

    let element = $state()
    
    onMount(() => {
        editorState.editor = new Editor({
            element: element,
            editable: edit,
            extensions: [
                StarterKit,
                Placeholder.configure({
                  placeholder: "Write about your day..."
                })
            ],
            content: content,
            onTransaction: ({ editor }) => {
                // Update the state signal to force a re-render
                editorState = { editor }
            },
        })
    })
    onDestroy(() => {
        editorState.editor?.destroy()
    })
</script>

<div class="bg-white/20 rounded-2xl p-2 mt-4">
    <div class="bg-white/10 rounded-xl p-2  text-white/90" bind:this={element}></div>
</div>

<style>
    button.active {
        background: black;
        color: white;
    }
    
    :global(.tiptap) {
        min-height: 140px;
    }

</style>