docs: add svelte integration guide draft

This commit is contained in:
Hans Pagel
2021-01-25 11:05:19 +01:00
parent eea228018b
commit 2c3aaa019b
4 changed files with 54 additions and 5 deletions

View File

@@ -8,6 +8,10 @@ tiptap 2 is framework-agnostic and even works with plain JavaScript, if thats
## Alternative Guides
* [Vue CLI](/guide/getting-started/vue-cli)
* [Nuxt.js](/guide/getting-started/nuxtjs)
* [React](/guide/getting-started/react) (Draft)
* [Svelte](/guide/getting-started/svelte) (Draft)
* [Alpine.js](/guide/getting-started/alpinejs) (Draft)
* [Livewire](/guide/getting-started/livewire) (Draft)
## Requirements
* [Node](https://nodejs.org/en/download/) installed on your machine

View File

@@ -0,0 +1,46 @@
# Svelte
TODO
Svelte REPL: https://svelte.dev/repl/c839da77db2444e5b23a752266613639?version=3.31.2
App.svelte
```html
<script>
import Editor from './Editor.svelte';
</script>
<Editor />
```
Editor.svelte
```html
<script>
import { onMount } from 'svelte'
import { Editor } from '@tiptap/core'
import { defaultExtensions } from '@tiptap/starter-kit'
let element
let editor
onMount(() => {
editor = new Editor({
element: element,
extensions: defaultExtensions(),
})
})
</script>
{#if editor}
<button on:click={editor.chain().focus().toggleBold().run()} class:error={editor.isActive('bold')}>
bold
</button>
<button on:click={editor.chain().focus().toggleItalic().run()} class:error={editor.isActive('italic')}>
italic
</button>
<button on:click={editor.chain().focus().toggleStrike().run()} class:error={editor.isActive('strike')}>
strike
</button>
{/if}
<div bind:this={element} />

View File

@@ -1,5 +0,0 @@
# React
This is a basic example of tiptap.
<demo name="React" mode="react" />

View File

@@ -54,6 +54,10 @@
link: /guide/getting-started/react
type: draft
skip: true
- title: Svelte
link: /guide/getting-started/svelte
type: draft
skip: true
- title: Alpine.js
link: /guide/getting-started/alpinejs
type: draft