update svelte example again
This commit is contained in:
@@ -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>
|
||||||
```
|
```
|
||||||
|
|||||||
Reference in New Issue
Block a user