docs: update content

This commit is contained in:
Philipp Kühn
2021-05-06 18:41:22 +02:00
parent 21384fc7a6
commit 00d8958b72
49 changed files with 180 additions and 122 deletions

View File

@@ -71,7 +71,7 @@
<script> <script>
import { Editor, EditorContent } from '@tiptap/vue-2' import { Editor, EditorContent } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit' import StarterKit from '@tiptap/starter-kit'
import { content } from './content.js' import { content } from './content.js'
export default { export default {
@@ -87,7 +87,9 @@ export default {
mounted() { mounted() {
this.editor = new Editor({ this.editor = new Editor({
extensions: defaultExtensions(), extensions: [
StarterKit,
],
content, content,
editorProps: { editorProps: {
attributes: { attributes: {

View File

@@ -22,7 +22,7 @@
<script> <script>
import { Editor, EditorContent } from '@tiptap/vue-2' import { Editor, EditorContent } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit' import StarterKit from '@tiptap/starter-kit'
import Collaboration from '@tiptap/extension-collaboration' import Collaboration from '@tiptap/extension-collaboration'
import CollaborationCursor from '@tiptap/extension-collaboration-cursor' import CollaborationCursor from '@tiptap/extension-collaboration-cursor'
import TaskList from '@tiptap/extension-task-list' import TaskList from '@tiptap/extension-task-list'
@@ -91,7 +91,9 @@ export default {
this.editor = new Editor({ this.editor = new Editor({
extensions: [ extensions: [
...defaultExtensions().filter(extension => extension.name !== 'history'), StarterKit.configure({
history: false,
}),
Highlight, Highlight,
TaskList, TaskList,
TaskItem, TaskItem,

View File

@@ -1,6 +1,6 @@
import React from 'react' import React from 'react'
import { useEditor, EditorContent } from '@tiptap/react' import { useEditor, EditorContent } from '@tiptap/react'
import { defaultExtensions } from '@tiptap/starter-kit' import StarterKit from '@tiptap/starter-kit'
import './styles.scss' import './styles.scss'
const MenuBar = ({ editor }) => { const MenuBar = ({ editor }) => {
@@ -125,7 +125,7 @@ const MenuBar = ({ editor }) => {
export default () => { export default () => {
const editor = useEditor({ const editor = useEditor({
extensions: [ extensions: [
...defaultExtensions(), StarterKit,
], ],
content: ` content: `
<h2> <h2>

View File

@@ -71,7 +71,7 @@
<script> <script>
import { Editor, EditorContent } from '@tiptap/vue-2' import { Editor, EditorContent } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit' import StarterKit from '@tiptap/starter-kit'
export default { export default {
components: { components: {
@@ -87,7 +87,7 @@ export default {
mounted() { mounted() {
this.editor = new Editor({ this.editor = new Editor({
extensions: [ extensions: [
...defaultExtensions(), StarterKit,
], ],
content: ` content: `
<h2> <h2>

View File

@@ -44,7 +44,7 @@
<script> <script>
import { Editor, EditorContent } from '@tiptap/vue-2' import { Editor, EditorContent } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit' import StarterKit from '@tiptap/starter-kit'
import TextAlign from '@tiptap/extension-text-align' import TextAlign from '@tiptap/extension-text-align'
import Highlight from '@tiptap/extension-highlight' import Highlight from '@tiptap/extension-highlight'
@@ -62,7 +62,7 @@ export default {
mounted() { mounted() {
this.editor = new Editor({ this.editor = new Editor({
extensions: [ extensions: [
...defaultExtensions(), StarterKit,
TextAlign, TextAlign,
Highlight, Highlight,
], ],

View File

@@ -6,7 +6,7 @@
<script> <script>
import { Editor, EditorContent } from '@tiptap/vue-2' import { Editor, EditorContent } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit' import StarterKit from '@tiptap/starter-kit'
import Highlight from '@tiptap/extension-highlight' import Highlight from '@tiptap/extension-highlight'
import Typography from '@tiptap/extension-typography' import Typography from '@tiptap/extension-typography'
@@ -41,7 +41,7 @@ export default {
</p> </p>
`, `,
extensions: [ extensions: [
...defaultExtensions(), StarterKit,
Highlight, Highlight,
Typography, Typography,
], ],

View File

@@ -5,13 +5,13 @@ import {
BubbleMenu, BubbleMenu,
FloatingMenu, FloatingMenu,
} from '@tiptap/react' } from '@tiptap/react'
import { defaultExtensions } from '@tiptap/starter-kit' import StarterKit from '@tiptap/starter-kit'
import './styles.scss' import './styles.scss'
export default () => { export default () => {
const editor = useEditor({ const editor = useEditor({
extensions: [ extensions: [
...defaultExtensions(), StarterKit,
], ],
content: ` content: `
<p> <p>

View File

@@ -45,7 +45,7 @@ import {
BubbleMenu, BubbleMenu,
FloatingMenu, FloatingMenu,
} from '@tiptap/vue-2' } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit' import StarterKit from '@tiptap/starter-kit'
export default { export default {
components: { components: {
@@ -63,7 +63,7 @@ export default {
mounted() { mounted() {
this.editor = new Editor({ this.editor = new Editor({
extensions: [ extensions: [
...defaultExtensions(), StarterKit,
], ],
content: ` content: `
<p> <p>

View File

@@ -64,7 +64,7 @@
<script> <script>
import { Editor, EditorContent } from '@tiptap/vue-2' import { Editor, EditorContent } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit' import StarterKit from '@tiptap/starter-kit'
import Table from '@tiptap/extension-table' import Table from '@tiptap/extension-table'
import TableRow from '@tiptap/extension-table-row' import TableRow from '@tiptap/extension-table-row'
import TableCell from '@tiptap/extension-table-cell' import TableCell from '@tiptap/extension-table-cell'
@@ -109,7 +109,7 @@ export default {
mounted() { mounted() {
this.editor = new Editor({ this.editor = new Editor({
extensions: [ extensions: [
...defaultExtensions(), StarterKit,
Table.configure({ Table.configure({
resizable: true, resizable: true,
}), }),

View File

@@ -7,7 +7,7 @@
<script> <script>
import tippy from 'tippy.js' import tippy from 'tippy.js'
import { Editor, EditorContent, VueRenderer } from '@tiptap/vue-2' import { Editor, EditorContent, VueRenderer } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit' import StarterKit from '@tiptap/starter-kit'
import Commands from './commands' import Commands from './commands'
import CommandsList from './CommandsList' import CommandsList from './CommandsList'
@@ -25,7 +25,7 @@ export default {
mounted() { mounted() {
this.editor = new Editor({ this.editor = new Editor({
extensions: [ extensions: [
...defaultExtensions(), StarterKit,
Commands.configure({ Commands.configure({
suggestion: { suggestion: {
items: query => { items: query => {

View File

@@ -20,7 +20,7 @@
<script> <script>
import { Editor, EditorContent } from '@tiptap/vue-2' import { Editor, EditorContent } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit' import StarterKit from '@tiptap/starter-kit'
import Details from './details' import Details from './details'
import DetailsSummary from './details-summary' import DetailsSummary from './details-summary'
@@ -38,7 +38,7 @@ export default {
mounted() { mounted() {
this.editor = new Editor({ this.editor = new Editor({
extensions: [ extensions: [
...defaultExtensions(), StarterKit,
Details, Details,
DetailsSummary, DetailsSummary,
], ],

View File

@@ -10,7 +10,7 @@
<script> <script>
import { Editor, EditorContent } from '@tiptap/vue-2' import { Editor, EditorContent } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit' import StarterKit from '@tiptap/starter-kit'
import Iframe from './iframe' import Iframe from './iframe'
export default { export default {
@@ -27,7 +27,7 @@ export default {
mounted() { mounted() {
this.editor = new Editor({ this.editor = new Editor({
extensions: [ extensions: [
...defaultExtensions(), StarterKit,
Iframe, Iframe,
], ],
content: ` content: `

View File

@@ -6,7 +6,7 @@
<script> <script>
import { Editor, EditorContent } from '@tiptap/vue-2' import { Editor, EditorContent } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit' import StarterKit from '@tiptap/starter-kit'
import DragHandle from './DragHandle.js' import DragHandle from './DragHandle.js'
export default { export default {
@@ -23,7 +23,7 @@ export default {
mounted() { mounted() {
this.editor = new Editor({ this.editor = new Editor({
extensions: [ extensions: [
...defaultExtensions(), StarterKit,
DragHandle, DragHandle,
], ],
content: ` content: `

View File

@@ -6,7 +6,7 @@
<script> <script>
import { Editor, EditorContent } from '@tiptap/vue-2' import { Editor, EditorContent } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit' import StarterKit from '@tiptap/starter-kit'
import { TrailingNode } from './trailing-node' import { TrailingNode } from './trailing-node'
export default { export default {
@@ -23,7 +23,7 @@ export default {
mounted() { mounted() {
this.editor = new Editor({ this.editor = new Editor({
extensions: [ extensions: [
...defaultExtensions(), StarterKit,
TrailingNode, TrailingNode,
], ],
content: ` content: `

View File

@@ -13,7 +13,7 @@
<script> <script>
import { Editor, EditorContent } from '@tiptap/vue-2' import { Editor, EditorContent } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit' import StarterKit from '@tiptap/starter-kit'
import { WordBreak } from './word-break' import { WordBreak } from './word-break'
export default { export default {
@@ -30,7 +30,7 @@ export default {
mounted() { mounted() {
this.editor = new Editor({ this.editor = new Editor({
extensions: [ extensions: [
...defaultExtensions(), StarterKit,
WordBreak, WordBreak,
], ],
content: ` content: `

View File

@@ -1,12 +1,12 @@
import React from 'react' import React from 'react'
import { useEditor, EditorContent, BubbleMenu } from '@tiptap/react' import { useEditor, EditorContent, BubbleMenu } from '@tiptap/react'
import { defaultExtensions } from '@tiptap/starter-kit' import StarterKit from '@tiptap/starter-kit'
import './styles.scss' import './styles.scss'
export default () => { export default () => {
const editor = useEditor({ const editor = useEditor({
extensions: [ extensions: [
...defaultExtensions(), StarterKit,
], ],
content: ` content: `
<p> <p>

View File

@@ -17,7 +17,7 @@
<script> <script>
import { Editor, EditorContent, BubbleMenu } from '@tiptap/vue-2' import { Editor, EditorContent, BubbleMenu } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit' import StarterKit from '@tiptap/starter-kit'
export default { export default {
components: { components: {
@@ -34,7 +34,7 @@ export default {
mounted() { mounted() {
this.editor = new Editor({ this.editor = new Editor({
extensions: [ extensions: [
...defaultExtensions(), StarterKit,
], ],
content: ` content: `
<p> <p>

View File

@@ -1,12 +1,12 @@
import React from 'react' import React from 'react'
import { useEditor, EditorContent, FloatingMenu } from '@tiptap/react' import { useEditor, EditorContent, FloatingMenu } from '@tiptap/react'
import { defaultExtensions } from '@tiptap/starter-kit' import StarterKit from '@tiptap/starter-kit'
import './styles.scss' import './styles.scss'
export default () => { export default () => {
const editor = useEditor({ const editor = useEditor({
extensions: [ extensions: [
...defaultExtensions(), StarterKit,
], ],
content: ` content: `
<p> <p>

View File

@@ -17,7 +17,7 @@
<script> <script>
import { Editor, EditorContent, FloatingMenu } from '@tiptap/vue-2' import { Editor, EditorContent, FloatingMenu } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit' import StarterKit from '@tiptap/starter-kit'
export default { export default {
components: { components: {
@@ -34,7 +34,7 @@ export default {
mounted() { mounted() {
this.editor = new Editor({ this.editor = new Editor({
extensions: [ extensions: [
...defaultExtensions(), StarterKit,
], ],
content: ` content: `
<p> <p>

View File

@@ -4,7 +4,7 @@
<script> <script>
import { Editor, EditorContent } from '@tiptap/vue-2' import { Editor, EditorContent } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit' import StarterKit from '@tiptap/starter-kit'
import Placeholder from '@tiptap/extension-placeholder' import Placeholder from '@tiptap/extension-placeholder'
export default { export default {
@@ -21,7 +21,7 @@ export default {
mounted() { mounted() {
this.editor = new Editor({ this.editor = new Editor({
extensions: [ extensions: [
...defaultExtensions(), StarterKit,
Placeholder, Placeholder,
], ],
}) })

View File

@@ -26,7 +26,7 @@
<script> <script>
import { Editor, EditorContent } from '@tiptap/vue-2' import { Editor, EditorContent } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit' import StarterKit from '@tiptap/starter-kit'
export default { export default {
components: { components: {
@@ -47,7 +47,9 @@ export default {
Wow, this editor instance exports its content as HTML. Wow, this editor instance exports its content as HTML.
</p> </p>
`, `,
extensions: defaultExtensions(), extensions: [
StarterKit,
],
}) })
// Get the initial content … // Get the initial content …

View File

@@ -26,7 +26,7 @@
<script> <script>
import { Editor, EditorContent } from '@tiptap/vue-2' import { Editor, EditorContent } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit' import StarterKit from '@tiptap/starter-kit'
export default { export default {
components: { components: {
@@ -47,7 +47,9 @@ export default {
Wow, this editor instance exports its content as JSON. Wow, this editor instance exports its content as JSON.
</p> </p>
`, `,
extensions: defaultExtensions(), extensions: [
StarterKit,
],
}) })
// Get the initial content … // Get the initial content …

View File

@@ -10,7 +10,7 @@
<script> <script>
import { Editor, EditorContent } from '@tiptap/vue-2' import { Editor, EditorContent } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit' import StarterKit from '@tiptap/starter-kit'
export default { export default {
components: { components: {
@@ -35,7 +35,9 @@ export default {
If you want to check the state, you can call <code>editor.isEditable()</code>. If you want to check the state, you can call <code>editor.isEditable()</code>.
</p> </p>
`, `,
extensions: defaultExtensions(), extensions: [
StarterKit,
],
}) })
}, },

View File

@@ -4,7 +4,7 @@
<script> <script>
import { Editor, EditorContent } from '@tiptap/vue-2' import { Editor, EditorContent } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit' import StarterKit from '@tiptap/starter-kit'
export default { export default {
components: { components: {
@@ -42,7 +42,9 @@ export default {
mounted() { mounted() {
this.editor = new Editor({ this.editor = new Editor({
extensions: defaultExtensions(), extensions: [
StarterKit,
],
content: this.value, content: this.value,
onUpdate: () => { onUpdate: () => {
// HTML // HTML

View File

@@ -6,7 +6,7 @@
<script> <script>
import { Editor, EditorContent } from '@tiptap/vue-2' import { Editor, EditorContent } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit' import StarterKit from '@tiptap/starter-kit'
import DraggableItem from './DraggableItem.js' import DraggableItem from './DraggableItem.js'
export default { export default {
@@ -23,7 +23,7 @@ export default {
mounted() { mounted() {
this.editor = new Editor({ this.editor = new Editor({
extensions: [ extensions: [
...defaultExtensions(), StarterKit,
DraggableItem, DraggableItem,
], ],
content: ` content: `

View File

@@ -4,7 +4,7 @@
<script> <script>
import { Editor, EditorContent } from '@tiptap/vue-2' import { Editor, EditorContent } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit' import StarterKit from '@tiptap/starter-kit'
import NodeView from './Extension.js' import NodeView from './Extension.js'
export default { export default {
@@ -21,7 +21,7 @@ export default {
mounted() { mounted() {
this.editor = new Editor({ this.editor = new Editor({
extensions: [ extensions: [
...defaultExtensions(), StarterKit,
NodeView, NodeView,
], ],
content: ` content: `

View File

@@ -4,7 +4,7 @@
<script> <script>
import { Editor, EditorContent } from '@tiptap/vue-2' import { Editor, EditorContent } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit' import StarterKit from '@tiptap/starter-kit'
import NodeView from './Extension.js' import NodeView from './Extension.js'
export default { export default {
@@ -21,7 +21,7 @@ export default {
mounted() { mounted() {
this.editor = new Editor({ this.editor = new Editor({
extensions: [ extensions: [
...defaultExtensions(), StarterKit,
NodeView, NodeView,
], ],
content: ` content: `

View File

@@ -1,13 +1,13 @@
import React from 'react' import React from 'react'
import { useEditor, EditorContent } from '@tiptap/react' import { useEditor, EditorContent } from '@tiptap/react'
import { defaultExtensions } from '@tiptap/starter-kit' import StarterKit from '@tiptap/starter-kit'
import ReactComponent from './Extension.js' import ReactComponent from './Extension.js'
import './styles.scss' import './styles.scss'
export default () => { export default () => {
const editor = useEditor({ const editor = useEditor({
extensions: [ extensions: [
...defaultExtensions(), StarterKit,
ReactComponent, ReactComponent,
], ],
content: ` content: `

View File

@@ -1,13 +1,13 @@
import React from 'react' import React from 'react'
import { useEditor, EditorContent } from '@tiptap/react' import { useEditor, EditorContent } from '@tiptap/react'
import { defaultExtensions } from '@tiptap/starter-kit' import StarterKit from '@tiptap/starter-kit'
import ReactComponent from './Extension.js' import ReactComponent from './Extension.js'
import './styles.scss' import './styles.scss'
export default () => { export default () => {
const editor = useEditor({ const editor = useEditor({
extensions: [ extensions: [
...defaultExtensions(), StarterKit,
ReactComponent, ReactComponent,
], ],
content: ` content: `

View File

@@ -6,7 +6,7 @@
<script> <script>
import { Editor, EditorContent } from '@tiptap/vue-2' import { Editor, EditorContent } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit' import StarterKit from '@tiptap/starter-kit'
import TableOfContents from './TableOfContents.js' import TableOfContents from './TableOfContents.js'
export default { export default {
@@ -23,7 +23,7 @@ export default {
mounted() { mounted() {
this.editor = new Editor({ this.editor = new Editor({
extensions: [ extensions: [
...defaultExtensions(), StarterKit,
TableOfContents, TableOfContents,
], ],
content: ` content: `

View File

@@ -4,7 +4,7 @@
<script> <script>
import { Editor, EditorContent } from '@tiptap/vue-2' import { Editor, EditorContent } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit' import StarterKit from '@tiptap/starter-kit'
import VueComponent from './Extension.js' import VueComponent from './Extension.js'
export default { export default {
@@ -21,7 +21,7 @@ export default {
mounted() { mounted() {
this.editor = new Editor({ this.editor = new Editor({
extensions: [ extensions: [
...defaultExtensions(), StarterKit,
VueComponent, VueComponent,
], ],
content: ` content: `

View File

@@ -4,7 +4,7 @@
<script> <script>
import { Editor, EditorContent } from '@tiptap/vue-2' import { Editor, EditorContent } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit' import StarterKit from '@tiptap/starter-kit'
import VueComponent from './Extension.js' import VueComponent from './Extension.js'
export default { export default {
@@ -21,7 +21,7 @@ export default {
mounted() { mounted() {
this.editor = new Editor({ this.editor = new Editor({
extensions: [ extensions: [
...defaultExtensions(), StarterKit,
VueComponent, VueComponent,
], ],
content: ` content: `

View File

@@ -4,7 +4,7 @@
<script> <script>
import { Editor, EditorContent } from '@tiptap/vue-2' import { Editor, EditorContent } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit' import StarterKit from '@tiptap/starter-kit'
export default { export default {
components: { components: {
@@ -20,7 +20,9 @@ export default {
mounted() { mounted() {
this.editor = new Editor({ this.editor = new Editor({
content: '<p>Hello World! 🌎️</p>', content: '<p>Hello World! 🌎️</p>',
extensions: defaultExtensions(), extensions: [
StarterKit,
],
}) })
}, },

View File

@@ -34,11 +34,13 @@ The `element` specifies the HTML element the editor will be binded too. The foll
```js ```js
import { Editor } from '@tiptap/core' import { Editor } from '@tiptap/core'
import { defaultExtensions } from '@tiptap/starter-kit' import StarterKit from '@tiptap/starter-kit'
new Editor({ new Editor({
element: document.querySelector('.element'), element: document.querySelector('.element'),
extensions: defaultExtensions(), extensions: [
StarterKit,
],
}) })
``` ```
@@ -53,7 +55,7 @@ Its required to pass a list of extensions to the `extensions` property, even
```js ```js
import { Editor } from '@tiptap/core' import { Editor } from '@tiptap/core'
import { defaultExtensions } from '@tiptap/starter-kit' import StarterKit from '@tiptap/starter-kit'
import Document from '@tiptap/extension-document' import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph' import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text' import Text from '@tiptap/extension-text'
@@ -61,7 +63,9 @@ import Highlight from '@tiptap/extension-highlight'
new Editor({ new Editor({
// Use the default extensions // Use the default extensions
extensions: defaultExtensions(), extensions: [
StarterKit,
],
// … or use specific extensions // … or use specific extensions
extensions: [ extensions: [
@@ -72,7 +76,7 @@ new Editor({
// … or both // … or both
extensions: [ extensions: [
...defaultExtensions(), StarterKit,
Highlight, Highlight,
], ],
}) })
@@ -83,11 +87,13 @@ With the `content` property you can provide the initial content for the editor.
```js ```js
import { Editor } from '@tiptap/core' import { Editor } from '@tiptap/core'
import { defaultExtensions } from '@tiptap/starter-kit' import StarterKit from '@tiptap/starter-kit'
new Editor({ new Editor({
content: `<p>Example Text</p>`, content: `<p>Example Text</p>`,
extensions: defaultExtensions(), extensions: [
StarterKit,
],
}) })
``` ```
@@ -96,11 +102,13 @@ The `editable` property determines if users can write into the editor.
```js ```js
import { Editor } from '@tiptap/core' import { Editor } from '@tiptap/core'
import { defaultExtensions } from '@tiptap/starter-kit' import StarterKit from '@tiptap/starter-kit'
new Editor({ new Editor({
content: `<p>Example Text</p>`, content: `<p>Example Text</p>`,
extensions: defaultExtensions(), extensions: [
StarterKit,
],
editable: false, editable: false,
}) })
``` ```
@@ -110,10 +118,12 @@ With `autofocus` you can force the cursor to jump in the editor on initializatio
```js ```js
import { Editor } from '@tiptap/core' import { Editor } from '@tiptap/core'
import { defaultExtensions } from '@tiptap/starter-kit' import StarterKit from '@tiptap/starter-kit'
new Editor({ new Editor({
extensions: defaultExtensions(), extensions: [
StarterKit,
],
autofocus: false, autofocus: false,
}) })
``` ```
@@ -132,11 +142,13 @@ By default, tiptap enables all [input rules](/guide/custom-extensions/#input-rul
```js ```js
import { Editor } from '@tiptap/core' import { Editor } from '@tiptap/core'
import { defaultExtensions } from '@tiptap/starter-kit' import StarterKit from '@tiptap/starter-kit'
new Editor({ new Editor({
content: `<p>Example Text</p>`, content: `<p>Example Text</p>`,
extensions: defaultExtensions(), extensions: [
StarterKit,
],
enableInputRules: false, enableInputRules: false,
}) })
``` ```
@@ -146,11 +158,13 @@ By default, tiptap enables all [paste rules](/guide/custom-extensions/#paste-rul
```js ```js
import { Editor } from '@tiptap/core' import { Editor } from '@tiptap/core'
import { defaultExtensions } from '@tiptap/starter-kit' import StarterKit from '@tiptap/starter-kit'
new Editor({ new Editor({
content: `<p>Example Text</p>`, content: `<p>Example Text</p>`,
extensions: defaultExtensions(), extensions: [
StarterKit,
],
enablePasteRules: false, enablePasteRules: false,
}) })
``` ```
@@ -160,10 +174,12 @@ By default, tiptap injects [a little bit of CSS](https://github.com/ueberdosis/t
```js ```js
import { Editor } from '@tiptap/core' import { Editor } from '@tiptap/core'
import { defaultExtensions } from '@tiptap/starter-kit' import StarterKit from '@tiptap/starter-kit'
new Editor({ new Editor({
extensions: defaultExtensions(), extensions: [
StarterKit,
],
injectCSS: false, injectCSS: false,
}) })
``` ```

View File

@@ -22,7 +22,7 @@ There are also some extensions with more capabilities. We call them [nodes](/api
| [TextAlign](/api/extensions/text-align) | | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-text-align/) | | [TextAlign](/api/extensions/text-align) | | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-text-align/) |
| [Typography](/api/extensions/typography) | | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-typography/) | | [Typography](/api/extensions/typography) | | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-typography/) |
You dont have to use it, but we prepared a `@tiptap/starter-kit` which includes the most common extensions. Read more about [`defaultExtensions()`](/guide/configuration#default-extensions). You dont have to use it, but we prepared a `@tiptap/starter-kit` which includes the most common extensions. Read more about [`StarterKit`](/guide/configuration#default-extensions).
## How extensions work ## How extensions work
Although tiptap tries to hide most of the complexity of ProseMirror, its built on top of its APIs and we recommend you to read through the [ProseMirror Guide](https://ProseMirror.net/docs/guide/) for advanced usage. Youll have a better understanding of how everything works under the hood and get more familiar with many terms and jargon used by tiptap. Although tiptap tries to hide most of the complexity of ProseMirror, its built on top of its APIs and we recommend you to read through the [ProseMirror Guide](https://ProseMirror.net/docs/guide/) for advanced usage. Youll have a better understanding of how everything works under the hood and get more familiar with many terms and jargon used by tiptap.

View File

@@ -7,7 +7,7 @@
The node is very tiny though. It defines a name of the node (`document`), is configured to be a top node (`topNode: true`) and that it can contain multiple other nodes (`block+`). Thats all. But have a look yourself: The node is very tiny though. It defines a name of the node (`document`), is configured to be a top node (`topNode: true`) and that it can contain multiple other nodes (`block+`). Thats all. But have a look yourself:
:::warning Breaking Change from 1.x → 2.x :::warning Breaking Change from 1.x → 2.x
tiptap 1 tried to hide that node from you, but it has always been there. You have to explicitly import it from now on (or use `defaultExtensions()`). tiptap 1 tried to hide that node from you, but it has always been there. You have to explicitly import it from now on (or use `StarterKit`).
::: :::
## Installation ## Installation

View File

@@ -5,7 +5,7 @@
Yes, the schema is very strict. Without this extension you wont even be able to use paragraphs in the editor. Yes, the schema is very strict. Without this extension you wont even be able to use paragraphs in the editor.
:::warning Breaking Change from 1.x → 2.x :::warning Breaking Change from 1.x → 2.x
tiptap 1 tried to hide that node from you, but it has always been there. You have to explicitly import it from now on (or use `defaultExtensions()`). tiptap 1 tried to hide that node from you, but it has always been there. You have to explicitly import it from now on (or use `StarterKit`).
::: :::
## Installation ## Installation

View File

@@ -5,7 +5,7 @@
**The `Text` extension is required**, at least if you want to work with text of any kind and thats very likely. This extension is a little bit different, it doesnt even render HTML. Its plain text, thats all. **The `Text` extension is required**, at least if you want to work with text of any kind and thats very likely. This extension is a little bit different, it doesnt even render HTML. Its plain text, thats all.
:::warning Breaking Change from 1.x → 2.x :::warning Breaking Change from 1.x → 2.x
tiptap 1 tried to hide that node from you, but it has always been there. You have to explicitly import it from now on (or use `defaultExtensions()`). tiptap 1 tried to hide that node from you, but it has always been there. You have to explicitly import it from now on (or use `StarterKit`).
::: :::
## Installation ## Installation

View File

@@ -82,23 +82,25 @@ new Editor({
Have a look at the documentation of the extension you use to learn more about their settings. Have a look at the documentation of the extension you use to learn more about their settings.
### Default extensions ### Default extensions
We have put together a few of the most common extensions and provide a `defaultExtensions()` helper to load them. Here is how you to use that: We have put together a few of the most common extensions and provide a `StarterKit` extension to load them. Here is how you to use that:
```js ```js
import { Editor, defaultExtensions } from '@tiptap/starter-kit' import StarterKit from '@tiptap/starter-kit'
new Editor({ new Editor({
extensions: defaultExtensions(), extensions: [
StarterKit,
],
}) })
``` ```
And you can even pass configuration for all default extensions as an object. Just prefix the configuration with the extension name: And you can even pass configuration for all default extensions as an object. Just prefix the configuration with the extension name:
```js ```js
import { Editor, defaultExtensions } from '@tiptap/starter-kit' import StarterKit from '@tiptap/starter-kit'
new Editor({ new Editor({
extensions: defaultExtensions({ extensions: StarterKit.configure({
heading: { heading: {
levels: [1, 2, 3], levels: [1, 2, 3],
}, },
@@ -106,15 +108,15 @@ new Editor({
}) })
``` ```
The `defaultExtensions()` function returns an array, so if you want to load them and add some custom extensions you could write it like that: The `StarterKit` extension contains a list of extensions. If you want to load them and add some custom extensions you could write it like that:
```js ```js
import { Editor, defaultExtensions } from '@tiptap/starter-kit' import StarterKit from '@tiptap/starter-kit'
import Strike from '@tiptap/extension-strike' import Strike from '@tiptap/extension-strike'
new Editor({ new Editor({
extensions: [ extensions: [
...defaultExtensions(), StarterKit,
Strike, Strike,
], ],
}) })
@@ -123,11 +125,13 @@ new Editor({
Dont want to load a specific extension? Just filter it out: Dont want to load a specific extension? Just filter it out:
```js ```js
import { Editor, defaultExtensions } from '@tiptap/starter-kit' import StarterKit from '@tiptap/starter-kit'
new Editor({ new Editor({
extensions: [ extensions: [
...defaultExtensions().filter(extension => extension.name !== 'history'), StarterKit.configure({
history: false,
}),
], ],
}) })
``` ```

View File

@@ -45,11 +45,13 @@ Lets initialize the editor in JavaScript now:
```js ```js
import { Editor } from '@tiptap/core' import { Editor } from '@tiptap/core'
import { defaultExtensions } from '@tiptap/starter-kit' import StarterKit from '@tiptap/starter-kit'
new Editor({ new Editor({
element: document.querySelector('.element'), element: document.querySelector('.element'),
extensions: defaultExtensions(), extensions: [
StarterKit,
],
content: '<p>Hello World!</p>', content: '<p>Hello World!</p>',
}) })
``` ```

View File

@@ -47,7 +47,7 @@ This is the fastest way to get tiptap up and running with Alpine.js. It will giv
```js ```js
import alpinejs from 'alpinejs' import alpinejs from 'alpinejs'
import { Editor } from '@tiptap/core' import { Editor } from '@tiptap/core'
import { defaultExtensions } from '@tiptap/starter-kit' import StarterKit from '@tiptap/starter-kit'
window.setupEditor = function(content) { window.setupEditor = function(content) {
return { return {
@@ -56,7 +56,9 @@ window.setupEditor = function(content) {
init(element) { init(element) {
this.editor = new Editor({ this.editor = new Editor({
element: element, element: element,
extensions: defaultExtensions(), extensions: [
StarterKit,
],
content: this.content, content: this.content,
onUpdate: ({ editor }) => { onUpdate: ({ editor }) => {
this.content = editor.getHTML() 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> <div class="element"></div>
<script type="module"> <script type="module">
import { Editor } from 'https://cdn.skypack.dev/@tiptap/core?min' 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({ const editor = new Editor({
element: document.querySelector('.element'), element: document.querySelector('.element'),
extensions: defaultExtensions(), extensions: [
StarterKit,
],
content: '<p>Hello World!</p>', content: '<p>Hello World!</p>',
}) })
</script> </script>

View File

@@ -40,8 +40,8 @@ TODO
## index.js ## index.js
```js ```js
import { Editor } from "@tiptap/core" import { Editor } from '@tiptap/core'
import { defaultExtensions } from "@tiptap/starter-kit" import StarterKit from '@tiptap/starter-kit'
window.setupEditor = function (content) { window.setupEditor = function (content) {
return { return {
@@ -51,7 +51,9 @@ window.setupEditor = function (content) {
init(element) { init(element) {
this.editor = new Editor({ this.editor = new Editor({
element: element, element: element,
extensions: defaultExtensions(), extensions: [
StarterKit,
],
content: this.content, content: this.content,
onUpdate: ({ editor }) => { onUpdate: ({ editor }) => {
this.content = editor.getHTML() 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> <script>
import { Editor, EditorContent } from '@tiptap/vue-2' import { Editor, EditorContent } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit' import StarterKit from '@tiptap/starter-kit'
export default { export default {
components: { components: {
@@ -67,7 +67,9 @@ export default {
mounted() { mounted() {
this.editor = new Editor({ this.editor = new Editor({
content: '<p>Im running tiptap with Vue.js. 🎉</p>', 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 ```jsx
import { useEditor, EditorContent } from '@tiptap/react' import { useEditor, EditorContent } from '@tiptap/react'
import { defaultExtensions } from '@tiptap/starter-kit' import StarterKit from '@tiptap/starter-kit'
const Tiptap = () => { const Tiptap = () => {
const editor = useEditor({ const editor = useEditor({
extensions: defaultExtensions(), extensions: [
StarterKit,
],
content: '<p>Hello World! 🌎️</p>', 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"> <script type="module">
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 StarterKit from '@tiptap/starter-kit'
let element let element
let editor let editor
@@ -59,7 +59,9 @@ This is the fastest way to get tiptap up and running with SvelteKit. It will giv
onMount(() => { onMount(() => {
editor = new Editor({ editor = new Editor({
element: element, element: element,
extensions: defaultExtensions(), extensions: [
StarterKit,
],
content: '<p>Hello World! 🌍️ </p>', content: '<p>Hello World! 🌍️ </p>',
onTransaction: () => { onTransaction: () => {
// force re-render so `editor.isActive` works as expected // 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> <script>
import { Editor, EditorContent } from '@tiptap/vue-2' import { Editor, EditorContent } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit' import StarterKit from '@tiptap/starter-kit'
export default { export default {
components: { components: {
@@ -68,7 +68,9 @@ export default {
mounted() { mounted() {
this.editor = new Editor({ this.editor = new Editor({
content: '<p>Im running tiptap with Vue.js. 🎉</p>', 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> <script>
import { Editor, EditorContent } from '@tiptap/vue-3' import { Editor, EditorContent } from '@tiptap/vue-3'
import { defaultExtensions } from '@tiptap/starter-kit' import StarterKit from '@tiptap/starter-kit'
export default { export default {
components: { components: {
@@ -68,7 +68,9 @@ export default {
mounted() { mounted() {
this.editor = new Editor({ this.editor = new Editor({
content: '<p>Im running tiptap with Vue.js. 🎉</p>', 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> <script>
import { useEditor, EditorContent } from '@tiptap/vue-3' import { useEditor, EditorContent } from '@tiptap/vue-3'
import { defaultExtensions } from '@tiptap/starter-kit' import StarterKit from '@tiptap/starter-kit'
export default { export default {
components: { components: {
@@ -98,7 +100,9 @@ export default {
setup() { setup() {
const editor = useEditor({ const editor = useEditor({
content: '<p>Im running tiptap with Vue.js. 🎉</p>', content: '<p>Im running tiptap with Vue.js. 🎉</p>',
extensions: defaultExtensions(), extensions: [
StarterKit,
],
}) })
return { editor } return { editor }
@@ -141,7 +145,7 @@ Youre probably used to bind your data with `v-model` in forms, thats also
<script> <script>
import { Editor, EditorContent } from '@tiptap/vue-3' import { Editor, EditorContent } from '@tiptap/vue-3'
import { defaultExtensions } from '@tiptap/starter-kit' import StarterKit from '@tiptap/starter-kit'
export default { export default {
components: { components: {
@@ -176,7 +180,9 @@ export default {
mounted() { mounted() {
this.editor = new Editor({ this.editor = new Editor({
content: this.modelValue, content: this.modelValue,
extensions: defaultExtensions(), extensions: [
StarterKit,
],
onUpdate: () => { onUpdate: () => {
this.$emit('update:modelValue', this.editor.getHTML()) this.$emit('update:modelValue', this.editor.getHTML())
}, },

View File

@@ -121,11 +121,13 @@
&lt;script type="module"&gt; &lt;script type="module"&gt;
import { Editor } from 'https://cdn.skypack.dev/@tiptap/core?min' 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({ const editor = new Editor({
element: document.querySelector('.element'), element: document.querySelector('.element'),
extensions: defaultExtensions(), extensions: [
StarterKit,
],
content: '&lt;p&gt;Hello World :-)&lt;/p&gt;', content: '&lt;p&gt;Hello World :-)&lt;/p&gt;',
}) })
&lt;/script&gt; &lt;/script&gt;