Got text content bindings working now
This commit is contained in:
@@ -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 />
|
||||||
@@ -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 }
|
||||||
|
|||||||
Reference in New Issue
Block a user