Merge branch 'main' of github.com:ueberdosis/tiptap into main

This commit is contained in:
Hans Pagel
2021-05-11 19:23:48 +02:00
179 changed files with 3158 additions and 489 deletions

View File

@@ -47,7 +47,7 @@ This is the fastest way to get tiptap up and running with Alpine.js. It will giv
```js
import alpinejs from 'alpinejs'
import { Editor } from '@tiptap/core'
import { defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
window.setupEditor = function(content) {
return {
@@ -57,7 +57,9 @@ window.setupEditor = function(content) {
init(element) {
this.editor = new Editor({
element: element,
extensions: defaultExtensions(),
extensions: [
StarterKit,
],
content: this.content,
onUpdate: ({ editor }) => {
this.content = editor.getHTML()

View File

@@ -10,10 +10,12 @@ For testing purposes or demos, use our [Skypack](https://www.skypack.dev/) CDN b
<div class="element"></div>
<script type="module">
import { Editor } from 'https://cdn.skypack.dev/@tiptap/core?min'
import { defaultExtensions } from 'https://cdn.skypack.dev/@tiptap/starter-kit?min'
import StarterKit from 'https://cdn.skypack.dev/@tiptap/starter-kit?min'
const editor = new Editor({
element: document.querySelector('.element'),
extensions: defaultExtensions(),
extensions: [
StarterKit,
],
content: '<p>Hello World!</p>',
})
</script>

View File

@@ -40,8 +40,8 @@ TODO
## index.js
```js
import { Editor } from "@tiptap/core"
import { defaultExtensions } from "@tiptap/starter-kit"
import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
window.setupEditor = function (content) {
return {
@@ -51,7 +51,9 @@ window.setupEditor = function (content) {
init(element) {
this.editor = new Editor({
element: element,
extensions: defaultExtensions(),
extensions: [
StarterKit,
],
content: this.content,
onUpdate: ({ editor }) => {
this.content = editor.getHTML()

View File

@@ -51,7 +51,7 @@ This is the fastest way to get tiptap up and running with Vue. It will give you
<script>
import { Editor, EditorContent } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
export default {
components: {
@@ -67,7 +67,9 @@ export default {
mounted() {
this.editor = new Editor({
content: '<p>Im running tiptap with Vue.js. 🎉</p>',
extensions: defaultExtensions(),
extensions: [
StarterKit,
],
})
},

View File

@@ -46,11 +46,13 @@ This is the fastest way to get tiptap up and running with React. It will give yo
```jsx
import { useEditor, EditorContent } from '@tiptap/react'
import { defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
const Tiptap = () => {
const editor = useEditor({
extensions: defaultExtensions(),
extensions: [
StarterKit,
],
content: '<p>Hello World! 🌎️</p>',
})

View File

@@ -51,7 +51,7 @@ This is the fastest way to get tiptap up and running with SvelteKit. It will giv
<script type="module">
import { onMount, onDestroy } from 'svelte'
import { Editor } from '@tiptap/core'
import { defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
let element
let editor
@@ -59,7 +59,9 @@ This is the fastest way to get tiptap up and running with SvelteKit. It will giv
onMount(() => {
editor = new Editor({
element: element,
extensions: defaultExtensions(),
extensions: [
StarterKit,
],
content: '<p>Hello World! 🌍️ </p>',
onTransaction: () => {
// force re-render so `editor.isActive` works as expected

View File

@@ -52,7 +52,7 @@ This is the fastest way to get tiptap up and running with Vue. It will give you
<script>
import { Editor, EditorContent } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
export default {
components: {
@@ -68,7 +68,9 @@ export default {
mounted() {
this.editor = new Editor({
content: '<p>Im running tiptap with Vue.js. 🎉</p>',
extensions: defaultExtensions(),
extensions: [
StarterKit,
],
})
},

View File

@@ -52,7 +52,7 @@ This is the fastest way to get tiptap up and running with Vue. It will give you
<script>
import { Editor, EditorContent } from '@tiptap/vue-3'
import { defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
export default {
components: {
@@ -68,7 +68,9 @@ export default {
mounted() {
this.editor = new Editor({
content: '<p>Im running tiptap with Vue.js. 🎉</p>',
extensions: defaultExtensions(),
extensions: [
StarterKit,
],
})
},
@@ -88,7 +90,7 @@ Alternatively, you can use the Composition API with the `useEditor` method.
<script>
import { useEditor, EditorContent } from '@tiptap/vue-3'
import { defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
export default {
components: {
@@ -98,7 +100,9 @@ export default {
setup() {
const editor = useEditor({
content: '<p>Im running tiptap with Vue.js. 🎉</p>',
extensions: defaultExtensions(),
extensions: [
StarterKit,
],
})
return { editor }
@@ -141,7 +145,7 @@ Youre probably used to bind your data with `v-model` in forms, thats also
<script>
import { Editor, EditorContent } from '@tiptap/vue-3'
import { defaultExtensions } from '@tiptap/starter-kit'
import StarterKit from '@tiptap/starter-kit'
export default {
components: {
@@ -176,7 +180,9 @@ export default {
mounted() {
this.editor = new Editor({
content: this.modelValue,
extensions: defaultExtensions(),
extensions: [
StarterKit,
],
onUpdate: () => {
this.$emit('update:modelValue', this.editor.getHTML())
},