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

docs/src/demos/Examples/Book/index.vue

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

docs/src/demos/Examples/CollaborativeEditing/index.vue

@@ -22,7 +22,7 @@
 
 <script>
 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 CollaborationCursor from '@tiptap/extension-collaboration-cursor'
 import TaskList from '@tiptap/extension-task-list'
@@ -40,20 +40,9 @@ const getRandomElement = list => {
 
 const getRandomRoom = () => {
   return getRandomElement([
-    // HN killed it all
-    // 'room.one',
-    // 'room.two',
-    // 'room.three',
-    // 'room.four',
-    // 'room.five',
-    'room.six',
-    // 'room.seven',
-    // 'room.eight',
-    'room.nine',
-    // 'room.ten',
-    'room.eleven',
-    'room.twelve',
-    'room.thirteen',
+    'room.1',
+    'room.2',
+    'room.3',
   ])
 }
 
@@ -91,7 +80,9 @@ export default {
 
     this.editor = new Editor({
       extensions: [
-        ...defaultExtensions().filter(extension => extension.name !== 'history'),
+        StarterKit.configure({
+          history: false,
+        }),
         Highlight,
         TaskList,
         TaskItem,

docs/src/demos/Examples/Default/React/index.jsx

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

docs/src/demos/Examples/Default/Vue/index.vue

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

docs/src/demos/Examples/Formatting/index.vue

@@ -44,7 +44,7 @@
 
 <script>
 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 Highlight from '@tiptap/extension-highlight'
 
@@ -62,7 +62,7 @@ export default {
   mounted() {
     this.editor = new Editor({
       extensions: [
-        ...defaultExtensions(),
+        StarterKit,
         TextAlign,
         Highlight,
       ],

docs/src/demos/Examples/MarkdownShortcuts/index.vue

@@ -6,7 +6,7 @@
 
 <script>
 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 Typography from '@tiptap/extension-typography'
 
@@ -41,7 +41,7 @@ export default {
         </p>
       `,
       extensions: [
-        ...defaultExtensions(),
+        StarterKit,
         Highlight,
         Typography,
       ],

docs/src/demos/Examples/Menus/React/index.jsx

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

docs/src/demos/Examples/Menus/Vue/index.vue

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

docs/src/demos/Examples/Tables/index.vue

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

docs/src/demos/Experiments/Commands/index.vue

@@ -7,7 +7,7 @@
 <script>
 import tippy from 'tippy.js'
 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 CommandsList from './CommandsList'
 
@@ -25,7 +25,7 @@ export default {
   mounted() {
     this.editor = new Editor({
       extensions: [
-        ...defaultExtensions(),
+        StarterKit,
         Commands.configure({
           suggestion: {
             items: query => {

docs/src/demos/Experiments/Details/index.vue

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

docs/src/demos/Experiments/Embeds/index.vue

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

docs/src/demos/Experiments/GlobalDragHandle/index.vue

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

docs/src/demos/Experiments/TrailingNode/index.vue

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

docs/src/demos/Experiments/WordBreak/index.vue

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

docs/src/demos/Extensions/BubbleMenu/React/index.jsx

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

docs/src/demos/Extensions/BubbleMenu/Vue/index.vue

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

docs/src/demos/Extensions/FloatingMenu/React/index.jsx

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

docs/src/demos/Extensions/FloatingMenu/Vue/index.vue

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

docs/src/demos/Extensions/Placeholder/index.vue

@@ -4,7 +4,7 @@
 
 <script>
 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'
 
 export default {
@@ -21,7 +21,7 @@ export default {
   mounted() {
     this.editor = new Editor({
       extensions: [
-        ...defaultExtensions(),
+        StarterKit,
         Placeholder,
       ],
     })

docs/src/demos/Guide/Content/ExportHTML/index.vue

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

docs/src/demos/Guide/Content/ExportJSON/index.vue

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

docs/src/demos/Guide/Content/GenerateJSON/index.spec.js

@@ -0,0 +1,7 @@
+context('/demos/Guide/Content/GenerateJSON', () => {
+  before(() => {
+    cy.visit('/demos/Guide/Content/GenerateJSON')
+  })
+
+  // TODO: Write tests
+})

docs/src/demos/Guide/Content/GenerateJSON/index.vue

@@ -0,0 +1,30 @@
+<template>
+  <pre><code>{{ output }}</code></pre>
+</template>
+
+<script>
+// Option 1: Browser + server-side
+import { generateJSON } from '@tiptap/html'
+// Option 2: Browser-only (lightweight)
+// import { generateJSON } from '@tiptap/core'
+import Document from '@tiptap/extension-document'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
+import Bold from '@tiptap/extension-bold'
+
+const html = '<p>Example <strong>Text</strong></p>'
+
+export default {
+  computed: {
+    output() {
+      return generateJSON(html, [
+        Document,
+        Paragraph,
+        Text,
+        Bold,
+        // other extensions …
+      ])
+    },
+  },
+}
+</script>

docs/src/demos/Guide/Content/ReadOnly/index.vue

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

docs/src/demos/Guide/GettingStarted/VModel/Editor.vue

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

docs/src/demos/Guide/NodeViews/DragHandle/index.vue

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

docs/src/demos/Guide/NodeViews/JavaScript/index.vue

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

docs/src/demos/Guide/NodeViews/JavaScriptContent/index.vue

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

docs/src/demos/Guide/NodeViews/ReactComponent/index.jsx

@@ -1,13 +1,13 @@
 import React from '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 './styles.scss'
 
 export default () => {
   const editor = useEditor({
     extensions: [
-      ...defaultExtensions(),
+      StarterKit,
       ReactComponent,
     ],
     content: `

docs/src/demos/Guide/NodeViews/ReactComponentContent/index.jsx

@@ -1,13 +1,13 @@
 import React from '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 './styles.scss'
 
 export default () => {
   const editor = useEditor({
     extensions: [
-      ...defaultExtensions(),
+      StarterKit,
       ReactComponent,
     ],
     content: `

docs/src/demos/Guide/NodeViews/TableOfContents/index.vue

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

docs/src/demos/Guide/NodeViews/VueComponent/index.vue

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

docs/src/demos/Guide/NodeViews/VueComponentContent/index.vue

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

docs/src/demos/Overview/Installation/index.vue

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

docs/src/docPages/api/editor.md

@@ -17,8 +17,7 @@ Don’t confuse methods with [commands](/api/commands). Commands are used to cha
 | `destroy()`           | –                                                                                                           | Stops the editor instance and unbinds all events.                            |
 | `getHTML()`           | –                                                                                                           | Returns the current content as HTML.                                         |
 | `getJSON()`           | –                                                                                                           | Returns the current content as JSON.                                         |
-| `getMarkAttributes()` | `name` Name of the mark                                                                                     | Get attributes of the currently selected mark.                               |
-| `getNodeAttributes()` | `name` Name of the node                                                                                     | Get attributes of the currently selected node.                               |
+| `getAttributes()`     | `name` Name of the node or mark                                                                             | Get attributes of the currently selected node or mark.                       |
 | `isActive()`          | `name` Name of the node or mark<br>`attrs` Attributes of the node or mark                                   | Returns if the currently selected node or mark is active.                    |
 | `isEditable()`        | -                                                                                                           | Returns whether the editor is editable.                                      |
 | `isEmpty()`           | -                                                                                                           | Check if there is no content.                                                |
@@ -34,11 +33,13 @@ The `element` specifies the HTML element the editor will be binded too. The foll
 
 ```js
 import { Editor } from '@tiptap/core'
-import { defaultExtensions } from '@tiptap/starter-kit'
+import StarterKit from '@tiptap/starter-kit'
 
 new Editor({
   element: document.querySelector('.element'),
-  extensions: defaultExtensions(),
+  extensions: [
+    StarterKit,
+  ],
 })
 ```
 
@@ -53,7 +54,7 @@ It’s required to pass a list of extensions to the `extensions` property, even
 
 ```js
 import { Editor } from '@tiptap/core'
-import { defaultExtensions } from '@tiptap/starter-kit'
+import StarterKit from '@tiptap/starter-kit'
 import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
@@ -61,7 +62,9 @@ import Highlight from '@tiptap/extension-highlight'
 
 new Editor({
   // Use the default extensions
-  extensions: defaultExtensions(),
+  extensions: [
+    StarterKit,
+  ],
 
   // … or use specific extensions
   extensions: [
@@ -72,7 +75,7 @@ new Editor({
 
   // … or both
   extensions: [
-    ...defaultExtensions(),
+    StarterKit,
     Highlight,
   ],
 })
@@ -83,11 +86,13 @@ With the `content` property you can provide the initial content for the editor.
 
 ```js
 import { Editor } from '@tiptap/core'
-import { defaultExtensions } from '@tiptap/starter-kit'
+import StarterKit from '@tiptap/starter-kit'
 
 new Editor({
   content: `<p>Example Text</p>`,
-  extensions: defaultExtensions(),
+  extensions: [
+    StarterKit,
+  ],
 })
 ```
 
@@ -96,11 +101,13 @@ The `editable` property determines if users can write into the editor.
 
 ```js
 import { Editor } from '@tiptap/core'
-import { defaultExtensions } from '@tiptap/starter-kit'
+import StarterKit from '@tiptap/starter-kit'
 
 new Editor({
   content: `<p>Example Text</p>`,
-  extensions: defaultExtensions(),
+  extensions: [
+    StarterKit,
+  ],
   editable: false,
 })
 ```
@@ -110,10 +117,12 @@ With `autofocus` you can force the cursor to jump in the editor on initializatio
 
 ```js
 import { Editor } from '@tiptap/core'
-import { defaultExtensions } from '@tiptap/starter-kit'
+import StarterKit from '@tiptap/starter-kit'
 
 new Editor({
-  extensions: defaultExtensions(),
+  extensions: [
+    StarterKit,
+  ],
   autofocus: false,
 })
 ```
@@ -132,11 +141,13 @@ By default, tiptap enables all [input rules](/guide/custom-extensions/#input-rul
 
 ```js
 import { Editor } from '@tiptap/core'
-import { defaultExtensions } from '@tiptap/starter-kit'
+import StarterKit from '@tiptap/starter-kit'
 
 new Editor({
   content: `<p>Example Text</p>`,
-  extensions: defaultExtensions(),
+  extensions: [
+    StarterKit,
+  ],
   enableInputRules: false,
 })
 ```
@@ -146,11 +157,13 @@ By default, tiptap enables all [paste rules](/guide/custom-extensions/#paste-rul
 
 ```js
 import { Editor } from '@tiptap/core'
-import { defaultExtensions } from '@tiptap/starter-kit'
+import StarterKit from '@tiptap/starter-kit'
 
 new Editor({
   content: `<p>Example Text</p>`,
-  extensions: defaultExtensions(),
+  extensions: [
+    StarterKit,
+  ],
   enablePasteRules: false,
 })
 ```
@@ -160,10 +173,12 @@ By default, tiptap injects [a little bit of CSS](https://github.com/ueberdosis/t
 
 ```js
 import { Editor } from '@tiptap/core'
-import { defaultExtensions } from '@tiptap/starter-kit'
+import StarterKit from '@tiptap/starter-kit'
 
 new Editor({
-  extensions: defaultExtensions(),
+  extensions: [
+    StarterKit,
+  ],
   injectCSS: false,
 })
 ```

docs/src/docPages/api/extensions.md

@@ -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/)           |
 | [Typography](/api/extensions/typography)                    | –                 | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-typography/)           |
 
-You don’t 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 don’t 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
 Although tiptap tries to hide most of the complexity of ProseMirror, it’s built on top of its APIs and we recommend you to read through the [ProseMirror Guide](https://ProseMirror.net/docs/guide/) for advanced usage. You’ll have a better understanding of how everything works under the hood and get more familiar with many terms and jargon used by tiptap.

docs/src/docPages/api/nodes/document.md

@@ -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+`). That’s all. But have a look yourself:
 
 :::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

docs/src/docPages/api/nodes/paragraph.md

@@ -5,7 +5,7 @@
 Yes, the schema is very strict. Without this extension you won’t even be able to use paragraphs in the editor.
 
 :::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

docs/src/docPages/api/nodes/text.md

@@ -5,7 +5,7 @@
 **The `Text` extension is required**, at least if you want to work with text of any kind and that’s very likely. This extension is a little bit different, it doesn’t even render HTML. It’s plain text, that’s all.
 
 :::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

docs/src/docPages/api/utilities/html.md

@@ -2,10 +2,15 @@
 [![Version](https://img.shields.io/npm/v/@tiptap/html.svg?label=version)](https://www.npmjs.com/package/@tiptap/html)
 [![Downloads](https://img.shields.io/npm/dm/@tiptap/html.svg)](https://npmcharts.com/compare/@tiptap/html?minimal=true)
 
-The utility helps rendering JSON content as HTML without an editor instance, for example on the server side. All it needs is a JSON and an array of extensions.
+The utility helps rendering JSON content as HTML, and generating JSON from HTML, without an editor instance, for example on the server side.
+
+All it needs is JSON or a HTML string, and a list of extensions.
 
 ## Source code
 [packages/html/](https://github.com/ueberdosis/tiptap/blob/main/packages/html/)
 
-## Usage
+## Generate HTML from JSON
 <demo name="Guide/Content/GenerateHTML" highlight="6-7,42-48"/>
+
+## Generate JSON from HTML
+<demo name="Guide/Content/GenerateJSON" highlight="6-7,18-24"/>

docs/src/docPages/guide/configuration.md

@@ -82,23 +82,25 @@ new Editor({
 Have a look at the documentation of the extension you use to learn more about their settings.
 
 ### 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
-import { Editor, defaultExtensions } from '@tiptap/starter-kit'
+import StarterKit from '@tiptap/starter-kit'
 
 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:
 
 ```js
-import { Editor, defaultExtensions } from '@tiptap/starter-kit'
+import StarterKit from '@tiptap/starter-kit'
 
 new Editor({
-  extensions: defaultExtensions({
+  extensions: StarterKit.configure({
     heading: {
       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
-import { Editor, defaultExtensions } from '@tiptap/starter-kit'
+import StarterKit from '@tiptap/starter-kit'
 import Strike from '@tiptap/extension-strike'
 
 new Editor({
   extensions: [
-    ...defaultExtensions(),
+    StarterKit,
     Strike,
   ],
 })
@@ -123,11 +125,13 @@ new Editor({
 Don’t want to load a specific extension? Just filter it out:
 
 ```js
-import { Editor, defaultExtensions } from '@tiptap/starter-kit'
+import StarterKit from '@tiptap/starter-kit'
 
 new Editor({
   extensions: [
-    ...defaultExtensions().filter(extension => extension.name !== 'history'),
+    StarterKit.configure({
+      history: false,
+    }),
   ],
 })
 ```

docs/src/docPages/guide/output.md

@@ -117,7 +117,11 @@ If you need to render the content on the server side, for example to generate th
 
 That’s what the `generateHTML()` is for. It’s a helper function which renders HTML without an actual editor instance.
 
-<demo name="Guide/Content/GenerateHTML" highlight="6-7,42-48"/>
+<demo name="Guide/Content/GenerateHTML" highlight="6-7,42-48" />
+
+By the way, the other way is possible, too. The below examples shows how to generate JSON from HTML.
+
+<demo name="Guide/Content/GenerateJSON" highlight="6-7,18-24"/>
 
 ## Migration
 If you’re migrating existing content to tiptap we would recommend to get your existing output to HTML. That’s probably the best format to get your initial content into tiptap, because ProseMirror ensures there is nothing wrong with it. Even if there are some tags or attributes that aren’t allowed (based on your configuration), tiptap just throws them away quietly.

docs/src/docPages/installation.md

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

docs/src/docPages/installation/alpine.md

@@ -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()

docs/src/docPages/installation/cdn.md

@@ -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>

docs/src/docPages/installation/livewire.md

@@ -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()

docs/src/docPages/installation/nuxt.md

@@ -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>I’m running tiptap with Vue.js. 🎉</p>',
-      extensions: defaultExtensions(),
+      extensions: [
+        StarterKit,
+      ],
     })
   },
 

docs/src/docPages/installation/react.md

@@ -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>',
   })
 

docs/src/docPages/installation/svelte.md

@@ -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

docs/src/docPages/installation/vue2.md

@@ -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>I’m running tiptap with Vue.js. 🎉</p>',
-      extensions: defaultExtensions(),
+      extensions: [
+        StarterKit,
+      ],
     })
   },
 

docs/src/docPages/installation/vue3.md

@@ -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>I’m 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>I’m running tiptap with Vue.js. 🎉</p>',
-      extensions: defaultExtensions(),
+      extensions: [
+        StarterKit,
+      ],
     })
 
     return { editor }
@@ -141,7 +145,7 @@ You’re probably used to bind your data with `v-model` in forms, that’s 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())
       },

docs/src/links.yaml

@@ -243,7 +243,7 @@
         - title: unsetMark
           link: /api/commands/unset-mark
           type: draft
-        - title: updateAtttributes
+        - title: updateAttributes
           link: /api/commands/update-attributes
         - title: wrapInList
           link: /api/commands/wrap-in-list

docs/src/pages/index.vue

@@ -121,11 +121,13 @@
 
   <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>