update svelte example again

This commit is contained in:
Philipp Kühn
2021-03-08 13:43:33 +01:00
parent 9f23ff20d6
commit 576813588d

View File

@@ -7,7 +7,7 @@ The following guide describes how to integrate tiptap with your Svelte project.
TODO TODO
Svelte REPL: https://svelte.dev/repl/c839da77db2444e5b23a752266613639?version=3.31.2 Svelte REPL: https://svelte.dev/repl/3651789dcfcb40de80b1ba36263d4bbd?version=3.31.2
App.svelte App.svelte
```html ```html
@@ -24,18 +24,22 @@ Editor.svelte
import { onMount, onDestroy } from 'svelte' import { onMount, onDestroy } from 'svelte'
import { Editor } from '@tiptap/core' import { Editor } from '@tiptap/core'
import { defaultExtensions } from '@tiptap/starter-kit' import { defaultExtensions } from '@tiptap/starter-kit'
let element let element
let editor let editor
onMount(() => { onMount(() => {
editor = new Editor({ editor = new Editor({
element: element, element: element,
extensions: defaultExtensions(), extensions: defaultExtensions(),
content: '<p>Hello <strong>Svelte</strong>!<p>',
onTransaction: () => { onTransaction: () => {
// force re-render so `editor.isActive` works as expected // force re-render so `editor.isActive` works as expected
editor = editor editor = editor
}, },
}) })
}) })
onDestroy(() => { onDestroy(() => {
editor.destroy() editor.destroy()
}) })
@@ -54,4 +58,11 @@ Editor.svelte
{/if} {/if}
<div bind:this={element} /> <div bind:this={element} />
<style>
button.active {
background: black;
color: white;
}
</style>
``` ```