Got text content bindings working now

This commit is contained in:
2026-01-31 12:04:13 +13:00
parent c9896c251c
commit bb69a6c5d6
2 changed files with 13 additions and 5 deletions

View File

@@ -4,9 +4,14 @@
let image = $state('') let image = $state('')
let content = $state('') let content = $state('')
let editorState = $state({editor: null})
let editMode = true let edit = true
function getContent() {
return editorState.editor.getJSON()
}
</script> </script>
<ImageTarget bind:image /> <ImageTarget bind:image />
<TextEditor bind:content bind:edit={editMode} /> <TextEditor bind:content bind:editorState bind:edit />

View File

@@ -1,5 +1,9 @@
<script lang="ts"> <script lang="ts">
let { content = $bindable(''), edit = $bindable(false) } = $props() let {
content = $bindable(''),
edit = $bindable(false),
editorState = $bindable({editor: null})
} = $props()
import { onMount, onDestroy } from 'svelte' import { onMount, onDestroy } from 'svelte'
import { Editor } from '@tiptap/core' import { Editor } from '@tiptap/core'
@@ -7,7 +11,6 @@
import { Placeholder } from '@tiptap/extensions' import { Placeholder } from '@tiptap/extensions'
let element = $state() let element = $state()
let editorState = $state({editor: null})
onMount(() => { onMount(() => {
editorState.editor = new Editor({ editorState.editor = new Editor({
@@ -19,7 +22,7 @@
placeholder: "Write about your day..." placeholder: "Write about your day..."
}) })
], ],
content: content,
onTransaction: ({ editor }) => { onTransaction: ({ editor }) => {
// Update the state signal to force a re-render // Update the state signal to force a re-render
editorState = { editor } editorState = { editor }