51 lines
1.2 KiB
Svelte
51 lines
1.2 KiB
Svelte
<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> |